/* Avatar Maker. Shared styles come from /assets/css/game.css */
.am-app{display:flex;flex-direction:column;gap:12px}
.am-main{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:14px;align-items:start}
.am-side{display:flex;flex-direction:column;background:var(--panel);border:3px solid var(--hard);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;position:sticky;top:8px;max-height:calc(calc(100 * var(--vh,1vh)) - 16px);max-height:calc(100dvh - 16px)}
.am-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px;border-bottom:3px solid var(--hard);background:var(--panel2)}
.am-cat{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border-radius:11px;border:3px solid var(--hard);background:var(--panel);color:var(--text);font:800 .68rem 'Inter',sans-serif;cursor:pointer;box-shadow:var(--shadow-sm)}
.am-cat i{font-size:1.1rem}
.am-cat:hover{transform:translateY(-1px)}
.am-cat[aria-selected=true]{background:var(--gold);color:var(--hard)}
.am-panel{padding:12px 12px 16px;overflow:auto;-webkit-overflow-scrolling:touch;min-height:300px;display:flex;flex-direction:column;gap:14px}
.am-sec h3{margin:0 0 8px;font:800 .8rem 'Inter',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
.am-sec .hint{margin:0 0 8px}
.am-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.am-tiles.c4{grid-template-columns:repeat(4,1fr)}
.am-tiles.c3{grid-template-columns:repeat(3,1fr)}
.am-tile{display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:4px;border-radius:12px;border:3px solid var(--line);background:var(--bg);color:var(--text);cursor:pointer;min-width:0}
.am-tile:hover{border-color:var(--sky)}
.am-tile[aria-pressed=true]{border-color:var(--gold);background:var(--panel2);box-shadow:0 0 0 2px var(--gold)}
.am-thumb{display:block;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:repeating-conic-gradient(var(--panel2) 0 25%,var(--panel) 0 50%) 0 0/14px 14px}
.am-thumb svg{display:block;width:100%;height:100%}
.am-tl{font:700 .62rem 'Inter',sans-serif;text-align:center;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-sw{display:flex;flex-wrap:wrap;gap:7px}
.am-s{width:30px;height:30px;border-radius:50%;border:3px solid var(--hard);padding:0;cursor:pointer;box-shadow:var(--shadow-sm);flex:none;position:relative}
.am-s[aria-pressed=true]{outline:3px solid var(--gold);outline-offset:2px}
.am-s-none{background:var(--panel2);color:var(--muted);display:grid;place-items:center;font-size:.8rem}
.am-s-custom{display:grid;place-items:center;background:conic-gradient(#ef4444,#facc15,#22c55e,#3b82f6,#a855f7,#ef4444);color:#fff;font-size:.75rem;overflow:hidden}
.am-s-custom input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;padding:0;border:0}
.am-s-custom i{pointer-events:none;text-shadow:0 1px 2px #000}
.am-seg button{font-size:.78rem}

.am-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.am-stage{position:relative;display:grid;place-items:center;padding:14px;border:3px solid var(--hard);border-radius:var(--r);box-shadow:var(--shadow);background:var(--panel2) var(--dots) 0 0/18px 18px;min-height:360px}
.am-view{width:100%;display:flex;justify-content:center;align-items:center}
/* the picture is sized by game.js (fit the room, keep the shape); this is only the fallback before it runs */
.am-view svg{display:block;width:100%;max-width:520px;height:auto;flex:none;border-radius:14px;border:3px solid var(--hard);box-shadow:var(--shadow);background:#fff0}
.am-view.am-v-full svg{max-width:330px}
.am-stage-bar{position:absolute;left:12px;right:70px;bottom:12px;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start}
.am-bar{padding:12px 14px}
.am-bar-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.am-bar .am-seg{width:auto}
.am-bar .am-seg button{padding:8px 14px}
.am-save{display:flex;flex-direction:column;gap:10px}
.am-btns{display:flex;flex-wrap:wrap;gap:10px}
.am-locked{padding:12px 14px;border:3px dashed var(--line);border-radius:12px;background:var(--bg)}
.am-locked h3{margin:0 0 6px;font-size:1rem}
.am-locked p{margin:0;color:var(--soft)}
.am-mine-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.am-card{display:flex;flex-direction:column;gap:6px;padding:8px;border:3px solid var(--line);border-radius:12px;background:var(--bg)}
.am-card.on{border-color:var(--gold)}
.am-card-pic{display:block;padding:0;border:3px solid var(--hard);border-radius:10px;overflow:hidden;background:none;cursor:pointer;aspect-ratio:340/352}
.am-card-pic svg{display:block;width:100%;height:100%}
.am-card-name{font:800 .85rem 'Inter',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-card-act{display:flex;gap:6px}
.am-card-act .btn:first-child{flex:1}

/* full screen: the options stay on the left, the character fills the rest */
html.gic-fs .am-main{height:calc(100vh - 16px);height:calc(100dvh - 16px);grid-template-columns:minmax(300px,380px) minmax(0,1fr)}
html.gic-fs .am-side{position:static;max-height:100%;height:100%}
html.gic-fs .am-panel{flex:1;min-height:0}
html.gic-fs .am-col{height:100%}
html.gic-fs .am-stage{flex:1;min-height:0;padding:10px 60px 10px 10px;display:flex;flex-direction:column;gap:8px;place-items:unset;overflow:hidden}
html.gic-fs .am-view,html.gic-fs .am-view.am-v-portrait,html.gic-fs .am-view.am-v-full{position:relative;inset:auto;flex:1 1 0;min-height:0;width:100%;height:auto;max-width:none;max-height:none;aspect-ratio:auto;display:flex;align-items:center;justify-content:center}
html.gic-fs .am-view svg{width:auto;height:auto;max-width:100%;max-height:100%;flex:none}
html.gic-fs .am-view.am-v-portrait svg{--ar:340/352}
html.gic-fs .am-view.am-v-full svg{--ar:400/740}
html.gic-fs .am-stage-bar{position:static;flex:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
.am-stage-bar .btn{padding:7px 11px;font-size:.82rem;white-space:nowrap}
.am-seg button{white-space:nowrap}
.am-stage-bar .am-seg button{padding:7px 11px}

@media(max-width:860px){
  .am-main{grid-template-columns:1fr}
  /* phone: character, quick buttons, then the options right under it; saving and 'my characters' after */
  .am-col{display:contents}
  .am-stage{order:1}.am-bar{order:2}.am-side{order:3}.am-save{order:4}.am-mine{order:5}
  .am-side{position:static;max-height:none}
  .am-panel{max-height:calc(56 * var(--vh,1vh))}
  .am-stage{min-height:0;padding:10px}
  .am-cats{grid-template-columns:repeat(4,1fr)}
  .am-tiles,.am-tiles.c3{grid-template-columns:repeat(3,1fr)}
  html.gic-fs .am-main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,42%);height:calc(100vh - 12px);height:calc(100dvh - 12px)}
  html.gic-fs .am-stage{padding:8px 58px 8px 8px}
  html.gic-fs .am-cats{padding:6px;gap:4px}
  html.gic-fs .am-cat{padding:4px 2px}
  html.gic-fs .am-cat i{font-size:.95rem}
  html.gic-fs .am-col{display:flex;order:-1}
  html.gic-fs .am-side{height:auto}
}

/* a phone held sideways is short: put the options beside the character, as on a computer */
@media(orientation:landscape) and (max-height:520px){
  html.gic-fs .am-main{grid-template-columns:minmax(230px,44%) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:calc(100vh - 12px);height:calc(100dvh - 12px)}
  html.gic-fs .am-col{display:flex;order:2}
  html.gic-fs .am-side{order:1}
  html.gic-fs .am-side{height:100%}
  html.gic-fs .am-cats{grid-template-columns:repeat(4,1fr);padding:5px;gap:4px}
  html.gic-fs .am-cat{padding:3px 2px;font-size:.62rem}
  html.gic-fs .am-cat i{font-size:.85rem}
}