/* Screens: home cover, land postcards, practice cards, adventure road, wardrobe, stickers, players, grown-ups.
   The 3D renders carry their own light, so components sit on solid warm paper (never a see-through veil) and lift with soft plum depth.
   Shared component materials, used by screens.css, game.css and duel.css (all follow the theme because they mix theme tokens): */
:root{
  --card:linear-gradient(180deg,var(--paper) 40%,color-mix(in srgb,var(--paper) 90%,var(--sun))); /* warm paper, sunlit at the foot */
  --gloss:linear-gradient(180deg,rgba(255,255,255,var(--hi)),rgba(255,255,255,0) 46%);
  --lip:color-mix(in srgb,var(--paper) 70%,var(--ink-2)); /* the chunky button's bottom edge */
  --drop:0 18px 24px -16px rgb(var(--shade)/.55),0 2px 4px rgb(var(--shade)/.1);
  --item-drop:drop-shadow(0 6px 4px rgb(var(--shade)/.22)); /* contact shadow under a big 3D item */
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--lip:color-mix(in srgb,var(--paper) 55%,#000)}} /* at dusk the edge must sit darker than the face, not lighter */
.topbar{display:flex;align-items:center;gap:var(--s3);width:100%;max-width:980px;margin:0 auto var(--s4)}
.topbar h2{flex:0 1 auto;min-width:0;margin-inline:auto;padding:var(--s2) var(--s5);border-radius:var(--r-pill);background:var(--paper);box-shadow:var(--sh-1);text-align:center;font-size:var(--fs-lg)}
.spacer{flex:none;width:var(--tap)} /* same width as the icon button opposite, so the title centres */
.stitched{position:relative;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.stitched::before{content:"";position:absolute;inset:6px;border:2px dashed var(--line);border-radius:calc(var(--r-lg) - 6px);pointer-events:none}
@keyframes popIn{from{opacity:0;transform:scale(.94) translateY(8px)}}
.land,.gcard,.sticker,.item,.mode-card,.cell,.card{animation:popIn var(--t-ui) var(--d,0s) var(--ease-out) backwards}
/* a 3D game icon rises a little more when its card is under a mouse, and settles when pressed */
.badge .gi{transition:translate var(--t-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){:is(.gcard,.badge-btn,.mode-card,.level):hover .badge .gi{translate:0 -20%}}
:is(.gcard,.badge-btn,.mode-card,.level):active .badge .gi{translate:0 -8%}

/* ===== one selected look everywhere: sun ring, sun paper and a green check; --focus stays for keyboard focus only ===== */
.prof.sel,.avatar.sel,.chr-pick.sel,.mode-card.on,.chip-btn.on,.item.worn,.seg button.on,.piece.sel{position:relative;border-color:var(--sel-ring);background:var(--sel);box-shadow:var(--sh-1),0 0 0 3px color-mix(in srgb,var(--sel-ring) 35%,transparent)}
:is(.prof.sel,.avatar.sel,.chr-pick.sel,.mode-card.on,.chip-btn.on,.item.worn,.seg button.on,.piece.sel)::after{content:"";position:absolute;top:-6px;inset-inline-end:-6px;width:24px;height:24px;border-radius:50%;background:var(--leaf-d) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:0 0 0 2px var(--paper),0 2px 4px rgb(var(--shade)/.3);pointer-events:none}
:is(.avatar,.chr-pick).sel::after{top:-2px;inset-inline-end:-2px}

/* ===== home: the cover ===== */
.home{width:100%;max-width:980px;min-height:100%;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:var(--s4)}
.home-top{display:flex;justify-content:space-between;align-items:center;width:100%;gap:var(--s3)}
.home-tools{flex:none;display:flex;gap:var(--s2)}
/* the language switch names the other language in that language, so a parent who reads only that one can find it */
.lang-btn{min-height:var(--tap);padding-inline:var(--s4);font-family:var(--font-display);font-size:var(--fs-md)}
.who{display:flex;align-items:center;gap:var(--s3);min-height:72px;padding:var(--s2) var(--s4) var(--s2) var(--s2);border:0;border-radius:var(--r-pill);background:var(--paper);color:var(--ink);box-shadow:var(--sh-1);min-width:0;max-width:100%;overflow:hidden;text-align:start}
.who-av{width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--sky) 22%,var(--paper));box-shadow:inset 0 0 0 3px var(--paper),0 0 0 2px color-mix(in srgb,var(--sky-d) 45%,transparent);overflow:hidden;flex:none}
.who-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.who-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-display);font-size:var(--fs-md)}
.who-stats{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2)} /* the two counts wrap rather than run under the tools; each chip itself never breaks */
.who .chip{white-space:nowrap}
.cover{display:flex;flex-direction:column;align-items:center;gap:var(--s3);width:100%}
.banner{padding:var(--s3) var(--s7);text-align:center}
.title{margin:0;display:flex;flex-direction:column;align-items:center;line-height:1}
.title .ar{font-size:clamp(2.4rem,7vw,4rem);color:var(--title)}
.title .en{font-size:clamp(1.3rem,3.4vw,2rem);color:var(--ink);letter-spacing:.03em}
:root[data-lang="en"] .title .en{font-size:clamp(2.4rem,7vw,4rem);color:var(--title);letter-spacing:0} /* alone, the English title is the title */
.hero-char{width:clamp(130px,25vh,240px);aspect-ratio:5/6;filter:drop-shadow(0 14px 10px rgb(var(--shade)/.28))}
.badges{display:flex;gap:var(--s4);justify-content:center;flex-wrap:wrap}
.badge-btn{display:flex;flex-direction:column;align-items:center;gap:var(--s2);min-width:120px;padding:var(--s3) var(--s3) var(--s2);border:0;border-radius:var(--r-lg);background:var(--gloss),var(--card);color:var(--ink);box-shadow:0 var(--lip-h) 0 var(--lip),var(--drop);font-weight:700;transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.badge-btn .badge{width:72px;height:72px}
.badge-btn small{font-size:var(--fs-sm);color:var(--ink-2)}
/* the Fun Zone is the big door among the badges: a larger enamel disc and a sun rim */
.badge-btn.fun{box-shadow:0 var(--lip-h) 0 var(--lip),0 0 0 4px var(--sun),var(--drop)}
.badge-btn.fun .badge{width:88px;height:88px}
.badge-btn.fun>.bi{font-family:var(--font-display);font-size:var(--fs-md)}

/* ===== lands: painted postcards, the land's picture in a rounded frame and its host standing on the frame's edge ===== */
.worlds{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,176px),1fr));gap:var(--s5) var(--s4);width:100%;max-width:980px;margin:0 auto;padding-bottom:var(--s5)}
.land{--lc:var(--sky);position:relative;display:flex;flex-direction:column;padding:var(--s2);border:0;border-radius:var(--r-lg);background:var(--card);color:var(--ink);box-shadow:var(--sh-2);text-align:center;transition:transform var(--t-fast) var(--ease-out)}
.land:nth-child(odd){rotate:-.6deg}.land:nth-child(even){rotate:.6deg}
.land:active{transform:scale(.97)}
.land::before{content:"";position:absolute;top:var(--s1);left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--coral-d);box-shadow:inset 0 -2px 0 rgb(var(--shade)/.3),0 0 0 3px var(--paper),0 2px 3px rgb(var(--shade)/.3);z-index:2}
.land-top{position:relative}
.land-art{position:relative;height:136px;overflow:hidden;border-radius:calc(var(--r-lg) - var(--s2))}
.land-art .thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.land-art::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px rgba(255,255,255,.6),inset 0 -28px 24px -18px rgb(var(--shade)/.4);pointer-events:none} /* the frame's inner ring, over the picture */
.land-host{position:absolute;inset-inline-start:var(--s2);bottom:-20px;width:76px;height:76px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 3px var(--paper),0 6px 10px -4px rgb(var(--shade)/.45);overflow:hidden}
.land-body{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s5) var(--s2) var(--s2)}
.land .nm{font-family:var(--font-display);font-size:var(--fs-lg)}
.land-bar{width:80%;height:10px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--lc) 18%,var(--paper-2));box-shadow:inset 0 1px 2px rgb(var(--shade)/.2);overflow:hidden}
.land-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--lc);transform-origin:left;transform:scaleX(var(--p,0))}.land-bar i:dir(rtl){transform-origin:right}
.land-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s1) var(--s3);align-items:center;font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.land-meta span{display:inline-flex;align-items:center;gap:var(--s1)}
.land-meta .ui3d{width:1.3em;height:1.3em;margin-block:-.2em}

