/* R55 AVATAR CREATOR (Claude, 2026-10-23) — the layout of public/js/avatar-creator55.js, after the owner-approved concept
   (layout reference only). Versions 3 and 4 (html[data-gfx]) only: Version 1 (classic.html) never loads this file.
   Phone first (one column), two columns from 700 px of room, the concept's three columns from 1000 px (container queries, so the
   Lab's own side spaces never break it). Every control is at least 48 × 48 px; the keyboard ring is gold; reduced motion stops every
   movement; left/right uses logical properties so Arabic (right to left) mirrors. Colours: the approved blue and gold. */
.avc{--avc-card:linear-gradient(160deg,rgba(18,70,160,.92),rgba(8,36,104,.95));--avc-edge:rgba(255,214,90,.78);--avc-ink:#fff;--avc-sub:#d9e8ff;
  --avc-tile:rgba(255,255,255,.12);--avc-tile-edge:rgba(255,255,255,.34);--avc-gold:linear-gradient(125deg,#ffdf3a,#ffa811);--avc-navy:#092a6b;
  --avc-on:#ffd23f;--avc-focus:#ffce27;container-type:inline-size;color:var(--avc-ink);font-family:var(--hn-body,inherit);margin:0 0 18px}
.avc *{box-sizing:border-box}
.avc-grid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "types" "custom" "outfits" "acc" "photo"}
.avc-col{display:contents}
.avc-types{grid-area:types}.avc-photo{grid-area:photo}.avc-custom{grid-area:custom}.avc-outfits,[data-avc-outfits]{grid-area:outfits}[data-avc-acc]{grid-area:acc}
.avc-center{grid-area:stage}
@container (min-width:700px){
  .avc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"stage custom" "types custom" "photo custom" "outfits acc"}
}
@container (min-width:1000px){
  .avc-grid{grid-template-columns:minmax(250px,300px) minmax(0,1fr) minmax(320px,400px);grid-template-areas:"left stage right";align-items:start}
  .avc-col{display:flex;flex-direction:column;gap:14px;min-width:0}
  .avc-left{grid-area:left}.avc-right{grid-area:right}
  .avc-center{position:sticky;top:8px}
}
.avc-center{display:flex;flex-direction:column;gap:10px;min-width:0}
.avc-card{background:var(--avc-card);border:2px solid var(--avc-edge);border-radius:20px;padding:14px;box-shadow:0 10px 26px rgba(3,30,90,.28),inset 0 1px 0 rgba(255,255,255,.25);min-width:0}
.avc-card h2{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:800 clamp(16px,2.2vw,19px)/1.2 var(--hn-display,inherit);letter-spacing:.02em;text-transform:uppercase;color:var(--avc-ink)}
.avc-num{display:inline-grid;place-items:center;min-width:30px;height:30px;border-radius:50%;background:var(--avc-gold);color:var(--avc-navy);font-weight:900;font-size:16px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.avc-sec{display:flex;align-items:center;gap:8px;margin:14px 0 8px;font:700 15px/1.2 var(--hn-display,inherit);color:var(--avc-ink)}
.avc-sec:first-child{margin-top:4px}
.avc-small{font-size:14px;line-height:1.4;color:var(--avc-sub);margin:8px 0}
.avc-note{opacity:.95}
.avc button,.avc .avc-file{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.avc button:focus-visible,.avc .avc-file:focus-within,.avc-scenebox button:focus-visible,.avc-classic summary:focus-visible{outline:3px solid var(--avc-focus);outline-offset:2px}
.avc button:disabled{opacity:.55;cursor:default}

/* 1 · types */
.avc-typegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.avc-type{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:48px;padding:8px 6px;border-radius:16px;border:2px solid var(--avc-tile-edge);background:var(--avc-tile);transition:transform .15s}
.avc-type .pic{display:grid;place-items:center;width:100%;aspect-ratio:1/1;max-height:96px;border-radius:12px;background:radial-gradient(circle at 50% 35%,rgba(120,200,255,.45),rgba(20,60,140,.2));overflow:hidden}
.avc-type .pic>*{width:100%;height:100%}
.avc-type .pic>img.avc-art{object-fit:cover;display:block}
.avc-type .nm{font-weight:800;font-size:15px}
.avc-type.on{border-color:var(--avc-on);box-shadow:0 0 0 3px rgba(255,210,63,.45),0 0 18px rgba(255,210,63,.45)}
.avc-ghost{font-size:38px;line-height:1;display:grid;place-items:center;width:100%;height:100%}
.avc-who{display:flex;gap:8px;overflow-x:auto;padding:10px 2px 4px;scroll-snap-type:x proximity}
.avc-who:empty{display:none}
.avc-chip{flex:0 0 auto;display:flex;align-items:center;gap:6px;min-height:48px;padding:4px 12px 4px 4px;border-radius:999px;border:2px solid var(--avc-tile-edge);background:var(--avc-tile);scroll-snap-align:start}
.avc-chip .pic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.18)}
.avc-chip .pic>*{width:100%;height:100%}
.avc-chip .nm{font-weight:700;font-size:14px;white-space:nowrap}
.avc-chip.on{border-color:var(--avc-on);background:rgba(255,210,63,.22)}

