:root{--bg: #1a2733;--panel: #243443;--panel-2: #2c3f50;--ink: #e8eef3;--muted: #9fb2c2;--accent: #e8533a;--ok: #6fcf6f;--line: #3a4f63}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#app{max-width:520px;margin:0 auto;padding:16px}header h1{margin:0;font-size:1.5rem}header h1:first-letter{color:var(--accent)}h2{font-size:1.05rem;margin:1.5rem 0 .5rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.muted{color:var(--muted);margin:.25rem 0}fieldset{border:1px solid var(--line);border-radius:10px;background:var(--panel);margin:0 0 12px;padding:12px}legend{padding:0 6px;color:var(--accent);font-weight:600}label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--muted);margin-bottom:10px}label.check{flex-direction:row;align-items:center;gap:8px}label.check input{width:auto}.setup{display:flex;flex-wrap:wrap;gap:12px}.setup>label{flex:1 1 120px;min-width:0}.setup>label:first-child{flex-basis:100%}.setup>label:first-child select{width:auto;min-width:100%}.rules ul{margin:0;padding-left:1.2rem;color:var(--muted);font-size:.85rem}fieldset.plane.blue{border-left:3px solid #4a90d9}fieldset.plane.blue legend{color:#4a90d9}fieldset.plane.red{border-left:3px solid var(--accent)}fieldset.plane.red legend{color:var(--accent)}fieldset.plane.target{border-left:3px solid var(--ok)}.play-controls{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:8px 12px;margin-bottom:8px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;z-index:30;max-height:70vh;overflow-y:auto}.play-controls>.walk{margin:0}.victory-line{margin:0;font-size:1rem;font-weight:700}.victory-line .status-label{color:var(--muted);font-weight:600;text-transform:uppercase;font-size:.8rem;letter-spacing:.04em}.setup-controls{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.setup-controls .spectator-controls{flex-direction:row;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:0;margin-left:auto}.victory .result{margin:0;font-size:1.1rem;font-weight:700}.victory .result.us-decisive,.victory .result.us-victory{color:#4a90d9}.victory .result.japan-decisive,.victory .result.japan-victory{color:var(--accent)}.victory .result.tie,.victory .result.ongoing{color:var(--muted)}.row{display:flex;gap:12px}.row>label{flex:1}select,input{font-size:1rem;padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);width:100%}.order-card{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:12px 14px;margin-bottom:10px}.order-card h3{margin:0 0 6px;font-size:1rem}.order-card .move{margin:0 0 4px}.order-card .maneuver{margin:0 0 4px;color:var(--accent);font-size:.9rem}.order-card .fire{margin:0;color:var(--ok);font-weight:600}.order-card .gunner{margin:4px 0 0;color:var(--ok);font-size:.85rem}.order-card .ground-attack{margin:4px 0 0;color:var(--accent);font-size:.9rem;font-weight:600}.order-card .tail{margin:4px 0 0;color:var(--muted);font-size:.85rem;font-style:italic}.map-view{position:relative}.phase-banner{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;padding:.4rem .6rem;margin-bottom:.4rem;border-radius:6px;font-size:.9rem}.phase-banner .phase-tag{font-weight:700;letter-spacing:.02em}.phase-banner .phase-detail{opacity:.85}.phase-banner.setup{background:#4a90d929;border:1px solid rgba(74,144,217,.5)}.phase-banner.setup .phase-tag{color:#6db0f0}.phase-banner.live{background:#f1c44024;border:1px solid rgba(241,196,64,.55)}.phase-banner.live .phase-tag{color:#f1c40f}.map.dim-inactive .tokens .token:not(.active){opacity:.8}.map .plane-bubble{display:none;pointer-events:none}.map .token.active .plane-bubble,.map .token:hover .plane-bubble,.map .token.selected .plane-bubble{display:block}.map .plane-bubble .bubble-box,.map .plane-bubble .bubble-tail{fill:#12141aeb;stroke:var(--accent);stroke-width:1}.map .plane-bubble .bubble-title{fill:#fff;font-weight:700}.map .plane-bubble .bubble-line{fill:#ffffffd1}.status-main{flex:1 1 0;min-width:0}.status-main .victory-line{display:inline}.status-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}.status-row .victory-line{margin:0}.target-roster{margin:.4rem 0 .2rem;font-size:.85rem}.target-roster>.roster-heading{cursor:pointer;color:var(--muted);font-weight:600;letter-spacing:.02em}.target-roster .roster-list{list-style:none;margin:.3rem 0 0;padding:0;display:flex;flex-direction:column;gap:.15rem}.roster-target{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.1rem .45rem;border-left:3px solid var(--line);background:var(--panel-2);border-radius:3px}.roster-target.side-blue{border-left-color:#4a90d9}.roster-target.side-red{border-left-color:#c0392b}.roster-name{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.roster-stage{flex:none;font-size:.75rem;font-weight:600;padding:.02rem .4rem;border-radius:999px;text-transform:uppercase;letter-spacing:.03em}.roster-stage.stage-undamaged{color:var(--muted)}.roster-stage.stage-damaged{color:#12100a;background:#e0a12f}.roster-stage.stage-critical{color:#12100a;background:#e0762f}.roster-stage.stage-destroyed{color:#fff;background:#8b2b1f}.roster-target.stage-destroyed .roster-name{color:var(--muted);text-decoration:line-through}.spectator-controls{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;margin-bottom:.6rem}.spectator-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.spectator-controls button.watching{background:var(--accent);color:#12100a}.spectator-controls .spectator-group-label{font-size:.8em;font-weight:600;letter-spacing:.02em;color:var(--muted, #9a9488);text-transform:uppercase}.spectator-controls .spectator-step-label{font-size:.85em}.spectator-controls .spectator-speed-label{display:inline-flex;flex-direction:row;align-items:center;gap:.35rem;margin-bottom:0;white-space:nowrap;font-size:.85em}.spectator-controls .spectator-speed{width:auto;flex:0 0 auto;max-width:9rem;font-size:13.3333px;padding:6px 12px;line-height:normal}.status-side{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}.restart-controls{display:flex;justify-content:flex-end}.restart-controls button.restart-game{background:transparent;color:var(--muted, #9a9488);border:1px solid var(--line);padding:5px 12px;font-size:.85em}.restart-controls button.restart-game:hover{color:#b23a3a;border-color:#b23a3a}.restart-controls .restart-note{margin:0;font-size:.8em;text-align:right;max-width:12rem}.map{display:block;width:100%;min-height:60vh;max-height:80vh;background:#2d4a3e;border:1px solid var(--line);border-radius:6px;touch-action:none;cursor:grab}.map:active{cursor:grabbing}.map-reset{position:absolute;top:8px;right:8px;padding:4px 10px;font-size:.8rem;color:#fff;background:#141414b8;border:1px solid var(--line);border-radius:4px;cursor:pointer}.map-reset:hover{background:#141414e6}.compass{position:absolute;right:8px;top:52px;background:#1414148c;border-radius:50%;pointer-events:none}.compass-ring{fill:none;stroke:#ffffff73;stroke-width:1}.compass-needle{stroke:#ffffff8c;stroke-width:1.5}.compass-needle.cardinal{stroke:var(--accent);stroke-width:2}.compass-label{fill:#ffffffb3;font-size:8px;font-weight:600}.compass-label.cardinal{fill:var(--accent)}.map .hex{fill:transparent;stroke:#ffffff2e;stroke-width:1;cursor:pointer;pointer-events:all}.map .hex:hover{fill:#f1c4402e}.map .hex-label{fill:#ffffff73;pointer-events:none;-webkit-user-select:none;user-select:none}.map .token{pointer-events:none}.map .token.active circle{filter:drop-shadow(0 0 4px #f1c40f)}.map .token.draggable{pointer-events:auto;cursor:grab}.map .token.draggable:active{cursor:grabbing}.map .token.selected circle{filter:drop-shadow(0 0 4px #f1c40f)}.map .rotate-affordance{pointer-events:auto;cursor:pointer}.map .rotate-affordance:hover circle:not(.hit),.map .rotate-affordance:focus-visible circle:not(.hit){fill:#f1c40f}.map .rotate-affordance:hover text,.map .rotate-affordance:focus-visible text{fill:#1a1a1a}.map-backdrop,.map .token .damage-ring{pointer-events:none}.map .token .destroyed-mark{pointer-events:none;font-weight:700}.map .escaped-layer .escaped{pointer-events:none}.escaped-note{margin:.25rem 0 0;font-size:.85rem}.map .overlays .cell{stroke:none;pointer-events:none}.map .setup-zone.blue .cell{fill:#4a90d92e}.map .setup-zone.red .cell{fill:#e8533a2e}.map .exit-edge .cell{fill:#6fcf6f47}.map .exit-edge-active .cell{fill:#6fcf6f57;stroke:#3ad06a;stroke-width:2.5;stroke-dasharray:5 4;stroke-linejoin:round}.map .start-edge .cell{stroke-width:2.5;stroke-linejoin:round}.map .start-edge.blue .cell{fill:#4a90d94d;stroke:#4a90d9}.map .start-edge.red .cell{fill:#e8533a4d;stroke:var(--accent)}.map .legal-move .cell{fill:#6feb6f38;stroke:#1ea01ee6;stroke-width:1.5}.map .facing-arrow.reach-arrow{stroke:#fffffff2;stroke-width:1.2;paint-order:stroke}.map .facing-arrow.reach-arrow-1{fill:#282c34}.map .facing-arrow.reach-arrow-2{fill:#5dade2}.map .facing-arrow.reach-arrow-3{fill:#e69138}.map .facing-arrow.reach-arrow-4{fill:#82c878}.map .facing-arrow.reach-arrow-5{fill:#5abebe}.map .facing-arrow.reach-arrow-6{fill:#dc6e46}.map .facing-arrow.reach-arrow-7plus{fill:#aa82c8}.map .facing-arrow.reach-waypoint{opacity:.7}.map .facing-arrow.reach-waypoint-run{fill:#464e5c}.map .facing-arrow.reach-waypoint-turn{fill:#f0c846}.map .facing-arrow.reach-waypoint-maneuver{fill:#be78dc}.reach-legend{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.25rem 0;font-size:.85em}.reach-key{display:inline-flex;align-items:center;gap:.25rem}.reach-swatch{display:inline-block;width:.9em;height:.9em;border-radius:2px;border:1px solid rgba(0,0,0,.3)}.reach-swatch.reach-1{background:#464a52}.reach-swatch.reach-2{background:#5dade2}.reach-swatch.reach-3{background:#e69138}.reach-swatch.reach-4{background:#82c878}.reach-swatch.reach-5{background:#5abebe}.reach-swatch.reach-6{background:#dc6e46}.reach-swatch.reach-7plus{background:#aa82c8}.reach-swatch.reach-waypoint-run{background:#464e5c}.reach-swatch.reach-waypoint-turn{background:#f0c846}.reach-swatch.reach-waypoint-maneuver{background:#be78dc}.map .facing-arrow{pointer-events:none}.map .maneuver-success-arrow{fill:#50dc6ef2;stroke:#00280a80;stroke-width:.4}.map .maneuver-failure-arrow{fill:#e8533af2;stroke:#320a0080;stroke-width:.4}.map .move-path .cell{fill:#e8533a47}.map .barrage-hex .cell{fill:#ffaa0059;stroke:#ff8c00e6;stroke-width:1.2;stroke-dasharray:4 3}.map .maneuver-hex .cell{fill:#f0e68c4d;stroke:#f0e68cb3;stroke-width:1}.map .maneuver-success .cell{fill:#50dc6e73;stroke:#50dc6ecc;stroke-width:1}.map .maneuver-failure .cell{fill:#e8533a73;stroke:#e8533acc;stroke-width:1}.map .arc-short .cell{fill:#50dc6e52;stroke:#50dc6e8c;stroke-width:.75}.map .arc-medium .cell{fill:#f39c124d;stroke:#f39c1280;stroke-width:.75}.map .arc-long .cell{fill:#3498db4d;stroke:#3498db80;stroke-width:.75}.map .targets .target{pointer-events:none}.map .targets .target.draggable{pointer-events:auto;cursor:grab}.map .targets .target-damage-cue{pointer-events:none;paint-order:stroke;filter:drop-shadow(0 0 2px rgba(0,0,0,.9)) drop-shadow(0 1px 1px rgba(0,0,0,.7))}.topnav{display:flex;gap:8px;margin-top:8px}.topnav button{padding:6px 14px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink);cursor:pointer}.topnav button.nav-active{border-color:var(--accent);color:var(--accent)}.lang-picker{position:relative;margin-left:auto}.lang-trigger{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink);cursor:pointer;font:inherit}.lang-trigger:hover{border-color:var(--accent)}.lang-caret{color:var(--muted);font-size:.8em}.lang-flag{display:inline-flex;width:22px;height:15px;flex:none;border:1px solid var(--line);border-radius:2px;overflow:hidden}.lang-flag svg{display:block;width:100%;height:100%}.lang-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:20;margin:0;padding:4px;list-style:none;min-width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 18px #0006}.lang-option{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:4px;white-space:nowrap;cursor:pointer}.lang-option:hover,.lang-option:focus-visible{background:var(--panel);outline:none}.lang-option[aria-selected=true]{color:var(--accent)}.sound-control{display:flex;align-items:center;gap:6px}.sound-field .sound-slider{flex:1 1 auto}.sound-toggle{padding:6px 8px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink);cursor:pointer;font:inherit;line-height:1}.sound-toggle:hover{border-color:var(--accent)}.sound-slider{width:80px;accent-color:var(--accent);cursor:pointer}.cards-screen button,.cards-screen .cf-actions button{padding:6px 12px;border:1px solid var(--line);border-radius:4px;background:var(--panel-2);color:var(--ink);cursor:pointer}.cards-screen button:hover:not([disabled]){border-color:var(--accent)}.cards-screen button[disabled]{opacity:.5;cursor:not-allowed}.cf-rows{list-style:none;padding:0;margin:0 0 12px}.cf-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:4px;margin-bottom:6px;background:var(--panel)}.cf-row-name{flex:1}.cf-row-name code,.cf-row code{color:var(--muted);font-size:.85em}.cf-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin:10px 0}.cf-header-fields{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}.cf-field{display:flex;flex-direction:column;gap:2px}.cf-field span{color:var(--muted);font-size:.85em}.cf-columns-head,.cf-header-fields+h3{display:flex;align-items:center;gap:12px}.cf-grid{border-collapse:collapse;margin:8px 0 16px}.cf-grid th,.cf-grid td{border:1px solid var(--line);padding:4px 6px;text-align:left}.cf-grid th{color:var(--muted);font-weight:600;font-size:.85em}.cf-grid input{width:7em}.cf-gunner{display:flex;gap:8px;margin-bottom:6px}.cf-ga{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:12px}.cf-errors{color:var(--accent);margin:4px 0 12px;padding-left:18px}.cf-ok{color:var(--ok)}.cf-editor{border-top:2px solid var(--line);margin-top:16px;padding-top:12px}.scen-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:8px}.scen-row .cf-field select,.scen-row .cf-field input{min-width:8em}.scen-lineup-row .cf-field:nth-child(1) select{min-width:240px}.scen-lineup-row .cf-field:nth-child(2) select{min-width:4.5em}.scen-target-row .cf-field input[type=text]{min-width:9em}.scen-target-row .cf-num input{min-width:5em;width:5em}.scen-row button.active{border-color:var(--accent);color:var(--accent);font-weight:700}.scen-editor-map .map{max-height:74vh}.scen-editor-map h3{margin-top:0}.walk button{padding:6px 12px;border:1px solid var(--line);border-radius:4px;background:var(--panel-2);color:var(--ink);cursor:pointer}.walk button:hover{border-color:var(--accent)}.combat{margin:8px 0}.fire-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}.fire-decl{flex:1 1 auto;min-width:140px}.fire-actions{display:flex;gap:6px}.fire-hit{color:var(--accent);font-weight:600}.fire-miss{color:var(--muted)}.combat-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.init-rolls{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:end;margin-bottom:8px}.init-row{display:flex;align-items:end;gap:8px;margin-bottom:0}.init-row label{margin-bottom:0}.preview-token{opacity:.6}.preview-token .rotate-affordance{opacity:1}.maneuver-outcomes{display:flex;flex-direction:column;gap:2px;margin:6px 0;font-size:.9em}.maneuver-success-text{color:#6fcf6f}.maneuver-failure-text{color:#e8533a}.speed-row{display:flex;align-items:center;gap:8px;margin:6px 0 10px}.speed-row button.active{border-color:var(--accent);color:var(--accent);font-weight:600}.manual-toggle{display:inline-flex;align-items:center;gap:6px;margin:10px 0 6px;cursor:pointer}.tohit-breakdown{margin:2px 0 8px;font-size:.85em;color:var(--muted)}.maneuver-panel{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}.maneuver-panel h3{margin:0 0 6px;font-size:.95rem;color:var(--muted)}.walk .maneuver-panel button{padding:6px 12px;border:1px solid var(--line);border-radius:4px;background:var(--panel-2);color:var(--ink);cursor:pointer}@media (min-width: 1024px){#app{max-width:none;display:grid;grid-template-columns:340px 1fr;column-gap:24px;align-items:start;padding-right:56px}#app>header{grid-column:1;grid-row:1}#app>.setup,#app>.optional-rules,#app>.clouds,#app>.weather,#app>.rules,#app>.entry{grid-column:1}#app>div{grid-column:2;grid-row:1 / span 9;align-self:stretch}#app>div>div{height:100%}#app>div .map{max-height:88vh}#app>.setup{margin-top:0}#app>.cards-screen{grid-column:1 / -1}.scen-editor{display:grid;grid-template-columns:minmax(420px,640px) 1fr;column-gap:24px;align-items:start}.scen-editor-map{position:sticky;top:12px}}