/* ===== a land's practice games ===== */
.hostcard{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s5) var(--s2) var(--s2);background:var(--paper);border-radius:var(--r-pill);box-shadow:var(--sh-1);max-width:640px}
.hostcard .face{width:72px;height:72px;flex:none;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--lc,var(--sky)) 22%,var(--paper))}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:var(--s4);width:100%;padding-bottom:var(--s5)}
.gcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s2);min-height:188px;padding:var(--s5) var(--s3) var(--s4);border:0;border-radius:var(--r-lg);background:var(--gloss),var(--card);color:var(--ink);box-shadow:0 var(--lip-h) 0 var(--lip),var(--drop);text-align:center;transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.gcard:active{transform:translateY(calc(var(--lip-h) - var(--press)));box-shadow:0 var(--press) 0 var(--lip),var(--sh-press)}
.gcard .badge{margin-top:var(--s2)}
.gcard.wrong{animation:popIn var(--t-ui) var(--d,0s) var(--ease-out) backwards,shake var(--t-shake) var(--ease-out)}
.gcard .num{position:absolute;inset-inline-start:var(--s3);top:var(--s3);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--paper-2);font-size:var(--fs-xs);font-weight:700}
.gcard .nm{font-family:var(--font-display);font-size:var(--fs-md)}
.gcard .stars{display:flex;align-items:center;gap:var(--s1);font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.gcard .stars .ui3d{width:1.5em;height:1.5em;margin-block:-.25em}
.gcard .stk{position:absolute;inset-inline-end:var(--s3);top:var(--s2);font-size:var(--fs-piece-sm);rotate:10deg;filter:var(--sticker-fx)}
.gcard[aria-disabled="true"],.level[aria-disabled="true"]{background:var(--lock);cursor:not-allowed}
.gcard[aria-disabled="true"]{box-shadow:0 var(--lip-h) 0 color-mix(in srgb,var(--lock) 80%,var(--ink-2)),var(--sh-1)}
.gcard .lockrule{justify-content:center}
.lockrule{display:inline-flex;align-items:center;gap:var(--s1);font-weight:700;font-size:var(--fs-sm)}
.lockrule .ui3d{width:1.5em;height:1.5em}
.levels{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center;width:100%}
.level{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s2);width:150px;max-width:100%;padding:var(--s4) var(--s3);border:0;border-radius:var(--r-md);background:var(--gloss),var(--card);color:var(--ink);box-shadow:0 var(--lip-h) 0 var(--lip),var(--drop);font-family:var(--font-display);font-size:var(--fs-md);transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.level:active{transform:translateY(calc(var(--lip-h) - var(--press)));box-shadow:0 var(--press) 0 var(--lip),var(--sh-press)}
.level.wrong{animation:shake var(--t-shake) var(--ease-out)}
.level .got{display:flex;gap:2px;font-size:var(--fs-lg)}
.level .lock .ic{width:2.4rem;height:2.4rem}

/* ===== adventure road ===== */
.j-host{display:flex;align-items:center;gap:var(--s3);align-self:center;padding:var(--s1) var(--s5) var(--s1) var(--s1);background:var(--paper);border-radius:var(--r-pill);box-shadow:var(--sh-1);margin-bottom:var(--s2)}
.j-host .face{width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--paper-2)}
#s-journey{padding-bottom:var(--s7)}
#s-journey .topbar{position:sticky;top:0;z-index:5}
#s-journey .stop{scroll-margin-top:96px} /* tabbing up the road must not hide a stop under the sticky bar */
.trail{position:relative;flex:none;width:100%;max-width:560px;margin:0 auto}
.trail-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.trail-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.trail-svg .road{stroke:#e8c99a;stroke-width:46}
.trail-svg .road-edge{stroke:#c9a06a;stroke-width:52}
.trail-svg .road-line{stroke:#fff;stroke-width:4;stroke-dasharray:4 14;opacity:.85}
.trail-svg .done{stroke:var(--leaf);stroke-width:10;opacity:.95}
.stop.t1{--lc:var(--leaf-d)}.stop.t2{--lc:var(--sky-d)}.stop.t3{--lc:var(--lilac-d)}
.stop{--lc:var(--sky-d);position:absolute;margin:-38px 0 0 -38px;width:76px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:0;border-radius:50%;color:#fff;background:var(--enamel),var(--lc);box-shadow:var(--bevel),var(--ring-in),0 10px 14px -6px rgb(var(--shade)/.5);animation:popIn var(--t-ui) var(--d,0s) var(--ease-out) backwards;transition:transform var(--t-fast) var(--ease-out)}
.stop:active{transform:scale(.95)}
.stop .ico{display:grid;place-items:center;width:100%;height:100%}
.stop .ico .gi,.stop .ico .it{width:74%;height:74%;translate:0 -8%;filter:var(--art-drop)} /* the 3D icon stands up out of the enamel stop */
.stop .ico .ui3d{width:2rem;height:2rem}
.stop .stars{position:absolute;inset:auto;left:50%;bottom:-22px;translate:-50% 0;display:flex;justify-content:center;gap:1px}
.stop .stars .ic{width:1.35rem;height:1.35rem}
/* not yet painted: a pale tint of the tier colour inside a dark tier rim, so the stop still reads against the sky */
.stop.locked{background:color-mix(in srgb,var(--lc) 22%,var(--paper));color:var(--ink-2);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--lc) 60%,var(--on-c)),inset 0 0 0 6px #fff,var(--bevel-sm),0 8px 12px -6px rgb(var(--shade)/.45)}
.stop.locked .stars{display:none}
.stop.boss{margin:-48px 0 0 -48px;width:96px;height:96px;--lc:var(--sun)}
/* the "play here next" ring, shared by the road, the map and the level picker */
:is(.stop,.land,.level).now::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:4px solid #fff;pointer-events:none;animation:ring 1.8s var(--ease-out) infinite}
.land.now{box-shadow:0 0 0 4px var(--sun),var(--sh-2)}.level.now{box-shadow:0 0 0 4px var(--sun),0 var(--lip-h) 0 var(--lip),var(--drop)} /* a solid sun ring that stays while the soft pulse fades */
:is(.land,.level).now::after{border-color:var(--sun);border-radius:calc(var(--r-md) + 6px);animation-name:ringSoft}
.land.now::after{border-radius:calc(var(--r-lg) + 6px)}
@keyframes ring{from{scale:.9;opacity:.9}to{scale:1.35;opacity:0}}
@keyframes ringSoft{from{scale:1;opacity:1}to{scale:1.06;opacity:0}}
.stop.wrong{animation:popIn var(--t-ui) var(--d,0s) var(--ease-out) backwards,shake var(--t-shake) var(--ease-out)}
.stop.unlocked{animation:unlock 500ms var(--ease-out)}
@keyframes unlock{0%{scale:.9}55%{scale:1.14}to{scale:1}}
.trail-me{position:absolute;left:0;top:0;width:72px;height:92px;pointer-events:none;z-index:2;filter:drop-shadow(0 8px 6px rgb(var(--shade)/.35))}
.trail-me.walking .chr{animation:step 240ms ease-in-out infinite alternate}
@keyframes step{from{translate:0 0;rotate:-3deg}to{translate:0 -5px;rotate:3deg}}

/* ===== sticker book: one paper page per land, earned 3D stickers stuck on it, the rest as silhouettes in dashed slots ===== */
.hint-txt{width:fit-content;max-width:560px;margin:0 auto var(--s4);padding:var(--s2) var(--s5);border-radius:var(--r-pill);background:var(--paper);box-shadow:var(--sh-1);text-align:center}
.stickers,.stk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--s3);width:100%}
.stickers{max-width:980px;margin:0 auto;padding-bottom:var(--s5)}
.stickers:has(.stk-group){display:flex;flex-direction:column;gap:var(--s5)}
.stk-group{position:relative;display:flex;flex-direction:column;gap:var(--s4);padding:var(--s4);border-radius:var(--r-lg);background:radial-gradient(circle,color-mix(in srgb,var(--ink-2) 14%,transparent) 1.2px,transparent 1.6px) 0 0/22px 22px,var(--card);box-shadow:var(--sh-2)}
.stk-head{display:flex;align-items:center;gap:var(--s3);align-self:flex-start;margin:0;padding:var(--s1) var(--s5) var(--s1) var(--s1);border-radius:var(--r-pill);background:color-mix(in srgb,var(--lc) 22%,var(--paper));box-shadow:var(--sh-1);font-family:var(--font-display);font-size:var(--fs-md)}
.stk-head .chr{width:52px;height:52px;flex:none;border-radius:50%;background:var(--paper)}
.stk-head .bi{align-items:flex-start;text-align:start}
.sticker{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s3) var(--s2);border-radius:var(--r-md);text-align:center;font-size:var(--fs-sm);font-weight:700}
.stk-big{font-size:var(--fs-piece-lg);line-height:1}
.stk-big .it{height:1.5em;filter:var(--sticker-fx)} /* a peel-off sticker: the die-cut white edge belongs to stickers only */
.sticker:nth-child(3n) .stk-big{rotate:-6deg}.sticker:nth-child(3n+1) .stk-big{rotate:5deg}
.sticker.on{background:color-mix(in srgb,var(--sun) 14%,transparent)}
.sticker:not(.on){border:3px dashed color-mix(in srgb,var(--ink-2) 40%,transparent);color:var(--ink-2)}
.sticker:not(.on) .stk-big .it{filter:brightness(0) opacity(.16)}

