:root{--bg:#0b1622;--panel:#12233a;--line:#21405f;--text:#e8f1fa;--muted:#8fa9c4;--hit:#ff5a45;--sunk:#7a130d;--miss:#9fb6cd;--water:#0c1d30;--ship:#4f6f8f;--accent:#35c4a8}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.app{max-width:1100px;margin:0 auto;padding:1.5rem 1rem 3rem}.app-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.app-header h1{letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:1.6rem}.app-controls{flex-wrap:wrap;align-items:flex-start;gap:1rem;display:flex}.difficulty{gap:.2rem;display:grid}.difficulty-label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.7rem}.difficulty-select{background:var(--panel);color:var(--text);border:1px solid var(--line);font:inherit;cursor:pointer;border-radius:999px;padding:.45rem .9rem;font-size:.9rem}.difficulty-hint{color:var(--muted);margin:0;font-size:.7rem}.new-game{background:var(--accent);color:#06202a;cursor:pointer;border:none;border-radius:999px;padding:.6rem 1.3rem;font-size:.95rem;font-weight:700}.new-game:hover{filter:brightness(1.08)}.status{background:var(--panel);border:1px solid var(--line);border-radius:12px;min-height:4.2rem;margin:1rem 0 1.25rem;padding:.85rem 1rem}.status--over{border-color:var(--accent)}.status-main{margin:0;font-size:1.1rem;font-weight:600}.status-log{color:var(--muted);min-height:1.1rem;margin:.35rem 0 0;font-size:.9rem}.boards{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:1.5rem;display:grid}.board-column{flex-direction:column;gap:.75rem;display:flex}.board-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.9rem}.board-title{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .6rem;font-size:1rem}.board{--label-col:1.4rem;--cell-gap:2px;gap:var(--cell-gap);flex-direction:column;display:flex}.board-grid{gap:var(--cell-gap);flex-direction:column;display:flex;position:relative}.board-row{grid-template-columns:var(--label-col) repeat(10, 1fr);gap:var(--cell-gap);display:grid}.ship-layer{top:0;bottom:0;right:0;left:calc(var(--label-col) + var(--cell-gap));gap:var(--cell-gap);pointer-events:none;grid-template-rows:repeat(10,1fr);grid-template-columns:repeat(10,1fr);display:grid;position:absolute}.ship-slot{background:var(--water);border-radius:3px}.ship-svg{width:100%;height:100%;display:block}.ship-hull{fill:var(--ship);stroke:#9dbad6;stroke-width:.5px;vector-effect:non-scaling-stroke}.ship-deck,.ship-tower{stroke:#9dbad6;stroke-width:.4px;fill:none;vector-effect:non-scaling-stroke}.ship-svg--sunk .ship-hull{fill:#3b1f28;stroke:#ffd7d2}.board-label{color:var(--muted);justify-content:center;align-items:center;font-size:.7rem;display:flex}.cell{aspect-ratio:1;border:1px solid var(--line);background:var(--water);width:100%;font:inherit;border-radius:3px;padding:0;position:relative}.cell:after{justify-content:center;align-items:center;font-size:clamp(.5rem,2.2vw,.95rem);font-weight:700;line-height:1;display:flex;position:absolute;inset:0}button.cell:not(:disabled){cursor:crosshair}button.cell:not(:disabled):hover{border-color:var(--accent);background:#1b3652}.cell--ship{background:0 0}.cell--hit{background:var(--hit);border-color:#ffc6bd}.cell--miss{background:var(--miss);border-color:#d5e3f0}.cell--miss:after{content:"•";color:#123049;font-size:clamp(.7rem,3vw,1.3rem)}.cell--hit:after{content:"✕";color:#2a0603}.cell--sunk{background:#7a130de0;border-color:#ffd7d2;box-shadow:inset 0 0 0 2px #ffd7d2}.cell--sunk:after{content:"✕";color:#ffe6e2}.cell--last{outline:2px solid var(--accent);outline-offset:1px;z-index:1}.legend{margin:0 0 1.25rem}.legend-list{color:var(--muted);flex-wrap:wrap;gap:.35rem 1rem;margin:0;padding:0;font-size:.8rem;list-style:none;display:flex}.legend-item{align-items:center;gap:.4rem;display:flex}.legend-swatch{aspect-ratio:auto;flex:none;width:.9rem;height:.9rem;animation:none}.legend-swatch:after{font-size:.6rem}@keyframes splash{0%{opacity:.4;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes impact{0%{filter:brightness(2.2);transform:scale(.7)}60%{transform:scale(1.12)}to{filter:brightness();transform:scale(1)}}@keyframes sink{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.cell--miss{animation:.2s ease-out splash}.cell--hit{animation:.22s ease-out impact}.cell--sunk{animation:.24s ease-in-out sink}@media (prefers-reduced-motion:reduce){.cell{animation:none!important}}.overlay{z-index:10;background:#040b12b8;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.overlay-card{background:var(--panel);border:1px solid var(--accent);border-radius:16px;width:min(28rem,100%);max-height:100%;padding:1.25rem;overflow:auto}.overlay-card:focus:not(:focus-visible){outline:none}.overlay-title{letter-spacing:.04em;text-transform:uppercase;margin:0;font-size:1.6rem}.overlay-subtitle{color:var(--muted);margin:.25rem 0 1rem}.overlay-stats{grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.6rem;margin:0 0 1.1rem;display:grid}.overlay-stats dt{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:.7rem}.overlay-stats dd{font-variant-numeric:tabular-nums;margin:.1rem 0 0;font-size:1.25rem;font-weight:700}.overlay-actions,.overlay-difficulties{flex-wrap:wrap;gap:.5rem;display:flex}.overlay-hint{color:var(--muted);margin:1rem 0 .5rem;font-size:.8rem}.button{color:var(--text);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:999px;padding:.55rem 1.1rem;font-size:.9rem;font-weight:600}.button:hover{border-color:var(--accent)}.button--primary{background:var(--accent);border-color:var(--accent);color:#06202a;font-weight:700}.button--ghost[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.fleet{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.75rem .9rem}.fleet-title{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 .5rem;font-size:.8rem}.fleet-list{gap:.25rem;margin:0;padding:0;list-style:none;display:grid}.fleet-item{grid-template-columns:1fr auto auto;align-items:center;gap:.6rem;font-size:.85rem;display:grid}.fleet-pips{letter-spacing:.15em;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.fleet-item--sunk{color:var(--hit);text-decoration:line-through}.fleet-state{font-variant-numeric:tabular-nums;color:var(--muted)}.board-hint{color:var(--muted);margin:.6rem 0 0;font-size:.75rem}@media (width<=480px){.app{padding:1rem .6rem 2rem}.board-panel{padding:.6rem}.board{--label-col:1.1rem;--cell-gap:1px}.fleet-item{gap:.35rem}.legend-list{gap:.3rem .7rem;font-size:.72rem}}.placement{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin:1rem 0 1.25rem;padding:1rem}.placement h2{text-transform:uppercase;letter-spacing:.08em;margin:0;font-size:1.1rem}.placement-hint{color:var(--muted);margin:.35rem 0 .75rem;font-size:.85rem}.placement-current{margin:0 0 .75rem;font-weight:600}.placement-body{grid-template-columns:minmax(min(320px,100%),30rem) auto;align-items:start;gap:1rem;display:grid}.placement-fleet{color:var(--muted);gap:.25rem;margin:0;padding:0;font-size:.85rem;list-style:none;display:grid}.placement-actions{flex-wrap:wrap;gap:.5rem;margin-top:1rem;display:flex}button.cell.cell--preview-legal,button.cell.cell--preview-legal:not(:disabled):hover{border-color:var(--accent);background:#35c4a873}button.cell.cell--preview-illegal,button.cell.cell--preview-illegal:not(:disabled):hover{border-color:var(--hit);background:#ff5a4573}@media (width<=720px){.placement-body{grid-template-columns:1fr}}