:root {
  color-scheme: dark;
  --navy: #071a24; --surface: #102b36; --surface-raised: #173743;
  --ivory: #f5f1e8; --muted: #abc0c6; --quiet: #829fa8;
  --coral: #f58b74; --coral-bright: #ffab94; --teal: #83c9c0;
  --line: rgba(174,210,211,.15); --line-strong: rgba(174,210,211,.29);
  --sans: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono: ui-monospace,'Cascadia Code',Consolas,monospace;
  font-family: var(--sans); font-synthesis: none; text-rendering: optimizeLegibility;
  background: var(--navy); color: var(--ivory); -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box }
html { min-width: 320px; scroll-behavior: smooth }
body { margin: 0; min-height: 100dvh; background: radial-gradient(ellipse at 80% 0%,rgba(47,105,113,.12),transparent 48%),var(--navy) }
body::before { content: ''; position: fixed; z-index:-1; inset:0; pointer-events:none; opacity:.1; background-image:radial-gradient(rgba(190,215,212,.2) .6px,transparent .6px); background-size:7px 7px }
button,input,textarea,select { font: inherit }
button { color: inherit; cursor: pointer; border:0; -webkit-tap-highlight-color:transparent }
button,a,input,textarea,select { touch-action:manipulation }
button:disabled,button[aria-disabled='true'] { cursor: not-allowed }
a { color:inherit; text-decoration:none }
button,a { transition: background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,translate .18s ease }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:2px solid var(--teal); outline-offset:4px }
h1[tabindex='-1']:focus,h2[tabindex='-1']:focus { outline:none }
::selection { background:var(--coral);color:var(--navy) }
svg { display:block;max-width:100%;flex-shrink:0 }
h1,h2,h3,p { margin-top:0 }
.hidden,[hidden] { display:none!important }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.app-shell { width:min(1260px,100%);margin:auto;padding:0 52px;min-height:100dvh;display:flex;flex-direction:column }
.site-header { height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);flex-shrink:0 }
.brand { display:inline-flex;align-items:center;gap:12px;background:transparent;padding:0;text-align:left }
.brand-mark { width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(245,139,116,.4);border-radius:50%;color:var(--coral) }
.brand-mark svg { width:23px;height:23px }
.brand-name { display:block;font-size:23px;font-weight:750;letter-spacing:.16em;line-height:1.1 }
.brand-sub { display:block;color:var(--muted);font-size:8px;font-weight:500;letter-spacing:.24em;margin-top:6px }
.header-actions { display:flex;align-items:center;gap:10px }
.online-pill { display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:11px;padding-right:10px }
.online-pill::before { content:'';width:5px;height:5px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(131,201,192,.08) }
.online-pill>i { display:none }
.icon-btn { min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted) }
.icon-btn:hover { border-color:var(--line-strong);background:var(--surface);color:var(--ivory) }
.icon-btn[aria-pressed='true'] { color:var(--teal);border-color:rgba(131,201,192,.45) }
.text-btn { min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 6px;background:transparent;color:var(--muted);font-size:12px;font-weight:500 }
.text-btn:hover { color:var(--ivory) }
.primary-btn,.secondary-btn { min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 21px;border:1px solid transparent;border-radius:10px;font-size:13px;font-weight:650;line-height:1.4 }
.primary-btn { color:#14252c;background:var(--coral);border-color:var(--coral);box-shadow:0 6px 22px rgba(245,139,116,.07) }
.primary-btn:hover:not(:disabled) { background:var(--coral-bright);border-color:var(--coral-bright);translate:0 -2px;box-shadow:0 8px 26px rgba(245,139,116,.15) }
.secondary-btn { color:var(--ivory);background:rgba(16,43,54,.4);border-color:var(--line-strong) }
.secondary-btn:hover:not(:disabled) { background:var(--surface-raised);border-color:rgba(174,210,211,.45) }
.primary-btn:active:not(:disabled),.secondary-btn:active:not(:disabled) { translate:0 0 }
.primary-btn:disabled,.secondary-btn:disabled { opacity:.42;box-shadow:none }
button svg { flex:0 0 auto }
.main { width:100%;flex:1 }
.site-footer { min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line);font-size:10px;line-height:1.7;color:var(--quiet) }
.site-footer>span:last-child { display:inline-flex;align-items:center;justify-content:flex-end;gap:7px;text-align:right }
.site-footer svg { width:12px;height:12px;color:var(--coral) }
.footer-separator { color:var(--teal);padding:0 3px }
.eyebrow,.stage-kicker { display:flex;align-items:center;gap:10px;color:var(--teal);font-size:10px;line-height:1.6;font-weight:650;letter-spacing:.2em;text-transform:uppercase;margin-bottom:20px }
.eyebrow::before { content:'';width:24px;height:1px;flex-shrink:0;background:currentColor;opacity:.65 }
.landing { min-height:580px;padding:48px 0 38px;display:grid;grid-template-columns:1.04fr 1fr;align-items:center;gap:35px }
.hero-copy { position:relative;z-index:1 }
.hero-title { font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(48px,5.3vw,72px);letter-spacing:-.052em;line-height:1.07;margin:0 0 25px }
.hero-title em,.hero-title span { color:var(--coral);font-weight:inherit }
.hero-description { max-width:365px;color:var(--muted);font-size:14px;line-height:1.85;margin-bottom:27px }
.hero-actions,.lobby-actions { display:flex;align-items:center;flex-wrap:wrap;gap:10px }
.fine-print,.form-note { color:var(--quiet);font-size:11px;line-height:1.8;margin:17px 0 0 }
.fine-print svg,.form-note svg { display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-right:5px }
.hero-art { width:100%;max-width:510px;justify-self:end;position:relative;aspect-ratio:1;display:grid;place-items:center }
.hero-art::before { content:'';position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,rgba(131,201,192,.07),transparent 70%);pointer-events:none }
.radar-illustration { width:100%;height:auto;overflow:visible }
.art-caption { position:absolute;left:10%;right:10%;bottom:-4px;display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:8px;letter-spacing:.13em;color:var(--quiet) }
.fleet-float { animation:fleet-float 7s ease-in-out infinite }
.fleet-float:nth-of-type(2) { animation-delay:-2.5s }
.fleet-float:nth-of-type(3) { animation-delay:-4.5s }
.sonar-sweep { transform-box:view-box;transform-origin:center;animation:sonar-sweep 24s linear infinite;opacity:.25 }
.feature-strip { display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:28px 0 32px;border-top:1px solid var(--line) }
.feature { display:flex;align-items:flex-start;gap:15px }
.feature-number { padding-top:3px;color:var(--teal);font-family:var(--mono);font-size:10px }
.feature h2,.feature h3 { font-size:13px;font-weight:600;line-height:1.5;margin:0 0 6px }
.feature p { color:var(--quiet);font-size:11px;line-height:1.7;margin:0 }
.setup-panel,.lobby-form { width:min(100%,540px);margin:35px auto 50px }
.stage-heading { margin:18px 0 25px }
.stage-heading h1,.stage-heading h2 { font:400 clamp(30px,3.3vw,42px)/1.17 Georgia,'Times New Roman',serif;letter-spacing:-.035em;margin:0 0 10px }
.stage-heading>p:not(.stage-kicker) { color:var(--muted);font-size:13px;line-height:1.75;margin:0 }
.stage-heading .stage-kicker { font-size:9px;margin-bottom:10px }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px }
.field { min-width:0;margin-bottom:21px }
.field label { display:block;color:var(--ivory);font-size:12px;font-weight:600;margin-bottom:9px;line-height:1.6 }
.field label span { display:block;color:var(--quiet);font-size:10px;font-weight:400;margin-top:3px }
.field input,.field select,.field textarea,.lobby-form input:not([type='checkbox']):not([type='range']) { width:100%;display:block;padding:13px 15px;min-height:50px;border:1px solid var(--line-strong);border-radius:10px;background:rgba(16,43,54,.72);color:var(--ivory);font-size:15px }
.field input:hover,.field select:hover { border-color:rgba(131,201,192,.5) }
.field input::placeholder,.field textarea::placeholder { color:var(--quiet);opacity:.8 }
.field small { display:block;color:var(--quiet);font-size:11px;line-height:1.7;margin-top:8px }
.input-code { font-family:var(--mono)!important;font-size:25px!important;letter-spacing:.22em;text-align:center;text-transform:uppercase }
.choice-grid { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:13px 0 18px }
.choice { min-height:55px;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:transparent;text-align:left;color:var(--muted);font-size:12px;line-height:1.5 }
.choice.selected { border-color:rgba(131,201,192,.6);color:var(--teal);background:rgba(131,201,192,.07) }
.choice:hover { background:rgba(16,43,54,.7) }
.choice svg { width:18px;height:18px }
.setup-actions { display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:24px;padding-top:21px;border-top:1px solid var(--line) }
.setup-actions p { color:var(--quiet);font-size:11px;line-height:1.7;margin:0 }
.toggle-row { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.6 }
.toggle-row strong,.toggle-row label { color:var(--ivory);font-size:13px;font-weight:500 }
.toggle-row small { display:block;color:var(--quiet);font-size:11px;margin-top:3px }
.toggle-row input[type='checkbox'] { width:20px;height:20px;accent-color:var(--teal);flex-shrink:0 }
.toggle-row button[role='switch'] { position:relative;flex-shrink:0;width:44px;height:26px;padding:3px;border-radius:20px;background:var(--surface-raised);border:1px solid var(--line-strong) }
.toggle-row button[role='switch']::after { content:'';display:block;width:18px;height:18px;border-radius:50%;background:var(--quiet);transition:translate .18s,background .18s }
.toggle-row button[role='switch'][aria-checked='true'] { background:rgba(131,201,192,.2);border-color:var(--teal) }
.toggle-row button[role='switch'][aria-checked='true']::after { translate:17px 0;background:var(--teal) }
input[type='range'] { width:100%;accent-color:var(--coral);min-height:30px;cursor:pointer }
.room-shell { width:min(100%,1050px);margin:0 auto;padding-bottom:26px }
.room-bar { min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line) }
.room-code { display:inline-flex;align-items:center;gap:9px;padding:6px 0;min-height:44px;background:transparent;color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.1em }
.room-code strong { color:var(--ivory);font-size:13px;letter-spacing:.14em }
.room-code svg { width:15px;height:15px;color:var(--quiet) }
.connection-status { display:inline-flex;align-items:center;gap:7px;color:var(--teal);font-size:10px;line-height:1.5 }
.connection-status::before { content:'';display:block;flex-shrink:0;width:5px;height:5px;border-radius:50%;background:currentColor }
.connection-status.connecting,.connection-status.reconnecting,.connection-status.offline { color:var(--coral) }
.connection-status i { display:none }
.players-strip { display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;margin:17px auto;max-width:800px }
.player-slot { display:flex;align-items:center;gap:10px;min-width:0;padding:9px 12px;border:1px solid transparent;border-radius:11px;transition:border-color .25s,background .25s }
.player-slot:last-child { justify-content:flex-end;text-align:right }
.player-slot.active { border-color:rgba(131,201,192,.3);background:rgba(131,201,192,.04) }
.player-slot strong,.player-slot .player-name { display:block;color:var(--ivory);font-size:13px;font-weight:600;line-height:1.5;overflow-wrap:anywhere }
.player-slot small,.player-slot .player-meta,.rival-status { display:block;color:var(--quiet);font-size:10px;line-height:1.5 }
.avatar { width:39px;height:39px;flex-shrink:0;display:grid;place-items:center;border:1px solid rgba(245,139,116,.25);border-radius:50%;background:rgba(245,139,116,.07);color:var(--coral);font:20px Georgia,serif }
.avatar.player-1,.player-1 .avatar { background:rgba(131,201,192,.07);border-color:rgba(131,201,192,.25);color:var(--teal) }
.avatar.empty { background:transparent;color:var(--quiet);border-style:dashed;border-color:var(--line-strong) }
.session-score { display:flex;align-items:center;justify-content:center;gap:8px;color:var(--quiet);font-family:var(--mono);font-size:12px;white-space:nowrap }
.session-score strong,.session-score b { color:var(--ivory);font-size:17px;font-weight:500 }
.session-score small { display:block;font-size:8px;letter-spacing:.12em }
.waiting-room { min-height:470px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px 15px 45px }
.waiting-room h1 { font:400 clamp(31px,3.7vw,45px)/1.16 Georgia,serif;letter-spacing:-.035em;margin-bottom:13px }
.waiting-room>p { max-width:420px;color:var(--muted);font-size:13px;line-height:1.8 }
.waiting-orbit { width:88px;height:88px;position:relative;display:grid;place-items:center;margin:10px 0 30px;border:1px solid rgba(131,201,192,.3);border-radius:50%;color:var(--teal);background:radial-gradient(circle,rgba(131,201,192,.08),transparent 70%) }
.waiting-orbit svg { width:32px;height:32px }
.waiting-orbit::before { content:'';position:absolute;inset:-10px;border:1px dashed rgba(131,201,192,.22);border-radius:50%;animation:orbit 24s linear infinite }
.waiting-orbit::after { content:'';position:absolute;inset:-10px;border:1px solid transparent;border-top-color:var(--coral);border-radius:50%;animation:orbit 12s linear infinite }
.invite-card { width:min(100%,390px);padding:22px;border:1px solid var(--line-strong);border-radius:14px;background:rgba(16,43,54,.5);margin:9px 0 17px }
.invite-card>label,.invite-card>p,.invite-card>small { display:block;color:var(--quiet);font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px }
.code-display { display:block;font-family:var(--mono);font-size:39px;letter-spacing:.16em;color:var(--ivory);line-height:1.3;padding-left:.16em;margin:2px 0 20px }
.invite-actions { display:flex;justify-content:center;gap:8px }
.invite-actions .secondary-btn,.invite-actions .primary-btn { min-height:44px;font-size:11px;padding:11px 13px }
.reconnect-banner { padding:11px 15px;border:1px solid rgba(245,139,116,.28);border-radius:9px;background:rgba(245,139,116,.06);color:var(--coral);font-size:12px;line-height:1.6;margin:13px 0;display:flex;gap:10px;align-items:center }
.game-layout { display:grid;grid-template-columns:220px minmax(0,480px);gap:30px;align-items:start;width:min(100%,780px);margin:0 auto }
.battle-layout { display:grid;grid-template-columns:minmax(0,480px) minmax(190px,240px);gap:28px;align-items:start;max-width:780px;margin:0 auto }
.game-sidebar { min-width:0;padding-top:3px }
.player-card { display:flex;align-items:center;gap:11px;padding-bottom:17px;margin-bottom:17px;border-bottom:1px solid var(--line) }
.player-name { font-size:14px;font-weight:600;margin:0;line-height:1.5;overflow-wrap:anywhere }
.player-meta { display:block;color:var(--quiet);font-size:10px;line-height:1.5;margin-bottom:3px }
.fleet-heading { display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 13px }
.fleet-heading h3 { font-size:10px;color:var(--muted);font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin:0 }
.fleet-heading>span { font-family:var(--mono);font-size:10px;color:var(--teal) }
.fleet-list { display:flex;flex-direction:column;gap:6px;margin-bottom:15px }
.ship-option { width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:58px;padding:11px 12px;text-align:left;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);font-size:12px;line-height:1.45 }
button.ship-option:hover { border-color:var(--line);background:rgba(16,43,54,.6) }
.ship-option.selected { border-color:rgba(131,201,192,.5);background:rgba(131,201,192,.07);color:var(--ivory) }
.ship-option.placed { color:var(--ivory) }
.ship-option strong { font-weight:550 }
.ship-dots { display:flex;gap:3px;margin-top:7px }
.ship-dot { width:12px;height:4px;display:block;background:var(--line-strong);border-radius:2px }
.selected .ship-dot,.placed .ship-dot { background:var(--teal) }
.ship-status { color:var(--quiet);font-size:10px;white-space:nowrap }
.placed .ship-status { color:var(--teal) }
.ship-status svg { width:15px;height:15px }
.tools-row { display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 }
.tools-row .secondary-btn { min-height:44px;padding:11px 10px;font-size:11px;gap:6px;flex:1 }
.tools-row svg { width:16px;height:16px }
.clear-btn { justify-content:flex-start;font-size:11px }
.placement-help { color:var(--quiet);font-size:11px;line-height:1.8;margin:15px 0 0 }
.placement-help kbd { color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:1px 3px;font-size:10px }
.board-panel { min-width:0;width:100%;max-width:480px;padding:17px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(150deg,rgba(17,46,58,.6),rgba(10,32,43,.72));box-shadow:0 16px 60px rgba(0,0,0,.07);position:relative }
.board-header { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px;min-height:35px }
.board-header .eyebrow { font-size:8px;margin:0 0 6px;letter-spacing:.17em }
.board-header .eyebrow::before { width:18px }
.board-title { font-size:13px;font-weight:600;line-height:1.4;margin:0 }
.board-badge { display:inline-flex;align-items:center;gap:6px;color:var(--teal);border:1px solid rgba(131,201,192,.22);border-radius:5px;padding:5px 7px;font-size:9px;white-space:nowrap }
.board-badge svg { width:14px;height:14px }
.board-wrap { position:relative;width:100% }
.board-grid { display:grid;grid-template-columns:20px repeat(8,minmax(0,1fr));gap:3px;width:100%;isolation:isolate }
.board-row { display:contents }
.axis-label { min-width:0;min-height:17px;display:grid;place-items:center;color:var(--quiet);font-family:var(--mono);font-size:9px;line-height:1 }
.cell { min-width:0;width:100%;aspect-ratio:1;display:grid;place-items:center;position:relative;overflow:hidden;padding:0;border:1px solid rgba(133,180,189,.11);border-radius:5px;background:rgba(23,55,68,.58);color:var(--muted);transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;isolation:isolate }
.cell::after { content:'';position:absolute;width:2px;height:2px;background:rgba(142,187,196,.2);border-radius:50%;pointer-events:none }
.cell:not(:disabled):not([aria-disabled='true']):hover { background:rgba(131,201,192,.16);border-color:rgba(131,201,192,.48) }
.cell:focus-visible { outline-offset:1px;z-index:4 }
.cell[aria-disabled='true'] { cursor:default }
.cell.ship { background:rgba(131,201,192,.19);border-color:rgba(131,201,192,.5);color:var(--teal) }
.cell.ship::after { width:40%;height:55%;border-radius:40% 40% 3px 3px;border:1px solid rgba(131,201,192,.5);background:rgba(131,201,192,.11) }
.cell.preview { background:rgba(131,201,192,.29);border-color:var(--teal);box-shadow:inset 0 0 0 1px rgba(131,201,192,.25) }
.cell.invalid { background:rgba(245,139,116,.16);border-color:var(--coral) }
.cell.target { background:rgba(245,139,116,.12);border-color:var(--coral);box-shadow:inset 0 0 0 1px var(--coral);color:var(--coral) }
.cell.target::after { display:none }
.cell.target svg { width:51%;height:51% }
.cell.hit { color:var(--coral);background:rgba(245,139,116,.16);border-color:rgba(245,139,116,.38) }
.cell.miss { color:#a0bac4;background:rgba(26,59,74,.5) }
.cell.sunk { color:#ffc6b5;background:rgba(245,139,116,.25);border-color:rgba(245,139,116,.65) }
.cell.hit::after,.cell.miss::after,.cell.sunk::after { display:none }
.cell-mark { display:grid;place-items:center;position:relative;z-index:1;font-size:22px;line-height:1;font-weight:550 }
.cell-mark svg { width:18px;height:18px }
.cell.miss .cell-mark { font-size:29px;line-height:.7 }
.board-legend { display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:9px;color:var(--quiet);line-height:1.5 }
.board-legend>span { display:inline-flex;gap:6px;align-items:center }
.legend-dot { display:inline-block;width:5px;height:5px;background:var(--teal);border-radius:50% }
.legend-dot.hit { background:var(--coral) }
.legend-dot.miss { background:#a0bac4 }
.action-bar { margin-top:15px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:13px }
.action-bar .primary-btn { min-height:45px;padding:11px 15px;font-size:12px;flex-shrink:0 }
.status-text { min-width:0 }
.status-title { display:block;font-size:12px;font-weight:600;line-height:1.5;margin-bottom:3px }
.status-description { display:block;color:var(--quiet);font-size:10px;line-height:1.6 }
.turn-banner { max-width:780px;margin:5px auto 17px;padding:11px 15px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:12px;line-height:1.6;background:rgba(16,43,54,.22) }
.turn-banner.your-turn,.your-turn .turn-banner { color:var(--teal);border-color:rgba(131,201,192,.25);background:rgba(131,201,192,.05) }
.turn-banner strong { display:block;font-size:13px;font-weight:600;color:var(--ivory) }
.turn-banner small,.turn-banner p { display:block;font-size:11px;color:var(--quiet);margin:0 }
.turn-banner>svg { width:19px;height:19px;flex-shrink:0 }
.turn-banner.your-turn strong { color:var(--teal) }
.turn-banner .turn-count { color:var(--quiet);font-family:var(--mono);font-size:10px;white-space:nowrap }
.combat-status { display:flex;align-items:center;gap:10px;min-height:41px;margin-top:13px;padding:9px 11px;border-radius:8px;border:1px solid var(--line);background:rgba(16,43,54,.4);color:var(--muted);font-size:11px;line-height:1.6 }
.combat-status.hit,.combat-status.sunk,.combat-status.success { color:var(--coral);border-color:rgba(245,139,116,.25);background:rgba(245,139,116,.05) }
.combat-status strong,.combat-status span { display:block }
.combat-status small { color:var(--quiet);font-size:10px }
.mini-board { width:100%;margin:12px 0 18px;padding:11px;border:1px solid var(--line);border-radius:11px;background:rgba(16,43,54,.25) }
.mini-board .board-grid { grid-template-columns:12px repeat(8,minmax(0,1fr));gap:2px }
.mini-board .axis-label { font-size:7px;min-height:11px }
.mini-board .cell { border-radius:3px }
.mini-board .cell-mark { font-size:15px }
.mini-board .cell.miss .cell-mark { font-size:19px }
.mini-board h3,.mini-board-title { color:var(--muted);font-size:10px;letter-spacing:.08em;font-weight:500;margin:0 0 11px }
.stats-row { display:flex;gap:0;margin:17px 0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line) }
.stat { flex:1;min-width:0;padding-right:10px }
.stat+.stat { border-left:1px solid var(--line);padding-left:13px }
.stat-value { display:block;font-size:23px;font-weight:450;line-height:1.2;margin-bottom:6px }
.stat-label { display:block;color:var(--quiet);font-size:9px;line-height:1.5 }
.fleet-status { display:flex;flex-direction:column;gap:9px;margin:15px 0;color:var(--muted);font-size:11px;line-height:1.5 }
.fleet-status>div { display:flex;align-items:center;justify-content:space-between;gap:8px }
.fleet-status .sunk { color:var(--coral) }
.fleet-status .ship-dots { margin:0 }
.fleet-status small { color:var(--quiet);font-size:9px }
.tab-row { display:flex;gap:5px;padding:4px;border:1px solid var(--line);border-radius:9px;background:rgba(3,18,25,.4);margin-bottom:12px }
.tab-btn { flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 10px;border-radius:6px;background:transparent;color:var(--quiet);font-size:11px;font-weight:550 }
.tab-btn.active { color:var(--ivory);background:var(--surface-raised);box-shadow:0 2px 6px rgba(0,0,0,.08) }
.tab-btn svg { width:15px;height:15px }
.result-banner { display:flex;align-items:center;gap:10px;margin-top:13px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;color:var(--muted);font-size:12px }
.result-banner.success { color:var(--coral);border-color:rgba(245,139,116,.3);background:rgba(245,139,116,.05) }
.result-banner div strong,.result-banner div span { display:block;line-height:1.6 }
.result-banner div span { font-size:10px;color:var(--quiet) }
.victory-screen { max-width:650px;min-height:480px;margin:0 auto;padding:35px 15px 50px;display:flex;flex-direction:column;align-items:center;text-align:center }
.victory-emblem { width:82px;height:82px;position:relative;display:grid;place-items:center;border:1px solid rgba(245,139,116,.38);border-radius:50%;color:var(--coral);background:radial-gradient(circle,rgba(245,139,116,.1),transparent 70%);margin:8px 0 27px }
.victory-emblem::before { content:'';position:absolute;inset:-9px;border:1px solid rgba(245,139,116,.12);border-radius:50% }
.victory-emblem svg { width:34px;height:34px }
.victory-title { font:400 clamp(33px,4vw,50px)/1.15 Georgia,serif;letter-spacing:-.035em;margin-bottom:16px;overflow-wrap:anywhere }
.victory-title em { color:var(--coral) }
.victory-screen>p:not(.eyebrow) { color:var(--muted);font-size:13px;line-height:1.8 }
.victory-screen .stats-row { width:min(100%,390px);margin:15px 0 20px }
.victory-screen .stat { padding-left:12px;padding-right:12px }
.victory-screen .hero-actions { justify-content:center }
.victory-screen .session-score { margin:0 0 20px }
.rematch-status { color:var(--teal);font-size:12px;line-height:1.8;margin:17px 0 0;max-width:350px }
.prize-card { display:flex;align-items:center;gap:14px;padding:15px 20px;border:1px solid rgba(245,139,116,.25);border-radius:11px;background:rgba(245,139,116,.04);text-align:left;max-width:420px;margin:0 0 24px;font-size:14px;line-height:1.6;overflow-wrap:anywhere }
.prize-card>svg { width:24px;height:24px;color:var(--coral) }
.prize-card span,.prize-card small { display:block;color:var(--coral);font-size:9px;letter-spacing:.13em;margin-bottom:6px }
.prize-card strong { font-weight:500 }
.modal-backdrop { position:fixed;z-index:50;inset:0;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(2,13,19,.83);backdrop-filter:blur(8px);animation:veil-in .17s ease }
.modal-card { width:min(100%,500px);max-height:min(86dvh,750px);overflow-y:auto;overscroll-behavior:contain;position:relative;padding:31px;background:#102b36;border:1px solid var(--line-strong);border-radius:16px;box-shadow:0 25px 100px rgba(0,0,0,.4);animation:enter .22s ease both }
.modal-card h2 { font:400 30px/1.2 Georgia,serif;letter-spacing:-.025em;margin:0 32px 19px 0 }
.modal-card p { color:var(--muted);font-size:13px;line-height:1.8 }
.modal-close { position:absolute;top:15px;right:15px;width:36px;min-width:36px;height:36px }
.modal-actions { display:flex;flex-wrap:wrap;gap:10px;margin-top:25px }
.rules-list { padding-left:20px;margin:0;color:var(--muted);font-size:12px;line-height:1.8 }
.rules-list li { padding-left:4px;margin-bottom:14px }
.rules-list li::marker { color:var(--teal) }
.rules-list strong { color:var(--ivory);font-weight:550 }
.rules-list p { font-size:12px;margin:5px 0 0 }
.sound-panel .field { margin:20px 0 0 }
.sound-panel .toggle-row:last-of-type { margin-bottom:15px }
.toast,.room-toast { position:fixed;z-index:100;left:50%;bottom:22px;transform:translateX(-50%);width:max-content;max-width:min(480px,calc(100% - 28px));padding:12px 18px;border:1px solid var(--line-strong);border-radius:10px;background:#1c3a45;color:var(--ivory);font-size:12px;line-height:1.6;text-align:center;box-shadow:0 10px 35px rgba(0,0,0,.3);pointer-events:none;animation:veil-in .2s ease }
.enter { animation:enter .32s cubic-bezier(.2,.7,.3,1) both }
.cell.shot-hit,.cell.fresh.hit { animation:hit-impact .58s cubic-bezier(.12,.7,.3,1) both }
.cell.shot-miss,.cell.fresh.miss { animation:water-ripple .68s ease-out both }
.cell.shot-sunk,.cell.fresh.sunk { animation:sunk-impact .8s ease-out both }
.cell.shot-hit::before,.cell.shot-sunk::before { content:'';position:absolute;z-index:3;inset:0;border:2px solid var(--coral);border-radius:50%;pointer-events:none;animation:impact-ring .6s ease-out both }
.cell.shot-miss::before { content:'';position:absolute;z-index:3;inset:10%;border:1px solid var(--teal);border-radius:50%;pointer-events:none;animation:impact-ring .7s ease-out both }
.shot-effect { position:absolute;inset:0;pointer-events:none;z-index:6 }
.firing .board-wrap::before { content:'';position:absolute;z-index:5;left:50%;top:0;width:1px;height:100%;background:linear-gradient(transparent,rgba(245,139,116,.55),transparent);pointer-events:none;animation:scan-fire .38s ease-out both }
.page-hidden *,.page-hidden *::before,.page-hidden *::after { animation-play-state:paused!important }
@keyframes enter { from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0} }
@keyframes veil-in { from{opacity:0}to{opacity:1} }
@keyframes fleet-float { 0%,100%{translate:0 0}50%{translate:0 -5px} }
@keyframes sonar-sweep { to{rotate:360deg} }
@keyframes orbit { to{rotate:360deg} }
@keyframes hit-impact { 0%{box-shadow:inset 0 0 0 24px rgba(245,139,116,.6);scale:.9}45%{scale:1.04}100%{box-shadow:inset 0 0 0 0 rgba(245,139,116,0);scale:1} }
@keyframes water-ripple { 0%{box-shadow:inset 0 0 0 18px rgba(131,201,192,.3)}100%{box-shadow:inset 0 0 0 0 rgba(131,201,192,0)} }
@keyframes sunk-impact { 0%{box-shadow:inset 0 0 0 25px rgba(245,139,116,.7);scale:.94}35%{scale:1.06}100%{box-shadow:inset 0 0 0 0 rgba(245,139,116,0);scale:1} }
@keyframes impact-ring { 0%{scale:.2;opacity:1}100%{scale:1.6;opacity:0} }
@keyframes scan-fire { from{opacity:0;translate:0 20%}40%{opacity:1}to{opacity:0;translate:0 -20%} }
@media(min-width:1450px) {
  .app-shell { max-width:1340px;padding:0 65px }
  .landing { min-height:620px }
  .hero-art { max-width:550px }
  .hero-title { font-size:77px }
}
@media(max-width:1100px) {
  .app-shell { padding:0 35px }
  .landing { gap:25px;min-height:540px }
  .hero-title { font-size:60px }
  .hero-description { font-size:13px }
  .battle-layout { gap:24px }
}
@media(max-width:900px) {
  .app-shell { padding:0 28px }
  .site-header { height:80px }
  .landing { min-height:500px;padding-top:42px;gap:20px }
  .hero-title { font-size:50px }
  .hero-art { width:108%;max-width:none }
  .hero-description { max-width:310px }
  .feature-strip { gap:20px }
  .feature { gap:10px }
  .game-layout { grid-template-columns:190px minmax(0,1fr);gap:22px }
  .battle-layout { grid-template-columns:minmax(0,1fr) 200px;gap:20px }
  .board-panel { padding:14px }
  .ship-option { padding:10px 9px;font-size:11px }
  .tools-row .secondary-btn { flex-basis:100% }
  .battle-layout .action-bar { flex-direction:column;align-items:stretch;gap:11px }
  .battle-layout .action-bar .primary-btn { width:100% }
  .stage-heading h1 { font-size:34px }
}
@media(max-width:740px) {
  .online-pill { display:none }
  .landing { grid-template-columns:1fr;text-align:center;gap:2px;padding:42px 0 24px;min-height:0 }
  .hero-title { font-size:clamp(46px,8vw,61px) }
  .hero-copy>.eyebrow { justify-content:center }
  .hero-description { max-width:390px;margin:0 auto 25px }
  .lobby-actions,.hero-actions { justify-content:center }
  .hero-art { width:min(100%,410px);max-width:410px;justify-self:center;margin-top:12px }
  .feature-strip { gap:18px;padding:25px 0 }
  .feature { flex-direction:column;gap:8px }
  .feature-number { padding-top:0 }
  .feature h2,.feature h3 { font-size:12px }
  .feature p { font-size:10px }
  .room-shell { padding-bottom:23px }
  .players-strip { gap:9px;margin:12px auto }
  .player-slot { padding:8px;gap:8px }
  .player-slot strong,.player-slot .player-name { font-size:12px }
  .player-slot small { font-size:9px }
  .game-layout { display:flex;flex-direction:column;width:min(100%,480px);gap:17px }
  .game-layout .game-sidebar { width:100%;padding:0 }
  .game-layout .player-card { display:none }
  .game-layout .fleet-list { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:12px }
  .game-layout .ship-option { flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:70px;padding:10px 9px;border-color:var(--line);font-size:11px;gap:7px }
  .game-layout .ship-status { font-size:9px }
  .game-layout .ship-status svg { width:13px;height:13px }
  .game-layout .tools-row { margin:10px 0 2px;flex-wrap:nowrap }
  .game-layout .tools-row .secondary-btn { flex-basis:auto }
  .game-layout .clear-btn { font-size:10px;min-height:38px }
  .game-layout .placement-help { display:none }
  .game-layout .fleet-heading { margin-top:0 }
  .board-panel { max-width:480px;padding:16px }
  .battle-layout { display:flex;flex-direction:column;gap:16px;max-width:480px }
  .battle-layout .board-panel { order:0 }
  .battle-layout .game-sidebar { width:100%;order:1;padding:0 }
  .battle-layout .mini-board,.battle-layout .mini-board-title { display:none }
  .battle-layout .game-sidebar .stats-row { margin:0 0 12px }
  .battle-layout .fleet-status { display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin-bottom:0 }
  .battle-layout .placement-help { display:none }
  .battle-layout .action-bar { flex-direction:row;align-items:center }
  .battle-layout .action-bar .primary-btn { width:auto }
  .turn-banner { max-width:480px;margin-bottom:13px }
  .room-shell>.stage-heading { width:min(100%,480px);margin:20px auto }
  .room-shell>.stage-heading h1 { font-size:31px }
  .room-shell>.stage-heading>p:not(.stage-kicker) { font-size:12px }
  .stats-row { padding:12px 0 }
  .stat-value { font-size:21px }
  .waiting-room { padding-top:28px;min-height:450px }
}
@media(max-width:520px) {
  .app-shell { padding:0 18px }
  .site-header { height:75px;gap:12px }
  .brand { gap:9px }
  .brand-mark { width:34px;height:34px }
  .brand-mark svg { width:20px;height:20px }
  .brand-name { font-size:21px }
  .brand-sub { font-size:7px;letter-spacing:.21em;margin-top:5px }
  .header-actions { gap:5px }
  .header-actions .text-btn { font-size:10px;gap:5px }
  .header-actions .text-btn svg { width:17px;height:17px }
  .header-actions .icon-btn { width:42px;min-width:42px;height:42px;border-color:transparent }
  .header-actions .icon-btn:hover { border-color:var(--line) }
  .hero-title { font-size:clamp(42px,10vw,54px);margin-bottom:21px }
  .hero-description { font-size:13px;max-width:320px;line-height:1.8 }
  .hero-copy>.eyebrow { font-size:8px;letter-spacing:.17em }
  .landing { padding-top:36px }
  .lobby-actions { gap:8px }
  .lobby-actions .primary-btn,.lobby-actions .secondary-btn { min-height:49px;padding:12px 15px;font-size:12px }
  .hero-art { max-width:360px }
  .art-caption { font-size:7px;letter-spacing:.11em;left:8%;right:8% }
  .fine-print { font-size:10px }
  .feature-strip { grid-template-columns:1fr;gap:19px }
  .feature { flex-direction:row;gap:13px }
  .feature-number { padding-top:2px }
  .feature h2,.feature h3 { font-size:12px;margin-bottom:4px }
  .feature p { font-size:11px }
  .site-footer { min-height:55px;font-size:8px;gap:13px }
  .site-footer>span { max-width:51% }
  .site-footer>span:last-child { max-width:46% }
  .setup-panel,.lobby-form { margin:28px auto 35px }
  .stage-heading { margin-top:12px;margin-bottom:24px }
  .stage-heading h1 { font-size:33px }
  .stage-heading>p:not(.stage-kicker) { font-size:12px }
  .form-grid { grid-template-columns:1fr;gap:0 }
  .field { margin-bottom:19px }
  .field input,.field select,.field textarea,.lobby-form input:not([type='checkbox']):not([type='range']) { font-size:16px;padding:12px 14px;min-height:50px }
  .setup-actions { flex-direction:column-reverse;align-items:stretch;gap:10px }
  .setup-actions .primary-btn { width:100% }
  .setup-actions .text-btn { justify-content:center }
  .choice-grid { gap:8px }
  .choice { font-size:11px;padding:11px;min-height:60px }
  .room-bar { min-height:49px;gap:9px }
  .room-code { font-size:10px;letter-spacing:.05em;gap:7px }
  .room-code strong { font-size:12px;letter-spacing:.1em }
  .connection-status { font-size:9px;gap:5px;max-width:42%;text-align:right }
  .connection-status::before { width:4px;height:4px }
  .players-strip { gap:5px;margin:10px 0 12px }
  .player-slot { padding:7px 6px;gap:7px;border-radius:9px }
  .player-slot .avatar { width:31px;height:31px;font-size:16px }
  .player-slot strong,.player-slot .player-name { font-size:11px;line-height:1.45 }
  .player-slot small,.player-slot .player-meta { font-size:8px;line-height:1.5 }
  .session-score { gap:5px;font-size:10px }
  .session-score strong,.session-score b { font-size:14px }
  .room-shell>.stage-heading { margin:16px 0 20px }
  .room-shell>.stage-heading h1 { font-size:29px }
  .stage-kicker { font-size:8px!important;letter-spacing:.16em }
  .game-layout .fleet-list { gap:6px }
  .game-layout .ship-option { font-size:10px;min-height:68px;padding:9px 7px;gap:5px;line-height:1.4 }
  .game-layout .ship-dots { gap:2px;margin-top:6px }
  .game-layout .ship-dot { width:9px;height:4px }
  .game-layout .ship-status { font-size:8px }
  .game-layout .tools-row .secondary-btn { min-height:44px }
  .fleet-heading { margin-bottom:10px }
  .fleet-heading h3 { font-size:9px }
  .fleet-heading>span { font-size:9px }
  .board-panel { padding:13px 11px;border-radius:12px }
  .board-header { min-height:30px;margin:0 2px 11px }
  .board-header .eyebrow { font-size:7px;letter-spacing:.13em;margin-bottom:5px }
  .board-header .eyebrow::before { width:15px }
  .board-title { font-size:12px }
  .board-badge { font-size:8px;padding:4px 6px;gap:4px }
  .board-badge svg { width:13px;height:13px }
  .board-grid { grid-template-columns:14px repeat(8,minmax(0,1fr));gap:3px }
  .axis-label { font-size:8px;min-height:15px }
  .cell { border-radius:4px }
  .cell-mark { font-size:19px }
  .cell.miss .cell-mark { font-size:25px }
  .board-legend { margin-top:11px;gap:13px;font-size:8px }
  .action-bar { margin-top:13px;padding:12px 1px 0;gap:9px }
  .action-bar .primary-btn { font-size:11px;min-height:46px;padding:11px 13px;gap:6px }
  .action-bar .primary-btn svg { width:17px;height:17px }
  .status-title { font-size:11px }
  .status-description { font-size:9px;line-height:1.5 }
  .turn-banner { padding:10px 12px;gap:9px;font-size:11px;margin-top:1px;margin-bottom:12px }
  .turn-banner strong { font-size:12px }
  .turn-banner small,.turn-banner p { font-size:10px }
  .turn-banner .turn-count { font-size:8px }
  .turn-banner>svg { width:17px;height:17px }
  .combat-status { padding:8px 10px;font-size:10px;min-height:37px;margin-top:11px }
  .combat-status svg { width:16px;height:16px }
  .combat-status small { font-size:9px }
  .tab-row { padding:3px;margin-bottom:11px }
  .tab-btn { min-height:40px;font-size:10px }
  .battle-layout .fleet-status { font-size:10px;gap:9px 15px }
  .stat-value { font-size:22px }
  .stat-label { font-size:9px }
  .waiting-room { padding:25px 0 35px;min-height:460px }
  .waiting-orbit { width:75px;height:75px;margin-bottom:28px }
  .waiting-orbit svg { width:28px;height:28px }
  .waiting-room h1 { font-size:33px }
  .waiting-room>p { font-size:12px;max-width:300px }
  .invite-card { padding:20px 15px }
  .code-display { font-size:36px;letter-spacing:.14em }
  .invite-actions .secondary-btn,.invite-actions .primary-btn { font-size:11px;padding:11px 12px }
  .reconnect-banner { font-size:11px;padding:10px 12px }
  .victory-screen { padding:25px 0 35px;min-height:450px }
  .victory-title { font-size:37px }
  .victory-screen>p:not(.eyebrow) { font-size:12px }
  .victory-screen>.eyebrow { font-size:8px;justify-content:center }
  .victory-emblem { width:74px;height:74px;margin-bottom:25px }
  .victory-emblem svg { width:30px;height:30px }
  .victory-screen .hero-actions { flex-direction:column;width:100%;max-width:330px }
  .victory-screen .hero-actions button { width:100% }
  .prize-card { font-size:13px;padding:14px 17px }
  .modal-backdrop { padding:14px }
  .modal-card { padding:27px 22px;border-radius:13px }
  .modal-card h2 { font-size:28px }
  .modal-card p { font-size:12px }
  .modal-actions { flex-direction:column-reverse }
  .modal-actions button { width:100% }
  .rules-list,.rules-list p { font-size:11px }
  .toast,.room-toast { font-size:11px;padding:11px 14px;bottom:16px }
}
@media(max-width:370px) {
  .app-shell { padding:0 13px }
  .hero-title { font-size:42px }
  .hero-copy>.eyebrow { font-size:7px }
  .header-actions { gap:2px }
  .header-actions .text-btn { font-size:9px }
  .header-actions .icon-btn { min-width:39px;width:39px }
  .brand { gap:8px }
  .brand-name { font-size:20px }
  .brand-mark { width:31px;height:31px }
  .player-slot { padding:6px 4px;gap:5px }
  .player-slot .avatar { width:28px;height:28px;font-size:15px }
  .game-layout .ship-option { padding:9px 6px }
  .lobby-actions { gap:7px }
  .lobby-actions .primary-btn,.lobby-actions .secondary-btn { padding:12px 13px }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important }
  .enter,.fleet-float,.sonar-sweep,.waiting-orbit::before,.waiting-orbit::after { animation:none!important }
  .primary-btn:hover:not(:disabled) { translate:none }
}
/* Markup details shared by the room views. */
.setup-panel .lobby-form { width:100%;margin:25px 0 0 }
.fleet-heading h2 { color:var(--muted);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin:0 }
.invite-card>span { display:block;color:var(--quiet);font-size:9px;letter-spacing:.15em;margin-bottom:13px }
.player-slot strong small { display:inline;color:var(--quiet);font-size:9px;font-weight:400;margin-left:3px }
.ready-status { display:flex;align-items:flex-start;gap:7px;padding:12px 0;margin-top:10px;border-top:1px solid var(--line);font-size:10px;color:var(--teal);line-height:1.65 }
.ready-status svg { width:15px;height:15px;margin-top:1px }
.turn-banner { justify-content:flex-start }
.turn-banner>div { flex:1;min-width:0 }
.turn-banner h1 { font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.5;letter-spacing:-.01em;margin:0 0 2px;color:var(--ivory) }
.turn-banner.your-turn h1 { color:var(--teal) }
.turn-dot { width:6px;height:6px;flex:0 0 auto;background:var(--quiet);border-radius:50%;margin-right:2px }
.your-turn .turn-dot { background:var(--teal);box-shadow:0 0 0 4px rgba(131,201,192,.07) }
.turn-counter { flex:0 0 auto;font-family:var(--mono);font-size:9px;letter-spacing:.07em;color:var(--quiet) }
.board-header .tab-row { margin:0;padding:3px }
.board-header .tab-btn { min-height:35px;padding:7px 9px;font-size:10px;white-space:nowrap }
.combat-status { display:block;margin-top:0;padding:13px 14px }
.combat-status .eyebrow { font-size:8px;letter-spacing:.13em;margin-bottom:9px }
.combat-status strong { font-weight:600;font-size:12px;line-height:1.65;color:var(--ivory) }
.combat-status p { font-size:10px;line-height:1.7;color:var(--quiet);margin:7px 0 0 }
.combat-status.is-hit { border-color:rgba(245,139,116,.25);background:rgba(245,139,116,.04) }
.combat-status.is-hit strong { color:var(--coral) }
.mini-board { display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;margin:8px 0 0 }
.mini-cell { display:block;aspect-ratio:1;border:1px solid rgba(133,180,189,.12);background:rgba(23,55,68,.6);border-radius:3px }
.mini-cell.ship { border-color:rgba(131,201,192,.4);background:rgba(131,201,192,.23) }
.mini-cell.hit { border-color:rgba(245,139,116,.45);background:rgba(245,139,116,.4) }
.mini-cell.miss { background:rgba(162,190,198,.16) }
.mini-fleet { margin-top:19px;padding-top:13px;border-top:1px solid var(--line) }
.mini-fleet .fleet-heading { margin:0 }
.mini-fleet .text-btn { min-height:32px;font-size:10px;padding:4px }
.fleet-status .fleet-status-row { display:grid;grid-template-columns:minmax(0,1fr) auto 14px;gap:7px }
.fleet-status-row>svg { width:13px;height:13px;color:var(--quiet) }
.fleet-status-row.is-sunk { color:var(--coral) }
.fleet-status-row.is-sunk .ship-dot { background:var(--coral) }
.fleet-status-row.is-sunk>svg { color:var(--coral) }
.board-legend svg { width:11px;height:11px }
.toggle-row>span { flex:1 }
.toggle-row>span>svg { display:inline-block;width:17px;height:17px;margin-right:7px;vertical-align:-3px;color:var(--teal) }
.toggle-row>span>small { padding-left:25px }
.lobby-form .toggle-row { justify-content:flex-start;gap:11px;padding:13px 0 }
.lobby-form .toggle-row>span { font-size:12px }
.lobby-form .toggle-row>span>svg { display:none }
.lobby-form .toggle-row>span>small { padding-left:0 }
.form-error { color:var(--coral);font-size:12px;line-height:1.7;padding:11px 13px;border:1px solid rgba(245,139,116,.3);border-radius:8px;background:rgba(245,139,116,.05);margin:16px 0 }
.volume-label { display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px;margin:23px 0 12px }
.volume-label output { color:var(--ivory);font-family:var(--mono);font-size:11px }
.copy-value { width:100%;padding:12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--navy);color:var(--ivory);font-family:var(--mono);font-size:12px }
.resume-link { margin-top:11px }
@media(max-width:740px) {
  .battle-layout .mini-fleet { display:none }
  .game-layout .ready-status { margin-top:5px;padding:8px 0 0;border:0;font-size:10px }
  .battle-layout .game-sidebar .stats-row { margin-top:12px }
  .combat-status { padding:11px 13px }
}
@media(max-width:520px) {
  .fleet-heading h2 { font-size:9px }
  .turn-banner h1 { font-size:12px }
  .turn-banner p { font-size:10px }
  .turn-counter { font-size:8px }
  .board-header .tab-btn { min-height:36px;font-size:9px;padding:6px 8px;gap:5px }
  .board-header .tab-btn svg { width:13px;height:13px }
  .board-header .board-title { font-size:11px }
  .combat-status strong { font-size:11px }
  .combat-status .eyebrow { font-size:7px;margin-bottom:6px }
  .combat-status p { margin-top:5px;font-size:10px }
  .fleet-status .fleet-status-row { gap:5px;grid-template-columns:minmax(0,1fr) auto 12px }
  .fleet-status .ship-dot { width:8px;height:4px }
  .invite-card>span { font-size:8px }
}
/* Keep the entire battle within a typical laptop viewport. */
@media(min-width:900px) and (max-height:1000px) {
  .app-shell:has(.view-battle) .site-header { height:68px }
  .view-battle .room-shell { padding-bottom:17px }
  .view-battle .room-bar { min-height:40px }
  .view-battle .room-code { min-height:38px }
  .view-battle .players-strip { margin:8px auto;max-width:700px }
  .view-battle .player-slot { padding:5px 9px }
  .view-battle .player-slot .avatar { width:34px;height:34px;font-size:18px }
  .view-battle .turn-banner { max-width:700px;padding:8px 12px;margin:3px auto 12px }
  .view-battle .turn-banner h1 { font-size:13px }
  .view-battle .turn-banner p { font-size:10px }
  .view-battle .battle-layout { max-width:700px;grid-template-columns:minmax(0,424px) minmax(190px,220px);gap:24px }
  .view-battle .board-panel { max-width:424px;padding:14px }
  .view-battle .board-header { margin-bottom:10px }
  .view-battle .board-legend { margin-top:10px }
  .view-battle .action-bar { margin-top:12px;padding-top:12px }
  .view-battle .action-bar .primary-btn { min-height:44px;padding:10px 12px;font-size:11px }
  .view-battle .combat-status { padding:10px 12px }
  .view-battle .stats-row { margin:13px 0;padding:12px 0 }
  .view-battle .fleet-status { gap:8px;margin:12px 0 }
  .view-battle .mini-fleet { margin-top:14px;padding-top:10px }
  .view-battle .mini-board { max-width:185px;margin-left:auto;margin-right:auto;padding:8px;gap:2px }
  .app-shell:has(.view-battle) .site-footer { min-height:48px }
}
/* Dictation keeps the original field untouched until the player confirms. */
.voice-input { display:grid;grid-template-columns:minmax(0,1fr) 50px;gap:8px;align-items:stretch }
.dictate-btn { display:grid;place-items:center;min-width:44px;min-height:50px;padding:0;border:1px solid var(--line-strong);border-radius:10px;background:rgba(131,201,192,.07);color:var(--teal);transition:background .18s,border-color .18s,transform .18s }
.dictate-btn:hover:not(:disabled) { background:rgba(131,201,192,.16);border-color:var(--teal);transform:translateY(-1px) }
.dictate-btn:disabled { opacity:.38;cursor:not-allowed }
.voice-note { font-size:11px;line-height:1.7;color:var(--quiet);margin:-5px 0 15px }
.modal-card .voice-instruction { margin:0 0 22px;max-width:38ch }
.voice-visual { display:flex;align-items:center;justify-content:center;gap:18px;width:100%;min-height:76px;border-radius:12px;background:rgba(131,201,192,.055);border:1px solid var(--line);color:var(--teal) }
.voice-visual>svg { width:27px;height:27px }
.voice-bars { height:32px;display:flex;align-items:center;gap:5px }
.voice-bars i { display:block;width:4px;height:6px;border-radius:6px;background:currentColor;opacity:.5 }
.voice-visual.listening { border-color:rgba(131,201,192,.4) }
.listening .voice-bars i { opacity:1;animation:voice-wave 1s ease-in-out infinite }
.listening .voice-bars i:nth-child(2) { animation-delay:-.25s }
.listening .voice-bars i:nth-child(3) { animation-delay:-.5s }
.listening .voice-bars i:nth-child(4) { animation-delay:-.1s }
.listening .voice-bars i:nth-child(5) { animation-delay:-.35s }
.modal-card .voice-status { color:var(--teal);text-align:center;font-size:12px;min-height:22px;margin:9px 0 22px }
.voice-transcript { margin-bottom:0 }
.voice-transcript textarea { resize:vertical;min-height:86px;line-height:1.6;font-size:16px }
.voice-transcript textarea[readonly] { color:var(--muted) }
.voice-preview { display:block;min-height:20px;margin-top:8px;color:var(--teal);font-size:12px;letter-spacing:.04em;overflow-wrap:anywhere }
.modal-card .voice-error { color:var(--coral);font-size:12px;line-height:1.6;margin:7px 0 0 }
.voice-actions { margin-top:18px;display:grid;grid-template-columns:1fr 1fr }
.voice-actions button { padding:12px;min-width:0;font-size:12px }
.modal-card .voice-privacy { font-size:10px;line-height:1.7;color:var(--quiet);margin:20px 0 0 }
@keyframes voice-wave { 0%,100% { transform:scaleY(1) } 50% { transform:scaleY(4) } }
@media(max-width:420px) {
 .voice-actions { gap:8px }
 .voice-actions button { font-size:11px }
 .voice-note { font-size:10px }
}
@media(prefers-reduced-motion:reduce) {
 .voice-visual.listening .voice-bars i { animation:none;transform:scaleY(2) }
 .dictate-btn { transition:none }
}
/* Fleet studio: dimensional illustrations, accurate flat interaction plane. */
.ship-option { display:grid;grid-template-columns:minmax(64px,88px) minmax(0,1fr) auto;gap:10px;min-height:80px;padding:10px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(38,73,84,.36),rgba(12,34,46,.35));overflow:hidden;position:relative;touch-action:none;user-select:none;-webkit-user-select:none }
.ship-option::before { content:'';position:absolute;pointer-events:none;inset:0;background:linear-gradient(125deg,rgba(210,239,221,.07),transparent 55%);opacity:.6 }
.ship-option:not(:disabled):hover { border-color:rgba(131,201,192,.5);background:linear-gradient(145deg,rgba(57,102,111,.38),rgba(12,34,46,.7)) }
.ship-option.selected { border-color:rgba(146,223,211,.65);box-shadow:inset 0 1px 0 rgba(217,241,220,.06),0 6px 22px rgba(0,0,0,.12) }
.ship-option.placed { background:rgba(131,201,192,.055) }
.ship-option:disabled { opacity:.7;touch-action:pan-y }
.ship-option-copy { min-width:0;position:relative;z-index:1 }
.ship-option-copy strong { display:block;font-size:11px;line-height:1.45;overflow-wrap:normal }
.ship-option .ship-status { position:relative;z-index:1;font-size:9px }
.ship-visual { display:grid;place-items:center;position:relative;min-width:0;width:100%;height:48px;perspective:450px;pointer-events:none }
.ship-visual::before { content:'';position:absolute;left:8%;right:4%;bottom:7px;height:10px;border-radius:50%;background:rgba(0,13,21,.4);filter:blur(3px);transform:rotate(-7deg) }
.vessel-art { width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none;user-select:none }
.ship-visual .vessel-art { height:auto;transform:rotateX(22deg) rotateY(-7deg) rotateZ(-7deg) translateZ(10px);filter:drop-shadow(0 5px 3px rgba(0,11,20,.4));transition:transform .28s cubic-bezier(.18,.75,.25,1),filter .28s }
.ship-option:not(:disabled):hover .vessel-art,.ship-option.selected .ship-visual .vessel-art { transform:rotateX(14deg) rotateY(-4deg) rotateZ(-4deg) translate3d(0,-2px,16px);filter:drop-shadow(0 9px 4px rgba(0,11,20,.35)) }
.board-ocean { position:relative;width:100%;isolation:isolate;overflow:visible }
.board-ocean>.board-grid { isolation:auto }
.fleet-overlay { position:absolute;inset:0;pointer-events:none;z-index:3 }
.fleet-vessel { position:absolute;pointer-events:none;overflow:visible;opacity:.97 }
.fleet-vessel-art { position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none }
.fleet-vessel .vessel-art { filter:drop-shadow(0 3px 2px rgba(0,10,18,.4)) }
.vessel-sunk { opacity:.35;filter:saturate(.3) }
.fleet-vessel.drag-origin { opacity:.22;filter:saturate(.3) }
.view-placement .cell.ship,.view-battle .cell.ship { background:rgba(91,155,158,.085);border-color:rgba(131,201,192,.18) }
.view-placement .cell.ship::after,.view-battle .cell.ship::after { display:none }
.board-ocean .cell.hit,.board-ocean .cell.sunk { z-index:4;background:rgba(156,72,60,.33) }
.board-ocean .cell.hit .cell-mark,.board-ocean .cell.sunk .cell-mark { text-shadow:0 1px 7px #071a24 }
.view-placement .board-grid .cell { touch-action:none }
.view-placement .board-ocean .cell.preview { background:rgba(131,201,192,.2);border-color:#b3e2d2;box-shadow:inset 0 0 0 1px rgba(164,226,213,.35),0 0 12px rgba(131,201,192,.08) }
.view-placement .board-ocean .cell.invalid { border-color:var(--coral);background:rgba(245,139,116,.17);box-shadow:inset 0 0 0 1px rgba(245,139,116,.3) }
.drag-ghost { position:fixed;pointer-events:none;z-index:150;overflow:visible;perspective:700px;transform-style:preserve-3d;will-change:left,top;filter:drop-shadow(0 16px 10px rgba(0,8,16,.5)) }
.drag-vessel { position:relative;width:100%;height:100%;pointer-events:none;opacity:.96 }
.drag-vessel .fleet-vessel-art { pointer-events:none }
.drag-ghost.drag-vessel { position:fixed }
.drag-ghost .vessel-art { filter:drop-shadow(0 3px 1px rgba(179,238,222,.2));animation:vessel-pickup .18s cubic-bezier(.1,.8,.3,1) both }
.drag-ghost.invalid .vessel-art { filter:drop-shadow(0 3px 5px rgba(245,139,116,.45)) }
body.is-dragging,body.dragging-fleet,body.fleet-dragging { cursor:grabbing;user-select:none;-webkit-user-select:none }
.arsenal { margin:4px 0 15px;padding:11px 0 0;border-top:1px solid var(--line) }
.arsenal>.fleet-heading { margin:0 0 10px;gap:8px }
.arsenal>.fleet-heading>span { font-size:7px;letter-spacing:.08em;color:var(--quiet);text-align:right }
.weapon-rack { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px }
.weapon-option { position:relative;min-height:75px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:7px 4px 8px;border:1px solid var(--line);border-radius:9px;background:linear-gradient(145deg,rgba(42,76,86,.3),rgba(8,28,39,.55));color:var(--muted);text-align:center;overflow:hidden }
.weapon-option.selected { border-color:var(--coral);background:linear-gradient(145deg,rgba(245,139,116,.12),rgba(13,36,47,.6));box-shadow:inset 0 1px 0 rgba(255,216,185,.12) }
.weapon-option:hover:not(:disabled) { border-color:rgba(245,139,116,.6);background-color:rgba(245,139,116,.08) }
.weapon-option.empty { opacity:.39 }
.weapon-option:disabled:not(.empty) { opacity:.7 }
.weapon-visual { position:relative;width:33px;height:33px;display:block;perspective:200px;pointer-events:none;margin-bottom:5px }
.weapon-art { width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 4px 2px rgba(0,9,18,.35));transition:transform .22s cubic-bezier(.2,.7,.2,1) }
.weapon-option.selected .weapon-art,.weapon-option:hover:not(:disabled) .weapon-art { transform:translate3d(0,-2px,8px) rotate(-5deg) }
.weapon-copy { display:block;min-width:0;width:100% }
.weapon-copy strong { display:block;font-size:8px;font-weight:550;line-height:1.45;overflow-wrap:normal }
.weapon-count { position:absolute;top:5px;right:6px;min-width:16px;height:16px;display:grid;place-items:center;border-radius:5px;font-family:var(--mono);font-size:10px;line-height:1;color:var(--teal);background:rgba(7,26,36,.75);border:1px solid rgba(131,201,192,.13) }
.weapon-option.selected .weapon-count { color:var(--coral);border-color:rgba(245,139,116,.2) }
.weapon-detail { min-height:28px;display:flex;align-items:center;justify-content:space-between;gap:9px;margin:8px 0 0;color:var(--quiet);font-size:10px;line-height:1.55 }
.weapon-detail p { margin:0;font-size:inherit;line-height:inherit }
.weapon-detail .text-btn { min-height:36px;font-size:10px;white-space:nowrap;padding:4px 2px }
.weapon-detail .text-btn svg { width:15px;height:15px }
.cell.supply { background:radial-gradient(circle at 50% 50%,rgba(246,185,104,.1),rgba(23,55,68,.58));border-color:rgba(235,185,114,.38);overflow:visible }
.cell.supply::after { display:none }
.cell>.supply-art { width:82%;height:82%;z-index:2;filter:drop-shadow(0 2px 3px rgba(227,176,103,.15));overflow:visible }
.cell.supply .supply-crate { animation:supply-float 3.2s ease-in-out infinite;transform-origin:center }
.cell.supply .supply-shadow { animation:supply-shadow 3.2s ease-in-out infinite;transform-origin:center }
.supply-legend { color:#d6b681!important }
.supply-legend .supply-art { width:16px;height:16px }
.cell.blast-hover:not(.hit):not(.miss) { border-color:rgba(245,139,116,.38);background:rgba(245,139,116,.065) }
.cell.blast-preview { background:rgba(245,139,116,.09);border-color:rgba(245,139,116,.6);box-shadow:inset 0 0 0 1px rgba(245,139,116,.14) }
.cell.blast-center { background:rgba(245,139,116,.2);border-color:var(--coral);box-shadow:inset 0 0 0 1px var(--coral) }
.combat-status.is-loot { border-color:rgba(236,192,121,.35);background:linear-gradient(145deg,rgba(219,169,95,.08),rgba(14,34,45,.6)) }
.combat-status.is-loot strong { color:#f0c68a }
.turn-banner.streak-active { border-color:rgba(131,201,192,.55);box-shadow:inset 3px 0 0 var(--teal);animation:streak-reveal .5s ease-out both }
/* Motion is layered on decorative faces so hit-testing stays pixel-accurate. */
.board-ocean .cell { perspective:350px }
.cell.shot-hit,.cell.shot-sunk,.cell.shot-miss { animation:none }
.cell.shot-hit::before,.cell.shot-sunk::before { content:'';position:absolute;z-index:6;inset:-18%;border:0;border-radius:50%;background:radial-gradient(circle,rgba(255,233,183,.98) 0 6%,rgba(255,163,106,.8) 10%,rgba(245,139,116,.38) 26%,transparent 55%);box-shadow:0 0 12px rgba(255,176,116,.35);animation:depth-burst .7s cubic-bezier(.12,.62,.21,1) both }
.cell.shot-hit::after,.cell.shot-sunk::after { content:'';display:block;position:absolute;z-index:5;inset:10%;width:auto;height:auto;border:1.5px solid rgba(255,203,153,.8);border-radius:50%;background:transparent;animation:depth-ring .7s ease-out both }
.cell.shot-sunk::before { animation-duration:.85s;background:radial-gradient(circle,rgba(255,240,201,1) 0 8%,rgba(255,155,100,.9) 15%,rgba(217,110,88,.5) 32%,transparent 65%) }
.cell.shot-miss::before { content:'';position:absolute;z-index:4;inset:13%;border:1px solid rgba(179,227,222,.9);border-radius:50%;background:radial-gradient(circle,rgba(161,224,222,.25),transparent 60%);animation:sea-impact .75s cubic-bezier(.15,.6,.3,1) both }
.cell.shot-miss::after { content:'';display:block;position:absolute;z-index:5;inset:30%;width:auto;height:auto;border-radius:50%;background:rgba(211,245,227,.5);animation:sea-spray .55s ease-out both }
.cell.shot-loot { border-color:#f6cb91;box-shadow:inset 0 0 16px rgba(237,189,110,.15) }
.cell.shot-loot::before { content:'';position:absolute;z-index:6;inset:-12%;border:1.5px solid #f8d49e;border-radius:16%;background:radial-gradient(circle,rgba(249,214,161,.3),transparent 70%);animation:loot-claim .8s cubic-bezier(.2,.6,.15,1) both }
.cell.shot-loot::after { content:'+';display:grid;place-items:center;position:absolute;z-index:7;inset:0;width:auto;height:auto;color:#ffe1af;font-size:26px;font-weight:400;background:none;animation:loot-spark .8s ease-out both }
.weapon-torpedo.firing .board-wrap::before { background:linear-gradient(transparent,rgba(163,231,224,.85),transparent);height:100%;width:2px;animation-duration:.48s }
.weapon-cross.firing .board-wrap::before { background:linear-gradient(transparent,rgba(245,139,116,.7),transparent);width:2px;animation-duration:.55s }
.weapon-depth.firing .board-wrap::before { background:radial-gradient(ellipse,rgba(245,139,116,.15),transparent 65%);inset:0;width:100%;height:100%;animation:depth-field .65s ease-out both }
@keyframes vessel-pickup { from { opacity:.4;transform:translate3d(0,6px,0) scale(.97) } to { opacity:1;transform:translate3d(0,0,18px) scale(1.025) } }
@keyframes supply-float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-2px) } }
@keyframes supply-shadow { 0%,100% { opacity:.16;transform:scaleX(1) } 50% { opacity:.1;transform:scaleX(.86) } }
@keyframes streak-reveal { from { box-shadow:inset 3px 0 0 var(--teal),0 0 22px rgba(131,201,192,.14) } to { box-shadow:inset 3px 0 0 var(--teal),0 0 0 rgba(131,201,192,0) } }
@keyframes depth-burst { 0% { opacity:0;transform:translate3d(0,5px,-30px) scale(.15) } 20% { opacity:1;transform:translate3d(0,-3px,25px) scale(.8) } 55% { opacity:.65;transform:translate3d(0,-8px,40px) scale(1.3) } 100% { opacity:0;transform:translate3d(0,-18px,60px) scale(1.65) } }
@keyframes depth-ring { 0% { opacity:1;transform:rotateX(55deg) scale(.1) } 100% { opacity:0;transform:rotateX(55deg) scale(2.8) } }
@keyframes sea-impact { 0% { opacity:1;transform:rotateX(55deg) translateY(1px) scale(.2) } 100% { opacity:0;transform:rotateX(55deg) translateY(8px) scale(2.2) } }
@keyframes sea-spray { 0% { opacity:1;transform:translate3d(0,4px,-10px) scale(.3) } 55% { opacity:.65;transform:translate3d(0,-10px,24px) scale(.75) } 100% { opacity:0;transform:translate3d(0,-16px,28px) scale(.25) } }
@keyframes loot-claim { from { opacity:1;transform:rotateX(25deg) rotateZ(-12deg) scale(.3) } to { opacity:0;transform:rotateX(0) rotateZ(22deg) translateZ(25px) scale(1.5) } }
@keyframes loot-spark { 0% { opacity:0;transform:translate3d(0,4px,0) scale(.6) } 35% { opacity:1 } 100% { opacity:0;transform:translate3d(0,-20px,30px) scale(1.1) } }
@keyframes depth-field { 0% { opacity:0 } 30% { opacity:1 } 100% { opacity:0 } }
@media(max-width:900px) and (min-width:741px) {
 .ship-option { grid-template-columns:66px minmax(0,1fr);column-gap:7px }
 .ship-option .ship-status { display:none }
}
@media(max-width:740px) {
 .game-layout .fleet-list { grid-template-columns:repeat(4,minmax(0,1fr));gap:6px }
 .game-layout .ship-option { display:flex;flex-direction:column;align-items:stretch;min-height:98px;padding:7px 5px;gap:5px;text-align:center;justify-content:flex-start }
 .game-layout .ship-visual { height:31px;flex-shrink:0 }
 .game-layout .ship-option-copy strong { font-size:9px;line-height:1.35;min-height:24px;display:grid;place-items:center }
 .game-layout .ship-dots { justify-content:center;margin-top:4px }
 .game-layout .ship-status { font-size:8px;min-height:11px;display:flex;justify-content:center;align-items:center;margin-top:auto }
 .game-layout .ship-status svg { width:11px;height:11px }
 .game-layout .placement-help { display:block;font-size:10px;line-height:1.6;margin:8px 0 0 }
 .arsenal { margin-bottom:12px }
 .weapon-rack { gap:6px }
 .weapon-option { min-height:72px;padding:6px 3px }
 .weapon-visual { width:29px;height:29px;margin-bottom:5px }
 .weapon-copy strong { font-size:8px }
 .weapon-detail { font-size:9px;min-height:28px }
 .weapon-detail .text-btn { font-size:9px;min-height:34px }
}
@media(prefers-reduced-motion:reduce) {
 .ship-visual .vessel-art,.ship-option:not(:disabled):hover .vessel-art,.ship-option.selected .ship-visual .vessel-art { transition:none;transform:none }
 .drag-ghost .vessel-art,.cell.supply .supply-crate,.cell.supply .supply-shadow,.turn-banner.streak-active { animation:none!important }
 .cell.shot-hit::before,.cell.shot-hit::after,.cell.shot-sunk::before,.cell.shot-sunk::after,.cell.shot-miss::before,.cell.shot-miss::after,.cell.shot-loot::before,.cell.shot-loot::after,.firing .board-wrap::before { animation:none!important;display:none }
 .weapon-art { transition:none }
 .weapon-option.selected .weapon-art,.weapon-option:hover:not(:disabled) .weapon-art { transform:none }
}
/* Living water stays behind the interaction plane: no camera shake or displaced cells. */
.board-ocean::before,.board-ocean::after { content:'';position:absolute;z-index:-1;inset:20px 0 0 23px;border-radius:8px;pointer-events:none;contain:paint }
.board-ocean::before { background:radial-gradient(ellipse at 18% 18%,rgba(92,190,190,.19),transparent 56%),radial-gradient(ellipse at 85% 72%,rgba(30,109,143,.25),transparent 66%),linear-gradient(155deg,#123c4b,#0a2636 62%,#113947);box-shadow:inset 0 1px 26px rgba(2,15,26,.28);animation:ocean-breathe 11s ease-in-out infinite alternate }
.board-ocean::after { opacity:.42;background-image:repeating-radial-gradient(ellipse at 26% 120%,transparent 0 21px,rgba(152,221,210,.18) 22px,transparent 24px 43px),repeating-linear-gradient(165deg,transparent 0 21px,rgba(134,216,214,.07) 22px,transparent 24px 49px);background-size:125% 125%,150% 150%;background-position:50% 50%;animation:ocean-current 17s ease-in-out infinite alternate;mask-image:linear-gradient(transparent,black 16%,black 80%,transparent) }
.board-ocean .cell.miss { background:rgba(15,53,70,.37);color:#b3d5db }
.board-ocean .cell.miss .cell-mark { text-shadow:0 1px 6px rgba(3,23,33,.7) }
.board-ocean .cell.shot-miss { overflow:visible }
.board-ocean .cell.shot-miss::before { z-index:6;inset:9%;border:1.5px solid rgba(175,235,232,.85);background:radial-gradient(ellipse,rgba(161,224,222,.2),transparent 66%);box-shadow:0 0 0 3px rgba(166,232,226,.07),inset 0 0 8px rgba(174,238,229,.1);animation:water-crown .95s cubic-bezier(.18,.65,.23,1) both }
.board-ocean .cell.shot-miss::after { z-index:7;inset:34%;background:rgba(214,250,244,.7);box-shadow:9px -2px 0 -2px rgba(189,243,233,.66),-8px -3px 0 -2px rgba(189,243,233,.6),2px -8px 0 -3px #e3fff7;animation:water-droplets .7s cubic-bezier(.2,.8,.25,1) both }
@keyframes ocean-breathe { 0% { opacity:.72 } 100% { opacity:1 } }
@keyframes ocean-current { 0% { transform:translate3d(-2px,0,0);opacity:.3 } 50% { opacity:.55 } 100% { transform:translate3d(2px,-4px,0);opacity:.36 } }
@keyframes water-crown { 0% { opacity:.2;transform:rotateX(48deg) scale(.18) } 18% { opacity:.95 } 100% { opacity:0;transform:rotateX(48deg) scale(2.65) } }
@keyframes water-droplets { 0% { opacity:0;transform:translate3d(0,4px,0) scale(.3) } 24% { opacity:.85;transform:translate3d(0,-9px,22px) scale(.65) } 70% { opacity:.5;transform:translate3d(0,-5px,28px) scale(.4) } 100% { opacity:0;transform:translate3d(0,7px,0) scale(.2) } }

/* The watch view mirrors only the opponent's public targeting surface. */
.spectator-board { --watch-color:#efba88 }
.board-panel.spectator-board { border-color:rgba(239,186,136,.23);box-shadow:0 16px 60px rgba(0,0,0,.07),inset 0 1px 0 rgba(239,186,136,.045) }
.spectator-board .board-ocean::before,.board-ocean.spectator-board::before { background:radial-gradient(ellipse at 18% 18%,rgba(92,190,190,.14),transparent 56%),radial-gradient(ellipse at 85% 72%,rgba(47,100,130,.22),transparent 66%),linear-gradient(155deg,#173e4b,#0c2636 62%,#183a46) }
.board-ocean .cell.live-aim { border-color:rgba(239,186,136,.63);background:rgba(239,186,136,.105);box-shadow:inset 0 0 0 1px rgba(239,186,136,.08);color:#ffd6a9 }
.board-ocean .cell.live-aim-center { border-color:#f0c08e;background:rgba(239,186,136,.2);box-shadow:inset 0 0 0 1px #f0c08e,0 0 16px rgba(239,186,136,.13) }
.cell.live-aim-center>svg { width:54%;height:54%;position:relative;z-index:2 }
.cell.live-aim-center::after { display:block;inset:17%;width:auto;height:auto;border:1px solid rgba(255,212,166,.45);background:transparent;border-radius:50%;animation:aim-breathe 2.2s ease-in-out infinite }
.watch-status { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px;margin:14px 0 0;padding:12px 14px;border:1px solid rgba(239,186,136,.2);border-radius:10px;background:rgba(239,186,136,.045);color:var(--muted);font-size:11px;line-height:1.6 }
.watch-status strong { display:block;color:#f2c79c;font-size:12px;font-weight:600;line-height:1.5 }
.watch-status span,.watch-status p { color:var(--muted);margin:3px 0 0;font-size:10px;line-height:1.65 }
.watch-status>svg { width:22px;height:22px;flex-shrink:0;color:#e9b686 }
.watch-pill { display:inline-flex;align-items:center;gap:6px;flex-shrink:0;padding:5px 8px;border:1px solid rgba(239,186,136,.25);border-radius:20px;font:500 8px/1.4 var(--mono);letter-spacing:.08em;color:#f2c79c;white-space:nowrap;background:rgba(239,186,136,.04) }
.watch-pill::before { content:'';width:5px;height:5px;border-radius:50%;background:#efba88;box-shadow:0 0 0 3px rgba(239,186,136,.09);animation:aim-breathe 2.2s ease-in-out infinite }
@keyframes aim-breathe { 0%,100% { opacity:.6 } 50% { opacity:1 } }

/* Fullscreen and focus mode leave overlays, controls, and page scrolling available. */
.fullscreen-btn { width:auto;border-radius:22px;padding:0 13px;gap:7px }
.fullscreen-btn span { font-size:11px;white-space:nowrap }
:fullscreen { background:var(--navy) }
body.immersive-mode .app-shell { width:min(1510px,100%);padding:0 clamp(18px,4vw,64px) }
body.immersive-mode .site-header { height:64px }
body.immersive-mode .site-footer { display:none }
body.immersive-mode .view-battle .room-shell { padding-bottom:24px }
body.immersive-mode .view-battle .battle-layout { max-width:960px;grid-template-columns:minmax(0,600px) minmax(190px,250px);gap:30px }
body.immersive-mode .view-battle .board-panel { max-width:600px }
body.immersive-mode .view-battle .turn-banner,body.immersive-mode .view-battle .players-strip { max-width:960px }
body.immersive-mode .room-bar { min-height:40px }
body.immersive-mode .players-strip { margin:8px auto }
body.immersive-mode .room-code { min-height:36px }
body.immersive-mode .turn-banner { margin:4px auto 12px;padding:9px 13px }
body.immersive-mode .turn-banner h1 { font-size:13px }
body.immersive-mode .turn-banner p { font-size:10px }
@media(min-width:900px) and (max-height:950px) {
 body.immersive-mode .view-battle .battle-layout { max-width:820px;grid-template-columns:minmax(0,480px) minmax(190px,240px);gap:28px }
 body.immersive-mode .view-battle .board-panel { max-width:480px }
 body.immersive-mode .view-battle .players-strip,body.immersive-mode .view-battle .turn-banner { max-width:820px }
 body.immersive-mode .view-battle .board-panel { padding:13px }
 body.immersive-mode .view-battle .board-header { margin-bottom:9px }
 body.immersive-mode .view-battle .board-legend { margin-top:8px }
 body.immersive-mode .view-battle .action-bar { margin-top:9px;padding-top:10px }
 body.immersive-mode .view-battle .arsenal { padding-top:9px;margin-bottom:8px }
 body.immersive-mode .view-battle .weapon-option { min-height:66px;padding-top:5px;padding-bottom:5px }
 body.immersive-mode .view-battle .weapon-visual { width:27px;height:27px;margin-bottom:3px }
 body.immersive-mode .view-battle .weapon-detail { margin-top:5px;min-height:26px }
}
@media(max-width:740px) {
 .fullscreen-btn { padding:0;min-width:40px;width:40px;height:40px }
 .fullscreen-btn span { display:none }
 .header-actions { gap:7px }
 body.immersive-mode .app-shell { padding:0 20px }
 body.immersive-mode .view-battle .battle-layout { display:flex;max-width:480px;gap:16px }
 body.immersive-mode .view-battle .players-strip,body.immersive-mode .view-battle .turn-banner { max-width:480px }
 body.immersive-mode .view-battle .board-panel { max-width:480px }
 .watch-status { padding:10px 11px;min-height:60px }
 .watch-status strong { font-size:11px }
}
@media(max-width:520px) {
 .board-ocean::before,.board-ocean::after { left:17px }
 .board-header { gap:7px;flex-wrap:wrap }
 .board-header .tab-row { gap:1px;padding:2px }
 .board-header .tab-btn { font-size:9px;padding:6px 7px;gap:4px;min-height:36px }
 .board-header .tab-btn svg { width:12px;height:12px }
 .board-header .board-title { font-size:10px }
 .watch-pill { font-size:7px;padding:4px 7px }
 .watch-status { gap:9px }
 .watch-status span,.watch-status p { font-size:9px }
 body.immersive-mode .app-shell { padding:0 16px }
 body.immersive-mode .site-header { height:61px }
}
@media(prefers-reduced-motion:reduce) {
 .board-ocean::before,.board-ocean::after,.cell.live-aim-center::after,.watch-pill::before { animation:none!important }
 .board-ocean::after { opacity:.3;transform:none }
 .board-ocean .cell.shot-miss::before,.board-ocean .cell.shot-miss::after { animation:none!important;display:none }
}
body.reduced-motion *,body.reduced-motion *::before,body.reduced-motion *::after { animation:none!important;transition:none!important;scroll-behavior:auto!important }
body.reduced-motion .board-ocean::after { opacity:.3;transform:none }
body.reduced-motion .ship-visual .vessel-art,body.reduced-motion .weapon-art { transform:none!important }
body.reduced-motion .cell.shot-hit::before,body.reduced-motion .cell.shot-hit::after,body.reduced-motion .cell.shot-sunk::before,body.reduced-motion .cell.shot-sunk::after,body.reduced-motion .cell.shot-miss::before,body.reduced-motion .cell.shot-miss::after,body.reduced-motion .cell.shot-loot::before,body.reduced-motion .cell.shot-loot::after,body.reduced-motion .firing .board-wrap::before { display:none!important }
@media(max-width:520px) {
 .header-actions [data-action="rules"] { width:40px;min-width:40px;height:40px;min-height:40px;padding:0;border:1px solid var(--line);border-radius:50%;position:relative }
 .header-actions [data-action="rules"] svg { width:17px;height:17px }
 .header-actions [data-action="rules"] span { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
}