/* =====================================================
   POCKET POWER — visual system
   Typeface: Outfit (SIL OFL). Light is the hero; UI recedes.
   ===================================================== */
@font-face{font-family:"Outfit";src:url("/fonts/outfit.woff") format("woff");font-weight:100 900;font-display:swap;}
:root{
  --bg0:#05060f; --bg1:#090c1f; --bg2:#141a40;
  --ink:#f4f1ea; --ink2:#bfc2dc; --muted:#80869f; --faint:#4b5075;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.045); --glass2:rgba(255,255,255,.07);
  --gold:#f6c66e; --gold2:#e9a24b; --warm:#ffd78a;
  --accent:#f6c66e; --accent-rgb:246,198,110;
  --tileA:#1c2046; --tileB:#141735; --chan:#2b3163; --chan-dim:#4a5290;
  --plate:#0d1029;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --font:"Outfit", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1); --out:cubic-bezier(.16,1,.3,1);
}
#app[data-theme="maple"]{ --accent:#f7b56c; --accent-rgb:247,181,108; --bg2:#2a1636; --tileA:#231b3d; --tileB:#19132e; --chan:#2f2550; --chan-dim:#5a4a88; --plate:#120d24; }
#app[data-theme="harbor"]{ --accent:#72e2d2; --accent-rgb:114,226,210; --bg2:#0c2a3e; --tileA:#13283f; --tileB:#0d1d30; --chan:#1b3550; --chan-dim:#3a6688; --plate:#08131f; }
#app[data-theme="neon"]{ --accent:#ff7fdc; --accent-rgb:255,127,220; --bg2:#23103e; --tileA:#211640; --tileB:#170f2f; --chan:#2e1f52; --chan-dim:#5d4392; --plate:#0f0a20; }
#app[data-theme="aurora"]{ --accent:#93f0b8; --accent-rgb:147,240,184; --bg2:#0b2d33; --tileA:#13292f; --tileB:#0c1d22; --chan:#183a40; --chan-dim:#3a7078; --plate:#071417; }

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;}
html,body{height:100%;background:var(--bg0);color:var(--ink);font-family:var(--font);font-weight:400;overflow:hidden;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;-webkit-font-smoothing:antialiased;font-feature-settings:"kern";}
#app{position:fixed;inset:0;overflow:hidden;background:radial-gradient(120% 70% at 50% 0%,var(--bg2),var(--bg1) 55%,var(--bg0));transition:background .8s;}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation;padding:0;text-align:inherit;}
.hidden{display:none!important;}
.grow{flex:1;}
.safe-top{padding-top:calc(var(--sat) + 10px);}
.safe-bottom{padding-bottom:calc(var(--sab) + 14px);}
b,strong{font-weight:600;}
.num{font-variant-numeric:tabular-nums;}
.ic{display:inline-flex;width:20px;height:20px;flex:none;}
.ic svg{width:100%;height:100%;}
.ic.gold{color:var(--gold);} .ic.warm{color:#ff9f5a;} .ic.accent{color:var(--accent);}
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.label{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.label.accent{color:var(--accent);}
@keyframes appear{from{opacity:0;}to{opacity:1;}}
@keyframes fadeIn{from{opacity:0;}}
@keyframes fadeOut{to{opacity:0;}}
@keyframes ringOut{from{transform:scale(.8);opacity:.7;}to{transform:scale(1.6);opacity:0;}}
@keyframes flow{to{stroke-dashoffset:-24;}}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;visibility:hidden;opacity:0;padding-left:var(--sal);padding-right:var(--sar);}
.screen.active{visibility:visible;opacity:1;}
.screen.in-fwd{animation:inFwd .5s var(--out) both;}
.screen.out-fwd{animation:outFwd .5s var(--out) both;pointer-events:none;}
.screen.in-back{animation:inBack .5s var(--out) both;}
.screen.out-back{animation:outBack .5s var(--out) both;pointer-events:none;}
.screen.in-fade{animation:fadeIn .9s ease both;}
@keyframes inFwd{from{opacity:0;transform:translateX(40px);}}
@keyframes outFwd{to{opacity:0;transform:translateX(-30px);}}
@keyframes inBack{from{opacity:0;transform:translateX(-30px);}}
@keyframes outBack{to{opacity:0;transform:translateX(40px);}}
.screen.active .in{animation:inUp .9s var(--d,0s) var(--out) both;}
@keyframes inUp{from{opacity:0;transform:translateY(14px);}}

.wipe{position:absolute;inset:0;z-index:90;background:#04050c;opacity:0;pointer-events:all;}
.wipe-glow{position:absolute;width:600px;height:600px;margin:-300px 0 0 -300px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.55) 0%,rgba(var(--accent-rgb),.12) 30%,transparent 62%);}

/* ---------- controls ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;
  font-size:16px;font-weight:600;letter-spacing:.02em;transition:transform .15s var(--ease),background .2s,box-shadow .2s;}
.btn:active{transform:scale(.97);}
.btn .ic{width:18px;height:18px;}
.btn-primary{color:#1d1406;background:linear-gradient(180deg,#fadc97,var(--gold) 55%,#eeb15a);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 32px -12px rgba(246,198,110,.6);}
.btn-ghost{color:var(--ink);background:var(--glass);border:1px solid var(--line2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.btn-ghost:active{background:var(--glass2);}
.btn-danger{color:#ffd1d4;background:rgba(255,95,110,.12);border:1px solid rgba(255,95,110,.35);}
.btn-wide{width:100%;}
.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--ink);
  background:var(--glass);border:1px solid var(--line2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .15s,background .2s;}
.icon-btn:active{transform:scale(.92);background:var(--glass2);}
.icon-btn .ic{width:19px;height:19px;}
.glass{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)),rgba(10,12,30,.5);border:1px solid var(--line);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);}
.sheet-glass{background:linear-gradient(180deg,rgba(26,30,66,.92),rgba(14,16,38,.96));border:1px solid var(--line2);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 30px 80px rgba(0,0,0,.55);}
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px 0 11px;border-radius:999px;background:rgba(10,12,30,.55);border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:14px;flex:none;}
.chip .ic{width:15px;height:15px;}
.chip b{font-weight:600;font-variant-numeric:tabular-nums;}
.chip small{font-size:12px;color:var(--muted);}

.topbar{position:relative;z-index:5;display:flex;align-items:center;gap:10px;padding-left:16px;padding-right:16px;padding-bottom:6px;}
.bar-title{flex:1;text-align:center;font-size:17px;font-weight:600;letter-spacing:.01em;}

/* ---------- brand ---------- */
.mark svg{width:100%;height:100%;overflow:visible;}
.wordmark{font-weight:500;font-size:24px;letter-spacing:.36em;margin-right:-.36em;white-space:nowrap;color:var(--ink);}
.wordmark em{font-style:normal;color:var(--gold);font-weight:600;}

/* ---------- scenes ---------- */
.scene{position:absolute;inset:0;pointer-events:none;}
.scene svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
.win{fill:#1a1d3c;transition:fill .7s ease;}
.far .win{fill:transparent;}
.win.on{fill:#ffd88a;}
.win.on.cool{fill:#ffeccc;}
.win.on.amber{fill:#f2ad5c;}
.win.flick{animation:flick 9s infinite;}
@keyframes flick{0%,93%,100%{fill:#ffd88a}95%{fill:#1a1d3c}97%{fill:#ffd88a}}
.tw{animation:twinkle var(--t,3s) var(--dl,0s) ease-in-out infinite;}
@keyframes twinkle{50%{opacity:.15;}}

/* ============ LOADING ============ */
#scr-loading{z-index:50;background:#05060f;}
.ld-center{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:16px;padding:calc(var(--sat) + 13vh) 24px 0;text-align:center;}
.ld-center::before{content:"";position:absolute;left:50%;top:calc(var(--sat) + 30vh);width:520px;height:520px;margin:-260px 0 0 -260px;background:radial-gradient(closest-side,rgba(5,6,15,.55),rgba(5,6,15,0));pointer-events:none;z-index:-1;}
.ld-controls{width:100%;max-width:300px;display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:70px;}
.ld-mark{width:118px;height:118px;}
.ld-mark .draw{stroke-dasharray:100;stroke-dashoffset:100;animation:draw 1.6s .2s var(--ease) forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.ld-mark .glow-in{opacity:0;animation:appear 1.2s 1.2s ease forwards;}
.ld-mark .win-in{opacity:0;animation:winOn .9s 1.55s ease forwards;}
@keyframes winOn{0%{opacity:0;}20%{opacity:1;}30%{opacity:.35;}45%{opacity:1;}100%{opacity:1;}}
.ld-word{opacity:0;animation:track 1.6s 1s var(--out) forwards;}
@keyframes track{from{opacity:0;letter-spacing:.8em;}to{opacity:1;letter-spacing:.36em;}}
.ld-tag{font-size:14px;color:var(--muted);font-weight:400;letter-spacing:.02em;opacity:0;animation:appear 1s 1.8s ease forwards;}
.ld-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 32px calc(var(--sab) + 26px);display:flex;flex-direction:column;align-items:center;gap:18px;}
.ld-progress{width:100%;max-width:300px;text-align:left;opacity:0;animation:appear .8s .6s ease forwards;transition:opacity .5s;}
.ld-progress.gone{opacity:0!important;animation:none;}
.ld-meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
.ld-meta .num{font-size:13px;font-weight:500;color:var(--ink2);}
.ld-meta .num::after{content:"%";color:var(--muted);margin-left:1px;}
.hair{position:relative;height:2px;border-radius:2px;background:rgba(255,255,255,.1);}
.hair i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:linear-gradient(90deg,rgba(246,198,110,.2),var(--gold));}
.hair i::after{content:"";position:absolute;right:-3px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#fff6dd;box-shadow:0 0 8px 2px rgba(246,198,110,.72),0 0 22px 6px rgba(246,198,110,.32);}
.btn-begin{height:50px;padding:0 26px 0 22px;gap:12px;font-weight:500;letter-spacing:.06em;animation:inUp .8s var(--out) both;}
.pulse-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 8.0px var(--gold);}
.pulse-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--gold);animation:ringOut 1.8s ease-out infinite;}
.ld-tip{min-height:36px;font-size:13px;line-height:1.45;color:var(--ink2);opacity:.8;text-align:center;max-width:300px;transition:opacity .5s;}
.ld-tip b{color:var(--ink2);font-weight:500;}
.boot-flash{position:absolute;inset:0;z-index:95;pointer-events:none;background:radial-gradient(circle at 50% 60%,rgba(255,236,190,.55),rgba(255,236,190,0) 70%);animation:bootFlash 1.1s ease-out forwards;}
@keyframes bootFlash{from{opacity:1;}to{opacity:0;}}

/* ============ HOME ============ */
#scr-home{background:#05060f;}
.ld-shade{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,rgba(5,6,15,0),rgba(5,6,15,.6) 50%,rgba(5,6,15,.9));pointer-events:none;z-index:1;}
.home-shade{position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(180deg,rgba(5,6,15,0),rgba(5,6,15,.45) 45%,rgba(5,6,15,.85));pointer-events:none;}
.motes{position:absolute;inset:0;pointer-events:none;}
.mote{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffe2a6;box-shadow:0 0 6px 1px rgba(255,214,140,.48);opacity:0;animation:mote var(--t) var(--dl) ease-in-out infinite;}
@keyframes mote{0%{opacity:0;transform:translate(0,0);}25%{opacity:.8;}100%{opacity:0;transform:translate(var(--dx),-60px);}}
.home-hero{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:13vh;}
.home-hero .wordmark{font-size:30px;letter-spacing:.3em;margin-right:-.3em;}
.home-mark{width:118px;height:118px;animation:markGlow 4.5s ease-in-out infinite;}
@keyframes markGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,190,90,.0));}50%{filter:drop-shadow(0 0 18px rgba(255,190,90,.36));}}
.home-tag{font-size:15px;color:var(--ink2);opacity:.75;margin-top:-8px;letter-spacing:.02em;}
.home-bottom{position:relative;z-index:3;margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 18px calc(var(--sab) + 18px);}
.continue{width:100%;max-width:400px;display:flex;align-items:center;gap:14px;padding:16px 16px 16px 20px;border-radius:24px;transition:transform .15s var(--ease);}
.continue:active{transform:scale(.98);}
.cont-txt{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0;}
.cont-txt b{font-size:22px;font-weight:600;letter-spacing:-.01em;margin-top:4px;}
.cont-txt small{font-size:13.5px;color:var(--ink2);}
.cont-ring{position:relative;width:64px;height:64px;flex:none;}
.cont-ring > svg{position:absolute;inset:0;transform:rotate(-90deg);}
.ring-bg{fill:none;stroke:rgba(255,255,255,.1);stroke-width:2.5;}
.ring-fg{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray 1.2s var(--out);filter:drop-shadow(0 0 4px rgba(246,198,110,.48));}
.play-btn{position:absolute;inset:8px;border-radius:50%;display:grid;place-items:center;color:#1d1406;background:linear-gradient(180deg,#fadc97,var(--gold) 55%,#eeb15a);box-shadow:0 8px 22px -6px rgba(246,198,110,.64);}
.play-btn .ic{width:22px;height:22px;margin:0;transform:translateX(-.8px);}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:400px;}
.q{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 14px 13px;border-radius:20px;transition:transform .15s var(--ease);}
.q:active{transform:scale(.96);}
.q .ic{width:21px;height:21px;color:var(--gold);margin-bottom:10px;}
.q b{font-size:14.5px;font-weight:600;}
.q small{font-size:12px;color:var(--muted);white-space:nowrap;}
.dot{position:absolute;top:14px;right:14px;width:7px;height:7px;border-radius:50%;background:#ff6b7f;box-shadow:0 0 8px #ff6b7f;}
.install-tip{font-size:12px;color:var(--muted);margin-top:2px;}

/* ============ DISTRICTS ============ */
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.d-list{padding:10px 16px calc(var(--sab) + 30px);display:flex;flex-direction:column;gap:14px;}
.d-card{position:relative;flex:none;height:210px;border-radius:24px;overflow:hidden;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;padding:18px 20px;
  border:1px solid var(--line);box-shadow:0 24px 50px -24px rgba(0,0,0,.9);transition:transform .18s var(--ease);animation:inUp .8s var(--d,0s) var(--out) both;}
.d-card:active{transform:scale(.985);}
.d-card .scene{position:absolute;}
.d-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,5,12,.1) 0%,rgba(4,5,12,0) 25%,rgba(4,5,12,.55) 55%,rgba(4,5,12,.92) 100%),linear-gradient(90deg,rgba(4,5,12,.45),transparent 70%);pointer-events:none;}
.d-card > *:not(.scene){position:relative;z-index:1;}
.d-card .numeral{position:absolute;top:14px;left:18px;}
.numeral{font-size:34px;font-weight:200;letter-spacing:.02em;color:rgba(255,255,255,.75);line-height:1;}
.d-card .badge{position:absolute;top:18px;right:18px;}
.badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background:rgba(10,12,30,.6);border:1px solid var(--line2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.badge.new{color:#1d1406;background:var(--gold);border-color:transparent;}
.badge .ic{width:12px;height:12px;}
.d-card h3{font-size:25px;font-weight:600;letter-spacing:-.01em;}
.d-card p{font-size:13.5px;color:var(--ink2);margin-top:2px;}
.d-prog{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:12.5px;color:var(--ink2);}
.d-prog .bar{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden;}
.d-prog .bar i{display:block;height:100%;background:var(--c1);box-shadow:0 0 6.4px var(--c1);}
.d-prog span{display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;}
.d-prog .ic{width:13px;height:13px;color:var(--gold);}
.d-card.locked .scene{filter:grayscale(1) brightness(.45);}
.d-card .lock{position:absolute;inset:0 0 70px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;}
.lock .lk{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(10,12,30,.55);border:1px solid var(--line2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.lock .lk .ic{width:18px;height:18px;color:var(--ink2);}
.lock small{font-size:12.5px;color:var(--ink2);}
.d-card.locked h3,.d-card.locked p{opacity:.55;}

/* ============ LEVEL MAP ============ */
.lv-hero{position:relative;height:clamp(250px,36%,320px);flex:none;}
.lv-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,6,15,.15) 0%,rgba(5,6,15,0) 22%,rgba(5,6,15,.32) 46%,rgba(5,6,15,.5) 72%,rgba(5,6,15,.7) 100%);}
.lv-hero-txt{position:absolute;left:22px;right:22px;bottom:6px;z-index:2;display:flex;flex-direction:column;gap:4px;}
.lv-hero-txt h2{font-size:36px;font-weight:300;letter-spacing:-.015em;line-height:1.05;}
.lv-hero-txt p{font-size:14px;color:var(--ink2);}
.lv-hero-txt .label{margin-top:8px;}
.lv-map{position:relative;padding-bottom:calc(var(--sab) + 24px);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 28px);mask-image:linear-gradient(180deg,transparent 0,#000 28px);}
.lv-canvas{position:relative;margin:0 auto;}
.lv-canvas svg.path{position:absolute;inset:0;overflow:visible;}
.lv-path-dim{stroke:rgba(255,255,255,.16);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-dasharray:1 6;}
.lv-path-on{stroke:var(--accent);stroke-width:2.5;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 4.8px var(--accent));}
.lnode{position:absolute;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(12,14,34,.62);border:1px solid var(--line2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 24px -8px rgba(0,0,0,.7);color:var(--ink);transition:transform .15s var(--ease);animation:nodeIn .7s var(--d,0s) var(--out) both;}
@keyframes nodeIn{from{opacity:0;transform:scale(.7);}}
.lnode:active{transform:scale(.93);}
.lnode b{font-size:20px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;}
.lnode .ns{position:absolute;bottom:-20px;display:flex;gap:3px;padding:3px 6px;border-radius:999px;background:rgba(10,12,30,.8);}
.lnode .ns .ic{width:10px;height:10px;color:rgba(255,255,255,.18);}
.lnode .ns .ic.got{color:var(--gold);filter:drop-shadow(0 0 3px rgba(246,198,110,.56));}
.lnode.done{border-color:rgba(var(--accent-rgb),.55);box-shadow:0 0 18px -4px rgba(var(--accent-rgb),.48),inset 0 0 14px rgba(var(--accent-rgb),.12);}
.lnode.current{width:74px;height:74px;margin:-37px 0 0 -37px;background:var(--accent);color:#120c04;border:0;box-shadow:0 0 0 6px rgba(var(--accent-rgb),.112),0 0 40px -4px rgba(var(--accent-rgb),.72);}
.lnode.current b{font-size:24px;font-weight:600;}
.lnode.current::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid var(--accent);animation:ringOut 2s ease-out infinite;}
.lnode .play-tag{position:absolute;bottom:-30px;padding:4px 9px;border-radius:999px;background:rgba(10,12,30,.8);border:1px solid rgba(var(--accent-rgb),.35);font-size:10.5px;font-weight:600;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;}
.lnode.locked{color:var(--faint);}
.lnode.locked .ic{width:16px;height:16px;}
.lnode.reward{width:72px;height:72px;margin:-36px 0 0 -36px;background:transparent;border:1px dashed var(--line2);}
.lnode.reward .ic{width:26px;height:26px;color:var(--faint);}
.lnode.reward.lit{border:1px solid var(--accent);box-shadow:0 0 30px -6px rgba(var(--accent-rgb),.72);}
.lnode.reward.lit .ic{color:var(--accent);}
.lnode.reward small{position:absolute;bottom:-28px;padding:4px 9px;border-radius:999px;background:rgba(10,12,30,.8);border:1px solid var(--line);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}

/* ============ GAME ============ */
#scr-game{background:radial-gradient(110% 60% at 50% 42%,rgba(var(--accent-rgb),.07),transparent 65%);}
.game-stars{position:absolute;inset:0;pointer-events:none;opacity:.55;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 75%);mask-image:linear-gradient(180deg,#000 30%,transparent 75%);}
.game-stars svg{width:100%;height:100%;display:block;}
.game-bg{top:auto;height:30%;opacity:.35;-webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);mask-image:linear-gradient(180deg,transparent,#000 60%);}
.game-title{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;}
.game-title b{font-size:18px;font-weight:600;}
.homes{gap:6px;padding:0 13px 0 11px;transition:border-color .4s,background .4s;}
.homes.all{border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.12);}
.homes.pop{animation:chipPop .5s var(--out);}
@keyframes chipPop{40%{transform:scale(1.12);}}
.homes .ic{width:15px;height:15px;color:var(--accent);}
.homes .ic.on{color:var(--accent);filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.72));}
.homes .ic.pop{transform:scale(1.35);}
.stats-bar{position:relative;z-index:3;display:flex;align-items:center;gap:18px;margin:8px 16px 0;padding:12px 18px;border-radius:20px;}
.sb-moves{display:flex;flex-direction:column;gap:2px;min-width:58px;}
.sb-moves b{font-size:30px;font-weight:300;line-height:1;}
.sb-track{flex:1;display:flex;flex-direction:column;gap:10px;}
.track{position:relative;height:3px;border-radius:3px;background:rgba(255,255,255,.1);}
.track i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.64);transition:width .35s var(--ease),background .4s;}
.track i.warn{background:#f0a35c;box-shadow:0 0 8px rgba(240,163,92,.64);}
.track i.bad{background:#f07384;box-shadow:0 0 8px rgba(240,115,132,.64);}
.tick{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--bg1);border:1.5px solid var(--gold);transition:border-color .3s,background .3s;}
.tick.passed{border-color:var(--faint);}
.sb-par{display:flex;justify-content:space-between;align-items:center;}
.sb-par b{color:var(--ink2);font-weight:600;}
.mini-stars{display:flex;gap:4px;}
.mini-stars .ic{width:13px;height:13px;color:var(--gold);filter:drop-shadow(0 0 4px rgba(246,198,110,.48));transition:color .4s,filter .4s,transform .4s;}
.mini-stars .ic.lost{color:rgba(255,255,255,.15);filter:none;}
.mini-stars .ic.drop{animation:starDrop .6s ease;}
@keyframes starDrop{30%{transform:scale(1.5);}}
.coach{position:relative;z-index:3;display:flex;gap:12px;align-items:center;margin:10px 16px 0;padding:12px 16px;border-radius:18px;font-size:13.5px;line-height:1.4;color:var(--ink2);animation:inUp .6s var(--out) both;}
.coach .ic{width:22px;height:22px;}
.stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;z-index:2;padding-top:44px;}
.board{position:relative;touch-action:none;transition:transform .9s var(--out),filter .9s;}
.board.won{transform:scale(1.025);}
.plate{position:absolute;inset:-10%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--accent-rgb),.06),rgba(var(--accent-rgb),.02) 50%,rgba(var(--accent-rgb),0) 100%);border:0;
  transition:background 1s;}