/* ===== wardrobe: the explorer on a little podium, outfits on hangers of paper below ===== */
.wardrobe{display:flex;flex-direction:column;align-items:center;gap:var(--s4);width:100%;max-width:980px;margin:0 auto}
.wd-stage{position:relative;display:grid;grid-template-rows:100%;place-items:end center;width:min(40vh,300px);height:min(40vh,300px)}
.wd-stage::after{content:"";position:absolute;inset:4% 6% 14%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--sun) 55%,transparent),transparent 68%);z-index:0} /* a warm spotlight behind the explorer */
/* the podium: a sunny top face (::before) over a curved side (.wd-drum, added by wardrobe.js) that ends 10px lower and casts the contact shadow */
.wd-stage::before{content:"";position:absolute;inset:auto 10% 4%;height:15%;border-radius:50%;z-index:1;background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--sun) 40%,#fff),var(--sun) 60%,var(--sun-d));box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -3px 6px rgb(var(--shade)/.25)}
.wd-drum{position:absolute;inset:auto 10% calc(4% - 10px);height:calc(7.5% + 10px);border-radius:0 0 50% 50%/0 0 calc(100% - 10px) calc(100% - 10px);z-index:0;background:linear-gradient(90deg,var(--sun-dd),var(--sun-d) 40%,var(--sun-dd));box-shadow:0 14px 18px -6px rgb(var(--shade)/.45)} /* from the face's middle line down to its lower rim, 10px lower */
.wd-preview{position:relative;z-index:2;width:72%;height:84%;margin-bottom:9%;filter:drop-shadow(0 8px 6px rgb(var(--shade)/.3))}
.wd-chars{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center;padding:var(--s3)}
:is(.land,.gcard,.chr-pick,.item,.opt,.stop){scroll-margin:16px} /* the 4px focus ring and its offset stay inside the scroll area */
.chr-pick{position:relative;width:68px;height:68px;padding:0;border:4px solid transparent;border-radius:50%;background:color-mix(in srgb,var(--sky) 18%,var(--paper));box-shadow:var(--sh-1)}
.chr-pick .chr,.avatar .chr{border-radius:50%;overflow:hidden}
.wd-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:var(--s3);width:100%;padding-bottom:var(--s4)}
.item{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s1);padding:var(--s3) var(--s2) var(--s3);border:3px solid transparent;border-radius:var(--r-md);background:var(--gloss),var(--card);color:var(--ink);box-shadow:0 var(--lip-h) 0 var(--lip),var(--drop);transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.item.previewing{border-color:var(--sun-d);background:color-mix(in srgb,var(--sun) 16%,var(--paper))}
.item-av{width:88px;height:88px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,var(--paper),color-mix(in srgb,var(--lilac) 26%,var(--paper)))}
.item .nm{font-size:var(--fs-sm)}
.price{display:inline-flex;align-items:center;gap:var(--s1);font-weight:700;font-variant-numeric:tabular-nums}
.price .ui3d{width:1.4em;height:1.4em}
.buy-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--tap);padding:var(--s1) var(--s5);border:0;border-radius:var(--r-pill);background:var(--enamel),var(--sun);color:var(--on-c);font-family:var(--font-display);font-size:var(--fs-md);font-variant-numeric:tabular-nums;box-shadow:0 var(--lip-h-sm) 0 var(--sun-d),0 10px 14px -8px var(--sun-dd);transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.buy-btn.wrong,.gate-display.wrong{animation:shake var(--t-shake) var(--ease-out)}
.buy-btn:active{transform:translateY(calc(var(--lip-h-sm) - var(--press)));box-shadow:0 var(--press) 0 var(--sun-d),0 4px 8px -6px var(--sun-dd)}
.buy-btn .ui3d{width:1.5em;height:1.5em}

