:root {
    --bg: #0a1624;
    --panel: #11243a;
    --panel-2: #1a3450;
    --line: #25476b;
    --fg: #e6f0fa;
    --muted: #8ea7c0;
    --accent: #f5b83d;
    --accent-ink: #231600;
    --on: #3fbf8a;
    --hit: #ff5a4e;
    --miss: #d9e6f2;
    --sea: #12314f;
    --sea-aim: #184068;
    --hull: #c7d3df;
    --heard: #ff9f43;
    --focus: #38d6e8;
    --radius: 14px;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

[hidden] { display: none !important; }

.screen {
    min-height: 100dvh;
    margin: 0 auto;
    padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1100px;
}
.screen.narrow { max-width: 520px; gap: 16px; }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.error { color: var(--hit); margin: 0; text-align: center; min-height: 0; }

/* ---------- setup ---------- */

.brand { text-align: center; margin: 24px 0 8px; }
.brand-mark { font-size: 72px; line-height: 1; }
.brand h1 { margin: 10px 0 4px; font-size: 2rem; letter-spacing: -0.02em; }
.tagline { margin: 0; color: var(--muted); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field span { color: var(--muted); font-size: 0.9rem; }

input {
    font: inherit;
    color: var(--fg);
    background: var(--panel);
    border: 2px solid var(--panel-2);
    border-radius: 10px;
    padding: 12px;
    width: 100%;
}
input:focus { outline: none; border-color: var(--accent); }
input:disabled { opacity: 0.7; }

.btn {
    font: inherit;
    font-weight: 700;
    color: var(--fg);
    background: var(--panel-2);
    border: none;
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: transparent; border: 2px solid var(--panel-2); }
.btn-on { background: color-mix(in srgb, var(--on) 25%, var(--panel)); border: 2px solid var(--on); }
.btn-fire { background: color-mix(in srgb, var(--hit) 22%, var(--panel)); border: 2px solid var(--hit); }
.btn-danger { background: var(--hit); color: #fff; }
.action-hint.warn { color: var(--hit); font-weight: 700; }
.btn-small { padding: 7px 10px; font-size: 0.85rem; min-width: 40px; }
.ship-ctrls .btn[title^="Turn"], .ship-ctrls .btn[title^="Rotate"] { font-size: 1.15rem; padding: 4px 10px; }

.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 0.85rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--panel-2); }

.code-row { display: flex; gap: 8px; }
.code-row input { text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; text-align: center; min-width: 0; }

/* ---------- top bar ---------- */

.bar { display: flex; align-items: center; gap: 8px; }
.room-label { font-weight: 700; color: var(--muted); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.round-label { font-weight: 800; flex: 1; white-space: nowrap; }
.bar .btn { flex: none; }
.timer { font-variant-numeric: tabular-nums; font-weight: 800; }
.timer.urgent { color: var(--hit); animation: blink 1s steps(2) infinite; }
.conn { color: var(--accent); font-weight: 700; font-size: 0.85rem; }

.card { background: var(--panel); border-radius: var(--radius); padding: 14px; }
.card h2 { margin: 0 0 8px; font-size: 1.1rem; }

/* ---------- lobby ---------- */

.lobby { display: grid; gap: 12px; max-width: 640px; width: 100%; margin: 0 auto; }
.lobby-players { margin: 0; padding-left: 20px; }
.lobby-players li { margin: 2px 0; }
.settings { display: grid; gap: 10px; }
.settings label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings input[type=number] { width: 90px; padding: 8px; text-align: center; }
.settings label.check { justify-content: flex-start; align-items: flex-start; }
.settings input[type=checkbox] { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--accent); }

/* ---------- play ---------- */

.play {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 76px;
}
@media (min-width: 900px) {
    .play { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); align-items: start; }
}

.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.tab {
    font: inherit;
    color: var(--fg);
    background: var(--panel);
    border: 2px solid var(--panel-2);
    border-radius: 10px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: none;
    cursor: pointer;
}
.tab.active { border-color: var(--accent); background: var(--panel-2); }
.tab.out { opacity: 0.5; }
.tab-name { font-weight: 800; font-size: 0.9rem; white-space: nowrap; }
.tab-meta { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }

.board-wrap { overflow: hidden; background: radial-gradient(circle at 50% 45%, #10304d, var(--bg) 75%); border-radius: var(--radius); padding: 6px; }
.board { overflow: visible; display: block; width: 100%; height: auto; max-height: 72dvh; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.caption { margin: 4px 0 0; font-size: 0.85rem; color: var(--muted); text-align: center; }

/* SVG: only the cells take taps; everything drawn on top lets them through. */
.board * { pointer-events: none; }
.board .cell { pointer-events: all; fill: var(--sea); stroke: var(--line); stroke-width: 0.8; cursor: pointer; }
.board .cell.aim:hover { fill: var(--sea-aim); }
.board .cell:active { fill: var(--sea-aim); }
.board .reveal { fill: none; stroke: var(--focus); stroke-width: 1.2; stroke-dasharray: 2 1.5; }
.board .reveal.occupied { fill: color-mix(in srgb, var(--focus) 45%, transparent); stroke-dasharray: none; }
.board .hull-cell { fill: color-mix(in srgb, var(--hull) 14%, var(--sea)); stroke: none; }
.board .hull-cell.wreck-cell { fill: color-mix(in srgb, var(--hit) 14%, var(--sea)); }

/* Top-down ships */
.board .ship .hull-shape { fill: #8ea2b6; stroke: #07121e; stroke-width: 0.9; stroke-linejoin: round; }
.board .ship .deck { fill: #b9c7d4; }
.board .ship .keel { stroke: #a3b3c3; stroke-width: 0.5; }
.board .ship .bridge { fill: #e7edf3; stroke: #5f7285; stroke-width: 0.6; }
.board .ship .bridge-top { fill: #7d93a8; }
.board .ship .funnel { fill: #3c4b5a; stroke: #22303d; stroke-width: 0.5; }
.board .ship .funnel-top { fill: #11181f; }
.board .ship .mast { fill: #5f7285; }
.board .ship .turret circle { fill: #5b6f83; stroke: #1c2a38; stroke-width: 0.7; }
.board .ship .turret rect { fill: #33414f; }
.board .ship .turret.firing circle { fill: var(--hit); }
.board .ship .turret.armed circle { fill: var(--accent); stroke: #fff; stroke-width: 1; }
.board .ship .turret.armed rect { fill: var(--accent); }
.board .ship.selected .hull-shape { stroke: var(--accent); stroke-width: 1.6; }
.board .ship .wake { fill: none; stroke: #cfe3f5; stroke-width: 0.9; stroke-linecap: round; opacity: 0.45; stroke-dasharray: 3 2; }
.board .ship .scorch circle { fill: #1b1512; opacity: 0.75; }
.board .ship .flame { fill: #ff8a3d; stroke: #ffd166; stroke-width: 0.5; }
.board .ship.ghost .hull-shape { fill: none; stroke: var(--accent); stroke-width: 1.1; stroke-dasharray: 2.4 1.8; }
.board .ship.revealed .hull-shape { fill: color-mix(in srgb, var(--hull) 25%, transparent); stroke: var(--hull); stroke-width: 1; stroke-dasharray: 2 1.2; }
.board .ship.wreck .hull-shape { fill: #3a2a26; stroke: var(--hit); stroke-width: 0.9; }
.board .ship.wreck .scorch circle { fill: #140d0b; opacity: 0.8; }
.board .ship.wreck .crack { fill: none; stroke: var(--hit); stroke-width: 0.8; }
.board .shot.miss { fill: var(--miss); }
.board .shot.hit circle { fill: var(--hit); }
.board .shot.hit path { stroke: #fff; stroke-width: 1.4; stroke-linecap: round; }
.board .ping { fill: none; stroke: var(--miss); stroke-width: 1; animation: ping 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.board .ping.hit { stroke: var(--hit); }
.board .heard { fill: color-mix(in srgb, var(--heard) 10%, transparent); stroke: var(--heard); stroke-width: 1; stroke-dasharray: 3 2; }
.board .target circle { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.board .target path { stroke: var(--accent); stroke-width: 1.2; }
.board .target text { fill: var(--accent); font-size: 6px; font-weight: 800; }

.panel-col { display: flex; flex-direction: column; gap: 10px; }

.log { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.log-title { font-weight: 800; margin-bottom: 4px; }
.log-line.good { color: var(--on); }
.log-line.bad { color: var(--hit); font-weight: 700; }
.log-line.sunk { color: var(--accent); font-weight: 700; }

.ships { display: flex; flex-direction: column; gap: 8px; }
.ship-row { background: var(--panel); border: 2px solid transparent; border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.ship-row.selected { border-color: var(--accent); }
.ship-row.sunk { opacity: 0.5; }
.ship-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ship-name { font-weight: 800; }
.status { font-size: 0.8rem; color: var(--muted); margin-left: auto; }
.status.bad { color: var(--hit); font-weight: 700; }
.hp { display: inline-flex; gap: 2px; }
.hp i { width: 10px; height: 10px; border-radius: 2px; background: var(--on); }
.hp i.dmg { background: var(--hit); }
.ship-ctrls { display: flex; gap: 6px; flex-wrap: wrap; }

.rules-help summary { cursor: pointer; font-weight: 700; }
.rules-help ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 0.9rem; }
.rules-help li { margin: 4px 0; }

.over h2 { margin-bottom: 4px; }
.over p { margin: 0 0 10px; }

.action-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px max(10px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--panel-2);
    z-index: 5;
}
.action-hint { flex: 1; font-size: 0.85rem; color: var(--muted); }
.action-bar .btn { flex: none; }

body.hit-me { animation: hitme 1.1s ease-out; }
body.hit-them .board-wrap { animation: glow 1.1s ease-out; }

@keyframes blink { 50% { opacity: 0.4; } }
@keyframes ping { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
@keyframes hitme { 0% { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--hit) 45%, transparent); } 100% { box-shadow: inset 0 0 0 100vmax transparent; } }
@keyframes glow { 0% { box-shadow: 0 0 0 4px var(--on); } 100% { box-shadow: 0 0 0 0 transparent; } }

@media (prefers-reduced-motion: reduce) {
    .board .ping, .timer.urgent { animation: none; }
}

/* ---------- pass-and-play ---------- */

.local-names { display: grid; gap: 10px; }
.local-names input { padding: 10px; }

.curtain {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    overflow-y: auto;
}
.curtain-box { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.curtain-icon { font-size: 64px; line-height: 1; }
.curtain-box h2 { margin: 0; font-size: 1.5rem; }
.curtain-box p { margin: 0; }
.curtain-box .log { text-align: left; }
.curtain-box .btn-primary { padding: 16px; font-size: 1.05rem; }