.sound-toggle{background:var(--btn,#00000040);width:36px;min-width:36px;height:36px;color:var(--ink,#fff);cursor:pointer;border:0;border-radius:50%;place-items:center;padding:0;display:inline-grid}.sound-toggle svg{width:20px;height:20px}.sound-toggle[aria-pressed=true]{opacity:.7}.sound-toggle:focus-visible{outline:3px solid var(--focus,#ffd54a);outline-offset:2px}:root{--ink:#eef4fb;--btn:#ffffff1f;--btn-on:#ffd54a;--btn-on-ink:#2b2100;--focus:#ffd54a;--dialog:#fdfdfb;--dialog-ink:#16181a;--sea-a:#1d6fb8;--sea-b:#0f4a85;--grid:#ffffff29;--hull:#8d99a6;--hull-dark:#4f5a66;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--dialog:#1d2530;--dialog-ink:#eef2f6}}:root[data-theme=dark]{--dialog:#1d2530;--dialog-ink:#eef2f6}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:radial-gradient(80% 60% at 50% 30%,#17375e,#08142a 75%),#08142a;font:14px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app.sea{grid-template-rows:auto auto 1fr auto;justify-items:center;gap:6px;height:100dvh;padding:8px 10px;display:grid}.sea-bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.group{gap:3px;display:flex}.btn{font:inherit;color:var(--ink);background:var(--btn);cursor:pointer;border:0;border-radius:9px;min-height:34px;padding:7px 12px;box-shadow:inset 0 1px #ffffff1f,0 2px 6px #0000004d}.btn[aria-pressed=true]{background:var(--btn-on);color:var(--btn-on-ink);font-weight:700}.btn.primary{color:#fff;background:#e0662a;font-weight:700}.btn:focus-visible,.cell:focus-visible{outline:3px solid var(--focus);outline-offset:1px}.sound-toggle{width:34px;height:34px}.sea-status{text-align:center;text-shadow:0 1px 2px #0009;max-width:640px;min-height:1.3em;margin:0;font-weight:700}.sea-msg{color:#ffd27a;text-align:center;min-height:1.3em;margin:0;font-weight:600}.sea-stage{grid-template-rows:auto auto;align-content:center;place-items:center;gap:8px;width:100%;min-height:0;display:grid;container-type:size}.sea-panel{flex-direction:column;align-items:center;gap:4px;display:flex}.sea-panel.enemy{--size:min(100cqw, 60cqh, 560px)}.sea-panel.mine{--size:min(62cqw, 32cqh, 360px)}[data-phase=place] .sea-panel.enemy{display:none}[data-phase=place] .sea-panel.mine{--size:min(100cqw, calc(100cqh - 90px), 560px)}[data-phase=play] .sea-place{display:none}@media (min-aspect-ratio:5/4){.sea-stage{grid-template-rows:none;grid-template-columns:auto auto}.sea-panel.enemy{--size:min(58cqw, calc(100cqh - 56px), 560px)}.sea-panel.mine{--size:min(36cqw, calc(100cqh - 56px), 380px)}}.sea-head{width:var(--size);justify-content:space-between;align-items:baseline;gap:8px;display:flex}.sea-head h2{letter-spacing:.04em;text-transform:uppercase;opacity:.9;margin:0;font-size:14px}.sea-info{opacity:.85;font-size:12px}.sea-head h2,.sea-info{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sea-grid{width:var(--size);height:var(--size);background:#00000040;border-radius:10px;grid-template-rows:.6fr repeat(10,1fr);grid-template-columns:.6fr repeat(10,1fr);padding:3px;display:grid;box-shadow:0 12px 30px #00000080}.lbl{font-size:calc(var(--size) / 26);opacity:.7;place-items:center;font-weight:700;display:grid}.cell{font:inherit;color:inherit;background:radial-gradient(ellipse at 30% 25%, #ffffff24, transparent 60%), linear-gradient(160deg, var(--sea-a), var(--sea-b));box-shadow:inset 0 0 0 .5px var(--grid);border:0;margin:0;padding:0;position:relative}.cell:disabled{cursor:default}.cell.open{cursor:crosshair}.cell.open:hover{background:linear-gradient(160deg,#2b86d6,#1661a8)}.cell.ship:before{content:"";background:linear-gradient(180deg, #c1cad3, var(--hull) 45%, var(--hull-dark));border-radius:3px;position:absolute;inset:14% 3%;box-shadow:0 2px 3px #00000073}.cell.ship.v:before{background:linear-gradient(90deg, #c1cad3, var(--hull) 45%, var(--hull-dark));inset:3% 14%}.cell.ship.h.bow:before{border-radius:50% 3px 3px 50%;left:10%}.cell.ship.h.stern:before{border-radius:3px 40% 40% 3px;right:10%}.cell.ship.v.bow:before{border-radius:50% 50% 3px 3px;top:10%}.cell.ship.v.stern:before{border-radius:3px 3px 40% 40%;bottom:10%}.cell.ship.h.bow.stern:before,.cell.ship.v.bow.stern:before{border-radius:50%}.cell.ship.revealed:before{opacity:.55}.cell.ship.sunk:before{background:linear-gradient(#5b4a42,#3a2d27)}.cell.selected:before{background:linear-gradient(#ffe68a,#f2b90f 50%,#b77f00)}.cell.miss:after{content:"";background:#ffffffd9;border-radius:50%;width:28%;height:28%;position:absolute;top:36%;left:36%;box-shadow:0 0 0 3px #ffffff40}.cell.hit:after{content:"";background:radial-gradient(circle,#fff6c2 0 15%,#ffb02e 35%,#e5381e 65%,#78140a66 80%,#0000 82%);border-radius:50%;animation:.9s ease-in-out infinite alternate sea-flame;position:absolute;inset:18%;box-shadow:0 0 10px #ff7828cc}.cell.ship.sunk.hit:after{box-shadow:none;opacity:.85;background:radial-gradient(circle,#ffb02e 0 20%,#b2321b 55%,#0000 60%);animation:none}@keyframes sea-flame{to{filter:brightness(1.25);transform:scale(.85)}}.cell.last{box-shadow:inset 0 0 0 2px #ffd54a}.fx{pointer-events:none;z-index:2;border-radius:50%;position:absolute;inset:0}.fx.ring{border:3px solid #ffffffe6}.fx.boom{background:radial-gradient(circle,#fff 0 15%,#ffcf4a 35%,#ff5a1eb3 60%,#0000 70%)}.sea-left{width:var(--size);flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12px;display:flex}.lbl-left{opacity:.8}.chip{gap:2px;display:inline-flex}.chip i{background:var(--hull);border-radius:2px;width:9px;height:9px}.chip.gone i{opacity:.6;background:#b2321b}.chip.gone{text-decoration:line-through}.sea-place{gap:8px;margin-top:6px;display:flex}.overlay{z-index:20;background:#00000073;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.overlay[hidden]{display:none}.overlay.later{animation:1.1s step-end both sea-later}@keyframes sea-later{0%{visibility:hidden}}.dialog{background:var(--dialog);color:var(--dialog-ink);text-align:center;border-radius:14px;flex-direction:column;gap:10px;max-width:340px;padding:20px 24px;display:flex;box-shadow:0 10px 40px #00000073}.dialog h2{margin:0;font-size:20px}.dialog p{margin:0}@media (max-height:480px){#app.sea{gap:2px;padding:4px 8px}.btn{min-height:28px;padding:4px 9px}.sea-status{font-size:13px}.sea-head h2{font-size:12px}}@media (max-width:420px){.sea-bar{gap:4px}.btn{padding:6px 9px}}@media (prefers-reduced-motion:reduce){.cell.hit:after,.overlay.later{animation:none}}.sea.curtain .sea-stage,.sea.curtain .sea-msg{visibility:hidden}