/* ===== players and name entry ===== */
.profs,.avatars{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center}
.prof{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s1);width:112px;padding:var(--s2);border:3px solid transparent;border-radius:var(--r-md);background:var(--gloss),var(--card);color:var(--ink);box-shadow:0 var(--lip-h) 0 var(--lip),var(--drop);transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
/* the lipped card buttons sink onto their lip when pressed, like every other toy button */
:is(.badge-btn,.item,button.prof):active{transform:translateY(calc(var(--lip-h) - var(--press)));box-shadow:0 var(--press) 0 var(--lip),var(--sh-press)}
.pav{display:flex;align-items:center;justify-content:center;width:64px;height:64px}
.prof .pav{overflow:hidden;border-radius:50%;background:color-mix(in srgb,var(--sky) 18%,var(--paper))}
.prof.add .pav .ui3d{width:36px;height:36px}
.pnm{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.avatar{position:relative;width:88px;height:88px;padding:0;border:4px solid transparent;border-radius:50%;background:color-mix(in srgb,var(--sky) 18%,var(--paper));box-shadow:var(--sh-1)}
.name-input{width:100%;max-width:320px;padding:var(--s3) var(--s4);border:3px solid var(--ink-2);border-radius:var(--r-md);background:var(--paper-2);color:var(--ink);font:700 var(--fs-lg)/1.2 var(--font-ui);text-align:center}
.name-input:focus{border-color:var(--focus)}
.pick-label{text-align:center}
.lang-pick{display:flex;gap:var(--s3);width:100%;justify-content:center}
.lang-pick .btn{flex:1 1 0;max-width:220px;min-height:84px;padding-inline:var(--s3);font-size:var(--fs-xl)}
.row-btns{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center}

/* ===== grown-ups ===== */
.parent{width:100%;max-width:760px;margin:0 auto var(--s5);padding:var(--s2) var(--s5) var(--s5)}
.psec{padding-block:var(--s4);border-bottom:1px solid var(--line)}
.psec:last-child{border-bottom:0}
.psec h3{margin-bottom:var(--s3);font-size:var(--fs-md);text-align:start}
.phead{display:flex;align-items:center;gap:var(--s4)}
.phead .pav{flex:none;aspect-ratio:1;width:84px;height:84px;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--sky) 18%,var(--paper))}
.pname{font-family:var(--font-display);font-size:var(--fs-xl)}
.pmeta{font-size:var(--fs-sm);color:var(--ink-2)}
.skill{display:grid;grid-template-columns:40px minmax(110px,170px) 1fr 44px 34px;align-items:center;gap:var(--s3);padding-block:var(--s1)}
.sk-av{width:36px;height:36px}
.sk-nm{font-size:var(--fs-sm);align-items:flex-start}
.sk-bar{height:12px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--leaf) 16%,var(--paper-2));box-shadow:inset 0 1px 2px rgb(var(--shade)/.2);overflow:hidden}
.sk-bar i{display:block;height:100%;border-radius:inherit;background:var(--leaf)}
.sk-pct{font-weight:700;text-align:end;font-variant-numeric:tabular-nums}
.sk-n{color:var(--ink-2);font-size:var(--fs-xs);text-align:end;font-variant-numeric:tabular-nums}
.insight{margin:var(--s3) 0 0;font-weight:700}
.pstats{display:flex;gap:var(--s5);flex-wrap:wrap;font-size:var(--fs-lg);font-weight:700}
.pstats span{display:inline-flex;align-items:center;gap:var(--s2)}
.prow{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding-block:var(--s2)}
.seg{display:flex;padding:4px;border-radius:var(--r-pill);background:var(--paper-2)}
.seg button{min-height:48px;padding:var(--s2) var(--s4);border:0;border-radius:var(--r-pill);background:none;font-weight:700}
.seg button.on{box-shadow:var(--sh-1),inset 0 0 0 3px var(--sel-ring)}
.seg button:focus-visible{outline:4px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 8px var(--focus-halo)}
.pdanger{display:flex;gap:var(--s3);flex-wrap:wrap}
.notice{margin-block:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-md);background:var(--bad-bg);color:var(--bad);font-weight:700}
@media (max-width:560px){
  .skill{grid-template-columns:36px 1fr auto auto;row-gap:var(--s1)}
  .sk-av{grid-row:span 2}
  .sk-bar{order:1;grid-column:2/-1;display:block}
}

