:root {
  --navy: #061c31;
  --navy-2: #0a2945;
  --panel: rgba(9, 39, 65, .92);
  --panel-soft: rgba(15, 55, 87, .78);
  --line: rgba(145, 213, 255, .18);
  --cyan: #57d7ff;
  --cyan-2: #16a9e5;
  --cyan-soft: #b8efff;
  --orange: #ffad45;
  --red: #ff5e65;
  --green: #5be1a2;
  --text: #f3fbff;
  --muted: #9bc0d7;
  --shadow: 0 24px 70px rgba(0, 7, 17, .42);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--navy); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background:
    linear-gradient(rgba(87, 215, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87, 215, 255, .025) 1px, transparent 1px),
    radial-gradient(circle at 50% -10%, #164d75 0, #071f36 40%, #041524 100%);
  background-size: 36px 36px, 36px 36px, auto;
  font-family: "DM Sans", "Segoe UI", sans-serif;
}

button { color: inherit; font: inherit; }
button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.ocean-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.glow-one { width: 320px; height: 320px; top: 12%; left: -120px; background: rgba(22, 169, 229, .16); }
.glow-two { width: 380px; height: 380px; right: -180px; bottom: 2%; background: rgba(87, 215, 255, .10); }

.app { width: min(1480px, 100%); min-height: 100vh; display:flex; flex-direction:column; margin: 0 auto; padding: 0 clamp(16px, 3vw, 44px) 18px; }

.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; font-family: "Space Grotesk", sans-serif; font-size: 19px; font-weight: 700; letter-spacing: .04em; }
.brand > span:last-child span { color: var(--cyan); }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(87,215,255,.35); border-radius: 11px; color: var(--cyan); background: rgba(87,215,255,.09); font-size: 24px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.level-tag { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--cyan-soft); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.round-button { width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; background: rgba(12,48,77,.8); cursor: pointer; transition: .18s ease; }
.round-button:hover { border-color: var(--cyan); background: rgba(87,215,255,.12); transform: translateY(-2px); }

.game-shell { flex:1; display:flex; flex-direction:column; justify-content:center; padding: 22px 0 34px; }

.mission-bar {
  min-height: 46px;
  display: grid;
  grid-template-columns: 165px 1fr 165px;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(6, 28, 49, .76);
  box-shadow: 0 12px 30px rgba(0, 7, 17, .18);
}

