/* Naval command presentation. Interaction highlights remain owned by the shared scan. */
:root { --ink:#e4f1f4; --muted:#a7becb; --teal:#76e1d1; --amber:#ffcd80; }
body { font-family:"Segoe UI",Arial,sans-serif; color:var(--ink); }
button { font-family:inherit; touch-action:manipulation; }
button:focus-visible { outline:3px solid var(--scan-highlight-color); outline-offset:3px; }
.hidden { display:none !important; }
.menu-screen { position:relative; overflow:auto; }
#mainMenuScreen { justify-content:flex-start; padding:5vh 8vw; isolation:isolate; }
#mainMenuScreen::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,rgba(3,18,29,.55),transparent),repeating-linear-gradient(0deg,transparent 0 79px,#a9f8f008 80px),repeating-linear-gradient(90deg,transparent 0 79px,#a9f8f008 80px); }
#mainMenuContainer { width:440px; max-width:48%; padding:20px 0; gap:12px; align-items:stretch; z-index:1; }
.menu-eyebrow,.panel-eyebrow { color:var(--teal); font-size:11px; font-weight:700; letter-spacing:3px; }
#mainMenuContainer .menu-title { text-align:left; color:#f1f6ef; font-size:clamp(46px,6.5vw,96px); letter-spacing:-4px; line-height:.91; margin:16px 0 0; font-weight:900; text-shadow:none; }
#mainMenuContainer .menu-title>span:first-child { display:block; font-size:19px; letter-spacing:8px; line-height:2.4; font-weight:600; color:var(--teal); }
.title-dot { color:var(--teal); }
.menu-tagline { color:var(--muted); font-size:16px; line-height:1.5; margin:16px 0 22px; }
.menu-button { border:1px solid #b8e3ef33; border-radius:8px; box-shadow:0 8px 22px #0002; transition:background .15s,outline .15s; }
#mainMenuContainer .menu-button { text-align:left; padding:16px 24px; background:#163644cc !important; }
#mainMenuContainer #onePlayerBtn { background:#8ee3d3 !important; color:#082730; border-color:var(--teal); }
.menu-button:hover { transform:none; border-color:var(--teal); }
.menu-controls { font-size:12px; line-height:1.8; color:var(--muted); margin:14px 0 0; }
.menu-scene { position:absolute; width:47vw; height:47vw; max-height:78vh; right:3vw; top:50%; transform:translateY(-50%); pointer-events:none; }
.radar-rings { position:absolute; inset:2%; border:1px solid #7bddcc25; border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 19%,#8df5e323 19.15% 19.4%,transparent 19.6% 20%),linear-gradient(90deg,transparent 49.8%,#82f1d822 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,#82f1d822 50%,transparent 50.2%); }
.radar-sweep { position:absolute; inset:2%; border-radius:50%; background:conic-gradient(from 0deg,transparent 260deg,#76e1d122 355deg,#76e1d14d 360deg); animation:radar-turn 18s linear infinite; }
@keyframes radar-turn { to { transform:rotate(360deg); } }
.hero-ship { position:absolute; width:90%; height:24%; top:36%; left:6%; transform:rotate(-32deg); filter:drop-shadow(-20px 30px 10px #0006); }
.hero-ship svg { width:100%; height:100%; }
.scene-caption { position:absolute; bottom:5%; left:12%; font-size:18px; letter-spacing:5px; font-weight:700; color:#d7e6e2; }
.scene-caption span { display:block; font-size:10px; letter-spacing:3px; color:var(--teal); margin-top:10px; }
.radar-contact { position:absolute; height:8px; width:8px; border:2px solid var(--teal); border-radius:50%; box-shadow:0 0 18px #73f0cf; }
.c1 { left:28%; top:20%; }.c2 { left:76%; top:69%; }
.settings-container { max-width:760px; padding:24px; }
.settings-container .menu-title { font-size:28px; margin:0 0 12px; letter-spacing:3px; text-shadow:none; color:var(--ink); }
.settings-grid { gap:10px; }
.setting-btn { min-height:48px; font-size:15px; }
.game-header { min-height:76px; flex-direction:row; justify-content:center; gap:24px; border-bottom:1px solid #a5e4e122; padding-left:120px; }
.game-title { color:var(--ink); text-shadow:none; font-size:18px; }
.placement-indicator { border:0; background:transparent; color:var(--teal); }
.game-layout { padding:12px; }
.board-card { gap:8px; padding:0; }
#placementBoard { flex:1; min-height:0; height:auto; max-height:none; width:min(100%,1000px); }
.menu-buttons { margin:4px 0 !important; gap:12px; }
.menu-buttons button { min-height:44px; margin:0; padding:10px 22px; font-size:16px; border-radius:6px; }
#startGameBtn { background:#86dccb; color:#0a2b35; }
.phase-screen { animation:none; }
.phase-header { padding:14px 130px 10px; flex-shrink:0; min-height:135px; border-bottom:1px solid #a5e4e122; }
.phase-indicator { background:transparent !important; border:0 !important; border-radius:0; animation:none; padding:0 0 8px; color:var(--teal) !important; }
.phase-indicator.defense-phase { color:var(--amber) !important; }
.phase-icon { font-size:24px; }
.phase-text { font-size:15px; letter-spacing:2px; }
.ship-status-bar { gap:10px; flex-wrap:nowrap; padding:0; width:min(100%,670px); }
.ship-icon { flex:1; min-width:0; border-color:#a6d6df25; background:#14333c77; padding:5px 12px; gap:4px; border-radius:5px; position:relative; }
.status-silhouette { width:100%; height:18px; max-width:78px; display:block; }
.status-silhouette svg { width:100%; height:100%; }
.ship-icon-name { color:#d8e6e9; font-size:10px; }
.ship-pips { display:flex; gap:3px; height:3px; }
.ship-pips i { width:10px; height:3px; background:#84b1b8; }
.fleet-condition { font-size:8px; color:#aac7cd; letter-spacing:1px; }
.ship-icon.sunk { text-decoration:none; opacity:1; border-color:#faaf6955; background:#67422a44; }
.ship-icon.sunk .fleet-condition { color:var(--amber); }
.ship-icon.sunk .ship-pips i { background:var(--amber); }
.phase-content { display:grid; grid-template-columns:minmax(0,1fr) 260px; grid-template-rows:minmax(0,1fr) auto; gap:12px 28px; padding:18px 4vw 12px; align-items:stretch; justify-content:stretch; }
.phase-grid-container { min-height:0; min-width:0; align-items:stretch; overflow:visible; }
.grid-grid { position:relative; isolation:isolate; border:1px solid #a5ebee26; border-radius:10px; padding:8px; background:radial-gradient(ellipse at 30% 20%,#124557aa,#071e2ecc 75%); box-shadow:0 15px 40px #0004,inset 0 0 80px #5bb2b609; gap:3px; }
.phase-content .grid-grid { width:100%; height:100%; max-width:940px; max-height:none; margin:auto; }
.grid-label { color:#9fc6ce; font-size:clamp(12px,1.3vw,17px); font-weight:600; }
.grid-cell { border:1px solid #9fdfeb1b; border-radius:4px; background:#8cbad908; transition:background .15s; min-width:0; min-height:0; }
.grid-cell:hover { transform:none; }
.grid-cell.occupied { box-shadow:none !important; background:#7fcbce08; }
.fleet-layer { position:absolute; inset:0; z-index:2; pointer-events:none; }
.fleet-vessel { position:absolute; filter:drop-shadow(0 5px 3px #0008); }
.fleet-vessel svg { width:100%; height:100%; }
.fleet-vessel.wreck { filter:sepia(.55) saturate(.65) drop-shadow(0 3px 3px #0009); opacity:.85; }
.grid-cell.attack-hit,.grid-cell.defense-hit { z-index:3; background:radial-gradient(circle,#e68a274d,transparent 75%); box-shadow:inset 0 0 0 1px #f2b77266; }
.grid-cell.attack-hit::after,.grid-cell.defense-hit::after { content:"×"; color:#ffe0ab; font-size:clamp(20px,3vw,32px); font-weight:900; text-shadow:0 0 8px #ff8e27,0 0 15px #e14f23; line-height:1; z-index:3; }
.grid-cell.attack-hit::before,.grid-cell.defense-hit::before { content:""; position:absolute; width:18%; height:24%; top:16%; right:17%; border-radius:60% 50% 20% 50%; background:#ffb458; box-shadow:0 -3px 8px #ff8738; transform:rotate(20deg); }
.grid-cell.attack-miss,.grid-cell.defense-miss { background:#9cd7e90b; }
.grid-cell.attack-miss::after,.grid-cell.defense-miss::after { content:""; width:18%; height:25%; max-width:14px; max-height:14px; border:2px solid #b6d6e0; border-radius:50%; background:none; opacity:.8; z-index:3; }
.grid-cell.enemy-sunk,.grid-cell.player-sunk { background:#d5b77710 !important; box-shadow:inset 0 0 0 1px #ffcd8055 !important; }
.grid-cell.last-shot { outline:2px solid #e9f8ee; outline-offset:-3px; }
.command-panel { align-self:center; color:var(--ink); border-left:1px solid #9fe7dc26; padding:14px 0 14px 24px; }
.command-panel h2 { font-weight:650; font-size:30px; letter-spacing:-1px; margin:12px 0; }
.panel-description { font-size:14px; line-height:1.7; color:var(--muted); margin-bottom:28px; }
.shot-report { display:flex; flex-direction:column; gap:8px; border-top:1px solid #b9ede32c; border-bottom:1px solid #b9ede32c; padding:20px 0; min-height:118px; }
.report-label { font-size:10px; color:var(--muted); letter-spacing:2px; }
.report-title { font-size:25px; line-height:1.15; font-weight:750; letter-spacing:-.6px; }
.report-detail { font-size:13px; color:var(--muted); line-height:1.5; }
.shot-report[data-result="hit"] .report-title,.shot-report[data-result="sunk"] .report-title { color:var(--amber); }
.shot-report[data-result="miss"] .report-title { color:#b8e9f5; }
.battle-stats,.results-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:22px 0; }
.battle-stats div,.results-stats div { display:flex; flex-direction:column; gap:6px; }
.battle-stats strong,.results-stats strong { font-size:22px; font-weight:600; }
.battle-stats span,.results-stats span { font-size:9px; letter-spacing:1px; color:var(--muted); }
.board-legend { display:flex; gap:14px; border-top:1px solid #b9ede322; padding-top:18px; font-size:12px; color:var(--muted); }
.board-legend>span { display:flex; align-items:center; gap:5px; }
.board-legend i { font-style:normal; font-size:18px; }
.legend-hit,.legend-sunk { color:var(--amber); }.legend-miss { color:#b6d6e0; }
.tactical-note,.scan-hint { font-size:12px; line-height:1.7; color:var(--muted); }
.tactical-note { margin-top:20px; }.scan-hint { margin:20px 0 0; color:#d0e0e4; }
.phase-content>.status { grid-column:1/-1; text-align:center; padding:4px; margin:0; min-height:25px; font-size:14px; }
.pause-button { width:auto; height:42px; padding:0 14px; gap:8px; border-radius:6px; left:20px; top:20px; z-index:40; font-size:20px; background:#173844; border:1px solid #c3e8ea44; }
.pause-button span { font-size:13px; }.pause-button:hover { transform:none; }
.modal-content { background:linear-gradient(145deg,#173b4b,#09212c); border:1px solid #a6ece14d; box-shadow:0 20px 70px #0008; border-radius:14px; max-height:94vh; overflow:auto; }
.pause-modal { width:min(720px,94vw); }.pause-settings-grid { display:grid; grid-template-columns:1fr 1fr; }.pause-settings-grid .menu-button { min-width:0; width:100%; }
.modal-overlay { background:#04131cdf; }
#gameOverModal { align-items:center; justify-content:flex-end; background:linear-gradient(90deg,#02121c12,#02121cbb 65%); padding:4vw; pointer-events:auto; }
.game-over-modal { width:min(410px,90vw); padding:32px; border-top:3px solid var(--teal); }
.game-over-modal h2 { color:var(--teal); font-size:46px; letter-spacing:-2px; margin:0 0 14px; }
#gameOverModal[data-victory="false"] h2 { color:var(--amber); }
.game-over-modal p { font-size:16px; line-height:1.6; }
.game-over-modal .results-note { font-size:12px; color:var(--muted); }
.result-actions { display:flex; flex-direction:column; gap:10px; }
.game-over-modal .menu-button { margin:0; width:100%; }
.cover-icon,.cover-ready-btn { animation:none; }
.cover-title { color:var(--teal); text-shadow:none; }
.shot-tracer { position:absolute; z-index:22; width:8px; height:8px; background:#fff3ca; box-shadow:0 -16px 10px #ffc763,0 0 10px #fff; border-radius:50%; pointer-events:none; animation:shot-flight .38s ease-in forwards; }
@keyframes shot-flight { from { transform:translate(100px,-270px) scale(.5); opacity:0; } 15% { opacity:1; } to { transform:translate(-50%,-50%) scale(1); opacity:1; } }
.shot-effect { position:absolute; z-index:23; width:0; height:0; pointer-events:none; --impact:#ffba64; }
.shot-effect.miss { --impact:#b7f0ff; }.shot-effect.sunk { --impact:#ffd38b; }
.impact-core { position:absolute; width:56px; height:56px; border-radius:50%; background:radial-gradient(circle,#fff3c9,var(--impact) 26%,transparent 70%); animation:impact-core .8s ease-out forwards; transform:translate(-50%,-50%); }
.miss .impact-core { background:radial-gradient(circle,#d9fcff88,transparent 70%); }
.impact-ring { position:absolute; width:24px; height:24px; border:3px solid var(--impact); border-radius:50%; animation:impact-ring 1.3s ease-out forwards; }
.impact-particle { position:absolute; width:5px; height:8px; background:var(--impact); border-radius:50%; animation:impact-particle 1s var(--delay) ease-out forwards; opacity:0; }
.sunk .impact-core { width:85px; height:85px; }
@keyframes impact-core { 0% { transform:translate(-50%,-50%) scale(.2); opacity:1; } 45% { opacity:.9; } 100% { transform:translate(-50%,-50%) scale(1.6); opacity:0; } }
@keyframes impact-ring { from { transform:translate(-50%,-50%) scale(.4); opacity:.9; } to { transform:translate(-50%,-50%) scale(6); opacity:0; } }
@keyframes impact-particle { 0% { opacity:1; transform:rotate(var(--angle)) translateY(0); } 100% { opacity:0; transform:rotate(var(--angle)) translateY(var(--distance)); } }
body.reduced-motion *,body.reduced-motion *::before,body.reduced-motion *::after { animation:none !important; transition:none !important; }
body.reduced-motion .radar-sweep { transform:rotate(35deg); }
@media (prefers-reduced-motion:reduce) {
    body:not(.motion-full) .radar-sweep { animation:none; }
}
@media (max-width:1050px) {
    .phase-content { grid-template-columns:minmax(0,1fr) 210px; gap:12px; padding:12px 20px; }
    .command-panel { padding-left:14px; }.command-panel h2 { font-size:25px; }
    .phase-header { padding-left:105px; padding-right:20px; }
    .ship-icon { padding:5px 8px; }
}
@media (max-width:760px) {
    #mainMenuScreen { padding:20px 8vw; justify-content:center; }
    #mainMenuContainer { max-width:none; width:min(100%,440px); }
    #mainMenuContainer .menu-title { font-size:64px; }
    .menu-scene { opacity:.18; width:90vw; height:90vw; max-height:none; right:-25vw; }
    .phase-content { display:flex; gap:8px; padding:10px; }
    .phase-grid-container { flex:1; height:auto; }
    .phase-content .grid-grid { flex:1; }
    .command-panel { flex-shrink:0; width:100%; padding:0 6px; border:0; display:flex; align-items:center; gap:12px; }
    .command-panel h2,.command-panel .panel-eyebrow,.panel-description,.tactical-note,.scan-hint,.board-legend { display:none; }
    .shot-report { padding:4px 0; border:0; min-height:0; gap:4px; flex:1; }.report-label { display:none; }.report-title { font-size:17px; }.report-detail { font-size:11px; }
    .battle-stats { gap:10px; margin:0; }.battle-stats strong { font-size:17px; }.battle-stats span { font-size:8px; }
    .phase-header { min-height:118px; padding:12px 8px 8px; }
    .phase-indicator { margin-left:90px; align-self:center; padding-bottom:8px; }
    .phase-text { font-size:12px; letter-spacing:1px; }
    .status-silhouette { height:13px; }.ship-icon-name { font-size:8px; }.fleet-condition { font-size:7px; }
    .ship-status-bar { gap:4px; }.ship-icon { padding:4px 3px; }.ship-pips { gap:2px; }.ship-pips i { width:6px; }
    .pause-button { left:10px; top:10px; height:34px; padding:0 10px; font-size:16px; }
    .game-header { min-height:68px; padding:8px 10px 8px 95px; gap:6px; flex-direction:column; }
    .game-title { font-size:14px; }.placement-indicator { padding:3px; font-size:13px; }
    .grid-grid { padding:4px; gap:2px; }.grid-cell { border-radius:3px; }
    .phase-content>.status { font-size:12px; min-height:22px; }
    #gameOverModal { justify-content:center; padding:10px; }
    .settings-container { width:100%; padding:20px 16px; }.setting-btn { font-size:13px; }
    .menu-buttons { gap:6px !important; }.menu-buttons button { padding:8px 12px; font-size:13px; }
}
@media (max-height:620px) {
    #mainMenuContainer { gap:8px; padding:8px 0; }
    #mainMenuContainer .menu-title { font-size:48px; margin:0; }
    #mainMenuContainer .menu-title>span:first-child { font-size:12px; line-height:2; }
    .menu-tagline { margin:8px 0; font-size:13px; }.menu-eyebrow { font-size:9px; }
    #mainMenuContainer .menu-button { padding:10px 20px; font-size:15px; }
    .menu-controls { margin:6px 0 0; font-size:10px; }
    .phase-header { min-height:100px; padding-top:8px; padding-bottom:6px; }
    .status-silhouette,.fleet-condition { display:none; }
    .panel-description,.tactical-note,.scan-hint { display:none; }
    .command-panel h2 { margin:8px 0; font-size:23px; }
    .shot-report { min-height:85px; padding:12px 0; }
    .battle-stats { margin:12px 0; }.board-legend { padding-top:10px; }
    .grid-label { font-size:12px; }.game-header { min-height:54px; }
    .settings-container { padding:12px 20px; }.settings-grid { gap:6px; margin:0; }
    .setting-btn { min-height:38px; padding:8px 12px; font-size:13px; }
    .modal-content { padding:18px; }.pause-modal h2 { font-size:24px; margin:0 0 12px; }
}

/* Quiet sea movement and a one-time reveal, with no camera shake or flashing. */
.grid-grid::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:repeating-linear-gradient(165deg,transparent 0 65px,#a1e8e608 67px,transparent 71px 130px); background-size:100% 260px; animation:sea-drift 24s linear infinite; }
@keyframes sea-drift { to { background-position:0 260px; } }
.ship-reveal { animation:ship-reveal 1.15s ease-out both; }
@keyframes ship-reveal { from { clip-path:inset(0 100% 0 0); opacity:.1; filter:brightness(1.6); } 65% { opacity:1; } to { clip-path:inset(0); opacity:.85; } }
.grid-cell.attack-hit:not(.enemy-sunk)::before,.grid-cell.defense-hit:not(.player-sunk)::before { animation:ember-drift 3.5s ease-in-out infinite; }
@keyframes ember-drift { 0%,100% { transform:translateY(0) rotate(20deg); opacity:.85; } 50% { transform:translateY(-3px) rotate(10deg); opacity:.55; } }
body.battle-results .phase-content { grid-template-columns:minmax(0,1fr) 420px; }
body.battle-results .command-panel { visibility:hidden; }
body.battle-results .grid-grid { max-width:none; }
body.battle-results .phase-text { color:#d9eee8; }
#randomizeBtn,#backToMenuBtn { background:#214554; box-shadow:none; color:#e0eeee; border:1px solid #b3e9e43b; }
#startGameBtn { box-shadow:none; border:1px solid #b6eee0; }
@media(max-width:760px) { body.battle-results .phase-content { display:flex; } body.battle-results .command-panel { display:none; } }

.game-over-modal { min-width:0; }
#gameOverTitle { color:var(--teal); text-shadow:none; }
#gameOverModal[data-victory="false"] #gameOverTitle { color:var(--amber); }
.game-over-modal .results-note { margin:0 0 18px; }

@media(max-width:760px) {
    body.battle-results #attackPhaseScreen { height:53%; flex-shrink:0; }
    body.battle-results #attackPhaseScreen .phase-header { min-height:80px; }
    body.battle-results #attackPhaseScreen .status-silhouette,
    body.battle-results #attackPhaseScreen .fleet-condition { display:none; }
    body.battle-results #attackPhaseScreen .status { display:none; }
    #gameOverModal { top:auto; bottom:0; height:47%; background:#071e2bf5; padding:10px; }
    .game-over-modal { max-height:100%; padding:18px; width:100%; }
    .game-over-modal h2 { font-size:30px; margin-bottom:8px; }
    .game-over-modal p { font-size:13px; }
    .game-over-modal .results-stats { margin:12px 0; }
    .game-over-modal .results-stats strong { font-size:20px; }
    .game-over-modal .results-note { font-size:11px; margin-bottom:12px; }
    .result-actions { flex-direction:row; }
    .game-over-modal .menu-button { min-width:0; padding:12px 6px; font-size:14px; }
}