/* ===== grown-up gate: a typed answer on a keypad ===== */
.gate-sum{display:flex;flex-direction:column;align-items:center}.gate-sum small{font-size:.4em}
#gate-opts:has(.gate-pad){display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.gate-display{display:block;min-width:180px;min-height:var(--tap);padding:var(--s2) var(--s4);border:3px solid var(--ink-2);border-radius:var(--r-md);background:var(--paper-2);color:var(--ink);font-family:var(--font-display);font-size:var(--fs-piece);line-height:1.2;letter-spacing:.08em;text-align:center;font-variant-numeric:tabular-nums}
.gate-pad{display:grid;grid-template-columns:repeat(3,var(--tap));gap:var(--s2);justify-content:center;direction:ltr}
.gate-key{display:grid;place-items:center;width:var(--tap);height:var(--tap);border:0;border-radius:var(--r-md);background:var(--gloss),var(--card);color:var(--ink);font-family:var(--font-display);font-size:var(--fs-piece-sm);font-variant-numeric:tabular-nums;box-shadow:0 var(--lip-h-sm) 0 var(--lip),var(--drop);transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.gate-key:active{transform:translateY(calc(var(--lip-h-sm) - var(--press)));box-shadow:0 var(--press) 0 var(--lip),var(--sh-press)}
.gate-key.ok{background:var(--enamel),var(--sun);color:var(--on-c);box-shadow:0 var(--lip-h-sm) 0 var(--sun-d),var(--drop)}
.gate-key .ui3d{width:34px;height:34px}

/* small leftovers */
.hostcard .say{font-size:var(--fs-md)}
.j-host .say{display:flex;gap:var(--s2);align-items:center;font-weight:700}
.break-face{width:140px;height:160px}

/* dark: the playable card leads, locked ones step back */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .gcard[aria-disabled="true"]{opacity:.78}
  :root:not([data-theme="light"]) .gcard:not([aria-disabled="true"]){box-shadow:0 var(--lip-h) 0 var(--lip),0 0 0 3px var(--sun),var(--drop)}
  :root:not([data-theme="light"]) .sticker:not(.on) .stk-big .it{filter:brightness(0) invert(1) opacity(.2)} /* a pale silhouette on the dusk page */
}
/* reduced motion: the "next" ring stays as a still outline so the suggestion is not lost */
@media (prefers-reduced-motion:reduce){:is(.stop,.land,.level).now::after{animation:none !important}}

