:root{--ocean-frac:75%;--ink:#f6e7c1;--ink-dim:#c9b994;--panel:#081422eb;--line:#f6e7c140;--win:#7be08a;--lose:#ff8a7a;--water:#3a9cf0}*{box-sizing:border-box}html,body{overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;height:100%;color:var(--ink);background:#061626;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{height:100%;margin:0 auto;position:relative;overflow:hidden}#game,#game canvas{display:block}#hud{pointer-events:none;position:absolute;inset:0}#hud button,#hud .tune-panel,#hud .result{pointer-events:auto}.hidden{display:none!important}.hud-ocean{height:var(--ocean-frac);position:absolute;top:0;left:0;right:0}.hud-strip{height:calc(100% - var(--ocean-frac));border-top:2px solid #0009;position:absolute;bottom:0;left:0;right:0;box-shadow:inset 0 2px #f6e7c126}.hud-top{top:max(8px, env(safe-area-inset-top));justify-content:space-between;display:flex;position:absolute;left:8px;right:8px}.hud-group{gap:6px;display:flex}.hud-btn{font:inherit;color:var(--ink);border:1px solid var(--line);background:#00000073;border-radius:8px;min-height:32px;padding:6px 10px;font-size:13px;font-weight:600}.hud-btn.on{background:var(--ink);color:#10233a}.seg{gap:0}.seg .hud-btn{border-radius:0}.seg .hud-btn:first-child{border-radius:8px 0 0 8px}.seg .hud-btn:last-child{border-radius:0 8px 8px 0}.start-btn{font:inherit;letter-spacing:.12em;color:#10233a;background:var(--ink);border:3px solid #3b2a14;border-radius:14px;padding:14px 44px;font-size:22px;font-weight:800;position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 6px #3b2a14,0 10px 24px #00000080}.start-btn:active{transform:translate(-50%)translateY(4px);box-shadow:0 2px #3b2a14}.result{background:#030a148c;justify-content:center;align-items:center;animation:.35s ease-out slide-in;display:flex;position:absolute;inset:0}@keyframes slide-in{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:none}}.result-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:min(92%,380px);padding:18px 18px 16px}.result-title{text-align:center;letter-spacing:.04em;margin:0 0 12px;font-size:34px}.result-sub{text-align:center;color:var(--ink-dim);margin:-6px 0 10px;font-size:14px}.fight-pill{letter-spacing:.04em;white-space:nowrap;border:1px solid var(--line);background:#00000073;border-radius:999px;align-self:center;padding:5px 10px;font-size:12px;font-weight:700}.result-title.win{color:var(--win)}.result-title.lose{color:var(--lose)}.stat{border-bottom:1px solid #f6e7c11a;justify-content:space-between;padding:7px 2px;font-size:15px;display:flex}.stat.key{color:#ffe08a;font-weight:700}.stat-k{color:var(--ink-dim)}.stat.key .stat-k{color:inherit}.result-buttons{background:#0a1828;gap:8px;margin-top:16px;padding:10px 0 16px;display:flex;position:sticky;bottom:-16px}.result-buttons .big-btn{padding:12px 6px;font-size:16px}.big-btn{font:inherit;border:1px solid var(--line);color:var(--ink);background:#ffffff14;border-radius:10px;flex:1;padding:12px;font-size:18px;font-weight:700}.big-btn.primary{background:var(--ink);color:#10233a}.tune-panel{background:var(--panel);z-index:5;flex-direction:column;display:flex;position:absolute;inset:0}.tune-bar{padding:8px;padding-top:max(8px, env(safe-area-inset-top));border-bottom:1px solid var(--line);align-items:center;gap:6px;display:flex}.tune-bar span{flex:1;font-size:16px;font-weight:700}.tune-body{-webkit-overflow-scrolling:touch;touch-action:pan-y;flex:1;overflow-y:auto}.tune-body .lil-gui{--width:100%;--widget-height:30px;--font-size:13px;--input-font-size:14px;--name-width:46%;--background-color:transparent;--title-background-color:#00000059;max-width:none}.tune-body .lil-gui.root>.children{overflow:visible}.strip-gauges{letter-spacing:.06em;font-size:11px;font-weight:700;position:absolute;inset:6px 8px}.strip-gauges .gauge{position:absolute}.gauge.water{top:0;left:0}.gauge.guns{top:0;right:0}.gauge{background:#00000073;border-radius:6px;align-items:center;gap:5px;padding:3px 7px;display:flex}.gauge-label{color:var(--ink-dim)}.gauge-bar{background:#0a1a2a;border-radius:4px;width:52px;height:7px;overflow:hidden}.gauge-fill{background:var(--water);width:0;height:100%}.gauge-fill.danger{background:#ff8a5a}.sink-banner{letter-spacing:.15em;color:#ffb08a;background:#00000080;border-radius:6px;padding:3px 8px;font-size:12px;font-weight:800;position:absolute;bottom:6px;right:8px}#rotate{z-index:100;text-align:center;background:#061626;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.rotate-icon{font-size:56px;animation:2.5s ease-in-out infinite spin}@keyframes spin{0%,30%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}.gauge.crew{bottom:0;left:0}.setup{pointer-events:none;position:absolute;inset:0}.setup .tile,.setup .token,.setup-tray,#hud .lee-card,.setup-bar{pointer-events:auto}.setup .tile{touch-action:none;position:absolute}.tile-face{background:#f6e7c11a;border:1.5px dashed #f6e7c173;border-radius:6px;position:absolute;inset:2px}.tile.station .tile-face{background:#f6e7c133;border-style:solid}.tile.targets .tile-face{background:#7be08a2e;border-color:#7be08acc}.tile.mine .tile-face,.tile.drop .tile-face{background:#ffe08a59;border-style:solid;border-color:#ffe08a}.tile-icon{opacity:.9;pointer-events:none;width:38%;max-width:26px;position:absolute;bottom:3px;left:4px}.tile.occupied .tile-icon{opacity:.55}.tile-label{text-align:center;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000;pointer-events:none;flex-direction:column;align-items:center;font-size:9.5px;line-height:1.15;display:flex;position:absolute;top:2px;left:2px;right:2px}.tile-label b{font-size:10.5px}.tile.occupied .tile-label{top:auto;bottom:1px}.token{touch-action:none;cursor:grab;justify-content:center;align-items:center;width:34px;height:46px;display:flex;position:relative}.tile .token{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.token img{pointer-events:none;filter:drop-shadow(0 2px 2px #0009);height:40px}.token .badge{background:var(--ink);color:#10233a;border:1.5px solid #10233a;border-radius:9px;justify-content:center;align-items:center;min-width:17px;height:17px;font-size:11px;font-weight:800;display:flex;position:absolute;top:-2px;right:-4px}.token.selected img{filter:drop-shadow(0 0 4px #ffe08a)drop-shadow(0 0 2px #ffe08a)}.token.selected .badge{background:#ffe08a}.token.dragging{opacity:.3}.drag-ghost{z-index:50;pointer-events:none;position:fixed;transform:translate(-50%,-70%)scale(1.15)}.setup-below{flex-direction:column;gap:8px;display:flex;position:absolute;left:8px;right:8px}.setup-tray{border:1px dashed var(--line);background:#00000059;border-radius:10px;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-height:56px;padding:4px 8px;display:flex}.tray-empty{color:var(--ink-dim);pointer-events:none;font-size:12px}.setup-hint{text-align:center;color:var(--ink-dim);text-shadow:0 1px 2px #000;font-size:11.5px}.setup-bar{align-items:center;gap:8px;display:flex}.setup-bar .hud-btn{min-height:44px}.setup-bar .start-btn{margin-left:auto;padding:10px 26px;font-size:19px;position:static;transform:none;box-shadow:0 4px #3b2a14,0 8px 18px #00000080}.setup-bar .start-btn:active{transform:translateY(3px);box-shadow:0 1px #3b2a14}.lee-card{touch-action:pan-y;background:var(--panel);border:1px solid var(--line);z-index:3;border-radius:12px;width:min(94%,380px);max-height:calc(100% - 64px);padding:10px 12px;font-size:13px;position:absolute;bottom:8px;left:50%;overflow-y:auto;transform:translate(-50%)}.card-head{align-items:center;gap:10px;display:flex}.card-figure{height:44px}.card-name{font-size:17px;font-weight:800}.card-flavor{color:var(--ink-dim);font-style:italic}.card-role{margin:8px 0 6px}.card-stats{grid-template-columns:1fr 1fr;gap:3px 12px;display:grid}.card-stat{grid-template-columns:70px 1fr 50px;align-items:center;gap:5px;font-size:11px;display:grid}.card-stat-k{color:var(--ink-dim)}.card-stat-v{text-align:right}.card-bar{background:#0a1a2a;border-radius:3px;height:6px;overflow:hidden}.card-fill{background:var(--ink);height:100%}.card-special{color:var(--ink-dim);margin-top:6px}.card-note{background:#7be08a1f;border:1px solid #7be08a66;border-radius:8px;align-items:center;gap:8px;margin-top:8px;padding:7px 8px;font-size:12px;display:flex}.card-buttons{justify-content:flex-end;gap:8px;margin-top:8px;display:flex}.card-buttons .hud-btn{min-width:72px;min-height:40px}.toast{color:#ffd8cc;text-align:center;z-index:4;background:#3c140aeb;border:1px solid #ff8a7a;border-radius:10px;width:min(92%,360px);padding:9px 12px;font-size:13px;animation:.25s ease-out slide-in;position:absolute;top:64px;left:50%;transform:translate(-50%)}.crew-debug{left:6px;top:max(52px, calc(env(safe-area-inset-top) + 46px));pointer-events:none;z-index:2;background:#000a14b8;border:1px solid #40e0ff66;border-radius:8px;width:min(70%,330px);max-height:60%;font:10px/1.25 ui-monospace,Menlo,monospace;position:absolute;overflow:hidden}#hud .crew-debug-head{pointer-events:auto;text-align:left;width:100%;font:inherit;color:#40e0ff;background:#40e0ff1f;border:0;padding:5px 7px;font-weight:700;display:block}.crew-debug-body{padding:4px 7px 6px}.cd-lee{margin-bottom:4px}.cd-lee.lost{opacity:.45}.cd-line{color:#fff;font-weight:700}.cd-why{color:#ffe08a}.cd-opts,.cd-need{color:#9fc4d8}.cd-needs{border-top:1px solid #40e0ff4d;margin-top:4px;padding-top:3px}.result-card{touch-action:pan-y;max-height:calc(100% - 24px);overflow-y:auto}.crew-result{margin-top:12px}.crew-result-title{margin-bottom:4px;font-size:15px;font-weight:800}.time-legend{color:var(--ink-dim);flex-wrap:wrap;gap:2px 8px;margin-bottom:6px;font-size:10px;display:flex}.legend-item{align-items:center;gap:3px;display:inline-flex}.sw{border-radius:2px;width:9px;height:9px;display:inline-block}.crew-row{border-bottom:1px solid #f6e7c11a;padding:5px 0}.crew-row.lost{opacity:.75}.crew-row-head{align-items:baseline;gap:6px;font-size:13px;display:flex}.crew-row-home{color:var(--ink-dim);flex:1;font-size:11px}.crew-row-status{font-size:11px;font-weight:700}.crew-row-status.ok{color:var(--win)}.crew-row-status.lost{color:var(--lose)}.time-bar{background:#0a1a2a;border-radius:4px;height:8px;margin:4px 0 3px;display:flex;overflow:hidden}.time-bar i{height:100%;display:block}.crew-row-sub{color:var(--ink-dim);font-size:11px}.act-gun{background:#ffd27a}.act-row{background:#7be08a}.act-sail{background:#7dd6ff}.act-lookout{background:#d59bff}.act-repair{background:#ff9b5a}.act-bail{background:#3a9cf0}.act-board{background:#ff5a5a}.act-repel{background:#ffa0d0}.act-melee{background:#c81e1e}.act-swing{background:#e8d6a8}.act-walk{background:#f6f6f6}.act-idle{background:#666}.gauge.move{bottom:0;right:0}.sink-banner{left:50%;right:auto;transform:translate(-50%)}.boat-stats{left:8px;right:8px;top:max(52px, calc(env(safe-area-inset-top) + 46px));border:1px solid var(--line);z-index:2;background:#000a14c7;border-radius:10px;max-width:380px;margin:0 auto;padding:6px 10px 7px;font-size:12px;position:absolute}.boat-stats-title{letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:3px;font-size:10px;font-weight:800}.bs-row{grid-template-columns:74px 1fr auto;align-items:center;gap:7px;padding:2px 0;display:grid}.bs-name{font-weight:700}.bs-value{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.bs-row.up .bs-value{color:var(--win)}.bs-row.down .bs-value{color:var(--lose)}.bs-bar{background:#0a1a2a;border-radius:4px;height:8px;position:relative;overflow:hidden}.bs-fill,.bs-delta{position:absolute;top:0;bottom:0;left:0}.bs-fill{background:var(--ink);border-radius:4px}.bs-k-gun .bs-fill{background:#ffd27a}.bs-k-row .bs-fill{background:#7be08a}.bs-k-sail .bs-fill{background:#7dd6ff}.bs-k-lookout .bs-fill{background:#d59bff}.bs-k-repair .bs-fill{background:#ff9b5a}.bs-delta.up{background:repeating-linear-gradient(45deg,#7be08a 0 4px,#3e8a4a 4px 8px)}.bs-delta.down{background:repeating-linear-gradient(45deg,#ff8a7a 0 4px,#8a3a30 4px 8px)}.tile-label .fx{font-size:10px;font-weight:800}.tile-label .fx.good{color:#9dff9d}.tile-label .fx.bad{color:#ffa090}.card-help{color:#d8e8f0;margin:0 0 8px;font-size:12px}.setup-mode .lee-card{max-height:calc(100% - 200px)}.tile-label.quiet{opacity:.45}.disengage-layer{pointer-events:none;position:absolute;inset:0}.disengage-btn{color:#1a120a;letter-spacing:.02em;white-space:pre-line;pointer-events:auto;background:#f2c14e;border:2px solid #1a120a;border-radius:12px;width:150px;min-height:52px;padding:6px 12px;font:800 13px/1.15 system-ui,sans-serif;position:absolute;box-shadow:0 3px #00000073}.disengage-btn:active{transform:translateY(2px);box-shadow:0 1px #00000073}.disengage-btn.breaking{color:#f6e7c1;background:#8a8580}