:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--sea:#0f2430;--panel:#09141bdb;--panel-line:#2c4654;--ink:#e4e8e3;--ink-dim:#93a3a8;--brass:#d6a84a;--brass-dim:#8a6c33;--ally:#8fc6d9;--enemy:#e0614a;--good:#7fc28a;--warn:#e3b545;--display:"Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;--body:"Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;--mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace}html,body{height:100%}body{background:var(--sea);color:var(--ink);font-family:var(--body);overflow:hidden}#game{-webkit-user-select:none;user-select:none;touch-action:none;position:fixed;inset:0}#c{cursor:crosshair;width:100%;height:100%;display:block}.hud{pointer-events:none;font-variant-numeric:tabular-nums;position:absolute}.card{background:var(--panel);border:1px solid var(--panel-line);border-radius:4px;padding:10px 12px}.label{letter-spacing:.14em;color:var(--ink-dim);font-size:10px}.mono{font-family:var(--mono)}#mission{top:calc(env(safe-area-inset-top,0px) + 12px);left:calc(env(safe-area-inset-left,0px) + 12px);gap:6px;min-width:170px;display:grid}#mission .wave{font-family:var(--display);color:var(--brass);font-size:18px}#mission .row{justify-content:space-between;gap:16px;font-size:13px;display:flex}#radarWrap{top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px);padding:6px}#radar{width:150px;height:150px;display:block}#status{bottom:calc(env(safe-area-inset-bottom,0px) + 12px);left:calc(env(safe-area-inset-left,0px) + 12px);gap:8px;width:250px;display:grid}.shipname{font-family:var(--display);font-size:15px}.bar{background:#1d2f38;border-radius:2px;height:8px;overflow:hidden}.bar>i{background:var(--good);height:100%;transition:width .15s linear;display:block}#telegraph{grid-template-columns:repeat(8,1fr);gap:2px;display:grid}#telegraph span{text-align:center;color:var(--ink-dim);background:#13232b;border-radius:2px;padding:3px 0;font-size:10px}#telegraph span.on{background:var(--brass);color:#1a1408;font-weight:700}#telegraph span.rev.on{background:var(--enemy);color:#fff}#weapons{bottom:calc(env(safe-area-inset-bottom,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px);gap:8px;width:240px;display:grid}.weap{grid-template-columns:56px 1fr auto;align-items:center;gap:8px;font-size:12px;display:grid}.weap .bar>i{background:var(--brass)}.weap .bar.ready>i{background:var(--good)}.weap .k{font-family:var(--mono);color:var(--ink-dim);text-align:right;white-space:nowrap;font-size:11px}#log{top:calc(env(safe-area-inset-top,0px) + 14px);justify-items:center;gap:4px;width:min(460px,60vw);display:grid;left:50%;transform:translate(-50%)}#log div{border-left:3px solid var(--brass);background:#09141bc7;padding:5px 12px;font-size:13px;animation:.25s ease-out logIn}#log div.bad{border-left-color:var(--enemy)}#log div.big{font-family:var(--display);border-left-color:var(--enemy);color:#ffd9cf;font-size:20px}@keyframes logIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}#touch{pointer-events:none;display:none;position:absolute;inset:auto 0 0}.touch-on #touch{display:block}.tbtn{pointer-events:auto;border:1px solid var(--panel-line);width:56px;height:56px;color:var(--ink);font-family:var(--body);touch-action:none;background:#09141bb8;border-radius:50%;place-items:center;font-size:13px;font-weight:700;display:grid;position:absolute}.tbtn:active,.tbtn.held{background:var(--brass);color:#1a1408}#overlay{padding-block:calc(env(safe-area-inset-top,0px) + 16px) calc(env(safe-area-inset-bottom,0px) + 16px);padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));background:#060e138c;place-items:center;display:grid;position:absolute;inset:0;overflow-y:auto}#overlay[hidden]{display:none!important}.sheet{background:var(--panel);border:1px solid var(--panel-line);border-radius:6px;gap:18px;width:min(720px,100%);padding:24px;display:grid}.sheet h1{font-family:var(--display);letter-spacing:.12em;color:var(--ink);text-wrap:balance;margin:0;font-size:clamp(32px,6vw,48px);font-weight:800}.sheet .order{color:var(--ink-dim);max-width:60ch;margin:0;font-size:14px;line-height:1.8}.sheet .order b{color:var(--brass);font-weight:700}.designs{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.design{text-align:left;border:1px solid var(--panel-line);color:var(--ink);font-family:var(--body);cursor:pointer;background:#0d1b22;border-radius:4px;gap:6px;min-width:0;padding:12px;display:grid}.design:focus-visible,.go:focus-visible{outline:2px solid var(--brass);outline-offset:2px}.design[aria-pressed=true]{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass)}.design .n{font-family:var(--display);font-size:16px}.design .t{color:var(--ink-dim);letter-spacing:.08em;font-size:11px}.design dl{grid-template-columns:auto 1fr;gap:2px 8px;margin:4px 0 0;font-size:12px;display:grid}.design dt{color:var(--ink-dim)}.design dd{font-family:var(--mono);margin:0}.keys{color:var(--ink-dim);grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px;font-size:13px;display:grid}.keys kbd{font-family:var(--mono);color:var(--ink);border:1px solid var(--panel-line);background:#1b2c35;border-radius:3px;margin-right:6px;padding:1px 5px;font-size:11px}.go{background:var(--brass);color:#1a1408;font-family:var(--display);letter-spacing:.2em;cursor:pointer;border:0;border-radius:4px;justify-self:start;padding:12px 28px;font-size:18px;font-weight:800}.result-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.result-grid div{border:1px solid var(--panel-line);background:#0d1b22;border-radius:4px;gap:4px;padding:10px 12px;display:grid}.result-grid strong{font-family:var(--mono);font-size:22px}.rank{font-family:var(--display);color:var(--brass);font-size:56px;line-height:1}#fx{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}#alarm{top:calc(env(safe-area-inset-top,0px) + 170px);border:1px solid var(--enemy);color:#fff;font-family:var(--display);letter-spacing:.08em;white-space:nowrap;background:#76180ee6;border-radius:3px;padding:6px 18px;font-size:20px;left:50%;transform:translate(-50%)}#alarm.blink{animation:.6s steps(2,jump-none) infinite blink}@keyframes blink{50%{background:#e0614af2}}.tools{gap:6px;margin-top:2px;display:flex}.iconbtn{pointer-events:auto;border:1px solid var(--panel-line);color:var(--ink-dim);font-family:var(--body);cursor:pointer;background:#13232b;border-radius:3px;padding:3px 8px;font-size:11px}.iconbtn:focus-visible{outline:2px solid var(--brass);outline-offset:1px}.tips{color:var(--ink-dim);gap:2px;margin:0;padding-left:1.2em;font-size:13px;line-height:1.75;display:grid}.tips b{color:var(--ink);font-weight:700}@media (width<=640px){#status{gap:5px;width:176px;padding:8px}#status .shipname{display:none}#telegraph span{padding:2px 0;font-size:9px}#weapons{display:none}#radar{width:104px;height:104px}#mission{min-width:0;padding:8px}#log{width:70vw;top:calc(env(safe-area-inset-top,0px) + 150px)}#alarm{top:calc(env(safe-area-inset-top,0px) + 250px);font-size:17px}.designs,.keys{grid-template-columns:1fr}.sheet{padding:18px}}.touch-on #status{bottom:calc(env(safe-area-inset-bottom,0px) + 150px)}.touch-on #weapons{display:none}@media (prefers-reduced-motion:reduce){#log div,#alarm.blink{animation:none}}