:root{--ink:#06090c;--steel:rgba(9,14,18,.74);--steel-2:rgba(20,29,35,.9);--rule:rgba(240,181,74,.24);--rule-strong:rgba(240,181,74,.55);--lamp:#f0b54a;--lamp-dim:#9c7433;--paper:#ebe3cd;--paper-dim:#a39d8a;--friend:#8fd3e6;--foe:#ef5a40;--good:#8ed49a;--f-display:"Noto Serif SC","Songti SC","STSong",serif;--f-stencil:"Big Shoulders Stencil Display","Oswald","Arial Narrow",sans-serif;--f-body:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;--f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--chrome-top:0px;--sa-t:0px;--sa-t:var(--safe-area-inset-top,env(safe-area-inset-top,0px));--sa-r:0px;--sa-r:var(--safe-area-inset-right,env(safe-area-inset-right,0px));--sa-b:0px;--sa-b:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));--sa-l:0px;--sa-l:var(--safe-area-inset-left,env(safe-area-inset-left,0px));--safe-top:calc(var(--sa-t) + var(--chrome-top));color-scheme:dark}
html.rot{--sa-t:0px;--sa-t:var(--safe-area-inset-right,env(safe-area-inset-right,0px));--sa-r:0px;--sa-r:var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px));--sa-b:0px;--sa-b:var(--safe-area-inset-left,env(safe-area-inset-left,0px));--sa-l:calc(0px + var(--chrome-top));--sa-l:calc(var(--safe-area-inset-top,env(safe-area-inset-top,0px)) + var(--chrome-top));--safe-top:var(--sa-t)}
html.rot #app{right:auto;bottom:auto;width:var(--rot-w);height:var(--rot-h);transform-origin:0 0;transform:translateX(var(--rot-h)) rotate(90deg)}
html.rot .hud-bc{left:calc(50% + (var(--sa-l) - var(--sa-r)) / 2)}
html,body{height:100%;margin:0}
[hidden]{display:none!important}
body{background:var(--ink);color:var(--paper);font-family:var(--f-body);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
#app{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;user-select:none;-webkit-user-select:none}
#gl{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
#overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}
#vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(160,20,10,.55) 100%);transition:opacity .5s}
button{font:inherit;color:inherit}
button:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
#hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;font-family:var(--f-mono);font-variant-numeric:tabular-nums;z-index:5}
.panel{background:var(--steel);border:1px solid var(--rule);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#hud::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--safe-top) + 130px);pointer-events:none;background:linear-gradient(rgba(6,9,12,.72),rgba(6,9,12,.45) 60%,rgba(6,9,12,0))}
.hud-tl,.hud-tr,.banner{text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.6)}
.hud-tl{position:absolute;left:16px;top:calc(14px + var(--safe-top));display:grid;grid-gap:4px;gap:4px}
.wave-no{font-family:var(--f-stencil);font-weight:900;font-size:30px;letter-spacing:.06em;color:var(--lamp);line-height:1}
.wave-name{font-family:var(--f-body);font-weight:700;font-size:14px;color:var(--paper)}
.counts{display:flex;grid-gap:12px;gap:12px;font-size:12px;letter-spacing:.06em}
html.no-flexgap .counts>*+*{margin-left:12px}
.counts .foe{color:var(--foe)}
.counts .friend{color:var(--friend)}
.hud-tr{position:absolute;right:16px;top:calc(14px + var(--safe-top));display:grid;justify-items:end;grid-gap:4px;gap:4px;max-width:46vw}
.score{font-family:var(--f-stencil);font-weight:900;font-size:30px;line-height:1;color:var(--paper)}
.score small{font-family:var(--f-body);font-weight:500;font-size:12px;color:var(--paper-dim);margin-left:6px}
.clock{font-size:12px;color:#c9c2ae;letter-spacing:.08em}
.feed{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-gap:3px;gap:3px;justify-items:end}
.feed li{font-family:var(--f-body);font-size:12.5px;padding:3px 8px;background:var(--steel);border-right:2px solid var(--lamp);transition:opacity .6s}
.feed li.foe{border-right-color:var(--foe)}
.feed li.friend{border-right-color:var(--friend)}
.feed li b{font-weight:700}
.banner{position:absolute;z-index:2;left:50%;top:16%;transform:translateX(-50%);text-align:center;width:90vw;width:min(90vw,720px)}
.banner .b1{font-family:var(--f-stencil);font-weight:900;letter-spacing:.35em;color:var(--lamp);font-size:15px}
.banner .b2{font-family:var(--f-display);font-weight:900;font-size:6vw;font-size:clamp(34px,6vw,60px);line-height:1.1;margin:.12em 0;text-shadow:0 1px 3px rgba(0,0,0,.85),0 2px 24px rgba(0,0,0,.6)}
.banner .b3{font-family:var(--f-body);font-size:15px;color:var(--paper);text-shadow:0 1px 2px rgba(0,0,0,.9),0 1px 8px rgba(0,0,0,.8)}
.banner.show{animation:bannerIn .6s ease-out}
@keyframes bannerIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
.torp-warn{position:absolute;left:50%;top:calc(50% + 70px);transform:translateX(-50%);font-family:var(--f-body);font-weight:700;font-size:15px;letter-spacing:.2em;color:#fff;background:rgba(190,40,24,.85);padding:6px 16px;border:1px solid var(--foe);animation:blink .5s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
.hint{position:absolute;left:50%;bottom:calc(150px + var(--sa-b));transform:translateX(-50%);font-family:var(--f-body);font-size:13px;color:var(--lamp);text-shadow:0 1px 6px #000;opacity:0;transition:opacity .3s;white-space:nowrap}
.hint.on{opacity:1}
.hud-bl{position:absolute;left:16px;bottom:calc(16px + var(--sa-b));width:300px;padding:12px 14px;display:grid;grid-gap:9px;gap:9px}
.ship-name{display:flex;align-items:baseline;justify-content:space-between;grid-gap:8px;gap:8px}
html.no-flexgap .ship-name>*+*{margin-left:8px}
.ship-name b{font-family:var(--f-body);font-weight:700;font-size:16px}
.ship-name span{font-family:var(--f-stencil);font-weight:700;letter-spacing:.12em;color:var(--lamp);font-size:14px}
.ship-type{font-family:var(--f-body);font-size:12px;color:var(--paper-dim);margin-top:-6px}
.hp{display:grid;grid-gap:4px;gap:4px}
.hp-row{display:flex;justify-content:space-between;font-size:12px;color:var(--paper-dim)}
.hp-row b{color:var(--paper);font-weight:600}
.bar{height:8px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.bar i{position:absolute;top:0;right:auto;bottom:0;left:0;background:var(--good);transition:width .2s}
.bar i.mid{background:var(--lamp)}
.bar i.low{background:var(--foe)}
.nav{display:grid;grid-template-columns:150px 1fr;grid-gap:10px;gap:10px;align-items:end}
.nav canvas{width:150px;height:80px;display:block}
.nav-read{display:grid;grid-gap:6px;gap:6px;font-size:12px;color:var(--paper-dim)}
.nav-read b{display:block;font-family:var(--f-stencil);font-weight:900;font-size:26px;color:var(--paper);line-height:1;letter-spacing:.02em}
.nav-read b small{font-family:var(--f-mono);font-size:11px;color:var(--paper-dim);font-weight:400;margin-left:3px}
.rudder{display:grid;grid-gap:4px;gap:4px;font-size:11px;color:var(--paper-dim)}
.rudder .track{height:6px;background:rgba(255,255,255,.08);position:relative}
.rudder .track::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--paper-dim)}
.rudder .fill{position:absolute;top:0;bottom:0;background:var(--lamp)}
.hud-bc{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(16px + var(--sa-b));display:flex;grid-gap:8px;gap:8px;align-items:stretch}
html.no-flexgap .hud-bc>*+*{margin-left:8px}
.wpn{padding:8px 12px;display:grid;grid-gap:6px;gap:6px;min-width:120px;border:1px solid var(--rule);background:var(--steel)}
.wpn.sel{border-color:var(--lamp);box-shadow:0 0 0 1px var(--lamp) inset}
.wpn.off{opacity:.45}
.wpn-h{display:flex;grid-gap:8px;gap:8px;align-items:baseline;font-size:11px;color:var(--paper-dim);letter-spacing:.06em}
html.no-flexgap .wpn-h>*+*{margin-left:8px}
.wpn-h kbd{font-family:var(--f-mono);font-size:10px;border:1px solid var(--rule-strong);padding:0 4px;color:var(--lamp)}
.wpn-h b{font-family:var(--f-body);font-size:13px;color:var(--paper);font-weight:700;letter-spacing:0}
.pips{display:flex;grid-gap:4px;gap:4px}
html.no-flexgap .pips>*+*{margin-left:4px}
.pip{width:14px;height:16px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.pip i{position:absolute;left:0;right:0;bottom:0;background:var(--lamp-dim)}
.pip.ready i{background:var(--lamp)}
.pip.noarc{outline:1px solid rgba(239,90,64,.6)}
.wpn .sub{font-size:11px;color:var(--paper-dim)}
.hud-br{position:absolute;right:16px;bottom:calc(16px + var(--sa-b));padding:6px}
#mini{width:210px;height:210px;display:block}
.keys-strip{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(98px + var(--sa-b));font-size:11px;color:var(--paper-dim);white-space:nowrap;transition:opacity 1s;text-shadow:0 1px 4px #000}
.keys-strip kbd{font-family:var(--f-mono);color:var(--lamp);border:1px solid var(--rule);padding:0 4px;margin:0 3px 0 10px}
.lock-hint{position:absolute;left:50%;top:calc(50% + 40px);transform:translateX(-50%);font-family:var(--f-body);font-size:13px;color:var(--paper);background:var(--steel);border:1px solid var(--rule);padding:6px 12px;white-space:nowrap}
.screen{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;z-index:20;-webkit-overflow-scrolling:touch}
.menu{background:linear-gradient(0deg,rgba(6,9,12,.94) 0%,rgba(6,9,12,.72) 20%,rgba(6,9,12,0) 40%),
  linear-gradient(90deg,rgba(6,9,12,.9) 0%,rgba(6,9,12,.62) 19%,rgba(6,9,12,0) 34%,rgba(6,9,12,0) 74%,rgba(6,9,12,.62) 86%,rgba(6,9,12,.88) 100%)}
.menu-grid{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr) minmax(200px,250px);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"brand stage oni" "dock dock dock";grid-gap:18px 28px;gap:18px 28px;max-width:1640px;margin:0 auto;min-height:100%;min-height:max(100%,640px);box-sizing:border-box;padding:3.6vh 2.8vw 2.6vh;padding:clamp(18px,3.6vh,40px) clamp(16px,2.8vw,44px) clamp(14px,2.6vh,26px)}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--paper-dim);margin:0}
.title{font-family:var(--f-display);font-weight:900;font-size:4.4vw;font-size:clamp(48px,4.4vw,76px);line-height:.95;letter-spacing:.04em;margin:.14em 0 0;white-space:nowrap}
.title .yr{font-family:var(--f-stencil);font-weight:900;color:var(--lamp);font-size:.64em;letter-spacing:.06em;margin-left:.14em}
.en{font-family:var(--f-stencil);font-weight:700;letter-spacing:.3em;color:var(--lamp);font-size:1.1vw;font-size:clamp(13px,1.1vw,16px);margin:.5em 0 1.1em}
.brief{line-height:1.8;font-size:14px;margin:0 0 18px;text-wrap:pretty;color:var(--paper)}
.brief-short{display:none}
.nw{white-space:nowrap}
.keys{display:grid;grid-template-columns:minmax(0,1fr);grid-gap:4px;gap:4px;margin:0;font-size:12.5px}
.keys div{display:flex;grid-gap:10px;gap:10px;align-items:baseline;border-top:1px solid rgba(235,227,205,.1);padding-top:4px}
html.no-flexgap .keys div>*+*{margin-left:10px}
.keys dt{font-family:var(--f-mono);color:var(--lamp);min-width:7.2em;font-size:12px}
.keys dd{margin:0;color:var(--paper-dim)}
.sec-title{font-family:var(--f-body);font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--paper-dim);margin:0 0 10px;display:flex;grid-gap:10px;gap:10px;align-items:baseline}
html.no-flexgap .sec-title>*+*{margin-left:10px}
.sec-title span{font-family:var(--f-stencil);letter-spacing:.2em;color:var(--lamp-dim)}
.brand{grid-area:brand;align-self:start;min-width:0}
.stage{grid-area:stage;position:relative;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.stage.drag{cursor:grabbing}
html.rot .stage{touch-action:none}
.stage-hint{position:absolute;top:calc(4% + 10px);left:50%;transform:translateX(-50%);font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--paper-dim);white-space:nowrap;transition:opacity .6s;pointer-events:none;text-shadow:0 1px 6px #000}
.stage-hint.off{opacity:0}
.stage::before,.stage::after{content:"";position:absolute;top:4%;right:3%;bottom:26%;left:3%;pointer-events:none;background:linear-gradient(var(--rule-strong),var(--rule-strong)) left top/26px 1px no-repeat,linear-gradient(var(--rule-strong),var(--rule-strong)) left top/1px 26px no-repeat,
    linear-gradient(var(--rule-strong),var(--rule-strong)) right top/26px 1px no-repeat,linear-gradient(var(--rule-strong),var(--rule-strong)) right top/1px 26px no-repeat,
    linear-gradient(var(--rule-strong),var(--rule-strong)) left bottom/26px 1px no-repeat,linear-gradient(var(--rule-strong),var(--rule-strong)) left bottom/1px 26px no-repeat,
    linear-gradient(var(--rule-strong),var(--rule-strong)) right bottom/26px 1px no-repeat,linear-gradient(var(--rule-strong),var(--rule-strong)) right bottom/1px 26px no-repeat}
.stage::after{background:linear-gradient(90deg,transparent,rgba(240,181,74,.18) 20%,rgba(240,181,74,.18) 80%,transparent) center bottom/60% 1px no-repeat}
.stage-cap{text-align:center;max-width:36em;padding:0 12px;text-shadow:0 1px 10px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8)}
.stage-no{font-family:var(--f-stencil);font-weight:700;letter-spacing:.24em;color:var(--lamp);font-size:15px;margin:0}
.stage-name{font-family:var(--f-display);font-weight:900;font-size:3.6vw;font-size:clamp(34px,3.6vw,54px);line-height:1.05;margin:.08em 0 .1em;letter-spacing:.06em}
.stage-type{font-size:13px;color:var(--paper-dim);margin:0 0 8px;letter-spacing:.12em}
.stage-blurb{font-size:14px;line-height:1.7;margin:0;color:var(--paper);text-wrap:pretty}
.oni{grid-area:oni;align-self:start;min-width:0}
.oni-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-gap:6px;gap:6px}
.oni-grid figure{margin:0;display:grid;grid-gap:2px;gap:2px;padding-top:6px;border-top:1px solid rgba(235,227,205,.1)}
.oni-grid canvas{width:100%;height:32px;display:block}
.oni-grid figcaption{font-size:12px;display:flex;justify-content:space-between;grid-gap:6px;gap:6px}
html.no-flexgap .oni-grid figcaption>*+*{margin-left:6px}
.oni-grid figcaption span{color:var(--paper-dim);font-family:var(--f-mono);font-size:11px}
.pick{grid-area:dock;min-width:0}
.dock-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:14px 24px;gap:14px 24px;align-items:stretch}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:10px;gap:10px}
.card{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:6px 14px;gap:6px 14px;align-content:start;padding:10px 12px 12px;background:var(--steel);border:1px solid var(--rule);transition:border-color .2s,background .2s}
.card:hover{border-color:var(--rule-strong)}
.card.sel{border-color:var(--lamp);background:var(--steel-2);box-shadow:0 0 0 1px var(--lamp) inset}
.card:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
.card canvas{grid-column:1 / -1;width:100%;height:34px;display:block}
.card-h{display:flex;flex-wrap:wrap;grid-gap:0 8px;gap:0 8px;align-items:baseline}
html.no-flexgap .card-h>*{margin-right:8px;margin-bottom:0}
.card-h b{font-weight:700;font-size:16px;white-space:nowrap}
.card-h span{white-space:nowrap}
.card-h span{font-family:var(--f-stencil);font-weight:700;letter-spacing:.1em;color:var(--lamp);font-size:13px}
.card .ty{font-size:12px;color:var(--paper-dim);margin-top:2px}
.card dl{margin:0;display:grid;grid-template-columns:auto auto;grid-gap:2px 10px;gap:2px 10px;font-size:12px;align-content:start}
.card dt{color:var(--paper-dim)}
.card dd{margin:0;font-family:var(--f-mono);font-size:11.5px;text-align:right}
.launch{display:grid;grid-gap:10px;gap:10px;align-content:center;justify-items:start;min-width:230px}
.row{display:flex;flex-wrap:wrap;grid-gap:12px;gap:12px;align-items:center}
html.no-flexgap .row>*{margin-right:12px;margin-bottom:12px}
.seg{display:inline-flex;border:1px solid var(--rule)}
.seg button{all:unset;cursor:pointer;padding:9px 14px;font-size:13px;color:var(--paper-dim)}
.seg button[aria-checked="true"]{background:var(--lamp);color:var(--ink);font-weight:700}
.seg button:focus-visible{outline:2px solid var(--lamp);outline-offset:-2px}
.primary{all:unset;cursor:pointer;box-sizing:border-box;padding:12px 28px;background:var(--lamp);color:var(--ink);font-family:var(--f-body);font-weight:700;font-size:16px;letter-spacing:.3em;border:1px solid var(--lamp);text-align:center}
.launch .primary{width:100%}
.primary:hover{background:#ffc766}
.primary:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.ghost{all:unset;cursor:pointer;padding:10px 20px;border:1px solid var(--rule-strong);font-size:14px;letter-spacing:.14em;color:var(--paper)}
.ghost:hover{border-color:var(--lamp);color:var(--lamp)}
.ghost:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
.diff-note{font-size:12px;color:var(--paper-dim);max-width:19em;line-height:1.5}
.best{font-size:12px;color:var(--paper-dim);margin:0;font-family:var(--f-mono)}
.prefs{display:flex;flex-wrap:wrap;grid-gap:8px;gap:8px}
html.no-flexgap .prefs>*{margin-right:8px;margin-bottom:8px}
.pref{all:unset;cursor:pointer;box-sizing:border-box;display:inline-flex;align-items:center;grid-gap:8px;gap:8px;min-height:38px;padding:8px 14px;border:1px solid var(--rule);background:rgba(9,14,18,.5);font-size:13px;letter-spacing:.12em;color:var(--paper-dim);white-space:nowrap}
html.no-flexgap .pref>*+*{margin-left:8px}
.pref b{color:var(--lamp);font-weight:700;letter-spacing:.06em}
.pref:hover{border-color:var(--rule-strong);color:var(--paper)}
.pref:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
.best:empty{display:none}
.dim{background:rgba(6,9,12,.72);display:grid;place-items:center;padding-top:var(--safe-top);box-sizing:border-box}
.sheet{width:92vw;width:min(92vw,760px);box-sizing:border-box;padding:28px 4vw;padding:28px clamp(18px,4vw,36px);background:var(--steel-2);border:1px solid var(--rule);display:grid;grid-gap:18px;gap:18px;margin-top:24px;margin-bottom:24px}
.sheet h2{font-family:var(--f-display);font-weight:900;font-size:6vw;font-size:clamp(34px,6vw,52px);margin:0;line-height:1.1}
.sheet .eyebrow{margin-bottom:-10px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:1px;gap:1px;background:var(--rule);margin:0;border:1px solid var(--rule)}
@media (max-width:560px){
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.stats div{background:var(--steel-2);padding:10px 12px}
.stats dt{font-size:12px;color:var(--paper-dim)}
.stats dd{margin:4px 0 0;font-family:var(--f-stencil);font-weight:900;font-size:28px;line-height:1}
.stats dd small{font-family:var(--f-mono);font-size:11px;font-weight:400;color:var(--paper-dim);margin-left:4px}
.kills{margin:0;padding:0;list-style:none;display:grid;grid-gap:6px;gap:6px;max-height:34vh;overflow-y:auto}
.kills li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:2px 12px;gap:2px 12px;padding:8px 0;border-top:1px solid rgba(235,227,205,.1);font-size:13px}
.kills li b{font-weight:700;white-space:nowrap}
.kills li span{font-family:var(--f-mono);font-size:12px;color:var(--paper-dim)}
.kills li em{grid-column:1 / -1;font-style:normal;font-size:12px;color:var(--paper-dim)}
.kills li.none{color:var(--paper-dim)}
.btns{display:flex;flex-wrap:wrap;grid-gap:12px;gap:12px}
html.no-flexgap .btns>*{margin-right:12px;margin-bottom:12px}
.ghost.lamp{color:var(--lamp);border-color:var(--lamp)}
.modal{z-index:30}
.modal .sheet{background:#141c22}
@media (max-height:540px){
.modal .sheet{grid-gap:12px;gap:12px;padding-top:18px;padding-bottom:18px}
.modal .sheet h2{display:none}
.report-view img{max-height:calc(100vh - 150px)}
}
.end-rank{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;grid-gap:4px 14px;gap:4px 14px;font-size:13px;color:var(--paper-dim)}
html.no-flexgap .end-rank>*{margin-right:14px;margin-bottom:4px}
.end-rank b{font-family:var(--f-stencil);font-weight:900;font-size:24px;color:var(--lamp);margin:0 4px}
.end-rank small{font-size:12px;margin-left:6px}
.link-btn{all:unset;cursor:pointer;font-size:12px;letter-spacing:.14em;color:var(--paper-dim);border-bottom:1px solid var(--rule)}
.link-btn:hover{color:var(--lamp)}
.link-btn:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
.report-view{display:grid;grid-gap:12px;gap:12px;justify-items:center}
.report-view img{display:block;max-width:100%;max-height:60vh;border:1px solid var(--rule);-webkit-touch-callout:default}
.report-view img:not([src]){display:none}
.report-tip{margin:0;font-size:12px;color:var(--paper-dim);text-align:center;line-height:1.6}
.ranks{margin:0;padding:0;list-style:none;max-height:42vh;overflow-y:auto}
.ranks li{display:grid;grid-template-columns:2.6em minmax(0,1fr) auto;grid-gap:12px;gap:12px;align-items:baseline;padding:8px 0;border-top:1px solid rgba(235,227,205,.1);font-size:14px}
.ranks li i{font-style:normal;font-family:var(--f-stencil);font-weight:900;font-size:20px;color:var(--paper-dim)}
.ranks li:nth-child(-n+3) i{color:var(--lamp)}
.ranks li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranks li b{font-family:var(--f-mono);font-weight:500;font-size:13px}
.ranks li.none{display:block;color:var(--paper-dim)}
.rank-me{margin:0;font-size:13px;color:var(--paper)}
.rank-me:empty{display:none}
.pause-keys{font-size:12.5px}
.home{background:linear-gradient(0deg,rgba(6,9,12,.95) 0%,rgba(6,9,12,.72) 30%,rgba(6,9,12,0) 54%),
  linear-gradient(90deg,rgba(6,9,12,.9) 0%,rgba(6,9,12,.55) 22%,rgba(6,9,12,0) 38%)}
.home-grid{display:grid;grid-template-columns:minmax(260px,400px) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"brand stage" "modes modes";grid-gap:18px 28px;gap:18px 28px;max-width:1640px;margin:0 auto;min-height:100%;min-height:max(100%,640px);box-sizing:border-box;padding:3.6vh 2.8vw 3vh;padding:clamp(18px,3.6vh,40px) clamp(16px,2.8vw,44px) clamp(16px,3vh,32px)}
.home .brand .brief{max-width:26em}
.modes{grid-area:modes;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:16px;gap:16px}
.mode{all:unset;box-sizing:border-box;cursor:pointer;position:relative;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tag tag" "title title" "art art" "desc desc" "go foot";grid-gap:6px 16px;gap:6px 16px;padding:18px 24px 20px 26px;background:var(--steel);border:1px solid var(--rule);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .2s,background .2s}
.mode::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:4px;background:var(--lamp-dim);transition:background .2s}
.mode:hover{border-color:var(--lamp);background:var(--steel-2)}
.mode:focus-visible{border-color:var(--lamp);background:var(--steel-2)}
.mode:hover::before{background:var(--lamp)}
.mode:focus-visible::before{background:var(--lamp)}
.mode:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
.mode-tag{grid-area:tag;justify-self:start;font-size:12px;font-weight:700;letter-spacing:.24em;padding:3px 10px;border:1px solid var(--lamp);color:var(--lamp)}
.mode-title{grid-area:title;display:flex;flex-wrap:wrap;align-items:baseline;grid-gap:4px 16px;gap:4px 16px}
html.no-flexgap .mode-title>*{margin-right:16px;margin-bottom:4px}
.mode-title b{font-family:var(--f-display);font-weight:900;font-size:3.3vw;font-size:clamp(34px,3.3vw,50px);line-height:1.1;letter-spacing:.06em;color:var(--paper)}
.mode-title span{font-size:14px;letter-spacing:.16em;color:var(--lamp)}
.mode-art{grid-area:art;width:100%;height:60px;display:block;margin:2px 0 4px}
.mode-desc{grid-area:desc;font-size:14px;line-height:1.7;color:var(--paper);text-wrap:pretty}
.mode-go{grid-area:go;align-self:center;font-weight:700;font-size:15px;letter-spacing:.24em;color:var(--lamp);white-space:nowrap}
.mode-go::after{content:"→";display:inline-block;margin-left:.5em;transition:transform .2s}
.mode:hover .mode-go::after{transform:translateX(5px)}
.mode:focus-visible .mode-go::after{transform:translateX(5px)}
.mode-foot{grid-area:foot;align-self:center;justify-self:end;font-family:var(--f-mono);font-size:11.5px;color:var(--paper-dim);text-align:right}
.modes-title{grid-column:1 / -1;margin:0 0 -4px}
.home .brand .prefs{margin-top:6px}
.back{all:unset;cursor:pointer;display:inline-block;margin:0 0 14px;font-size:13px;letter-spacing:.14em;color:var(--paper-dim)}
.back:hover{color:var(--lamp)}
.back:focus-visible{outline:2px solid var(--lamp);outline-offset:3px}
@media (max-width:980px){
.home{background:linear-gradient(180deg,rgba(6,9,12,.35),rgba(6,9,12,0) 30%)}
.home-grid{display:flex;flex-direction:column;min-height:100%;grid-gap:0;gap:0;padding:0}
html.no-flexgap .home-grid>*+*{margin-top:0}
.modes{background:rgba(6,9,12,.86);padding:4px 4vw calc(var(--sa-b) + 18px);padding:4px clamp(16px,4vw,32px) calc(var(--sa-b) + 18px);grid-template-columns:minmax(0,1fr);grid-gap:12px;gap:12px}
.home .stage{flex:1 1 0px;min-height:140px}
}
@media (max-width:560px){
.mode{padding:14px 16px 16px 20px;grid-template-areas:"tag tag" "title title" "art art" "desc desc" "go go" "foot foot"}
.mode-desc{font-size:13px}
.mode-foot{justify-self:start;margin-top:2px}
}
.mp-note{margin:0;line-height:1.75;font-size:14px;color:var(--paper);text-wrap:pretty}
.mp-row{display:flex;flex-wrap:wrap;grid-gap:12px;gap:12px;align-items:center}
html.no-flexgap .mp-row>*{margin-right:12px;margin-bottom:12px}
.mp-or{color:var(--paper-dim);font-size:13px}
.mp-code{all:unset;box-sizing:border-box;width:7.5em;padding:10px 12px;border:1px solid var(--rule-strong);font-family:var(--f-stencil);font-weight:700;font-size:20px;letter-spacing:.3em;color:var(--paper);background:rgba(0,0,0,.25)}
.mp-code:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
.mp-code::placeholder{color:var(--paper-dim);font-family:var(--f-body);font-size:14px;letter-spacing:.1em}
.mp-msg{margin:0;min-height:1.4em;font-size:13px;color:var(--lamp)}
.sheet.lobby{width:94vw;width:min(94vw,900px)}
#mp,#lobby{place-items:start center;padding:calc(var(--safe-top) + 12px) 0 12px;box-sizing:border-box}
#mp .sheet,#lobby .sheet{margin-top:auto;margin-bottom:auto}
.lb-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;grid-gap:12px;gap:12px}
html.no-flexgap .lb-head>*{margin-right:12px;margin-bottom:12px}
.lb-head .eyebrow{margin:0 0 6px}
.lb-head h2{font-family:var(--f-stencil);letter-spacing:.18em;color:var(--lamp)}
.lb-share{display:flex;grid-gap:12px;gap:12px;align-items:center}
html.no-flexgap .lb-share>*+*{margin-left:12px}
.lb-net{font-family:var(--f-mono);font-size:12px;color:var(--paper-dim)}
.lb-cfg{display:flex;flex-wrap:wrap;grid-gap:12px 24px;gap:12px 24px;align-items:center}
html.no-flexgap .lb-cfg>*{margin-right:24px;margin-bottom:12px}
.lb-cfg > div{display:flex;grid-gap:10px;gap:10px;align-items:center}
html.no-flexgap .lb-cfg > div>*+*{margin-left:10px}
.lb-cfg .seg button{white-space:nowrap}
@media (max-width:480px){
.lb-cfg .seg button{padding:8px 9px}
}
.lb-label{font-size:12px;color:var(--paper-dim);letter-spacing:.14em}
.lb-cfg .seg button:disabled{cursor:default}
.lb-cfg .seg button:disabled:not([aria-checked="true"]){opacity:.45}
.lb-sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:14px;gap:14px}
@media (max-width:640px){
.lb-sides{grid-template-columns:minmax(0,1fr)}
}
.lb-side{border:1px solid var(--rule);padding:12px 14px;display:grid;grid-gap:8px;gap:8px;align-content:start;background:rgba(0,0,0,.18)}
.lb-side.mine{border-color:var(--rule-strong)}
.lb-side h3{margin:0;font-family:var(--f-body);font-size:15px;display:flex;grid-gap:10px;gap:10px;align-items:baseline}
html.no-flexgap .lb-side h3>*+*{margin-left:10px}
.lb-side h3 span{font-family:var(--f-stencil);letter-spacing:.2em;font-size:12px;color:var(--lamp-dim)}
.lb-side[data-side="US"] h3{color:var(--friend)}
.lb-side[data-side="JP"] h3{color:var(--foe)}
.lb-who{margin:0;font-size:13px;color:var(--paper-dim)}
.lb-who b{color:var(--paper)}
.lb-who .ok{color:var(--good)}
.lb-ships{display:grid;grid-gap:8px;gap:8px}
.lb-ships .card{grid-template-columns:minmax(0,1fr)}
.lb-ships .card[disabled]{cursor:default}
.lb-status{margin:0;min-height:1.4em;font-size:14px;color:var(--lamp)}
.lb-hostnote{letter-spacing:.04em}
@media (max-height:760px){
.sheet.lobby{grid-gap:12px;gap:12px;padding:18px 3vw;padding:18px clamp(14px,3vw,28px)}
.lb-head h2{font-size:36px}
.lb-ships .card dl{grid-template-columns:repeat(4,auto)}
.lb-ships .card{padding:8px 10px}
}
#hud .net{font-size:11px;color:var(--paper-dim);letter-spacing:.06em}
#touch{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:6}
#touch button{pointer-events:auto;position:absolute;display:grid;place-items:center;margin:0;padding:0;background:rgba(9,14,18,.55);border:1px solid var(--rule-strong);color:var(--paper);font-size:14px;font-family:var(--f-body);touch-action:none;box-sizing:border-box;-webkit-appearance:none;appearance:none}
#touch button:active,#touch button.on{background:rgba(240,181,74,.35)}
#touch #tFire{right:18px;bottom:calc(240px + var(--sa-b));width:78px;height:78px;border-radius:50%;font-weight:700}
#touch #tWpn{right:104px;bottom:calc(250px + var(--sa-b));width:56px;height:44px}
#touch #tZoom{right:104px;bottom:calc(304px + var(--sa-b));width:56px;height:44px}
#touch #tDc{right:28px;bottom:calc(330px + var(--sa-b));width:56px;height:40px}
#touch #tUp{left:84px;bottom:calc(300px + var(--sa-b));width:56px;height:46px}
#touch #tDown{left:84px;bottom:calc(196px + var(--sa-b));width:56px;height:46px}
#touch #tLeft{left:22px;bottom:calc(248px + var(--sa-b));width:56px;height:46px}
#touch #tRight{left:146px;bottom:calc(248px + var(--sa-b));width:56px;height:46px}
#touch #tPause{left:10px;top:calc(88px + var(--safe-top));width:52px;height:34px}
@media (max-width:980px){
.menu{background:linear-gradient(180deg,rgba(6,9,12,.35),rgba(6,9,12,0) 30%)}
.menu-grid{display:flex;flex-direction:column;min-height:100%;grid-gap:0;gap:0;padding:0}
html.no-flexgap .menu-grid>*+*{margin-top:0}
.brand,.pick,.oni{background:rgba(6,9,12,.86);padding:18px 4vw;padding:18px clamp(16px,4vw,32px)}
.brand{align-self:stretch;padding-top:calc(var(--safe-top) + 3vh);padding-top:calc(var(--safe-top) + clamp(16px,3vh,32px))}
.pick{order:1}
.oni{order:2}
.stage{flex:1 1 0px;min-height:300px;padding-bottom:14px}
.stage::before{top:6%;right:4%;bottom:34%;left:4%}
.pick{padding-top:18px}
.dock-row{grid-template-columns:minmax(0,1fr)}
.cards{grid-template-columns:minmax(0,1fr)}
.launch{min-width:0;justify-items:stretch}
.oni-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px}
.keys{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
}
@media (min-width:981px) and (max-height:760px){
.brief{display:none}
}
@media (max-width:560px){
.keys{grid-template-columns:minmax(0,1fr)}
.stage-blurb{font-size:13px}
}
@media (pointer:coarse){
.brand .keys,.pause-keys{display:none}
}
@media (max-width:760px){
.hud-bl{width:auto;right:auto;padding:8px 10px;grid-gap:6px;gap:6px;bottom:calc(10px + var(--sa-b));left:10px}
.nav{grid-template-columns:110px 1fr}
.nav canvas{width:110px;height:59px}
.nav-read b{font-size:20px}
.hud-bc{left:auto;right:10px;transform:none;bottom:calc(10px + var(--sa-b));flex-direction:column;grid-gap:4px;gap:4px}
html.no-flexgap .hud-bc>*+*{margin-top:4px}
.wpn{min-width:0;padding:6px 8px}
.wpn .sub{display:none}
.hud-br{top:calc(64px + var(--safe-top));bottom:auto;right:10px;padding:4px}
#mini{width:130px;height:130px}
.keys-strip{display:none}
.feed{display:none}
.hud-tl{left:10px}
.hud-tr{right:10px}
.wave-no,.score{font-size:22px}
.hint{bottom:calc(200px + var(--sa-b))}
.ship-type{display:none}
.banner{top:27%;top:max(27%,calc(var(--safe-top) + 130px))}
.banner .b3{font-size:13px}
}
@media (min-width:561px) and (max-width:980px) and (orientation:portrait){
.cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px) and (orientation:portrait){
.oni{display:none}
}
@media (max-width:760px) and (orientation:portrait){
.brand{padding-top:calc(var(--safe-top) + 14px);padding-bottom:12px}
.home .brand .eyebrow{display:none}
.home .title{margin-top:0}
.home .brand .brief{font-size:13px;line-height:1.7;margin-bottom:10px}
.mode{padding:12px 16px 14px 20px;grid-gap:4px 12px;gap:4px 12px;grid-template-areas:"title tag" "art art" "desc desc" "go go" "foot foot"}
.mode-tag{justify-self:end;align-self:center;font-size:11px;padding:2px 8px}
.mode-title b{font-size:30px}
.mode-title span{font-size:12px}
.mode-art{height:44px;margin:0}
.mode-go{justify-self:start;margin-top:4px;padding:8px 16px;background:var(--lamp);color:var(--ink);font-size:14px;letter-spacing:.2em}
#menu .brand .eyebrow,#menu .brand .en,#menu .brand .keys{display:none}
.back{margin:0 0 8px}
#menu .title{font-size:36px}
#menu .brand{display:grid;grid-template-columns:auto minmax(0,1fr);grid-gap:0 14px;gap:0 14px;align-items:center}
#menu .back,#menu .brief{grid-column:1 / -1}
#menu .brief{margin:10px 0 0;font-size:13px;line-height:1.7;color:var(--paper-dim)}
#menu .brief-short{margin:0;padding-left:12px;border-left:1px solid var(--rule-strong);font-size:12px;line-height:1.6;color:var(--paper-dim)}
.stage{min-height:170px;padding-bottom:10px}
.stage-name{font-size:30px}
.stage-type{font-size:12px;margin-bottom:4px}
.pick{padding:12px 16px calc(var(--sa-b) + 14px)}
.sec-title{margin-bottom:8px}
.dock-row{grid-gap:10px;gap:10px}
.cards{grid-gap:6px;gap:6px}
.card{grid-template-columns:88px minmax(0,1fr);padding:7px 10px;grid-gap:0 12px;gap:0 12px;align-items:center}
.card canvas{grid-column:1;grid-row:1;height:28px}
.card dl{display:none}
.card-h b{font-size:15px}
.card .ty{font-size:11.5px;margin:0}
.launch{display:flex;flex-wrap:wrap;align-items:center;grid-gap:8px 14px;gap:8px 14px}
html.no-flexgap .launch>*{margin-right:14px;margin-bottom:8px}
.launch .primary{order:1;width:auto;flex:1 1 120px;padding:11px 12px;white-space:nowrap}
.diff-note{order:2;flex:1 1 calc(100% - 100px);min-width:0;max-width:none}
.launch .prefs,.launch .link-btn{order:3}
.best{order:4;flex-basis:100%}
}
@media (max-width:760px) and (orientation:portrait){
.hud-bl{width:172px;box-sizing:border-box;padding:6px 8px;grid-gap:4px;gap:4px}
.ship-name b{font-size:13px}
.ship-name span{font-size:11px}
.hp{grid-gap:3px;gap:3px}
.hp-row{font-size:10.5px}
.bar{height:5px}
.nav{grid-template-columns:76px 1fr;grid-gap:8px;gap:8px}
.nav canvas{width:76px;height:41px}
.nav-read{grid-gap:4px;gap:4px;font-size:10px;align-self:center}
.nav-read b{display:inline;margin-left:4px;font-size:16px}
.nav-read b small{font-size:10px}
.rudder{grid-gap:2px;gap:2px;font-size:10px}
.rudder .track{height:4px}
.wpn{padding:4px 7px;grid-gap:3px;gap:3px}
.wpn-h{grid-gap:6px;gap:6px;font-size:10px}
html.no-flexgap .wpn-h>*+*{margin-left:6px}
.wpn-h b{font-size:12px}
.wpn-h kbd{font-size:9px}
.pips{grid-gap:3px;gap:3px}
html.no-flexgap .pips>*+*{margin-left:3px}
.pip{width:9px;height:11px}
.wpn.off{display:none}
#touch #tFire{bottom:calc(194px + var(--sa-b))}
#touch #tWpn{bottom:calc(204px + var(--sa-b))}
#touch #tZoom{bottom:calc(258px + var(--sa-b))}
#touch #tDc{bottom:calc(284px + var(--sa-b))}
#touch #tUp,#touch #tDown,#touch #tLeft,#touch #tRight{width:50px}
#touch #tUp{left:62px;bottom:calc(254px + var(--sa-b))}
#touch #tDown{left:62px;bottom:calc(150px + var(--sa-b))}
#touch #tLeft{left:10px;bottom:calc(202px + var(--sa-b))}
#touch #tRight{left:114px;bottom:calc(202px + var(--sa-b))}
}
@media (max-width:760px) and (orientation:portrait) and (max-height:760px){
.home .brand .brief,.modes-title,.mode-art,.stage-blurb,#menu .brand .brief{display:none}
#menu .brief-short{display:block}
.modes{padding-top:14px}
.mode-go{margin-top:2px;padding:6px 14px}
.home .stage{min-height:116px}
}
@media (max-width:760px) and (orientation:portrait) and (max-height:620px){
.home .brand .en{margin-bottom:.6em}
.home .stage{min-height:110px}
.mode-desc{display:none}
.modes{grid-gap:8px;gap:8px}
.mode{padding-top:10px;padding-bottom:12px}
#menu .title{font-size:28px}
.stage{min-height:150px}
.card{padding:4px 10px}
.card canvas{height:24px}
.diff-note,.best,.launch .prefs,.launch .link-btn{display:none}
}
.t-throttle,.t-rudder{display:none}
@media (pointer:coarse) and (orientation:landscape) and (max-height:540px){
#touch #tUp,#touch #tDown,#touch #tLeft,#touch #tRight{display:none}
.t-throttle,.t-rudder{display:block;position:absolute;pointer-events:auto;touch-action:none;background:rgba(9,14,18,.55);border:1px solid var(--rule-strong)}
.t-throttle{left:calc(var(--sa-l) + 12px);bottom:12px;width:50px;height:178px}
.t-ticks{position:absolute;top:8px;right:0;bottom:8px;left:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(100% / 6 - 1px),rgba(240,181,74,.35) calc(100% / 6 - 1px),rgba(240,181,74,.35) calc(100% / 6))}
.t-knob{position:absolute;left:4px;right:4px;height:22px;background:var(--lamp);color:var(--ink);font:700 11px var(--f-body);display:grid;place-items:center;transform:translateY(-50%);transition:top .12s}
.t-rudder{left:calc(var(--sa-l) + 72px);bottom:12px;width:150px;height:56px}
.t-rudder::before{content:"舵";position:absolute;left:8px;top:4px;font:12px var(--f-body);color:var(--paper-dim)}
.t-rudder::after{content:"";position:absolute;left:50%;top:10px;bottom:10px;width:1px;background:var(--paper-dim)}
.t-rud-knob{position:absolute;top:12px;bottom:12px;width:34px;margin-left:-17px;left:50%;background:rgba(240,181,74,.8)}
.t-knob{opacity:.78}
.t-act{position:absolute;left:-5px;right:-5px;height:3px;background:#ebe3cd;transform:translateY(-50%);box-shadow:0 0 0 1px rgba(6,9,12,.7);pointer-events:none}
.t-act::after{content:attr(data-v);position:absolute;left:calc(100% + 4px);top:50%;transform:translateY(-50%);font:700 12px var(--f-mono);color:#ebe3cd;white-space:nowrap;text-shadow:0 1px 2px #000}
.t-rud-act{position:absolute;top:6px;bottom:6px;width:3px;margin-left:-1.5px;left:50%;background:#ebe3cd;box-shadow:0 0 0 1px rgba(6,9,12,.7);pointer-events:none}
.t-rud-act::after{content:attr(data-v);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);font:700 12px var(--f-mono);color:#ebe3cd;white-space:nowrap;text-shadow:0 1px 2px #000}
#touch #tFire{right:calc(var(--sa-r) + 16px);bottom:16px;width:84px;height:84px;font-size:16px}
#touch #tWpn{right:calc(var(--sa-r) + 112px);bottom:16px;width:58px;height:40px;font-size:13px}
#touch #tZoom{right:calc(var(--sa-r) + 112px);bottom:64px;width:58px;height:40px;font-size:13px}
#touch #tDc{right:calc(var(--sa-r) + 20px);bottom:110px;width:76px;height:36px;font-size:13px}
#touch #tZoom.on,#touch #tFire.on{background:rgba(240,181,74,.4)}
#touch #tPause{left:calc(var(--sa-l) + 8px);top:8px;width:46px;height:30px;font-size:12px}
#hud::before{height:90px}
.hud-tl{left:calc(var(--sa-l) + 62px);top:6px}
.wave-no{font-size:18px}
.wave-name{font-size:11px}
.counts{font-size:11px}
.hud-tr{right:calc(var(--sa-r) + 10px);top:6px}
.score{font-size:18px}
.clock{font-size:10px}
.feed{position:fixed;left:calc(var(--sa-l) + 62px);top:64px;right:auto;font-size:11px;max-width:240px}
.hud-br{top:52px;bottom:auto;right:calc(var(--sa-r) + 8px);padding:3px}
#mini{width:100px;height:100px}
.hud-bc{top:6px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);flex-direction:row;grid-gap:4px;gap:4px}
html.no-flexgap .hud-bc>*+*{margin-left:4px}
.wpn{min-width:0;padding:4px 8px;grid-gap:3px;gap:3px}
.wpn .sub{display:none}
.wpn-h{font-size:12px}
.pip{width:9px;height:11px}
.hud-bl{left:calc(var(--sa-l) + 232px);right:calc(var(--sa-r) + 180px);transform:none;bottom:6px;width:auto;max-width:none;box-sizing:border-box;padding:4px 10px;display:flex;align-items:center;grid-gap:12px;gap:12px}
html.no-flexgap .hud-bl>*+*{margin-left:12px}
.hud-bl .ship-name{flex:none}
.hud-bl .ship-name b{font-size:13px}
.hud-bl .ship-name span{display:none}
.hud-bl .hp{flex:1;min-width:40px;display:flex;align-items:center;grid-gap:8px;gap:8px}
html.no-flexgap .hud-bl .hp>*+*{margin-left:8px}
.hud-bl .bar{flex:1;height:6px}
.hud-bl .hp-row{order:2;flex:none;font-size:11px}
.hud-bl .hp-row span{display:none}
.hud-bl .ship-type,.hud-bl #tele,.hud-bl .rudder{display:none}
.hud-bl .nav{display:block;flex:none}
.hud-bl .nav-read{display:flex;grid-gap:12px;gap:12px;font-size:11px}
html.no-flexgap .hud-bl .nav-read>*+*{margin-left:12px}
.hud-bl .nav-read b{font-size:16px;display:inline;margin-left:3px}
.keys-strip,.lock-hint{display:none}
.hint{bottom:96px;font-size:12px}
.banner{top:14%}
.banner .b2{font-size:32px}
.banner .b3{font-size:12px}
.torp-warn{top:auto;bottom:118px}
.menu{background:linear-gradient(90deg,rgba(6,9,12,.94) 0,rgba(6,9,12,.78) 36%,rgba(6,9,12,0) 58%)}
.menu-grid{display:grid;grid-template-columns:minmax(300px,46%) minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"brand stage" "dock stage" ". stage";min-height:100%;height:100%;grid-gap:6px 14px;gap:6px 14px;padding:10px calc(var(--sa-r) + 10px) 10px calc(var(--sa-l) + 14px)}
.brand,.pick,.oni{background:none;padding:0}
.brand .brief,.brand .keys,.oni,.en,.eyebrow{display:none}
#menu .brand .brief{display:block;margin:6px 0 4px;font-size:12px;line-height:1.6;color:var(--paper-dim)}
.title{font-size:32px;margin:0}
.stage{min-height:0;padding:0}
.stage::before{top:6%;right:4%;bottom:24%;left:4%}
.stage-name{font-size:28px}
.stage-type{font-size:11px;margin-bottom:0}
.stage-no{font-size:12px}
.stage-blurb{font-size:12px;line-height:1.55;margin-top:4px}
.sec-title{margin:0 0 6px;font-size:11px}
.dock-row{grid-template-columns:minmax(0,1fr);grid-gap:8px;gap:8px}
.cards{grid-template-columns:minmax(0,1fr);grid-gap:5px;gap:5px}
.card{grid-template-columns:92px minmax(0,1fr);padding:5px 8px;grid-gap:0 10px;gap:0 10px;align-items:center}
.card canvas{grid-column:1;grid-row:1;height:26px}
.card dl{display:none}
.card-h b{font-size:14px}
.card .ty{font-size:11px;margin:0}
.launch{display:flex;flex-wrap:wrap;align-items:center;grid-gap:6px 10px;gap:6px 10px;min-width:0}
html.no-flexgap .launch>*{margin-right:10px;margin-bottom:6px}
.launch .primary{width:auto;flex:1;padding:9px 12px;font-size:15px}
.seg button{padding:7px 10px;font-size:12px}
.best{display:none}
.diff-note{order:5;flex:1 1 calc(100% - 230px);min-width:0;max-width:none;font-size:11.5px;line-height:1.4}
.launch .prefs,.launch .link-btn{order:6}
.pref{min-height:34px;padding:6px 11px;font-size:12px}
.launch .primary{white-space:nowrap}
.home{background:linear-gradient(90deg,rgba(6,9,12,.94) 0,rgba(6,9,12,.8) 42%,rgba(6,9,12,0) 64%)}
.home-grid{display:grid;grid-template-columns:minmax(330px,52%) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"brand stage" "modes stage";min-height:100%;height:100%;grid-gap:8px 14px;gap:8px 14px;padding:10px calc(var(--sa-r) + 10px) 10px calc(var(--sa-l) + 14px)}
.home .stage{min-height:0}
.modes-title{display:none}
.modes{grid-template-columns:minmax(0,1fr);grid-gap:8px;gap:8px;align-content:start;background:none;padding:0}
.mode{padding:10px 14px 11px 16px;grid-gap:3px 12px;gap:3px 12px;grid-template-areas:"title tag" "desc desc" "go foot"}
.mode-title b{font-size:24px}
.mode-title span{font-size:12px}
.mode-tag{justify-self:end;align-self:center;font-size:11px;padding:2px 8px}
.mode-art{display:none}
.mode-desc{font-size:12px;line-height:1.5}
.mode-go{justify-self:start;font-size:13px;padding:4px 12px;background:var(--lamp);color:var(--ink);letter-spacing:.16em}
.mode-foot{font-size:10.5px}
.back{margin:0 0 2px}
.sheet{padding:12px 16px;grid-gap:10px;gap:10px;margin-top:8px;margin-bottom:8px}
.sheet h2{font-size:28px}
.mp-note{font-size:12.5px;line-height:1.6}
.lb-head h2{font-size:28px}
.lb-hostnote,.lb-net{display:none}
.lb-side{padding:8px 10px;grid-gap:4px;gap:4px}
.lb-side h3{font-size:13px}
.lb-who{font-size:12px}
.lb-ships{grid-gap:4px;gap:4px}
.lb-ships .card{grid-template-columns:96px minmax(0,1fr)}
.lb-status{font-size:13px;min-height:0}
.btns{grid-gap:8px;gap:8px}
html.no-flexgap .btns>*{margin-right:8px;margin-bottom:8px}
.btns .primary,.btns .ghost{padding:8px 16px;font-size:14px}
}
@media (orientation:landscape) and (max-height:820px){
#end .sheet{width:94vw;width:min(94vw,1000px);grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-content:start;column-gap:28px}
#end .sheet>*{grid-column:1}
#end .end-kills{grid-column:2;grid-row:1 / span 5;position:relative;min-height:0;border-left:1px solid var(--rule);padding-left:20px;margin-left:-8px}
#end .kills{position:absolute;top:28px;bottom:0;left:20px;right:0;max-height:none}
#end .btns{grid-column:1 / -1}
}
@media (orientation:landscape) and (max-height:540px){
#end .sheet{padding-top:14px;padding-bottom:14px;grid-gap:10px 28px;gap:10px 28px}
#end .sheet h2{font-size:26px}
#end #endLine{font-size:13px;line-height:1.5!important}
#end .stats div{padding:6px 10px}
#end .stats dt{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:clip}
#end .stats dd{font-size:20px;margin-top:2px;white-space:nowrap}
#end .kills li{padding:6px 0}
}
@media (orientation:landscape) and (max-height:540px) and (max-width:720px){
#end .sheet{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:20px}
#end .end-kills{padding-left:14px;margin-left:-6px}
#end .kills{left:14px}
#end .stats div{padding:5px 7px}
#end .stats dd{font-size:16px}
#end .stats dd small{margin-left:2px}
}
@media (orientation:landscape) and (max-height:380px){
#end #endLine{display:none}
#end .sheet{grid-gap:8px 20px;gap:8px 20px;padding-top:10px;padding-bottom:10px}
#end .sheet h2{font-size:22px}
}
@media (orientation:portrait){
#end .sheet{display:flex;flex-direction:column;max-height:calc(100vh - var(--safe-top) - 48px);max-height:calc(100dvh - var(--safe-top) - 48px)}
#end .sheet>*{flex:none}
#end .end-kills{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#end .kills{flex:1 1 auto;min-height:72px;max-height:none}
#end .btns{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-gap:8px;gap:8px}
#end .btns button{padding-left:4px;padding-right:4px;letter-spacing:.08em;white-space:nowrap;text-align:center;justify-content:center}
}
@media (orientation:portrait) and (max-height:760px){
#end .sheet{grid-gap:12px;gap:12px;padding-top:20px;padding-bottom:20px;max-height:calc(100vh - var(--safe-top) - 24px);max-height:calc(100dvh - var(--safe-top) - 24px);margin-top:12px;margin-bottom:12px}
html.no-flexgap #end .sheet>*+*{margin-top:12px}
#end .sheet h2{font-size:30px}
#end .stats div{padding:6px 10px}
#end .stats dd{font-size:22px}
}
@media (orientation:portrait) and (max-height:620px){
#end #endLine{display:none}
#end .stats dd{font-size:19px}
#end .stats dt{font-size:11px}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:540px) and (max-width:760px){
.wpn-h{white-space:nowrap}
.wpn-h span{display:none}
.hud-bl .hp-row{display:none}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:400px){
.card .ty{display:none}
.card{padding:4px 8px}
.card canvas{height:22px}
#menu .brand .brief{line-height:1.5;margin-bottom:2px}
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{touch-action:manipulation}
html,html *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html #app input{-webkit-user-select:text;user-select:text}
@media (prefers-reduced-motion:reduce){
.banner.show,.torp-warn{animation:none}
}
#home .modes{grid-template-columns:minmax(0,1fr)}
@media (pointer:coarse) and (orientation:landscape) and (max-height:540px){.hud-tr{right:96px}.hud-br{top:56px}}