:root{--bg: #0e1116;--panel: #171c26;--panel-2: #212940;--text: #e8ecf4;--muted: #93a0b4;--accent: #38bdf8;--accent-ink: #06283a;--sea: #14395e;--sea-line: #0c2947;--hull-hi: #aeb9cb;--hull-lo: #55677f;--wreck-hi: #7c3a3a;--wreck-lo: #46201f;--ghost: rgba(148, 163, 184, .55);--peg-miss: #9ec5ea;--peg-hit-hi: #fca5a5;--peg-hit: #dc2626;--peg-hit-lo: #7f1d1d;--warn: #fbbf24;color-scheme:dark}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;overflow:hidden}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.game{height:100%;max-width:640px;margin-inline:auto;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:10px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.panel{display:flex;flex-direction:column;gap:8px}.hud{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px}.chips{grid-column:1;grid-row:1;display:flex;gap:6px;min-width:0;overflow:hidden}.chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding-inline:10px;border-radius:10px;background:var(--panel);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}.chip .chip-value{color:var(--text)}.chip.is-turn{box-shadow:inset 0 0 0 1.5px #38bdf88c}.icon{display:block;width:18px;height:18px;flex:none}.chip .icon{width:16px;height:16px}.btn .icon{width:20px;height:20px}.actions{grid-column:2;grid-row:1;display:flex;gap:6px;justify-self:end}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding-inline:14px;border:0;border-radius:10px;background:var(--panel-2);color:var(--text);font:inherit;font-weight:600;cursor:pointer}.btn[hidden]{display:none}.btn:active{transform:translateY(1px)}.btn-icon{display:contents}.btn-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-primary{background:var(--accent);color:var(--accent-ink)}.switch{grid-column:1 / 3;grid-row:2;display:flex;gap:6px}.seg{flex:1;min-height:40px;padding-inline:6px;border:0;border-radius:10px;background:var(--panel);color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seg.is-on{background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 1.5px #38bdf88c}.mini{grid-column:3;grid-row:1 / 3;width:min(24vw,96px);aspect-ratio:1;border-radius:10px;cursor:pointer;box-shadow:0 4px 12px #00000059}.mini .board{width:100%;height:100%;border-radius:10px;box-shadow:inset 0 0 0 1px #ffffff14}.status{display:flex;align-items:center;justify-content:center;margin:0;min-height:24px;font-size:15px;font-weight:700;text-align:center}.status.is-over{font-size:17px}.status.is-win{color:var(--accent)}.status.is-flash{color:var(--warn)}.fleet{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px}.fship{display:flex;gap:2px}.fship i{width:8px;height:8px;border-radius:2px;background:#7ea8cf;transition:background .3s ease,opacity .3s ease}.fship.is-sunk i{background:#5b6572;opacity:.45}.board-slot{flex:1;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center}.board-slot .board{width:var(--board, 320px);height:var(--board, 320px)}.board{position:relative;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#1a4570 0%,var(--sea) 55%,#102c49 100%);box-shadow:0 10px 26px #00000073,inset 0 0 0 1px #ffffff0f;touch-action:none;animation:board-in .24s ease-out}.cells{position:absolute;inset:0;z-index:1;display:grid;grid-template:repeat(10,1fr) / repeat(10,1fr)}.sq{box-shadow:inset 0 0 0 1px var(--sea-line);touch-action:none;-webkit-tap-highlight-color:transparent}.board.is-active .sq{cursor:crosshair}.board.is-waiting .sq{cursor:progress}.board.is-over .sq{cursor:pointer}.ships{position:absolute;inset:0;z-index:2;pointer-events:none}.ship{position:absolute;border-radius:999px;background:linear-gradient(135deg,var(--hull-hi),var(--hull-lo) 70%);box-shadow:inset 0 0 0 1px #ffffff47,0 2px 6px #00000059}.ship.is-sunk{background:linear-gradient(135deg,var(--wreck-hi),var(--wreck-lo) 70%);box-shadow:inset 0 0 0 1px #ff82824d}.ship.is-ghost{background:#94a3b81f;box-shadow:none;border:2px dashed var(--ghost);animation:board-in .4s ease-out}.pegs{position:absolute;inset:0;z-index:3;pointer-events:none}.peg{position:absolute;width:10%;height:10%;display:grid;place-items:center}.peg:before{content:"";position:absolute;width:82%;height:82%;border-radius:50%;border:2px solid;opacity:0}.peg:after{content:"";border-radius:50%}.peg-miss:before{border-color:#9ec5ea99}.peg-miss:after{width:26%;height:26%;background:var(--peg-miss);opacity:.7}.peg-hit:before{border-color:#f87171cc}.peg-hit:after{width:54%;height:54%;background:radial-gradient(circle at 35% 30%,var(--peg-hit-hi),var(--peg-hit) 60%,var(--peg-hit-lo));box-shadow:0 0 0 2px #dc262659,0 0 10px #ef44448c}.peg.is-new:after{animation:peg-in .24s ease-out}.peg.is-new:before{animation:peg-ring .5s ease-out}@keyframes peg-in{0%{transform:scale(.2);opacity:0}}@keyframes peg-ring{0%{transform:scale(.3);opacity:.9}to{transform:scale(1.2);opacity:0}}@keyframes board-in{0%{opacity:.4}}.hint{margin:0;text-align:center;color:var(--muted);font-size:13px;line-height:1.45}@media(max-width:470px){.btn-label{display:none}.btn{padding-inline:0}.game{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}}@media(max-height:470px){.game{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:6px}.panel{gap:6px}.chip{min-height:32px;padding-inline:8px;font-size:14px}.seg{min-height:32px;font-size:13px}.status{min-height:20px;font-size:14px}.status.is-over{font-size:15px}.hint{font-size:12px}}@media(max-width:380px)and (max-height:470px){.hint,.mini{display:none}.board-slot{padding-block-end:52px}.game.is-place .chips{display:none}}@media(max-height:330px){.game,.panel{gap:4px}.chip,.seg{min-height:30px}.status{min-height:16px;font-size:12px}.hint,.mini,.switch,.fleet{display:none}}@media(max-width:260px){.seg{padding-inline:3px;font-size:12px}}@media(max-height:470px)and (min-aspect-ratio:13 / 10){.game{flex-direction:row;align-items:stretch;gap:10px;max-width:none}.panel{flex:0 0 auto;width:min(42vw,240px);justify-content:center;min-height:0;overflow-y:auto}.hud{display:flex;flex-direction:column;align-items:stretch;gap:6px}.chips{justify-content:space-between}.chip{flex:1;justify-content:center;padding-inline:6px}.actions{justify-self:auto}.actions .btn{flex:1}#shuffle-btn{flex:0 0 44px;padding-inline:0}#shuffle-btn .btn-label{display:none}.switch,.fleet{display:flex}.mini{display:block;width:min(30vw,132px);align-self:center}.board-slot{padding-block-end:48px}.hint{display:none}}@media(prefers-reduced-motion:reduce){.board,.ship.is-ghost,.peg.is-new:after{animation-duration:1ms}.peg.is-new:before{animation-duration:1ms}.fship i{transition-duration:1ms}}