/* a short screen (the same 700px step as the game): the explorer steps back and the cover tightens, so home fits without scrolling */
@media (max-height:700px){
  .home{gap:var(--s2)}.cover{gap:var(--s2)}.banner{padding-block:var(--s2)}
  .hero-char{width:clamp(72px,12vh,170px)}
  .cover .btn.big{min-height:72px;padding-block:var(--s2)}
  .badges{gap:var(--s2)}.badge-btn{padding-block:var(--s2) var(--s1)}.badge-btn .badge,.badge-btn.fun .badge{width:56px;height:56px}
  .avatars{display:grid;grid-template-columns:repeat(4,1fr);justify-items:center;gap:var(--s2)}.avatar{width:64px;height:64px} /* first run: all eight friends in two rows, so Start stays on screen */
}
@media (max-width:640px){
  .wd-stage{position:sticky;top:0;z-index:3;width:100%;height:min(30vh,230px);border-radius:0 0 var(--r-lg) var(--r-lg);background:var(--card);box-shadow:var(--sh-1)}
  .wd-stage::after{inset:4% 22% 12%}
  .wd-stage::before{inset:auto 28% 5%;height:13%}.wd-drum{inset:auto 28% calc(5% - 10px);height:calc(6.5% + 10px)}
  .wd-preview{width:50%;height:84%}
  .wd-items{grid-template-columns:repeat(2,1fr)}
  .item-av{width:72px;height:72px}
}
@media (max-width:480px){
  .badges{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);width:100%}
  .badge-btn{display:grid;grid-template-columns:auto 1fr;align-items:center;justify-items:start;column-gap:var(--s3);row-gap:2px;min-width:0;padding:var(--s3) var(--s2);text-align:start}
  .badge-btn .badge{grid-row:span 2;width:56px;height:56px}
  .badge-btn .bi{align-items:flex-start;text-align:start}
  .badge-btn .bi .en{font-size:var(--fs-xs)}
  .badge-btn.fun{grid-column:1/-1;order:-1;grid-template-columns:auto auto;justify-content:center;padding-block:var(--s2)}.badge-btn.fun .badge{width:60px;height:60px}
  .hero-char{width:clamp(110px,17vh,200px)} /* the Fun Zone row costs a row of badges: the explorer steps back so home still fits */
  .banner{padding-inline:var(--s5)}
  .land-art{height:96px}
  .land .nm{font-size:var(--fs-md)}
  .land-body{padding:var(--s5) var(--s1) var(--s1)}
  .land-host{bottom:-14px;width:60px;height:60px}
  .land-meta{flex-direction:column;gap:var(--s1)} /* 3-digit star totals do not fit beside the stops on every card; stack on all so rows match */
  .phead .pav{width:64px;height:64px}
  .home-tools{gap:var(--s1)}
  /* the language switch takes the fullscreen button's place on a phone (Add to Home Screen opens the game full screen there) */
  #btn-full{display:none}.lang-btn{padding-inline:var(--s3);font-size:var(--fs-sm)}
  .topbar h2{font-size:var(--fs-md);padding-inline:var(--s3)}
  .topbar .chip{white-space:nowrap}
  /* four controls do not fit one phone row: the land name drops to its own line instead of breaking word by word */
  #s-journey .topbar{flex-wrap:wrap;justify-content:space-between;row-gap:var(--s2)}
  #s-journey .topbar h2{order:1;white-space:nowrap;max-width:100%}
}
/* the narrowest phones: three 64px tools leave the player pill about 120px, too little for an avatar and the coin count.
   The tools step down to 56px (still above the 44px WCAG target), the avatar names the player (the name stays for screen readers),
   and the two counts stack, so the coins are never cut */
