@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap');
:root{--ink:#f3e9ea;--muted:#b9a2a6;--line:rgba(255,220,220,.16);--panel:rgba(14,4,8,.62);--w:#9fd8ff;--r:#ff5a3a;--gold:#ffd36a;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#12030a;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI","Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;-webkit-tap-highlight-color:transparent}
#world{position:fixed;inset:0;width:100vw;height:100vh;display:block}
#loading{position:fixed;inset:0;display:grid;place-items:center;font:600 15px var(--mono);letter-spacing:.2em;color:var(--muted);z-index:50;background:#12030a}
#flash{position:fixed;inset:0;background:radial-gradient(ellipse at center,rgba(255,40,30,0) 30%,rgba(255,30,20,.9));opacity:0;pointer-events:none;z-index:4}
button{font:inherit;cursor:pointer}
kbd{font:600 10px var(--mono);border:1px solid var(--line);border-radius:4px;padding:0 4px;color:var(--muted)}
/* top bar */
#top{position:fixed;top:0;left:0;right:0;z-index:6;display:flex;align-items:center;gap:12px;padding:10px 16px;pointer-events:none;font:600 12px var(--mono);letter-spacing:.14em}
#top a{pointer-events:auto;color:var(--muted);text-decoration:none}#top .title{margin-right:auto;color:#ffd9d9}#top small{color:var(--muted);letter-spacing:.06em;margin-left:8px}
#top button{pointer-events:auto;background:rgba(20,6,10,.6);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:6px 10px;display:none}
body.playing #top button{display:block}
/* side panels */
.panel{position:fixed;z-index:5;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(6px);border-radius:14px;padding:14px;display:none}
body.playing .panel{display:block}
.lbl{font:600 10px var(--mono);letter-spacing:.18em;color:var(--muted);margin:10px 0 4px}.lbl:first-child{margin-top:0}
.num{font:700 24px var(--mono);letter-spacing:.06em;color:#fff;text-shadow:0 0 12px rgba(255,180,180,.35)}.num.hi{font-size:15px;color:var(--gold)}
#left{left:14px;top:52px;width:196px}
.chain{display:flex;align-items:center;gap:10px;font:600 12px var(--mono)}#chain-box{display:flex;gap:4px;border:1px solid var(--line);padding:4px;border-radius:6px}
#chain-box i{width:15px;height:15px;border-radius:3px;background:rgba(255,255,255,.06)}#chain-box i.on.W{background:var(--w);box-shadow:0 0 10px var(--w)}#chain-box i.on.R{background:var(--r);box-shadow:0 0 10px var(--r)}
#chain-n{font-size:18px;color:#fff}
#shield{font:16px var(--mono);letter-spacing:.12em;color:#ffd0c8}
.pol{font:800 14px var(--mono);letter-spacing:.12em;padding:6px 10px;border-radius:8px;text-align:center;transition:.15s}.pol.W{background:rgba(159,216,255,.15);color:var(--w);border:1px solid var(--w);box-shadow:0 0 14px rgba(159,216,255,.35)}.pol.R{background:rgba(255,90,58,.15);color:var(--r);border:1px solid var(--r);box-shadow:0 0 14px rgba(255,90,58,.35)}
#energy{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;height:22px}#energy i{border:1px solid var(--line);border-radius:2px;background:linear-gradient(to top,rgba(255,255,255,.35) calc(var(--f,0)*100%),rgba(255,255,255,.04) 0)}
#energy i.on.W{background:var(--w);box-shadow:0 0 8px var(--w)}#energy i.on.R{background:var(--r);box-shadow:0 0 8px var(--r)}
#right{right:14px;top:52px;width:228px}#map{width:200px;height:250px;display:block;margin:0 auto 4px;background:rgba(0,0,0,.25);border-radius:10px}
#vessel{margin:0;font-size:20px}#vessel.warn{color:#ff6a5a;animation:blink .5s steps(2) infinite}#vessel-en{font:12px var(--mono);color:var(--muted)}#mission{margin:0;font-size:12.5px;line-height:1.55;color:#f0dada}
.progress{height:4px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:10px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff7a5a,#ffd36a)}
@keyframes blink{50%{opacity:.35}}
/* boss bar, prompts, labels */
#bossbar{position:fixed;top:48px;left:50%;transform:translateX(-50%);width:min(560px,60vw);z-index:6;display:none;text-align:center}
#bossbar.show{display:block}.bb-top{display:flex;justify-content:space-between;font:700 11px var(--mono);letter-spacing:.16em;color:#ffb4a8}.bb-top b{color:#fff;letter-spacing:.06em;font-size:14px}
.bb{height:7px;background:rgba(255,255,255,.08);border-radius:4px;margin-top:4px;overflow:hidden}.bb i{display:block;height:100%;width:100%;background:var(--w);box-shadow:0 0 10px var(--w);transition:width .1s}.bb.r i{background:var(--r);box-shadow:0 0 10px var(--r)}
#boss-phase{margin:4px 0 0;font-size:12px;color:#ffd0c8}
#prompt{position:fixed;top:64px;left:50%;transform:translate(-50%,-8px);z-index:6;text-align:center;opacity:0;transition:.25s;pointer-events:none;background:rgba(30,8,14,.8);border:1px solid rgba(255,211,106,.6);border-radius:12px;padding:8px 16px}
#prompt.show{opacity:1;transform:translate(-50%,0)}#prompt small{display:block;font:600 10.5px var(--mono);letter-spacing:.16em;color:var(--gold)}#prompt b{font-size:15px}
.olabel{position:fixed;z-index:5;transform:translate(-50%,-50%);pointer-events:none;text-align:center;padding:5px 10px;border-radius:10px;font-size:14px;white-space:nowrap}
.olabel small{display:block;font:11px var(--mono);opacity:.8}.olabel.cont{background:rgba(20,40,30,.7);border:1px solid #7fe0a0;color:#d8ffe6}.olabel.opt{background:rgba(50,12,10,.75);border:1px solid #ff8a6a;color:#ffe2da}
.float{position:fixed;z-index:5;transform:translate(-50%,-50%);pointer-events:none;font:800 13px var(--mono);animation:rise 1.1s ease-out forwards;text-shadow:0 0 8px currentColor}.float.W{color:var(--w)}.float.R{color:#ff8a6a}.float.chain{font-size:17px;color:var(--gold)}
@keyframes rise{to{transform:translate(-50%,-160%);opacity:0}}
#warning{position:fixed;inset:0;z-index:7;display:none;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;background:rgba(80,0,0,.18);animation:warnbg .5s steps(2) infinite}
#warning.show{display:flex}#warning h1{margin:10px 0 4px;font:900 clamp(44px,9vw,110px) var(--mono);letter-spacing:.24em;color:#ff3a2a;text-shadow:0 0 30px #ff2010}#warning p{margin:0 0 10px;font-weight:700;letter-spacing:.1em}
#warning .stripe{width:100%;height:22px;background:repeating-linear-gradient(-45deg,#ff3a2a 0 18px,transparent 18px 36px);opacity:.75}
@keyframes warnbg{50%{background:rgba(120,0,0,.3)}}
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,10px);z-index:6;max-width:min(680px,86vw);padding:10px 16px;border-radius:12px;background:rgba(20,6,10,.85);border:1px solid var(--line);font-size:14px;line-height:1.55;opacity:0;transition:.25s;pointer-events:none;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}#toast.tip{border-color:rgba(159,216,255,.5)}#toast.good{border-color:#7fe0a0}#toast.bad{border-color:#ff6a5a;color:#ffd8d0}
/* dialogs */
#msg,#over,#clear,#pause-layer{position:fixed;inset:0;z-index:20;display:none;place-items:center;background:rgba(8,2,4,.62);backdrop-filter:blur(3px);padding:16px}
#msg.show,#over.show,#clear.show{display:grid}#pause-layer:not([hidden]){display:grid}
.card{background:linear-gradient(160deg,#2a0b13,#16050a);border:1px solid rgba(255,200,200,.2);border-radius:18px;padding:22px 24px;max-width:560px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.6);max-height:92vh;overflow:auto}
.card.wide{max-width:720px}.card small{font:700 11px var(--mono);letter-spacing:.2em;color:var(--gold)}.card h2{margin:6px 0 10px;font-size:24px}.card p{line-height:1.7;color:#f2dddd}
.card button,#start{background:linear-gradient(180deg,#ff6a4a,#c2321e);border:0;color:#fff;font-weight:800;padding:11px 18px;border-radius:12px;margin:6px 8px 0 0}
.card button[data-menu]{background:rgba(255,255,255,.08);border:1px solid var(--line)}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:8px 0 14px;font-size:14px}.card dt{color:var(--muted)}.card dd{margin:0;font-family:var(--mono);font-weight:700}.card dd em{color:var(--gold);font-style:normal;margin-left:8px}
.edu{border-top:1px solid var(--line);padding-top:10px}.edu h3{margin:4px 0 6px;font-size:16px}.edu ul{margin:0;padding-left:20px;line-height:1.7;font-size:14px}.edu .next{color:var(--gold);font-weight:700}
.row{display:flex;flex-wrap:wrap}
/* menu */
#menu{position:fixed;inset:0;z-index:15;display:grid;place-items:center;background:radial-gradient(ellipse at 30% 40%,rgba(18,3,10,.15),rgba(10,2,6,.82));padding:16px;overflow:auto}
#menu[hidden]{display:none}
.menu-card{max-width:620px;width:100%;background:rgba(18,5,9,.78);border:1px solid var(--line);border-radius:22px;padding:26px 28px;backdrop-filter:blur(6px)}
.menu-card>small{font:700 11px var(--mono);letter-spacing:.24em;color:var(--muted)}.menu-card h1{margin:8px 0 10px;font-size:clamp(34px,6vw,52px);line-height:1.05}.menu-card h1 em{display:block;font-style:normal;font-size:.55em;letter-spacing:.12em;background:linear-gradient(90deg,var(--w),#fff 45%,var(--r));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{line-height:1.7}.lead .w{color:var(--w)}.lead .r{color:var(--r)}
.chapters{display:grid;gap:8px;margin:14px 0}.ch{border:1px solid var(--line);border-radius:12px;padding:10px 14px;display:grid;gap:3px;text-align:left;background:transparent;color:var(--ink);width:100%}.ch b{font-size:15px}.ch span{font-size:13px;color:var(--muted);line-height:1.6}.ch.on{border-color:rgba(255,211,106,.6);background:rgba(255,211,106,.06)}.ch.off{opacity:.55}
.opts{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:8px 0 14px;font-size:14px}.opts select{margin-left:8px;background:#20080e;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 8px}.chk{display:flex;gap:6px;align-items:center}
#start{font-size:17px;padding:13px 26px}
details{margin-top:14px;font-size:13.5px;line-height:1.7;color:#ecd6d6}summary{cursor:pointer;color:var(--muted)}
footer{margin-top:14px;font-size:12px;color:var(--muted);line-height:1.6}
/* touch */
#touch{display:none}
@media (pointer:coarse){
  body.playing #touch{display:block}
  #touch-zone{position:fixed;left:0;top:90px;bottom:0;width:55vw;z-index:3;touch-action:none}
  #stick{position:fixed;width:116px;height:116px;margin:-58px 0 0 -58px;border-radius:50%;border:2px solid rgba(255,255,255,.28);z-index:3;pointer-events:none;opacity:0;transition:opacity .15s}#stick.on{opacity:1}
  #knob{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.35)}
  .tbtns{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:6;display:flex;gap:14px;align-items:flex-end}
  .tbtns button{width:78px;height:78px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(30,8,14,.55);color:#fff;font-weight:800;font-size:15px;touch-action:none}
  #t-switch{width:96px;height:96px;background:radial-gradient(circle at 35% 35%,rgba(159,216,255,.55),rgba(255,90,58,.45))}
  #toast{bottom:auto;top:96px}
}
@media (max-width:900px){
  #top{padding:8px 10px}#top .title{display:none}
  body.playing #left{display:flex;flex-direction:column;gap:4px;left:8px;top:48px;width:148px;padding:8px 10px}
  #left .lbl,#hi{display:none}#left .num{font-size:17px}.chain{gap:6px;font-size:10.5px}#chain-box{padding:3px}#chain-box i{width:11px;height:11px}#chain-n{font-size:14px}
  #shield{font-size:11px}.pol{font-size:10.5px;padding:2px 6px}#energy{height:10px;width:100%;gap:2px}
  #right{right:8px;top:48px;width:108px;padding:6px}#map{width:96px;height:118px}#vessel{font-size:13px}#mission,#vessel-en,#right .lbl{display:none}.progress{margin-top:6px}
  #toast{top:auto!important;bottom:calc(132px + env(safe-area-inset-bottom));font-size:13px;max-width:92vw}
  #prompt{top:200px;bottom:auto;max-width:92vw}#prompt b{font-size:13.5px}
  #bossbar{top:200px;width:92vw}#bossbar.show~#prompt{top:262px}
  .olabel{font-size:12px;padding:3px 7px}
}
/* phones: no keyboard hints; the on-screen button the tutorial talks about pulses */
@media (pointer:coarse){kbd{display:none}.kbd-only{display:none}}
.touch-only{display:none}@media (pointer:coarse){p.touch-only{display:block}span.touch-only{display:inline}}
.tbtns button.hint{animation:hintpulse .6s ease-in-out infinite alternate;border-color:#ffd36a}
@keyframes hintpulse{from{box-shadow:0 0 0 0 rgba(255,211,106,.9);transform:scale(1)}to{box-shadow:0 0 0 14px rgba(255,211,106,0);transform:scale(1.12)}}
.tagline{margin:-4px 0 10px;font:600 13px var(--mono);letter-spacing:.2em;color:var(--muted)}

/* chapter 2 / race mode */
.ch.on{border-color:rgba(255,211,106,.7);background:rgba(255,211,106,.08);box-shadow:0 0 0 1px rgba(255,211,106,.25) inset}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px}.modes button{border:1px solid var(--line);border-radius:12px;padding:9px 12px;background:transparent;color:var(--ink);display:grid;gap:2px;text-align:center}
.modes button b{font-size:15px}.modes button small{font-size:12px;color:var(--muted)}.modes button.on{border-color:#7fe0a0;background:rgba(127,224,160,.1)}
#practice-wrap.disabled{opacity:.4;pointer-events:none}
#records{margin:-4px 0 12px;font:12px var(--mono);color:var(--gold)}
body:not(.race) .race-only{display:none!important}body.race .mission-only{display:none!important}
#bossbar.mid .bb.r{display:none}#bossbar.mid .bb-top span{color:var(--gold)}#bossbar.mid.R .bb i{background:var(--r);box-shadow:0 0 10px var(--r)}
#rpos.p1{color:var(--gold)}#rtime{font-size:20px}
#board{list-style:none;margin:10px 0 0;padding:0;font:12.5px var(--mono)}#board li{display:grid;grid-template-columns:16px 1fr auto;gap:6px;padding:3px 6px;border-radius:6px}
#board li.you{background:rgba(255,255,255,.1);color:#fff;font-weight:700}#board li b{color:var(--muted)}#board li em{font-style:normal;color:var(--muted)}
.rlabel{position:fixed;z-index:5;transform:translate(-50%,-100%);pointer-events:none;font:700 11px var(--mono);letter-spacing:.12em;text-shadow:0 0 6px #000,0 0 2px #000}
#count{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%) scale(.6);z-index:8;font:900 clamp(70px,16vw,170px) var(--mono);color:#fff;opacity:0;pointer-events:none;text-shadow:0 0 30px rgba(255,211,106,.8);transition:transform .25s,opacity .25s}
#count.show{opacity:1;transform:translate(-50%,-50%) scale(1)}#count.go{color:#7fe0a0;text-shadow:0 0 30px rgba(127,224,160,.9)}
.float.ring{color:var(--gold)}
ol.result{list-style:none;counter-reset:r;margin:6px 0 10px;padding:0}ol.result li{counter-increment:r;display:flex;justify-content:space-between;gap:12px;padding:6px 10px;border-radius:8px;font-size:15px}
ol.result li::before{content:counter(r) ".";color:var(--muted);margin-right:8px;font-family:var(--mono)}ol.result li span{margin-right:auto}ol.result li b{font-family:var(--mono)}ol.result li.you{background:rgba(255,211,106,.12);border:1px solid rgba(255,211,106,.4)}
@media (max-width:900px){#board{display:none}#rtime{font-size:15px}body.race #left .num.hi{display:none}.modes button{padding:7px 8px}}
/* messages live in the bottom-left corner so they never cover the craft (centre of the screen) */
#toast,#toast.show{left:14px;right:auto;top:auto!important;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateY(10px);max-width:min(340px,40vw);text-align:left;font-size:13px;line-height:1.5;padding:9px 13px}
#toast.show{transform:none}
@media (max-width:900px){#toast,#toast.show{left:8px;bottom:calc(14px + env(safe-area-inset-bottom));max-width:min(250px,48vw);font-size:12px;padding:7px 10px}}

/* game surface: no text selection, callout or long-press menu while dragging (iOS) */
html,body,#touch,#touch-zone,#world,.tbtns button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#touch-zone,#world{touch-action:none}
input,select,textarea{-webkit-user-select:auto;user-select:auto}

/* start-of-run control tour */
#intro{position:fixed;inset:0;z-index:25;background:rgba(6,1,4,.62);display:none}#intro:not([hidden]){display:block}
#intro-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#intro-svg line{stroke:#ffd36a;stroke-width:2;marker-end:url(#ah)}
.iring{position:absolute;border:2.5px solid #ffd36a;border-radius:14px;box-shadow:0 0 0 3px rgba(255,211,106,.18),0 0 18px rgba(255,211,106,.5);animation:ipulse 1.1s ease-in-out infinite alternate;pointer-events:none}.iring.round{border-radius:50%}
@keyframes ipulse{from{transform:scale(1)}to{transform:scale(1.07)}}
.ilabel{position:absolute;background:rgba(24,7,12,.94);border:1px solid rgba(255,211,106,.7);border-radius:10px;padding:7px 11px;font-size:13px;line-height:1.5;max-width:250px;pointer-events:none}.ilabel b{display:block;color:var(--gold);font-size:14px}
#intro-bar{position:absolute;left:50%;top:58px;transform:translateX(-50%);display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:center;background:rgba(30,10,16,.96);border:1px solid rgba(255,211,106,.7);border-radius:14px;padding:10px 16px;max-width:92vw;z-index:2}
#intro-bar b{color:var(--gold)}#intro-bar span{font-size:13px;color:var(--muted)}#intro-bar button{background:linear-gradient(180deg,#ff6a4a,#c2321e);border:0;color:#fff;font-weight:800;padding:10px 22px;border-radius:12px}
button.ghost{background:rgba(255,255,255,.08)!important;border:1px solid var(--line)!important;color:var(--ink)!important;font-weight:600!important;margin-left:6px}
@media (max-width:600px){.ilabel{font-size:11.5px;max-width:none;padding:5px 8px}.ilabel b{font-size:12.5px}#intro-bar{top:200px;width:92vw}}

/* messages: upper-middle, centred (below the route prompt / boss bar), clear of the craft */
#toast,#toast.show{left:50%;right:auto;bottom:auto;top:max(17vh,138px)!important;max-width:min(560px,70vw);text-align:center;font-size:14.5px;line-height:1.55;padding:10px 16px;transform:translate(-50%,-8px)}
#toast.show{transform:translate(-50%,0)}
@media (max-width:900px){#toast,#toast.show{left:50%!important;top:292px!important;bottom:auto!important;max-width:90vw;font-size:13px;padding:8px 12px}}
@media (max-width:900px) and (max-height:500px){#toast,#toast.show{top:110px!important;max-width:60vw}}
#intro-bar.compact{top:8px;padding:6px 12px;gap:4px 12px}#intro-bar.compact span{display:none}#intro-bar.compact button{padding:6px 16px}.ilabel div+div{margin-top:3px}
@media (max-width:600px){#intro-bar{top:196px}}
@media (max-height:500px) and (min-width:601px){.ilabel{max-width:215px;font-size:12px}}
/* phones: keep every message in the strip right under the status panels, clear of the tunnel centre and the craft */
@media (max-width:900px) and (min-height:501px){
  #prompt{top:168px;padding:5px 10px;max-width:94vw;width:max-content}#prompt b{font-size:12.5px;line-height:1.35}#prompt small{font-size:10px}
  #bossbar{top:168px}#bossbar.show~#prompt{top:236px}
  #toast,#toast.show{top:230px!important;font-size:12px;line-height:1.45;padding:6px 10px;max-width:94vw}
  #bossbar.show~#toast,#bossbar.show~#toast.show{top:236px!important}
}
@media (max-width:900px) and (max-height:500px){#prompt{top:50px;max-width:50vw;width:max-content}#bossbar{top:48px;width:50vw}#bossbar.show~#prompt{top:104px}}
/* ===================== Vascular Strike (v1) ===================== */
#menu{background:radial-gradient(ellipse at 50% 30%,rgba(60,8,20,.25),rgba(6,1,4,.86) 70%),linear-gradient(180deg,rgba(0,10,30,.25),transparent 40%)}
.menu-card{max-width:760px;background:linear-gradient(160deg,rgba(26,6,12,.82),rgba(8,10,24,.78));border:1px solid rgba(140,200,255,.18);box-shadow:0 0 0 1px rgba(255,60,60,.08) inset,0 30px 80px rgba(0,0,0,.55)}
.brand-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}.bh{font:700 11px var(--mono);letter-spacing:.24em;color:var(--muted);text-decoration:none}
.chip{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:5px 12px;font-size:13px}.chip b{color:var(--gold)}
.logo{text-align:center;margin:6px 0 12px}.logo h1{margin:0;line-height:1}
.logo .zh{display:block;font-size:clamp(46px,10vw,84px);font-weight:900;letter-spacing:.12em;background:linear-gradient(180deg,#fff 0%,#ffd0d0 40%,#ff4a3a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(255,60,40,.45))}
.logo .en{display:block;margin-top:6px;font:900 clamp(18px,4.2vw,30px) Orbitron,var(--mono);letter-spacing:.32em;background:linear-gradient(90deg,#9fd8ff,#fff 50%,#ff6a4a);-webkit-background-clip:text;background-clip:text;color:transparent;animation:vsglow 3s ease-in-out infinite alternate}
@keyframes vsglow{from{filter:drop-shadow(0 0 4px rgba(159,216,255,.4))}to{filter:drop-shadow(0 0 14px rgba(255,106,74,.6))}}
.logo .tagline{margin:10px 0 0;letter-spacing:.24em}
.modes{grid-template-columns:repeat(4,1fr)}.modes button.on{border-color:#7fe0ff;background:rgba(127,224,255,.12);box-shadow:0 0 14px rgba(127,224,255,.2)}
.lead#mode-desc{font-size:13.5px;color:#e8d4d6;margin:4px 0 10px;min-height:2.6em}
.chapters{grid-template-columns:repeat(3,1fr);gap:8px}
.ch{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"no b" "rt rt" "x x";gap:2px 10px;align-items:center;padding:10px 12px;cursor:pointer}
.ch .no{grid-area:no;font:900 22px Orbitron,var(--mono);color:#ffd36a;opacity:.85}.ch b{grid-area:b;font-size:15px}.ch b small{display:block;font:600 10.5px var(--mono);letter-spacing:.1em;color:var(--muted)}
.ch .rt{grid-area:rt;font-size:11.5px;color:var(--muted);line-height:1.45}.ch .best,.ch .lock{grid-area:x;font:700 11px var(--mono);color:var(--gold)}.ch .lock{color:#c89aa0}
.ch.locked{opacity:.45;cursor:not-allowed}.ch.on{border-color:rgba(255,211,106,.75);background:rgba(255,211,106,.08)}
.explore-only{display:none}body[data-menu="explore"] .explore-only{display:inline-flex;gap:14px}
.start-row{gap:8px;align-items:center}.start-row button{margin:0}
button.ghost,.card button.ghost{background:rgba(255,255,255,.07)!important;border:1px solid var(--line)!important;color:var(--ink)!important;font-weight:600}
button.link{background:none!important;border:0!important;color:#9fd8ff!important;text-decoration:underline;padding:0!important;margin:0 0 0 6px!important;font-weight:600!important}
#records{margin:10px 0 0}
#cheat-badge{pointer-events:none;background:rgba(255,60,40,.2);border:1px solid #ff6a5a;color:#ffd0c8;border-radius:8px;padding:3px 8px;font:700 10.5px var(--mono);letter-spacing:.08em}
#fps{pointer-events:none;font:700 11px var(--mono);color:#7fe0a0}
.card .note{font-size:12.5px;color:var(--muted)}.card .warn,p.warn{color:#ffb0a0}.good{color:#9fffc0}.muted{color:var(--muted);font-size:13px}.err{color:#ff8a7a;min-height:1.2em;font-size:13px}
/* result */
#result,#transit{position:fixed;inset:0;z-index:20;display:none;place-items:center;background:rgba(6,2,6,.7);backdrop-filter:blur(4px);padding:16px}#result.show,#transit.show{display:grid}
.res-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.rank{font:900 54px/1 Orbitron,var(--mono);min-width:76px;text-align:center;padding:6px 10px;border-radius:14px;border:2px solid currentColor;text-shadow:0 0 18px currentColor}
.rank.r-S{color:#ffd36a}.rank.r-A{color:#9fffc0}.rank.r-B{color:#9fd8ff}.rank.r-C{color:#c8a0ff}.rank.r-P1{color:#ffd36a}.rank.r-P2{color:#dfe6ee}.rank.r-P3{color:#e09a5a}.rank.r-P4{color:#b9a2a6}
.rank[class*="r-A"]:not(.r-A){font-size:34px}
.res-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:start}
table.breakdown,table.review,table.lbt{width:100%;border-collapse:collapse;font-size:13.5px}
.breakdown td,.breakdown th,.review td,.review th,.lbt td,.lbt th{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left}.breakdown td:last-child{text-align:right;font-family:var(--mono)}
.breakdown tr.sum td{border-top:1px solid var(--line);color:#fff}.breakdown tr.total td{font-weight:800;color:var(--gold);font-size:16px}
dd.big{font-size:20px;color:var(--gold)}
.review small{display:block;font-size:11px;color:var(--muted)}.review tr.ok td:nth-child(2){color:#9fffc0}.review tr.bad td:nth-child(2){color:#ffb0a0}
.submit{margin:6px 0}.submit p{margin:6px 0}.route-sum{font-size:14px;color:#ffe8c8}ol.journey{padding-left:20px;line-height:1.7;font-size:13.5px}
/* transition */
.tr-card{width:min(560px,94vw);text-align:center;background:linear-gradient(160deg,#0c1424,#1a0610);border:1px solid rgba(127,224,255,.35);border-radius:20px;padding:22px;box-shadow:0 0 40px rgba(127,224,255,.15)}
.tr-card small{font:700 11px var(--mono);letter-spacing:.24em;color:#7fe0ff}.tr-card h2{margin:6px 0;font-size:24px}#tr-deploy{color:#e8dada;font-size:14px;line-height:1.6}
#tr-map{width:220px;height:220px;background:rgba(0,0,0,.3);border-radius:14px;margin:6px auto;display:block}#tr-route{font-size:13px;color:#ffd36a;line-height:1.6}#tr-boss{font:700 13px var(--mono);color:#ff8a7a}
.tr-card .row{justify-content:center}.tr-card button{background:linear-gradient(180deg,#3aa0ff,#1c5fc0);border:0;color:#fff;font-weight:800;padding:10px 22px;border-radius:12px}
.tr-bar{height:4px;background:rgba(255,255,255,.08);border-radius:3px;margin-top:12px;overflow:hidden}.tr-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7fe0ff,#ffd36a)}
/* leaderboard */
#lb,#nick,#cmd{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(4,2,6,.72);backdrop-filter:blur(4px);padding:12px}#lb[hidden],#nick[hidden],#cmd[hidden]{display:none}
.lb-card{max-height:94vh;max-height:94dvh;display:flex;flex-direction:column}.lb-head{display:flex;justify-content:space-between;align-items:center}
.tabs{display:flex;gap:6px;margin:8px 0}.tabs button{flex:1;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:8px;font-weight:700;margin:0}.tabs button.on{background:rgba(255,211,106,.16);border-color:var(--gold);color:#fff}
.lb-filters{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:13.5px}.lb-filters select{margin-left:6px;background:#20080e;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px}.lb-filters label[hidden]{display:none}
.lb-body{overflow:auto;margin:10px 0;min-height:120px}
.lbt th{font:700 11px var(--mono);letter-spacing:.1em;color:var(--muted)}.lbt td:nth-child(3){font-family:var(--mono);font-weight:800}
.lbt tr.top1 td{color:#ffd36a;text-shadow:0 0 10px rgba(255,211,106,.5)}.lbt tr.top1{background:linear-gradient(90deg,rgba(255,211,106,.16),transparent)}
.lbt tr.top2 td{color:#e6edf5}.lbt tr.top2{background:linear-gradient(90deg,rgba(220,230,240,.1),transparent)}.lbt tr.top3 td{color:#f0a868}.lbt tr.top3{background:linear-gradient(90deg,rgba(224,140,80,.12),transparent)}
.lbt tr.me td{outline:1px solid rgba(127,224,255,.6);outline-offset:-1px}.lbt tr.gap td{text-align:center;color:var(--muted)}
.lb-foot{font-size:12.5px;color:var(--muted)}.privacy{line-height:1.6}
#nick input{width:100%;font-size:18px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#1a060c;color:#fff}
.cmd-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:10px 0}
/* gameplay HUD bits */
body.anatomy #left .mission-only{display:none!important}body.anatomy .race-only{display:revert}
@media (max-width:900px){
  .chapters{grid-template-columns:1fr 1fr}.modes{grid-template-columns:repeat(2,1fr)}.res-grid{grid-template-columns:1fr}
  .rank{font-size:38px;min-width:60px}.menu-card{padding:18px 16px}
  #top .title{display:none}#cheat-badge{font-size:9.5px}
}
@media (max-width:420px){.chapters{grid-template-columns:1fr}.ch{grid-template-columns:auto 1fr}.logo .zh{letter-spacing:.06em}}
.start-row button.ghost{padding:12px 16px;border-radius:12px;font-size:15px}
#boss-phase .weak{display:inline-block;margin-top:3px;font:700 11.5px var(--mono);color:#ffd36a;letter-spacing:.04em}
#bossbar .bb:first-of-type i{background:var(--w)}
.corelabel{position:fixed;z-index:6;transform:translate(-50%,-100%);pointer-events:none;text-align:center;font:900 15px var(--mono);letter-spacing:.08em;padding:4px 10px;border-radius:10px;background:rgba(10,4,8,.72);border:2px solid currentColor;text-shadow:0 0 10px currentColor;animation:corepulse .7s ease-in-out infinite alternate;white-space:nowrap}
.corelabel small{display:block;font:700 10.5px var(--mono);color:#fff;opacity:.9}.corelabel.W{color:#9fe0ff}.corelabel.R{color:#ff6a4a}
@keyframes corepulse{from{transform:translate(-50%,-100%) scale(1)}to{transform:translate(-50%,-108%) scale(1.07)}}
@media (max-width:600px){.corelabel{font-size:12.5px;padding:3px 7px}}
@media (max-width:900px) and (min-height:501px){
  #bossbar{top:218px;width:94vw}#bossbar.show~#prompt{top:290px}#bossbar.show~#toast,#bossbar.show~#toast.show{top:326px!important}
  #bossbar .bb-top b{font-size:12.5px}#bossbar .bb-top b .en{display:none}#boss-phase{font-size:11.5px;margin:3px 0 0}#boss-phase .weak{font-size:10px}
  .corelabel{font-size:11.5px}.corelabel small{display:none}
}
.lb-body{overflow:visible;display:flex;flex-direction:column;min-height:0}
.lb-scroll{max-height:min(48vh,420px);max-height:min(48dvh,420px);overflow-y:auto;border:1px solid var(--line);border-radius:10px;-webkit-overflow-scrolling:touch}
.lb-scroll thead th{position:sticky;top:0;background:#1d0a12;z-index:1}.lbt td:last-child{white-space:nowrap;font-size:12.5px;color:#d8c4c8}
.lb-card{overflow:hidden}.lb-card .lb-body{overflow-y:auto}
@media (max-width:600px){.lbt th,.lbt td{padding:5px 5px;font-size:12.5px}.lbt td:last-child{font-size:11px}.lb-scroll{max-height:42dvh}}
details.privacy{font-size:12.5px;color:var(--muted)}details.privacy summary{cursor:pointer}details.privacy p{line-height:1.6;margin:6px 0}
@media (max-width:600px){
  .lb-card{height:94dvh;padding:14px 14px}.lb-card h2{margin:2px 0 4px;font-size:20px}.lb-head button{padding:4px 10px}
  .tabs{margin:4px 0}.tabs button{padding:6px 2px;font-size:13px;line-height:1.2}.lb-filters{gap:4px 10px;font-size:12.5px}.lb-filters select{padding:4px;margin-left:4px}
  .lb-card .lb-body{flex:1 1 auto;min-height:0;margin:6px 0}.lb-scroll{flex:1 1 auto;max-height:none;min-height:140px}
  .lb-foot p{margin:4px 0}.lbt td:nth-child(2){max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
#pause-help h3{margin:10px 0 6px;font-size:15px;color:var(--gold)}table.ctl{width:100%;border-collapse:collapse;font-size:14px}table.ctl td{padding:5px 4px;border-bottom:1px solid rgba(255,255,255,.07)}table.ctl td:last-child{text-align:right}
kbd.big{display:inline-block;font:700 13px var(--mono);color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:2px 9px}
#pause-layer .card{max-height:92dvh;overflow:auto}
.corelabel{transform:translate(-50%,-50%);animation:none}.corelabel.left{transform:translate(-100%,-50%)}.corelabel.right{transform:translate(0,-50%)}
.corelabel.left::after{content:'▶';margin-left:6px}.corelabel.right::before{content:'◀';margin-right:6px}
.corelabel small{display:block}@media (max-width:900px) and (min-height:501px){.corelabel small{display:block;font-size:9.5px}}
#core-lines{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.corelabel,.corelabel.left,.corelabel.right{transform:none;top:0;left:0}.corelabel.left::after,.corelabel.right::before{content:none}
.corelabel{font-size:17px;padding:6px 12px;line-height:1.25}.corelabel small{font-size:12px}
@media (max-width:600px){.corelabel{font-size:13px;padding:4px 8px}.corelabel small{display:block;font-size:10px}}
#info-chip{position:fixed;left:50%;top:max(12vh,96px);transform:translateX(-50%);z-index:9;background:rgba(20,30,60,.88);border:1px solid #7fe0ff;color:#dff6ff;border-radius:999px;padding:7px 16px;font-weight:800;font-size:14px;box-shadow:0 0 18px rgba(127,224,255,.35);cursor:pointer}
#info-chip.pop{animation:chippop .5s ease-out}@keyframes chippop{from{transform:translateX(-50%) scale(.6);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
#info-card{position:fixed;inset:0;z-index:31;display:grid;place-items:center;background:rgba(4,2,6,.7);padding:14px}#info-card[hidden]{display:none}#info-card p{line-height:1.75}
@media (max-width:900px) and (min-height:501px){#info-chip{top:auto;bottom:calc(150px + env(safe-area-inset-bottom));font-size:12.5px;max-width:92vw}}
.float.hurt{color:#ff8a7a;font-size:15px;font-weight:900;text-shadow:0 0 8px #000,0 0 12px #ff3020}
.ch .who{grid-area:who;font:700 11px var(--mono);color:#9fd8ff;opacity:.9}.ch{grid-template-areas:"no b" "rt rt" "who who" "x x"}
/* phones (portrait): tighter HUD in the top corners and every message higher, so the centre of the screen stays clear */
@media (max-width:900px) and (min-height:501px){
  body.playing #left{top:40px;left:6px;width:140px;padding:6px 8px;gap:2px}
  #left .num{font-size:16px}#shield{font-size:10px}.pol{padding:1px 6px;font-size:10px}#energy{height:8px}
  #right{top:40px;right:4px;width:82px;padding:4px}#map{width:74px;height:90px;margin:0 auto 2px}#vessel{font-size:11px;line-height:1.2;margin:2px 0 0}.progress{margin-top:3px}
  #prompt{top:136px;padding:3px 8px;max-width:96vw}#prompt b{font-size:11.5px;line-height:1.3}#prompt small{font-size:9.5px}
  #toast,#toast.show{top:178px!important;font-size:11.5px;line-height:1.4;padding:5px 9px}
  #bossbar{top:140px;width:96vw}#bossbar.show~#prompt{top:204px}#bossbar.show~#toast,#bossbar.show~#toast.show{top:232px!important}
  #bossbar .bb-top b{font-size:11.5px}#boss-phase{font-size:10.5px}#boss-phase .weak{font-size:9px}
  .olabel{font-size:11px;padding:2px 6px}#info-chip{bottom:calc(120px + env(safe-area-inset-bottom));font-size:11.5px}
  .corelabel{font-size:11px;padding:3px 6px}
}

/* Default reduced-flash presentation: persistent warnings instead of strobing. */
#flash{background:radial-gradient(ellipse at center,transparent 65%,rgba(150,50,40,.25))}
#warning{animation:none;background:rgba(45,8,12,.14)}
#vessel.warn,.tbtns button.hint,.corelabel{animation:none}

/* Keep the primary action visible on entry, including narrow and short touch screens. */
.start-row{margin:12px 0 18px}
@media (max-width:760px), (pointer:coarse){
  #menu{align-items:start}
  .start-row{display:flex;flex-direction:column;gap:8px;margin:12px 0 16px}
  .start-row #start,.start-row #continue{width:100%;margin:0;min-height:52px;white-space:normal}
}

/* Persistent touch affordance; the same joystick follows the finger during dragging. */
@media (pointer:coarse){
  #stick{left:clamp(82px,22vw,150px);top:calc(100% - 118px - env(safe-area-inset-bottom));opacity:.85;background:rgba(16,12,23,.3);border-color:rgba(192,216,237,.5)}
  #stick.on{opacity:1;background:rgba(16,12,23,.45)}
  #stick>span{position:absolute;color:#e2edf7;font:700 22px/1 sans-serif;text-shadow:0 1px 3px #000}
  .stick-up{top:5px;left:50%;transform:translateX(-50%)}
  .stick-down{bottom:5px;left:50%;transform:translateX(-50%)}
  .stick-left{left:7px;top:50%;transform:translateY(-50%)}
  .stick-right{right:7px;top:50%;transform:translateY(-50%)}
  #stick>.stick-hint{top:calc(100% + 10px);left:50%;transform:translateX(-50%);font-size:12px;white-space:nowrap;padding:5px 8px;border-radius:8px;background:rgba(10,6,16,.65)}
  #stick.on>.stick-hint{visibility:hidden}
}

#explore-opts{flex-wrap:wrap;align-items:center;margin:2px 0 10px}

/* A clear, non-flashing home link on the menu and during play. */
.bh, #top a.bh{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 10px;border:1px solid rgba(255,142,128,.7);border-radius:10px;background:rgba(102,23,40,.8);color:#ffe8e6;font:800 11px var(--mono);letter-spacing:.08em;text-decoration:none;white-space:nowrap}
.bh .bh-home{color:#ffd078;font:700 12px system-ui,sans-serif;letter-spacing:0}
.bh:hover,#top a.bh:hover,.bh:focus-visible,#top a.bh:focus-visible{background:#a93748;border-color:#ffd078;color:#fff;outline:2px solid #ffd078;outline-offset:2px}
@media(max-width:420px){#top a.bh{padding:0 7px;gap:4px;font-size:10px}#top a.bh .bh-home{font-size:11px}}

@media (pointer:coarse){
 .tbtns{gap:8px;align-items:flex-end}
 #t-switch{width:auto;height:auto;background:none;display:flex;gap:6px;align-items:center}
 .tbtns #t-white,.tbtns #t-red{width:62px;height:62px;font-size:18px;border-width:2px}
 .tbtns #t-white{color:#102739;background:rgba(230,245,255,.78);border-color:#c1dbea}
 .tbtns #t-red{color:#fff;background:rgba(159,34,43,.88);border-color:#ef8d8d}
 .tbtns #t-white.selected,.tbtns #t-red.selected{border:3px solid #ffd66e;box-shadow:0 0 0 2px rgba(16,6,12,.8),0 0 12px rgba(255,214,110,.65)}
 #t-switch.hint button{outline:2px solid #ffd36a;outline-offset:2px}
 @media (max-width:360px){.tbtns{right:8px;gap:5px}.tbtns #t-white,.tbtns #t-red{width:52px;height:52px}.tbtns #t-laser{width:60px;height:60px}}
}

/* One lesson at a time; content can scroll even on short landscape screens. */
#intro-bar{display:block;top:auto;bottom:max(16px,env(safe-area-inset-bottom));width:min(460px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 100px);overflow:auto;padding:18px;box-sizing:border-box}
#intro-bar.target-below{top:82px;bottom:auto}
#intro-bar .intro-heading{display:flex;justify-content:space-between;gap:12px;font-size:13px}
#intro-bar h2{font-size:22px;margin:16px 0 10px;color:#fff}
#intro-copy{font-size:16px;line-height:1.8;margin:0 0 14px}
#intro-bar .intro-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
#intro-bar button{min-height:44px;padding:10px 14px;margin:0}
#intro-prev:disabled{opacity:.35}
#intro-bar #intro-skip{background:transparent;border:1px solid #89727b}
#intro-bar #intro-ok-row{font-size:13px;line-height:1.6}
@media(max-height:450px){#intro-bar,#intro-bar.target-below{top:12px;bottom:auto;max-height:calc(100dvh - 24px);padding:12px}#intro-bar h2{margin:8px 0;font-size:18px}#intro-copy{font-size:14px;line-height:1.6}}

/* Diagonal polarity targets in the lower-right control cluster. */
@media(pointer:coarse){
 .tbtns{width:138px;height:140px;display:block;pointer-events:none}
 #t-switch{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
 #t-switch button,.tbtns #t-laser{position:absolute;pointer-events:auto;margin:0}
 #t-white{left:0;bottom:0}
 #t-red{right:0;top:0}
 .tbtns #t-laser{right:0;bottom:0;width:62px;height:62px}
}
@media(pointer:coarse) and (max-width:360px){
 .tbtns{width:116px;height:120px}
 .tbtns #t-laser{width:52px;height:52px;font-size:14px}
}

/* Right-align the map panel beneath the top controls. */
body.playing #right{right:0;top:calc(62px + env(safe-area-inset-top));border-top-right-radius:0;border-bottom-right-radius:0}
body.playing #map{margin-left:auto;margin-right:0}
@media (max-width:900px){body.playing #right{top:calc(58px + env(safe-area-inset-top))}}

/* Prevent smart zoom on taps; keep scrollable menus and readable form fields. */
button,a,summary{touch-action:manipulation}
body.playing #world,body.playing #touch-zone,body.playing .tbtns button,body.playing #left,body.playing #right{touch-action:none}
@media(pointer:coarse){input,select,textarea,.opts select,.lb-filters select{font-size:16px}}

/* Filled and empty hearts indicate remaining and lost health. */
#shield{font-family:Arial,sans-serif;color:#ff7b94;line-height:1.5;letter-spacing:.08em}

/* Speed dial alongside race position and timer. */
.race-status{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%}
.race-timing{min-width:0}.race-timing .num{font-size:20px;white-space:nowrap}
#speedometer{width:86px;flex-shrink:0;text-align:center;color:#edf6ff}
#speedometer svg{width:100%;display:block}
.speed-value{display:flex;justify-content:center;align-items:baseline;gap:3px;line-height:1}
.speed-value b{font:800 21px var(--mono);font-variant-numeric:tabular-nums}.speed-value small{font-size:10px}
.speed-note{display:block;font-size:9px;color:var(--muted);margin-top:4px}
#speedometer.boosting .speed-value{color:#ffd36a}
@media(max-width:900px){#speedometer{width:66px}.race-timing .num{font-size:14px}.speed-value b{font-size:18px}.speed-value small{font-size:9px}.race-timing .lbl{font-size:8px}}
/* mission box (objectives + clock) — 2026-11-03 mission chapters */
#mbox{position:fixed;left:14px;bottom:24px;z-index:6;width:250px;padding:8px 10px;border-radius:12px;background:rgba(20,6,10,.72);border:1px solid rgba(255,211,106,.35);font-size:12.5px;line-height:1.45;pointer-events:none}
body:not(.playing) #mbox{display:none}
#mbox .mt{display:flex;align-items:baseline;gap:6px;margin-bottom:4px;font-size:13px;color:#ffe2a8}
#mbox .mt b{font:700 10.5px var(--mono);letter-spacing:.08em;color:#1a0408;background:#ffd36a;border-radius:4px;padding:1px 5px}
#mbox .tm{margin-left:auto;font:700 17px var(--mono);color:#fff}
#mbox.hurry .tm{color:#ff5a4a;animation:blink .5s steps(2) infinite}
#mbox ul{margin:0;padding:0;list-style:none}#mbox li{color:#f0dada}#mbox li.ok{color:#7fe0a0}#mbox li.bad{color:#ff7a6a;text-decoration:line-through}
#mbox li em{font-style:normal;font-family:var(--mono);color:#ffd36a}#mbox li small{font-size:10px;color:#c9a0a8}
#mbox.m-chase{border-color:rgba(255,160,64,.6)}#mbox.m-maze{border-color:rgba(127,224,160,.5)}#mbox.m-duel,#mbox.m-finale{border-color:rgba(255,90,110,.55)}
.res-grid dd.objs{line-height:1.6}.res-grid dd.objs .ok{color:#7fe0a0}.res-grid dd.objs .bad{color:#ff8a7a}
@media (max-width:600px){
  #mbox{left:6px;top:146px;bottom:auto;width:148px;padding:5px 7px;font-size:10.5px;line-height:1.35;background:rgba(20,6,10,.6)}
  #mbox .mt{font-size:11px;margin-bottom:2px;flex-wrap:wrap}#mbox .mt span:not(.tm){display:none}#mbox .tm{font-size:14px}
  #mbox li.ok,#mbox li.opt{display:none}
}
#mbox .tm small{font-size:9px;color:#c9a0a8;margin-right:3px}

/* Compact HUD: map in the corner, objectives and boss in separate columns. */
@media(max-width:900px){
 body.playing #right{top:env(safe-area-inset-top);right:0;width:82px;padding:4px;border-top-left-radius:0}
 body.playing #map{width:74px;height:90px;margin:0}
 body.playing #top{width:calc(100% - 86px);right:auto;padding:6px;gap:6px;flex-wrap:wrap}
 body.playing #top .title{display:none}
 body.playing #top .bh{min-height:32px}
 body.playing #top button{padding:5px 8px}
 body.playing #left{left:6px;width:140px;padding:5px 7px;gap:2px}
 #mbox{bottom:auto;padding:5px 7px;font-size:10.5px;line-height:1.35}
 #bossbar{text-align:left}#bossbar .bb-top{display:block;letter-spacing:.04em}
 #bossbar .bb-top b{display:block;font-size:11px;overflow-wrap:anywhere}#bossbar .bb-top b .en{display:none}
 #boss-phase{font-size:10px;margin:3px 0;line-height:1.3}#boss-phase .weak{font-size:9px}
 #prompt{padding:4px 6px}#prompt b{font-size:11px;line-height:1.3}#prompt small{font-size:9px;letter-spacing:0}
 #toast,#toast.show{left:6px!important;right:6px;bottom:auto!important;transform:none;width:auto;max-width:none;font-size:11px;line-height:1.4;padding:5px 8px;text-align:left;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
}
@media(max-width:900px){body.playing #prompt,body.playing #toast{transition:opacity .2s}}

/* Keep the speed dial beside mission health, without pushing objectives downward. */
body:not(.race):not(.anatomy) .race-status{position:absolute;left:calc(100% + 5px);top:0;width:auto}
body:not(.race):not(.anatomy) #speedometer{padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
body.anatomy .race-status{display:flex}

/* All modes share the speed dial inside the top-left status card. */
body:not(.race):not(.anatomy) .race-status{position:static;left:auto;top:auto;width:100%}
body:not(.race):not(.anatomy) #speedometer{padding:0;border:0;background:none}
.mission-timing{min-width:0;flex:1}.mission-timing .num{font-size:20px}.mission-timing .chain{flex-wrap:wrap;gap:3px;font-size:10px}.mission-timing #chain-box i{width:8px;height:8px}
@media(max-width:900px){.mission-timing .num{font-size:14px}.mission-timing #chain-n{font-size:11px}.mission-timing #chain-box{padding:2px}.mission-timing .chain span{font-size:8px}.mission-timing #chain-box i{width:7px;height:8px}}
/* pause button: impossible to miss (2026-11-04) */
body.playing #top #pause-btn{display:flex;align-items:center;gap:6px;background:linear-gradient(#ffe08a,#ffc23a);color:#1a0408;border:2px solid #fff4c8;border-radius:10px;padding:7px 14px;font:800 15px/1 system-ui,sans-serif;box-shadow:0 0 14px rgba(255,200,80,.55),0 2px 0 #8a5a00}
#pause-btn b{font-size:13px;letter-spacing:-1px}#pause-btn kbd.pk{font:700 11px var(--mono);background:rgba(26,4,8,.18);border:1px solid rgba(26,4,8,.35);border-radius:4px;padding:1px 5px;color:#1a0408}
#pause-btn:hover{filter:brightness(1.08)}#pause-btn:active{transform:translateY(1px)}
@media (pointer:coarse){body.playing #top #pause-btn{min-height:44px;min-width:76px;padding:8px 14px;font-size:16px;justify-content:center}}
@media (max-width:600px){body.playing #top #pause-btn{min-height:42px;min-width:70px;padding:6px 10px;font-size:15px}}
/* Event Director banner (set pieces) */
#sp-banner{position:fixed;left:50%;top:216px;transform:translate(-50%,-10px) scale(.96);z-index:7;max-width:min(560px,90vw);padding:12px 20px;border-radius:14px;text-align:center;pointer-events:none;opacity:0;transition:.35s;
  background:linear-gradient(rgba(40,8,14,.92),rgba(20,4,8,.92));border:1px solid rgba(255,211,106,.7);box-shadow:0 0 30px rgba(255,160,60,.35)}
#sp-banner.show{opacity:1;transform:translate(-50%,0) scale(1)}
#sp-banner small{display:block;font:700 10px var(--mono);letter-spacing:.3em;color:#ffb060}
#sp-banner b{display:block;font-size:24px;color:#ffe2a8;margin:2px 0 4px;letter-spacing:.06em}
#sp-banner p{margin:0;font-size:13.5px;line-height:1.55;color:#f4e2e2}
#mbox li.sp{color:#ffd36a}
@media (max-width:600px){#sp-banner{top:auto;bottom:calc(200px + env(safe-area-inset-bottom));padding:8px 12px}#sp-banner b{font-size:18px}#sp-banner p{font-size:12px}}
.recap{display:flex;align-items:center;gap:14px;margin:0 0 10px}.recap canvas{background:rgba(0,0,0,.25);border-radius:10px;flex:none;width:200px;height:auto}.recap p{margin:0;font-size:13px;color:#e8d0d0}
.montage{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:0 0 10px}.montage figure{margin:0;text-align:center}.montage canvas{width:100%;height:auto;background:rgba(0,0,0,.25);border-radius:8px}.montage figcaption{font-size:11px;color:#e8d0d0}
@media (max-width:600px){.recap canvas{width:130px}.montage{grid-template-columns:repeat(3,1fr)}}
/* language picker on the main menu */
.brand-tools{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}#lang-host{display:inline-flex}
@media (max-width:600px){.brand-row{flex-wrap:wrap;gap:6px}.lang-switch .lang-label{display:none}.lang-switch select{padding:5px 6px;max-width:132px}}
/* English shows the English name only (the Chinese-text sub-labels would just repeat it) */
html[lang="en"] #vessel-en,html[lang="en"] #boss-name .en,html[lang="en"] .olabel small,html[lang="en"] .ch b small{display:none}
/* the Latin-script languages already show "Vascular Strike" as the big title, so the decorative English line is dropped */
html:is([lang="en"],[lang="id"],[lang="vi"],[lang="es"]) .logo h1 .en{display:none}
/* "Player:" is followed straight by the bold nickname; keep a gap after translated colons */
#nick-show,#lb-nick{margin-left:.3em}
#mbox.m-timed{border-color:rgba(127,224,160,.5)}

/* Dropdowns and adjacent previous/next controls share one selection state. */
.lb-filters{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lb-filter{display:flex;align-items:center;gap:8px;min-width:0}
.lb-filter[hidden]{display:none}
#lb-board-wrap{grid-column:1 / -1}
.lb-filter>label{flex-shrink:0}
.lb-filter-control{display:flex;align-items:center;gap:5px;min-width:0;flex:1}
.lb-filters .lb-filter select{flex:1;width:0;min-width:0;margin-left:0;min-height:44px}
.lb-filters .lb-step{flex:0 0 44px;min-height:44px;margin:0;padding:6px;background:#34131f;color:#ffd36a;border:1px solid #74505d;border-radius:8px;font-size:21px;font-weight:800;touch-action:manipulation}
.lb-step:disabled{opacity:.3;cursor:default}
.lb-step:focus-visible{outline:2px solid #ffd36a;outline-offset:2px}
@media(max-width:600px){.lb-filters{grid-template-columns:1fr;gap:8px}#lb-board-wrap{grid-column:auto}.lb-filter{gap:6px}.lb-filter>label{min-width:28px}.lb-filters .lb-step{flex-basis:42px}}
/* phone leaderboard: show many more rows (2026-11-04) */
@media (max-width:600px){
  .lb-card{padding:10px 10px}.lb-card h2{font-size:18px}.lb-head small{display:none}
  .tabs button{padding:5px 2px;font-size:12.5px}
  .lb-filters{gap:4px}.lb-filters .lb-filter select{min-height:34px;font-size:14px;padding:2px 6px}.lb-filters .lb-step{flex-basis:34px;min-height:34px;font-size:17px;padding:2px}
  .lb-filter>label{font-size:12px}
  .lb-card .lb-body{margin:4px 0}.lb-body p.muted{margin:3px 0;font-size:11px;line-height:1.35}
  .lbt th,.lbt td{padding:3px 4px;font-size:12px;line-height:1.25}.lbt td:first-child{white-space:nowrap;font-size:12px}.lbt td:nth-child(3){white-space:nowrap}
  .lbt td:nth-child(2){max-width:30vw}.lbt td:last-child{font-size:10.5px}
  .lb-foot{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font-size:12px}.lb-foot p{margin:2px 0}
  .lb-foot #lb-retry{padding:3px 10px;font-size:12px;min-height:0;margin:0}.lb-foot .privacy{flex-basis:100%;font-size:11.5px}
}
/* event banner: top centre, compact, out of the flight view (2026-11-05) */
#sp-banner{top:54px;padding:7px 16px 8px;max-width:min(520px,60vw);border-radius:12px;background:linear-gradient(rgba(40,8,14,.82),rgba(20,4,8,.78))}
#sp-banner small{font-size:9px}#sp-banner b{font-size:17px;margin:0 0 2px}#sp-banner p{font-size:12px;line-height:1.45}
@media (max-width:600px){#sp-banner{top:auto;bottom:calc(200px + env(safe-area-inset-bottom));max-width:92vw}body.sp-on #toast{top:auto;bottom:calc(208px + var(--sp-h,100px) + env(safe-area-inset-bottom))}}

/* desktop: the event banner sits in the toast's usual upper-middle slot; when both show at once the toast moves to the very top */
@media (min-width:901px){
  #sp-banner{top:max(17vh,138px)}
  body.sp-on #toast,body.sp-on #toast.show{top:54px!important;max-width:min(820px,72vw);font-size:13.5px;line-height:1.4;padding:6px 14px}
  body:has(#bossbar.show) #sp-banner{top:200px}body:has(#bossbar.show).sp-on #toast,body:has(#bossbar.show).sp-on #toast.show{top:138px!important}
}