:root {
  color-scheme: dark;
  --paper: #03090a;
  --panel: #071315;
  --ink: #eefaf7;
  --muted: #98b4ae;
  --gold: #d9bc78;
  --gold-soft: #f3dda4;
  --cyan: #6ff6df;
  --cyan-soft: #c9fff5;
  --red: #ff665f;
  --red-soft: #ffb0a9;
  --line: #244b47;
  --spring: cubic-bezier(.22, 1.35, .42, 1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
body { margin: 0; min-height: 100svh; overflow-x: hidden; background: radial-gradient(circle at 50% 24%, #0b6b6045, transparent 38%), linear-gradient(145deg, #020606, #061011 52%, #020606); -webkit-tap-highlight-color: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .28; background-image: linear-gradient(#64dbc80b 1px, transparent 1px), linear-gradient(90deg, #64dbc809 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, #000, transparent 90%); }
button, a, input { touch-action: manipulation; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--cyan-soft); outline-offset: 3px; }
.tactical-backdrop { position: fixed; inset: 52px 0 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: .35; }
.tactical-backdrop::before, .tactical-backdrop::after { content: ""; position: absolute; left: 50%; top: 18%; border: 1px solid #6ff6df16; border-radius: 50%; transform: translate(-50%, -50%); }
.tactical-backdrop::before { width: 520px; height: 520px; }
.tactical-backdrop::after { width: 340px; height: 340px; }
.tactical-backdrop span { position: absolute; left: 50%; top: 18%; width: 1px; height: 620px; transform-origin: top; background: linear-gradient(#6ff6df23, transparent); }
.tactical-backdrop span:nth-child(1) { transform: rotate(45deg); }
.tactical-backdrop span:nth-child(2) { transform: rotate(90deg); }
.tactical-backdrop span:nth-child(3) { transform: rotate(135deg); }
.home-bar { position: sticky; top: 0; z-index: 30; display: flex; width: 100%; min-height: calc(52px + env(safe-area-inset-top)); align-items: center; justify-content: center; gap: 10px; border-bottom: 1px solid #f4dfa5; padding-top: env(safe-area-inset-top); background: linear-gradient(110deg, #b18a38, #f0d98e 48%, #b18a38); color: #090806; box-shadow: 0 8px 28px #0009, inset 0 1px #fff8; font-size: .88rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.home-bar::before { content: "←"; font-size: 1.15rem; }
.home-bar:focus-visible { outline-color: #fff; outline-offset: -5px; }
.preview-capture .home-bar { display: none; }
.preview-capture .game-shell { height: 100svh; }
.game-shell { position: relative; width: min(100%, 500px); height: calc(100svh - 52px - env(safe-area-inset-top)); min-height: 620px; margin-inline: auto; padding: 13px 14px calc(7px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 9px; }
.game-identity { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.game-identity h1 { margin: 0; color: var(--gold); font: 500 30px/1 Georgia, serif; letter-spacing: -.8px; white-space: nowrap; text-shadow: 0 0 20px #d9bc7822; }
.player-name { max-width: 150px; overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.player-name:empty { display: none; }
.top-actions { display: flex; flex-shrink: 0; gap: 4px; }
.icon-button { display: grid; width: 39px; height: 39px; place-items: center; flex: 0 0 39px; border: 1px solid #554625; border-radius: 50%; background: linear-gradient(145deg, #1b1811, #0c0b08); color: #ecd59c; box-shadow: inset 0 1px #fff2, 0 5px 15px #0008; font-size: 22px; line-height: 1; transition: transform .2s var(--spring), background .2s, border-color .2s; }
.icon-button:hover { border-color: var(--gold); background: #292319; }
.icon-button:active { transform: scale(.91); }
.info-icon { font: italic 700 19px Georgia, serif; }
.scorebar { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 7px; padding: 8px 5px; border: 1px solid #28524d; border-radius: 11px; background: linear-gradient(180deg, #0a1718dd, #050b0ccc); box-shadow: inset 0 1px #9affed12, 0 8px 24px #0005; }
.scorebar::before, .scorebar::after { content: ""; position: absolute; top: 4px; width: 14px; height: 2px; background: var(--cyan); opacity: .5; }
.scorebar::before { left: 6px; }
.scorebar::after { right: 6px; }
.scorebar > div { text-align: center; border-right: 1px solid #28504a; }
.scorebar > div:last-child { border: 0; }
.scorebar span { display: block; color: #83a49d; font-size: 8px; font-weight: 850; letter-spacing: 1.15px; }
.scorebar strong { color: var(--cyan-soft); font: 650 22px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; text-shadow: 0 0 13px #6ff6df66; }
.scorebar .phase-value { color: var(--gold-soft); font-size: 11px; letter-spacing: .09em; text-shadow: 0 0 12px #d9bc7855; }
.play-area { display: flex; flex: 1; min-height: 0; flex-direction: column; align-items: center; }
.message { position: relative; display: flex; width: min(100%, 440px); min-height: 39px; align-items: center; justify-content: center; margin: 0 0 5px; border-left: 2px solid var(--cyan); border-right: 2px solid var(--cyan); border-radius: 5px; padding: 5px 25px; background: linear-gradient(90deg, #6ff6df0b, #071110cc 30%, #071110cc 70%, #6ff6df0b); color: #d9e8e4; text-align: center; font-size: 12px; line-height: 1.28; transition: color .2s, border-color .2s, background .2s; }
.message::before { content: ""; position: absolute; left: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.message[data-tone="scan"]::before { animation: signal 1s ease-in-out infinite; }
.message[data-tone="hit"], .message[data-tone="sunk"] { border-color: var(--red); color: var(--red-soft); background: linear-gradient(90deg, #ff665f12, #140b0bcc 30%, #140b0bcc 70%, #ff665f12); }
.message[data-tone="hit"]::before, .message[data-tone="sunk"]::before { background: var(--red); box-shadow: 0 0 12px var(--red); }
.message[data-tone="sunk"] { font-weight: 850; letter-spacing: .02em; }
.message[data-tone="miss"] { border-color: #86cafb; color: #c8e8ff; }
.message[data-tone="miss"]::before { background: #86cafb; box-shadow: 0 0 11px #86cafb; }
.board-tabs { display: grid; width: min(100%, 440px); grid-template-columns: 1fr 1fr; margin-bottom: 7px; border: 1px solid #315b55; border-radius: 10px; overflow: hidden; padding: 3px; gap: 3px; background: #040a0a; }
.board-tabs button { min-height: 34px; border: 0; border-radius: 7px; background: transparent; color: #74928c; font-size: 9px; font-weight: 850; letter-spacing: .1em; transition: background .2s, color .2s, box-shadow .2s; }
.board-tabs button[aria-selected="true"] { background: linear-gradient(135deg, #173a35, #0c211e); color: var(--cyan-soft); box-shadow: inset 0 0 0 1px #6ff6df55, 0 0 13px #6ff6df18; }
.board-frame { position: relative; flex: 0 0 auto; width: min(100%, calc(100svh - 365px), 440px); aspect-ratio: 1; overflow: hidden; border: 1px solid #4a8c80; border-radius: 18px; padding: 10px; background: radial-gradient(circle at center, #123c3b 0, #092326 54%, #040b0c 100%); box-shadow: inset 0 0 45px #000c, inset 0 1px #c9fff52e, 0 20px 60px #000c, 0 0 24px #6ff6df14; transition: border-color .25s, box-shadow .25s; }
.board-frame::before { content: ""; position: absolute; inset: 10px; z-index: 0; border-radius: 50%; pointer-events: none; opacity: .26; background: repeating-radial-gradient(circle, transparent 0 13%, #6ff6df25 13.3% 13.7%, transparent 14% 25%), linear-gradient(90deg, transparent 49.7%, #6ff6df25 50%, transparent 50.3%), linear-gradient(transparent 49.7%, #6ff6df25 50%, transparent 50.3%); }
.board-frame::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .18; background: repeating-linear-gradient(0deg, transparent 0 4px, #bffff50d 5px 6px); }
.frame-corner { position: absolute; z-index: 6; width: 19px; height: 19px; pointer-events: none; border-color: var(--cyan); opacity: .75; }
.corner-a { left: 5px; top: 5px; border-left: 2px solid; border-top: 2px solid; border-radius: 7px 0 0; }
.corner-b { right: 5px; top: 5px; border-right: 2px solid; border-top: 2px solid; border-radius: 0 7px 0 0; }
.corner-c { left: 5px; bottom: 5px; border-left: 2px solid; border-bottom: 2px solid; border-radius: 0 0 0 7px; }
.corner-d { right: 5px; bottom: 5px; border-right: 2px solid; border-bottom: 2px solid; border-radius: 0 0 7px; }
.radar-sweep { position: absolute; z-index: 1; left: 50%; top: 50%; width: 48%; height: 48%; transform-origin: 0 0; pointer-events: none; border-left: 1px solid #bafff3aa; background: conic-gradient(from 270deg at 0 0, #6ff6df31 0deg, transparent 35deg); animation: radar 6s linear infinite; }
.game-shell[data-phase="computer"] .radar-sweep { animation-duration: 1.5s; }
.ocean-grid { position: relative; z-index: 3; display: grid; width: 100%; height: 100%; grid-template-columns: .58fr repeat(10, 1fr); grid-template-rows: .58fr repeat(10, 1fr); gap: 2px; touch-action: manipulation; }
.axis { display: grid; place-items: center; color: #79a098; font: 800 7px/1 ui-monospace, SFMono-Regular, Consolas, monospace; text-shadow: 0 0 7px #6ff6df55; }
.cell { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #41766e38; border-radius: 3px; background: linear-gradient(145deg, #12383a99, #081c2099); box-shadow: inset 0 0 8px #0005; color: #fff; transition: transform .18s var(--spring), background .18s, border-color .18s, box-shadow .18s; }
.cell::before { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(135deg, transparent 35%, #bffff522 50%, transparent 65%); transform: translateX(-100%); }
.cell:hover:not(:disabled) { z-index: 2; border-color: var(--cyan); background: #18534f; box-shadow: inset 0 0 10px #6ff6df33, 0 0 10px #6ff6df55; }
.cell:hover:not(:disabled)::before { opacity: 1; transform: translateX(100%); transition: transform .5s ease; }
.cell:active:not(:disabled) { transform: scale(.86); }
.cell:disabled { cursor: default; }
.cell.is-placement-target { border-color: #95fff0; box-shadow: inset 0 0 0 1px #95fff0, 0 0 7px #6ff6df44; }
.cell.is-ship { z-index: 1; border-color: #d2b66d; background: linear-gradient(145deg, #cab270, #67542d 62%, #2d2517); box-shadow: inset 0 1px #fff3b577, inset 0 -3px #201b10aa, 0 0 7px #d9bc7844; }
.cell.is-ship::before { inset: 20%; opacity: 1; border: 1px solid #fff2b477; border-radius: 50%; background: radial-gradient(circle, #211b0e 0 24%, #e2c779 28% 42%, transparent 46%); transform: none; }
.cell.is-miss::after { content: ""; position: absolute; z-index: 2; width: 22%; aspect-ratio: 1; left: 39%; top: 39%; border: 1px solid #bde8ff; border-radius: 50%; background: #d7f4ff; box-shadow: 0 0 6px #8ed9ff; animation: sonar-miss .75s ease-out; }
.cell.is-hit { border-color: #ff7a72; background: radial-gradient(circle, #fff4c2 0 7%, #ffb35d 9% 17%, #ef544b 20% 38%, #5a1717 42% 63%, #08191a 68%); box-shadow: inset 0 0 11px #ff3f38aa, 0 0 10px #ff514a99; animation: impact .48s var(--spring); }
.cell.is-hit::after { content: ""; position: absolute; inset: 17%; border: 1px solid #ffd48d; border-radius: 50%; animation: shockwave .7s ease-out; }
.cell.is-sunk { border-color: var(--gold-soft); filter: saturate(.75); box-shadow: inset 0 0 0 2px #f3dda4, 0 0 12px #ff786e99; }
.cell.is-sunk::before { content: "×"; inset: 0; display: grid; place-items: center; opacity: 1; background: #1a080877; color: #ffe6ae; transform: none; font: 800 clamp(10px, 3vw, 18px)/1 ui-monospace, monospace; text-shadow: 0 0 8px #ff665f; }
.board-frame.pulse-hit { animation: frame-hit .62s ease; }
.board-frame.pulse-miss { animation: frame-miss .62s ease; }
.board-frame.pulse-sunk { animation: frame-sunk .72s ease; }
.placement-panel { width: min(100%, 440px); margin-top: 8px; }
.fleet-dock { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.ship-button { position: relative; display: flex; min-width: 0; min-height: 42px; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #31534c; border-radius: 9px; background: linear-gradient(160deg, #0d1918, #060b0b); color: #719088; box-shadow: inset 0 1px #cffff514; font-size: 8px; font-weight: 750; transition: transform .2s var(--spring), border-color .2s, background .2s, box-shadow .2s; }
.ship-button:hover { border-color: #68afa3; }
.ship-button:active { transform: scale(.94); }
.ship-button b { position: relative; display: flex; align-items: center; gap: 1px; border-radius: 99px; padding: 2px 3px; background: linear-gradient(#c7b06f, #68562f); box-shadow: inset 0 1px #ffedb5aa, 0 2px 4px #0009; }
.ship-button b::before { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; background: #251f13; opacity: .55; }
.ship-button i { position: relative; width: 6px; height: 7px; border-radius: 50%; background: #dbc785; box-shadow: inset 0 0 0 1px #5b4928; }
.ship-button small { margin-top: 2px; color: #809e97; font: 700 8px/1 ui-monospace, monospace; }
.ship-button.is-selected { border-color: var(--cyan); color: var(--cyan-soft); background: #12322e; box-shadow: inset 0 0 13px #6ff6df1f, 0 0 10px #6ff6df33; }
.ship-button.is-placed { border-color: #9d844e; color: #f2e8d1; }
.ship-button.is-placed::after { content: "✓"; position: absolute; right: 4px; top: 2px; color: var(--cyan); font-size: 9px; text-shadow: 0 0 8px var(--cyan); }
.placement-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 7px 0; }
.secondary-button { min-height: 43px; border: 1px solid #57766f; border-radius: 10px; background: linear-gradient(145deg, #0c1716, #070b0b); padding: 7px 10px; color: #d5e5e1; }
.secondary-button:hover { border-color: var(--cyan); background: #102724; }
.compact-action { min-height: 38px; font-size: 11px; }
.primary-button { position: relative; display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; gap: 12px; overflow: hidden; border: 1px solid var(--gold); border-radius: 10px; background: linear-gradient(110deg, #b38d3d, #f1da92 50%, #b38d3d); color: #0a0906; box-shadow: inset 0 1px #fff8c799, 0 7px 18px #0007; font-weight: 850; }
.primary-button::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(90deg, transparent, #fff8, transparent); }
.primary-button:hover { background: var(--gold-soft); }
.primary-button:hover::after { animation: button-scan .65s ease; }
.primary-button:disabled { opacity: .38; cursor: default; box-shadow: none; }
.battle-legend { display: flex; width: min(100%, 440px); min-height: 34px; align-items: center; justify-content: center; gap: 16px; color: #91aaa4; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.battle-legend span { display: flex; align-items: center; gap: 6px; }
.battle-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.legend-hit { background: var(--red); box-shadow: 0 0 7px var(--red); }
.legend-miss { border: 1px solid #bde8ff; background: #d7f4ff; box-shadow: 0 0 6px #8ed9ff; }
.battle-legend span:last-child { margin-left: auto; color: var(--gold-soft); font-weight: 850; }
.ad-reservation { display: grid; min-height: 25px; place-items: center; margin-top: 4px; border: 1px dashed #29433d; border-radius: 8px; color: #567169; font-size: 7px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
dialog { width: min(calc(100% - 28px), 430px); max-height: calc(100dvh - 28px); margin: auto; overflow: auto; border: 1px solid #4e8f83; border-radius: 20px; background: radial-gradient(circle at 100% 0, #0e4a4133, transparent 38%), linear-gradient(145deg, #111c1a, #070909 70%); color: var(--ink); padding: 22px; box-shadow: 0 32px 110px #000e, inset 0 1px #cffff51d; }
dialog::backdrop { background: #000d; backdrop-filter: blur(8px); }
.dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.dialog-top h2, dialog h2 { margin: 0; color: var(--gold-soft); font: 400 31px/1.05 Georgia, serif; }
.dialog-top .eyebrow { margin: 0; }
.dialog-top .icon-button { width: 38px; height: 38px; font-size: 17px; }
fieldset { margin: 0 0 16px; padding: 0; border: 0; }
legend { display: block; margin-bottom: 9px; color: var(--gold-soft); font-size: 13px; font-weight: 800; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.choice-grid label { cursor: pointer; }
.choice-grid input { position: absolute; opacity: 0; }
.choice-grid span { display: grid; min-height: 67px; place-items: center; border: 1px solid #365b54; border-radius: 11px; background: #08100f; font-size: 14px; font-weight: 800; }
.choice-grid small { display: block; color: var(--muted); font-size: 8px; font-weight: 600; }
.choice-grid input:checked + span { border-color: var(--cyan); background: #11302c; box-shadow: 0 0 14px #6ff6df25; }
.choice-grid input:focus-visible + span { outline: 3px solid var(--cyan-soft); }
.switch-row { display: flex; min-height: 51px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.switch-row input { appearance: none; position: relative; width: 40px; height: 24px; margin: 0; border: 1px solid #69837c; border-radius: 20px; background: #2b3734; }
.switch-row input::before { content: ""; position: absolute; width: 16px; height: 16px; top: 3px; left: 3px; border-radius: 50%; background: #f5f0e5; transition: transform .2s; }
.switch-row input:checked { border-color: var(--cyan); background: var(--cyan); }
.switch-row input:checked::before { transform: translateX(16px); background: #06110f; }
#settings-form > .primary-button { margin-top: 16px; }
.dialog-buttons { display: flex; gap: 8px; margin-top: 22px; }
.dialog-buttons .primary-button { flex: 1; }
.eyebrow { margin: 0 0 9px; color: var(--cyan); font-size: 11px; font-weight: 850; letter-spacing: 1.5px; }
.record-panel { padding: 14px; border: 1px solid #355a52; border-radius: 12px; background: #050a09; }
.record-grid { display: grid; grid-template-columns: 1fr auto; gap: 9px; color: #c9d8d4; font-size: 13px; }
.record-grid strong { color: var(--cyan-soft); font-size: 14px; }
.dialog-note { margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.rules h3 { margin: 22px 0 8px; color: var(--gold-soft); font: 400 24px/1.1 Georgia, serif; }
.rules p, dialog > p, .result-dialog > p { color: #d6e1de; font-size: 14px; line-height: 1.55; }
.control-rule { display: flex; align-items: flex-start; gap: 12px; margin: 12px 0; }
.control-rule p { margin: 5px 0; }
.control-symbol { flex: 0 0 36px; height: 36px; display: grid; place-items: center; border: 1px solid #554625; border-radius: 50%; background: #15130e; color: #ecd59c; font-size: 22px; }
.sound-muted { opacity: .55; }
.info-control { font: italic 700 18px Georgia, serif; }
.result-dialog { text-align: center; }
.result-mark { position: relative; display: grid; width: 84px; height: 84px; place-items: center; margin: 8px auto 18px; border: 1px solid var(--cyan); border-radius: 50%; color: var(--gold-soft); background: repeating-radial-gradient(circle, transparent 0 18%, #6ff6df2d 19% 20%, transparent 21% 38%); box-shadow: 0 0 35px #6ff6df3d, inset 0 0 24px #6ff6df1c; font-size: 42px; }
.result-mark::before, .result-mark::after { content: ""; position: absolute; background: #6ff6df55; }
.result-mark::before { width: 1px; height: 100%; }
.result-mark::after { width: 100%; height: 1px; }
.result-dialog h2 { font-size: 34px; }
.result-dialog .primary-button { margin-top: 20px; }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation: none !important; transition-duration: .01ms !important; }
@keyframes radar { to { transform: rotate(360deg); } }
@keyframes signal { 50% { opacity: .3; box-shadow: 0 0 2px currentColor; } }
@keyframes impact { 0% { transform: scale(.5); filter: brightness(2); } 65% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes shockwave { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.8); opacity: 0; } }
@keyframes sonar-miss { from { transform: scale(.2); opacity: 1; } 70% { transform: scale(2.8); opacity: .25; } to { transform: scale(1); opacity: 1; } }
@keyframes frame-hit { 35% { border-color: var(--red); box-shadow: inset 0 0 45px #ff30245c, 0 0 34px #ff514a70; } }
@keyframes frame-miss { 35% { border-color: #86cafb; box-shadow: inset 0 0 45px #6bbdff38, 0 0 28px #6bbdff55; } }
@keyframes frame-sunk { 0%, 100% { transform: translateX(0); } 18% { transform: translateX(-3px); } 36% { transform: translateX(3px); border-color: var(--red); box-shadow: inset 0 0 55px #ff302477, 0 0 38px #ff514a88; } 54% { transform: translateX(-2px); } }
@keyframes button-scan { to { transform: translateX(120%); } }
@media (max-width: 375px) {
  .game-shell { padding-inline: 9px; }
  .game-identity h1 { font-size: 25px; }
  .top-actions { gap: 2px; }
  .icon-button { width: 35px; flex-basis: 35px; }
  .board-frame { width: min(100%, calc(100svh - 354px)); padding: 8px; }
  .message { min-height: 35px; padding-inline: 20px 7px; font-size: 11px; }
  .message::before { left: 7px; }
  .ship-button { font-size: 7px; }
}
@media (max-height: 720px) {
  .game-shell { min-height: 555px; padding-top: 7px; }
  .topbar { margin-bottom: 5px; }
  .scorebar { margin-bottom: 4px; padding-block: 5px; }
  .message { min-height: 31px; margin-bottom: 3px; }
  .board-frame { width: min(100%, calc(100svh - 306px), 380px); }
  .ship-button { min-height: 32px; }
  .placement-actions { margin-block: 4px; }
  .primary-button { min-height: 39px; }
  .ad-reservation { min-height: 20px; }
}
@media (min-width: 700px) and (orientation: portrait) {
  .game-shell { width: min(100%, 760px); padding: 22px 34px 12px; }
  .game-identity h1 { font-size: 42px; }
  .topbar { margin-bottom: 16px; }
  .icon-button { width: 46px; height: 46px; flex-basis: 46px; }
  .scorebar { margin-bottom: 11px; padding-block: 12px; }
  .scorebar span { font-size: 10px; }
  .scorebar strong { font-size: 29px; }
  .message { width: min(90vw, 650px); min-height: 47px; font-size: 16px; }
  .board-tabs, .placement-panel, .battle-legend { width: min(90vw, 650px); }
  .board-frame { width: min(90vw, 575px, calc(100svh - 440px)); padding: 13px; border-radius: 24px; }
  .axis { font-size: 10px; }
  .ocean-grid { gap: 3px; }
  .cell { border-radius: 5px; }
  .ship-button { min-height: 54px; font-size: 10px; }
  .ship-button i { width: 9px; height: 10px; }
  .placement-actions { margin-block: 9px; }
  .primary-button { min-height: 49px; }
}
@media (min-width: 800px) and (orientation: landscape) {
  .game-shell { width: min(100%, 1020px); display: grid; grid-template-columns: 290px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 32px; }
  .topbar { grid-column: 1 / -1; }
  .scorebar { grid-column: 1; grid-row: 2; align-self: start; margin-top: 67px; grid-template-columns: 1fr; }
  .scorebar > div { padding: 13px; border-right: 0; border-bottom: 1px solid var(--line); }
  .scorebar > div:last-child { border-bottom: 0; }
  .scorebar span { font-size: 10px; }
  .scorebar strong { font-size: 28px; }
  .play-area { grid-column: 2; grid-row: 2 / 4; }
  .message, .board-tabs, .placement-panel, .battle-legend { width: min(58vh, 500px); }
  .board-frame { width: min(58vh, 500px); }
  .ad-reservation { grid-column: 1; grid-row: 3; }
}
html[lang="de"] .game-identity h1 { font-size: 20px; letter-spacing: -1px; }
@media (min-width: 700px) and (orientation: portrait) { html[lang="de"] .game-identity h1 { font-size: 42px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }