:root{--bg:#0b1420;--panel:#131d2a;--panel-2:#1a2634;--border:#253444;--text:#e7ebf0;--muted:#8fa0b3;--accent:#f2c14e;--us:#5aa9ff;--ijn:#ff5c5c;--land:#b9a986;--land-stroke:#7d6f4d;--grid:#ffffff1c;--grid-land:#3c2d1459;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Noto Sans CJK SC,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-size:14px;overflow:hidden}.app{grid-template-rows:48px 1fr 96px;min-width:1024px;height:100vh;display:grid}.topbar{background:var(--panel);border-bottom:1px solid var(--border);align-items:center;gap:24px;padding:0 16px;display:flex}.brand{flex-direction:column;line-height:1.1;display:flex}.brand-title{letter-spacing:1px;font-weight:700}.brand-sub{color:var(--muted);font-size:11px}.clock{font-variant-numeric:tabular-nums;align-items:baseline;gap:10px;display:flex}.clock .date{color:var(--muted)}.clock .time{font-size:20px;font-weight:700}.clock .suntimes{color:var(--muted);font-size:12px}.score{color:var(--muted);margin-left:auto}.score b{color:var(--accent);margin-left:4px;font-size:16px}.actions{gap:8px;display:flex}.btn{border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer;border-radius:6px;padding:6px 12px;font-size:13px}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:#2a4a72;border-color:#3b68a3}.btn.ghost{background:0 0}.main{grid-template-columns:1fr 320px;min-height:0;display:grid}.map-container{background:#0b1f30;position:relative;overflow:hidden}.hexmap{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.hexmap:active{cursor:grabbing}.coast path{fill:var(--land);stroke:var(--land-stroke);stroke-width:1.2px;stroke-linejoin:round}.grid .hex{stroke-width:.8px}.grid .hex.sea{fill:#0000;stroke:var(--grid)}.grid .hex.land{fill:#503c1e2e;stroke:var(--grid-land)}.overlay .hover{fill:#ffffff1a;stroke:#fff9;stroke-width:1.5px;pointer-events:none}.overlay .selected{fill:#f2c14e1f;stroke:var(--accent);stroke-width:2px;pointer-events:none}.labels text{fill:#e9e3d2;paint-order:stroke;stroke:#0a141ed9;stroke-width:3px;stroke-linejoin:round;pointer-events:none;font-size:11px}.labels text.en{fill:#c9c2ae;letter-spacing:.3px;font-size:8.5px}.labels circle{fill:#ffd479;stroke:#5b4a1a;stroke-width:1px}.labels .base circle{fill:#ff9c9c}.labels .sea text{fill:#bed7eb59;letter-spacing:6px;stroke:none;font-size:18px;font-weight:300}.labels .offmap text{fill:#dce1e68c;stroke:none;font-size:10px}.labels .island text,.labels .passage text{fill:#d8d1bc}.labels .passage text{font-style:italic}.hex-tooltip{pointer-events:none;border:1px solid var(--border);color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums;background:#0c141ee6;border-radius:4px;padding:4px 8px;font-size:12px;position:absolute}.side{border-left:1px solid var(--border);background:var(--panel);flex-direction:column;gap:12px;padding:12px;display:flex;overflow-y:auto}.panel{background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:12px}.panel h2{letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin:0 0 8px;font-size:13px;font-weight:600}.panel p{margin:0}.muted{color:var(--muted)}.log{border-top:1px solid var(--border);background:var(--panel);padding:8px 16px;font-size:13px;overflow-y:auto}.log-line{gap:12px;padding:2px 0;display:flex}.log-line .t{color:var(--muted);font-variant-numeric:tabular-nums;min-width:48px}.clouds path{fill:#ffffff4d;stroke:#ffffff1f;stroke-width:6px;stroke-linejoin:round;filter:blur(3px);pointer-events:none}.daynight{pointer-events:none;fill:#03101f;fill-opacity:0;transition:fill-opacity .6s}.daynight.twilight{fill-opacity:.32}.daynight.night{fill-opacity:.6}.tf{cursor:pointer}.tf .body{stroke:#fff;stroke-width:1.6px}.tf.us .body{fill:var(--us)}.tf.ijn .body{fill:var(--ijn)}.tf .deck{fill:#ffffffd9}.tf .ring{fill:none;stroke:var(--accent);stroke-width:2px;stroke-dasharray:4 3}.tf .label{fill:#fff;text-anchor:middle;paint-order:stroke;stroke:#000c;stroke-width:3px;pointer-events:none;font-size:10px}.orders .order-path{fill:none;stroke-width:2px;stroke-linecap:round}.orders .order-path.pending{stroke:var(--accent);stroke-dasharray:6 5}.orders .order-path.standing{stroke:#5aa9ffcc;stroke-dasharray:2 5}.orders .order-dest{fill:none;stroke:var(--accent);stroke-width:2px}.hexmap.mode-move{cursor:crosshair}.toggle{color:var(--muted);align-items:center;gap:4px;margin-right:8px;font-size:12px;display:flex}.btn.active{border-color:var(--accent);color:var(--accent)}.error-bar{color:#ffd6d6;background:#4a1f24;border:1px solid #a33;border-radius:6px;padding:8px 10px;font-size:13px}.tf-list{flex-direction:column;gap:4px;display:flex}.tf-item{text-align:left;color:var(--text);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;align-items:center;gap:6px;padding:6px 8px;font-size:13px;display:flex}.tf-item:hover{background:#ffffff0d}.tf-item.active{border-color:var(--accent);background:#f2c14e14}.dot{border-radius:50%;width:9px;height:9px;display:inline-block}.dot.us{background:var(--us)}.dot.ijn{background:var(--ijn)}.tf-detail h2 .en{text-transform:none;letter-spacing:0;opacity:.7;margin-left:6px;font-weight:400}.action-bar{flex-wrap:wrap;gap:6px;margin:8px 0 10px;display:flex}.ship-list{flex-direction:column;gap:8px;display:flex}.ship{border-top:1px solid var(--border);padding-top:8px}.ship.sunk{opacity:.4;text-decoration:line-through}.ship-head{flex-wrap:wrap;align-items:baseline;gap:6px;display:flex}.ship-type{color:var(--accent);letter-spacing:1px;font-size:10px;font-weight:700}.ship-name{font-weight:600}.ship-en{color:var(--muted);font-size:11px}.tag{border:1px solid var(--border);color:#9fd0ff;border-radius:3px;margin-left:auto;padding:0 4px;font-size:10px}.tag.muted{color:var(--muted);margin-left:0}.hull{background:#ffffff14;border-radius:3px;height:6px;margin:6px 0;overflow:hidden}.hull-fill{background:#4cc38a;height:100%;transition:width .3s}.hull.light .hull-fill{background:#e0b84c}.hull.heavy .hull-fill{background:#e87d3e}.hull.critical .hull-fill{background:#e04b4b}.deck-list{flex-direction:column;gap:3px;margin-top:4px;display:flex}.sq{background:#ffffff0a;border-left:3px solid #0000;border-radius:4px;grid-template-columns:16px 1fr 28px 56px;align-items:center;gap:6px;padding:3px 6px;font-size:12px;display:grid}.sq-icon{color:var(--muted)}.sq.role-F .sq-icon{color:#9fd0ff}.sq.role-DB .sq-icon{color:#f2c14e}.sq.role-TB .sq-icon{color:#ff9c9c}.sq-count{text-align:right;font-variant-numeric:tabular-nums}.sq-state{text-align:right;color:var(--muted)}.sq.ready{border-left-color:#4cc38a}.sq.rearming{border-left-color:#8a8f98}.sq.cap{border-left-color:#5aa9ff}.sq.search{border-left-color:#f2c14e}.sq.strike{border-left-color:#ff5c5c}.sq.returning{border-left-color:#c58cff}.sq.lost{opacity:.4}.log-line.system{color:var(--accent)}.log-line.alert{color:#ff9c9c}.log-line.combat{color:#ffb4a2}.log-line.air{color:#9fd0ff}.sector-picker .sector path{fill:#f2c14e0f;stroke:#f2c14e73;stroke-width:1px;cursor:pointer}.sector-picker .sector.on path{fill:#f2c14e47;stroke:var(--accent);stroke-width:1.5px}.sector-picker .sector text{fill:#ffe6a0cc;text-anchor:middle;pointer-events:none;font-size:10px}.sector-picker .sector.on text{fill:#fff;font-weight:700}.search-mission .wedge{fill:#5aa9ff12;stroke:#5aa9ff59;stroke-width:1px;stroke-dasharray:3 3;pointer-events:none}.search-mission .sweep{fill:none;stroke:#a0d2ffe6;stroke-width:2.5px;pointer-events:none}.contact{cursor:pointer}.contact .halo{fill:#ff5c5c26;stroke:var(--ijn);stroke-width:2px;stroke-dasharray:5 4}.contact .mark{fill:#fff;text-anchor:middle;paint-order:stroke;stroke:#000000b3;stroke-width:3px;font-size:14px;font-weight:700}.contact text.line1,.contact text.line2{fill:#ffd6d6;text-anchor:middle;paint-order:stroke;stroke:#000000d9;stroke-width:3px;pointer-events:none;font-size:9px}.contact text.line2{fill:#d9b3b3}.contact.low .halo{stroke-dasharray:2 4}.contact.stale .halo{stroke:#8a8f98;fill:#8c8c8c1a}.contact.stale text{fill:#b0b4ba}.contact.selected .halo{stroke:var(--accent);fill:#f2c14e26}.mission .flight-path{fill:none;stroke:#ffffff8c;stroke-width:1.5px;stroke-dasharray:4 4;pointer-events:none}.mission.returning .flight-path{stroke:#c58cff99}.mission .plane{fill:#fff;stroke:#1c2733;stroke-width:1px}.mission.returning .plane{fill:#c58cff}.mission .count{fill:#fff;text-anchor:middle;paint-order:stroke;stroke:#000c;stroke-width:3px;font-size:9px}.mission.raid .plane{fill:var(--ijn)}.mission.raid .count{fill:#ffb4a2}.tf .cap-ring{fill:none;stroke:#5aa9ffe6;stroke-width:1.5px;stroke-dasharray:2 3}.tf .cap-label{fill:#9fd0ff;text-anchor:middle;paint-order:stroke;stroke:#000c;stroke-width:3px;font-size:9px}.sq{grid-template-columns:16px 1fr 28px auto}.sq-actions{grid-column:1/-1;justify-content:flex-end;gap:4px;display:flex}.sq.pending{border-left-color:var(--accent);background:#f2c14e14}.btn.tiny{border-radius:4px;padding:1px 7px;font-size:11px}.btn.small{padding:3px 8px;font-size:12px}.btn.danger{color:#ffd6d6;border-color:#a33}.btn.danger:hover:not(:disabled){background:#4a1f24}.deck-ops{color:var(--muted);margin:-2px 0 6px;font-size:12px}.warn{color:#f2c14e;margin:2px 0;font-size:12px}.small{font-size:12px}.mode-panel{border-color:var(--accent)}.panel.radar{background:#2a1618;border-color:#a33}.panel.radar h2{color:#ff9c9c}.timeline{color:#9fd0ff;margin:6px 0 2px;font-size:12px}.strike-tf{border-top:1px solid var(--border);margin-top:8px;padding-top:8px}.strike-tf h3{margin:0 0 6px;font-size:13px}.strike-sq{flex-wrap:wrap;align-items:center;gap:6px;padding:3px 0;font-size:12px;display:flex}.strike-sq.disabled{opacity:.55}.strike-sq .reason{color:#ff9c9c;flex-basis:100%;padding-left:22px}.contact-item{border:1px solid var(--border);cursor:pointer;border-radius:6px;margin-bottom:6px;padding:8px}.contact-item:hover{border-color:#a33}.contact-item.active{border-color:var(--accent)}.contact-item.stale{opacity:.7}.contact-head{align-items:baseline;gap:6px;display:flex}.contact-mark{background:var(--ijn);color:#fff;text-align:center;border-radius:50%;width:16px;height:16px;font-size:11px;font-weight:700;line-height:16px;display:inline-block}.mission-item{border:1px solid var(--border);cursor:pointer;border-radius:6px;margin-bottom:6px;padding:8px}.mission-item.active{border-color:var(--accent)}.mission-item .kind{color:#fff;background:#2a4a72;border-radius:3px;padding:0 5px;font-size:10px}.mission-item .kind.search{background:#6b5a1e}.mission-item .kind.strike{background:#7a2a2a}.log-line.contact{color:#ffd479}.tf,.mission .sprite{transition:transform .7s ease-in-out}.toasts{z-index:20;cursor:pointer;pointer-events:auto;position:absolute;top:64px;left:50%;transform:translate(-50%)}.toast{border:1px solid var(--border);border-left:4px solid var(--muted);color:var(--text);background:#0c141ef0;border-radius:8px;max-width:640px;padding:10px 16px;font-size:14px;animation:.25s ease-out toast-in;box-shadow:0 6px 24px #00000080}.toast.alert{border-left-color:#ffd479}.toast.combat{border-left-color:#ff9c9c}.toast.good{border-left-color:#4cc38a}.toast.bad{background:#3c1216f2;border-left-color:#e04b4b}.toast.system{border-left-color:var(--accent)}.toast-more{color:var(--muted);margin-left:10px;font-size:11px}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.tag.fire{color:#ffb347;border-color:#a35a1a}.tag.sunk{color:#ff9c9c;border-color:#a33}.modal-backdrop{z-index:30;background:#040a12b8;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.modal{background:var(--panel);border:1px solid var(--border);border-radius:12px;width:92%;max-width:720px;max-height:90%;padding:24px 28px;overflow-y:auto;box-shadow:0 20px 60px #0009}.modal.end h1{letter-spacing:2px;margin:0 0 4px;font-size:26px}.modal.end.win h1{color:#4cc38a}.modal.end.draw h1{color:var(--accent)}.modal.end.loss h1{color:#ff7b7b}.modal h3{color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin:14px 0 6px;font-size:13px}.end-grid{grid-template-columns:1fr 1fr;gap:20px;display:grid}.end-grid ul{margin:0;padding:0;list-style:none}.end-grid li{border-bottom:1px dashed var(--border);justify-content:space-between;gap:12px;padding:3px 0;font-size:13px;display:flex}.end-grid b.pos{color:#4cc38a}.end-grid b.neg{color:#ff7b7b}.epilogue{border-top:1px solid var(--border);margin-top:12px;padding-top:6px}.epilogue p{color:#d7dde5;font-size:13px;line-height:1.6}.start{height:100vh;color:var(--text);background:radial-gradient(at 30% 20%,#163a56 0%,#0b1f30 45%,#070f18 100%);overflow-y:auto}.start-inner{max-width:1040px;margin:0 auto;padding:48px 24px 40px}.start h1{letter-spacing:6px;margin:0;font-size:40px}.start-sub{color:var(--muted);letter-spacing:2px;margin:4px 0 18px}.start-brief{color:#d7dde5;max-width:760px;line-height:1.7}.scenario-list{grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 18px;display:grid}.scenario-card{border:1px solid var(--border);background:#131d2ae6;border-radius:10px;flex-direction:column;gap:8px;padding:16px;display:flex}.scenario-card h2{margin:0;font-size:17px}.scenario-card p{color:#d7dde5;flex:1;margin:0;font-size:13px;line-height:1.6}.scenario-card .btn{align-self:flex-start}.start-options{flex-wrap:wrap;align-items:center;gap:24px;margin-bottom:8px;display:flex}.diff{gap:6px;display:flex}.diff-opt{border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:6px 12px;font-size:13px}.diff-opt.on{border-color:var(--accent);color:var(--accent)}.diff-opt input{display:none}.seed input{background:var(--panel-2);border:1px solid var(--border);color:var(--text);border-radius:6px;width:150px;margin-left:6px;padding:6px 8px}.tutorial{border:1px solid var(--accent);z-index:15;background:#0c141ef0;border-radius:10px;width:320px;padding:12px 14px;position:absolute;top:64px;left:16px;box-shadow:0 8px 30px #00000080}.tutorial-head{align-items:center;gap:8px;display:flex}.tutorial-head b{flex:1;font-size:14px}.tutorial-badge{background:var(--accent);color:#1a1408;border-radius:4px;padding:1px 6px;font-size:11px;font-weight:700}.tutorial p{color:#e7ebf0;margin:8px 0 6px;font-size:13px;line-height:1.6}.tutorial-dots{gap:5px;display:flex}.tutorial-dots span{background:var(--border);border-radius:2px;width:10px;height:4px}.tutorial-dots span.done{background:#4cc38a}.tutorial-dots span.cur{background:var(--accent)}.continue-bar{border:1px solid var(--accent);background:#f2c14e14;border-radius:8px;align-items:center;gap:14px;margin-top:16px;padding:10px 14px;display:flex}