:root{--bg: #f4f3ee;--surface: #fbfaf6;--surface-sunk: #eceae2;--ink: #2f2e2b;--ink-soft: #6b6a64;--line: #d9d7cc;--line-strong: #bdbaad;--accent: #1f6f6b;--accent-weak: #d7e6e4;--hit: #b23a3a;--hit-weak: #f0dcda;--miss: #8a897f;--sunk: #7a1f2b;--sunk-weak: #ecd6d8;--valid: #2f7d4f;--invalid: #b23a3a;--focus: #1f6f6b;--font-body: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;--font-ui: "Avenir Next", "Segoe UI", system-ui, sans-serif;--font-mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;--fs-base: 17px;--fs-sm: .82rem;--fs-lg: 1.25rem;--fs-xl: 1.9rem;--fs-xxl: 2.6rem;--lh-body: 1.6;--lh-heading: 1.15;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--sp-7: 48px;--sp-8: 64px;--radius: 6px;--radius-sm: 3px;--cell: 32px;--shadow: 0 1px 2px rgba(40, 38, 30, .06), 0 8px 24px -16px rgba(40, 38, 30, .3);--t-fast: .12s;--t-med: .22s;--t-travel: .5s}*,*:before,*:after{box-sizing:border-box}html{font-size:var(--fs-base)}body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}h1,h2,h3{font-family:var(--font-ui);line-height:var(--lh-heading);font-weight:600;margin:0 0 var(--sp-3)}p{margin:0 0 var(--sp-4)}a{color:var(--accent)}:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);max-width:960px;width:100%;margin:0 auto;padding:var(--sp-4) var(--sp-5) 0}.brand{font-family:var(--font-ui);font-size:var(--fs-lg);letter-spacing:.02em;margin:0}.brand b{color:var(--accent);font-weight:700}.stage{flex:1;width:100%;max-width:640px;margin:0 auto;padding:var(--sp-6) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-5)}.stage.wide{max-width:960px}.foot{text-align:center;color:var(--ink-soft);font-family:var(--font-ui);font-size:var(--fs-sm);padding:var(--sp-5)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.btn{font-family:var(--font-ui);font-size:.95rem;font-weight:600;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);color:var(--ink);padding:.55rem 1rem;cursor:pointer;transition:background var(--t-fast) ease,border-color var(--t-fast) ease,transform var(--t-fast) ease}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:#185d59;border-color:#185d59}.btn-danger{background:var(--hit);border-color:var(--hit);color:#fff}.btn-danger:hover:not(:disabled){background:#9c3030;border-color:#9c3030}.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-soft)}.btn-ghost:hover:not(:disabled){color:var(--ink);border-color:var(--line)}.btn.big{font-size:1.05rem;padding:.8rem 1.5rem}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-4)}.muted{color:var(--ink-soft)}.lede{font-size:var(--fs-lg);margin:0}h2{font-size:var(--fs-xl)}h3{font-family:var(--font-ui);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin:0 0 var(--sp-3)}.entry{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}.entry.join{align-items:stretch}.entry .or{font-family:var(--font-ui);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.2em;color:var(--ink-soft)}.entry label{font-family:var(--font-ui);font-size:.9rem;text-align:center}.join-actions{display:flex;gap:var(--sp-3);justify-content:center}.room-code-input{font-family:var(--font-mono);font-size:1.8rem;letter-spacing:.4em;text-align:center;text-transform:uppercase;padding:var(--sp-3);border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface-sunk);color:var(--ink);width:100%}.share{text-align:center;padding:var(--sp-4);border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--surface-sunk)}.share-code{font-family:var(--font-mono);font-size:2rem;letter-spacing:.35em;color:var(--accent);margin:var(--sp-2) 0 var(--sp-4)}.share-actions{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}.grid{display:inline-flex;flex-direction:column;gap:2px;-webkit-user-select:none;user-select:none}.grid-row{display:flex;gap:2px;align-items:center}.grid-axis{width:var(--cell);height:var(--cell);display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-size:.7rem;color:var(--ink-soft)}.cell{width:var(--cell);height:var(--cell);padding:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-sunk);color:var(--ink);font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center}button.cell{cursor:default}.cell.water{background:#e8ede9}.cell.ship{background:#5c6b74;border-color:#4a5860;color:#fff}.cell.aim:not(:disabled){cursor:crosshair}.board.active .cell.aim:hover{background:var(--accent-weak);border-color:var(--accent)}.cell.cross{background:var(--accent-weak)}.cell.armed{background:var(--accent);border-color:var(--accent);color:#fff}.cell.hit{background:var(--hit-weak);border-color:var(--hit);color:var(--hit);font-weight:700}.cell.sunk{background:var(--sunk-weak);border-color:var(--sunk);color:var(--sunk);font-weight:700}.cell.miss{color:var(--miss)}.cell.ghost-ok{background:color-mix(in srgb,var(--valid) 28%,transparent);border-color:var(--valid)}.cell.ghost-bad{background:color-mix(in srgb,var(--invalid) 24%,transparent);border-color:var(--invalid)}.cell.mark-suspected{color:var(--accent);font-family:var(--font-ui);font-weight:700}.cell.mark-empty{color:var(--ink-soft)}.placement-head .progress-note{font-family:var(--font-ui);font-size:.9rem;color:var(--accent);margin:0}.placement-body{display:flex;gap:var(--sp-6);flex-wrap:wrap}.tray{display:flex;flex-direction:column;gap:var(--sp-3);min-width:220px;flex:1}.palette{display:flex;flex-direction:column;gap:var(--sp-2)}.ship-chip{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:.5rem .75rem;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);font-family:var(--font-ui);text-transform:capitalize;cursor:pointer}.ship-chip.active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.ship-chip.placed{color:var(--ink-soft)}.ship-pips{letter-spacing:.1em;color:var(--accent)}.tray-controls{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.ready{margin-top:var(--sp-2)}.battle-head{display:flex;align-items:center;gap:var(--sp-4)}.statusbar{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--sp-4);padding:.6rem 1rem;border-radius:var(--radius);border:1px solid var(--line);font-family:var(--font-ui);font-weight:600}.statusbar.tone-you{background:var(--accent-weak);border-color:var(--accent);color:var(--accent)}.statusbar.tone-them{color:var(--ink-soft)}.statusbar.tone-wait{background:var(--hit-weak);border-color:var(--hit);color:var(--hit)}.countdown{display:flex;align-items:center;gap:var(--sp-2)}.countdown-meter{width:80px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}.countdown-fill{height:100%;background:var(--accent);transition:width var(--t-med) linear}.countdown.low .countdown-fill{background:var(--hit)}.countdown-num{font-family:var(--font-mono);font-size:.85rem;font-variant-numeric:tabular-nums}.countdown.low .countdown-num{color:var(--hit)}.boards{display:flex;gap:var(--sp-6);flex-wrap:wrap;justify-content:center}.board{transition:opacity var(--t-med) ease}.board.dim{opacity:.55}.board.active{opacity:1}.fire-control{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-3)}.fire-target{font-family:var(--font-mono);font-size:.9rem}.hint{font-size:var(--fs-sm);margin:var(--sp-2) 0 0}.sink-banner{text-align:center;font-family:var(--font-ui);font-weight:700;color:var(--sunk);background:var(--sunk-weak);border:1px solid var(--sunk);border-radius:var(--radius);padding:.5rem}.roster{display:flex;gap:var(--sp-6);justify-content:center;flex-wrap:wrap}.roster-col{min-width:180px}.roster ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.roster-ship{display:flex;align-items:center;gap:var(--sp-3);font-family:var(--font-ui);font-size:.9rem;text-transform:capitalize;padding:2px 0}.roster-ship .roster-pips{letter-spacing:.1em;color:var(--line-strong)}.roster-ship.hit .roster-pips{color:var(--hit)}.roster-ship.sunk{color:var(--ink-soft);text-decoration:line-through}.roster-ship.sunk .roster-pips{color:var(--sunk)}.roster-state{margin-left:auto;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#1e1c1673;display:flex;align-items:center;justify-content:center;padding:var(--sp-4);z-index:20}.modal{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--sp-6);max-width:420px;text-align:center;display:flex;flex-direction:column;gap:var(--sp-4);align-items:center}.modal-actions{display:flex;gap:var(--sp-3)}.result{text-align:center;align-items:center}.result h2{font-size:var(--fs-xxl)}.result h2.victory{color:var(--accent)}.result h2.defeat{color:var(--hit)}.reveal-boards{display:flex;gap:var(--sp-6);justify-content:center;flex-wrap:wrap}.match-stats{display:flex;gap:var(--sp-5);justify-content:center;flex-wrap:wrap;margin:0}.match-stats .stat{display:flex;flex-direction:column}.match-stats dt{font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}.match-stats dd{margin:0;font-size:var(--fs-xl);font-weight:600}.result-actions{display:flex;gap:var(--sp-3);justify-content:center}.phase-progress{list-style:none;display:flex;gap:var(--sp-4);padding:0;margin:0;font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}.phase-progress .here{color:var(--accent);font-weight:700}.phase-progress .done{color:var(--ink)}.room-tag{font-family:var(--font-mono);font-size:.85rem;color:var(--ink-soft)}.conn{font-family:var(--font-ui);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.1em;padding:2px 8px;border-radius:999px;border:1px solid var(--line)}.conn.on{color:var(--accent);border-color:var(--accent)}.conn.off{color:var(--ink-soft)}.toast{max-width:640px;margin:var(--sp-3) auto 0;padding:.7rem 1rem;border-radius:var(--radius);background:var(--hit-weak);border:1px solid var(--hit);color:var(--sunk);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}.toast.notice{background:var(--accent-weak);border-color:var(--accent);color:var(--accent)}.toast-x{background:transparent;border:none;color:inherit;font-size:1.2rem;cursor:pointer}.spinner{width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){@keyframes shot-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.18)}to{transform:scale(1);opacity:1}}@keyframes armed-pulse{0%,to{box-shadow:0 0 0 0 var(--accent-weak)}50%{box-shadow:0 0 0 3px var(--accent-weak)}}@keyframes banner-drop{0%{transform:translateY(-8px) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.cell.hit,.cell.miss,.cell.sunk{animation:shot-pop var(--t-travel) ease-out}.cell.sunk{animation-duration:.7s}.cell.armed{animation:armed-pulse 1.1s ease-in-out infinite}.sink-banner{animation:banner-drop var(--t-med) ease-out}}