:root{
  --ink:#1c1626; --ink-2:#2a2238; --paper:#fff6e6; --paper-2:#f3e2c4; --muted:#cbb8a0;
  --gold:#ffcb3d; --gold-2:#f4a51c; --gold-d:#a8660a;
  --red:#d9473c; --red-d:#8f241e; --teal:#3fb7a4; --sky:#5aa8ff;
  --panel:rgba(30,23,40,.86); --panel-line:rgba(255,226,170,.16);
  --r-s:12px; --r-m:18px; --r-l:26px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --f-d:'Lilita One',system-ui,sans-serif; --f-b:'Nunito',system-ui,sans-serif;
  --sat:env(safe-area-inset-top,0px); --sar:env(safe-area-inset-right,0px);
  --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px);
  --shadow:0 10px 30px rgba(0,0,0,.35),0 2px 0 rgba(255,255,255,.06) inset;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{width:100%;height:100%;overflow:hidden;background:#24331f;color:var(--paper);font-family:var(--f-b);
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;
  padding:0 var(--s5);border-radius:var(--r-m);font-family:var(--f-d);font-size:20px;letter-spacing:.02em;
  transition:transform .12s ease,filter .15s ease,box-shadow .15s ease;}
.btn svg{width:22px;height:22px;fill:currentColor}
.btn:hover{filter:brightness(1.08)}
.btn:active,.btn.press{transform:translateY(3px) scale(.98)}
.btn-primary{color:#4a2500;background:linear-gradient(#ffe07a,var(--gold) 45%,var(--gold-2));
  box-shadow:0 5px 0 var(--gold-d),0 10px 22px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.6);text-shadow:0 1px 0 rgba(255,255,255,.4)}
.btn-primary:active,.btn-primary.press{box-shadow:0 2px 0 var(--gold-d),0 4px 10px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.6)}
.btn-ghost{color:var(--paper);background:rgba(255,246,230,.1);box-shadow:inset 0 0 0 2px rgba(255,236,200,.28),0 4px 0 rgba(0,0,0,.25)}
.btn-ghost:active,.btn-ghost.press{box-shadow:inset 0 0 0 2px rgba(255,236,200,.4),0 1px 0 rgba(0,0,0,.25)}
.btn-quiet{color:var(--muted);font-family:var(--f-b);font-weight:800;font-size:16px}
.btn-xl{min-height:64px;font-size:28px;padding:0 var(--s6);border-radius:22px}
.btn-xl svg{width:28px;height:28px}
.icon-btn{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--panel);
  box-shadow:inset 0 0 0 1.5px var(--panel-line),0 4px 12px rgba(0,0,0,.3);transition:transform .12s}
.icon-btn svg{width:22px;height:22px;fill:var(--paper)}
.icon-btn:active{transform:scale(.92)}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--sat) + 16px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px);
  animation:scrIn .35s ease both}
@keyframes scrIn{from{opacity:0}to{opacity:1}}
.screen.out{animation:scrOut .25s ease both}
@keyframes scrOut{to{opacity:0}}
.screen-modal{background:rgba(16,11,22,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.panel{background:var(--panel);border-radius:var(--r-l);box-shadow:var(--shadow),inset 0 0 0 1.5px var(--panel-line)}
.modal{width:min(440px,100%);max-height:100%;overflow:auto;padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);
  animation:popIn .4s cubic-bezier(.2,1.5,.4,1) both}
.modal-sm{width:min(340px,100%)}
@keyframes popIn{from{transform:translateY(16px) scale(.94);opacity:0}to{transform:none;opacity:1}}
.modal-h{font-family:var(--f-d);font-weight:400;font-size:30px;text-align:center;letter-spacing:.02em}
.btn-col{display:flex;flex-direction:column;gap:var(--s3)}
.btn-row{display:flex;gap:var(--s3)}
.btn-row .btn{flex:1}

/* title */
.screen-title{background:
  radial-gradient(120% 80% at 50% 0%,rgba(20,14,28,.15),rgba(20,14,28,.55) 70%),
  linear-gradient(180deg,rgba(20,14,28,.55),rgba(20,14,28,.05) 35%,rgba(20,14,28,.1) 60%,rgba(20,14,28,.75));
  overflow:auto;align-items:center}
.title-wrap{display:flex;gap:var(--s6);align-items:center;width:min(980px,100%);margin:auto}
.title-main{flex:1.2;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.badge-early{display:inline-flex;align-items:center;gap:6px;font-weight:900;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:#2b1a00;background:linear-gradient(#ffe8a0,#ffc94a);padding:6px 12px;border-radius:999px;box-shadow:0 3px 0 var(--gold-d)}
.badge-early i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(217,71,60,.25)}
.logo{font-family:var(--f-d);font-weight:400;line-height:.86;display:flex;flex-direction:column;
  text-shadow:0 4px 0 #4a1d10,0 10px 24px rgba(0,0,0,.5)}
.logo-a{font-size:clamp(52px,9vw,96px);color:#fff1d6;letter-spacing:.01em}
.logo-b{font-size:clamp(60px,11vw,118px);background:linear-gradient(#ffe27a,#ff9a2e 60%,#ff6a2a);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 #6a210c) drop-shadow(0 10px 20px rgba(0,0,0,.45));text-shadow:none}
.tagline{font-size:17px;font-weight:800;line-height:1.4;max-width:30ch;color:var(--paper);text-shadow:0 2px 8px rgba(0,0,0,.6)}
.title-main .btn-col{width:min(320px,100%)}
.best{font-weight:800;font-size:14px;color:var(--gold)}
.early-line{font-size:13px;font-weight:800;color:var(--muted);line-height:1.4}
.panel-full{flex:1;padding:var(--s5);align-self:center}
.panel-h{font-family:var(--f-d);font-weight:400;font-size:22px;color:var(--gold);margin-bottom:var(--s3)}
.full-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.full-list li{position:relative;padding-left:22px;font-size:14px;font-weight:700;line-height:1.35;color:var(--paper-2)}
.full-list li::before{content:"";position:absolute;left:2px;top:5px;width:10px;height:10px;border-radius:3px;transform:rotate(45deg);
  background:linear-gradient(var(--gold),var(--gold-2))}
@media (max-width:760px) and (orientation:portrait){
  .screen-title{align-items:flex-start}
  .title-wrap{flex-direction:column;gap:var(--s5);padding-top:56px}
  .title-main{align-items:center;text-align:center}
  .logo{align-items:center}
  .tagline{font-size:16px}
  .panel-full{width:100%;padding:var(--s4) var(--s5)}
  .full-list{gap:7px}
}
@media (max-height:520px) and (orientation:landscape){
  .title-wrap{gap:var(--s5)}
  .title-main{gap:var(--s3)}
  .logo-a{font-size:52px}.logo-b{font-size:64px}
  .tagline{font-size:14px}
  .btn-xl{min-height:54px;font-size:24px}
  .panel-full{padding:var(--s4)}
  .panel-h{font-size:18px;margin-bottom:var(--s2)}
  .full-list{gap:5px}.full-list li{font-size:13px}
  .modal{padding:var(--s4);gap:var(--s3)}
}

/* how to play */
.how{list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.how li{display:flex;gap:var(--s3);align-items:flex-start;font-size:14px;font-weight:700;line-height:1.35;color:var(--paper-2)}
.how b{display:block;font-family:var(--f-d);font-weight:400;font-size:18px;color:var(--paper);letter-spacing:.02em}
.how-ico{flex:none;width:44px;height:44px;border-radius:14px;background:rgba(255,246,230,.08);box-shadow:inset 0 0 0 1.5px var(--panel-line);position:relative}
.how-ico::after{content:"";position:absolute;inset:10px;border-radius:50%}
.how-move::after{border:3px solid var(--paper);inset:8px}
.how-move::before{content:"";position:absolute;left:16px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--sky)}
.how-coin::after{background:radial-gradient(circle at 40% 35%,#fff3b0,var(--gold) 45%,var(--gold-2));box-shadow:0 0 0 2px var(--gold-d)}
.how-pad::after{border:3px dashed var(--gold);inset:7px}
.how-spin::after{border:4px solid var(--sky);border-right-color:transparent}
.how-keep::after{border-radius:3px;background:var(--paper);clip-path:polygon(0 100%,0 35%,20% 35%,20% 15%,40% 15%,40% 35%,60% 35%,60% 15%,80% 15%,80% 35%,100% 35%,100% 100%)}

/* end */
.end{align-items:center;text-align:center}
.end-crest{width:84px;height:84px;margin-top:-6px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%,#ffe58a,#ff9a2e 60%,#c2410c);box-shadow:0 6px 0 #6a210c,0 0 40px rgba(255,160,60,.45)}
.end-crest.lost{background:radial-gradient(circle at 50% 35%,#b9b2c6,#6d6480 60%,#3a3347);box-shadow:0 6px 0 #241f2e}
.end-crest svg{width:46px;height:46px;fill:#fff7e8}
.end-k{font-weight:900;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.end-h{font-family:var(--f-d);font-weight:400;font-size:34px;line-height:1;margin-top:-8px}
.stars{display:flex;gap:10px;justify-content:center}
.stars i{width:38px;height:38px;background:rgba(255,255,255,.14);clip-path:polygon(50% 0,63% 34%,100% 37%,72% 60%,81% 97%,50% 77%,19% 97%,28% 60%,0 37%,37% 34%);
  transition:transform .3s cubic-bezier(.2,1.8,.4,1),background .2s}
.stars i.on{background:linear-gradient(#ffe68a,var(--gold-2));transform:scale(1.15)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);width:100%}
.stat{background:rgba(255,246,230,.07);border-radius:var(--r-s);padding:var(--s3) var(--s2);display:flex;flex-direction:column;gap:2px;
  box-shadow:inset 0 0 0 1px var(--panel-line)}
.stat-v{font-family:var(--f-d);font-size:28px;color:var(--paper);font-variant-numeric:tabular-nums}
.stat-k{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.end .btn-row{width:100%}
@media (max-height:520px) and (orientation:landscape){
  .end{width:min(620px,100%);display:grid;grid-template-columns:auto 1fr;column-gap:var(--s5);row-gap:var(--s2);text-align:left;align-items:center}
  .end-crest{grid-row:span 3;width:70px;height:70px;margin:0}
  .end-h{margin:0;font-size:28px}
  .stars{justify-content:flex-start}.stars i{width:30px;height:30px}
  .stats{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}
  .stat-v{font-size:22px}
  .end .btn-row,.end .early-line{grid-column:1/-1}
}

/* ---------- HUD ---------- */
.hud{position:fixed;inset:0;z-index:10;pointer-events:none}
.hud-top{position:absolute;top:calc(var(--sat) + 10px);right:calc(var(--sar) + 10px);left:calc(var(--sal) + 132px);
  display:flex;gap:var(--s2);align-items:center;justify-content:flex-end}
.chip{height:48px;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--panel-line),0 4px 12px rgba(0,0,0,.3);
  display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3)}
.hud-wave{flex-direction:column;align-items:stretch;justify-content:center;gap:4px;padding:0 12px;min-width:88px}
.wave-row{display:flex;align-items:baseline;gap:3px;line-height:1}
.wave-k{font-weight:900;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:3px}
.wave-n{font-family:var(--f-d);font-size:22px}
.wave-of{font-family:var(--f-d);font-size:14px;color:var(--muted)}
.wave-bar,.keep-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.wave-bar i,.keep-bar i{display:block;height:100%;width:100%;border-radius:4px;transform-origin:left;transition:transform .25s}
.wave-bar i{background:linear-gradient(90deg,#ff7a5c,var(--red))}
.hud-keep{flex:1;max-width:190px;min-width:84px}
.hud-keep .ico{width:20px;height:20px;fill:var(--paper);flex:none}
.keep-bar{flex:1;height:10px}
.keep-bar i{background:linear-gradient(90deg,#7be08f,#3fbf6a)}
.keep-bar i.low{background:linear-gradient(90deg,#ff8a5c,var(--red))}
.hud-coins{font-family:var(--f-d);font-size:24px;min-width:84px;padding:0 14px 0 10px;font-variant-numeric:tabular-nums;transition:transform .12s}
.hud-coins.bump{transform:scale(1.12)}
.hud-coins.short{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.coin-ico{width:24px;height:24px;border-radius:50%;flex:none;background:radial-gradient(circle at 38% 32%,#fff6c0,var(--gold) 45%,var(--gold-2) 80%);
  box-shadow:0 0 0 2px var(--gold-d),inset 0 -2px 0 rgba(0,0,0,.15)}
#btnPause{pointer-events:auto;flex:none}
@media (max-width:420px){
  .hud-top{left:calc(var(--sal) + 124px);gap:6px}
  .hud-keep{display:none}
  .hud-wave{min-width:78px}
}
.hud-keep-mini{display:none}
/* keep bar moves under the top row on narrow phones */
.keep-strip{position:absolute;top:calc(var(--sat) + 66px);left:calc(var(--sal) + 132px);right:calc(var(--sar) + 10px);display:none;align-items:center;gap:8px;
  height:28px;padding:0 10px;border-radius:10px;background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--panel-line)}
.keep-strip svg{width:16px;height:16px;fill:var(--paper)}
.keep-strip .keep-bar{height:8px}
@media (max-width:420px){.keep-strip{display:flex;left:calc(var(--sal) + 124px)}}

.hud-hint{position:absolute;left:50%;top:calc(var(--sat) + 104px);transform:translateX(-50%);max-width:min(92vw,460px);
  padding:10px 16px;border-radius:14px;background:rgba(255,246,230,.94);color:var(--ink);font-weight:800;font-size:15px;line-height:1.3;text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.3);animation:hintIn .35s cubic-bezier(.2,1.5,.4,1)}
@keyframes hintIn{from{transform:translate(-50%,-10px);opacity:0}}
.banner{position:absolute;left:0;right:0;top:32%;text-align:center;animation:bannerIn 2.2s ease both}
.banner-k{font-weight:900;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);text-shadow:0 2px 6px rgba(0,0,0,.6)}
.banner-t{font-family:var(--f-d);font-size:clamp(40px,9vw,72px);line-height:1;color:#fff4dc;text-shadow:0 4px 0 #5a1c10,0 10px 30px rgba(0,0,0,.6)}
.banner.red .banner-t{color:#ffd2c4;text-shadow:0 4px 0 #6a120c,0 10px 30px rgba(0,0,0,.6)}
@keyframes bannerIn{0%{opacity:0;transform:scale(1.4)}12%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}

/* calm phase */
.calm{position:absolute;left:50%;bottom:calc(var(--sab) + 18px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;
  width:min(440px,calc(100vw - 28px - var(--sal) - var(--sar)));animation:calmIn .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes calmIn{from{transform:translate(-50%,20px);opacity:0}}
.calm-card{width:100%;border-radius:16px;background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--panel-line),0 6px 16px rgba(0,0,0,.3);padding:8px 12px;
  display:flex;flex-direction:column;gap:6px}
.calm-head{display:flex;align-items:baseline;gap:8px}
.calm-k{font-weight:900;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.calm-t{font-family:var(--f-d);font-size:20px}
.calm-chips{display:flex;flex-wrap:wrap;gap:6px}
.echip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px 0 4px;border-radius:9px;background:rgba(255,255,255,.08);font-weight:900;font-size:13px}
.echip i{width:20px;height:20px;border-radius:6px;display:block}
.echip.lane{background:rgba(217,71,60,.25);color:#ffd8cf;padding:0 9px}
.btn-horn{pointer-events:auto;width:100%;min-height:58px;font-size:22px;color:#fff;border-radius:18px;
  background:linear-gradient(#ff7b5e,var(--red) 55%,#b8322a);box-shadow:0 5px 0 var(--red-d),0 10px 22px rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.35);
  text-shadow:0 2px 0 rgba(0,0,0,.25)}
.btn-horn svg{fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;width:26px;height:26px}
.btn-horn:active,.btn-horn.press{box-shadow:0 2px 0 var(--red-d),0 4px 10px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.35)}
.btn-horn.pulse{animation:hornPulse 1.6s ease-in-out infinite}
@keyframes hornPulse{50%{filter:brightness(1.15);transform:scale(1.03)}}
@media (max-height:520px) and (orientation:landscape){
  .calm{flex-direction:row;align-items:stretch;width:min(600px,calc(100vw - 40px - var(--sal) - var(--sar)));bottom:calc(var(--sab) + 12px)}
  .calm-card{flex:1.3}.btn-horn{flex:1;min-height:auto;font-size:18px;padding:0 12px}
}

/* spin */
.spin-btn{pointer-events:auto;position:absolute;right:calc(var(--sar) + 18px);bottom:calc(var(--sab) + 22px);width:92px;height:92px;border-radius:50%;
  display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#5d7bd6,#2e3f86 70%);
  box-shadow:0 6px 0 #1a2350,0 10px 24px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.3);transition:transform .1s}
.spin-btn:active,.spin-btn.press{transform:translateY(3px) scale(.96)}
.spin-btn.cool{filter:saturate(.35) brightness(.8)}
.spin-btn.ready{animation:readyPop .4s cubic-bezier(.2,1.8,.4,1)}
@keyframes readyPop{50%{transform:scale(1.12)}}
.spin-ring{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);transform:rotate(-90deg)}
.sr-bg{fill:none;stroke:rgba(0,0,0,.35);stroke-width:7}
.sr-fg{fill:none;stroke:#9fd0ff;stroke-width:7;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:0}
.spin-ico{width:38px;height:38px;fill:#eaf3ff;margin-top:-10px}
.spin-lbl{position:absolute;bottom:14px;font-family:var(--f-d);font-size:15px;letter-spacing:.04em;color:#eaf3ff}
.hero-down{position:absolute;left:50%;top:42%;transform:translateX(-50%);text-align:center;padding:12px 20px;border-radius:16px;background:var(--panel);
  font-weight:800;font-size:15px;display:flex;flex-direction:column;align-items:center}
.hero-down b{font-family:var(--f-d);font-size:40px;font-weight:400;color:var(--gold)}

/* joystick */
.stick{position:fixed;z-index:9;width:128px;height:128px;margin:-64px 0 0 -64px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.06),rgba(255,255,255,.14));box-shadow:inset 0 0 0 3px rgba(255,246,230,.35)}
.stick-knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff,#e7dccb);box-shadow:0 4px 10px rgba(0,0,0,.35)}

/* world labels */
.labels,.edge-arrows{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.plabel{position:absolute;left:0;top:0;will-change:transform;display:flex;flex-direction:column;align-items:center;gap:2px;transition:opacity .2s}
.plabel .pl-tag{display:flex;align-items:center;gap:5px;height:28px;padding:0 9px 0 5px;border-radius:10px;background:rgba(30,23,40,.82);
  box-shadow:inset 0 0 0 1.5px rgba(255,214,120,.45),0 3px 8px rgba(0,0,0,.35);font-family:var(--f-d);font-size:17px;color:#fff3d6;white-space:nowrap}
.plabel .pl-tag i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff6c0,var(--gold) 45%,var(--gold-2) 80%);box-shadow:0 0 0 1.5px var(--gold-d)}
.plabel .pl-tag.lv{padding:0 9px}
.plabel .pl-tag.max{color:var(--gold)}
.plabel .pl-name{font-weight:900;font-size:12px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 6px rgba(0,0,0,.6);white-space:nowrap}
.plabel.far .pl-name{display:none}
.plabel.near .pl-tag{box-shadow:inset 0 0 0 2px var(--gold),0 0 16px rgba(255,200,60,.6)}
.plabel.poor .pl-tag{box-shadow:inset 0 0 0 1.5px rgba(255,140,120,.6),0 3px 8px rgba(0,0,0,.35)}
.earrow{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(217,71,60,.92);
  box-shadow:0 0 0 3px rgba(255,220,210,.5),0 4px 10px rgba(0,0,0,.35);display:grid;place-items:center;animation:ea 1s ease-in-out infinite}
.earrow svg{width:22px;height:22px;fill:#fff}
@keyframes ea{50%{box-shadow:0 0 0 7px rgba(255,120,100,.25),0 4px 10px rgba(0,0,0,.35)}}
.vignette{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .3s;
  box-shadow:inset 0 0 120px 30px rgba(200,20,10,.55)}
.fade{position:fixed;inset:0;z-index:40;background:#140e1a;opacity:0;pointer-events:none;transition:opacity .3s}
.fade.on{opacity:1}
.boss-bar{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--sat) + 70px);width:min(360px,70vw);display:flex;flex-direction:column;align-items:center;gap:4px}
.boss-bar span{font-family:var(--f-d);font-size:16px;color:#ffd8cf;text-shadow:0 2px 4px rgba(0,0,0,.7);letter-spacing:.03em}
.boss-bar .bb{width:100%;height:12px;border-radius:6px;background:rgba(20,10,10,.7);box-shadow:inset 0 0 0 1.5px rgba(255,180,160,.4);overflow:hidden}
.boss-bar .bb i{display:block;height:100%;background:linear-gradient(90deg,#ff6a4a,#c41e14);transform-origin:left;transition:transform .15s}
@media (max-width:420px){.boss-bar{top:calc(var(--sat) + 100px)}}
.ftext{position:absolute;left:0;top:0;font-family:var(--f-d);font-size:22px;white-space:nowrap;color:#fff4d6;text-shadow:0 2px 0 #5a2a0a,0 4px 10px rgba(0,0,0,.6);will-change:transform}
.ftext.gold{color:#ffd34a}
@media (max-height:520px) and (orientation:landscape){
  .screen-title{align-items:flex-start;padding-top:calc(var(--sat) + 60px)}
  .title-wrap{align-items:flex-start}
  .title-main{gap:10px}
  .logo{flex-direction:row;gap:12px;align-items:baseline}
  .logo-a{font-size:46px}.logo-b{font-size:52px}
  .tagline{font-size:13px;max-width:46ch}
  .title-main .btn-col{flex-direction:row;width:100%;max-width:420px}
  .title-main .btn-col .btn{flex:1}
  .btn-xl{min-height:52px;font-size:22px}
  .panel-full{align-self:flex-start;margin-top:-44px}
  .how{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
  .modal:has(.how){width:min(720px,100%)}
}
.more-btn{display:none;min-height:44px;margin-top:4px;padding:0 4px;font-size:14px;color:var(--gold)}
@media (orientation:portrait) and (max-width:760px) and (max-height:880px){
  .title-wrap{padding-top:44px;gap:var(--s4)}
  .title-main{gap:12px}
  .logo-a{font-size:50px}.logo-b{font-size:60px}
  .tagline{font-size:15px}
  .btn-xl{min-height:58px;font-size:26px}
  .panel-full{padding:var(--s3) var(--s4)}
  .panel-h{font-size:19px;margin-bottom:var(--s2)}
  .panel-full:not(.expanded) .full-list li:nth-child(n+4){display:none}
  .panel-full:not(.expanded) .more-btn{display:inline-flex}
}
@media (orientation:portrait) and (max-width:760px) and (max-height:700px){
  .title-wrap{padding-top:26px;gap:12px}
  .title-main{gap:10px}
  .badge-early{font-size:12px;padding:5px 10px}
  .logo-a{font-size:42px}.logo-b{font-size:50px}
  .tagline{font-size:14px}
  .btn-xl{min-height:54px;font-size:24px}
  .title-main .btn-col{gap:10px}
  .panel-full:not(.expanded) .full-list li:nth-child(n+3){display:none}
}
.hud-hint.low{top:calc(var(--sat) + 150px)}
.depth{position:fixed;inset:0;z-index:3;pointer-events:none;background:radial-gradient(120% 90% at 50% 55%,transparent 55%,rgba(20,30,10,.38) 100%)}