:root {
  color-scheme: light;
  --paper: #f5f6f2;
  --card: #fff;
  --ink: #193b37;
  --muted: #697a6d;
  --green: #285f51;
  --green-light: #e9f0e5;
  --line: #dfe5dc;
  --ocean: #f0f5f2;
  --ocean-line: #dae5de;
  --coral: #c76d53;
  --coral-light: #fbede5;
  --gold: #a3843b;
  --radius: 14px;
  font-family: 'Inter', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button:disabled { cursor: default; }
button:focus-visible { outline: 3px solid #79a690; outline-offset: 4px; }
button, h1, h2, h3, p, ol { margin: 0; }
button { border: 0; }
[hidden] { display: none !important; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header { border-bottom: 1px solid var(--line); }
.header-inner { max-width: 1280px; height: 84px; padding: 0 32px; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 43px; height: 43px; border-radius: 12px; background: var(--ink); display: grid; place-items: center; box-shadow: 0 3px 5px #193b370a; }
.brand-mark svg { width: 34px; height: 34px; fill: none; stroke: #e5efdb; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.brand-mark svg > path:first-child { fill: #e5efdb; stroke-width: 0; }
.brand-type { font-size: 17px; font-weight: 760; letter-spacing: 2.3px; line-height: 1.1; }
.brand-type span { display: block; color: var(--muted); font-size: 8px; font-weight: 560; letter-spacing: 3.2px; margin-top: 6px; }
.header-actions { display: flex; gap: 17px; align-items: center; }
.nav-button { display: flex; gap: 8px; align-items: center; background: transparent; color: #63746a; font-size: 12px; font-weight: 550; padding: 8px 0; transition: color .18s; }
.nav-button:hover { color: var(--ink); }
.nav-button .icon { width: 17px; height: 17px; }
.nav-divider { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; background: transparent; border-radius: 8px; padding: 0; }
.icon-button:hover { background: var(--green-light); }

.shell { max-width: 1280px; padding: 0 32px; margin: 0 auto; }
.intro { display: flex; justify-content: space-between; align-items: center; padding: 31px 0 27px; }
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 650; letter-spacing: 1.6px; color: #6e816d; }
.eyebrow-line { width: 20px; height: 1px; background: #779772; }
h1 { font-size: clamp(30px, 3.2vw, 40px); letter-spacing: -1.7px; line-height: 1.15; font-weight: 650; margin-top: 10px; }
.intro p { color: var(--muted); margin-top: 10px; font-size: 13px; letter-spacing: .1px; }
.phase-route { display: flex; list-style: none; gap: 41px; padding: 0 2px 0 0; margin-top: 11px; }
.phase-route li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #a0aa9e; font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.phase-route li:not(:last-child)::after { content: ''; height: 1px; width: 43px; background: var(--line); position: absolute; left: calc(50% + 22px); top: 16px; }
.step-circle { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid var(--line); border-radius: 50%; font-size: 10px; letter-spacing: .5px; background: var(--paper); }
.phase-route .active { color: var(--green); }
.phase-route .active .step-circle { border-color: #c8d8be; background: #e5eddc; }
.phase-route .done .step-circle { border-color: #b5cbb7; color: var(--green); }

.status-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #eaf0e4; border: 1px solid #dce5d4; border-radius: 11px; padding: 14px 18px; margin-bottom: 22px; min-height: 73px; }
.status-main { display: flex; align-items: center; gap: 13px; }
.status-symbol { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid #cfddc5; background: #e3ebda; border-radius: 10px; flex: 0 0 auto; color: #63815b; }
.status-symbol .icon { width: 21px; height: 21px; }
.status-main h2 { font-size: 14px; font-weight: 630; line-height: 1.5; letter-spacing: -.15px; }
.status-main p { color: #6e7c65; font-size: 11px; line-height: 1.6; margin-top: 1px; }
.turn-badge { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; font-size: 9px; letter-spacing: 1px; font-weight: 700; color: #627955; padding: 9px 11px; background: #f5f7ee; border: 1px solid #dae4d1; border-radius: 6px; }
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: #7c9a5c; }
.status-banner.computer-turn { background: #f3f0e5; border-color: #e9e1ca; }
.computer-turn .status-symbol { background: #ebe5d3; border-color: #e0d5b6; color: var(--gold); }
.computer-turn .status-main p { color: #8d856d; }
.computer-turn .turn-badge { background: #fbf8ef; border-color: #e8dfc5; color: #97834d; }
.computer-turn .live-dot { background: #b19a5b; animation: thinking 1.2s ease-in-out infinite; }

.game-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 226px; grid-template-areas: 'player enemy controls'; align-items: stretch; gap: 20px; }
.board-card, .control-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 3px 9px #1b3b2703; min-width: 0; }
.player-card { grid-area: player; }
.enemy-card { grid-area: enemy; }
.control-card { grid-area: controls; padding: 17px 15px; }
.board-heading { padding: 21px 21px 12px; }
.sector-label { display: flex; align-items: center; gap: 6px; color: #87958a; font-size: 8px; font-weight: 600; letter-spacing: 1.3px; }
.sector-label > span { width: 4px; height: 4px; border-radius: 50%; background: #6d987b; }
.enemy-sector > span { background: #c99179; }
.board-title-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 7px; }
.board-title-row h2 { font-size: 20px; font-weight: 630; letter-spacing: -.65px; }
.fleet-badge { display: flex; align-items: center; gap: 5px; color: #728473; font-size: 9px; background: #f2f6ee; border: 1px solid #e3eadd; padding: 5px 7px; border-radius: 5px; white-space: nowrap; }
.fleet-badge .icon { width: 11px; height: 11px; stroke-width: 1.7; }
.enemy-badge { background: #f5f4ef; border-color: #eae7dd; color: #969387; }
.board-frame { display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: 22px auto; margin: 3px 20px 0 9px; }
.axis-corner { display: grid; place-items: center; color: #9aaba1; padding-right: 4px; padding-bottom: 4px; }
.axis-corner .icon { width: 11px; height: 11px; stroke-width: 1.3; }
.axis-x { display: grid; grid-template-columns: repeat(10, 1fr); align-items: center; color: #778873; font-size: 10px; font-weight: 500; padding-bottom: 5px; text-align: center; font-variant-numeric: tabular-nums; }
.axis-y { display: grid; grid-template-rows: repeat(10, 1fr); align-items: center; color: #778873; font-size: 10px; text-align: center; padding-right: 6px; }
.ocean-board { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(10, minmax(0, 1fr)); width: 100%; aspect-ratio: 1; position: relative; background: var(--ocean); border: 1px solid #d4e0d7; border-radius: 5px; isolation: isolate; }
.grid-row { display: contents; }
.cell { position: relative; display: grid; place-items: center; background: transparent; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; border-right: 1px solid var(--ocean-line); border-bottom: 1px solid var(--ocean-line); border-radius: 0; transition: background .15s; cursor: default; }
.cell[data-x="9"] { border-right: 0; }
.cell[data-y="9"] { border-bottom: 0; }
.cell[data-x="0"][data-y="0"] { border-top-left-radius: 4px; }
.cell[data-x="9"][data-y="0"] { border-top-right-radius: 4px; }
.cell[data-x="0"][data-y="9"] { border-bottom-left-radius: 4px; }
.cell[data-x="9"][data-y="9"] { border-bottom-right-radius: 4px; }
.cell:focus-visible { outline: 2px solid #668c73; outline-offset: -3px; z-index: 4; }
.ocean-board[data-interactive="true"] .cell[aria-disabled="false"] { cursor: crosshair; }
body[data-phase="placement"] #playerBoard .cell[data-ship] { cursor: grab; touch-action: none; }
.cell.is-miss { background: #e8efeb; }
.cell.is-hit, .cell.is-sunk { background: #f7e9df; }
.cell.is-sunk { background: #f1e0d5; }
.cell.preview-valid { background: #cde1cb; box-shadow: inset 0 0 0 1px #9eb99a; }
.cell.preview-invalid { background: #f1d9cf; box-shadow: inset 0 0 0 1px #d69c89; }
.cell.preview-start::after { content: '+'; color: #608263; font-size: 20px; font-weight: 300; position: absolute; z-index: 4; }
.cell.preview-invalid.preview-start::after { color: #b87661; }
.shot-marker { position: relative; z-index: 3; pointer-events: none; }
.miss-marker { width: 7px; height: 7px; background: #f8faf7; border: 1.4px solid #9eb0a3; border-radius: 50%; }
.hit-marker { width: 24px; height: 24px; color: #c97150; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.hit-marker circle { fill: #c97150; stroke: #ffe6ca; stroke-width: 1; }
.cell.is-sunk .hit-marker { color: #aa573e; }
.cell.is-sunk .hit-marker circle { fill: #aa573e; }
.ship-layer, .effects-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.effects-layer { z-index: 6; overflow: hidden; border-radius: 4px; }
.placed-ship { position: absolute; filter: drop-shadow(0 2px 1px #204b391f); transition: opacity .25s, filter .2s; }
.placed-ship svg { width: 100%; height: 100%; display: block; }
.placed-ship.is-selected { filter: drop-shadow(0 0 2px #527e5b99); }
.placed-ship.is-dragged { opacity: .35; }
.placed-ship.is-sunk { opacity: .5; filter: grayscale(.55); }
.placed-ship.is-revealed:not(.is-sunk) { opacity: .62; }
.ocean-fog { position: absolute; inset: 0; z-index: 7; background: #f0f4eee3; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 4px; pointer-events: none; }
.sonar-illustration { position: relative; width: 135px; height: 135px; display: grid; place-items: center; margin: -17px 0 22px; }
.sonar-illustration > span { position: absolute; inset: 0; border: 1px solid #d8e3d3; border-radius: 50%; }
.sonar-illustration > span:nth-child(2) { inset: 18px; }
.sonar-illustration > span:nth-child(3) { inset: 38px; }
.sonar-illustration::before, .sonar-illustration::after { content: ''; position: absolute; background: #dbe5d7; }
.sonar-illustration::before { width: 1px; height: 155px; }
.sonar-illustration::after { height: 1px; width: 155px; }
.sonar-illustration > .icon { color: #9aae91; width: 37px; height: 37px; background: #f0f4ee; z-index: 1; border-radius: 50%; stroke-width: 1; }
.sonar-illustration > i, .sonar-illustration > b { position: absolute; border-radius: 50%; width: 5px; height: 5px; background: #a6b69a; box-shadow: 0 0 0 4px #dce6d555; }
.sonar-illustration > i { right: 23px; top: 34px; }
.sonar-illustration > b { left: 26px; bottom: 32px; width: 3px; height: 3px; }
.ocean-fog h3 { color: #73856b; font-size: 17px; font-weight: 500; letter-spacing: -.4px; }
.ocean-fog > p { font-size: 11px; color: #97a08e; margin-top: 7px; }
.fog-label { font-size: 8px; color: #93a087; display: flex; align-items: center; gap: 5px; border: 1px solid #dfe6d8; padding: 7px 9px; border-radius: 5px; margin-top: 20px; letter-spacing: .15px; }
.fog-label .icon { width: 10px; height: 10px; }
.board-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 17px 21px 18px; }
.board-legend { display: flex; gap: 14px; }
.board-legend > span { display: flex; align-items: center; gap: 5px; color: #78896f; font-size: 10px; }
.legend-dot { display: block; width: 6px; height: 6px; }
.legend-dot.miss { border: 1px solid #a4b3a7; border-radius: 50%; }
.legend-dot.hit { background: #cb8d6d; border-radius: 50%; }
.legend-dot.sunk { background: #a55f47; border-radius: 1px; }
.coordinate-label { color: #a0ab9c; font-size: 7px; letter-spacing: .9px; min-width: 23px; text-align: right; }
.mobile-locked-note { display: none; }
.enemy-card.is-active { border-color: #aec3aa; box-shadow: 0 0 0 1px #aec3aa33, 0 4px 18px #254b2810; }
.enemy-card.is-active .enemy-badge { color: var(--green); background: #edf4e8; border-color: #dce6d4; }

.panel-eyebrow { font-size: 8px; font-weight: 650; letter-spacing: 1.15px; color: #96a18f; }
.dock-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dock-heading h2, .combat-heading h2 { font-size: 18px; font-weight: 610; letter-spacing: -.55px; margin-top: 6px; }
.dock-count { align-self: flex-end; font-size: 20px; color: #4f7451; font-weight: 550; line-height: 1.2; font-variant-numeric: tabular-nums; }
.dock-count > span { font-size: 11px; color: #a2ad9a; margin-left: 3px; font-weight: 400; }
.dock-tools { display: flex; gap: 6px; margin: 17px 0 13px; }
.small-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 6px; font-size: 10px; font-weight: 550; padding: 8px 9px; min-height: 32px; transition: background .18s, border-color .18s; }
.small-button:hover, .secondary-button:hover { background: #f2f6ed; border-color: #bfcdb7; }
.small-button .icon { width: 13px; height: 13px; }
.dock-tools > button { flex: 1 1 auto; padding: 7px 6px; }
kbd { display: inline-block; font-family: inherit; font-size: 8px; padding: 2px 4px; border: 1px solid #dde4d6; border-bottom-width: 2px; border-radius: 3px; background: #f7f8f3; color: #95a08d; line-height: 1; font-weight: 500; }
.dock-tools kbd { margin-left: 2px; font-size: 7px; }
.ship-list { display: flex; flex-direction: column; gap: 7px; }
.ship-choice { display: grid; grid-template-columns: 64px 1fr 15px; align-items: center; gap: 5px; width: 100%; height: 51px; padding: 7px 8px; text-align: left; background: #fff; border: 1px solid #e4e9df; border-radius: 7px; touch-action: none; user-select: none; transition: background .16s, border-color .16s; }
.ship-choice:hover { border-color: #b2c5a8; background: #f7f9f3; }
.ship-choice.is-selected { background: #eef3e7; border-color: #aabc92; box-shadow: inset 0 0 0 1px #aabc9220; }
.ship-thumbnail { display: flex; align-items: center; justify-content: flex-start; height: 24px; opacity: .77; pointer-events: none; }
.ship-thumbnail svg { height: 21px; max-width: 64px; }
.ship-choice.is-selected .ship-thumbnail { opacity: 1; }
.ship-choice.is-placed .ship-thumbnail { opacity: .57; }
.ship-choice.is-selected.is-placed .ship-thumbnail { opacity: .85; }
.ship-information { min-width: 0; pointer-events: none; }
.ship-name { display: block; font-size: 11px; font-weight: 580; white-space: nowrap; }
.ship-pips { display: flex; gap: 3px; margin-top: 6px; }
.ship-pips > i { width: 4px; height: 4px; border-radius: 1px; background: #cad6bf; }
.ship-choice.is-selected .ship-pips > i { background: #8ca878; }
.ship-state { width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid #dce3d4; border-radius: 50%; color: #8b9e7c; pointer-events: none; }
.ship-state .icon { width: 10px; height: 10px; stroke-width: 2; opacity: 0; }
.ship-choice.is-selected:not(.is-placed) .ship-state { border-color: #9db187; }
.ship-choice.is-selected:not(.is-placed) .ship-state::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #89a36c; position: absolute; }
.ship-choice.is-placed .ship-state { background: #edf2e7; border-color: #d5e0c9; }
.ship-choice.is-placed .ship-state .icon { opacity: 1; }
.dock-footnotes { display: flex; justify-content: space-between; align-items: center; margin-top: 13px; font-size: 9px; color: #9ca68f; }
.dock-footnotes > span { display: flex; align-items: center; gap: 5px; }
.dock-footnotes .icon { width: 13px; height: 13px; transition: transform .18s; }
.dock-footnotes.is-vertical .icon { transform: rotate(90deg); }
.text-button { padding: 3px 0; color: #8c9a7e; background: transparent; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover { color: var(--green); }
.text-button:disabled { color: #c0c8b8; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 43px; padding: 12px 17px; font-size: 12px; font-weight: 550; letter-spacing: .1px; color: #f3f6eb; background: var(--ink); border: 1px solid var(--ink); border-radius: 7px; transition: background .18s, transform .18s, box-shadow .18s; }
.primary-button:hover:not(:disabled) { background: #28564a; border-color: #28564a; box-shadow: 0 3px 10px #193b3718; }
.primary-button:active:not(:disabled) { transform: translateY(1px); }
.primary-button .icon { width: 16px; height: 16px; }
.primary-button:disabled { background: #edf0e7; border-color: #e7ebdf; color: #adb89f; }
.deploy-button { width: 100%; margin-top: 14px; justify-content: space-between; }
.dock-note { color: #a1aa97; font-size: 9px; line-height: 1.7; text-align: center; margin-top: 10px; }

.battle-controls { display: flex; flex-direction: column; height: 100%; }
.fleet-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 21px; padding-bottom: 17px; border-bottom: 1px solid #e9ede4; }
.stat-label { display: block; color: #9aa590; font-size: 7px; letter-spacing: .8px; }
.fleet-stats strong { display: block; font-size: 31px; font-weight: 500; letter-spacing: -1px; margin-top: 5px; line-height: 1; }
.fleet-stats strong > span { font-size: 12px; font-weight: 400; color: #aab39f; margin-left: 4px; letter-spacing: 0; }
.fleet-stats > div:last-child strong { color: #ac7458; }
.fleet-meter { display: flex; gap: 3px; margin-top: 9px; }
.fleet-meter > i { flex: 1; height: 3px; background: #8ca57c; border-radius: 1px; }
.fleet-meter > i.is-sunk { background: #e7ecdf; }
.enemy-meter > i { background: #c09174; }
.enemy-meter > i.is-sunk { background: #eee3d7; }
.fleet-health { padding: 17px 0 13px; border-bottom: 1px solid #e9ede4; }
.fleet-health > .panel-eyebrow { margin-bottom: 7px; }
.health-row { display: flex; align-items: center; justify-content: space-between; height: 26px; gap: 5px; font-size: 10px; color: #718167; }
.health-name { display: flex; align-items: center; gap: 6px; }
.health-name > svg { width: 36px; height: 15px; opacity: .68; }
.health-row.is-sunk { color: #a8ae9d; }
.health-row.is-sunk .health-name > span { text-decoration: line-through; text-decoration-color: #c5ccbb; }
.health-pips { display: flex; gap: 3px; }
.health-pips > i { width: 5px; height: 5px; border-radius: 1px; background: #98ac84; }
.health-pips > i.is-hit { background: #cc9577; }
.transmissions { margin-top: 17px; }
.transmission-heading { display: flex; align-items: center; justify-content: space-between; }
.transmission-heading > span:last-child { color: #a5ad9b; font-size: 8px; }
.battle-log { list-style: none; padding: 0; margin-top: 6px; }
.battle-log > li { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 0; font-size: 9px; color: #94a089; border-bottom: 1px solid #f0f2ec; line-height: 1.5; }
.battle-log .log-icon { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto; background: #f0f4ec; border-radius: 5px; color: #95a888; }
.log-icon .icon { width: 12px; height: 12px; }
.battle-log > li.log-hit .log-icon, .battle-log > li.log-sunk .log-icon { background: #f8ede3; color: #bf8261; }
.battle-log > li > span:last-child { display: block; }
.battle-log strong { font-weight: 550; color: #6e8063; }
.battle-tip { display: flex; justify-content: center; align-items: center; gap: 6px; color: #9ea98e; font-size: 9px; line-height: 1.5; margin: auto 0 11px; padding-top: 18px; }
.battle-tip .icon { width: 13px; height: 13px; }
.new-battle-button { width: 100%; }

.page-footer { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 0; padding: 16px 0 20px; color: #9ba791; border-top: 1px solid #e1e6dc; }
.page-footer > span:first-child { display: flex; align-items: center; gap: 7px; font-size: 10px; }
.page-footer .icon { width: 14px; height: 14px; stroke-width: 1.2; }
.page-footer > span:last-child { display: flex; align-items: center; font-size: 7px; letter-spacing: 1.2px; }
.footer-dot { margin: 0 10px; }

.shot-effect { position: absolute; width: 10%; height: 10%; display: grid; place-items: center; }
.shot-effect::before, .shot-effect::after { content: ''; position: absolute; width: 15px; height: 15px; border: 1px solid #ba785b; border-radius: 50%; animation: impact-ring .85s ease-out both; }
.shot-effect::after { animation-delay: .1s; }
.shot-effect.is-miss::before, .shot-effect.is-miss::after { border-color: #a3bca9; animation-name: splash-ring; }
.shot-effect > i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #bf7857; animation: impact-particle .6s ease-out both; }
.shot-effect.is-sunk::before { border-width: 2px; }
.ocean-board.impact-shake { animation: impact-shake .3s linear; }
.drag-ghost { position: fixed; z-index: 100; pointer-events: none; filter: drop-shadow(0 5px 6px #203e3433); opacity: .9; }
.drag-ghost svg { width: 100%; height: 100%; display: block; }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 10px); display: flex; align-items: center; gap: 9px; padding: 12px 17px; border: 1px solid #d9e4d0; border-radius: 9px; background: #fff; color: #52724c; box-shadow: 0 6px 30px #1b3d2520; font-size: 11px; max-width: calc(100% - 32px); width: max-content; opacity: 0; pointer-events: none; z-index: 110; transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-warning { color: #ac7458; border-color: #ecd8c8; }
.toast .icon { width: 16px; height: 16px; }

.modal { width: min(480px, calc(100% - 32px)); border: 1px solid #dce4d5; border-radius: 18px; background: #fff; color: var(--ink); padding: 34px; box-shadow: 0 20px 90px #0f2b3350; max-height: calc(100dvh - 40px); overflow-y: auto; }
.modal::backdrop { background: #153d37a6; backdrop-filter: blur(5px); }
.modal[open] { animation: modal-in .25s ease-out; }
.modal-close { position: absolute; right: 12px; top: 12px; color: #9aa88f; }
.modal-close .icon { width: 18px; height: 18px; }
.modal-emblem { width: 48px; height: 48px; border: 1px solid #dbe7d0; background: #edf3e7; border-radius: 13px; color: #80956d; display: grid; place-items: center; margin-bottom: 23px; }
.modal-emblem .icon { width: 26px; height: 26px; stroke-width: 1.3; }
.modal h2 { font-size: 29px; line-height: 1.2; font-weight: 590; letter-spacing: -1.1px; margin-top: 9px; }
.modal-intro { font-size: 12px; line-height: 1.8; color: #95a08a; margin-top: 12px; }
.help-steps { padding: 0; list-style: none; margin: 25px 0; }
.help-steps > li { display: flex; align-items: flex-start; gap: 13px; margin-top: 20px; }
.help-steps > li > span { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #e3eadb; border-radius: 7px; background: #f8faf4; color: #8ca379; font-size: 9px; flex: 0 0 auto; }
.help-steps h3 { font-size: 13px; font-weight: 620; margin: 4px 0 6px; }
.help-steps p { font-size: 11px; line-height: 1.8; color: #8c9981; }
.help-shortcuts { display: flex; flex-wrap: wrap; gap: 13px; color: #9da991; font-size: 9px; border-top: 1px solid var(--line); padding: 16px 0 23px; }
.help-shortcuts > span { display: flex; gap: 4px; align-items: center; }
.full-width { width: 100%; }
.dialog-actions { display: flex; gap: 9px; margin-top: 27px; }
.dialog-actions > button { flex: 1; font-size: 11px; }
.result-modal { text-align: center; }
.result-art { height: 145px; position: relative; display: grid; place-items: center; margin-bottom: 10px; }
.result-art > span { position: absolute; width: 132px; height: 132px; border: 1px solid #e5ebdb; border-radius: 50%; }
.result-art > span:nth-child(2) { width: 108px; height: 108px; }
.result-medallion { width: 82px; height: 82px; display: grid; place-items: center; border: 1px solid #dbe6c7; border-radius: 50%; background: #edf3e1; box-shadow: 0 3px 0 #e2ebd5; color: #91a668; }
.result-medallion .icon { width: 37px; height: 37px; stroke-width: 1.2; }
.spark { position: absolute; font-style: normal; color: #b5c88e; }
.spark-one { left: 21%; top: 26%; font-size: 16px; }
.spark-two { right: 18%; top: 60%; font-size: 24px; }
.spark-three { right: 27%; top: 16%; font-size: 10px; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 27px 0; border: 1px solid #e4eadc; border-radius: 10px; padding: 18px 8px; background: #f8faf4; }
.result-stats > div + div { border-left: 1px solid #e1e8d8; }
.result-stats strong { font-size: 25px; font-weight: 500; letter-spacing: -.7px; display: block; }
.result-stats span { display: block; margin-top: 8px; font-size: 7px; letter-spacing: .8px; color: #98a48b; }
.review-button { margin-top: 16px; font-size: 10px; }
.result-modal.is-defeat .result-medallion { background: #f3eee4; border-color: #e5d9c6; color: #b19a6d; box-shadow: 0 3px 0 #e8dfcf; }
.result-modal.is-defeat .spark { color: #c5b289; }
.noscript-message { padding: 20px; background: #fbeee4; text-align: center; }

@media (hover: hover) {
  .ocean-board[data-interactive="true"] .cell[aria-disabled="false"]:hover:not(.preview-valid):not(.preview-invalid) { background: #dfeadc; }
  body[data-phase="battle"] #enemyBoard[data-interactive="true"] .cell[aria-disabled="false"]:hover::after { content: ''; position: absolute; width: 18px; height: 18px; border: 1px solid #7e9b73; border-radius: 50%; background: radial-gradient(circle, #789769 0 2px, transparent 2.5px); }
}

@media (min-width: 1500px) {
  .intro { padding-top: 40px; padding-bottom: 32px; }
  .status-banner { margin-bottom: 26px; }
}

@media (max-width: 1099px) and (min-width: 701px) {
  .game-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'player enemy' 'controls controls'; }
  .control-card { padding: 18px; }
  .deployment-controls { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 13px 20px; }
  .dock-heading { justify-content: flex-start; gap: 18px; }
  .dock-tools { margin: 0; }
  .dock-tools > button { min-width: 94px; }
  .ship-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .ship-choice { grid-template-columns: 1fr 15px; height: 85px; padding: 10px; }
  .ship-thumbnail { grid-column: 1 / -1; height: 22px; margin-bottom: 6px; }
  .ship-thumbnail svg { max-width: 90px; height: 23px; }
  .ship-information { grid-row: 2; }
  .ship-name { font-size: 11px; }
  .ship-state { grid-row: 2; }
  .dock-footnotes { margin: 0; justify-content: flex-start; gap: 22px; }
  .deploy-button { margin: 0; width: 194px; }
  .dock-note { display: none; }
  .battle-controls { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px 24px; align-items: start; }
  .combat-heading { grid-column: 1 / -1; }
  .fleet-stats { margin: 4px 0 0; border: 0; padding: 0; gap: 24px; }
  .fleet-health { border: 0; padding: 0; grid-column: 2; grid-row: 2 / 4; }
  .transmissions { margin: 0; grid-column: 3; grid-row: 2 / 4; }
  .battle-tip { justify-content: flex-start; margin: 4px 0; padding: 0; }
  .new-battle-button { grid-column: 1; grid-row: 4; margin-top: -30px; }
}

@media (max-width: 850px) {
  .header-inner, .shell { padding-left: 23px; padding-right: 23px; }
  .phase-route { gap: 29px; }
  .phase-route li:not(:last-child)::after { width: 32px; }
  .board-heading { padding: 19px 16px 10px; }
  .board-title-row h2 { font-size: 18px; }
  .board-frame { margin-right: 15px; margin-left: 6px; }
  .board-footer { padding-left: 17px; padding-right: 16px; }
  .board-legend { gap: 11px; }
  .coordinate-label { font-size: 6px; }
  .status-main p { max-width: 420px; }
  .turn-badge { font-size: 8px; padding: 8px; letter-spacing: .7px; }
}

@media (max-width: 700px) {
  .header-inner { height: 74px; padding: 0 19px; }
  .brand { gap: 9px; }
  .brand-mark { width: 37px; height: 37px; border-radius: 10px; }
  .brand-mark svg { width: 30px; height: 30px; }
  .brand-type { font-size: 15px; letter-spacing: 1.9px; }
  .brand-type span { font-size: 7px; letter-spacing: 2.6px; margin-top: 5px; }
  .header-actions { gap: 5px; }
  .nav-button { width: 34px; height: 34px; justify-content: center; padding: 0; border-radius: 7px; }
  .nav-button > span, .nav-divider { display: none; }
  .nav-button .icon { width: 18px; height: 18px; }
  .shell { padding: 0 16px; max-width: 530px; }
  .intro { padding: 24px 3px 22px; }
  .eyebrow { font-size: 8px; letter-spacing: 1.3px; }
  .eyebrow-line { width: 16px; }
  h1 { font-size: 32px; letter-spacing: -1.4px; margin-top: 9px; }
  .intro p { font-size: 12px; margin-top: 8px; }
  .phase-route { display: none; }
  .status-banner { padding: 13px; gap: 7px; min-height: 80px; margin-bottom: 16px; align-items: center; }
  .status-main { gap: 10px; }
  .status-symbol { width: 30px; height: 33px; border-radius: 8px; }
  .status-symbol .icon { width: 18px; height: 18px; }
  .status-main h2 { font-size: 12px; }
  .status-main p { font-size: 10px; line-height: 1.6; max-width: 270px; }
  .turn-badge { padding: 6px; font-size: 7px; letter-spacing: .2px; white-space: nowrap; align-self: flex-start; margin-top: 3px; }
  .turn-badge .live-dot { width: 4px; height: 4px; }
  body[data-phase="placement"] .turn-badge { display: none; }
  body[data-phase="battle"] .status-banner { position: sticky; top: 8px; z-index: 20; box-shadow: 0 3px 15px #25422b15; }
  body[data-phase="battle"] .status-main p { max-width: 195px; }
  .game-workspace { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'controls' 'player' 'enemy'; gap: 16px; }
  body:not([data-phase="placement"]) .game-workspace { grid-template-areas: 'enemy' 'player' 'controls'; }
  .board-heading { padding: 18px 19px 12px; }
  .board-title-row h2 { font-size: 20px; }
  .sector-label { font-size: 8px; }
  .fleet-badge { font-size: 9px; padding: 5px 7px; }
  .board-frame { grid-template-columns: 22px minmax(0, 1fr); margin: 0 18px 0 7px; }
  .board-footer { padding: 16px 19px; }
  .coordinate-label { font-size: 7px; }
  .control-card { padding: 14px; }
  .deployment-controls { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 13px 14px; }
  .dock-heading { justify-content: flex-start; gap: 13px; }
  .dock-heading h2 { font-size: 16px; margin-top: 4px; }
  .dock-count { font-size: 17px; }
  .dock-count > span { font-size: 9px; }
  .dock-tools { margin: 0; gap: 6px; }
  .dock-tools > button { padding: 8px; min-height: 31px; }
  .dock-tools kbd { display: none; }
  .ship-list { grid-column: 1 / -1; flex-direction: row; overflow-x: auto; padding: 1px 1px 6px; gap: 7px; scrollbar-width: thin; scrollbar-color: #d3ddc8 transparent; overscroll-behavior-x: contain; }
  .ship-choice { flex: 0 0 112px; grid-template-columns: 1fr 15px; height: 69px; padding: 8px; gap: 4px; touch-action: pan-x; }
  .ship-thumbnail { grid-column: 1 / -1; height: 22px; }
  .ship-thumbnail svg { max-width: 76px; height: 21px; }
  .ship-information { grid-row: 2; }
  .ship-state { grid-row: 2; }
  .ship-pips { margin-top: 4px; }
  .dock-footnotes { margin: 0; justify-content: flex-start; gap: 15px; }
  .deploy-button { margin: 0; width: 135px; min-height: 37px; padding: 9px 12px; font-size: 11px; }
  .dock-note { display: none; }
  .enemy-card.is-locked .board-frame, .enemy-card.is-locked .board-footer { display: none; }
  .enemy-card.is-locked .board-heading { padding-bottom: 7px; }
  .enemy-card.is-locked .mobile-locked-note { display: block; font-size: 10px; color: #a1ab96; padding: 0 19px 18px; }
  .battle-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 3px; }
  .combat-heading { grid-column: 1 / -1; }
  .fleet-stats { grid-column: 1 / -1; margin: 0; padding-bottom: 17px; gap: 45px; }
  .stat-label { font-size: 8px; }
  .fleet-stats strong { font-size: 34px; }
  .fleet-health { padding: 0; border: 0; }
  .transmissions { margin: 0; }
  .health-row { font-size: 9px; height: 29px; }
  .health-name { gap: 4px; }
  .health-name > svg { width: 29px; }
  .health-pips { gap: 2px; }
  .health-pips > i { width: 4px; height: 4px; }
  .battle-log > li { min-height: 38px; font-size: 9px; }
  .transmission-heading { gap: 3px; }
  .transmission-heading .panel-eyebrow { font-size: 7px; }
  .transmission-heading > span:last-child { font-size: 7px; }
  .battle-tip { justify-content: flex-start; padding: 0; margin: 0; }
  .new-battle-button { min-height: 35px; }
  .page-footer { margin-top: 18px; padding-bottom: 22px; }
  .page-footer > span:first-child { font-size: 9px; }
  .page-footer > span:last-child { font-size: 6px; letter-spacing: .8px; }
  .page-footer > span:last-child .footer-dot { margin: 0 5px; }
  .modal { padding: 30px 23px 25px; }
  .modal h2 { font-size: 26px; }
  .help-steps p { font-size: 11px; }
  .help-shortcuts { gap: 10px; }
  .toast { font-size: 10px; bottom: max(18px, env(safe-area-inset-bottom)); }
  .board-card { scroll-margin-top: 110px; }
}

@media (max-width: 360px) {
  .shell { padding: 0 12px; }
  .header-inner { padding: 0 13px; }
  .brand-type { font-size: 14px; }
  .header-actions { gap: 1px; }
  h1 { font-size: 29px; }
  .dock-tools > button { padding: 7px 5px; font-size: 9px; }
  .deploy-button { width: 123px; }
  .board-legend { gap: 9px; }
  .health-name > svg { display: none; }
  .page-footer > span:last-child { display: none; }
}

@keyframes thinking { 50% { opacity: .3; } }
@keyframes impact-ring { from { transform: scale(.3); opacity: .9; } to { transform: scale(4.8); opacity: 0; } }
@keyframes splash-ring { from { transform: scale(.2); opacity: .8; } to { transform: scale(3.5); opacity: 0; } }
@keyframes impact-particle { from { transform: translate(0, 0); opacity: .9; } to { transform: translate(var(--particle-x), var(--particle-y)); opacity: 0; } }
@keyframes impact-shake { 25% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, 1px); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

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