/* 2 · photo */
.avc-photo-pics{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.avc-photo-cam,.avc-photo-me{display:grid;place-items:center;aspect-ratio:1/1;max-height:110px;border-radius:14px;border:2px solid var(--avc-tile-edge);background:rgba(255,255,255,.14);font-size:40px;overflow:hidden}
.avc-photo-me>*{width:100%;height:100%}
.avc-photo-arrow{font-size:26px;color:#7fe6ff}
[dir=rtl] .avc-photo-arrow{transform:scaleX(-1)}
.avc-lock{display:flex;align-items:center;gap:8px;margin:10px 0 4px;padding:8px 12px;border-radius:999px;background:rgba(5,20,60,.45);font-weight:800}
.avc-gold,.avc .avc-file{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 18px;border-radius:15px;border:0;background:var(--avc-gold);color:var(--avc-navy)!important;font-weight:900;box-shadow:0 4px 12px rgba(180,110,0,.35);width:100%}
.avc .avc-file input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.avc .avc-file{position:relative}
.avc-ghostbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:8px 16px;border-radius:15px;border:2px solid var(--avc-tile-edge);background:var(--avc-tile);font-weight:800}

/* the stage */
.avc-stage{position:relative;height:clamp(320px,52vh,600px);border-radius:24px;overflow:hidden;border:2px solid var(--avc-edge);
  background:#1257b8;isolation:isolate;box-shadow:0 12px 30px rgba(3,30,90,.35)}
@container (min-width:1000px){.avc-stage{height:clamp(440px,62vh,640px)}}
.avc-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,40,110,.05),rgba(6,24,80,.5)),var(--avc-bg,none) 50% 72%/cover no-repeat;transform:scale(1.8);transform-origin:50% 74%}
.avc-platform{position:absolute;left:50%;bottom:4%;width:min(78%,360px);aspect-ratio:3.4/1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(140,236,255,.95),rgba(40,170,255,.55) 55%,rgba(255,214,90,.35) 78%,transparent);box-shadow:0 0 40px rgba(80,210,255,.55)}
.avc-fig{position:absolute;left:50%;bottom:8%;height:84%;aspect-ratio:3/4;transform:translateX(-50%);display:grid;place-items:end center}
.avc-fig>*{width:100%;height:100%;max-height:100%}
.avc-pet{position:absolute;inset-inline-start:6%;bottom:6%;height:30%;aspect-ratio:1/1}
.avc-pet>*{width:100%;height:100%}
.avc-poses{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.avc-pose{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:6px 4px;border-radius:14px;border:2px solid var(--avc-tile-edge);background:var(--avc-card)}
.avc-pose .e{font-size:22px;line-height:1}.avc-pose .nm{font-size:13px;font-weight:800;text-align:center;line-height:1.1}
.avc-pose.on{border-color:var(--avc-on);background:linear-gradient(180deg,rgba(64,190,255,.55),rgba(20,90,200,.8));box-shadow:0 0 14px rgba(80,210,255,.5)}
.avc-status{margin:0;min-height:22px;text-align:center;font-weight:700;color:var(--avc-ink);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.avc-status.dirty{color:#ffe58a}
.avc-actions{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}
.avc-save,.avc-scene,.avc-undo{min-height:56px;border-radius:16px;border:2px solid rgba(255,255,255,.6);font-weight:900;font-size:clamp(16px,2.4vw,20px);color:#fff!important;padding:8px 14px}
.avc-save{background:linear-gradient(180deg,#46e07a,#169c48);box-shadow:0 6px 16px rgba(10,120,50,.4)}
.avc-scene{background:linear-gradient(180deg,#a46bff,#6a2fe0);box-shadow:0 6px 16px rgba(80,30,170,.4)}
.avc-undo{background:var(--avc-tile);font-size:15px;min-width:56px}

/* 3 · tabs and panels */
.avc-tabs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:4px;margin-bottom:6px}
.avc-tab{flex:0 0 auto;display:flex;align-items:center;gap:6px;min-height:48px;padding:6px 14px;border-radius:14px;border:2px solid var(--avc-tile-edge);background:var(--avc-tile);font-weight:800;font-size:14px;white-space:nowrap}
.avc-tab.on{background:var(--avc-gold);color:var(--avc-navy)!important;border-color:#fff3b0}
.avc-panel{min-height:120px}
.avc-panel:focus{outline:none}
.avc-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px}
.avc-opt{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:48px;padding:5px 4px 6px;border-radius:14px;border:2px solid var(--avc-tile-edge);background:var(--avc-tile)}
.avc-opt .pic{display:grid;place-items:center;width:100%;aspect-ratio:1/1;max-width:72px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.12)}
.avc-opt .pic>*{width:100%;height:100%}
.avc-opts.tall .avc-opt .pic{aspect-ratio:3/4}
.avc-opt .nm{font-size:12.5px;font-weight:700;line-height:1.15;text-align:center;overflow-wrap:anywhere}
.avc-opt.on,.avc-item.on{border-color:var(--avc-on);box-shadow:0 0 0 2px rgba(255,210,63,.5),0 0 14px rgba(255,210,63,.4);background:rgba(255,210,63,.18)}
.avc-more{margin-top:8px;min-height:48px;padding:6px 14px;border-radius:14px;border:2px dashed var(--avc-tile-edge);background:transparent;font-weight:800;width:100%}
.avc-swatches{display:flex;flex-wrap:wrap;gap:6px}
.avc-swatch{width:48px;height:48px;border-radius:50%;padding:0;border:3px solid rgba(255,255,255,.75);background:var(--sw,#888);box-shadow:inset 0 -4px 8px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.25);position:relative}
.avc-swatch.on{border-color:var(--avc-on);box-shadow:0 0 0 3px rgba(255,210,63,.6),0 0 12px rgba(255,210,63,.5)}
.avc-swatch.on span::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:20px;color:#fff;text-shadow:0 0 3px #000,0 0 6px #000}
.avc-comp{display:flex;gap:12px;align-items:center}
.avc-snowy{flex:0 0 auto;width:64px}.avc-snowy img{width:64px;height:auto}

/* 4 · 5 · carousels */
.avc-carrow{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:6px;align-items:center}
.avc-arrow{width:48px;height:48px;border-radius:50%;border:2px solid var(--avc-tile-edge);background:var(--avc-tile);font-size:28px;font-weight:900;line-height:1;display:grid;place-items:center}
[dir=rtl] .avc-arrow span{display:inline-block;transform:scaleX(-1)}
.avc-track{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px;scrollbar-width:none}
.avc-track::-webkit-scrollbar{display:none}
.avc-item{flex:0 0 auto;width:88px;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:48px;padding:4px;border-radius:14px;border:2px solid var(--avc-tile-edge);background:var(--avc-tile);scroll-snap-align:start}
.avc-item .pic{width:76px;height:84px;display:grid;place-items:center;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.12)}
.avc-item .pic>*{width:100%;height:100%}
.avc-item .nm{font-size:12px;font-weight:700;line-height:1.1;text-align:center;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-avc-acc] .avc-item .pic{height:76px}

/* the classic maker (kept, folded) and the "more to make" tiles */
.avc-classic{margin:6px 0 18px;padding:0;overflow:hidden}
.avc-classic>summary{list-style:none;cursor:pointer;min-height:56px;display:flex;align-items:center;gap:10px;padding:12px 18px;font-weight:800;font-size:17px}
.avc-classic>summary::-webkit-details-marker{display:none}
.avc-classic>summary::after{content:"▾";margin-inline-start:auto;transition:transform .2s}
.avc-classic[open]>summary::after{transform:rotate(180deg)}
.avc-classic>.avt-wrap{padding:0 10px 10px}

/* age bands: bigger, simpler choices for the youngest; calmer for teens and grown-ups */
.avc[data-avc-band=early] .avc-opts{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.avc[data-avc-band=early] .avc-opt .pic{max-width:92px}
.avc[data-avc-band=early] .avc-opt .nm,.avc[data-avc-band=early] .avc-tab{font-size:16px}
.avc[data-avc-band=early] .avc-swatch{width:56px;height:56px}
.avc[data-avc-band=early] .avc-pose{min-height:64px}.avc[data-avc-band=early] .avc-pose .e{font-size:28px}
.avc[data-avc-band=teen] .avc-card h2,.avc[data-avc-band=senior] .avc-card h2,.avc[data-avc-band=adult] .avc-card h2{text-transform:none;letter-spacing:0}

/* poses on the flat drawing (the 3D figure acts them out itself) */
.avc-stage:not([data-three="1"])[data-pose=dance] .avc-fig{animation:avc-dance .9s ease-in-out infinite;transform-origin:50% 100%}
.avc-stage:not([data-three="1"])[data-pose=jump] .avc-fig{animation:avc-jump .75s cubic-bezier(.3,.1,.3,1) infinite}
.avc-stage[data-pose=super] .avc-fig{filter:drop-shadow(0 0 18px rgba(255,214,90,.85))}
.avc-stage:not([data-three="1"])[data-pose=super] .avc-fig{animation:avc-super 1.2s ease-in-out infinite}
@keyframes avc-dance{0%,100%{transform:translateX(-50%) rotate(-6deg)}50%{transform:translateX(-46%) rotate(6deg)}}
@keyframes avc-jump{0%,100%{transform:translateX(-50%) translateY(0) scaleY(1)}12%{transform:translateX(-50%) translateY(0) scaleY(.94)}50%{transform:translateX(-50%) translateY(-16%) scaleY(1.03)}}
@keyframes avc-super{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.avc-stage .avc-fig{animation:none!important}.avc-type{transition:none}.avc-classic>summary::after{transition:none}}
body.calm .avc-stage .avc-fig{animation:none!important}

/* Try in Scene */
.avc-scenemodal .modal{max-width:min(980px,96vw)}
.avc-scenestage{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#1257b8}
.avc-scenestage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avc-scenefig{position:absolute;left:50%;bottom:4%;height:80%;aspect-ratio:3/4;transform:translateX(-50%)}
.avc-scenefig>*,.avc-scenepet>*{width:100%;height:100%}
.avc-scenepet{position:absolute;inset-inline-start:18%;bottom:4%;height:28%;aspect-ratio:1/1}
.avc-scenepick{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.avc-scenebox .avc-chip{min-height:48px;padding:6px 16px;border-radius:999px;border:2px solid #9fc4ea;background:#eef6ff;color:#06316f;font-weight:800}
.avc-scenebox .avc-chip.on{background:linear-gradient(125deg,#ffdf3a,#ffa811);border-color:#ffd23f;color:#092a6b}
.avc-scenebox .avc-small{color:inherit;opacity:.85}
@media (max-width:520px){.avc-scenestage{aspect-ratio:3/4}}

/* phones: a slightly smaller stage, two-line pose labels allowed */
@container (max-width:420px){
  .avc-stage{height:330px}
  .avc-actions{grid-template-columns:1fr 1fr;}.avc-undo{grid-column:1/-1;min-height:48px}
  .avc-typegrid{gap:8px}.avc-type .pic{max-height:84px}
  .avc-pose .nm{font-size:12px}
}

/* Version 4 grown-ups: the light daytime sky — white glass, navy words, gold and blue accents */
:root[data-look=v4] .avc[data-avc-who=grownup]{--avc-card:rgba(255,255,255,.95);--avc-edge:#b9e8ff;--avc-ink:#06316f;--avc-sub:#38638b;--avc-tile:#f2f9ff;--avc-tile-edge:#cfe6fa}
:root[data-look=v4] .avc[data-avc-who=grownup] .avc-card{box-shadow:0 8px 20px rgba(6,91,153,.12),0 2px 6px rgba(6,91,153,.08)}
:root[data-look=v4] .avc[data-avc-who=grownup] .avc-lock{background:#eaf4ff}
:root[data-look=v4] .avc[data-avc-who=grownup] .avc-status{text-shadow:none}
:root[data-look=v4] .avc[data-avc-who=grownup] .avc-pose.on{color:#fff}
.avc-adult .pagehead{margin-bottom:12px}

/* the classic maker's little floating avatar is not needed above the new stage */
:root[data-gfx] body[data-page=avatar] .avt-mini{display:none!important}

/* sizes that the Version 3 / 4 button rules must not shrink (they set smaller heights on every button of a child's page) */
:root[data-gfx]:not(#avc55) .avc button{min-height:48px!important;max-height:none!important;height:auto!important;min-width:48px}
:root[data-gfx]:not(#avc55) .avc .avc-save,:root[data-gfx]:not(#avc55) .avc .avc-scene,:root[data-gfx]:not(#avc55) .avc .avc-undo,:root[data-gfx]:not(#avc55) .avc .avc-pose{min-height:56px!important}
:root[data-gfx]:not(#avc55) .avc .avc-swatch{width:48px!important;height:48px!important;min-height:48px!important;padding:0!important;border-radius:50%!important}
:root[data-gfx]:not(#avc55) .avc[data-avc-band=early] .avc-swatch{width:56px!important;height:56px!important}
:root[data-gfx]:not(#avc55) .avc .avc-arrow{width:48px!important;height:48px!important;padding:0!important;border-radius:50%!important}
:root[data-gfx]:not(#avc55) .avc-scenebox .avc-chip{min-height:48px!important}

/* “Tap to hear me”, docked above the stage on the Avatar Creator (never floating over the stage, the character or a button) */
.avc-hintdock{display:flex;justify-content:center;margin:0 0 12px}
.avc-hintdock:empty{display:none}
:root .avc-hintdock .talk-hint{position:static!important;inset:auto!important;transform:none!important;margin:0!important;max-width:100%!important;z-index:auto!important}