:root{--bg:#0b1622;--panel:#12233a;--water:#1d3b5c;--water-hover:#2a5384;--grid:#0b1622;--ship:#7e8ea3;--hit:#e0533f;--miss:#7fb3d5;--sunk:#6b1f17;--text:#e8eef5;--muted:#9fb2c8;--accent:#f0b429;--cell:clamp(26px, 4vw, 40px)}*{box-sizing:border-box}body{background:radial-gradient(circle at top, #14304d, var(--bg) 60%);color:var(--text);flex-direction:column;align-items:center;min-height:100vh;margin:0;padding:1rem;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex}header{text-align:center}h1{letter-spacing:.15em;text-transform:uppercase;margin:.25rem 0}h2{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin:0 0 .5rem;font-size:1rem}.status-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:.25rem .6rem;min-height:1.5em;margin:.25rem 0 1rem;display:flex}.status{color:var(--accent);font-weight:600}.turn{letter-spacing:.12em;text-transform:uppercase;background:var(--accent);color:#1a1a1a;border-radius:999px;padding:.2em .7em;font-size:.7rem;font-weight:700}.turn.enemy{background:var(--hit);color:#fff}.turn[hidden]{display:none}.badge{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid #3a5a80;border-radius:999px;padding:.2em .7em;font-size:.7rem;font-weight:700}.badge[hidden],.setting[hidden]{display:none}.status.thinking:after{content:"";text-align:left;width:1.5em;animation:1.2s steps(4,end) infinite thinking-dots;display:inline-block}@keyframes thinking-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}@media (prefers-reduced-motion:reduce){.status.thinking:after{content:"…";animation:none}}@media (width<=700px){header{z-index:5;background:var(--bg);width:calc(100% + 2rem);margin:-1rem -1rem 0;padding:.5rem 1rem;position:sticky;top:0;box-shadow:0 4px 12px #00000080}h1{margin:0;font-size:1.1rem}.status-row{margin:.25rem 0}}main{flex-wrap:wrap;justify-content:center;gap:2rem;display:flex}.board-wrap{background:var(--panel);border-radius:12px;padding:1rem;box-shadow:0 8px 24px #0006}.board-frame{--label:1.1em;grid-template-columns:auto auto;width:fit-content;display:grid}.col-labels,.row-labels{font-size:calc(var(--cell) * .4);color:var(--muted);-webkit-user-select:none;user-select:none;gap:2px;padding:2px;display:grid}.col-labels{grid-column:2;grid-template-columns:repeat(10, var(--cell))}.row-labels{grid-row:2;grid-template-rows:repeat(10, var(--cell));width:var(--label)}.col-labels span,.row-labels span{justify-content:center;align-items:center;display:flex}@media (width<=400px){.board-wrap{padding-left:.5rem;padding-right:.5rem}}.board{grid-template-columns:repeat(10, var(--cell));grid-template-rows:repeat(10, var(--cell));background:var(--grid);-webkit-user-select:none;user-select:none;border-radius:6px;gap:2px;width:fit-content;padding:2px;display:grid}.cell{width:var(--cell);height:var(--cell);background:var(--water);font-size:calc(var(--cell) * .55);cursor:default;border-radius:3px;justify-content:center;align-items:center;line-height:1;transition:background .1s;display:flex}.board.interactive .cell:not(.hit):not(.miss){cursor:crosshair}.board.interactive .cell:not(.hit):not(.miss):not(.preview):hover{background:var(--water-hover)}.cell:focus-visible{outline:3px solid var(--accent);outline-offset:-1px;z-index:1}body:not(.pointer-input) .board.interactive .cell:not(.hit):not(.miss):not(.preview):focus-visible{background:var(--water-hover)}.pointer-input .cell:focus-visible{outline:none}.cell.ship{background:var(--ship)}.board .cell.movable,.board.interactive .cell.movable:not(.hit):not(.miss){cursor:grab;touch-action:none}.board.dragging,.board.dragging .cell,.board.dragging.interactive .cell:not(.hit):not(.miss){cursor:grabbing}.cell.preview{background:#4f9d69}.cell.preview.invalid{background:#b04040}.cell.miss:after{content:"";background:var(--miss);border-radius:50%;width:30%;height:30%}.cell.hit{background:var(--hit)}.cell.hit:after{content:"✖";color:#fff}.cell.sunk{background:var(--sunk)}.cell.last-shot{outline:2px solid var(--accent);outline-offset:-2px;animation:1.4s ease-in-out infinite last-shot-pulse}@keyframes last-shot-pulse{0%,to{box-shadow:0 0 #f0b429e6}50%{box-shadow:0 0 0 5px #f0b42900}}@media (prefers-reduced-motion:reduce){.cell.last-shot{animation:none}}.cell.splash,.cell.impact{position:relative}.cell.splash:before,.cell.impact:before{content:"";pointer-events:none;border-radius:50%;position:absolute;inset:0}.cell.splash:before{border:2px solid var(--miss);animation:.7s ease-out both splash-ring}.cell.impact{animation:.5s ease-out both impact-flash}.cell.impact:before{background:#ffd166;animation:.5s ease-out both impact-burst}@keyframes splash-ring{0%{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(1.9)}}@keyframes impact-flash{0%{background:#fff3c4;transform:scale(1.2)}to{background:var(--hit);transform:scale(1)}}@keyframes impact-burst{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}.cell.sinking{z-index:1;animation:.9s ease-out both sink-cell;animation-delay:calc(var(--order,0) * .12s);position:relative}.cell.sinking:before{content:"";border:2px solid var(--accent);animation:.9s ease-out both sink-ring;animation-delay:inherit;border-radius:50%;position:absolute;inset:0}@keyframes sink-cell{0%{background:var(--hit);transform:scale(1)}20%{background:#ffd166;transform:scale(1.35)rotate(-6deg);box-shadow:0 0 18px 6px #f0b429cc}50%{background:var(--hit);transform:scale(.9)rotate(4deg);box-shadow:0 0 #f0b42900}to{background:var(--sunk);transform:scale(1)}}@keyframes sink-ring{0%{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(2.4)}}.fleet{color:var(--muted);flex-wrap:wrap;gap:.5rem 1rem;margin:.75rem 0 0;padding:0;font-size:.85rem;list-style:none;display:flex}.fleet li.sunk{opacity:.5;text-decoration:line-through}.fleet li.sinking{animation:.9s ease-out both sink-label}@keyframes sink-label{0%{color:var(--accent);opacity:1;transform:scale(1.15)}60%{color:var(--hit);opacity:1}to{opacity:.5;transform:scale(1)}}.fleet li.pending{color:var(--accent)}@media (prefers-reduced-motion:reduce){.cell.sinking,.cell.impact,.fleet li.sinking{animation:none}.cell.sinking:before,.cell.splash:before,.cell.impact:before{display:none}}.controls{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.5rem;display:flex}button{font:inherit;background:var(--panel);color:var(--text);cursor:pointer;border:1px solid #3a5a80;border-radius:8px;padding:.6rem 1.2rem}.settings{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;display:flex}.mute{margin:.25rem 0 .5rem;padding:.3rem .5rem;display:inline-flex}.mute svg{display:block}.mute .cross,.mute[aria-pressed=true] .waves{display:none}.mute[aria-pressed=true]{color:var(--muted)}.mute[aria-pressed=true] .cross{display:block}.mute:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.setting{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;align-items:center;gap:.5rem;margin:.25rem 0 .5rem;font-size:.85rem;display:inline-flex}.setting select{font:inherit;text-transform:none;letter-spacing:normal;background:var(--panel);color:var(--text);cursor:pointer;border:1px solid #3a5a80;border-radius:8px;padding:.3rem .6rem}.setting select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (width<=700px){.setting,.mute{margin:0 0 .25rem}.setting{font-size:.75rem}}button:hover:not(:disabled){background:var(--water-hover)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent);color:#1a1a1a;border-color:var(--accent);font-weight:700}button.primary:hover:not(:disabled){background:#ffc94d}.overlay{z-index:10;background:#000000a6;justify-content:center;align-items:safe center;display:flex;position:fixed;inset:0;overflow-y:auto}.overlay[hidden]{display:none}.dialog{background:var(--panel);text-align:center;border-radius:16px;max-height:100%;padding:2rem 3rem;overflow-y:auto;box-shadow:0 12px 40px #0009}.dialog h2{color:var(--text);font-size:1.75rem}.stats{text-align:left;grid-template-columns:auto auto;gap:.35rem 1.25rem;margin:1.25rem 0 .75rem;display:grid}.stats dt{color:#9fb3c8}.stats dd{font-variant-numeric:tabular-nums;margin:0}.record{color:#9fb3c8;margin:0 0 1.25rem;font-size:.9rem}.dialog-actions{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}