@media (max-width:400px){
  .home-top{gap:var(--s2)}.home-tools{gap:var(--s1)}.home-tools .icon-btn{width:56px;height:56px}
  .who{position:relative;min-height:64px;gap:var(--s2);padding:var(--s1) var(--s3) var(--s1) var(--s1)}
  .who-av{width:44px;height:44px}
  .who-name{position:absolute;width:1px;height:1px;clip-path:inset(50%)}
  .who-stats{flex-direction:column;align-items:flex-start;gap:2px}
  .who .chip{padding-inline:var(--s2)}
}
/* a phone on its side: title, explorer and the play button on the left, the four badges in a 2x2 grid on the right, all above the fold */
@media (orientation:landscape) and (max-height:480px){
  .home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:auto 1fr;align-items:center;justify-items:center;gap:var(--s2) var(--s5)}
  .home-top{grid-column:1/-1}
  .cover{gap:var(--s2)}
  .banner{padding:var(--s2) var(--s5)}
  .title .ar,:root[data-lang="en"] .title .en{font-size:2rem}.title .en{font-size:1.1rem}
  .hero-char{width:clamp(64px,calc(100dvh - 296px),120px)}
  .cover .btn.big{min-height:var(--tap);padding-block:var(--s2)}
  .badges{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);width:100%}
  .badge-btn{display:grid;grid-template-columns:auto 1fr;align-items:center;justify-items:start;column-gap:var(--s2);row-gap:2px;min-width:0;padding:var(--s2) var(--s3) var(--s2) var(--s2);text-align:start}
  .badge-btn .badge{grid-row:span 2;width:52px;height:52px}
  .badge-btn .bi{align-items:flex-start;text-align:start}
  .badge-btn.fun{grid-column:1/-1;order:-1}.badge-btn.fun .badge{width:52px;height:52px}
}
/* a short phone, upright or on its side: five badges as three columns of upright tiles (two rows), so the Fun Zone costs no extra row */
@media (max-width:480px) and (max-height:700px),(orientation:landscape) and (max-height:480px){
  .badges{grid-template-columns:repeat(3,1fr);gap:var(--s2)}
  .badge-btn,.badge-btn.fun{grid-column:auto;order:0;grid-template-columns:1fr;justify-items:center;justify-content:stretch;text-align:center;padding:var(--s1)}
  .badge-btn .badge,.badge-btn.fun .badge{grid-row:auto;width:48px;height:48px}
  .badge-btn .bi{align-items:center;text-align:center}
}
@media (max-width:480px) and (max-height:700px){.hero-char{width:clamp(72px,12vh,170px)}}