/* Cinematic presentation. The rules engine and accessible HTML boards remain independent. */
body.cinematic-game {
  --mint: #a8f0d1;
  --coral: #ff9a79;
  --muted: #8ba8b5;
  --line: #91c6c31d;
  --panel: #0d232e;
  --sea: #082631;
  color: #e9eee5;
  background: #07141d;
  font-family: "Segoe UI", Arial, sans-serif;
  background-image: radial-gradient(ellipse at 13% 3%, #164e5559, transparent 40%), radial-gradient(ellipse at 92% 28%, #243b4c66, transparent 44%), linear-gradient(165deg, #081b24, #07141d 54%, #0b2029);
  background-attachment: fixed;
}
.cinematic-game:before { opacity: .11; z-index: 50; }
.cinematic-game:after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 71px, #86bcbb04 72px), repeating-linear-gradient(90deg, transparent 0 71px, #86bcbb04 72px); }
.cinematic-game .shell, .cinematic-game.lan-page .shell { max-width: 1460px; padding: 0 42px; }
.cinematic-game button { transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.cinematic-game button:focus-visible, .cinematic-game a:focus-visible, .cinematic-game select:focus-visible, .cinematic-game input:focus-visible { outline: 2px solid #bdffe2; outline-offset: 4px; }
.cinematic-game button:disabled { transform: none; }
.cinematic-game .topbar, .cinematic-game.lan-page .topbar { height: 76px; border-bottom-color: #9cc0bd20; }
.cinematic-game .brand { gap: 13px; }
.cinematic-game .brand-mark { border-color: #98cbb04d; width: 40px; height: 40px; background: radial-gradient(circle at 50% 25%, #96e9cb1c, #133d401c); box-shadow: inset 0 0 12px #abd0b80d, 0 0 20px #72e0ba08; }
.cinematic-game .brand-name { font-size: 13px; letter-spacing: 3px; color: #edf3e8; }
.cinematic-game .brand-sub { color: #789b9f; font-size: 8px; letter-spacing: 2.4px; }
.cinematic-game .top-actions { gap: 7px; }
.cinematic-game .nav-button { color: #9eb5b9; font-size: 11px; }
.cinematic-game .nav-button:hover, .cinematic-game .icon-button:hover { background: #9fdcc010; color: #dffce9; }
.cinematic-game .icon-button { border-color: #7aaa9e30; background: #0b26315c; border-radius: 9px; }
.cinematic-game .language { color: #c2d5c8; }
.cinematic-game .hero, .cinematic-game.lan-page .hero { min-height: 145px; padding: 22px 0 20px; overflow: visible; gap: 28px; }
.cinematic-game .hero > div:first-child { position: relative; z-index: 1; }
.cinematic-game .hero:before { content: ""; position: absolute; width: 450px; height: 145px; right: 1%; top: 5px; background: radial-gradient(ellipse, #5abea31a, transparent 65%); pointer-events: none; }
.cinematic-game .hero h1 { font-size: clamp(32px, 3.3vw, 47px); font-weight: 650; letter-spacing: -1.8px; line-height: 1.12; margin: 11px 0 10px; color: #f0f0e5; }
.cinematic-game .hero h1 em { color: #a6e9cb; font-weight: 450; }
.cinematic-game .hero p { max-width: 730px; font-size: 12px; line-height: 1.65; color: #91acb5; }
.cinematic-game .eyebrow { color: #aacdbc; font-size: 9px; letter-spacing: 2px; }
.cinematic-game .signal-dot { background: #a0f0c9; box-shadow: 0 0 11px #8cf1c076; }
.cinematic-game .hero-art { width: 225px; height: 120px; opacity: .8; margin-right: 15px; }
.cinematic-game .hero-art svg { filter: drop-shadow(0 10px 18px #03111877); }
.cinematic-game .coordinate { font-size: 8px; color: #678d99; }
.cinematic-game .hero-meta { display: flex; align-items: center; gap: 13px; color: #769894; font: 9px monospace; letter-spacing: 1.2px; margin-top: 13px; }
.cinematic-game .badge-3d, .cinematic-game .hero-badge, .cinematic-game .scene-badge { display: inline-flex; align-items: center; vertical-align: middle; border: 1px solid #9fd1b747; border-radius: 5px; padding: 4px 7px; color: #bef6d9; background: #173b394f; font: 10px monospace; letter-spacing: 1px; margin-left: 8px; transform: translateY(-3px); }
.cinematic-game .mode-picker { max-width: 940px; gap: 9px; margin-bottom: 19px; }
.cinematic-game .mode-choice { background: linear-gradient(125deg, #102d3599, #0b222a99); padding: 12px 15px; border-color: #84b8ab27; border-radius: 10px; color: #8daea9; gap: 11px; }
.cinematic-game .mode-choice > .icon { width: 19px; height: 19px; }
.cinematic-game .mode-choice strong { font-size: 12px; font-weight: 600; color: #bfd5cf; }
.cinematic-game .mode-choice small { font-size: 9px; color: #799891; margin-top: 4px; }
.cinematic-game .mode-choice:hover:not(:disabled) { background: #173d3d; border-color: #9fdbc26e; }
.cinematic-game .mode-choice.selected { border-color: #aae8c581; background: linear-gradient(115deg, #214a4388, #143134bb); box-shadow: inset 0 1px #dbffe41a, 0 3px 18px #0000000d; }
.cinematic-game .mode-choice.selected strong { color: #d4f8e5; }
.cinematic-game .mode-choice.selected small { color: #98b7a9; }
.cinematic-game .game-top { border-top-color: #84b8ab22; padding: 14px 0; }
.cinematic-game .operation-number { border-color: #9ed3bd35; background: #214a4222; color: #c0e8cc; border-radius: 6px; }
.cinematic-game .operation-label { font-size: 11px; font-weight: 600; color: #d9e4d8; }
.cinematic-game .operation-sub { font-size: 8px; color: #6f979e; letter-spacing: 1.2px; }
.cinematic-game .difficulty { color: #89a6a4; font-size: 10px; }
.cinematic-game .difficulty select { background: #0d2831; border-color: #81aaab36; color: #bbd7cb; padding-block: 9px; }
.cinematic-game .scene-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; padding: 0 0 14px; color: #89a7aa; font-size: 10px; }
.cinematic-game .scene-toolbar > span, .cinematic-game .scene-toolbar > label { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; font: 9px monospace; letter-spacing: 1px; color: #71968e; }
.cinematic-game .scene-label .icon { width: 14px; height: 14px; }
.cinematic-game .scene-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cinematic-game .scene-toolbar button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 6px 10px; background: #112b336b; border: 1px solid #81b29d2b; border-radius: 6px; color: #8cacaa; font-size: 10px; }
.cinematic-game .scene-toolbar button .icon { width: 14px; height: 14px; }
.cinematic-game .scene-toolbar button:hover { border-color: #a1d6bb77; color: #d2f9e1; }
.cinematic-game .scene-toolbar button[aria-pressed="true"], .cinematic-game .scene-toolbar button.active, .cinematic-game .scene-toolbar button.selected { color: #ccf8dd; border-color: #99d9b968; background: #3052475c; }
.cinematic-game .battle-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cinematic-game .shared-layout, .cinematic-game.lan-page .shared-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cinematic-game .shared-boards, .cinematic-game.lan-page .shared-boards { grid-template-columns: repeat(2, minmax(282px, 1fr)); gap: 16px; padding-top: 0; padding-bottom: 6px; }
.cinematic-game .board-panel { min-width: 0; border-color: #96c1b92e; border-radius: 14px; background: linear-gradient(145deg, #122d38e8, #0a2029ee 68%); box-shadow: 0 10px 38px #00000022, inset 0 1px #d1f4df06; overflow: hidden; }
.cinematic-game .board-panel:before { content: ""; position: absolute; width: 52px; height: 1px; left: 20px; top: 0; background: #a4e8c9; opacity: .65; }
.cinematic-game .enemy-panel:before { background: #edb38e; }
.cinematic-game .board-panel.turn-owner { border-color: #a1efc87c; box-shadow: 0 0 0 1px #a4e8c90b, 0 12px 40px #00000024, 0 0 26px #92ffbf08; }
.cinematic-game .enemy-panel.turn-owner { border-color: #efb38e8a; box-shadow: 0 0 0 1px #ffb38e0b, 0 12px 40px #00000024; }
.cinematic-game .panel-head, .cinematic-game.lan-page .panel-head { padding: 17px 20px 14px; }
.cinematic-game .panel-kicker { font-size: 8px; letter-spacing: 1.8px; color: #7ba3a9; margin-bottom: 6px; }
.cinematic-game .panel-title, .cinematic-game.lan-page .panel-title { font-size: 16px; font-weight: 600; letter-spacing: -.2px; color: #e0eee1; }
.cinematic-game .panel-title .icon { color: #a9d8be; width: 16px; height: 16px; }
.cinematic-game .enemy-panel .panel-title .icon { color: #deb39a; }
.cinematic-game .tag { color: #aad5bf; border-color: #8dc2a93d; background: #2849393d; font-size: 8px; border-radius: 5px; padding: 5px 8px; }
.cinematic-game .tag.enemy { color: #9aaeb2; border-color: #90b0b036; background: #4352561f; }
.cinematic-game .tag.active { color: #edc4a0; border-color: #e6b48866; background: #66553a35; box-shadow: 0 0 13px #eac79008; }
.cinematic-game .grid-wrap { padding: 0; position: relative; isolation: isolate; }
.cinematic-game .ocean-stage { display: none; }
.cinematic-game .ocean-stage.ocean-live { display: block; position: relative; width: 100%; height: clamp(300px, 31vw, 430px); overflow: hidden; touch-action: manipulation; background: radial-gradient(ellipse at 48% 43%, #1d5560, #0a2734 70%, #081f2c); }
.cinematic-game .ocean-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.cinematic-game .ocean-stage:after { content: ""; pointer-events: none; position: absolute; inset: 0; box-shadow: inset 0 18px 26px -20px #0000008f, inset 0 -28px 28px -29px #01151d; }
.cinematic-game .ocean-stage .keyboard-cell { position: absolute; bottom: 10px; left: 14px; pointer-events: none; z-index: 3; color: #ceeadc; border: 1px solid #9ddcba4f; background: #0d282ddb; padding: 6px 9px; border-radius: 5px; font: 10px monospace; }
.cinematic-game .ocean-coordinate { position: absolute; z-index: 3; left: 14px; top: 11px; pointer-events: none; min-width: 32px; text-align: center; color: #c4e6d7; background: #0b283282; border: 1px solid #99cbb02b; border-radius: 5px; padding: 5px 7px; font: 10px monospace; letter-spacing: 1px; backdrop-filter: blur(5px); }
.cinematic-game .ocean-fallback { position: relative; padding: 0 18px 0 9px; }
.cinematic-game .ocean-fallback .fleet-layer, .cinematic-game .ocean-fallback .grid-cover { inset: 22px 18px 0 31px; }
.cinematic-game .ocean-live + .ocean-fallback { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
.cinematic-game .ocean-live + .ocean-fallback:focus-within { z-index: 6; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 450px); height: 100%; margin: 0; padding: 15px 23px 20px 10px; overflow: visible; clip: auto; clip-path: none; white-space: normal; pointer-events: auto; background: #0b2534f5; box-shadow: 0 0 0 1px #b9eac26e, 0 0 38px #041319; border-radius: 7px; }
.cinematic-game .ocean-live + .ocean-fallback:focus-within .sea-map { height: 100%; aspect-ratio: auto; }
.cinematic-game .ocean-live + .ocean-fallback:focus-within .fleet-layer, .cinematic-game .ocean-live + .ocean-fallback:focus-within .grid-cover { inset: 37px 23px 20px 32px; }
.cinematic-game .cell:focus-visible { z-index: 5; outline-offset: -2px; }
.cinematic-game .board-footer, .cinematic-game.lan-page .board-footer { border-top: 1px solid #8db9b619; padding: 13px 20px 15px; background: linear-gradient(180deg, #0f293333, #10252e6b); }
.cinematic-game .fleet-status { margin-bottom: 9px; }
.cinematic-game .fleet-caption { font-size: 8px; letter-spacing: 1.2px; color: #80a4a8; }
.cinematic-game .fleet-count { color: #d4e8d4; font-size: 10px; }
.cinematic-game .fleet-dots { gap: 9px; }
.cinematic-game .mini-ship i { width: 7px; height: 6px; border-radius: 1px; background: #9bd3b5; box-shadow: 0 0 5px #96e7b511; }
.cinematic-game .enemy-panel .mini-ship i { background: #92aeb5; }
.cinematic-game .mini-ship.destroyed i { background: #76503f; box-shadow: none; }
.cinematic-game .mini-ship.pending i { background: transparent; outline-color: #4b7273; box-shadow: none; }
.cinematic-game .panel-controls { margin-top: 12px; gap: 7px; }
.cinematic-game .small-button { color: #a5c5bd; background: #20433e38; border-color: #81b09c37; padding: 9px 11px; border-radius: 6px; font-size: 10px; }
.cinematic-game .small-button:hover { color: #dbfae7; background: #385c4559; border-color: #a5dbb57a; }
.cinematic-game .small-button.selected { background: #4b75583b; color: #b8f4cd; border-color: #a7d8b184; }
.cinematic-game .manual-tools { margin-top: 12px; padding-top: 12px; border-color: #92bdad1f; }
.cinematic-game .ship-picker { gap: 7px; margin-bottom: 9px; }
.cinematic-game .ship-select { min-height: 38px; background: #102f35; border-color: #80b09b32; border-radius: 6px; }
.cinematic-game .ship-select.active { background: #4265453f; border-color: #abe3b78a; box-shadow: inset 0 1px #d0f8cb0d; }
.cinematic-game .ship-select small { color: #93b4a7; }
.cinematic-game .manual-hint, .cinematic-game .lan-board-note { color: #87aaa5; font-size: 10px; line-height: 1.6; }
.cinematic-game .turn-banner { margin-top: 8px; min-height: 23px; font-size: 10px; color: #a5d7b8; }
.cinematic-game .turn-banner.enemy-turn { color: #dfb594; }
.cinematic-game .side-panel, .cinematic-game.lan-page .side-panel { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 180px; border-radius: 11px; background: #0f273099; border-color: #7daaa829; }
.cinematic-game .mission-section, .cinematic-game.lan-page .mission-section { padding: 16px 20px; display: grid; grid-template-columns: minmax(0, 1fr) 175px; gap: 5px 18px; align-items: center; }
.cinematic-game .mission-section .section-label { grid-column: 1; }
.cinematic-game .status-orbit { grid-column: 1; margin-top: 7px; gap: 9px; }
.cinematic-game .orbit { width: 25px; height: 25px; border-color: #9cd1ad60; }
.cinematic-game .orbit:before { width: 7px; height: 7px; }
.cinematic-game .status-orbit h2 { color: #dcf0d9; font-weight: 550; font-size: 13px; }
.cinematic-game .mission-copy, .cinematic-game.lan-page .mission-copy { grid-column: 1; font-size: 10px; margin: 4px 0 2px; min-height: 0; line-height: 1.6; color: #86a4a4; }
.cinematic-game .mission-section .primary-button, .cinematic-game.lan-page .mission-section .primary-button { grid-column: 2; grid-row: 1 / 4; margin: 0; max-width: none; }
.cinematic-game .key-note { grid-column: 2; margin-top: 0; font-size: 8px; color: #668c8d; }
.cinematic-game .primary-button { min-height: 44px; color: #153b33; background: linear-gradient(135deg, #c5edc7, #95d8b6); border-color: #c4ecc9; border-radius: 7px; box-shadow: inset 0 1px #f0ffe880, 0 4px 15px #03160d42; font-size: 11px; font-weight: 650; }
.cinematic-game .primary-button:hover { background: linear-gradient(135deg, #dbfad6, #b1e6c5); box-shadow: inset 0 1px #f0ffe880, 0 5px 20px #7fedb01c; }
.cinematic-game .primary-button:disabled { color: #81978d; background: #29433d; border-color: #34584a; box-shadow: none; }
.cinematic-game .sidebar-divider { display: none; }
.cinematic-game .log-section, .cinematic-game.lan-page .log-section { padding: 17px 20px; border-left: 1px solid #93baae22; border-top: 0; }
.cinematic-game .section-label { font-size: 8px; color: #87a9a5; letter-spacing: 1.7px; }
.cinematic-game .log, .cinematic-game.lan-page .log { min-height: 0; gap: 7px; margin-top: 11px; }
.cinematic-game .log-line, .cinematic-game.lan-page .log-line { font-size: 10px; line-height: 1.55; color: #7e9fa6; }
.cinematic-game .log-line:nth-child(n+3), .cinematic-game.lan-page .log-line:nth-child(n+3) { display: none !important; }
.cinematic-game .log-line:first-child { color: #c0d6cc; }
.cinematic-game .log-mark { color: #b4dabf; }
.cinematic-game .log-line time { color: #60888e; }
.cinematic-game .session-stats { border-left: 1px solid #8fbbae22; border-top: 0; padding: 18px; background: #17363029; display: flex; flex-direction: row; justify-content: space-around; align-items: center; gap: 15px; }
.cinematic-game .stat-value { color: #cde7cb; font-size: 24px; font-weight: 400; }
.cinematic-game .stat-name { color: #7ca19a; font-size: 9px; }
.cinematic-game .shared-turn { padding: 11px 16px; min-height: 43px; margin-bottom: 13px; color: #b8e4c4; border-color: #9ad4ad41; background: linear-gradient(90deg, #2344399e, #18332f44); border-radius: 8px; font-size: 11px; }
.cinematic-game .shared-turn span { color: #90b1a4; font-size: 10px; }
.cinematic-game .shared-turn.second-turn { color: #f0c19b; border-color: #d6ae7d45; background: linear-gradient(90deg, #4d3e2799, #342c2344); }
.cinematic-game .shared-turn.second-turn span { color: #c4b094; }
.cinematic-game .below-game { padding: 16px 0 20px; }
.cinematic-game .legend { font-size: 9px; color: #71999a; gap: 20px; }
.cinematic-game .legend .legend-ship { background: #93cdb0; }
.cinematic-game .save-note { color: #60858c; font-size: 9px; }
.cinematic-game .footer, .cinematic-game.lan-page .footer { padding: 17px 0 20px; color: #4d777f; font-size: 8px; border-color: #8ab7b21c; }
.cinematic-game .footer .footer-motto { color: #72948f; font-size: 9px; }
.cinematic-game .mobile-tabs { border-color: #92c9ac35; background: #0c2931; }
.cinematic-game .mobile-tabs button.active { background: #385f494d; color: #ccebd0; }
.cinematic-game .modal-backdrop { background: #041218c9; backdrop-filter: blur(12px); }
.cinematic-game .modal { border: 1px solid #9ec9b64d; background: radial-gradient(ellipse at 10% 0%, #2c574842, transparent 70%), #10272f; box-shadow: 0 30px 140px #0009, inset 0 1px #caf5d50d; border-radius: 17px; }
.cinematic-game .modal h2 { color: #e7f2df; font-weight: 600; }
.cinematic-game .modal p, .cinematic-game .modal ol { color: #a0bab1; }
.cinematic-game .modal-eyebrow { color: #b4ddb9; }
.cinematic-game .pause-cover { background: #061c28d9; backdrop-filter: blur(12px); }
.cinematic-game .handoff-screen { border-color: #95c5af3b; min-height: 450px; background: radial-gradient(ellipse at 50% 0%, #36766536, transparent 65%), linear-gradient(145deg, #112c35dd, #071e29); box-shadow: inset 0 1px #d4fad509, 0 16px 45px #0002; }
.cinematic-game .handoff-emblem { border-color: #9ae0b760; background: #30604b45; box-shadow: 0 0 60px #9af0bb0b; }
.cinematic-game .handoff-screen h2 { color: #e0eee2; }
.cinematic-game .toast { color: #103a2d; background: #c5eacb; border: 1px solid #e5fbe588; box-shadow: 0 10px 38px #031a22aa; }
.cinematic-game .shot-announcement { position: fixed; z-index: 19; left: 50%; top: 96px; display: flex; align-items: center; gap: 11px; max-width: calc(100vw - 32px); width: max-content; padding: 13px 22px; border: 1px solid #a9d2c05c; border-radius: 9px; background: #102b30ec; backdrop-filter: blur(16px); color: #d9eee0; box-shadow: 0 9px 50px #0119239e, inset 0 1px #e0f7e60a; opacity: 0; transform: translate(-50%, -10px) scale(.96); pointer-events: none; transition: opacity .2s ease, transform .25s ease; font-size: 13px; font-weight: 600; letter-spacing: .2px; }
.cinematic-game .shot-announcement.visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.cinematic-game .shot-announcement[data-kind="hit"] { border-color: #ffc18d77; color: #ffe0ac; background: #342f24ed; box-shadow: 0 8px 45px #b2874022, 0 9px 50px #0119239e; }
.cinematic-game .shot-announcement[data-kind="sunk"] { border-color: #ffa987a1; color: #ffd1af; background: #3b2925ef; box-shadow: 0 8px 60px #e9824b26, 0 9px 50px #0119239e; }
.cinematic-game .shot-announcement[data-kind="miss"] { color: #b5dce1; border-color: #92cbcf60; }
.cinematic-game .shot-announcement .icon { width: 19px; height: 19px; }
.cinematic-game.lan-page .lan-art { width: 108px; height: 108px; border-color: #8dc5aa35; margin-right: 20px; background: repeating-radial-gradient(circle, transparent 0 16px, #98c5ac26 17px 18px, transparent 19px 34px); }
.cinematic-game.lan-page .lan-art svg { color: #addbbf; width: 42px; height: 42px; }
.cinematic-game .lan-status-strip { background: #234b3c50; border-color: #8bccaa35; color: #b6d8c0; font-size: 11px; margin-bottom: 16px; }
.cinematic-game .lan-status-strip.warning { background: #55432355; border-color: #c6a97450; }
.cinematic-game .lan-status-strip.error { background: #5b362655; border-color: #d3997250; }
.cinematic-game .lan-lobby { gap: 18px; }
.cinematic-game .lan-card { background: radial-gradient(ellipse at 10% 0%, #45795726, transparent 65%), linear-gradient(140deg, #102b35, #0b222c); border-color: #8ac1a737; border-radius: 13px; box-shadow: 0 14px 40px #00000015; }
.cinematic-game .lan-card h2 { color: #dbeedb; font-weight: 550; }
.cinematic-game .lan-card p { color: #8caea9; }
.cinematic-game .lan-card-number { color: #b8d8b5; border-color: #98c3a345; background: #6a8f4c10; }
.cinematic-game .lan-code-input { background: #09222c; border-color: #93b5a358; color: #d3edce; }
.cinematic-game .lan-how { background: #10292c55; border-color: #8bbfa727; }
.cinematic-game .lan-how h3 { color: #bfd9c1; }
.cinematic-game .lan-how p, .cinematic-game .lan-how li { color: #82a5a0; }
.cinematic-game .lan-share { background: linear-gradient(120deg, #183b3577, #102b3288); border-color: #8bbb9f37; border-radius: 9px; padding: 13px 17px; margin-bottom: 16px; }
.cinematic-game .lan-share-code { color: #d9edcb; font-size: 24px; }
.cinematic-game .lan-share-url { border-color: #87b99e35; background: #0b222ab3; color: #a4c7b5; }
.cinematic-game .lan-role { color: #8fbca5; font-size: 10px; }
.cinematic-game .lan-role span { color: #d6e8d4; }
.cinematic-game .lan-network { color: #8fbca0; }
.cinematic-game.lan-page .side-panel { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.cinematic-game .lan-result { background: radial-gradient(ellipse at 20% 0%, #447a4244, transparent 70%), #18332c; border-color: #9accaa55; }
.cinematic-game .lan-result.lan-defeat { background: radial-gradient(ellipse at 20% 0%, #84612b44, transparent 70%), #302a25; border-color: #c29b7655; }
.cinematic-game .lan-legend { margin: 14px 0 20px; font-size: 9px; color: #739b95; }
.cinematic-game .lan-local-shield { background: #071d26f2; }
@media (min-width: 1600px) {
  .cinematic-game .shell, .cinematic-game.lan-page .shell { max-width: 1560px; padding-inline: 48px; }
  .cinematic-game .hero { min-height: 156px; }
  .cinematic-game .ocean-stage.ocean-live { height: 450px; }
}
@media (min-width: 900px) and (max-height: 820px) {
  .cinematic-game .topbar, .cinematic-game.lan-page .topbar { height: 63px; }
  .cinematic-game .hero, .cinematic-game.lan-page .hero { min-height: 102px; padding: 10px 0; }
  .cinematic-game .hero h1 { font-size: 32px; margin: 7px 0 5px; }
  .cinematic-game .hero p { font-size: 11px; }
  .cinematic-game .hero-meta { font-size: 8px; margin-top: 5px; }
  .cinematic-game .hero-art { height: 86px; width: 180px; }
  .cinematic-game .mode-picker { margin-bottom: 11px; }
  .cinematic-game .mode-choice { padding-block: 10px; }
  .cinematic-game .game-top { padding-block: 11px; }
  .cinematic-game .scene-toolbar { padding-bottom: 10px; }
  .cinematic-game .ocean-stage.ocean-live { height: clamp(340px, 45vh, 400px); }
  .cinematic-game .panel-head, .cinematic-game.lan-page .panel-head { padding-block: 12px; }
  .cinematic-game .board-footer, .cinematic-game.lan-page .board-footer { padding-top: 11px; padding-bottom: 11px; }
}
@media (max-width: 1100px) {
  .cinematic-game .shell, .cinematic-game.lan-page .shell { padding: 0 26px; }
  .cinematic-game .side-panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .cinematic-game .session-stats { display: none; }
  .cinematic-game .mission-section, .cinematic-game.lan-page .mission-section { grid-template-columns: minmax(0, 1fr) 145px; padding: 16px; gap: 4px 12px; }
  .cinematic-game .panel-head, .cinematic-game.lan-page .panel-head { padding-inline: 16px; }
  .cinematic-game .board-footer, .cinematic-game.lan-page .board-footer { padding-inline: 16px; }
  .cinematic-game .hero-art { width: 185px; margin: 0; }
}
@media (max-width: 800px) {
  .cinematic-game .shell, .cinematic-game.lan-page .shell { padding: 0 20px; }
  .cinematic-game .topbar, .cinematic-game.lan-page .topbar { height: 67px; }
  .cinematic-game .hero, .cinematic-game.lan-page .hero { min-height: 138px; padding: 20px 0; }
  .cinematic-game .hero h1 { font-size: 34px; letter-spacing: -1.3px; }
  .cinematic-game .hero p { font-size: 11px; max-width: 490px; }
  .cinematic-game .hero-art { width: 145px; height: 100px; opacity: .6; }
  .cinematic-game .hero .coordinate { font-size: 7px; }
  .cinematic-game .mode-choice { padding: 11px; gap: 8px; }
  .cinematic-game .mode-choice strong { font-size: 11px; }
  .cinematic-game .mode-choice small { font-size: 8px; }
  .cinematic-game .mode-choice > .icon { width: 16px; height: 16px; }
  .cinematic-game .mode-choice > .icon:last-child { display: none; }
  .cinematic-game .battle-layout, .cinematic-game .shared-boards, .cinematic-game.lan-page .shared-boards { gap: 12px; }
  .cinematic-game .panel-head, .cinematic-game.lan-page .panel-head { padding: 14px; }
  .cinematic-game .panel-title, .cinematic-game.lan-page .panel-title { font-size: 14px; }
  .cinematic-game .panel-title .icon { width: 14px; }
  .cinematic-game .tag { font-size: 7px; padding: 4px 6px; }
  .cinematic-game .ocean-stage.ocean-live { height: 305px; }
  .cinematic-game .board-footer, .cinematic-game.lan-page .board-footer { padding: 13px 14px; }
  .cinematic-game .fleet-dots { gap: 5px; }
  .cinematic-game .mini-ship i { width: 6px; }
  .cinematic-game .small-button { padding: 9px 8px; font-size: 9px; }
  .cinematic-game .side-panel, .cinematic-game.lan-page .side-panel { grid-template-columns: 1.2fr 1fr; }
  .cinematic-game .mission-section, .cinematic-game.lan-page .mission-section { grid-template-columns: 1fr; padding: 16px; }
  .cinematic-game .mission-section .primary-button, .cinematic-game.lan-page .mission-section .primary-button { grid-column: 1; grid-row: auto; margin-top: 7px; }
  .cinematic-game .mission-copy { font-size: 10px; }
  .cinematic-game .key-note { display: none; }
  .cinematic-game .log-section, .cinematic-game.lan-page .log-section { padding: 18px 16px; }
  .cinematic-game .log { gap: 10px; }
  .cinematic-game .lan-share-code { font-size: 22px; }
  .cinematic-game .scene-toolbar { justify-content: flex-start; gap: 5px; }
  .cinematic-game .scene-toolbar > span, .cinematic-game .scene-toolbar > label { margin-right: 8px; }
}
@media (max-width: 590px) {
  .cinematic-game .shell, .cinematic-game.lan-page .shell { padding: 0 14px; }
  .cinematic-game .brand-name { font-size: 11px; letter-spacing: 1.8px; }
  .cinematic-game .brand-sub { font-size: 6px; letter-spacing: 1.8px; }
  .cinematic-game .brand-mark { width: 31px; height: 31px; }
  .cinematic-game .brand { gap: 8px; }
  .cinematic-game .topbar, .cinematic-game.lan-page .topbar { height: 62px; gap: 8px; }
  .cinematic-game .top-actions { gap: 2px; }
  .cinematic-game .nav-button { padding: 8px 5px; }
  .cinematic-game .icon-button { width: 30px; height: 31px; padding: 6px; }
  .cinematic-game .hero, .cinematic-game.lan-page .hero { min-height: 145px; padding: 21px 0 19px; }
  .cinematic-game .hero:before { width: 90%; right: 0; top: 5px; }
  .cinematic-game .hero h1 { font-size: 32px; letter-spacing: -1.2px; margin: 11px 0 9px; }
  .cinematic-game .hero p { max-width: 410px; font-size: 11px; line-height: 1.65; }
  .cinematic-game .eyebrow { font-size: 8px; letter-spacing: 1.55px; }
  .cinematic-game .hero-art { display: none; }
  .cinematic-game .hero-meta { font-size: 8px; letter-spacing: .7px; margin-top: 10px; }
  .cinematic-game .mode-picker { gap: 7px; margin-bottom: 15px; }
  .cinematic-game .mode-choice { padding: 10px 9px; border-radius: 8px; }
  .cinematic-game .mode-choice strong { font-size: 10px; }
  .cinematic-game .mode-choice small { font-size: 8px; }
  .cinematic-game .mode-choice[data-mode="lan"] { padding-block: 9px; align-items: center; }
  .cinematic-game .mode-choice[data-mode="lan"] > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .cinematic-game .mode-choice[data-mode="lan"] small { margin: 0; text-align: right; }
  .cinematic-game .game-top { padding: 12px 0; gap: 10px; }
  .cinematic-game .operation-label { font-size: 10px; }
  .cinematic-game .operation-sub { font-size: 7px; letter-spacing: .8px; }
  .cinematic-game .operation-number { width: 26px; height: 26px; }
  .cinematic-game .scene-toolbar { padding-bottom: 12px; gap: 5px; }
  .cinematic-game .scene-toolbar button { font-size: 9px; padding: 6px 8px; min-height: 29px; }
  .cinematic-game .scene-toolbar > span, .cinematic-game .scene-toolbar > label { width: 100%; margin: 0 0 2px; font-size: 8px; }
  .cinematic-game .battle-layout { display: flex; flex-direction: column; gap: 13px; }
  .cinematic-game .battle-layout > .board-panel { width: 100%; }
  .cinematic-game .board-panel.mobile-hidden { display: none; }
  .cinematic-game .board-panel { border-radius: 11px; }
  .cinematic-game .panel-head, .cinematic-game.lan-page .panel-head { padding: 15px; }
  .cinematic-game .panel-title { font-size: 16px; }
  .cinematic-game .panel-kicker { font-size: 7px; }
  .cinematic-game .tag { font-size: 7px; }
  .cinematic-game .ocean-stage.ocean-live { height: clamp(310px, 88vw, 400px); }
  .cinematic-game .shared-boards .ocean-stage.ocean-live { height: 290px; }
  .cinematic-game .shared-boards, .cinematic-game.lan-page .shared-boards { grid-template-columns: repeat(2, minmax(282px, 1fr)); gap: 11px; }
  .cinematic-game .shared-boards .panel-head { padding: 14px 12px; }
  .cinematic-game .shared-boards .panel-title { font-size: 13px; }
  .cinematic-game .shared-boards .tag { font-size: 7px; padding-inline: 4px; }
  .cinematic-game .shared-boards .board-footer { padding: 12px; }
  .cinematic-game .shared-boards .fleet-dots { gap: 5px; }
  .cinematic-game .shared-boards .mini-ship i { width: 6px; }
  .cinematic-game .board-footer { padding: 13px 15px 14px; }
  .cinematic-game .fleet-dots { gap: 8px; }
  .cinematic-game .mini-ship i { width: 7px; }
  .cinematic-game .small-button, .cinematic-game.lan-page .small-button { font-size: 10px; padding: 10px 8px; }
  .cinematic-game .panel-controls { margin-top: 12px; }
  .cinematic-game .manual-hint { font-size: 10px; }
  .cinematic-game .side-panel, .cinematic-game.lan-page .side-panel { display: block; width: 100%; }
  .cinematic-game .mission-section, .cinematic-game.lan-page .mission-section { grid-template-columns: minmax(0, 1fr) 145px; padding: 16px; gap: 5px 11px; }
  .cinematic-game .mission-section .primary-button, .cinematic-game.lan-page .mission-section .primary-button { grid-column: 2; grid-row: 1 / 4; margin-top: 0; font-size: 10px; padding: 12px 8px; }
  .cinematic-game .status-orbit { gap: 7px; margin-top: 5px; }
  .cinematic-game .status-orbit h2 { font-size: 12px; }
  .cinematic-game .orbit { width: 23px; height: 23px; }
  .cinematic-game .mission-copy, .cinematic-game.lan-page .mission-copy { font-size: 9px; }
  .cinematic-game .log-section, .cinematic-game.lan-page .log-section { padding: 14px 16px; border-left: 0; border-top: 1px solid #8db5a622; }
  .cinematic-game .log { gap: 6px; }
  .cinematic-game .log-line:nth-child(n+2), .cinematic-game.lan-page .log-line:nth-child(n+2) { display: none !important; }
  .cinematic-game .shared-turn { font-size: 11px; padding: 11px 12px; }
  .cinematic-game .shared-turn span { font-size: 9px; margin-left: 26px; }
  .cinematic-game .shared-scroll-note { color: #7a9e98; font-size: 9px; }
  .cinematic-game .below-game { padding: 14px 0 18px; }
  .cinematic-game .legend { font-size: 9px; gap: 15px; }
  .cinematic-game .save-note { display: none; }
  .cinematic-game .footer { padding: 15px 0 18px; font-size: 7px; line-height: 1.6; letter-spacing: .7px; }
  .cinematic-game .footer .footer-motto { font-size: 8px; }
  .cinematic-game .shot-announcement { top: 76px; padding: 11px 16px; font-size: 12px; }
  .cinematic-game .lan-card { padding: 22px; }
  .cinematic-game .lan-share-code { font-size: 24px; }
  .cinematic-game.lan-page .hero > .lan-art { display: none; }
  .cinematic-game.lan-page .scene-toolbar { margin-top: 0; }
  .cinematic-game.lan-page .board-footer { padding: 13px; }
  .cinematic-game.lan-page .shared-boards .panel-title { font-size: 13px; }
  .cinematic-game.lan-page .lan-privacy { font-size: 9px; }
}
@media (max-width: 370px) {
  .cinematic-game .shell, .cinematic-game.lan-page .shell { padding: 0 10px; }
  .cinematic-game .brand-name { font-size: 10px; letter-spacing: 1.2px; }
  .cinematic-game .brand-sub { letter-spacing: 1.2px; }
  .cinematic-game .hero h1 { font-size: 29px; }
  .cinematic-game .scene-toolbar button { font-size: 8px; padding-inline: 7px; }
  .cinematic-game .mission-section, .cinematic-game.lan-page .mission-section { grid-template-columns: minmax(0, 1fr) 130px; padding: 14px; }
}
/* Keep scrolling inside the game frame, including embedded/mobile browsers. */
html:has(body.cinematic-game) { height: 100%; overflow: hidden; }
body.cinematic-game { height: 100vh; height: 100dvh; overflow: hidden; }
.cinematic-game #app, .cinematic-game #lan-app { height: 100%; overflow: auto; overscroll-behavior: contain; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); scroll-padding-block: 8px; }
.cinematic-game .modal-backdrop { padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.cinematic-game .modal { max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }

/* On a phone the board, turn and primary action take precedence over decoration. */
@media (max-width: 590px) {
  .cinematic-game .shell, .cinematic-game.lan-page .shell { padding-inline: 12px; padding-bottom: 12px; }
  .cinematic-game .topbar, .cinematic-game.lan-page .topbar { height: 54px; gap: 6px; }
  .cinematic-game .brand-sub { display: none; }
  .cinematic-game .brand-name { font-size: 11px; letter-spacing: 1px; }
  .cinematic-game .brand-mark { width: 30px; height: 30px; }
  .cinematic-game .top-actions { gap: 0; }
  .cinematic-game .nav-button, .cinematic-game .icon-button,
  .cinematic-game.lan-page .topbar .nav-button, .cinematic-game.lan-page .topbar .icon-button { min-width: 40px; min-height: 40px; width: 40px; height: 40px; padding: 10px; justify-content: center; }
  .cinematic-game .top-actions .nav-button span { display: none; }
  .cinematic-game .hero, .cinematic-game.lan-page .hero { display: none; }
  .cinematic-game .mode-picker { flex-wrap: nowrap; gap: 5px; margin: 10px 0 6px; }
  .cinematic-game .mode-choice, .cinematic-game .mode-choice[data-mode="lan"] { flex: 1 1 0; padding: 8px 6px; min-height: 46px; gap: 5px; align-items: center; }
  .cinematic-game .mode-choice > .icon { display: none; }
  .cinematic-game .mode-choice strong { font-size: 10px; line-height: 1.4; }
  .cinematic-game .mode-choice small { display: none; }
  .cinematic-game .game-top { min-height: 48px; padding: 4px 0; border-top: 0; }
  .cinematic-game .operation-sub { display: none; }
  .cinematic-game .difficulty select { min-height: 40px; }
  .cinematic-game .scene-toolbar, .cinematic-game.lan-page .scene-toolbar { display: block; padding: 6px 0; margin: 0; }
  .cinematic-game .scene-toolbar > .scene-label { display: none; }
  .cinematic-game .scene-controls { display: flex; flex-wrap: nowrap; gap: 4px; }
  .cinematic-game .scene-toolbar button { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 5px 6px; font-size: 9px; line-height: 1.35; }
  .cinematic-game .mobile-tabs { margin-bottom: 8px; padding: 3px; }
  .cinematic-game .mobile-tabs button { min-height: 40px; padding: 7px; }
  .cinematic-game[data-phase="setup"] .mobile-tabs { display: none; }
  .cinematic-game .battle-layout, .cinematic-game .shared-layout, .cinematic-game.lan-page .shared-layout { gap: 8px; }
  .cinematic-game .panel-head, .cinematic-game.lan-page .panel-head, .cinematic-game .shared-boards .panel-head { min-height: 43px; padding: 10px 12px; }
  .cinematic-game .panel-kicker { display: none; }
  .cinematic-game .panel-title, .cinematic-game.lan-page .panel-title { font-size: 14px; }
  .cinematic-game .ocean-stage.ocean-live { height: clamp(265px, 82vw, 355px); }
  .cinematic-game .shared-boards .ocean-stage.ocean-live { height: 280px; }
  .cinematic-game .board-footer, .cinematic-game.lan-page .board-footer, .cinematic-game .shared-boards .board-footer { padding: 9px 12px; }
  .cinematic-game .fleet-status { margin-bottom: 6px; }
  .cinematic-game .fleet-dots { gap: 6px; }
  .cinematic-game .panel-controls { margin-top: 9px; gap: 5px; }
  .cinematic-game .small-button, .cinematic-game.lan-page .small-button, .cinematic-game .ship-select { min-height: 40px; padding: 8px; }
  .cinematic-game .manual-tools { margin-top: 9px; padding-top: 9px; }
  .cinematic-game .manual-hint { font-size: 10px; line-height: 1.45; margin-top: 7px; }
  .cinematic-game .ship-picker { gap: 5px; margin-bottom: 6px; }
  .cinematic-game:not(.lan-page)[data-phase="setup"][data-manual="true"] .board-panel:has(.manual-tools) { display: flex; flex-direction: column; }
  .cinematic-game:not(.lan-page)[data-phase="setup"][data-manual="true"] .board-panel:has(.manual-tools) .board-footer { display: contents; }
  .cinematic-game:not(.lan-page)[data-phase="setup"][data-manual="true"] .board-panel:has(.manual-tools) .panel-head { order: 0; }
  .cinematic-game:not(.lan-page)[data-phase="setup"][data-manual="true"] .board-panel:has(.manual-tools) .manual-tools { display: grid; grid-template-columns: minmax(0, 1fr) 75px; order: 1; margin: 0; padding: 0 10px 8px; border: 0; gap: 5px; }
  .cinematic-game:not(.lan-page)[data-phase="setup"][data-manual="true"] .manual-tools .ship-picker { margin: 0; }
  .cinematic-game:not(.lan-page)[data-phase="setup"][data-manual="true"] .manual-tools > [data-action="rotate"] { font-size: 9px; gap: 3px; padding-inline: 3px; }
  .cinematic-game:not(.lan-page)[data-phase="setup"][data-manual="true"] .ship-select { flex-direction: column; gap: 3px; padding: 4px; }
  .cinematic-game:not(.lan-page)[data-phase="setup"][data-manual="true"] .manual-tools .manual-hint { grid-column: 1 / -1; margin: 0; }
  .cinematic-game:not(.lan-page)[data-phase="setup"][data-manual="true"] .board-panel:has(.manual-tools) .grid-wrap { order: 2; }
  .cinematic-game:not(.lan-page)[data-phase="setup"][data-manual="true"] .board-panel:has(.manual-tools) .fleet-status { order: 3; margin: 8px 12px; }
  .cinematic-game:not(.lan-page)[data-phase="setup"][data-manual="true"] .board-panel:has(.manual-tools) .fleet-dots { display: none; }
  .cinematic-game:not(.lan-page)[data-phase="setup"][data-manual="true"] .board-panel:has(.manual-tools) .panel-controls { order: 4; margin: 0 12px 10px; }
  .cinematic-game .turn-banner { min-height: 20px; margin-top: 6px; }
  .cinematic-game .mission-section, .cinematic-game.lan-page .mission-section { grid-template-columns: minmax(0, 1fr) 128px; gap: 3px 10px; padding: 10px 12px; }
  .cinematic-game .mission-section > .section-label { display: none; }
  .cinematic-game .status-orbit { margin-top: 0; }
  .cinematic-game .mission-section .primary-button, .cinematic-game.lan-page .mission-section .primary-button { grid-column: 2; grid-row: 1 / 3; min-height: 44px; padding: 9px 6px; }
  .cinematic-game .mission-copy, .cinematic-game.lan-page .mission-copy { margin: 2px 0 0; line-height: 1.4; }
  .cinematic-game .log-section, .cinematic-game.lan-page .log-section { padding: 10px 12px; }
  .cinematic-game .log { margin-top: 6px; }
  .cinematic-game .shared-turn { min-height: 40px; padding: 8px 11px; margin-bottom: 8px; gap: 5px 8px; }
  .cinematic-game .shared-turn span, .cinematic-game.lan-page .shared-turn span { width: auto; margin: 0 0 0 auto; font-size: 9px; }
  .cinematic-game .shared-scroll-note, .cinematic-game.lan-page .shared-scroll-note { font-size: 9px; line-height: 1.4; margin: 3px 0 5px; }
  .cinematic-game .below-game, .cinematic-game .lan-legend { padding: 10px 0; margin: 0; }
  .cinematic-game .footer, .cinematic-game.lan-page .footer { padding: 12px 0 0; margin-top: 8px; }
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .mode-picker,
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .game-top,
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .below-game,
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .lan-legend,
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .footer { display: none; }
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .ocean-stage.ocean-live { height: clamp(225px, calc(100dvh - 328px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), 370px); }
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .shared-boards .ocean-stage.ocean-live { height: clamp(215px, calc(100dvh - 310px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)), 310px); }
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .log-section { display: none; }
  .cinematic-game[data-phase="playing"] .lan-board-note { display: none; }
  .cinematic-game[data-phase="playing"] .lan-room-heading { padding: 5px 0; }
  .cinematic-game[data-handoff="true"] .mode-picker, .cinematic-game[data-handoff="true"] .game-top { display: none; }
  .cinematic-game .handoff-screen { min-height: min(420px, calc(100dvh - 90px)); margin: 12px 0; padding: 24px 16px; }
  .cinematic-game .shot-announcement { top: calc(62px + env(safe-area-inset-top, 0px)); }
  .cinematic-game .toast { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .cinematic-game .lan-share { margin: 10px 0; padding: 12px; gap: 8px; }
  .cinematic-game .lan-share-right p { margin-bottom: 0; }
  .cinematic-game .lan-status-strip { margin: 8px 0; }
}
@media (max-width: 370px) {
  .cinematic-game .shell, .cinematic-game.lan-page .shell { padding-inline: 8px; }
  .cinematic-game .brand-mark { display: none; }
  .cinematic-game .brand-name, .cinematic-game.lan-page .brand-name { font-size: 10px; letter-spacing: .5px; }
  .cinematic-game .mission-section, .cinematic-game.lan-page .mission-section { grid-template-columns: minmax(0, 1fr) 120px; }
  .cinematic-game .scene-toolbar button { padding-inline: 4px; font-size: 8px; }
  .cinematic-game .shared-turn span, .cinematic-game.lan-page .shared-turn span { margin-left: 25px; }
}

@media (max-width: 590px) and (max-height: 650px) {
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .topbar { height: 48px; }
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .scene-toolbar { padding-block: 4px; }
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .panel-head { min-height: 36px; padding-block: 8px; }
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .board-footer { padding-block: 8px; }
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .fleet-status { margin: 0; }
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .fleet-dots,
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .turn-banner,
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .mission-copy,
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .shared-scroll-note { display: none; }
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .mission-section { padding-block: 8px; }
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .shared-turn { min-height: 32px; padding: 6px 8px; gap: 4px 6px; }
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .shared-turn span { width: auto; margin-left: auto; }
}

/* A short landscape screen keeps both players' physical sides visible. */
@media (min-width: 591px) and (max-width: 950px) and (max-height: 500px) {
  .cinematic-game .shell, .cinematic-game.lan-page .shell { position: relative; padding-inline: 12px; padding-bottom: 8px; }
  .cinematic-game .topbar, .cinematic-game.lan-page .topbar { height: 45px; }
  .cinematic-game .brand-sub, .cinematic-game .hero, .cinematic-game.lan-page .hero,
  .cinematic-game .below-game, .cinematic-game .footer, .cinematic-game.lan-page .footer,
  .cinematic-game .lan-legend, .cinematic-game .panel-kicker { display: none; }
  .cinematic-game .nav-button, .cinematic-game .icon-button { min-width: 40px; min-height: 40px; padding: 9px; }
  .cinematic-game .mode-picker { margin: 6px 0; gap: 6px; }
  .cinematic-game .mode-choice { min-height: 40px; padding: 8px; }
  .cinematic-game .mode-choice small, .cinematic-game .operation { display: none; }
  .cinematic-game .game-top { position: absolute; right: 220px; top: 2px; min-height: 40px; padding: 0; border: 0; }
  .cinematic-game .difficulty select { min-height: 40px; }
  .cinematic-game .scene-toolbar, .cinematic-game.lan-page .scene-toolbar { padding: 4px 0; gap: 4px; }
  .cinematic-game .scene-toolbar button { min-height: 40px; padding: 6px 10px; }
  .cinematic-game .scene-toolbar > .scene-label { margin-right: auto; }
  .cinematic-game .battle-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px; gap: 8px; }
  .cinematic-game .shared-layout, .cinematic-game.lan-page .shared-layout { grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; }
  .cinematic-game .shared-boards, .cinematic-game.lan-page .shared-boards { grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 8px; padding-bottom: 2px; }
  .cinematic-game .side-panel, .cinematic-game.lan-page .side-panel { grid-column: auto; display: block; }
  .cinematic-game .panel-head, .cinematic-game.lan-page .panel-head { min-height: 36px; padding: 8px 10px; }
  .cinematic-game .panel-title, .cinematic-game.lan-page .panel-title { font-size: 12px; }
  .cinematic-game .tag { padding: 4px; letter-spacing: .4px; font-size: 7px; }
  .cinematic-game .ocean-stage.ocean-live { height: clamp(200px, calc(100dvh - 165px), 285px); }
  .cinematic-game .board-footer, .cinematic-game.lan-page .board-footer { padding: 7px 10px; }
  .cinematic-game .fleet-status { margin: 0; }
  .cinematic-game .fleet-dots, .cinematic-game .lan-board-note { display: none; }
  .cinematic-game .turn-banner { min-height: 16px; margin-top: 4px; font-size: 9px; }
  .cinematic-game .small-button, .cinematic-game .ship-select { min-height: 40px; }
  .cinematic-game .mission-section, .cinematic-game.lan-page .mission-section { display: flex; flex-direction: column; align-items: stretch; padding: 12px 10px; gap: 8px; }
  .cinematic-game .status-orbit { margin: 0; gap: 6px; }
  .cinematic-game .status-orbit h2 { font-size: 11px; }
  .cinematic-game .orbit { width: 19px; height: 19px; }
  .cinematic-game .mission-copy, .cinematic-game.lan-page .mission-copy { font-size: 9px; line-height: 1.45; margin: 0; }
  .cinematic-game .mission-section .primary-button, .cinematic-game.lan-page .mission-section .primary-button { margin: 0; min-height: 42px; padding: 9px 6px; font-size: 10px; }
  .cinematic-game .log-section, .cinematic-game.lan-page .log-section { display: none; }
  .cinematic-game .shared-turn { min-height: 30px; padding: 5px 10px; margin-bottom: 5px; font-size: 10px; }
  .cinematic-game .shared-turn span { font-size: 9px; }
  .cinematic-game .shared-scroll-note { display: none; }
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .mode-picker,
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .game-top { display: none; }
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .shared-boards .ocean-stage.ocean-live { height: clamp(180px, calc(100dvh - 201px), 265px); }
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .turn-banner { display: none; }
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .board-footer { padding-block: 5px; }
  .cinematic-game:is([data-phase="playing"], [data-phase="finished"]) .lan-room-heading { display: none; }
  .cinematic-game .handoff-screen { min-height: calc(100dvh - 75px); margin-bottom: 0; padding: 16px; }
  .cinematic-game .handoff-emblem { display: none; }
  .cinematic-game .handoff-screen h2 { font-size: 23px; margin: 8px 0; }
  .cinematic-game .handoff-screen p { margin: 6px 0 12px; }
  .cinematic-game .shot-announcement { top: calc(50px + env(safe-area-inset-top, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic-game *, .cinematic-game *:before, .cinematic-game *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Keep mobile WebGL separate from full-screen SVG filters and backdrop reads. */
@media (pointer: coarse), (max-width: 700px), (max-height: 500px) {
  body.cinematic-game { background-attachment: scroll; }
  body.cinematic-game:before, body.cinematic-game:after { content: none; display: none; }
  .cinematic-game .ocean-coordinate,
  .cinematic-game .modal-backdrop,
  .cinematic-game .pause-cover,
  .cinematic-game .shot-announcement { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .cinematic-game .ocean-stage { contain: paint; }
  .cinematic-game .scene-controls { flex-wrap: wrap; }
}
.cinematic-game[data-renderer="2d"]:before,
.cinematic-game[data-renderer="2d"]:after { content: none; display: none; }