*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:manipulation}#app{min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:16px}.game{--sea-hi: #2a86ad;--sea: #1e6d95;--sea-deep: #124e6f;--chart-bg: #0c3b56;--chart-frame:#0a2f45;--chart-ink: rgba(220, 240, 250, .72);--radar: rgba(120, 230, 200, .16);--hull-hi: #7d93ac;--hull: #566d86;--hull-lo: #3b4f66;--hull-line: rgba(9, 20, 32, .55);width:min(94vw,620px);display:flex;flex-direction:column;gap:12px;position:relative}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .game{--sea-hi: #1f6f93;--sea: #164f6f;--sea-deep: #0c3149;--chart-bg: #06283b;--chart-frame:#041d2c;--chart-ink: rgba(190, 220, 235, .62);--radar: rgba(110, 225, 195, .18)}}:root[data-theme=dark] .game{--sea-hi: #1f6f93;--sea: #164f6f;--sea-deep: #0c3149;--chart-bg: #06283b;--chart-frame:#041d2c;--chart-ink: rgba(190, 220, 235, .62);--radar: rgba(110, 225, 195, .18)}.crumb{font-size:14px}.crumb a{color:var(--accent);text-decoration:none;font-weight:700}.crumb a:hover{text-decoration:underline}.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}.title{font-size:clamp(30px,8.5vw,44px);font-weight:800;line-height:1;letter-spacing:-1px}.stats{display:flex;gap:8px}.stat{flex:1;background:linear-gradient(180deg,#ffffff1a,#0000001a),var(--board-bg);color:var(--accent-text);border-radius:6px;padding:6px 10px;text-align:center;box-shadow:inset 0 1px #ffffff24}.stat .label{font-size:10px;text-transform:uppercase;letter-spacing:1px;opacity:.85;font-weight:700}.stat .value{font-size:22px;font-weight:800;line-height:1.1}.status{font-size:16px;font-weight:700;text-align:center;min-height:22px}.boards{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}.panel{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:6px}.panel-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:700;opacity:.85;text-align:center}.grid{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;padding:7px;background:linear-gradient(180deg,#ffffff0d,#0000002e),var(--chart-bg);border:1.5px solid var(--chart-frame);border-radius:10px;box-shadow:0 6px 18px #06182647,inset 0 0 0 1px #ffffff0d}.cell{aspect-ratio:1 / 1;min-width:0;border:none;border-radius:3px;padding:0;line-height:1;position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;background:radial-gradient(130% 120% at 28% 20%,#ffffff29,#fff0 55%),repeating-linear-gradient(115deg,#ffffff0d 0 2px,#fff0 2px 7px),linear-gradient(160deg,var(--sea-hi) 0%,var(--sea) 52%,var(--sea-deep) 100%);box-shadow:inset 0 1px #ffffff1a,inset 0 -3px 5px #00000038;transition:filter .12s ease,transform 60ms ease}.grid.enemy .cell{background:radial-gradient(130% 120% at 28% 20%,#ffffff24,#fff0 55%),repeating-linear-gradient(115deg,#ffffff0d 0 2px,#fff0 2px 7px),linear-gradient(160deg,var(--radar),rgba(255,255,255,0) 60%),linear-gradient(160deg,var(--sea-hi) 0%,var(--sea) 52%,var(--sea-deep) 100%)}.grid.enemy .cell{cursor:pointer}.grid.enemy .cell:hover{filter:brightness(1.12) saturate(1.05)}.grid.enemy .cell:active{transform:scale(.9)}.grid.player .cell{cursor:default}.grid.enemy .cell.kbd-cursor{outline:3px solid var(--accent);outline-offset:-2px;z-index:2}.cell.ship{background:linear-gradient(180deg,var(--hull-hi) 0%,var(--hull) 46%,var(--hull-lo) 100%);box-shadow:inset 0 2px #ffffff47,inset 0 -3px 5px #0006,0 1px 2px #00000040}.cell.ship:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 44%,var(--hull-line) 44% 56%,transparent 56%),radial-gradient(circle at 50% 50%,#ffffff4d 0 12%,#fff0 16%);opacity:.7}.cell.miss:after{content:"";position:absolute;inset:0;margin:auto;width:62%;height:62%;border-radius:50%;border:2px solid rgba(255,255,255,.9);background:radial-gradient(circle,#ffffff47 0 30%,#fff0 46%);box-shadow:0 0 0 3px #ffffff24,inset 0 0 4px #ffffff59;animation:sb-splash .42s ease-out}.cell.miss{background:radial-gradient(120% 120% at 50% 50%,#0003,#0000 60%),linear-gradient(160deg,var(--sea) 0%,var(--sea-deep) 100%)}.cell.hit{background:radial-gradient(circle at 50% 52%,#fff2b0,#ffd24d 16%,#ff9330 36%,#f0521f,#b3260f 80%,#5c1305);box-shadow:0 0 10px #ff8c32bf,inset 0 0 8px #460a008c;animation:sb-flare 1.6s ease-in-out infinite}.cell.hit:before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 0deg,#ffdc7800,#ffdc788c 8deg,#ffdc7800 16deg 82deg,#ffc85a73 90deg,#ffdc7800 98deg 172deg,#ffdc788c 180deg,#ffdc7800 188deg 262deg,#ffc85a73 270deg,#ffdc7800 278deg);opacity:.9;animation:sb-spark 2.4s linear infinite}.cell.sunk{background:radial-gradient(circle at 50% 45%,#78140ad9,#28080400 60%),linear-gradient(180deg,#4a1712,#240a07);box-shadow:inset 0 0 9px #000000a6,inset 0 1px #ff785a33}.cell.sunk:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 0 43%,rgba(255,90,70,.85) 43% 57%,transparent 57%),linear-gradient(-45deg,transparent 0 43%,rgba(255,90,70,.85) 43% 57%,transparent 57%);filter:drop-shadow(0 0 3px rgba(255,60,40,.6));opacity:.9}.cell.sunk:after{content:none}@keyframes sb-flare{0%,to{filter:brightness(1);box-shadow:0 0 8px #ff8c32a6,inset 0 0 8px #460a008c}50%{filter:brightness(1.15);box-shadow:0 0 14px #ffaa46e6,inset 0 0 8px #460a008c}}@keyframes sb-spark{to{transform:rotate(360deg)}}@keyframes sb-splash{0%{transform:scale(.35);opacity:0}40%{opacity:1}to{transform:scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.cell.hit,.cell.hit:before{animation:none}.cell.miss:after{animation:none}}.btn{background:var(--accent);color:var(--accent-text);border:none;border-radius:6px;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:filter .12s ease}.btn:hover{filter:brightness(1.05)}.btn:active{filter:brightness(.95)}.how{font-size:13px;opacity:.85;line-height:1.5}.how b{font-weight:700}.overlay{position:absolute;inset:0;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;background:var(--overlay-bg);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10;opacity:0;pointer-events:none;transition:opacity .2s ease}.overlay.show{opacity:1;pointer-events:auto}.overlay .msg{font-size:clamp(28px,9vw,44px);font-weight:800}.overlay.win .msg{color:#2fa4a0}.overlay.lose .msg{color:#e05a4d}.overlay .sub{font-size:15px;color:var(--text);opacity:.9}.overlay .actions{display:flex;gap:10px;margin-top:8px}@media(max-width:420px){.grid{padding:5px;gap:1.5px}}