/* ==========================================================================
   The Lost Kingdom Mission — style.css
   Pixel-adventure look built around the Illustrator board elements
   (sky, clouds, coins, bricks, blocks, speech bubbles, green tile letters).
   Sections: 1 tokens · 2 base · 3 pixel frame + buttons · 4 welcome · 5 join
             6 lobby · 7 HUD · 8 world · 9 mission + board · 10 team
             11 overlays · 12 scoreboard · 13 fx · 14 responsive
   ========================================================================== */

/* 1 ─ Tokens ─────────────────────────────────────────────────────────────── */
:root{
  color-scheme: light;
  --sky:#5ccff2; --sky-2:#a8e7f8; --dusk:#ffcf9e;
  --grass:#3dc45b; --leaf:#2a9a44; --leaf-d:#17702f;
  --dirt:#8b4a2b; --brick:#a65a32;
  --night:#0d2a47; --night-2:#14395f; --night-3:#1d4a77;
  --ink:#14213d; --ink-2:#33405e; --muted:#5d6886;
  --paper:#fffaf0; --paper-2:#fff0d4; --paper-3:#f6e2bb;
  --coin:#f6c21b; --coin-d:#d4920f; --coin-ink:#4a2c00;
  --red:#e4572e; --red-d:#b63b1a;
  --orange:#f7943a; --teal:#1f86a3; --teal-d:#156179;
  --blue:#2486e0; --blue-d:#1763ad;
  --good:#2fb35a; --warn:#f08a24; --bad:#e2463a;
  --f-display:"Pixelify Sans","Silkscreen",ui-monospace,monospace;
  --f-label:"Silkscreen","Pixelify Sans",ui-monospace,monospace;
  --f-body:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --px:4px;
  --gut:clamp(12px,2vw,24px);
}

