:root{--bg: #071019;--panel: #0e1c2a;--line: #1d3548;--ink: #e6f0f7;--dim: #8fb0c6;--accent: #36c6e0;--sea: #11314a;--sea2: #0d2638;--ship: #5a6b78;--hit: #ff5a4d;--miss: #c8dbe8;--sunk: #8a1f18;--good: #57d98e}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:radial-gradient(1100px 650px at 50% -10%,#0c2031,var(--bg));color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif;display:flex;justify-content:center;-webkit-user-select:none;user-select:none}#app{width:100%;max-width:880px;padding:12px 12px 26px}header{text-align:center;margin-bottom:6px}h1{margin:0;font-size:28px;letter-spacing:4px;font-weight:800;color:var(--accent)}.sub{margin:2px 0 0;color:var(--dim);font-size:13px}.bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center;margin:10px 0}.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;overflow:hidden}.seg button{background:none;border:none;color:var(--dim);padding:7px 14px;font:600 13px system-ui;cursor:pointer}.seg button.active{background:var(--accent);color:#04222b}.btn{background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:8px 14px;border-radius:999px;font:700 13px system-ui;cursor:pointer}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.4;cursor:default}.btn.primary{background:var(--accent);color:#04222b;border-color:var(--accent)}.status{text-align:center;min-height:22px;margin:6px 0;font-weight:600}.status .hit-t{color:var(--hit)}.status .good-t{color:var(--good)}.status .fog-t{color:#cfe0ec}.repo-offer{display:inline-flex;flex-wrap:wrap;gap:8px 10px;align-items:center;justify-content:center;margin-top:7px}.repo-offer-btns{display:inline-flex;gap:6px}.btn.sm{padding:4px 12px;font-size:12px}.boards{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:8px}.board-wrap{text-align:center}.board-wrap h3{margin:0 0 6px;font-size:13px;color:var(--dim);letter-spacing:1px;text-transform:uppercase}.grid{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;background:var(--line);border:3px solid var(--line);border-radius:8px;padding:2px;width:min(92vw,360px);aspect-ratio:1}.cell{background:var(--sea);border-radius:2px;position:relative;cursor:default;transition:background .08s}.grid.enemy .cell.fireable:hover{background:#1c4a68;cursor:crosshair}.grid.enemy .cell:before{content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;background:radial-gradient(60% 55% at 30% 30%,rgba(202,216,228,.32),transparent 60%),radial-gradient(55% 50% at 72% 68%,rgba(168,190,206,.26),transparent 62%),linear-gradient(160deg,#7896aa52,#56748a29);animation:fogdrift 7s ease-in-out infinite alternate}@keyframes fogdrift{0%{opacity:.72;transform:translate(-3%) scale(1.04)}to{opacity:1;transform:translate(3%) scale(1.08)}}.grid.enemy .cell.fireable:hover:before{opacity:.32}.grid.enemy .cell.miss:before,.grid.enemy .cell.hit:before,.grid.enemy .cell.sunk:before,.grid.enemy .cell.ship:before,.grid.enemy .cell.sonar-ship:before,.grid.enemy .cell.sonar-empty:before{display:none}.grid.enemy .cell.fog-roll:before{display:block;animation:fogroll 1.55s ease-out forwards;background:radial-gradient(70% 70% at 50% 50%,rgba(228,238,246,.95),rgba(176,198,214,.55) 55%,transparent 78%)}@keyframes fogroll{0%{opacity:0;transform:scale(.6)}30%{opacity:1;transform:scale(1.18)}to{opacity:0;transform:scale(1.3)}}.cell.ship{background:var(--ship)}.cell.miss:after{content:"";position:absolute;inset:34%;border-radius:50%;background:var(--miss);opacity:.5}.cell.hit{background:var(--hit)}.cell.hit:after{content:"✕";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#3a0a06;font-weight:800;font-size:13px}.cell.sunk{background:var(--sunk)}.cell.preview-ok{background:#2c7d52}.cell.preview-bad{background:#7d2c2c}.grid.enemy .cell:hover{cursor:default}.cell.sonar-ship{background:#2a5e74;box-shadow:inset 0 0 0 2px #54c8e0}.cell.sonar-ship:after{content:"•";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#aef2ff;font-size:16px;font-weight:800}.cell.sonar-empty{background:#123349;box-shadow:inset 0 0 0 1px #335a72}.cell.sonar-aim{outline:2px solid var(--accent);outline-offset:-2px;cursor:crosshair}.cell.repo-sel{background:#b8862c}.status .sonar-t{color:var(--accent)}.roster{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:6px 0}.chip{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:12px;color:var(--dim)}.chip.placed{color:var(--good);border-color:#2c5e44}.chip.next{border-color:var(--accent);color:var(--ink)}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#040a10b8;backdrop-filter:blur(3px)}.overlay.hidden{display:none}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 26px;text-align:center;max-width:380px}.card h2{margin:0 0 6px;font-size:24px}.card p{margin:6px 0;color:var(--dim);font-size:14px}.card .row{display:flex;gap:8px;justify-content:center;margin-top:14px}.hint{text-align:center;color:var(--dim);font-size:12.5px;margin-top:10px}