.turn-indicator { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.turn-light { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }
.turn-indicator.cpu-turn .turn-light { background: var(--orange); box-shadow: 0 0 14px var(--orange); }
.mission-status { overflow: hidden; color: #e5f8ff; text-align: center; font-size: 16px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 0 16px rgba(87,215,255,.16); }
.battle-score { justify-self: end; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.battle-score strong { color: var(--text); font-family: "Space Grotesk"; font-size: 18px; }
.score-divider { color: var(--cyan); }

.battle-layout { display: grid; grid-template-columns: minmax(310px, 1fr) minmax(330px, .92fr) minmax(310px, 1fr); gap: 12px; }

.board-panel,
.command-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(12, 48, 77, .94), rgba(5, 26, 45, .94));
  box-shadow: var(--shadow);
}

.board-panel { padding: 13px; }
.command-panel { min-height: 0; display: flex; flex-direction: column; padding: 14px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; min-height: 43px; margin-bottom: 8px; }
.panel-kicker { display: block; color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.panel-heading h2 { margin: 3px 0 0; font-family: "Space Grotesk", sans-serif; font-size: 21px; }
.fleet-count { padding: 6px 9px; border-radius: 999px; color: #bff7dc; background: rgba(91, 225, 162, .1); font-size: 12px; font-weight: 800; }
.enemy-count { color: #ffd49d; background: rgba(255, 173, 69, .1); }

.board-wrap { position: relative; width: min(100%, 390px); margin: 0 auto; }
.board { width: 100%; display: grid; grid-template-columns: 22px repeat(7, 1fr); grid-template-rows: 22px repeat(7, 1fr); gap: 4px; }
.axis-label { display: grid; place-items: center; color: #91c2de; font-family: "Space Grotesk"; font-size: 11px; font-weight: 700; }
.axis-corner { opacity: 0; }

.cell {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(113, 199, 242, .20);
  border-radius: 8px;
  background:
    radial-gradient(circle at 70% 25%, rgba(255,255,255,.10), transparent 18%),
    linear-gradient(145deg, rgba(30, 126, 179, .42), rgba(7, 67, 108, .54));
  color: var(--text);
  font-size: clamp(12px, 1.5vw, 20px);
  transition: transform .14s ease, border-color .14s ease, background .2s ease, opacity .2s ease;
}

.enemy-board .cell:not(:disabled) { cursor: crosshair; }
.enemy-board .cell:not(:disabled):hover { z-index: 2; border-color: var(--cyan); background: linear-gradient(145deg, rgba(87,215,255,.38), rgba(13,101,153,.65)); transform: scale(1.07); box-shadow: 0 0 18px rgba(87,215,255,.25); }
.enemy-board.locked .cell:not(.selected) { cursor: default; }
.enemy-board.locked .cell:not(.selected):hover { transform: none; border-color: rgba(113,199,242,.20); box-shadow: none; }
.cell.selected { border-color: var(--orange); box-shadow: 0 0 0 2px rgba(255,173,69,.23), 0 0 18px rgba(255,173,69,.30); animation: target-pulse .9s ease-in-out infinite alternate; }
@keyframes target-pulse { to { background-color: rgba(255,173,69,.22); } }

.cell.ship { border-color: rgba(87,215,255,.48); background: linear-gradient(145deg, #4c728b, #263f53); }
.cell.ship::before { content: ""; width: 58%; height: 26%; border-radius: 70% 32% 32% 70%; background: #9bc0d2; box-shadow: inset -5px -2px 0 rgba(0,0,0,.16), 0 3px 5px rgba(0,0,0,.2); transform: rotate(-8deg); }
.cell.miss { border-color: rgba(184,239,255,.28); background: rgba(8, 48, 77, .62); }
.cell.miss::after { content: "•"; color: #b8efff; font-size: 25px; text-shadow: 0 0 10px var(--cyan); }
.cell.hit { border-color: var(--red); background: radial-gradient(circle, #ffbf53 0 12%, #f25454 13% 37%, #5e1726 38% 100%); animation: hit-pop .4s cubic-bezier(.2,.9,.3,1.4); }
.cell.hit::after { content: "✦"; color: #fff7d6; text-shadow: 0 0 9px #fff; }
.cell.sunk { border-color: #ffbc5c; filter: saturate(.65); }
@keyframes hit-pop { 50% { transform: scale(1.16) rotate(3deg); } }
.scan-lines { position: absolute; inset: 22px 0 0 22px; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(87,215,255,.018) 9px); z-index: 2; }

.fleet-legend { min-height: 25px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 9px; }
.mini-ship { display: flex; gap: 2px; opacity: .92; transition: .2s; }
.mini-ship i { width: 12px; height: 6px; display: block; border-radius: 4px; background: #8cb7cd; }
.enemy-legend .mini-ship i { background: #d1a765; }
.mini-ship.sunk { opacity: .23; transform: translateY(2px); }
.mini-ship.sunk i { background: var(--red); }

.command-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.question-count { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.question-count strong { color: var(--text); }
.command-idle, .computer-card { flex: 1; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.command-idle h2, .computer-card h2 { margin: 18px 0 8px; font-family: "Space Grotesk"; font-size: 29px; }
.command-idle p { max-width: 310px; margin: 0; color: #b5d4e5; font-size: 15px; line-height: 1.55; }
.radar { position: relative; width: 104px; height: 104px; overflow: hidden; border: 1px solid rgba(87,215,255,.35); border-radius: 50%; background: repeating-radial-gradient(circle, rgba(87,215,255,.09) 0 1px, transparent 2px 21px); box-shadow: inset 0 0 30px rgba(87,215,255,.06), 0 0 28px rgba(87,215,255,.08); }
.radar::before, .radar::after { content:""; position:absolute; background:rgba(87,215,255,.16); }
.radar::before { width:1px; top:0; bottom:0; left:50%; }.radar::after { height:1px; left:0; right:0; top:50%; }
.radar-sweep { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, transparent 0 72%, rgba(87,215,255,.36) 100%); animation:sweep 3s linear infinite; }
@keyframes sweep { to { transform:rotate(360deg); } }
.radar-dot { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--orange); box-shadow:0 0 8px var(--orange); }.dot-a{top:29%;left:62%}.dot-b{top:68%;left:35%}

.question-card { flex: 1; }
.question-card[hidden], .command-idle[hidden], .computer-card[hidden] { display: none; }
.target-line { display:flex; align-items:center; justify-content:space-between; padding:8px 11px; border:1px solid rgba(255,173,69,.24); border-radius:11px; background:rgba(255,173,69,.07); color:#ffc984; font-size:12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.target-line strong { font-family:"Space Grotesk"; font-size:19px; }
.topic-tag { display:inline-flex; margin-top:10px; padding:5px 9px; border-radius:7px; color:var(--cyan); background:rgba(87,215,255,.08); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.question-card h2 { min-height: 68px; display:flex; align-items:center; margin:9px 0 11px; font-size:clamp(20px,1.6vw,24px); line-height:1.3; }
.answers { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.answer-button { min-height:48px; padding:8px 9px; border:1px solid rgba(145,213,255,.22); border-radius:11px; background:rgba(21,65,96,.72); color:#eaf9ff; font-size:15px; line-height:1.2; font-weight:700; cursor:pointer; transition:.16s ease; }
.answer-button:hover:not(:disabled) { border-color:var(--cyan); background:rgba(30,104,145,.72); transform:translateY(-2px); }
.answer-button.correct { border-color:var(--green); color:#d7ffeb; background:rgba(44,157,111,.34); }
.answer-button.wrong { border-color:var(--red); color:#ffe8e8; background:rgba(183,57,66,.38); }
.answer-button:disabled { cursor:default; }

.cpu-icon { width:72px; height:72px; display:grid; place-items:center; margin-bottom:14px; border:1px solid rgba(255,173,69,.34); border-radius:23px; color:var(--orange); background:rgba(255,173,69,.08); font-size:41px; animation:cpu-pulse 1s ease-in-out infinite alternate; }
@keyframes cpu-pulse { to { box-shadow:0 0 30px rgba(255,173,69,.14); transform:scale(1.03); } }
.computer-card h2 { margin-top:9px; }
.loading-dots { display:flex; gap:5px; margin-top:9px; }.loading-dots span{width:5px;height:5px;border-radius:50%;background:var(--orange);animation:dot 1s ease-in-out infinite}.loading-dots span:nth-child(2){animation-delay:.16s}.loading-dots span:nth-child(3){animation-delay:.32s}@keyframes dot{50%{opacity:.22;transform:translateY(-4px)}}

.feedback { min-height:44px; display:flex; align-items:center; gap:9px; margin-top:10px; padding:8px 10px; border:1px solid var(--line); border-radius:11px; color:var(--cyan-soft); background:rgba(5,26,45,.72); font-size:14px; line-height:1.3; font-weight:700; }
.feedback-icon { width:23px; height:23px; flex:0 0 auto; display:grid; place-items:center; border-radius:8px; color:var(--cyan); background:rgba(87,215,255,.09); }
.feedback.good { border-color:rgba(91,225,162,.3); color:#c9ffe4; }.feedback.good .feedback-icon{color:var(--green);background:rgba(91,225,162,.1)}
.feedback.bad { border-color:rgba(255,94,101,.28); color:#ffd6d8; }.feedback.bad .feedback-icon{color:var(--red);background:rgba(255,94,101,.1)}
.feedback.warning { border-color:rgba(255,173,69,.28); color:#ffdcad; }.feedback.warning .feedback-icon{color:var(--orange);background:rgba(255,173,69,.1)}
.accuracy-row { display:grid; grid-template-columns:auto 1fr 42px; align-items:center; gap:8px; margin-top:9px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.accuracy-track { height:4px; overflow:hidden; border-radius:5px; background:rgba(255,255,255,.08); }.accuracy-track span{width:0;height:100%;display:block;border-radius:5px;background:linear-gradient(90deg,var(--cyan-2),var(--green));transition:width .35s ease}.accuracy-row strong{color:var(--text);text-align:right}

.game-footer { min-height:34px; display:flex; align-items:center; justify-content:center; gap:18px; color:var(--muted); font-size:9px; font-weight:700; text-transform:uppercase; }
.game-footer > span { display:flex; align-items:center; gap:6px; }.legend-dot{width:8px;height:8px;display:inline-block;border-radius:3px}.ship-dot{background:#8cb7cd}.miss-dot{border:1px solid var(--cyan);border-radius:50%}.hit-dot{background:var(--red)}
.restart-link { margin-left:auto; padding:5px 9px; border:0; color:var(--cyan-soft); background:transparent; font-size:9px; font-weight:800; text-transform:uppercase; cursor:pointer; }.restart-link:hover{color:var(--orange)}

.modal { position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:20px; background:rgba(1,11,20,.78); backdrop-filter:blur(12px); }
.modal.show { display:grid; animation:fade-in .25s ease both; }
@keyframes fade-in { from{opacity:0}to{opacity:1} }
.modal-card { position:relative; width:min(480px,100%); padding:34px; border:1px solid rgba(145,213,255,.24); border-radius:25px; background:linear-gradient(155deg,#103d61,#071e34); box-shadow:0 30px 90px rgba(0,0,0,.55); text-align:center; animation:modal-in .38s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes modal-in { from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none} }
.modal-badge { display:inline-flex; padding:6px 11px; border-radius:999px; color:var(--cyan); background:rgba(87,215,255,.09); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.welcome-icon { width:70px;height:70px;display:grid;place-items:center;margin:20px auto 14px;border:1px solid rgba(87,215,255,.35);border-radius:22px;color:var(--cyan);background:rgba(87,215,255,.07);font-size:42px;box-shadow:0 0 30px rgba(87,215,255,.10) }
.welcome-card { width:min(560px,100%); }
.welcome-card h1 { margin:0; font-family:"Space Grotesk"; font-size:clamp(40px,5.4vw,58px); line-height:.98; letter-spacing:-.045em; }.welcome-card h1 span{color:var(--cyan)}
.welcome-card > p { max-width:470px;margin:19px auto;color:#b9d7e7;font-size:16px;line-height:1.55 }
.rule-strip { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0 }.rule-strip span{display:grid;gap:4px;padding:11px 6px;border:1px solid var(--line);border-radius:10px;color:#b9d7e7;font-size:12px;font-weight:700}.rule-strip strong{color:var(--orange);font-family:"Space Grotesk";font-size:15px}
.primary-button { min-height:50px;padding:0 25px;border:0;border-radius:13px;color:#052036;background:linear-gradient(135deg,#70e2ff,#31bce9);font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 10px 24px rgba(22,169,229,.22);transition:.16s ease}.primary-button:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(22,169,229,.3)}.primary-button span{margin-left:9px}.primary-button.compact{min-height:44px}
.modal-close { position:absolute;top:13px;right:13px;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.04);font-size:18px;cursor:pointer }
.rules-card { width:min(560px,100%); text-align:left; }.rules-card h2{margin:12px 0 19px;font-family:"Space Grotesk";font-size:32px}.rules-card ol{display:grid;gap:14px;margin:0 0 25px;padding-left:24px;color:#c2ddec;font-size:16px;line-height:1.48}.rules-card li::marker{color:var(--cyan);font-weight:800}.rules-card .primary-button{display:block;margin:auto}
.result-icon { width:75px;height:75px;display:grid;place-items:center;margin:0 auto 17px;border-radius:24px;color:#593500;background:var(--orange);font-size:31px;transform:rotate(-5deg) }.result-card h2{margin:11px 0 7px;font-family:"Space Grotesk";font-size:39px}.result-card>p{margin:0;color:var(--muted);font-size:13px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:22px 0}.result-stats span{display:grid;gap:2px;padding:10px 4px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:8px;font-weight:800;text-transform:uppercase}.result-stats strong{color:var(--text);font-family:"Space Grotesk";font-size:18px}

@media (max-width: 1080px) {
  .game-shell { justify-content:flex-start; padding-top:12px; }
  .battle-layout { grid-template-columns: 1fr 1fr; }
  .command-panel { grid-column: 1 / -1; grid-row: 2; min-height: 310px; }
  .command-idle, .computer-card { min-height: 190px; }
  .question-card h2 { min-height: auto; }
}

@media (max-width: 700px) {
  .app { padding-inline:10px; }.topbar{height:56px}.level-tag{display:none}.mission-bar{grid-template-columns:1fr auto}.mission-status{grid-column:1/-1;grid-row:2;text-align:left;white-space:normal}.battle-score{grid-column:2;grid-row:1}.battle-layout{grid-template-columns:1fr}.enemy-panel{grid-row:1}.command-panel{grid-column:1;grid-row:2}.player-panel{grid-row:3}.board-panel{padding:10px}.board-wrap{max-width:430px}.command-idle,.computer-card{min-height:220px}.game-footer{flex-wrap:wrap;padding:8px 0}.restart-link{margin-left:0}.answers{grid-template-columns:1fr}.modal-card{padding:27px 20px}
}

@media (min-width:1081px) and (max-height:780px) {
  .topbar{height:50px}.game-shell{justify-content:flex-start;padding:7px 0 10px}.mission-bar{min-height:41px;margin-bottom:7px;padding-block:4px}.mission-status{font-size:15px}.battle-layout{gap:8px}.board-panel{padding:9px}.panel-heading{min-height:34px;margin-bottom:4px}.panel-kicker{font-size:9px}.panel-heading h2{font-size:18px}.board{gap:3px}.board-wrap{width:min(100%,350px)}.fleet-legend{margin-top:5px;min-height:20px}.command-panel{padding:10px}.command-header{margin-bottom:5px}.command-idle,.computer-card{min-height:240px}.radar{width:86px;height:86px}.command-idle h2{margin-top:12px;font-size:25px}.command-idle p{font-size:14px}.question-card h2{min-height:54px;margin:6px 0 7px;font-size:18px}.answer-button{min-height:43px;padding:5px;font-size:14px}.feedback{min-height:36px;margin-top:6px;font-size:12px}.accuracy-row{margin-top:6px}.game-footer{min-height:27px}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

html,body{width:100%;height:100%;min-height:0;overflow:hidden}
body{min-width:0;height:100vh;display:flex;align-items:center;justify-content:center;padding:5px}
.ocean-glow{display:none}
.scale-shell{position:relative;flex:0 0 auto;overflow:visible}
.app{width:1120px;min-height:0;padding:0 12px 8px;transform-origin:top left}
.topbar{height:48px}
.brand{font-size:17px}.brand-mark{width:31px;height:31px;font-size:21px}
.level-tag{padding:5px 10px}.round-button{width:32px;height:32px}
.game-shell{justify-content:flex-start;padding:7px 0 5px}
.mission-bar{min-height:39px;grid-template-columns:145px 1fr 145px;margin-bottom:7px;padding:4px 8px}
.mission-status{font-size:14px}
.battle-layout{grid-template-columns:1fr .94fr 1fr;gap:8px}
.board-panel,.command-panel{border-radius:16px;box-shadow:0 12px 32px rgba(0,7,17,.28)}
.board-panel{padding:8px}.command-panel{padding:9px}
.panel-heading{min-height:32px;margin-bottom:3px}.panel-kicker{font-size:8px}
.panel-heading h2{margin-top:1px;font-size:17px}.fleet-count{padding:4px 7px;font-size:10px}
.board-wrap{width:min(100%,315px)}
.board{grid-template-columns:18px repeat(7,1fr);grid-template-rows:18px repeat(7,1fr);gap:3px}
.axis-label{font-size:9px}.cell{border-radius:6px}.scan-lines{inset:18px 0 0 18px}
.fleet-legend{min-height:18px;gap:6px;margin-top:4px}.mini-ship i{width:10px;height:5px}
.command-header{margin-bottom:4px}.command-idle,.computer-card{min-height:205px}
.radar{width:76px;height:76px}.command-idle h2,.computer-card h2{margin:10px 0 5px;font-size:23px}
.command-idle p{font-size:13px;line-height:1.4}.cpu-icon{width:60px;height:60px;margin-bottom:9px;font-size:34px}
.target-line{padding:5px 8px;font-size:10px}.target-line strong{font-size:16px}
.topic-tag{margin-top:6px;padding:4px 7px;font-size:8px}
.question-card h2{min-height:52px;margin:5px 0 7px;font-size:17px;line-height:1.23}
.answers{gap:5px}.answer-button{min-height:38px;padding:5px 7px;border-radius:9px;font-size:13px}
.feedback{min-height:34px;margin-top:6px;padding:5px 7px;font-size:11px}
.feedback-icon{width:20px;height:20px}.accuracy-row{margin-top:5px;font-size:8px}
.game-footer{min-height:23px;gap:13px;font-size:8px}.restart-link{font-size:8px}
.modal{padding:8px}.modal-card{width:min(450px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto;padding:22px}
.welcome-card{width:min(500px,calc(100vw - 16px))}.welcome-icon{width:58px;height:58px;margin:12px auto 9px;font-size:35px}
.welcome-card h1{font-size:42px}.welcome-card>p{margin:12px auto;font-size:14px}.rule-strip{margin:13px 0}
.primary-button{min-height:44px}.rules-card h2{margin:8px 0 12px;font-size:27px}
.rules-card ol{gap:8px;margin-bottom:16px;font-size:13px}.result-icon{width:62px;height:62px;margin-bottom:11px}
.result-card h2{font-size:32px}
@media (max-width:1080px){
.game-shell{justify-content:flex-start;padding-top:7px}
.battle-layout{grid-template-columns:1fr .94fr 1fr}
.command-panel{grid-column:auto;grid-row:auto;min-height:0}
.command-idle,.computer-card{min-height:205px}
}
@media (max-width:700px){
.app{width:1120px;padding-inline:12px}.topbar{height:48px}.level-tag{display:inline-flex}
.mission-bar{grid-template-columns:145px 1fr 145px}
.mission-status{grid-column:auto;grid-row:auto;text-align:center;white-space:nowrap}
.battle-score{grid-column:auto;grid-row:auto}.battle-layout{grid-template-columns:1fr .94fr 1fr}
.enemy-panel,.command-panel,.player-panel{grid-row:auto;grid-column:auto}
.board-panel{padding:8px}.board-wrap{max-width:none}.command-idle,.computer-card{min-height:205px}
.answers{grid-template-columns:1fr 1fr}.game-footer{flex-wrap:nowrap;padding:0}.restart-link{margin-left:auto}
.modal-card{padding:22px}
}
@media (max-height:650px){
.topbar{height:42px}.game-shell{padding-top:4px}.mission-bar{min-height:35px;margin-bottom:5px}
.board-wrap{width:min(100%,292px)}.command-idle,.computer-card{min-height:185px}
.question-card h2{min-height:46px;font-size:16px}.answer-button{min-height:34px}
.feedback{min-height:31px}.game-footer{min-height:20px}
}

/* ===== Larger PC base, still auto-scaled for laptop and iframe ===== */
.app {
  width: 1320px;
  padding: 0 16px 10px;
}

.topbar {
  height: 56px;
}

.brand {
  font-size: 19px;
}

.brand-mark {
  width: 35px;
  height: 35px;
  font-size: 24px;
}

.level-tag {
  padding: 7px 12px;
  font-size: 11px;
}

.round-button {
  width: 35px;
  height: 35px;
}

.game-shell {
  padding: 10px 0 7px;
}

.mission-bar {
  min-height: 44px;
  grid-template-columns: 165px 1fr 165px;
  margin-bottom: 9px;
  padding: 6px 10px;
}

.mission-status {
  font-size: 16px;
}

.battle-layout {
  grid-template-columns: 1fr .96fr 1fr;
  gap: 11px;
}

.board-panel {
  padding: 11px;
}

.command-panel {
  padding: 12px;
}

.panel-heading {
  min-height: 39px;
  margin-bottom: 6px;
}

.panel-kicker {
  font-size: 9px;
}

.panel-heading h2 {
  font-size: 20px;
}

.fleet-count {
  padding: 5px 9px;
  font-size: 11px;
}

.board-wrap {
  width: min(100%, 370px);
}

.board {
  grid-template-columns: 21px repeat(7, 1fr);
  grid-template-rows: 21px repeat(7, 1fr);
  gap: 4px;
}

.axis-label {
  font-size: 10px;
}

.scan-lines {
  inset: 21px 0 0 21px;
}

.fleet-legend {
  min-height: 23px;
  margin-top: 7px;
}

.mini-ship i {
  width: 12px;
  height: 6px;
}

.command-idle,
.computer-card {
  min-height: 260px;
}

.radar {
  width: 96px;
  height: 96px;
}

.command-idle h2,
.computer-card h2 {
  margin: 15px 0 7px;
  font-size: 28px;
}

.command-idle p {
  font-size: 15px;
}

.cpu-icon {
  width: 70px;
  height: 70px;
  font-size: 40px;
}

.target-line {
  padding: 7px 10px;
  font-size: 11px;
}

.target-line strong {
  font-size: 19px;
}

.topic-tag {
  margin-top: 9px;
  padding: 5px 9px;
  font-size: 9px;
}

.question-card h2 {
  min-height: 65px;
  margin: 8px 0 10px;
  font-size: 21px;
  line-height: 1.28;
}

.answers {
  gap: 7px;
}

.answer-button {
  min-height: 46px;
  padding: 8px 9px;
  font-size: 15px;
}

.feedback {
  min-height: 41px;
  margin-top: 8px;
  padding: 7px 9px;
  font-size: 13px;
}

.feedback-icon {
  width: 23px;
  height: 23px;
}

.accuracy-row {
  margin-top: 8px;
  font-size: 9px;
}

.game-footer {
  min-height: 29px;
  gap: 17px;
  font-size: 9px;
}

.restart-link {
  font-size: 9px;
}

/* Keep the same enlarged desktop canvas at all viewport widths.
   JavaScript performs proportional shrinking when required. */
@media (max-width: 1080px),
       (max-width: 700px) {
  .app {
    width: 1320px;
    padding: 0 16px 10px;
  }

  .topbar {
    height: 56px;
  }

  .mission-bar {
    grid-template-columns: 165px 1fr 165px;
  }

  .battle-layout {
    grid-template-columns: 1fr .96fr 1fr;
    gap: 11px;
  }

  .board-panel {
    padding: 11px;
  }

  .board-wrap {
    width: min(100%, 370px);
  }

  .command-panel {
    grid-column: auto;
    grid-row: auto;
    padding: 12px;
  }

  .command-idle,
  .computer-card {
    min-height: 260px;
  }

  .answers {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-height: 700px) {
  .topbar {
    height: 50px;
  }

  .board-wrap {
    width: min(100%, 340px);
  }

  .command-idle,
  .computer-card {
    min-height: 225px;
  }

  .question-card h2 {
    min-height: 56px;
    font-size: 19px;
  }

  .answer-button {
    min-height: 41px;
    font-size: 14px;
  }
}


/* -- Site launcher: same structural approach as working Haunted House. -- */
body:not(.game-active) {
  width: 100%; height: 100dvh; min-height: 0;
  margin: 0; padding: 10px; overflow: hidden;
  display: grid; place-items: center;
}
body:not(.game-active) #scale-shell,
body:not(.game-active) .modal,
body:not(.game-active) .ocean-glow { display: none !important; }
body.game-active .site-launcher { display: none !important; }
body.fullscreen-active { width: 100%; height: 100dvh; overflow: hidden; padding: 0; }
.site-launcher {
  display: grid;
  grid-template-columns: 42% 58%;
  width: min(620px, 100%);
  min-height: 232px;
  max-height: calc(100dvh - 20px);
  overflow: hidden;
  color: #f3fbff;
  border: 1px solid rgba(87,215,255,.45);
  border-radius: 17px;
  background: #061b30;
  box-shadow: 0 18px 50px rgba(0,0,0,.33);
}
.launcher-art {
  position: relative; min-height: 232px; overflow: hidden;
  background: radial-gradient(circle at 55% 40%,rgba(28,143,199,.48),rgba(2,30,52,.8) 60%,#031524 100%);
}
.launcher-art::before {
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(0deg,rgba(100,216,255,.08) 0 1px,transparent 1px 25px),
              repeating-linear-gradient(90deg,rgba(100,216,255,.08) 0 1px,transparent 1px 25px);
}
.launcher-radar {
  position:absolute; left:50%; top:47%; translate:-50% -50%;
  width:185px; height:185px; border:2px solid rgba(113,223,255,.52); border-radius:50%;
  background:radial-gradient(circle, transparent 0 31%,rgba(113,223,255,.33) 31.5% 32%,transparent 33% 64%,rgba(113,223,255,.33) 64.5% 65%,transparent 66%);
  box-shadow:0 0 35px rgba(30,158,226,.19),inset 0 0 35px rgba(30,158,226,.19);
}
.launcher-radar::before,.launcher-radar::after {content:"";position:absolute;background:rgba(113,223,255,.23)}
.launcher-radar::before {width:1px;top:0;bottom:0;left:50%}
.launcher-radar::after {height:1px;left:0;right:0;top:50%}
.radar-line {position:absolute;z-index:1;top:50%;left:50%;height:2px;width:50%;transform-origin:left center;transform:rotate(-43deg);background:linear-gradient(90deg,#66ecff,transparent);}
.radar-target {position:absolute;z-index:2;width:9px;height:9px;border-radius:50%;background:#ffb75e;box-shadow:0 0 10px #ffb75e;}
.radar-target.one {left:27%;top:23%}.radar-target.two {right:24%;bottom:22%}.radar-target.three {left:31%;bottom:34%;width:6px;height:6px;background:#5be1a2;box-shadow:0 0 10px #5be1a2}
.launcher-art-label {position:absolute;left:0;right:0;bottom:13px;text-align:center;font-size:10px;letter-spacing:.15em;font-weight:800;color:#c2f4ff;}
.launcher-copy {min-width:0;display:flex;flex-direction:column;justify-content:center;padding:20px 22px 18px 19px;background:linear-gradient(140deg,#103d62,#061d33 66%,#031521);}
.launcher-kicker {font-size:10px;font-weight:850;letter-spacing:.11em;color:#7de5ff;}
.site-launcher h1 {margin:6px 0 1px;font-size:clamp(23px,3.3vw,30px);line-height:1.05;letter-spacing:.015em;font-weight:900;}
.site-launcher h1 span {color:var(--cyan)}
.site-launcher p {margin:9px 0 12px;color:#c5e4f3;font-size:13px;line-height:1.33;font-weight:650;}
.launch-btn {min-height:46px;padding:8px 14px;border:1px solid #72e0ff;border-radius:11px;color:#061b30;background:linear-gradient(#74e8ff,#2fb9e4);box-shadow:0 4px 0 #06698d;cursor:pointer;font-size:15px;font-weight:900;}
.launch-btn:hover {filter:brightness(1.07)}
.launch-btn:active {transform:translateY(2px);box-shadow:0 2px 0 #06698d}
.launch-btn span {margin-left:5px;font-size:18px}
.site-launcher .launcher-note {margin:8px 0 0;color:#b4cada;font-size:10.5px;font-weight:600;}
.new-tab-btn {align-self:flex-start;margin-top:6px;padding:0;border:0;background:none;color:#7de5ff;text-decoration:underline;font-size:12px;font-weight:800;cursor:pointer;}
.new-tab-btn[hidden] {display:none!important}
.fullscreen-button {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:35px;padding:0 11px;border:1px solid rgba(87,215,255,.4);border-radius:10px;color:#d9f7ff;background:rgba(87,215,255,.10);font-size:12px;font-weight:750;white-space:nowrap;cursor:pointer;}
.fullscreen-button span:first-child {font-size:20px;line-height:1}
.fullscreen-button:hover {background:rgba(87,215,255,.21);border-color:var(--cyan)}
@media(max-width:520px){
  .site-launcher {grid-template-columns:33% 67%;min-height:210px}
  .launcher-art {min-height:210px}
  .launcher-radar {width:120px;height:120px}
  .launcher-art-label {font-size:8px}
  .launcher-copy {padding:12px 12px 10px}
  .site-launcher h1 {font-size:24px}
  .site-launcher p {font-size:11.5px;margin:6px 0 8px}
  .launch-btn {min-height:39px;font-size:13px}
  .launcher-kicker {font-size:9px}
}
@media(max-height:280px){
 .site-launcher {min-height:0;height:calc(100dvh - 16px)}
 .launcher-art {min-height:0}
 .launcher-copy {padding:8px 14px}
 .site-launcher p {margin:5px 0;font-size:11px}
 .site-launcher h1 {margin:3px 0;font-size:23px}
 .site-launcher .launcher-note {margin:4px 0 0}
 .launch-btn {min-height:34px}
}


/* --- V4: flexible three-column fullscreen stage. ---
   The game used to have a 1320px fixed canvas enlarged by transform(scale).
   A browser changing a small iframe to fullscreen could crop the right board.
   Here the layout itself fits the available viewport; NO transform scaling. */
body.game-active {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100dvh;
  min-width: 0;
  padding: 8px 10px;
  overflow: hidden;
}
body.game-active #scale-shell {
  display: block;
  position: relative;
  flex: 0 1 1320px;
  width: min(1320px, 100%);
  max-width: 100%;
  height: auto;
  min-width: 0;
  max-height: calc(100dvh - 16px);
  overflow: visible;
}
body.game-active #app {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  max-height: calc(100dvh - 16px);
  padding: 0 6px 6px;
  margin: 0;
  transform: none !important;
}
body.game-active .topbar { height: clamp(42px, 7dvh, 56px); flex: 0 0 auto; }
body.game-active .game-shell { flex: 0 1 auto; justify-content: flex-start; min-width: 0; padding: 7px 0 3px; }
body.game-active .battle-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.96fr) minmax(0,1fr);
  gap: 10px;
  min-width: 0;
}
body.game-active .board-panel, body.game-active .command-panel { min-width: 0; }
body.game-active .command-panel { grid-column: auto; grid-row: auto; }
body.game-active .player-panel, body.game-active .enemy-panel { grid-column: auto; grid-row: auto; }
body.game-active .board-wrap { width: min(100%, 350px, calc(100dvh - 265px)); }
body.game-active .answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.game-active .answer-button { min-width: 0; overflow-wrap: anywhere; }
body.game-active .game-footer { flex: 0 0 auto; }
@media (max-width: 1050px) {
  body.game-active .battle-layout { gap: 7px; }
  body.game-active .board-panel { padding: 8px; }
  body.game-active .command-panel { padding: 9px; }
  body.game-active .panel-heading h2 { font-size: 17px; }
  body.game-active .fleet-count { font-size: 9px; padding: 4px 6px; }
  body.game-active .mission-bar { grid-template-columns: 120px minmax(0,1fr) 120px; }
  body.game-active .answer-button { padding: 5px 6px; font-size: 13px; }
}
@media (max-height: 715px) {
  body.game-active .game-shell { padding-top: 4px; }
  body.game-active .mission-bar { min-height: 34px; margin-bottom: 5px; }
  body.game-active .panel-heading { min-height: 30px; margin-bottom: 3px; }
  body.game-active .board-wrap { width: min(100%, 330px, calc(100dvh - 265px)); }
  body.game-active .fleet-legend { min-height: 18px; margin-top: 3px; }
  body.game-active .question-card h2 { min-height: 42px; margin: 4px 0; font-size: 16px; }
  body.game-active .answer-button { min-height: 34px; padding: 5px 7px; font-size: 13px; }
  body.game-active .command-idle, body.game-active .computer-card { min-height: 160px; }
  body.game-active .feedback { min-height: 32px; margin-top: 4px; }
  body.game-active .game-footer { min-height: 23px; }
}
@media (max-width: 700px) {
  body.game-active .level-tag { display: none; }
  body.game-active .mission-bar { grid-template-columns: 92px minmax(0,1fr) 95px; gap: 4px; }
  body.game-active .mission-status { font-size: 11px; }
  body.game-active .battle-layout { gap: 4px; }
  body.game-active .board-panel, body.game-active .command-panel { padding: 5px; }
  body.game-active .answers { gap: 3px; }
  body.game-active .answer-button { font-size: 11px; padding: 3px; }
}


/* V6: fullscreen-in-iframe safeguards. Cache-independent file name. */
:root { color-scheme: dark; }
html:fullscreen, html:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.game-active {
  width: 100% !important;
  height: 100dvh !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 8px !important;
  margin: 0 !important;
  overflow: hidden !important;
}
body.game-active #scale-shell {
  flex: 0 1 auto !important;
  display: block !important;
  box-sizing: border-box;
  min-width: 0 !important;
  width: min(1320px, 100%) !important;
  max-width: 100% !important;
  margin: 0 auto;
  overflow: hidden;
}
body.game-active #app {
  box-sizing: border-box;
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 4px 4px !important;
  transform: none !important;
  overflow: hidden;
}
body.game-active .game-shell,
body.game-active .battle-layout,
body.game-active .mission-bar,
body.game-active .topbar {
  min-width: 0 !important;
  max-width: 100% !important;
}
body.game-active .battle-layout {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.96fr) minmax(0, 1fr) !important;
  gap: clamp(4px, .65vw, 10px) !important;
}
body.game-active .board-panel,
body.game-active .command-panel,
body.game-active .board-wrap,
body.game-active .board,
body.game-active .question-card,
body.game-active .answers {
  box-sizing: border-box;
  min-width: 0 !important;
  max-width: 100% !important;
}
body.game-active .board { grid-template-columns: 21px repeat(7, minmax(0, 1fr)); }
body.game-active .answer-button { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 1030px) {
  body.game-active .level-tag { display: none; }
  body.game-active .brand { font-size: 15px; }
  body.game-active .battle-layout { gap: 5px !important; }
  body.game-active .board-panel, body.game-active .command-panel { padding: 7px; }
  body.game-active .panel-heading h2 { font-size: 16px; }
  body.game-active .fleet-count { font-size: 9px; }
  body.game-active .mission-bar { grid-template-columns: 105px minmax(0, 1fr) 110px; }
}