/* 2 ─ Base ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--f-body);font-size:16px;line-height:1.45;color:var(--ink);
  background:var(--night);
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%,#ffffff55 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 60%,#ffffff40 50%,transparent 51%),
    radial-gradient(1px 1px at 45% 80%,#ffffff40 50%,transparent 51%);
  background-size:220px 220px,300px 300px,180px 180px;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%}
p{margin:0}
h1,h2,h3{margin:0;line-height:1.1;text-wrap:balance}
.h2{font-family:var(--f-display);font-weight:700;font-size:24px}
.h3{font-family:var(--f-display);font-weight:700;font-size:19px}
.muted{color:var(--muted)}
.small{font-size:13.5px}
.eyebrow{font-family:var(--f-label);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.count{font-family:var(--f-label);font-size:14px;color:var(--teal);vertical-align:middle}
.chip{font-family:var(--f-label);font-size:12px;text-transform:uppercase;letter-spacing:.05em;background:var(--paper);padding:6px 10px;display:inline-flex;gap:8px;align-items:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.screen{display:none;min-height:100vh}
.screen.is-active{display:block}

/* 3 ─ Pixel frame, panels, buttons, inputs ───────────────────────────────── */
/* Notched 8-bit border: four flat shadows leave the corners open. */
.panel,.chip,.btn,.input,.herocard,.role,.card,.pin,.member,.challenge,.myrole,.ability,.tool-box,.notice,.toast,.rv,.sb__main{
  --bc:var(--ink);
  box-shadow:
    0 calc(var(--px)*-1) 0 0 var(--bc), 0 var(--px) 0 0 var(--bc),
    calc(var(--px)*-1) 0 0 0 var(--bc), var(--px) 0 0 0 var(--bc);
  margin:var(--px);
}
.panel{background:var(--paper);padding:20px;min-width:0;position:relative}
.panel::after{content:"";position:absolute;inset:auto 0 0 0;height:var(--px);background:#0000000f;pointer-events:none}
.panel__head{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}

.btn{
  --c:var(--paper);--t:var(--ink);
  appearance:none;border:0;cursor:pointer;
  font-family:var(--f-label);font-size:13px;letter-spacing:.06em;text-transform:uppercase;line-height:1.1;
  background:var(--c);color:var(--t);padding:11px 16px;white-space:nowrap;
  box-shadow:
    0 calc(var(--px)*-1) 0 0 var(--bc), 0 var(--px) 0 0 var(--bc),
    calc(var(--px)*-1) 0 0 0 var(--bc), var(--px) 0 0 0 var(--bc),
    inset -4px -4px 0 0 #00000030, inset 4px 4px 0 0 #ffffff55;
  transition:transform .08s steps(2),filter .12s;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(3px)}
.btn:focus-visible{outline:3px solid var(--coin);outline-offset:6px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:grayscale(.4)}
.btn--primary{--c:var(--red);--t:#fff}
.btn--teal{--c:var(--teal);--t:#fff}
.btn--blue{--c:var(--blue);--t:#fff}
.btn--gold{--c:var(--coin);--t:var(--coin-ink)}
.btn--green{--c:var(--good);--t:#fff}
.btn--ghost{--c:var(--paper)}
.btn--sm{font-size:11px;padding:7px 10px}
.btn--lg{font-size:16px;padding:15px 22px}
.btn--xs{font-size:10px;padding:5px 7px;--px:3px;margin:3px}
.btnrow{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.btnrow--center{justify-content:center}

.input{background:#fff;border:0;padding:11px 12px;width:100%;min-width:0;font-size:16px;--bc:var(--ink-2)}
.input:focus{outline:none;--bc:var(--teal);background:#f3fcff}
.input--sm{font-size:14px;padding:8px 10px}
.input--code{font-family:var(--f-display);font-size:28px;letter-spacing:.3em;text-transform:uppercase;width:150px;text-align:center;padding:8px}
.textarea{resize:vertical;min-height:84px;line-height:1.4}
.field{display:flex;flex-direction:column;gap:8px;border:0;padding:0;margin:0;min-width:0}
.field__label{font-weight:800;font-size:15px}
.field--inline{flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap}
.field--inline .input{width:auto}
.form-error{color:var(--bad);font-weight:700;min-height:1.2em}
.notice{background:var(--paper-2);padding:10px 12px;font-size:14px;--bc:var(--orange)}

/* Green tile letters from the board file */
.tile-title{display:flex;flex-direction:column;align-items:center;gap:6px}
.tile-word{display:inline-flex;gap:clamp(4px,.9vw,14px)}
.tile-line{display:flex;gap:clamp(14px,2.4vw,40px);flex-wrap:wrap;justify-content:center}
.tile{height:var(--th,64px);width:auto;display:block;image-rendering:auto;filter:drop-shadow(0 4px 0 #0003)}

/* 4 ─ Welcome ────────────────────────────────────────────────────────────── */
.screen--welcome{position:relative;overflow:hidden;background:var(--sky)}
.screen--welcome.is-active{display:flex;flex-direction:column}
.scene{position:absolute;inset:0;overflow:hidden;background:linear-gradient(#56ccf2 0%,#8fdcf5 60%,#c3eefa 100%)}
.scene .sc-sun{position:absolute;top:9%;right:9%;width:84px;image-rendering:pixelated}
.scene .sc-cloud{position:absolute;width:var(--w,200px);animation:drift var(--d,60s) linear infinite;animation-delay:var(--dl,0s)}
.scene .sc-hills{position:absolute;left:0;right:0;bottom:120px;height:120px;background-repeat:repeat-x;background-size:auto 120px;background-position:bottom left;image-rendering:pixelated}
.scene .sc-ground{position:absolute;left:0;right:0;bottom:0;height:128px;background:url(assets/board/ground.png) repeat-x left top/auto 128px #6b3a1e;image-rendering:pixelated}
.scene .sc-tree{position:absolute;bottom:118px;image-rendering:pixelated}
.scene .sc-castle{position:absolute;bottom:118px;right:3%;width:300px;image-rendering:pixelated}
.scene .sc-flag{position:absolute;image-rendering:pixelated;transform-origin:left center;animation:flag 1.2s steps(3) infinite}
.scene .sc-bush{position:absolute;bottom:116px;width:120px;image-rendering:pixelated}
.scene .sc-coin{position:absolute;width:30px;animation:bob 1.6s ease-in-out infinite;animation-delay:var(--dl,0s)}
.scene .sc-block{position:absolute;image-rendering:pixelated}
.scene .sc-runner{position:absolute;bottom:122px;height:96px;left:-120px;animation:runAcross var(--d,16s) linear infinite;animation-delay:var(--dl,0s)}
.scene .sc-runner img{height:100%;display:block;animation:bob .32s steps(2) infinite}
.scene .sc-princess{position:absolute;height:92px}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
@keyframes runAcross{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 240px))}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes flag{0%{transform:skewY(0)}50%{transform:skewY(-6deg) scaleX(.94)}100%{transform:skewY(3deg)}}

.welcome{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:clamp(24px,5vh,56px) var(--gut) clamp(250px,32vh,330px);text-align:center}
.welcome .tile-title{--th:clamp(34px,5.2vw,74px)}
.btn--start{--c:var(--coin);--t:var(--coin-ink);font-size:clamp(18px,2vw,24px);padding:18px 32px;animation:pulse 1.4s steps(2) infinite}
@keyframes pulse{50%{transform:translateY(-3px)}}
.welcome__foot{position:absolute;z-index:3;left:0;right:0;bottom:14px;display:flex;justify-content:center}
.welcome__foot img{background:#fff;padding:5px 9px;height:32px;width:auto}

/* 5 ─ Join ───────────────────────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:14px;padding:12px var(--gut);max-width:1320px;margin:0 auto}
.topbar__title{font-family:var(--f-display);font-weight:700;color:var(--coin);font-size:20px;margin-right:auto;text-shadow:3px 3px 0 #0008}
.join{max-width:1320px;margin:0 auto;padding:6px var(--gut) 40px;display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:22px;align-items:start}
.join__form,.join__roles{align-self:stretch}   /* both cards match the taller one */
.join__inner{display:flex;flex-direction:column;gap:18px;position:sticky;top:12px}

.herocard{background:linear-gradient(var(--sky) 0 62%,var(--grass) 62% 70%,var(--dirt) 70%);padding:14px;display:flex;gap:14px;align-items:center;min-height:150px;--bc:var(--ink)}
.herocard__imgs{display:flex;flex:none;align-items:flex-end;position:relative}
.herocard__imgs img{height:118px;filter:drop-shadow(0 4px 0 #0003);position:relative}
.herocard__imgs img+img{margin-left:-46px}
.herocard__more{position:absolute;right:-8px;top:0;font-family:var(--f-label);font-size:12px;background:var(--ink);color:#fff;padding:2px 6px}
.herocard__txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.herocard__name{font-family:var(--f-display);font-weight:700;font-size:26px;color:var(--ink);background:#fff;padding:2px 8px;align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.herocard__roles{display:flex;flex-wrap:wrap;gap:4px}
.herocard__role{font-family:var(--f-label);font-size:11.5px;background:var(--rc,var(--teal));color:#fff;padding:3px 7px;text-transform:uppercase}
.herocard__quote{font-weight:800;color:#fff;text-shadow:2px 2px 0 #0007;font-size:14.5px;line-height:1.3}
.herocard--empty{display:grid;place-items:center;color:#fff;font-weight:800;text-shadow:2px 2px 0 #0007}

.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:14px}
.role{position:relative;cursor:pointer;background:#fff;padding:12px 12px 12px 10px;display:grid;grid-template-columns:62px 1fr;gap:4px 10px;align-items:start;--bc:var(--ink-2);transition:transform .1s}
.role:hover{transform:translateY(-2px)}
.role input{position:absolute;opacity:0;pointer-events:none}
.role__img{grid-row:span 4;height:86px;justify-self:center;align-self:center;filter:drop-shadow(0 3px 0 #0002)}
.role__name{font-family:var(--f-display);font-weight:700;font-size:19px;display:flex;align-items:center;gap:6px}
.role__strength{font-weight:800;font-size:13px;color:var(--rc)}
.role__ability{font-size:12.5px;color:var(--muted);line-height:1.3}
.role__ability b{color:var(--ink)}
.role__taken{font-family:var(--f-label);font-size:10px;text-transform:uppercase;color:var(--muted)}
.role:has(input:checked){--bc:var(--rc);background:var(--paper-2);box-shadow:0 -4px 0 var(--bc),0 4px 0 var(--bc),-4px 0 0 var(--bc),4px 0 0 var(--bc),0 0 0 8px #ffffff40}
.role:has(input:focus-visible){outline:3px solid var(--coin);outline-offset:8px}
.role.is-taken{opacity:.5;cursor:not-allowed}
.role__check{position:absolute;top:-8px;right:-8px;width:28px;height:28px;display:grid;place-items:center;background:var(--rc);color:#fff;font-weight:800;font-size:16px;box-shadow:0 0 0 3px var(--ink);opacity:0;transform:scale(.5);transition:all .15s steps(3)}
.role:has(input:checked) .role__check{opacity:1;transform:none}
.role.is-taken:hover{transform:none}
.role__swatch{width:10px;height:10px;background:var(--rc);display:inline-block}

/* 6 ─ Lobby ──────────────────────────────────────────────────────────────── */
@keyframes blink{50%{opacity:.45}}
.tag{font-family:var(--f-label);font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;padding:2px 5px;background:var(--ink);color:#fff;align-self:flex-start}
.tag--host{background:var(--coin);color:var(--coin-ink)}
.tag--sim{background:#c9d2e6;color:var(--ink)}
.tag--you{background:var(--red)}
@keyframes popIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* 7 ─ HUD ────────────────────────────────────────────────────────────────── */
.screen--game{padding-bottom:30px}
.hud{position:sticky;top:0;z-index:40;background:var(--ink);color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:8px var(--gut);border-bottom:4px solid #000}
.hud__brand{font-family:var(--f-display);font-weight:700;color:var(--coin);font-size:20px;text-shadow:2px 2px 0 #000}
.hud__stages{list-style:none;margin:0;padding:0;display:flex;gap:6px;margin-right:auto}
.hud__stages li{font-family:var(--f-label);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:5px 8px;background:var(--night-2);color:#9fb2d4;display:flex;gap:6px;align-items:center}
.hud__stages li b{font-weight:400;background:#ffffff1f;width:18px;height:18px;display:grid;place-items:center}
.hud__stages li.is-now{background:var(--coin);color:var(--coin-ink)}
.hud__stages li.is-now b{background:#0002}
.hud__stages li.is-done{background:var(--good);color:#fff}
.hud__label{font-family:var(--f-label);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#9fb2d4}
.hud__timer{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;align-items:center}
.hud__timer .hud__label{grid-column:1}
.hud__time{grid-column:2;grid-row:span 2;font-family:var(--f-display);font-size:30px;font-variant-numeric:tabular-nums;line-height:1;min-width:76px}
.hud__timer.is-warn .hud__time{color:var(--orange)}
.hud__timer.is-danger .hud__time{color:#ff6b5e;animation:blink .5s steps(2) infinite}
.hud__timer.is-paused .hud__time{color:#9fb2d4}
.timebar{grid-column:1;position:relative;width:150px;height:14px;background:url(assets/board/timer-bar.png) center/100% 100%;image-rendering:pixelated}
.timebar__dim{position:absolute;top:0;bottom:0;right:0;width:100%;background:#0d2a47d0;transition:width .3s linear}
.timebar__coin{position:absolute;top:50%;width:20px;height:20px;transform:translate(-50%,-50%);left:0;transition:left .3s linear}
.hud__score{display:flex;align-items:center;gap:8px;background:var(--night-2);padding:4px 10px}
.hud__score b{font-family:var(--f-display);font-size:26px;color:var(--coin);font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.hud__score.is-bump b{animation:bump .5s steps(4)}
@keyframes bump{30%{transform:scale(1.35)}}
.hud__me{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px}
.hud__me img{height:34px}
.hud__me small{display:block;font-family:var(--f-label);font-size:10px;color:var(--rc);text-transform:uppercase;font-weight:400;filter:brightness(1.4)}

/* 8 ─ World (side-scrolling scene) ───────────────────────────────────────── */
.world-frame{position:relative;overflow:hidden;background:var(--night);border-bottom:4px solid #000;height:400px}
.world{position:absolute;left:0;top:0;width:1280px;height:400px;overflow:hidden;transform-origin:0 0}
.track{position:absolute;left:0;top:0;width:3840px;height:800px;transition:transform 2.6s cubic-bezier(.55,.05,.35,1)}
.track.no-anim{transition:none}
.w{position:absolute;image-rendering:pixelated}
.w-sky{left:0;top:0;width:3840px;height:400px;background:linear-gradient(90deg,#56ccf2 0%,#6fd6f4 45%,#8fd9f0 66%,#ffd7a8 92%,#ffc48f 100%)}
.w-hills{left:0;top:236px;width:3840px;height:100px;background-repeat:repeat-x;background-position:left bottom;background-size:auto 100px}
.w-ground{left:0;top:330px;width:3840px;height:70px;background:url(assets/board/ground.png) repeat-x left top/auto 70px #6b3a1e}
.w-under{left:0;top:400px;width:3840px;height:400px;background:linear-gradient(#0a2240,#0e2e52 70%,#0b2644)}
.w-underhills{left:0;top:640px;width:3840px;height:100px;background-repeat:repeat-x;background-position:left bottom;background-size:auto 100px;opacity:.9}
.w-floor{left:0;top:730px;width:3840px;height:70px;background:url(assets/board/brick.png) repeat left top/48px 38px #4a2410}
.w-cloud{animation:float 7s ease-in-out infinite alternate}
.w-coin{width:30px;height:30px;animation:bob 1.5s ease-in-out infinite}
.w-coin.is-got{animation:coinGet .6s steps(6) forwards}
.w-star{width:14px;height:14px;animation:twinkle 2.4s steps(3) infinite}
.w-root{width:56px}
@keyframes float{to{transform:translateX(26px)}}
@keyframes twinkle{50%{opacity:.25}}
@keyframes coinGet{to{transform:translateY(-60px);opacity:0}}

.loc-sign{position:absolute;left:14px;top:12px;z-index:5;background:#fffffff0;padding:6px 12px;font-family:var(--f-label);font-size:12px;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 -3px 0 var(--ink),0 3px 0 var(--ink),-3px 0 0 var(--ink),3px 0 0 var(--ink);margin:3px}
.loc-sign b{font-weight:400;color:var(--red)}

/* party layer: heroes stay in screen space while the track scrolls */
.party{position:absolute;left:0;top:0;width:1280px;height:400px;pointer-events:none;transition:transform 2.2s linear,left 2.6s cubic-bezier(.55,.05,.35,1)}
.party.no-anim{transition:none}
.hero{position:absolute;bottom:70px;width:56px;display:flex;flex-direction:column;align-items:center;transition:left .9s ease-out,opacity .6s}
.hero__img{height:80px;width:auto;display:block;filter:drop-shadow(0 3px 0 #0003);transform-origin:bottom center}
.hero__tag{font-family:var(--f-label);font-size:10px;background:#ffffffe8;color:var(--ink);padding:1px 4px;margin-top:2px;white-space:nowrap;max-width:84px;overflow:hidden;text-overflow:ellipsis;border-bottom:3px solid var(--rc)}
.hero.is-me .hero__tag{background:var(--coin)}
.hero.is-running .hero__img{animation:run .3s steps(2) infinite}
.hero.is-cheer .hero__img{animation:jump .6s steps(4) infinite}
.hero.is-idle .hero__img{animation:breathe 2.4s steps(2) infinite;animation-delay:var(--dl,0s)}
.hero.is-gone{opacity:0}
@keyframes run{0%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
@keyframes jump{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
@keyframes breathe{50%{transform:scaleY(.98)}}
.hero__bubble{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:max-content;max-width:190px;background:#fff;color:var(--ink);font-weight:800;font-size:12.5px;line-height:1.25;padding:7px 9px;text-align:left;
  box-shadow:0 -3px 0 #111,0 3px 0 #111,-3px 0 0 #111,3px 0 0 #111,5px 7px 0 0 #00000030;animation:popIn .3s steps(4) both;z-index:3}
.hero__bubble::after{content:"";position:absolute;left:calc(50% - 6px);top:100%;width:12px;height:9px;background:#111;clip-path:polygon(0 0,100% 0,50% 100%)}
.hero__bubble::before{content:"";position:absolute;left:calc(50% - 3px);top:calc(100% - 1px);width:6px;height:5px;background:#fff;clip-path:polygon(0 0,100% 0,50% 100%);z-index:1}
.hero__bubble.is-high{bottom:calc(100% + 64px)}
.hero__bubble.is-left{left:0;transform:none}
.hero__bubble.is-left::after{left:16px}
.hero__bubble.is-left::before{left:19px}
.hero__bubble.is-dots{font-size:18px;letter-spacing:2px;padding:0 10px 6px;animation:popIn .3s steps(4) both}

/* Stage 1 · forest gate */
.gate{position:absolute;left:900px;top:130px;width:204px;height:200px}
.gate__frame{position:absolute;inset:0;width:204px;height:200px}
.gate__glow{position:absolute;left:44px;top:16px;width:120px;height:184px;background:radial-gradient(closest-side,#fff7c2,#ffd85a 55%,#f6a70000);opacity:0;transition:opacity 1s}
.gate__door{position:absolute;top:46px;width:58px;height:154px;transition:transform 1.2s cubic-bezier(.3,.7,.3,1);image-rendering:pixelated}
.gate__door--l{left:44px;transform-origin:left center}
.gate__door--r{left:102px;transform-origin:right center}
.gate.is-open .gate__door--l{transform:perspective(500px) rotateY(78deg)}
.gate.is-open .gate__door--r{transform:perspective(500px) rotateY(-78deg)}
.gate.is-open .gate__glow{opacity:1}
.locks{position:absolute;left:880px;top:84px;width:244px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.lock{width:22px;height:26px;image-rendering:pixelated}
.lock.is-open{animation:popIn .4s steps(4)}

/* Stage 2 · broken bridge */
.chasm{position:absolute;left:1840px;top:730px;width:540px;height:70px;background:linear-gradient(#020a14,#000)}
.cliff{position:absolute;top:730px;width:18px;height:70px;background:url(assets/board/brick-tall.png) repeat-y left top/18px 28px}
.bridge{position:absolute;left:1840px;top:700px;width:540px;height:60px;display:flex}
.bslot{position:relative;width:90px;height:60px}
.bslot__base{position:absolute;left:6px;right:6px;top:30px;height:10px;background:repeating-linear-gradient(90deg,#7a4a24 0 12px,transparent 12px 20px);opacity:.75;transform:rotate(-4deg)}
.bslot:nth-child(even) .bslot__base{transform:rotate(5deg)}
.bslot.is-good .bslot__base{opacity:1;transform:none;background:#9a5a2c;box-shadow:0 -3px 0 #3a1a0a,0 3px 0 #3a1a0a,inset 0 2px 0 #c07a44}
.w-post{position:absolute;top:664px;width:12px;height:70px;background:linear-gradient(90deg,#b06a32,#6a3416);box-shadow:0 0 0 3px #3a1a0a}
.w-rail{position:absolute;left:1838px;top:672px;width:550px;height:4px;background:repeating-linear-gradient(90deg,#e3b874 0 8px,#b98a48 8px 16px);opacity:.8}
.bslot__hint{position:absolute;left:50%;top:-30px;transform:translateX(-50%);width:56px;height:56px;image-rendering:pixelated;opacity:.9}
.bslot__label{position:absolute;left:50%;top:-50px;transform:translateX(-50%);font-family:var(--f-label);font-size:9px;text-transform:uppercase;color:#fff;background:#0009;padding:2px 4px;white-space:nowrap}
.bslot__res{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);height:52px;width:auto;max-width:86px;image-rendering:pixelated;animation:popIn .35s steps(4)}
.bslot.is-filled .bslot__hint{opacity:.25}
.bslot.is-good .bslot__res{filter:drop-shadow(0 0 6px #6dff8e)}
.bslot.is-bad .bslot__res{animation:fall 1.2s ease-in forwards}
.bslot__mark{position:absolute;left:50%;top:-52px;transform:translateX(-50%);font-family:var(--f-label);font-size:11px;padding:2px 6px;color:#fff}
.bslot__mark.ok{background:var(--good)}
.bslot__mark.no{background:var(--bad)}
.bslot.is-trap .bslot__hint{filter:drop-shadow(0 0 8px #ff5a5a)}
@keyframes fall{30%{transform:translateX(-50%) rotate(8deg)}100%{transform:translate(-50%,120px) rotate(30deg);opacity:0}}
.w-crystal{animation:glow 2.2s ease-in-out infinite alternate}
@keyframes glow{to{filter:drop-shadow(0 0 8px #8ff3ff) brightness(1.15)}}

/* Stage 3 · castle core */
.core{position:absolute;left:3220px;top:150px;width:120px;height:182px}
.core__crystal{position:absolute;left:20px;top:0;width:80px;height:120px;image-rendering:pixelated;filter:grayscale(.85) brightness(.75);transition:filter 1s}
.core__base{position:absolute;left:4px;bottom:0;width:112px;height:56px;image-rendering:pixelated}
.core.is-on .core__crystal{filter:none;animation:coreOn 1.4s ease-in-out infinite alternate}
@keyframes coreOn{to{filter:drop-shadow(0 0 18px #9ff6ff) drop-shadow(0 0 30px #ffe680) brightness(1.2)}}
.sockets{position:absolute;left:3170px;top:84px;width:220px;height:40px;display:flex;justify-content:space-between}
.socket{width:34px;height:34px;display:grid;place-items:center;background:#1d2440;box-shadow:0 -3px 0 #000,0 3px 0 #000,-3px 0 0 #000,3px 0 0 #000;font-size:16px;filter:grayscale(1) brightness(.7);transition:filter .5s,background .5s}
.socket.is-lit{filter:none;background:var(--sc);animation:popIn .4s steps(4)}
.rival{position:absolute;left:3350px;top:220px;height:112px;transform:scaleX(-1);transition:transform 1.6s ease-in,opacity 1.6s}
.rival.is-fled{transform:scaleX(1) translate(320px,-40px) rotate(20deg);opacity:0}
.princess{position:absolute;height:84px;transition:transform .5s}
.princess.is-cheer{animation:jump .7s steps(4) infinite}
.castle{position:absolute;left:3440px;top:42px;width:360px;image-rendering:pixelated}
.flag{position:absolute;width:40px;image-rendering:pixelated;transform-origin:left center;animation:flag 1.1s steps(3) infinite}
.chest{position:absolute;left:3110px;top:290px;width:64px;image-rendering:pixelated;opacity:0;transform:translateY(20px);transition:all .6s}
.chest.is-shown{opacity:1;transform:none}

/* 9 ─ Mission + board ────────────────────────────────────────────────────── */
.mission{display:flex;flex-direction:column;gap:14px}
.mission__title{font-family:var(--f-display);font-weight:700;font-size:clamp(28px,3vw,36px);color:var(--ink)}
.mission__story{color:var(--ink-2)}
.challenge{background:var(--paper-2);padding:12px 14px;--bc:var(--coin-d)}
.challenge__label{font-family:var(--f-label);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--coin-d)}
.challenge__q{font-family:var(--f-display);font-weight:500;font-size:20px;line-height:1.25;margin-top:2px}
.myrole{background:#fff;padding:10px 12px;display:grid;grid-template-columns:52px 1fr;gap:2px 12px;align-items:center;--bc:var(--rc)}
.myrole img{height:64px;grid-row:span 2;justify-self:center}
.myrole__who{font-family:var(--f-label);font-size:11.5px;text-transform:uppercase;color:var(--rc);filter:brightness(.8)}
.myrole__prompt{font-weight:800;font-size:15px;line-height:1.3}
.action{display:flex;flex-direction:column;gap:8px}
.action__row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.action.is-locked .textarea{background:#f2f2f2}
.strengths{display:flex;flex-wrap:wrap;gap:6px}
.strengths label{cursor:pointer;position:relative}
.strengths input{position:absolute;opacity:0;pointer-events:none}
.strengths span{display:inline-flex;gap:5px;align-items:center;font-weight:800;font-size:13px;padding:5px 9px;background:#fff;box-shadow:0 -3px 0 var(--sc),0 3px 0 var(--sc),-3px 0 0 var(--sc),3px 0 0 var(--sc);margin:3px}
.strengths input:checked+span{background:var(--sc);color:#fff}
.strengths input:focus-visible+span{outline:3px solid var(--coin);outline-offset:4px}

.board__head{flex-direction:row;justify-content:space-between;align-items:baseline;flex-wrap:wrap;margin-bottom:0}
.wall__empty{grid-column:1/-1;color:var(--muted);background:#fff;padding:22px;text-align:center;font-weight:700;box-shadow:0 -3px 0 #d9cfb8,0 3px 0 #d9cfb8,-3px 0 0 #d9cfb8,3px 0 0 #d9cfb8;margin:3px}
.card{background:#fff;padding:10px 12px 10px;display:flex;flex-direction:column;gap:8px;--bc:var(--rc,var(--ink-2));position:relative;animation:popIn .35s steps(4) both}
.card__who{display:flex;gap:8px;align-items:center;min-width:0}
.card__who img{height:34px;flex:none}
.card__name{font-weight:800;font-size:14px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card__role{font-family:var(--f-label);font-size:10px;text-transform:uppercase;color:var(--rc);filter:brightness(.8)}
.card__text{font-size:15.5px;line-height:1.35;overflow-wrap:anywhere}
.card__flags{display:flex;flex-wrap:wrap;gap:4px}
.flagchip{font-size:11.5px;font-weight:800;background:var(--paper-2);padding:2px 6px}
.flagchip--str{color:#fff;background:var(--sc)}
.card__acts{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.card.is-top{--bc:var(--coin-d);background:#fffbea}
.card.is-top::before{content:"TOP IDEA";position:absolute;top:-10px;right:10px;font-family:var(--f-label);font-size:9.5px;background:var(--coin);color:var(--coin-ink);padding:2px 6px}
.card.is-mine{background:#f7fbff}

/* stage tools */
.tool:empty{display:none}
.tool-box{background:var(--night);color:#fff;padding:14px;--bc:#000;display:flex;flex-direction:column;gap:12px}
.tool-box h3{font-family:var(--f-display);font-size:19px;color:var(--coin)}
.tool-box p{font-size:14px;color:#d5def0}
.tray{display:flex;flex-wrap:wrap;gap:10px}
.tray__item{display:flex;align-items:center;gap:8px;background:var(--night-2);padding:6px 10px;font-weight:800}
.tray__item img{width:34px;height:26px;image-rendering:pixelated}
.tray__item b{font-family:var(--f-display);font-size:20px;color:var(--coin)}
.tray__item.is-empty{opacity:.45}
.bslots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.bbtn{appearance:none;border:0;cursor:pointer;background:var(--night-3);color:#fff;padding:8px 4px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:96px;box-shadow:0 -3px 0 #000,0 3px 0 #000,-3px 0 0 #000,3px 0 0 #000;margin:3px;font-size:11px;font-weight:700;position:relative}
.bbtn:hover:not(:disabled){background:#28609a}
.bbtn:focus-visible{outline:3px solid var(--coin);outline-offset:4px}
.bbtn:disabled{cursor:default}
.bbtn img{width:44px;height:34px;image-rendering:pixelated}
.bbtn__n{font-family:var(--f-label);font-size:10px;color:#9fb2d4}
.bbtn__need{font-size:10.5px;color:#ffe08a;line-height:1.15;text-align:center}
.bbtn.is-good{background:#1f6b3a}
.bbtn.is-bad{background:#7a2020}
.bbtn.is-trap{box-shadow:0 -3px 0 #ff5a5a,0 3px 0 #ff5a5a,-3px 0 0 #ff5a5a,3px 0 0 #ff5a5a}
.picker{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--night-2);padding:8px 10px}
.picker p{flex-basis:100%;font-weight:800;color:#fff}
.core-sockets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.csock{background:var(--night-2);padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;box-shadow:0 -3px 0 #000,0 3px 0 #000,-3px 0 0 #000,3px 0 0 #000;margin:3px;transition:background .4s}
.csock__gem{font-size:22px;filter:grayscale(1) brightness(.6)}
.csock__name{font-family:var(--f-label);font-size:10px;text-transform:uppercase}
.csock__n{font-weight:800;font-size:13px;color:#9fb2d4}
.csock.is-lit{background:var(--sc)}
.csock.is-lit .csock__gem{filter:none}
.csock.is-lit .csock__n{color:#fff}

/* 10 ─ Team panel ────────────────────────────────────────────────────────── */
.member{background:#fff;padding:8px 10px;display:grid;grid-template-columns:40px 1fr;gap:0 10px;align-items:center;--bc:var(--ink-2);min-width:0}
.member img{height:50px;grid-row:span 3;justify-self:center}
.member__name{font-weight:800;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;gap:5px;align-items:center}
.member__role{font-family:var(--f-label);font-size:10px;text-transform:uppercase;color:var(--rc);filter:brightness(.8)}
.member__status{font-size:12.5px;font-weight:700;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.member__status .ok{color:var(--good)}
.member__status .typing{color:var(--teal);animation:blink 1s steps(2) infinite}
.member.is-me{--bc:var(--coin);background:var(--paper-2)}

/* host dock */
.hostdock{position:fixed;right:14px;bottom:14px;z-index:45;background:var(--ink);color:#fff;padding:10px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:calc(100vw - 28px);box-shadow:0 -4px 0 var(--coin),0 4px 0 var(--coin),-4px 0 0 var(--coin),4px 0 0 var(--coin)}
.hostdock__label{font-family:var(--f-label);font-size:10.5px;text-transform:uppercase;color:var(--coin);margin-right:4px}

/* 11 ─ Overlays ──────────────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px}
.overlay--intro{pointer-events:none;background:#0d2a4766}
.intro{background:var(--ink);color:#fff;padding:22px 30px;text-align:center;max-width:640px;display:flex;flex-direction:column;gap:10px;align-items:center;animation:introIn 4.2s steps(30) both;box-shadow:0 -5px 0 var(--coin),0 5px 0 var(--coin),-5px 0 0 var(--coin),5px 0 0 var(--coin),0 12px 0 #0006}
.intro__n{font-family:var(--f-label);font-size:14px;letter-spacing:.12em;color:var(--coin)}
.intro__title{--th:44px}
.intro__theme{font-family:var(--f-label);font-size:12px;text-transform:uppercase;background:var(--teal);padding:3px 8px}
.intro__story{font-size:17px;color:#dfe7f6;max-width:48ch}
@keyframes introIn{0%{transform:scale(.7);opacity:0}8%{transform:scale(1);opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}
.overlay--review{background:#071a2fcc;overflow:auto}
.rv{background:var(--paper);width:min(720px,100%);padding:22px 24px;display:flex;flex-direction:column;gap:16px;--bc:var(--ink);animation:popIn .4s steps(5) both;max-height:calc(100vh - 32px);overflow:auto}
.rv__head{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.rv__title{--th:40px}
.rv__sub{font-family:var(--f-display);font-size:19px}
.rv__pts{font-family:var(--f-display);font-weight:700;font-size:42px;color:var(--coin-d);display:flex;align-items:center;gap:10px;justify-content:center}
.rv__pts img{width:36px}
.metrics{display:flex;flex-direction:column;gap:14px}
.metric{display:grid;grid-template-columns:150px 1fr 48px;gap:12px;align-items:center}
.metric__name{font-weight:800}
.metric__bar{height:20px;background:#e9dfc8;position:relative;box-shadow:0 -3px 0 var(--ink),0 3px 0 var(--ink),-3px 0 0 var(--ink),3px 0 0 var(--ink);margin:3px}
.metric__fill{position:absolute;inset:0 auto 0 0;background:repeating-linear-gradient(90deg,var(--mc,var(--good)) 0 14px,color-mix(in srgb,var(--mc,var(--good)) 80%,#000) 14px 16px);width:0;transition:width 1.2s steps(14)}
.metric__val{font-family:var(--f-display);font-weight:700;font-size:20px;text-align:right}
.metric__note{grid-column:2/-1;font-size:13px;color:var(--muted);margin-top:-6px}
.metric input[type=range]{grid-column:2/3;width:100%;accent-color:var(--teal)}
.rv__notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px}
.rv__foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;border-top:3px dashed var(--paper-3);padding-top:14px}
.toasts{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;width:min(560px,calc(100vw - 24px))}
.toast{background:var(--ink);color:#fff;padding:10px 16px;font-weight:700;font-size:15px;animation:toast 4.2s steps(20) both;--bc:var(--coin);text-align:center}
.toast--big{font-family:var(--f-display);font-size:20px;background:var(--teal)}
@keyframes toast{0%{opacity:0;transform:translateY(14px)}6%{opacity:1;transform:none}90%{opacity:1}100%{opacity:0}}

/* 12 ─ Scoreboard ────────────────────────────────────────────────────────── */
.sb__main{background:var(--ink);color:#fff;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;padding:26px;--bc:var(--coin)}
.sb__main::after{display:none}
.sb__eyebrow{font-family:var(--f-label);font-size:16px;letter-spacing:.14em;color:var(--coin);text-transform:uppercase}
.sb__score{font-family:var(--f-display);font-weight:700;display:flex;align-items:baseline;gap:12px}
.sb__score b{font-size:clamp(70px,10vw,124px);line-height:1;color:var(--coin);text-shadow:6px 6px 0 #000;font-variant-numeric:tabular-nums}
.sb__score span{font-size:28px;color:#9fb2d4}
.sb__banner{font-family:var(--f-display);font-weight:700;font-size:28px;background:var(--good);padding:6px 18px;box-shadow:0 -4px 0 #000,0 4px 0 #000,-4px 0 0 #000,4px 0 0 #000}
.sb__banner.is-fail{background:var(--warn)}
.sb__banner img{height:30px;vertical-align:middle}
.sb__rank{font-family:var(--f-label);font-size:14px;letter-spacing:.06em;color:#bfe9ff;text-transform:uppercase}
.sb__lines{list-style:none;margin:6px 0 4px;padding:0;width:100%;max-width:560px;display:flex;flex-direction:column;gap:6px;text-align:left}
.sb__lines li{display:grid;grid-template-columns:1fr auto;gap:2px 14px;background:var(--night-2);padding:8px 12px;animation:popIn .4s steps(4) both}
.sb__lines li b{font-family:var(--f-display);font-size:20px;color:var(--coin);text-align:right;font-variant-numeric:tabular-nums}
.sb__lines li b small{color:#9fb2d4;font-size:13px}
.sb__lines li span{font-weight:800}
.sb__lines li em{grid-column:1/-1;font-style:normal;font-size:12.5px;color:#9fb2d4}
.sb__lines li.is-total{background:var(--coin);color:var(--coin-ink)}
.sb__lines li.is-total b{color:var(--coin-ink)}
.sb__lines li.is-total b small{color:#7a5200}
.highlights{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.highlights li{display:grid;grid-template-columns:40px 1fr;gap:2px 10px;align-items:center;background:#fff;padding:8px 10px;box-shadow:0 -3px 0 var(--paper-3),0 3px 0 var(--paper-3),-3px 0 0 var(--paper-3),3px 0 0 var(--paper-3);margin:3px}
.highlights img{height:46px;grid-row:span 2;justify-self:center}
.highlights b{font-family:var(--f-label);font-weight:400;font-size:10.5px;text-transform:uppercase;color:var(--muted)}
.highlights p{font-weight:700;font-size:14.5px}
.strategy{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.strategy h4{margin:0;font-family:var(--f-label);font-weight:400;font-size:11.5px;text-transform:uppercase;color:#fff;background:var(--sc);display:inline-block;padding:2px 7px}
.strategy ul{margin:6px 0 0;padding-left:18px;font-size:14.5px}

/* 13 ─ FX ────────────────────────────────────────────────────────────────── */
.fx{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.fx__coin{position:absolute;width:26px;height:26px;animation:fxCoin 1s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes fxCoin{0%{transform:translate(0,0) scale(.6)}35%{transform:translate(calc(var(--dx)*.3),-70px) scale(1.15)}100%{transform:translate(var(--dx),var(--dy)) scale(.7);opacity:.2}}
.fx__bit{position:absolute;width:10px;height:10px;animation:fxBit var(--t,1.6s) ease-in forwards}
@keyframes fxBit{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--dx),var(--dy)) rotate(540deg);opacity:0}}
.fx__emoji{position:absolute;font-size:34px;animation:fxUp 1.8s ease-out forwards}
@keyframes fxUp{0%{transform:translateY(0) scale(.5);opacity:0}15%{opacity:1;transform:translateY(-20px) scale(1.1)}100%{transform:translateY(-220px) scale(1);opacity:0}}
.fx__plus{position:absolute;font-family:var(--f-display);font-weight:700;font-size:26px;color:var(--coin);text-shadow:3px 3px 0 #000;animation:fxUp 1.4s ease-out forwards}

/* 14 ─ Responsive + motion ───────────────────────────────────────────────── */
@media (max-width:1240px){.hud__brand{display:none}.hud{gap:8px 14px}}
@media (max-width:1060px){
}
@media (max-width:860px){
  .join{grid-template-columns:minmax(0,1fr)}
  .join__form{align-self:start}
  .join__inner{position:static}
  .hud{gap:8px 12px}
  .hud__stages li span{display:none}
  .hud__me div{display:none}
  .bslots{grid-template-columns:repeat(3,minmax(0,1fr))}
  .core-sockets{grid-template-columns:repeat(3,minmax(0,1fr))}
  .metric{grid-template-columns:110px 1fr 40px}
}
@media (max-width:560px){
  .timebar{width:96px}
  .hud__time{font-size:24px;min-width:60px}
  .welcome{padding-bottom:170px}
  .scene .sc-castle{width:180px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* ── v2: one shared game ─────────────────────────────────────────────────── */
.demo-link{font-family:var(--f-label);font-size:13px;letter-spacing:.04em;color:var(--ink);background:#ffffffd9;padding:8px 14px;text-decoration:none;box-shadow:0 -3px 0 var(--ink),0 3px 0 var(--ink),-3px 0 0 var(--ink),3px 0 0 var(--ink);margin-top:4px}
.demo-link:hover{background:#fff}
.demo-link:focus-visible{outline:3px solid var(--coin);outline-offset:6px}
.topbar .chip{white-space:normal}
.demobar{background:var(--coin);color:var(--coin-ink);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:8px var(--gut);font-weight:700;font-size:14.5px;border-bottom:4px solid #000}
.demobar b{font-family:var(--f-label);font-weight:400;background:var(--ink);color:var(--coin);padding:2px 6px;margin-right:6px}
.playas{background:var(--paper-2);padding:10px 12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 -3px 0 var(--coin-d),0 3px 0 var(--coin-d),-3px 0 0 var(--coin-d),3px 0 0 var(--coin-d);margin:3px}
.playas__label{font-weight:800;font-size:14px}
.playas__tabs{display:flex;flex-wrap:wrap;gap:6px}
.playas__tab{appearance:none;border:0;cursor:pointer;background:#fff;display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;font-weight:800;font-size:13.5px;box-shadow:0 -3px 0 var(--rc),0 3px 0 var(--rc),-3px 0 0 var(--rc),3px 0 0 var(--rc);margin:3px}
.playas__tab img{height:34px}
.playas__tab.is-on{background:var(--rc);color:#fff}
.playas__tab i{font-style:normal;font-size:12px}
.playas__tab i.ok{color:var(--good)}
.playas__tab.is-on i.ok{color:#fff}
.playas__tab i.todo{color:var(--red)}
.playas__tab:focus-visible{outline:3px solid var(--coin);outline-offset:4px}
.startbox{background:var(--ink);color:#fff;padding:16px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;box-shadow:0 -4px 0 var(--coin),0 4px 0 var(--coin),-4px 0 0 var(--coin),4px 0 0 var(--coin);margin:4px}
.startbox__title{font-family:var(--f-display);font-weight:700;font-size:22px;color:var(--coin)}
.startbox p{color:#dfe7f6}
.takemore{background:var(--paper-2);padding:12px;margin:0 3px 14px;display:flex;flex-direction:column;gap:8px}
.takechip{appearance:none;border:0;cursor:pointer;background:#fff;display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;font-weight:800;font-size:13px;box-shadow:0 -3px 0 var(--rc),0 3px 0 var(--rc),-3px 0 0 var(--rc),3px 0 0 var(--rc);margin:3px}
.takechip img{height:30px}
.takechip:hover{background:var(--paper-2)}
.member[data-act]{cursor:pointer}
.member.is-active{--bc:var(--red);background:#fff4ec}
.hero.is-active .hero__tag{background:var(--coin);outline:2px solid var(--ink)}
.rv__count{font-family:var(--f-display);font-size:18px;color:var(--teal)}
.hostdock select{width:auto;color:var(--ink)}


/* ── v3: full-width layout, three equal-height columns ─────────────────────── */
.play{display:grid;grid-template-columns:minmax(330px,26%) minmax(0,1fr) minmax(230px,17%);gap:14px;padding:14px;height:var(--play-h,auto);min-height:520px;align-items:stretch}
.col{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto;margin:var(--px);padding:16px;scrollbar-width:thin}
.col--mission{gap:12px}
.col--board .wall{flex:1 1 auto;min-height:0;overflow:auto}
.board__head{flex-direction:row;justify-content:space-between;align-items:baseline;flex-wrap:wrap;margin-bottom:0}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:14px;align-content:start;padding:6px;margin:-6px}
.mission__title{font-size:clamp(24px,2.2vw,32px)}
.mission__story{font-size:15px}
.challenge__q{font-size:18px}
.goal{background:#fff;padding:10px 12px;display:flex;flex-direction:column;gap:6px;box-shadow:0 -3px 0 var(--teal),0 3px 0 var(--teal),-3px 0 0 var(--teal),3px 0 0 var(--teal);margin:3px}
.goal.is-met{box-shadow:0 -3px 0 var(--good),0 3px 0 var(--good),-3px 0 0 var(--good),3px 0 0 var(--good);background:#effbf2}
.goal__label{font-family:var(--f-label);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--teal)}
.goal.is-met .goal__label{color:var(--good)}
.goal__text{font-weight:800;font-size:15px;line-height:1.3}
.goal__row{display:grid;grid-template-columns:minmax(0,1fr) 90px 44px;gap:8px;align-items:center;font-size:13.5px;font-weight:700}
.goal__bar{height:10px;background:#e9dfc8;position:relative}
.goal__bar i{position:absolute;inset:0 auto 0 0;background:var(--good);transition:width .4s steps(6)}
.goal__row b{font-family:var(--f-display);font-size:15px;text-align:right}
.howto{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.howto li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:#dfe7f6}
.howto li>b{flex:none;width:24px;height:24px;display:grid;place-items:center;background:var(--coin);color:var(--coin-ink);font-family:var(--f-label);font-weight:400;font-size:12px}
.howto li span b{color:#fff}
.startbox__wait{font-family:var(--f-display);font-size:17px;color:var(--coin);animation:blink 1.4s steps(2) infinite}
.done-note{background:#effbf2;padding:12px 14px;display:flex;flex-direction:column;gap:6px;box-shadow:0 -3px 0 var(--good),0 3px 0 var(--good),-3px 0 0 var(--good),3px 0 0 var(--good);margin:3px}
.readybox{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.crack{background:#ffe1dc;color:#8d2214;font-weight:800;padding:8px 10px;font-size:14px}
.star{appearance:none;border:0;cursor:pointer;background:var(--paper);font-size:14px;font-weight:800;padding:4px 10px;display:inline-flex;gap:6px;align-items:center;margin:2px 2px 2px auto;box-shadow:0 -2px 0 #cbbf9f,0 2px 0 #cbbf9f,-2px 0 0 #cbbf9f,2px 0 0 #cbbf9f}
.star:hover:not(:disabled){background:#fff3c4}
.star[aria-pressed="true"]{background:var(--coin);box-shadow:0 -2px 0 var(--coin-d),0 2px 0 var(--coin-d),-2px 0 0 var(--coin-d),2px 0 0 var(--coin-d)}
.star:disabled{cursor:default;opacity:.65}
.star:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.card__acts{justify-content:flex-start}
.tool-box--big{gap:14px}
.tool-box--big .bslots{gap:10px}
.tool-box--big .bbtn{min-height:130px;font-size:12.5px}
.tool-box--big .bbtn img{width:64px;height:48px}
.bbtn.is-picking{background:#28609a;box-shadow:0 -3px 0 var(--coin),0 3px 0 var(--coin),-3px 0 0 var(--coin),3px 0 0 var(--coin)}
.picker .btn{font-size:12px}
.readyrow{display:flex;flex-wrap:wrap;gap:6px}
.readychip{font-size:12.5px;font-weight:800;background:var(--night-2);color:#9fb2d4;padding:3px 8px;border-left:4px solid var(--rc)}
.readychip.is-on{background:var(--good);color:#fff}
.bslot.is-fell{animation:shake .5s steps(4) 2}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.col--team .roster{display:flex;flex-direction:column;gap:8px}
.col--team .member{grid-template-columns:36px 1fr;padding:6px 8px}
.col--team .member img{height:44px}
.col--team .btn{align-self:flex-start}
.member[data-act]:hover{background:#fff8e6}
.scoreboard{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:14px;padding:14px;align-items:start}
.screen--game.is-final .play{display:none}
@media (max-width:1200px){
  .play{grid-template-columns:minmax(300px,36%) minmax(0,1fr);height:auto}
  .col{overflow:visible}
  .col--team{grid-column:1/-1}
  .col--team .roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .scoreboard{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .scoreboard .sb__main{grid-column:1/-1}
}
@media (max-width:820px){
  .play{grid-template-columns:minmax(0,1fr);padding:10px}
  .scoreboard{grid-template-columns:minmax(0,1fr)}
  .goal__row{grid-template-columns:minmax(0,1fr) 70px 40px}
}


/* ══ OPPOCITY ═══════════════════════════════════════════════════════════════
   Billboard Hills · Client Castle · Power-Up Factory
   ═══════════════════════════════════════════════════════════════════════════ */

/* home */
.welcome .tile-title{--th:clamp(56px,9vw,120px)}
.arc{display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center;align-items:center;margin:0}
.arc span{font-family:var(--f-label);font-size:clamp(12px,1.3vw,15px);text-transform:uppercase;letter-spacing:.06em;background:#ffffffe6;color:var(--ink);padding:7px 12px;box-shadow:0 -3px 0 var(--ink),0 3px 0 var(--ink),-3px 0 0 var(--ink),3px 0 0 var(--ink);margin:3px}
.arc i{font-style:normal;font-family:var(--f-display);font-size:22px;color:var(--ink)}
.sc-billboard{position:absolute;bottom:118px;width:230px;height:140px}
.sc-billboard img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.sc-billboard span{position:absolute;left:14%;right:14%;top:14%;height:46%;display:grid;place-items:center;text-align:center;font-family:var(--f-display);font-weight:700;font-size:15px;line-height:1.15;color:var(--coin)}

/* live / test mode badge */
.net-chip{font-family:var(--f-label);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:4px 8px;background:#5a3a00;color:#ffd27a;white-space:nowrap}
.net-chip.is-live{background:#11502a;color:#7dffa8}
.topbar .net-chip{box-shadow:none}

/* HUD story arc */
.hud__stages{flex-wrap:wrap;align-items:center}
.hud__stages li.hud__arrow{background:none;padding:0 2px;color:#5d7aa8;font-size:14px}
.hud__stages li b{width:auto;min-width:18px;padding:0 3px}

/* ── world: Billboard Hills ── */
.billboard{position:absolute;left:740px;top:50px;width:460px;height:280px}
.billboard__frame{position:absolute;inset:0;width:460px;height:280px;image-rendering:pixelated}
.billboard__bulbs{position:absolute;left:20px;right:20px;top:-14px;display:flex;justify-content:center;gap:8px}
.billboard__bulbs i{width:16px;height:16px;background:#5b5b6e;box-shadow:0 0 0 3px #14213d}
.billboard__bulbs i.is-on{background:#ffe066;box-shadow:0 0 0 3px #14213d,0 0 14px 4px #ffd23f}
.billboard__text{position:absolute;left:34px;right:34px;top:30px;height:120px;display:grid;place-items:center;text-align:center;font-family:var(--f-display);font-weight:700;font-size:26px;line-height:1.15;color:#fff6d0;text-shadow:3px 3px 0 #000;overflow:hidden}
.billboard__text.is-new{animation:popIn .4s steps(4)}
.billboard__by{position:absolute;left:34px;right:34px;top:156px;text-align:center;font-family:var(--f-label);font-size:12px;color:#9fdcff}
.billboard.is-lit .billboard__frame{filter:drop-shadow(0 0 18px #ffd23f) brightness(1.15)}
.billboard.is-lit .billboard__text{color:var(--coin)}
.client{position:absolute;height:84px;image-rendering:auto;transition:transform 1.4s ease-out,opacity .8s}
.client.is-cheer{animation:jump .7s steps(4) infinite}
.client--walk{left:1240px;top:246px;opacity:0;transform:translateX(80px)}
.client--walk.is-here{opacity:1;transform:translateX(-80px) scaleX(-1)}

/* ── world: Client Castle ── */
.path .spot{position:absolute;top:226px;width:104px;height:104px}
.spot__block{position:absolute;inset:0;width:104px;height:104px;image-rendering:pixelated;filter:saturate(.6) brightness(.9)}
.spot__n{position:absolute;left:0;right:0;top:34px;text-align:center;font-family:var(--f-display);font-size:30px;color:#ffffffaa;text-shadow:2px 2px 0 #0006}
.spot__card{position:absolute;left:-18px;right:-18px;bottom:108px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.spot__card b{font-size:42px;line-height:1;filter:drop-shadow(0 3px 0 #0005);animation:popIn .35s steps(4)}
.spot__card span{font-family:var(--f-label);font-size:11px;background:#ffffffee;color:var(--ink);padding:2px 5px;max-width:140px}
.spot__card em{font-style:normal;font-size:13px}
.spot.is-filled .spot__block{filter:none}
.spot.is-filled .spot__n{opacity:0}
.spot.is-good .spot__block{filter:drop-shadow(0 0 12px #ffd23f)}
.gate-lock{position:absolute;width:44px;height:52px;transition:opacity .6s,transform .6s}
.gate-lock img{width:44px;height:52px;image-rendering:pixelated}
.gate-lock.is-open{opacity:0;transform:translateY(-40px) scale(1.4)}
.gate-lock.is-shake{animation:shake .5s steps(4) 2}
.rival{height:104px}
.w-sign{position:absolute;margin:0;font-family:var(--f-label);font-size:13px;text-transform:uppercase;background:#ffffffee;color:var(--ink);padding:4px 10px;box-shadow:0 -3px 0 var(--ink),0 3px 0 var(--ink),-3px 0 0 var(--ink),3px 0 0 var(--ink)}
.w-sign--dark{background:var(--ink);color:var(--coin);font-size:16px;box-shadow:0 -3px 0 var(--coin),0 3px 0 var(--coin),-3px 0 0 var(--coin),3px 0 0 var(--coin)}

/* ── world: Power-Up Factory ── */
.sockets{width:240px;height:40px;gap:8px}
.machine{image-rendering:pixelated}
.belt{position:absolute;height:24px;background:repeating-linear-gradient(90deg,#2b2f3d 0 14px,#4b5878 14px 28px);box-shadow:0 -3px 0 #000,0 3px 0 #000}
.belt.is-moving{animation:belt .6s linear infinite}
@keyframes belt{to{background-position:28px 0}}
.box{image-rendering:pixelated;transition:transform 2.4s ease-in-out}
.box.is-shipped{transform:translateX(200px)}
.hero__pw{position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);font-size:15px;white-space:nowrap;letter-spacing:-2px;filter:drop-shadow(0 2px 0 #0006)}
.hero__pw.is-pop{animation:popIn .4s steps(4)}

/* ── mission column ── */
.howbox,.shoutbox{display:flex;flex-direction:column;gap:10px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.steps li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;font-weight:700}
.steps li b{flex:none;width:22px;height:22px;display:grid;place-items:center;background:var(--teal);color:#fff;font-family:var(--f-label);font-weight:400;font-size:11px}
.win-note{background:#effbf2;color:#14532d;font-weight:800;padding:8px 10px;font-size:14.5px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.pick-chip{appearance:none;border:0;cursor:pointer;background:#fff;display:flex;align-items:center;gap:6px;padding:4px 6px;text-align:left;box-shadow:0 -3px 0 #d9cfb8,0 3px 0 #d9cfb8,-3px 0 0 #d9cfb8,3px 0 0 #d9cfb8;margin:3px;min-width:0}
.pick-chip img{height:34px;flex:none}
.pick-chip span{display:flex;flex-direction:column;min-width:0}
.pick-chip b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-chip small{font-family:var(--f-label);font-size:9.5px;text-transform:uppercase;color:var(--rc);filter:brightness(.8)}
.pick-chip i{font-style:normal;font-size:11px;margin-left:auto;letter-spacing:-2px}
.pick-chip.is-on{background:#fff3c4;box-shadow:0 -3px 0 var(--rc),0 3px 0 var(--rc),-3px 0 0 var(--rc),3px 0 0 var(--rc)}
.pick-chip:disabled{opacity:.5;cursor:default}
.pick-powers{display:flex;flex-wrap:wrap;gap:6px}
.pw-chip{appearance:none;border:0;cursor:pointer;background:#fff;font-weight:800;font-size:13.5px;padding:6px 10px;box-shadow:0 -3px 0 var(--sc),0 3px 0 var(--sc),-3px 0 0 var(--sc),3px 0 0 var(--sc);margin:3px}
.pw-chip.is-on{background:var(--sc);color:#fff}
.pw-chip.is-covered:not(.is-on){background:#f4fff6}
.pw-chip:disabled{opacity:.5;cursor:default}
.pick-chip:focus-visible,.pw-chip:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* ── board: Client Castle ── */
.castle-tool{display:flex;flex-direction:column;gap:14px}
.ppath{display:flex;align-items:stretch;gap:6px;background:var(--night);padding:14px;box-shadow:0 -4px 0 #000,0 4px 0 #000,-4px 0 0 #000,4px 0 0 #000;margin:4px}
.pspot{flex:1 1 0;min-width:0;min-height:150px;background:#ffffff14;border:3px dashed #9fb2d4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#cfdcf2;padding:6px;transition:background .15s}
.pspot__n{font-family:var(--f-display);font-size:22px}
.pspot__hint{font-size:12.5px;font-weight:700;opacity:.8}
.pspot.is-full{border-style:solid;border-color:transparent;background:transparent;padding:0}
.pspot.is-target{cursor:pointer;background:#ffd23f22;border-color:var(--coin)}
.pspot.is-over{background:#ffd23f44;border-color:var(--coin);border-style:solid}
.pspot.is-good .ocard{box-shadow:0 0 0 4px var(--good),0 0 18px #6dff8e}
.pspot__arrow{align-self:center;color:#5d7aa8;font-family:var(--f-display);font-size:22px}
.pgate{flex:0 0 90px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#3a1430;color:#fff;font-family:var(--f-display)}
.pgate span{font-size:40px}
.pgate b{font-size:18px;color:var(--coin)}
.pgate.is-open{background:#11502a}
.hand,.others{display:flex;flex-direction:column;gap:6px}
.hand{background:#fff8e6;padding:10px 12px;box-shadow:0 -3px 0 var(--coin-d),0 3px 0 var(--coin-d),-3px 0 0 var(--coin-d),3px 0 0 var(--coin-d);margin:3px}
.hand.is-over{background:#fff0c0}
.hand__cards,.others__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.ocard{position:relative;background:#fff;color:var(--ink);padding:10px;display:flex;flex-direction:column;gap:3px;min-height:120px;box-shadow:0 -3px 0 var(--rc),0 3px 0 var(--rc),-3px 0 0 var(--rc),3px 0 0 var(--rc);margin:3px;width:100%;touch-action:none}
.ocard__emoji{font-size:30px;line-height:1}
.ocard__name{font-weight:800;font-size:14.5px;line-height:1.2}
.ocard__stars{font-size:14px;letter-spacing:-1px}
.ocard__why{font-size:12px;color:var(--muted);line-height:1.3}
.ocard__who{font-family:var(--f-label);font-size:9.5px;text-transform:uppercase;color:var(--rc);filter:brightness(.8);margin-top:auto}
.ocard__back{position:absolute;top:4px;right:4px;appearance:none;border:0;background:var(--paper-2);cursor:pointer;font-weight:800;padding:2px 6px}
.ocard.is-mine{background:#fffbea;cursor:grab}
.ocard.is-mine::after{content:"DRAG ME";position:absolute;top:-9px;left:8px;font-family:var(--f-label);font-size:8.5px;background:var(--coin);color:var(--coin-ink);padding:1px 5px}
.pspot .ocard.is-mine::after{content:"YOURS"}
.ocard.is-sel{box-shadow:0 0 0 4px var(--coin),0 0 0 7px var(--ink)}
.ocard.is-weak{opacity:.7}
.ocard.is-weak .ocard__stars{color:var(--bad)}
.ocard.is-dragging{opacity:.35}
.ocard--ghost{position:fixed;left:0;top:0;z-index:90;pointer-events:none;opacity:.95;box-shadow:0 12px 24px #0006,0 0 0 4px var(--coin)}
.others .ocard{min-height:96px;background:#f4f6fb}
body.is-dragging,body.is-dragging *{cursor:grabbing!important;user-select:none}

/* ── board: Power-Up Factory ── */
.order{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}   /* 8 power-ups: two rows of four */
.order__slot{background:var(--night-2);padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;box-shadow:0 -3px 0 #000,0 3px 0 #000,-3px 0 0 #000,3px 0 0 #000;margin:3px;min-width:0}
.order__gem{font-size:26px;filter:grayscale(1) brightness(.6)}
.order__name{font-family:var(--f-label);font-size:10px;text-transform:uppercase}
.order__who{font-size:12px;font-weight:700;color:#9fb2d4;overflow-wrap:anywhere}
.order__slot.is-lit{background:var(--sc);animation:popIn .4s steps(4)}
.order__slot.is-lit .order__gem{filter:none}
.order__slot.is-lit .order__who{color:#fff}
.shout{gap:6px}
.shout__row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px}
.shout__row img{height:34px}
.shout__arrow{font-family:var(--f-display);color:var(--coin-d)}
.shout__pw{font-weight:800;color:#fff;background:var(--sc);padding:3px 8px;align-self:flex-start}

/* hook cards */
.hookcard{justify-content:space-between}
.hookcard__text{font-family:var(--f-display);font-weight:500;font-size:18px;line-height:1.25}
.card__who{display:flex;gap:6px;align-items:center;min-width:0}
.card__who img{height:30px}
.card__who span{display:flex;flex-direction:column;min-width:0}
.card__who b{font-size:13px}
.card__who small{font-family:var(--f-label);font-size:9.5px;text-transform:uppercase;color:var(--rc);filter:brightness(.8)}
.card.is-top::before{content:"ON THE BILLBOARD"}
.member__pw{letter-spacing:-2px}

/* review */
.rv__parts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rv__parts li{display:flex;justify-content:space-between;align-items:baseline;background:#fff;padding:6px 10px;font-weight:700}
.rv__parts b{font-family:var(--f-display);font-size:18px;color:var(--coin-d)}
.rv__parts small{color:var(--muted);font-size:12px}

/* final */
.sb__lines li .meter{grid-column:1/-1;height:10px;background:#0d2a47;position:relative}
.sb__lines li .meter i{position:absolute;inset:0 auto 0 0;background:var(--coin)}
.story{display:flex!important;flex-direction:column;gap:4px;align-items:flex-start!important}
.story b{font-family:var(--f-label);font-weight:400;font-size:12px;text-transform:uppercase;color:var(--teal)}
.story p{font-weight:800;font-size:15px}
.story small{color:var(--muted);font-size:12.5px}
.pwmap{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.pwmap__row{display:grid;grid-template-columns:36px minmax(90px,140px) 1fr;gap:10px;align-items:center;background:#fff;padding:6px 8px;border-left:4px solid var(--rc)}
.pwmap__row img{height:42px}
.pwmap__row b{font-size:14px;display:flex;flex-direction:column}
.pwmap__row b small{font-family:var(--f-label);font-weight:400;font-size:9.5px;text-transform:uppercase;color:var(--muted)}
.pwmap__gems{display:flex;flex-wrap:wrap;gap:4px}
.pwmap__gems span{font-size:12px;font-weight:800;color:#fff;background:var(--sc);padding:2px 6px}
@media (max-width:820px){
  .order{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ppath{flex-wrap:wrap}
  .pspot{flex-basis:28%}
  .pspot__arrow{display:none}
  .pgate{flex-basis:100%;flex-direction:row}
}

/* ══ MOTION · the world feels alive ══════════════════════════════════════════
   Ambient loops use transform/opacity only (or the individual translate/scale/rotate
   properties when an element already owns `transform`). Every piece has its own
   phase so nothing moves in lock-step. Event feedback: hop + pop on the actor.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1)}

/* home: mushroom + a lower start button + two-line title */
.welcome .tile-title{--th:clamp(38px,5.6vw,92px);gap:clamp(6px,1.2vh,12px)}
.title-mush{width:clamp(46px,4.6vw,72px);height:auto;image-rendering:pixelated;margin-bottom:4px;transform-origin:50% 100%;animation:titleHop 3.2s infinite}
.welcome .btn--start{margin-top:clamp(18px,4.5vh,48px)}
.welcome .tile{animation:tileWave 4.2s var(--ease-in-out) infinite}
.welcome .tile-word .tile:nth-child(2){animation-delay:.07s}
.welcome .tile-word .tile:nth-child(3){animation-delay:.14s}
.welcome .tile-word .tile:nth-child(4){animation-delay:.21s}
.welcome .tile-word .tile:nth-child(5){animation-delay:.28s}
.welcome .tile-word .tile:nth-child(6){animation-delay:.35s}
.welcome .tile-word .tile:nth-child(7){animation-delay:.42s}
.welcome .tile-word .tile:nth-child(8){animation-delay:.49s}
.welcome .tile-line + .tile-line .tile{animation-name:tileWave2}
@keyframes titleHop{0%,62%,100%{transform:none;animation-timing-function:var(--ease-out)}66%{transform:scale(1.14,.84)}76%{transform:translateY(-26px) scale(.94,1.08);animation-timing-function:cubic-bezier(.55,0,1,.45)}86%{transform:scale(1.1,.9)}92%{transform:translateY(-6px)}}
@keyframes tileWave{0%,22%,100%{transform:none}8%{transform:translateY(-10px)}15%{transform:translateY(2px)}}
@keyframes tileWave2{0%,30%,100%{transform:none}16%{transform:translateY(-10px)}23%{transform:translateY(2px)}}
.scene .sc-bush{transform-origin:50% 100%;animation:rustle 3.4s ease-in-out infinite}
.scene .sc-bush + .sc-bush{animation-delay:-1.6s}
.scene .sc-coin{animation:bob 1.6s ease-in-out infinite,coinSpin 1.8s steps(1) infinite;animation-delay:var(--dl,0s)}
.scene .sc-princess{transform-origin:50% 100%;animation:wave 2.4s var(--ease-in-out) infinite alternate}
.scene .sc-birdpath{position:absolute;left:0;width:60px;height:30px;animation:flyScreen 24s linear infinite;z-index:1}
@keyframes flyScreen{from{transform:translateX(-90px)}to{transform:translateX(calc(100vw + 90px))}}

/* sky */
.w-cloud{animation:cloudDrift 46s ease-in-out infinite alternate}
@keyframes cloudDrift{from{translate:-60px 0}to{translate:160px 0}}
.w-sun{transform-origin:50% 50%;animation:sunPulse 2.6s steps(2) infinite}
@keyframes sunPulse{50%{transform:scale(1.08)}}
.w-birdpath{position:absolute;left:0;width:60px;height:30px;pointer-events:none;animation:fly 22s linear infinite}
@keyframes fly{from{transform:translateX(-120px)}to{transform:translateX(3960px)}}
.w-bird{position:absolute;left:0;top:8px;width:26px;image-rendering:pixelated;animation:flap .42s linear infinite,glide 2.8s ease-in-out infinite alternate}
.w-bird--2{left:30px;top:-6px;width:19px;animation-delay:-.2s,-1.3s}
@keyframes flap{0%,49.9%{scale:1 1}50%,100%{scale:1 .4}}
@keyframes glide{from{translate:0 -6px}to{translate:0 8px}}

/* scenery */
.w-tree{transform-origin:50% 100%;animation:sway 5s var(--ease-in-out) infinite alternate}
@keyframes sway{from{transform:skewX(-1.6deg)}to{transform:skewX(1.6deg)}}
.w-bush{transform-origin:50% 100%;animation:rustle 3.4s ease-in-out infinite}
@keyframes rustle{0%,100%{transform:none}50%{transform:scale(1.05,.94)}}
.w-mush{transform-origin:50% 100%;animation:mushHop 4.2s infinite}
@keyframes mushHop{0%,70%,100%{transform:none;animation-timing-function:var(--ease-out)}74%{transform:scale(1.15,.82)}82%{transform:translateY(-18px) scale(.94,1.08);animation-timing-function:cubic-bezier(.55,0,1,.45)}90%{transform:scale(1.12,.88)}}
.w-coin{animation:bob 1.5s ease-in-out infinite,coinSpin 1.8s steps(1) infinite}
@keyframes coinSpin{0%{scale:1 1}12%{scale:.6 1}24%{scale:.18 1}36%{scale:.6 1}48%,100%{scale:1 1}}

/* Billboard Hills: chasing bulbs, faster once the billboard is lit */
.billboard__bulbs i.is-on{animation:bulbChase 1.2s steps(1) infinite}
.billboard__bulbs i.is-on:nth-child(3n+2){animation-delay:-.4s}
.billboard__bulbs i.is-on:nth-child(3n){animation-delay:-.8s}
.billboard.is-lit .billboard__bulbs i{animation-duration:.6s}
@keyframes bulbChase{0%{opacity:1}66.6%{opacity:.45}}
.client--walk.is-here:not(.is-cheer){animation:breatheS 2.4s steps(2) infinite}
@keyframes breatheS{50%{scale:1 .97}}
.client.is-cheer{animation:hopY .7s steps(4) infinite}
@keyframes hopY{50%{translate:0 -22px}}

/* Client Castle: waving client, pacing Complicator, waiting blocks, swinging lock */
.client--idle:not(.is-cheer){transform-origin:50% 100%;animation:wave 2.4s var(--ease-in-out) infinite alternate}
@keyframes wave{from{rotate:-4deg}to{rotate:4deg}}
.rival:not(.is-fled){animation:pace 3.4s linear infinite}
@keyframes pace{0%,100%{translate:0 0}12.5%{translate:-9px -7px}25%{translate:-18px 0}37.5%{translate:-27px -7px}50%{translate:-36px 0}62.5%{translate:-27px -7px}75%{translate:-18px 0}87.5%{translate:-9px -7px}}
.path .spot:not(.is-filled) .spot__block{animation:spotWait 1.6s steps(2) infinite}
.path .spot:nth-child(2):not(.is-filled) .spot__block{animation-delay:-.5s}
.path .spot:nth-child(3):not(.is-filled) .spot__block{animation-delay:-1s}
@keyframes spotWait{50%{transform:translateY(-5px)}}
.spot.is-bump .spot__block{animation:blockBump .34s var(--ease-out)}
@keyframes blockBump{40%{transform:translateY(-16px)}}
.spot.is-filled .spot__card b{animation:popIn .35s steps(4),cardBob 2.2s ease-in-out .35s infinite}
.spot.is-filled:nth-child(2) .spot__card b{animation-delay:0s,.9s}
.spot.is-filled:nth-child(3) .spot__card b{animation-delay:0s,1.5s}
@keyframes cardBob{50%{translate:0 -6px}}
.gate-lock:not(.is-open) img{transform-origin:50% 0;animation:lockSwing 2.8s var(--ease-in-out) infinite alternate}
@keyframes lockSwing{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}

/* Power-Up Factory: smoke, blinking lamps, working machine, glowing sockets */
.w-smoke{position:absolute;width:28px;height:28px;background:#dfe5ef;opacity:0;pointer-events:none;
  clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);animation:smoke 2.7s var(--ease-out) infinite}
.machine.is-working ~ .w-smoke{animation-duration:1.35s}
@keyframes smoke{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:.8}100%{transform:translate(20px,-72px) scale(1.6);opacity:0}}
.w-lamp{position:absolute;width:15px;height:15px;opacity:0;pointer-events:none;box-shadow:0 0 12px 3px #ffffff80;animation:lamp 1.05s steps(1) infinite}
@keyframes lamp{0%{opacity:1}33.3%{opacity:0}}
.machine.is-working{animation:jitter .2s steps(2) infinite}
@keyframes jitter{50%{translate:1px -2px}}
.socket.is-lit{animation:popIn .4s steps(4),socketGlow 1.4s ease-in-out .4s infinite alternate}
@keyframes socketGlow{to{scale:1.1}}
.belt.is-moving ~ .box:not(.is-shipped){animation:boxJog .3s steps(2) infinite}
@keyframes boxJog{50%{translate:0 -3px}}

/* feedback: the hero who acted hops and something pops out */
.hero.is-hop .hero__img{animation:heroHop .5s var(--ease-out)}
@keyframes heroHop{0%{transform:scale(1.1,.88)}35%{transform:translateY(-28px) scale(.94,1.07)}70%{transform:scale(1.08,.92)}100%{transform:none}}
.w-pop{position:absolute;left:50%;bottom:100%;width:26px;pointer-events:none;image-rendering:pixelated;animation:popUp .85s var(--ease-out) forwards}
.w-pop--txt{width:auto;font-size:24px;line-height:1;filter:drop-shadow(0 2px 0 #0006)}
@keyframes popUp{0%{transform:translate(-50%,10px) scale(.6);opacity:0}18%{opacity:1}55%{transform:translate(-50%,-50px) scale(1.05);opacity:1}100%{transform:translate(-50%,-64px) scale(1);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .w-birdpath,.sc-birdpath,.w-smoke,.w-pop,.w-lamp{display:none}
}
.goal__todo{margin-top:8px;padding-top:8px;border-top:2px dashed #e1d3b3;display:flex;flex-direction:column;gap:4px;font-size:13.5px;line-height:1.35}
.goal__todo b{font-weight:800;color:var(--red-d)}
.playas__label b{color:var(--red-d)}

/* Stage 3: what's left before the round ends (under the client's order) */
.ostatus{background:var(--night-2);padding:10px 12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 -3px 0 #000,0 3px 0 #000,-3px 0 0 #000,3px 0 0 #000;margin:3px}
.tool-box .ostatus p{font-size:14px;color:#fff;line-height:1.4}
.ostatus.is-wait{background:#fff3c4;box-shadow:0 -3px 0 var(--coin),0 3px 0 var(--coin),-3px 0 0 var(--coin),3px 0 0 var(--coin);animation:popIn .4s steps(4)}
.tool-box .ostatus.is-wait p{color:var(--ink)}
.tool-box .ostatus.is-wait p b{color:var(--red-d)}
.ostatus.is-done{background:#effbf2;box-shadow:0 -3px 0 var(--good),0 3px 0 var(--good),-3px 0 0 var(--good),3px 0 0 var(--good)}
.tool-box .ostatus.is-done p{color:#14532d}
.ostatus__list{display:flex;flex-wrap:wrap;gap:6px}
.ostatus__who{appearance:none;border:0;background:#fff;color:var(--ink);display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;font:inherit;text-align:left;box-shadow:0 -3px 0 var(--rc),0 3px 0 var(--rc),-3px 0 0 var(--rc),3px 0 0 var(--rc);margin:3px}
.ostatus__who img{height:32px;flex:none}
.ostatus__who span{display:flex;flex-direction:column;min-width:0}
.ostatus__who b{font-size:13px;font-weight:800}
.ostatus__who small{font-family:var(--f-label);font-size:9.5px;text-transform:uppercase;color:var(--rc);filter:brightness(.8)}
.ostatus__who em{font-style:normal;font-family:var(--f-label);font-size:9.5px;text-transform:uppercase;background:var(--rc);color:#fff;padding:2px 5px;margin-left:4px}
.ostatus__who.is-mine{cursor:pointer;animation:ostatusPulse .9s ease-in-out infinite alternate}
@keyframes ostatusPulse{to{scale:1.05}}
.ostatus__who.is-mine:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.tool-box .ostatus__tail{font-size:13px}
@media (prefers-reduced-motion:reduce){.ostatus.is-wait,.ostatus__who.is-mine{animation:none}}

/* 8 power-up sockets above the factory machine, centred on it */
.sockets#wSockets{width:auto;gap:7px;justify-content:center;transform:translateX(-50%)}
#wSockets .socket{width:30px;height:30px;font-size:15px}


/* Character page: no empty gap above "How to play" when there is no error */
.join__inner .form-error:empty{display:none}

/* Waiting room: pick extra characters right where it says more are needed */
.startbox__take{display:flex;flex-wrap:wrap;gap:4px}
.startbox .small b{color:#fff}