.plate::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.3px);background-size:16px 16px;-webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent);mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent);}
.board.won .plate{background:radial-gradient(closest-side,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.05) 60%,transparent 100%);}
.bed{position:absolute;border-radius:20px;background:var(--plate);box-shadow:inset 0 2px 12px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.07),0 0 0 6px rgba(255,255,255,.025),0 30px 60px -20px rgba(0,0,0,.85);transition:box-shadow .9s;}
.board.won .bed{box-shadow:inset 0 2px 12px rgba(0,0,0,.65),0 0 0 1px rgba(var(--accent-rgb),.48),0 0 0 6px rgba(var(--accent-rgb),.064),0 0 50px -6px rgba(var(--accent-rgb),.4);}
.slot{position:absolute;border-radius:20%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 9px);}
.sweep{position:absolute;inset:0;border-radius:26px;overflow:hidden;pointer-events:none;z-index:6;}
.sweep::before{content:"";position:absolute;top:-20%;bottom:-20%;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,250,235,.22),transparent);transform:skewX(-12deg);animation:sweep 1.1s .1s var(--ease) forwards;}
@keyframes sweep{to{left:130%;}}
.tile{position:absolute;left:0;top:0;transition:transform .2s var(--out);will-change:transform;z-index:2;}
.tile.dragging{transition:none;z-index:4;}
.tile.dragging .face{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 30px rgba(0,0,0,.6);transform:scale(1.03);}
.tile .face{position:absolute;inset:4%;border-radius:20%;background:radial-gradient(120% 90% at 22% 12%,rgba(255,255,255,.07),transparent 55%),linear-gradient(155deg,var(--tileA),var(--tileB));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.4),0 8px 16px -6px rgba(0,0,0,.7);transition:box-shadow .4s,transform .2s var(--out);overflow:hidden;}
.tile.deal .face{animation:deal .7s var(--dd,0s) var(--out) both;}
@keyframes deal{from{opacity:0;transform:translateY(10px) scale(.92);}}
.tile svg{position:absolute;inset:0;width:100%;height:100%;}
.ch-groove{stroke:rgba(0,0,0,.42);stroke-width:17;fill:none;stroke-linecap:round;}
.ch-line{stroke:var(--chan-dim);stroke-width:6.5;fill:none;stroke-linecap:round;transition:stroke .35s;}
.ch-glow{stroke:var(--accent);stroke-width:16;fill:none;stroke-linecap:round;opacity:0;transition:opacity .35s;filter:blur(4.5px);}
.ch-core{stroke:#fffaf0;stroke-width:2.2;fill:none;stroke-linecap:round;opacity:0;transition:opacity .35s;}
.ch-flow{stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-dasharray:3 21;opacity:0;}
.ch-node{fill:var(--chan-dim);transition:fill .35s;}
.ch-node-ring{fill:none;stroke:rgba(0,0,0,.42);stroke-width:5;}
.tile.on .ch-line{stroke:var(--accent);}
.tile.on .ch-glow{opacity:.44;}
.tile.on .ch-core{opacity:.9;}
.tile.on .ch-flow{opacity:.7;animation:flow .7s linear infinite;}
.tile.on .ch-node{fill:#fffaf0;}
.tile.on .face{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 30px rgba(var(--accent-rgb),.096),0 8px 16px -6px rgba(0,0,0,.7);}
.tile.surge .face{animation:surge .7s var(--sd,0s) ease-out;}
@keyframes surge{25%{filter:brightness(1.45);}}
.tile.hint .face{animation:hintPulse 1s ease-in-out 3;}
.board.coaching .tile.hint .face{animation-iteration-count:infinite;}
@keyframes hintPulse{50%{box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.72),0 0 26px rgba(var(--accent-rgb),.44);}}
.edge{position:absolute;z-index:3;}
.edge svg{width:100%;height:100%;overflow:visible;}
.e-groove{stroke:rgba(0,0,0,.42);stroke-width:15;stroke-linecap:round;}
.e-line{stroke:var(--chan-dim);stroke-width:5.5;stroke-linecap:round;transition:stroke .4s;}
.edge.on .e-line,.edge.source .e-line{stroke:var(--accent);filter:drop-shadow(0 0 3.2px var(--accent));}
.h-body{fill:#272c5a;stroke:rgba(255,255,255,.22);stroke-width:1;transition:fill .5s,stroke .5s;}
.h-roof{fill:#1b1f45;stroke:rgba(255,255,255,.3);stroke-width:1.2;stroke-linejoin:round;transition:stroke .5s,fill .5s;}
.h-chim{fill:#1b1f45;}
.h-door{fill:#151836;}
.h-win{fill:#121531;transition:fill .5s;}
.h-glow,.h-pool{opacity:0;transition:opacity .7s;}
.edge.on .h-body{fill:#2f3366;stroke:rgba(var(--accent-rgb),.5);}
.edge.on .h-roof{stroke:rgba(var(--accent-rgb),.95);fill:#24285a;}
.edge.on .h-door{fill:#6b4a2a;}
.edge.on .h-win{fill:#ffd88a;}
.edge.on .h-glow{opacity:.6;}
.edge.on .h-pool{opacity:.5;}
.edge.pop{animation:edgeIn .8s var(--de,0s) var(--out) both;}
@keyframes edgeIn{from{opacity:0;transform:scale(.8);}}
.ripple{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:1.5px solid rgba(var(--accent-rgb),.9);pointer-events:none;z-index:6;animation:ripple 1s var(--out) forwards;}
@keyframes ripple{from{transform:scale(.4);opacity:1;}to{transform:scale(3.2);opacity:0;}}
.p-ring{fill:none;stroke:var(--accent);stroke-width:1.2;transform-origin:center;transform-box:fill-box;animation:ringOut 2.4s ease-out infinite;}
.p-disc{fill:var(--accent);}
.p-glow{fill:var(--accent);opacity:.28;filter:blur(7px);}
.p-bolt{fill:#140d04;}
.spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(var(--accent-rgb),.72);pointer-events:none;z-index:6;}
.intro{position:absolute;left:0;right:0;top:12px;display:flex;justify-content:center;pointer-events:none;z-index:8;opacity:0;}
.intro small,.intro b,.intro .label{display:none;}
.intro.show{animation:intro 3.4s var(--ease) forwards;}
@keyframes intro{0%{opacity:0;transform:translateY(-6px);}12%{opacity:1;transform:none;}82%{opacity:1;}100%{opacity:0;}}
.intro::before{display:none;}
.intro b{font-size:44px;font-weight:200;letter-spacing:.06em;}
.intro.show b{animation:introTrack 2s var(--out) both;}
@keyframes introTrack{from{letter-spacing:.3em;}to{letter-spacing:.06em;}}
.intro-goal{font-size:12.5px;color:var(--ink);padding:7px 14px;border-radius:999px;background:rgba(12,14,34,.72);border:1px solid var(--line2);}
.win-caption{position:absolute;left:50%;top:6px;transform:translateX(-50%);white-space:nowrap;text-align:center;z-index:8;color:var(--accent);padding:7px 14px;border-radius:999px;background:rgba(12,14,34,.72);border:1px solid rgba(var(--accent-rgb),.35);animation:inUp .8s var(--out) both;}
.controls{position:relative;z-index:3;display:flex;justify-content:center;gap:34px;padding:26px 20px 0;background:linear-gradient(180deg,rgba(5,6,15,0),rgba(5,6,15,.85) 40%);}
.ctrl-ic{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),rgba(10,12,30,.6)!important;}
.ctrl{display:flex;flex-direction:column;align-items:center;gap:8px;}
.ctrl .label{font-size:10px;}
.ctrl-ic{position:relative;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--glass);border:1px solid var(--line2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .15s var(--ease),background .2s,border-color .3s;}
.ctrl:active .ctrl-ic{transform:scale(.92);background:var(--glass2);}
.ctrl-ic .ic{width:21px;height:21px;}
.ctrl:disabled{opacity:.35;}
.ctrl-hint .ctrl-ic{border-color:rgba(var(--accent-rgb),.45);color:var(--accent);}
.ctrl-hint.nudge .ctrl-ic{animation:nudge 1.6s ease-in-out infinite;}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.0);}50%{box-shadow:0 0 0 6px rgba(var(--accent-rgb),.112),0 0 24px rgba(var(--accent-rgb),.4);}}
.count{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--accent);color:#120c04;font-size:10.5px;font-weight:700;display:grid;place-items:center;}

/* ============ OVERLAYS ============ */
.overlay{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(4,5,12,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:fadeIn .5s ease both;}
.result{align-items:flex-end;padding:0 10px calc(var(--sab) + 10px);}
.result-card{position:relative;width:100%;max-width:440px;border-radius:30px;padding:26px 22px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;animation:sheetUp .7s var(--out) both;}
@keyframes sheetUp{from{transform:translateY(105%);}}
.result-title{font-size:40px;font-weight:200;letter-spacing:-.01em;margin-top:4px;}
.big-stars{position:relative;display:flex;align-items:center;gap:14px;margin:10px 0 16px;}
.big-stars::before{content:"";position:absolute;left:50%;top:50%;width:220px;height:120px;margin:-60px 0 0 -110px;background:radial-gradient(closest-side,rgba(246,198,110,.14),transparent);pointer-events:none;}
.bs{position:relative;width:42px;height:42px;}
.bs:nth-child(2){width:52px;height:52px;}
.bs .ic{position:absolute;inset:0;width:100%;height:100%;}
.bs .empty{color:rgba(255,255,255,.1);}
/* Explicit round light avoids filtering an animated rectangular HTML wrapper. */
.bs::before{content:"";position:absolute;inset:-16px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(246,198,110,.22),rgba(246,198,110,.095) 50%,rgba(246,198,110,0) 100%);opacity:0;transform:scale(.4);}
.bs .full{color:var(--gold);opacity:0;transform:scale(.4);filter:none;}
.bs.got .full{animation:starIn .7s var(--out) forwards;}
.bs.got::before{animation:starHalo .7s var(--out) forwards;}
@keyframes starHalo{0%{opacity:0;transform:scale(.4);}60%{opacity:1;transform:scale(1.12);}100%{opacity:1;transform:scale(1);}}
@keyframes starIn{0%{opacity:0;transform:scale(.4) rotate(-30deg);}60%{opacity:1;transform:scale(1.12) rotate(4deg);}100%{opacity:1;transform:scale(1) rotate(0);}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);width:100%;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.stats div{display:flex;flex-direction:column;align-items:center;gap:6px;}
.stats div+div{border-left:1px solid var(--line);}
.stats b{font-size:26px;font-weight:300;}
.result-note{margin:12px 0 0;font-size:13.5px;color:var(--accent);}
.result-note:empty{display:none;}
.res-prog{width:100%;display:flex;flex-direction:column;gap:8px;margin:14px 0 14px;text-align:left;}
.res-prog .bar{height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;}
.res-prog .bar i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.64);transition:width 1.2s var(--out);}
.result-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:4px;}
.result-row .btn{height:48px;font-size:15px;font-weight:500;}

.district-done{flex-direction:column;justify-content:flex-end;padding:0;background:#05060f;backdrop-filter:none;-webkit-backdrop-filter:none;}
.district-done .scene{bottom:36%;}
.dd-text{position:relative;width:100%;padding:96px 22px calc(var(--sab) + 24px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(5,6,15,0),rgba(5,6,15,.8) 22%,rgba(5,6,15,.96) 40%);z-index:2;}
.dd-text .label{animation:inUp 1s .3s var(--out) both;}
.dd-text h2{font-size:44px;font-weight:200;letter-spacing:-.01em;animation:inUp 1.2s .45s var(--out) both;}
.dd-sub{color:var(--ink2);font-size:15px;animation:inUp 1.2s .6s var(--out) both;}
.unlock{display:flex;align-items:center;gap:14px;width:100%;max-width:400px;padding:10px 16px 10px 10px;border-radius:20px;margin:16px 0 8px;text-align:left;animation:inUp 1s 1.8s var(--out) both;}
.uc-art{position:relative;width:84px;height:56px;border-radius:12px;overflow:hidden;flex:none;}
.uc-txt{flex:1;display:flex;flex-direction:column;gap:3px;}
.uc-txt b{font-size:18px;font-weight:600;}
.dd-text .btn{max-width:400px;animation:inUp 1s 2.1s var(--out) both;}

.how-card{position:relative;width:100%;max-width:390px;border-radius:30px;padding:24px 0 20px;display:flex;flex-direction:column;align-items:center;gap:16px;animation:inUp .6s var(--out) both;}
.how-close{position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;}
.how-label{margin-top:4px;}
.how-pages{display:flex;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x;}
.how-pages::-webkit-scrollbar{display:none;}
.how-page{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 28px;text-align:center;}
.how-art{width:290px;height:178px;}
.how-art svg{width:100%;height:100%;overflow:visible;}
.how-page h3{font-size:24px;font-weight:500;letter-spacing:-.01em;}
.how-page p{font-size:15px;line-height:1.5;color:var(--ink2);}
.how-page p b{color:var(--ink);font-weight:600;}
.how-dots{display:flex;gap:6px;}
.how-dots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.2);transition:all .35s var(--out);}
.how-dots i.on{width:22px;background:var(--gold);}
.how-card .btn{width:calc(100% - 44px);}
.demo-slide{animation:demoSlide 3s var(--ease) infinite;}
@keyframes demoSlide{0%,25%{transform:translateX(0);}45%,85%{transform:translateX(-68px);}100%{transform:translateX(0);}}
.demo-line{animation:demoLine 3s ease infinite;}
@keyframes demoLine{0%,40%{stroke:#3a4178;}50%,85%{stroke:#f6c66e;}100%{stroke:#3a4178;}}
.demo-win{animation:demoWin 3s ease infinite;}
@keyframes demoWin{0%,45%{fill:#0b0d22;}55%,85%{fill:#ffd88a;}100%{fill:#0b0d22;}}
.demo-touch{animation:demoTouch 3s var(--ease) infinite;}
@keyframes demoTouch{0%,15%{transform:translate(0,8px);opacity:0;}22%{opacity:1;transform:translate(0,0);}45%,62%{transform:translate(-68px,0);opacity:1;}75%,100%{opacity:0;transform:translate(-68px,0);}}

.sheet-wrap{position:absolute;inset:0;z-index:70;}
.sheet-scrim{position:absolute;inset:0;background:rgba(4,5,12,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn .3s ease both;}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;border-radius:30px 30px 0 0;padding:10px 18px 0;border-bottom:0;animation:sheetUp .55s var(--out) both;}
.sheet-wrap.closing .sheet-panel{animation:sheetDown .3s ease-in forwards;}
.sheet-wrap.closing .sheet-scrim{animation:fadeOut .3s ease forwards;}
@keyframes sheetDown{to{transform:translateY(105%);}}
.grabber{width:36px;height:5px;border-radius:99px;background:rgba(255,255,255,.2);margin:0 auto 16px;}
.sheet-panel h3{font-size:20px;font-weight:600;text-align:center;}
.sheet-panel .sub{text-align:center;color:var(--muted);font-size:13.5px;margin-top:4px;}
.sheet-body{display:flex;flex-direction:column;gap:14px;margin:20px 0 8px;}
.group{border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line);overflow:hidden;}
.row{display:flex;align-items:center;gap:14px;padding:0 16px;min-height:54px;width:100%;font-size:15.5px;}
.row+.row{border-top:1px solid var(--line);}
.row > .ic{width:19px;height:19px;color:var(--ink2);}
.row .grow{flex:1;}
.row small{display:block;font-size:12px;color:var(--muted);margin-top:1px;}
.row .chev{width:15px;height:15px;color:var(--faint);}
button.row:active{background:rgba(255,255,255,.04);}
.row.danger,.row.danger > .ic{color:#ff8f9b;}
.switch{position:relative;width:48px;height:29px;border-radius:99px;background:rgba(255,255,255,.14);transition:background .3s;flex:none;}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:25px;height:25px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .3s var(--out);}
.switch.on{background:var(--gold);}
.switch.on::after{transform:translateX(19px);}
input[type=range]{-webkit-appearance:none;appearance:none;width:100px;height:3px;border-radius:99px;background:rgba(255,255,255,.18);outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.4);}
.about{text-align:center;font-size:11.5px;color:var(--faint);letter-spacing:.04em;margin:4px 0 6px;}

.toast{position:absolute;left:50%;top:calc(var(--sat) + 66px);transform:translateX(-50%);z-index:99;display:flex;align-items:center;gap:10px;white-space:nowrap;
  background:rgba(16,18,40,.92);border:1px solid var(--line2);padding:11px 18px;border-radius:999px;font-size:13.5px;box-shadow:0 14px 34px rgba(0,0,0,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:toastIn .45s var(--out);}
.toast .ic{width:16px;height:16px;color:var(--gold);}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-10px);}}

@media (max-height:740px){
  .home-hero{margin-top:7vh;gap:16px;} .home-mark{width:88px;height:88px;} .home-hero .wordmark{font-size:25px;} .wordmark{font-size:22px;}
  .continue{padding:12px 12px 12px 18px;} .cont-txt b{font-size:19px;} .q{padding:11px 12px;} .q .ic{margin-bottom:6px;}
  .stats-bar{padding:9px 16px;} .sb-moves b{font-size:26px;} .ctrl-ic{width:48px;height:48px;} .controls{gap:28px;}
  .lv-hero{height:230px;} .ld-mark{width:92px;height:92px;} .intro b{font-size:38px;}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.05s!important;}
}

/* ---------- district atmosphere ---------- */
.aurora-band{animation:aurora 14s ease-in-out infinite alternate;}
.aurora-band.b2{animation-duration:19s;animation-delay:-6s;}
@keyframes aurora{0%{transform:translateX(-14px);opacity:.14;}50%{opacity:.3;}100%{transform:translateX(14px);opacity:.18;}}
.beam{animation:beamSway 9s ease-in-out infinite alternate;}
.beam.b2{animation-duration:12s;animation-delay:-4s;}
@keyframes beamSway{from{transform:rotate(-14deg);}to{transform:rotate(14deg);}}
.neon.fl2{animation:neonFlick 6s var(--dl,0s) infinite;}
@keyframes neonFlick{0%,88%,100%{opacity:1;}90%{opacity:.25;}92%{opacity:1;}94%{opacity:.4;}}
.lh-beam{animation:lhSweep 7s linear infinite;}
@keyframes lhSweep{0%{transform:scaleX(1);opacity:.9;}45%{transform:scaleX(-1);opacity:.9;}50%{transform:scaleX(-1);opacity:.4;}95%{transform:scaleX(1);opacity:.9;}100%{transform:scaleX(1);opacity:.4;}}
.shimmer{animation:shimmer 4s var(--dl,0s) ease-in-out infinite;}
@keyframes shimmer{50%{opacity:.04;transform:translateX(3px);}}

/* ---------- districts summary + compact locked cards ---------- */
.d-summary{flex:none;padding:16px 18px;border-radius:20px;display:flex;flex-direction:column;gap:12px;animation:inUp .7s var(--out) both;}
.ds-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.ds-num{font-size:13.5px;color:var(--ink2);}
.ds-num b{color:var(--ink);font-size:15px;}
.ds-bars{display:grid;grid-template-columns:repeat(var(--district-count,4),minmax(0,1fr));gap:6px;}
.ds-bars span{height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;}
.ds-bars i{display:block;height:100%;background:var(--c1);box-shadow:0 0 4.8px var(--c1);}
.d-card.locked{height:128px;padding:14px 20px;}
.d-card.locked .numeral{font-size:26px;top:12px;}
.d-card.locked h3{font-size:19px;opacity:.7;}
.d-card.locked p{font-size:12.5px;opacity:.75;}
.d-card.locked .badge{top:14px;color:var(--ink2);}
.badge.now{color:var(--c1);border-color:var(--c1);}

/* ---------- preview sheets ---------- */
.sheet-eyebrow{display:block;text-align:center;}
.sheet-big{font-size:30px!important;font-weight:300!important;letter-spacing:-.01em;margin-top:6px;}
.meta3{display:grid;grid-template-columns:repeat(3,1fr);margin:18px 0 4px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.meta3 div{display:flex;flex-direction:column;align-items:center;gap:6px;}
.meta3 div+div{border-left:1px solid var(--line);}
.meta3 b{font-size:20px;font-weight:400;display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;}
.meta3 b .ic{width:15px;height:15px;}
.targets{display:flex;flex-direction:column;margin-top:14px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--line);overflow:hidden;}
.target{display:flex;align-items:center;gap:14px;padding:12px 16px;font-size:14.5px;color:var(--ink2);}
.target+.target{border-top:1px solid var(--line);}
.t-stars{display:flex;gap:2px;width:52px;}
.t-stars .ic{width:14px;height:14px;color:rgba(255,255,255,.12);}
.t-stars .ic.on{color:var(--gold);}
.target.got{color:var(--ink);}
.t-check{width:16px;height:16px;color:var(--accent);}
.sheet-note{text-align:center;font-size:14px;line-height:1.5;color:var(--ink2);margin:16px 6px 0;}

/* ---------- depth: grain, bokeh, sky motion ---------- */
#app::after{content:"";position:absolute;inset:0;z-index:200;pointer-events:none;background:url(/img/grain.png);background-size:160px 160px;opacity:.045;mix-blend-mode:overlay;}
.bokeh{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.bokeh i{position:absolute;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(var(--c),var(--a)) 0%,rgba(var(--c),calc(var(--a) * .6)) 45%,rgba(var(--c),0) 70%);animation:bokeh var(--t) var(--dl) ease-in-out infinite alternate;}
@keyframes bokeh{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.15);}}
#gameBokeh{opacity:.9;}
.blink{animation:blink 2.6s var(--dl,0s) steps(1) infinite;}
@keyframes blink{0%,62%{opacity:.15;}63%,100%{opacity:1;}}
.cloud-drift{animation:cloudDrift var(--t) var(--dl) ease-in-out infinite alternate;}
@keyframes cloudDrift{from{transform:translateX(-24px);}to{transform:translateX(24px);}}
.lv-bg{z-index:0;}
.lv-hero,.lv-map{z-index:1;}
.tile.on .face::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 50%,rgba(var(--accent-rgb),.2),transparent 68%);pointer-events:none;}
.tile .face svg{z-index:1;}
.bed{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.05)),var(--plate);}


/* ---------- board polish ---------- */
.p-spin{fill:none;stroke:var(--accent);stroke-width:1;stroke-dasharray:2 4.5;opacity:.6;animation:spin 8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.board.won .tile:not(.on) .face{opacity:.62;filter:saturate(.6);transition:opacity .8s,filter .8s;}
.tile .face{transition:box-shadow .4s,transform .2s var(--out),opacity .8s;}
.bokeh i{--a2:calc(var(--a) * .8);}

/* ---------- v1.8: motion + rendering ---------- */
html{text-rendering:optimizeLegibility;}
#app::after{background-size:128px 128px;opacity:.035;}
.bokeh i,.cloud-drift,.car,.shoot{will-change:transform;}
.screen.active .wordmark em{background:linear-gradient(100deg,var(--gold) 0%,var(--gold) 40%,#fff3d0 50%,var(--gold) 60%,var(--gold) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:wmShine 6s 2s ease-in-out infinite;}
@keyframes wmShine{0%,70%{background-position:100% 0;}100%{background-position:-50% 0;}}
.car{animation:drive var(--t) var(--dl) linear infinite;}
.car.rev{animation-direction:reverse;}
@keyframes drive{from{transform:translateX(-20px);}to{transform:translateX(420px);}}
.shoot{opacity:0;animation:shoot 13s var(--dl) ease-out infinite;}
@keyframes shoot{0%,90%{opacity:0;transform:translate(0,0);}91%{opacity:1;}97%{opacity:0;transform:translate(70px,21px);}100%{opacity:0;}}
.lv-path-on.draw-in{stroke-dasharray:100;stroke-dashoffset:100;animation:pathDraw 1.4s .25s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes pathDraw{to{stroke-dashoffset:0;}}
.d-card .scene{transition:transform .2s linear;transform:scale(1.08);}
.btn,.continue,.q,.d-card,button.row{overflow:hidden;}
.btn::before,.continue::before,.q::before,.d-card::before,button.row::before{content:"";position:absolute;left:var(--px,50%);top:var(--py,50%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:rgba(255,255,255,.22);opacity:0;pointer-events:none;z-index:5;}
.pressed::before{animation:press .6s var(--out);}
@keyframes press{from{opacity:1;transform:scale(1);}to{opacity:0;transform:scale(40);}}
.btn-primary.pressed::before{background:rgba(255,255,255,.5);}
.q.pressed .ic{animation:icPop .45s var(--out);}
@keyframes icPop{40%{transform:scale(1.25) rotate(-6deg);}}
.continue .play-btn{animation:playPulse 2.8s ease-in-out infinite;}
@keyframes playPulse{0%,100%{box-shadow:0 8px 22px -6px rgba(246,198,110,.64),0 0 0 0 rgba(246,198,110,.28);}50%{box-shadow:0 8px 22px -6px rgba(246,198,110,.64),0 0 0 8px rgba(246,198,110,.0);}}
.stats b{display:inline-block;min-width:1.2em;}
.continue,button.row{position:relative;}

/* ---------- v1.9 ---------- */
.celebrate{z-index:39;}
.ld-progress.done .hair i{background:linear-gradient(90deg,rgba(246,198,110,.5),var(--gold));box-shadow:0 0 10px rgba(246,198,110,.56);}
.ld-progress.done .hair i::after{animation:sparkDone 1.6s ease-in-out infinite;}
@keyframes sparkDone{50%{box-shadow:0 0 14px 4px rgba(246,198,110,.8),0 0 30px 10px rgba(246,198,110,.4);}}
.ld-progress.done .label{color:var(--gold);}
.btn-begin{margin-top:2px;}

.lv-hero-txt::before{content:"";position:absolute;left:-30px;right:-30px;top:-20px;bottom:-14px;background:radial-gradient(ellipse closest-side at 50% 50%,rgba(5,6,15,.28),rgba(5,6,15,0));z-index:-1;pointer-events:none;}
.home-hero::before{content:"";position:absolute;left:50%;top:50%;width:460px;height:340px;margin:-170px 0 0 -230px;background:radial-gradient(closest-side,rgba(5,6,15,.45),rgba(5,6,15,0));z-index:-1;pointer-events:none;}
.d-card h3,.d-card p,.d-prog{text-shadow:0 1px 8px rgba(0,0,0,.7);}

.ld-center .btn-begin{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:calc(var(--sab) + 34px);z-index:3;}

/* v002 polish: true-viewport height on iPhone + upright-only hint */
html,body{height:100%;height:100dvh;}
#rotateHint{display:none;position:fixed;inset:0;z-index:99999;background:#05060f;color:#f4f1ea;align-items:center;justify-content:center;text-align:center;font-family:var(--font);}
#rotateHint p{margin-top:12px;font-size:16px;letter-spacing:.04em;color:#bfc2dc;}
@media (orientation:landscape) and (max-height:500px){#rotateHint{display:flex;}}

/* v003: centered play glyph + refined in-game HUD */
#scr-game .topbar{padding-top:6px;padding-bottom:4px;gap:12px;}
#scr-game .topbar .icon-btn{width:44px;height:44px;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03)),rgba(10,12,30,.55);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 16px -8px rgba(0,0,0,.7);}
#scr-game .game-title{gap:2px;}
#scr-game .game-title .label{font-size:10.5px;letter-spacing:.28em;display:flex;align-items:center;gap:8px;}
#scr-game .game-title .label::before,#scr-game .game-title .label::after{content:"";width:14px;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.7));}
#scr-game .game-title .label::after{transform:scaleX(-1);}
#scr-game .game-title b{font-size:21px;font-weight:600;letter-spacing:.01em;text-shadow:0 2px 14px rgba(var(--accent-rgb),.28);}
#scr-game .homes{height:44px;padding:0 14px 0 12px;gap:7px;font-size:16px;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03)),rgba(10,12,30,.55);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 16px -8px rgba(0,0,0,.7);}
#scr-game .homes .ic{width:17px;height:17px;}
#scr-game .homes small{font-size:13px;}
#scr-game .homes.all{border-color:rgba(var(--accent-rgb),.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 18px -2px rgba(var(--accent-rgb),.44);}
#scr-game .stats-bar{margin:8px 16px 0;padding:14px 20px 13px;gap:0;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02)),rgba(10,12,30,.55);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 30px -16px rgba(0,0,0,.8);}
#scr-game .sb-moves{min-width:74px;padding-right:18px;margin-right:18px;border-right:1px solid rgba(255,255,255,.12);align-items:flex-start;gap:5px;}
#scr-game .sb-moves b{font-size:34px;font-weight:300;line-height:1;font-variant-numeric:tabular-nums;}
#scr-game .sb-track{gap:12px;}
#scr-game .track{height:6px;border-radius:6px;background:rgba(255,255,255,.09);box-shadow:inset 0 1px 2px rgba(0,0,0,.5);}
#scr-game .track i{border-radius:6px;}
#scr-game .tick{width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--bg1);border:2px solid var(--gold);box-shadow:0 0 8px rgba(246,198,110,.44);}
#scr-game .tick.passed{border-color:var(--faint);box-shadow:none;}
#scr-game .sb-par .label{font-size:10.5px;}
#scr-game .sb-par .label b{color:var(--gold);}
#scr-game .mini-stars{gap:5px;}
#scr-game .mini-stars .ic{width:16px;height:16px;}

/* v004: centered game title, compact homes pill, refined district + level screens */
#scr-game .topbar{display:grid;grid-template-columns:76px 1fr 76px;align-items:center;gap:6px;}
#scr-game .topbar .icon-btn{justify-self:start;}
#scr-game .homes{justify-self:end;height:36px;padding:0 10px 0 9px;gap:4px;font-size:15px;max-width:76px;}
#scr-game .homes .ic{width:15px;height:15px;}
#scr-game .homes small{font-size:11.5px;margin-left:0;}
#scr-game .game-title{justify-self:center;max-width:100%;height:44px;justify-content:center;gap:3px;padding-top:2px;}
#scr-game .game-title .label,#scr-game .game-title b{line-height:1.1;}

/* districts list */
.d-list{gap:16px;padding-top:6px;}
.d-card{height:200px;border-radius:26px;border:1px solid rgba(255,255,255,.14);box-shadow:0 26px 50px -26px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.14);}
.d-card .numeral{font-size:30px;font-weight:200;color:rgba(255,255,255,.88);text-shadow:0 2px 14px rgba(0,0,0,.6);}
.d-card .numeral::after{content:"";display:block;width:22px;height:2px;margin-top:8px;border-radius:2px;background:var(--gold);box-shadow:0 0 10px rgba(246,198,110,.56);}
.d-card h3{font-size:27px;font-weight:500;}
.d-card p{font-size:13.5px;color:rgba(244,241,234,.8);}
.d-prog{margin-top:14px;padding:9px 12px;border-radius:14px;background:rgba(8,9,22,.55);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.d-prog .bar{height:4px;border-radius:4px;background:rgba(255,255,255,.14);}
.d-prog .bar i{border-radius:4px;}
.d-card.locked{border-color:rgba(255,255,255,.08);box-shadow:0 14px 30px -20px rgba(0,0,0,.9);}
.bar-title{letter-spacing:.02em;}

/* level map */
.lv-canvas{margin-top:34px;}
.lv-hero-txt .numeral{font-size:30px;font-weight:200;display:flex;align-items:center;gap:12px;}
.lv-hero-txt .numeral::after{content:"";width:34px;height:2px;border-radius:2px;background:var(--gold);box-shadow:0 0 10px rgba(246,198,110,.56);}
.lv-hero-txt h2{font-size:38px;font-weight:300;}
.lv-hero-txt .label{align-self:flex-start;margin-top:10px;padding:6px 12px;border-radius:999px;background:rgba(10,12,30,.32);border:1px solid rgba(255,255,255,.07);color:var(--ink2);font-size:10.5px;letter-spacing:.18em;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.lnode{background:radial-gradient(circle at 50% 30%,#232857,#0f1230 70%);border:1.5px solid rgba(255,255,255,.2);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 12px 24px -8px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.18);}
.lnode.done{background:radial-gradient(circle at 50% 30%,#3b3358,#14122f 72%);border-color:rgba(var(--accent-rgb),.7);}
.lnode.locked{background:radial-gradient(circle at 50% 30%,#1a1d3c,#0b0d22 72%);border-color:rgba(255,255,255,.1);}
.lnode.current{background:linear-gradient(180deg,#ffdc99,var(--accent) 60%,#eaa84c);}
.lnode .ns{background:#0c0e24;border:1px solid rgba(255,255,255,.1);padding:4px 7px;gap:4px;}
.lnode .ns .ic{width:11px;height:11px;}
.lnode .play-tag{background:#0c0e24;padding:5px 11px;}
.lnode.reward{background:radial-gradient(circle at 50% 30%,#1a1d3c,#0b0d22 72%);}
.lv-path-dim{stroke:rgba(255,255,255,.22);}

/* v005: restore safe-area top padding on the game HUD (v003 override removed it) */
#scr-game .topbar.safe-top{padding-top:calc(var(--sat) + 10px);}

/* ============ 2.2 candidate v001: one measured canvas, generous touch space ============ */
:root{
  --app-h:100dvh; --dead-b:0px;
  --sab-env:env(safe-area-inset-bottom,0px);
  --sab:max(var(--sab-env),var(--dead-b));
  --brand-size:clamp(170px,52vw,214px);
}
html,body{width:100%;height:100%;overflow:hidden;}
@supports(height:100dvh){html,body{height:100dvh;}}
html.standalone{height:100lvh;}
body,#app,#rotateHint{top:0;bottom:auto;height:var(--app-h);min-height:0;}
body{position:fixed;left:0;right:0;}
#app{isolation:isolate;overflow:clip;}
.screen{min-height:0;}
.screen:not(.active){pointer-events:none;}
/* Hidden scenes keep their geometry while decorative animations stop consuming frames. */
.screen:not(.active),.screen:not(.active) *,.screen:not(.active) *::before,.screen:not(.active) *::after{animation-play-state:paused!important;}
button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:4px;}
.icon-btn{width:44px;height:44px;}
.topbar{flex:none;}
.label{letter-spacing:.16em;}

/* The SVG viewBox is centered on the window, at (60,74), not the roof outline. */
.mark svg{display:block;}
/* Owner-requested optical correction; only house artwork moves, never the layout. */
#homeMark > svg,#ldMark > svg{transform:translateX(3px);}
/* District map progress only; the moon beneath is decorative scene artwork. */
/* Match the decorative moon at12% of the portrait canvas without growing the row. */
#scr-levels .topbar .chip{position:absolute;right:16px;top:calc(var(--app-h) * .12 - 22px);height:44px;padding:0 14px;gap:7px;font-size:16px;background:#101326;}
#scr-levels .topbar .chip .ic{width:17px;height:17px;}
#scr-levels .topbar .chip small{font-size:13px;}
.home-hero{flex:1;min-height:0;justify-content:center;gap:12px;margin:0;padding:8px 18px 24px;text-align:center;}
.home-mark,.ld-mark{flex:none;width:var(--brand-size);height:var(--brand-size);}
.home-hero .wordmark,.ld-word{font-size:clamp(21px,6.4vw,28px);letter-spacing:.23em;margin-right:-.23em;}
.home-tag,.ld-tag{max-width:310px;font-size:15px;line-height:1.5;margin-top:0;color:var(--ink2);opacity:1;}
.home-bottom{flex:none;gap:12px;padding:0 18px calc(var(--sab) + 18px);}
.continue{border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px rgba(255,255,255,.07),0 16px 30px -22px #000;}
.q{min-height:96px;border-color:rgba(255,255,255,.12);}
.q small{color:var(--ink2);}
.ld-center{min-height:0;justify-content:center;gap:12px;padding:calc(var(--sat) + 24px) 24px calc(var(--sab) + 28px);}
.ld-controls{margin-top:36px;gap:20px;}
.ld-center .btn-begin{position:relative;left:auto;right:auto;bottom:auto;margin:0;width:auto;min-width:198px;height:54px;}
.ld-tip{font-size:13px;min-height:38px;}

/* More breathing room above the meter; one centered axis for label and count. */
#scr-game .stats-bar{flex:none;margin-top:18px;padding:14px 18px;}
#scr-game .sb-moves{align-items:center;text-align:center;min-width:76px;}
#scr-game .sb-moves .num{display:block;width:100%;}
#scr-game .stage{padding:18px 6px 10px;}
.coach{flex:none;font-size:13px;padding:10px 14px;}
.controls{flex:none;gap:22px;padding:12px 20px calc(var(--sab) + 16px);}
.ctrl{min-width:70px;gap:9px;}
.ctrl-ic{width:56px;height:56px;border-radius:19px;box-shadow:inset 0 1px rgba(255,255,255,.12),0 12px 24px -18px #000;}
.ctrl .label{font-size:11px;color:var(--ink2);}
.ctrl-undo .ctrl-ic,.ctrl-hint .ctrl-ic{border-color:rgba(var(--accent-rgb),.55);color:var(--accent);}
.ctrl .count{min-width:21px;height:21px;display:grid;place-items:center;top:-6px;right:-6px;font-size:12px;border:2px solid var(--bg1);}
.ctrl:disabled{opacity:.42;cursor:default;}
.ctrl:disabled .ctrl-ic{transform:none;box-shadow:none;border-color:var(--line2);color:var(--ink2);}
.ctrl:disabled .count{background:var(--ink2);color:var(--bg1);}

/* Guide: a real heading, bounded illustrations, and a safe scrollable dialog. */
.overlay{padding:calc(var(--sat) + 16px) max(16px,var(--sar)) calc(var(--sab) + 16px) max(16px,var(--sal));}
.how-card{max-height:calc(var(--app-h) - var(--sat) - var(--sab) - 32px);overflow-y:auto;overscroll-behavior:contain;padding:26px 0 24px;gap:18px;border-radius:28px;background:radial-gradient(100% 60% at 50% 0%,rgba(246,198,110,.07),transparent 70%),linear-gradient(180deg,#1b1e40,#0e1026);}
.how-label{font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.025em;margin:0;padding:0 52px;color:var(--ink);text-align:center;}
.how-close{width:40px;height:40px;top:17px;right:13px;}
.how-pages{flex:none;touch-action:auto;}
.how-page{padding:0 24px;gap:14px;min-width:0;}
.how-art{width:min(100%,290px);height:158px;flex:none;border-radius:22px;background:radial-gradient(ellipse,rgba(246,198,110,.06),transparent 72%);}
.how-page h3{font-size:25px;font-weight:600;}
.how-page p{font-size:16px;line-height:1.5;min-height:96px;}
.how-dots{flex:none;gap:7px;}
.how-dots i{width:7px;height:7px;}
.how-card>.btn{flex:none;width:calc(100% - 40px);}
.sheet-panel{max-height:calc(var(--app-h) - var(--sat) - 20px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(var(--sab) + 16px);}
.sheet-body.daily-action{margin-bottom:24px;}
.sheet-panel .row{min-height:56px;}
.about{color:var(--muted);margin:10px 0 2px;}
.toast{white-space:normal;max-width:calc(100% - 32px);width:max-content;text-align:center;}

/* District selection stays readable above six compact block choices. */
.lv-hero{height:calc(var(--sat) + 216px);}
.lv-hero-txt{left:22px;right:22px;bottom:16px;gap:5px;}
.lv-hero-txt .numeral{font-size:23px;color:var(--accent);}
.lv-hero-txt h2{font-size:36px;font-weight:500;letter-spacing:-.035em;}
.lv-hero-txt p{font-size:14px;}
.lv-hero-txt .label{margin-top:8px;letter-spacing:.12em;}
.d-list{max-width:540px;width:100%;margin:0 auto;}
.d-card h3{font-weight:600;}

@media(max-height:680px){
  :root{--brand-size:154px;}
  .home-hero{gap:8px;padding-bottom:14px;}
  .home-hero .wordmark,.ld-word{font-size:22px;}
  .home-tag,.ld-tag{font-size:13.5px;max-width:280px;}
  .home-bottom{gap:10px;padding-bottom:calc(var(--sab) + 12px);}
  .continue{padding:12px 14px 12px 18px;}
  .cont-txt b{font-size:20px;}
  .cont-ring{width:58px;height:58px;}
  .q{padding:11px 12px;min-height:80px;}
  .q .ic{margin-bottom:5px;width:19px;height:19px;}
  .q b{font-size:14px;}.q small{font-size:11px;}
  .ld-center{padding-top:calc(var(--sat) + 18px);padding-bottom:calc(var(--sab) + 18px);gap:10px;}
  .ld-controls{margin-top:24px;gap:18px;}
  .ld-tip{display:none;}
  #scr-game .stats-bar{margin-top:14px;padding:10px 14px;}
  #scr-game .sb-moves b{font-size:30px;}
  #scr-game .stage{padding-top:40px;padding-bottom:4px;}
  .controls{padding-top:8px;padding-bottom:calc(var(--sab) + 10px);gap:20px;}
  .ctrl-ic{width:48px;height:48px;border-radius:16px;}
  .coach{font-size:12px;margin-top:8px;padding:8px 12px;}
  .how-card{gap:13px;padding:20px 0;}
  .how-label{font-size:23px;}
  .how-close{top:12px;width:36px;height:36px;}
  .how-art{height:100px;}
  .how-page{gap:10px;padding:0 20px;}
  .how-page h3{font-size:22px;}
  .how-page p{font-size:14.5px;min-height:100px;}
  .lv-hero{height:calc(var(--sat) + 216px);}
  .lv-hero-txt h2{font-size:30px;}
}
@media(max-width:350px){
  #scr-game .topbar{grid-template-columns:60px 1fr 60px;padding-left:12px;padding-right:12px;}
  #scr-game .game-title .label{font-size:9px;letter-spacing:.14em;gap:4px;}
  #scr-game .game-title .label::before,#scr-game .game-title .label::after{width:7px;}
  #scr-game .homes{padding:0 8px;}
  #scr-game .stats-bar{margin-left:12px;margin-right:12px;}
  #scr-game .sb-moves{min-width:64px;padding-right:12px;margin-right:12px;}
  .home-hero .wordmark,.ld-word{font-size:21px;letter-spacing:.17em;margin-right:-.17em;}
  .home-bottom{padding-left:14px;padding-right:14px;}
  .quick{gap:8px;}
}
@media(orientation:landscape) and (max-height:500px){
  #rotateHint{padding:20px max(24px,var(--sal)) max(20px,var(--sab)) max(24px,var(--sar));}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:0s!important;transition-delay:0s!important;}
}
/* v010: keep branding in the clear sky without changing artwork or logo size. */
.ld-center{justify-content:flex-start;}
.ld-controls{margin-top:28px;gap:12px;}
.ld-center .btn-begin{animation-name:appear;}
.home-hero{justify-content:flex-start;padding-top:12px;}

/* Home controls keep an opaque material and constant composited opacity. */
.home-bottom .glass{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)),#111326;backdrop-filter:none;-webkit-backdrop-filter:none;}
#scr-home.in-fwd{animation-name:homeInFwd;}
#scr-home.in-back{animation-name:homeInBack;}
#scr-home.in-fade{animation:none;}
#scr-home.out-fwd{animation-name:homeOutFwd;}
#scr-home.out-back{animation-name:homeOutBack;}
#scr-home.active .home-bottom .in{animation-name:homeControlIn;}
@keyframes homeInFwd{from{transform:translateX(40px);}}
@keyframes homeInBack{from{transform:translateX(-30px);}}
@keyframes homeOutFwd{to{transform:translateX(-30px);}}
@keyframes homeOutBack{to{transform:translateX(40px);}}
@keyframes homeControlIn{from{transform:translateY(8px);}}

@media(max-height:680px){
  .home-hero{padding-top:8px;}
  .ld-controls{margin-top:24px;gap:12px;}
}
@media(max-height:680px) and (max-width:350px){
  .home-hero{padding-top:0;gap:2px;}
  .ld-center{padding-top:calc(var(--sat) + 8px);gap:4px;}
  .ld-controls{margin-top:2px;gap:8px;}
}

/* v011: lower only the house artwork; preserve its layout box and optical X offset. */
#ldMark>svg,#homeMark>svg{position:relative;top:12px;}

/* v012: lower only the loading meter and ready button; retain all flow anchors. */
.ld-controls .ld-progress{position:relative;top:8px;}
.ld-center .btn-begin{top:24px;}

/* v013: loading-only room above illuminated towers on shorter portrait canvases. */
@media(orientation:portrait) and (min-height:681px) and (max-height:800px){
  #scr-loading{--brand-size:min(clamp(170px,52vw,214px),max(154px,calc(172px + (var(--app-h) - 700px) * .66 - (var(--sat) - 59px))));}
  #scr-loading .ld-center{padding-top:calc(var(--sat) + 8px);gap:8px;}
  #scr-loading .ld-controls{margin-top:16px;}
}

/* v014: owner-requested final ready-button nudge; all flow anchors retained. */
.ld-center .btn-begin{top:28px;}

/* v015: reserve the loading action row so its roof-anchored layout never jumps. */
#scr-loading .btn-begin.hidden{display:inline-flex!important;visibility:hidden;pointer-events:none;}
#scr-loading .ld-controls{position:relative;}
#scr-loading .ld-tip{position:absolute;left:0;right:0;bottom:0;}

/* v016: smaller Home Settings surface, unchanged44px target and shared star-row center. */
#scr-home #btnSettings{position:relative;width:44px;height:44px;align-self:center;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;--d:.05s!important;}
#scr-home #btnSettings::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--glass);border:1px solid var(--line2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);pointer-events:none;}
#scr-home #btnSettings .ic{position:relative;z-index:1;width:17px;height:17px;}
#scr-home #btnSettings:active::before{background:var(--glass2);}

/* v017: owner-requested Home Settings optical nudge; preserve its flow box. */
#scr-home #btnSettings{top:2px;}

/* v018: swap loading action/meter rows; shift only both house SVGs optically right. */
#scr-loading .ld-center .btn-begin{top:8px;}
#scr-loading .ld-progress{top:28px;}
#scr-loading .ld-tip{top:16px;bottom:auto;}
#ldMark>svg,#homeMark>svg{transform:translateX(5px);}
/* The transient hint yields its reserved slot as soon as Begin is revealed. */
#scr-loading .btn-begin:not(.hidden)~.ld-tip{visibility:hidden;}

/* v019: loading lights and meter paint the same work progress without trailing fades. */
#scr-loading .win{transition:none;}
#scr-loading .ld-progress,#scr-loading .btn-begin{opacity:1;animation:none;}

/* Loading tips share the reserved Begin slot; keep every layout anchor intact. */
#scr-loading .ld-tip{top:8px;display:flex;align-items:center;justify-content:center;width:100%;max-width:300px;height:54px;min-height:54px;padding:10px 14px;border:1px solid rgba(246,198,110,.13);border-radius:18px;background:rgba(15,18,39,.78);color:var(--ink2);font-size:13px;line-height:1.35;}

/* A tip panel is paintable only after its nonempty copy is ready. */
#scr-loading .ld-tip[hidden],#scr-loading .ld-tip:empty{visibility:hidden;opacity:0;}

/* Keep the loading signal's entire paint inside a reserved slot beside the label. */
#scr-loading .btn-begin .pulse-dot{flex:0 0 24px;width:24px;height:24px;overflow:hidden;contain:paint;isolation:isolate;background:transparent;box-shadow:none;}
#scr-loading .btn-begin .pulse-dot::before{content:"";position:absolute;left:8px;top:8px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff0c8,var(--gold) 70%);box-shadow:0 0 5px 1px rgba(246,198,110,.42);}
#scr-loading .btn-begin .pulse-dot::after{inset:3px;border:1px solid rgba(246,198,110,.58);animation:beginSignal 2.2s ease-out infinite;transform-origin:center;}
@keyframes beginSignal{0%{transform:scale(.55);opacity:0;}12%{opacity:.5;}75%{opacity:.08;}100%{transform:scale(1);opacity:0;}}
@media(prefers-reduced-motion:reduce){#scr-loading .btn-begin .pulse-dot::after{animation:none;transform:none;opacity:.22;}}

/* The district reward is a terminal landmark, distinct from the playable circles. */
.district-reward{position:absolute;width:224px;height:64px;margin:-32px 0 0 -112px;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 14px;border-radius:18px;background:rgba(10,13,31,.88);border:1px dashed rgba(255,255,255,.2);box-shadow:inset 0 1px rgba(255,255,255,.04);pointer-events:none;animation:nodeIn .7s var(--d,0s) var(--out) both;}
.district-reward>.ic{width:25px;height:25px;flex:none;color:var(--muted);}
.district-reward>span{display:flex;flex-direction:column;gap:5px;}
.district-reward b{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);white-space:nowrap;}
.district-reward small{font-size:11px;line-height:1.2;color:var(--muted);white-space:nowrap;}
.district-reward.lit{border-style:solid;border-color:rgba(var(--accent-rgb),.55);}
.district-reward.lit>.ic,.district-reward.lit small{color:var(--accent);}

/* v029: quiet these two sheet actions without weakening their focus outline. */
#btnNext,#sheetPanel [data-act="resume"]{box-shadow:inset 0 1px rgba(255,255,255,.35),0 4px 14px -8px rgba(246,198,110,.22);}

/* Keep the title inside compact screens; animate paint, not letter-spacing/layout. */
#scr-loading .ld-word{letter-spacing:.36em;animation-name:loadingWordIn;}
@keyframes loadingWordIn{from{opacity:0;transform:translateY(4px) scaleX(1.035);}to{opacity:1;transform:translateY(0) scaleX(1);}}

/* Ready moves gently within its existing reserved row; the gate has no extra delay. */
#scr-loading .btn-begin.ready{animation:beginReadyIn .22s var(--out) both;}
@keyframes beginReadyIn{from{transform:translateY(6px);}to{transform:translateY(0);}}

/* Home stays solid, including its branding, throughout the startup handoff. */
#scr-home.active .in{animation-name:homeControlIn;}
#scr-home.in-start{z-index:2;animation:startupHomeIn .36s var(--ease) both;}
#scr-loading.out-start{z-index:1;pointer-events:none;animation:startupLoadingOut .36s var(--ease) both;}
@keyframes startupHomeIn{from{transform:translateX(100%);}to{transform:translateX(0);}}
@keyframes startupLoadingOut{from{transform:translateX(0);}to{transform:translateX(-20%);}}

/* v031-r002: keep the original artwork and animation throughout scrolling. */
#districtList.district-reset .scene{transition:none!important;}

/* v032: keep the loading status and full percentage solid white. */
#scr-loading #ldStatus,#scr-loading #ldPct,#scr-loading #ldPct::after{color:#fff;}
/* v004: hide scroll indicators on app scroll containers (scrolling unchanged) */
.scroll,.how-card,.sheet-panel{scrollbar-width:none;-ms-overflow-style:none;}
.scroll::-webkit-scrollbar,.how-card::-webkit-scrollbar,.sheet-panel::-webkit-scrollbar{display:none;width:0;height:0;}
/* v005: d-card/lnode press state comes from tapGuard (.tap-press after a short delay), not :active, so swipes don't flash */
.d-card:active{transform:none;}.d-card.tap-press{transform:scale(.985);}
.lnode:active{transform:none;}.lnode.tap-press{transform:scale(.93);}