:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e8edf3;
  background: #0b1117;
  font-synthesis: none;
  --panel: rgba(20, 29, 39, .92);
  --panel-2: rgba(25, 37, 49, .9);
  --border: rgba(159, 189, 216, .16);
  --muted: #91a2b2;
  --accent: #e5b54a;
  --accent-2: #7bb6b0;
  --danger: #ed7973;
  --cell-a: #263541;
  --cell-b: #1f2d38;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 25% 0%, #17303b 0, #0b1117 42%, #070b10 100%); }
button, select, input { font: inherit; }
button { color: inherit; }
button:disabled { opacity: .45; cursor: not-allowed !important; }
.hidden { display: none !important; }
.app-shell { min-height: 100vh; padding: clamp(18px, 3vw, 38px); }
.screen { width: min(1380px, 100%); margin: 0 auto; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 24px; box-shadow: 0 24px 70px rgba(0,0,0,.28); backdrop-filter: blur(16px); }
.menu-screen { min-height: calc(100vh - 76px); display: grid; grid-template-columns: 1fr minmax(420px, 620px); gap: 34px; align-items: center; }
.brand-card { padding: 42px; }
.brand-card h1 { font-size: clamp(3.5rem, 8vw, 7.6rem); line-height: .9; margin: 14px 0 24px; max-width: 9ch; letter-spacing: -.065em; }
.lead { font-size: 1.18rem; color: var(--muted); max-width: 56ch; line-height: 1.65; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 800; }
.setup-card { padding: 28px; }
.panel-heading, .section-heading, .game-header, .battle-status, .header-actions, .tank-cards, .toggle-row, .modal-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
h1, h2, h3, p { margin-top: 0; }
h2 { margin: 6px 0 0; font-size: 1.45rem; }
h3 { font-size: .95rem; margin-bottom: 12px; }
.language-picker, .field { display: grid; gap: 7px; color: var(--muted); font-size: .83rem; }
select { color: #e7eef6; background: #111b24; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0 18px; }
.toggle-row { justify-content: flex-start; flex-wrap: wrap; margin-bottom: 20px; }
.toggle { display: flex; gap: 9px; align-items: center; background: #111b24; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; color: #c8d4df; }
.prototype-note { color: var(--muted); padding: 14px 16px; background: rgba(229,181,74,.08); border: 1px solid rgba(229,181,74,.2); border-radius: 14px; line-height: 1.5; margin-bottom: 20px; }
.primary-button, .secondary-button, .ghost-button, .small-button { border: 0; cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.primary-button { width: 100%; padding: 14px 18px; border-radius: 14px; background: var(--accent); color: #18202a; font-weight: 900; }
.primary-button:hover, .secondary-button:hover, .ghost-button:hover, .small-button:hover, .direction-pad button:hover { transform: translateY(-1px); }
.secondary-button, .ghost-button, .small-button { border: 1px solid var(--border); background: #111b24; border-radius: 11px; padding: 9px 12px; }
.small-button { font-size: .78rem; }
.game-header { margin-bottom: 20px; }
.game-header h1 { margin: 7px 0 0; font-size: clamp(1.8rem, 4vw, 3rem); }
.game-layout { display: grid; grid-template-columns: minmax(560px, 1fr) 390px; gap: 20px; align-items: stretch; }
.battle-panel { padding: 20px; }
.battle-status { justify-content: flex-start; flex-wrap: wrap; margin-bottom: 15px; }
.status-chip { min-width: 120px; display: flex; justify-content: space-between; gap: 18px; color: var(--muted); background: #111b24; border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; }
.status-chip strong { color: #fff; }
.board { --board-size: 8; width: min(72vh, 100%); aspect-ratio: 1; margin: 0 auto; display: grid; grid-template-columns: repeat(var(--board-size), 1fr); grid-template-rows: repeat(var(--board-size), 1fr); border: 2px solid rgba(229,181,74,.35); border-radius: 16px; overflow: hidden; background: var(--cell-a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 38px rgba(0,0,0,.23); }
.board-cell { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; background: var(--cell-a); border: 1px solid rgba(255,255,255,.025); }
.board-cell.cell-alt { background: var(--cell-b); }
.board-cell::after { content: ""; position: absolute; inset: 8%; border: 1px solid rgba(255,255,255,.018); border-radius: 8px; pointer-events: none; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: .8rem; margin-top: 14px; }
.legend span { display: inline-flex; gap: 7px; align-items: center; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.player-dot { background: #e6bc5c; }.bot-dot { background: #72b4c0; }.legend-mine { color: #d8ce85; }
.tank { width: 66%; height: 58%; position: relative; z-index: 3; filter: drop-shadow(0 5px 4px rgba(0,0,0,.4)); }
.tank-track { position: absolute; top: 12%; bottom: 6%; width: 22%; border-radius: 6px; background: #111820; border: 1px solid rgba(255,255,255,.12); }
.tank-track.left { left: 2%; }.tank-track.right { right: 2%; }
.tank-body { position: absolute; left: 18%; right: 18%; top: 18%; bottom: 8%; border-radius: 8px 8px 5px 5px; background: #d8a83c; box-shadow: inset 0 -8px 0 rgba(0,0,0,.12); }
.tank-bot .tank-body { background: #5d9faa; }
.tank-turret { position: absolute; width: 38%; aspect-ratio: 1; border-radius: 50%; left: 31%; top: 13%; background: #f0c55f; box-shadow: inset 0 -5px 0 rgba(0,0,0,.1); }
.tank-bot .tank-turret { background: #77bdc7; }
.tank-barrel { position: absolute; left: 46%; width: 9%; height: 40%; top: -15%; border-radius: 4px; background: #e7bc55; }
.tank-bot .tank-barrel { background: #71b2bd; }
.mine-token { position: absolute; z-index: 2; font-size: clamp(.75rem, 2vw, 1.3rem); color: #d7ce86; text-shadow: 0 0 12px rgba(215,206,134,.55); opacity: .78; }
.mine-token.proximity { color: #c88c6a; }
.command-panel { padding: 20px; position: sticky; top: 18px; align-self: stretch; height: 100%; max-height: none; overflow: auto; }
.player-overview-section { padding-bottom: 16px; }
.player-overview-section h2 { margin: 0 0 12px; }
.tank-cards { margin-bottom: 0; }
.tank-card { flex: 1; padding: 12px; border: 1px solid var(--border); background: #111b24; border-radius: 13px; }
.tank-card > span { color: var(--muted); font-size: .8rem; }
.hp { margin-top: 8px; display: flex; gap: 4px; }
.hp-pip { color: #4b5661; }.hp-pip.active { color: var(--danger); }
.planner-section { padding: 16px 0; border-top: 1px solid var(--border); }
.planner-section:first-of-type { border-top: 0; padding-top: 0; }
.action-queue { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 7px; }
.queue-item { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: 8px; border: 1px solid var(--border); background: #111b24; border-radius: 10px; padding: 7px 8px; }
.queue-index { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(229,181,74,.12); color: var(--accent); font-weight: 800; font-size: .75rem; }
.queue-copy { font-size: .85rem; }.queue-remove { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1.2rem; }
.empty-plan, .hint { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.empty-plan { padding: 12px 0 2px; }
.direction-pad { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 42px); gap: 6px; justify-content: center; }
.direction-pad button { cursor: pointer; border: 1px solid var(--border); background: #111b24; border-radius: 10px; font-size: 1.1rem; }
.direction-pad button[data-move="up"], .direction-pad button[data-fire="up"] { grid-column: 2; }
.direction-pad button[data-move="left"], .direction-pad button[data-fire="left"] { grid-column: 1; grid-row: 2; }
.direction-pad button[data-move="down"], .direction-pad button[data-fire="down"] { grid-column: 2; grid-row: 2; }
.direction-pad button[data-move="right"], .direction-pad button[data-fire="right"] { grid-column: 3; grid-row: 2; }
.fire-pad button { color: #efca72; }
.shot-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.radio-card { cursor: pointer; }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card span { min-height: 64px; display: grid; align-content: center; gap: 3px; border: 1px solid var(--border); border-radius: 11px; padding: 8px 10px; background: #111b24; }
.radio-card input:checked + span { border-color: rgba(229,181,74,.58); box-shadow: inset 0 0 0 1px rgba(229,181,74,.22); }
.radio-card small { color: var(--muted); }
.mine-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.commit-button { margin-top: 4px; }
.validation-message { min-height: 22px; padding-top: 8px; color: #f0a09c; font-size: .8rem; }
.validation-message.pulse { animation: pulse .32s ease; }
@keyframes pulse { 50% { transform: translateX(4px); } }
.event-panel { margin-top: 20px; padding: 20px; }
.phase-label { color: var(--accent-2); font-size: .8rem; font-weight: 800; }
.combat-log { margin-top: 12px; height: 180px; overflow: auto; background: #0d151d; border: 1px solid var(--border); border-radius: 14px; padding: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; }
.log-row { padding: 4px 0; color: #9baab7; border-bottom: 1px dashed rgba(255,255,255,.035); }
.log-player { color: #e6c16d; }.log-bot { color: #85c2cc; }.log-slot { color: #fff; font-weight: 800; margin-top: 5px; }.log-system { color: var(--accent-2); }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(5,8,11,.76); backdrop-filter: blur(12px); }
.modal-card { width: min(480px, 100%); padding: 30px; background: #16212b; border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.modal-card h2 { font-size: 2.6rem; margin: 8px 0 12px; }.modal-card p { color: var(--muted); }
.modal-actions .primary-button { width: auto; flex: 1; }.modal-actions .ghost-button { flex: 1; }
@media (max-width: 980px) {
  .menu-screen, .game-layout { grid-template-columns: 1fr; }
  .brand-card { padding: 20px 4px; }
  .brand-card h1 { max-width: 12ch; }
  .command-panel { position: static; height: auto; max-height: none; }
  .board { width: min(88vw, 650px); }
}
@media (max-width: 560px) {
  .app-shell { padding: 12px; }
  .settings-grid { grid-template-columns: 1fr; }
  .panel-heading, .game-header { align-items: flex-start; flex-direction: column; }
  .battle-panel, .command-panel, .event-panel, .setup-card { padding: 15px; border-radius: 18px; }
  .mine-buttons { grid-template-columns: 1fr; }
}

/* v0.2.0 planning simulation + mouse control */
input[type="number"] { color: #e7eef6; background: #111b24; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; width: 100%; }
.battle-status { align-items: stretch; }
.mode-chip { min-width: 170px; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; color: var(--muted); background: rgba(229,181,74,.08); border: 1px solid rgba(229,181,74,.25); border-radius: 12px; padding: 8px 12px; }
.mode-chip strong { color: var(--accent); text-align: right; }
.mode-chip small { grid-column: 1 / -1; color: #d8e1e8; text-align: right; min-height: 1em; }
.board-wrap { position: relative; }
.board { user-select: none; cursor: crosshair; touch-action: none; }
.board.board-disabled { cursor: wait; opacity: .88; }
.board-cell.planned-move { box-shadow: inset 0 0 0 3px rgba(86,190,166,.22); }
.board-cell.planned-shot { background-image: linear-gradient(rgba(212,100,88,.12), rgba(212,100,88,.12)); }
.board-cell.hover-move { box-shadow: inset 0 0 0 3px rgba(86,190,166,.6), inset 0 0 24px rgba(86,190,166,.16); }
.board-cell.hover-shoot { box-shadow: inset 0 0 0 3px rgba(236,111,95,.58), inset 0 0 24px rgba(236,111,95,.14); }
.board-cell.hover-mine { box-shadow: inset 0 0 0 3px rgba(218,184,93,.62), inset 0 0 24px rgba(218,184,93,.18); }
.board-cell.hover-invalid { box-shadow: inset 0 0 0 3px rgba(236,86,86,.68); }
.board-cell.hover-target::before { content: ""; position: absolute; inset: 18%; border: 2px dashed rgba(255,255,255,.6); border-radius: 9px; z-index: 1; pointer-events: none; }
.plan-marker { position: absolute; right: 5px; bottom: 4px; z-index: 5; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: rgba(12,21,29,.78); color: #bde6dc; font-size: .64rem; font-weight: 900; border: 1px solid rgba(189,230,220,.35); }
.tank-origin { opacity: .3; filter: grayscale(.25) drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
.tank-preview { outline: 2px solid rgba(229,181,74,.34); outline-offset: 3px; border-radius: 10px; }
.tank-label { position: absolute; z-index: 8; right: -7px; bottom: -8px; min-width: 18px; height: 18px; padding: 0 3px; display: grid; place-items: center; border-radius: 9px; background: rgba(8,14,19,.86); border: 1px solid rgba(255,255,255,.24); color: #fff; font-size: .58rem; font-weight: 900; }
.planned-mine { opacity: .5; transform: scale(.85); outline: 1px dashed currentColor; outline-offset: 3px; }
.mouse-help { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; color: var(--muted); font-size: .72rem; }
.mouse-help span { display: inline-flex; align-items: center; gap: 5px; }
.mouse-help b { min-width: 34px; text-align: center; color: #f4deb0; background: #111b24; border: 1px solid var(--border); padding: 3px 6px; border-radius: 7px; }
.legend-path, .legend-shot { display: inline-block; width: 18px; height: 8px; border-radius: 4px; }
.legend-path { background: rgba(86,190,166,.5); }
.legend-shot { background: rgba(212,100,88,.5); }
.tank-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; max-height: 180px; overflow: auto; }
.tank-card { min-width: 0; }
.destroyed-card { opacity: .42; }
.mode-section h2 { margin-bottom: 12px; }
.mode-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mode-button { cursor: pointer; display: grid; gap: 4px; text-align: left; min-height: 72px; padding: 10px; color: #dce6ee; background: #111b24; border: 1px solid var(--border); border-radius: 12px; }
.mode-button strong { color: inherit; }
.mode-button small { color: var(--muted); font-size: .67rem; line-height: 1.25; }
.mode-button.active { border-color: rgba(229,181,74,.7); box-shadow: inset 0 0 0 1px rgba(229,181,74,.22); background: rgba(229,181,74,.08); }
.mode-button:disabled { opacity: .35; cursor: not-allowed; }
.plan-tools { display: flex; gap: 6px; }
.commit-button { display: grid; gap: 2px; place-items: center; }
.commit-button small { opacity: .72; font-weight: 700; }
.shortcut-note { margin: 2px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.45; text-align: center; }

@media (max-width: 560px) {
  .mode-buttons { grid-template-columns: 1fr; }
  .tank-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
  .mouse-help { display: none; }
}

/* v0.3.0 resolution animation, contextual help and pause/settings menu */
.board-stage { position: relative; width: min(72vh, 100%); aspect-ratio: 1; margin: 0 auto; }
.board-stage .board { width: 100%; height: 100%; margin: 0; }
.effect-layer { position: absolute; inset: 0; z-index: 12; pointer-events: none; overflow: hidden; border-radius: 16px; }
.mode-help { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding-top: 3px; }
.info-icon { flex: 0 0 auto; width: 18px; height: 18px; display: inline-grid; place-items: center; border: 1px solid rgba(229,181,74,.52); border-radius: 50%; color: var(--accent); font-size: .68rem; font-weight: 900; line-height: 1; }
.tank { transform-origin: center; will-change: transform, filter, opacity; }
.tank-damage-flash { animation: damageFlash .3s ease; }
@keyframes damageFlash { 0%,100% { filter: drop-shadow(0 5px 4px rgba(0,0,0,.4)); } 35%,65% { filter: brightness(1.75) saturate(1.8) drop-shadow(0 0 10px rgba(237,121,115,.9)); } }
.shot-tracer { position: absolute; height: 4px; margin-top: -2px; transform-origin: 0 50%; border-radius: 4px; background: linear-gradient(90deg, rgba(255,244,202,.95), rgba(238,134,91,.9)); box-shadow: 0 0 10px rgba(238,134,91,.8); }
.shot-tracer.long { height: 6px; margin-top: -3px; background: linear-gradient(90deg, rgba(255,248,208,1), rgba(237,95,78,.95)); box-shadow: 0 0 14px rgba(237,95,78,.92); }
.muzzle-flash, .impact-flash, .mine-placement-effect, .explosion-effect, .blocked-effect { position: absolute; transform: translate(-50%,-50%); }
.muzzle-flash { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #fff9c7 0 18%, #f2be59 35%, rgba(242,190,89,0) 72%); animation: muzzleFlash .24s ease-out both; }
.impact-flash { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,215,143,.9); animation: impactFlash .3s ease-out both; }
@keyframes muzzleFlash { from { opacity: 1; transform: translate(-50%,-50%) scale(.4); } to { opacity: 0; transform: translate(-50%,-50%) scale(1.8); } }
@keyframes impactFlash { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.25); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.6); } }
.mine-placement-effect { z-index: 5; font-size: clamp(1rem, 3vw, 1.8rem); color: #ddd18c; text-shadow: 0 0 12px rgba(221,209,140,.9); animation: minePlace .38s ease-out both; }
.mine-placement-effect.proximity { color: #d29472; }
@keyframes minePlace { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.25) rotate(-35deg); } 55% { opacity: 1; transform: translate(-50%,-50%) scale(1.35) rotate(8deg); } 100% { opacity: .3; transform: translate(-50%,-50%) scale(.9) rotate(0); } }
.explosion-effect { border-radius: 50%; background: radial-gradient(circle, rgba(255,247,207,.95) 0 7%, rgba(241,183,72,.95) 16%, rgba(225,92,63,.72) 38%, rgba(225,92,63,.18) 63%, rgba(225,92,63,0) 76%); border: 2px solid rgba(255,211,112,.55); animation: explosionPulse .52s cubic-bezier(.16,.82,.25,1) both; }
@keyframes explosionPulse { 0% { opacity: .1; transform: translate(-50%,-50%) scale(.12); } 38% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.08); } }
.blocked-effect { z-index: 8; padding: 4px 7px; border-radius: 8px; background: rgba(103,33,35,.92); border: 1px solid rgba(255,145,139,.66); color: #ffd9d6; font-size: .62rem; font-weight: 900; letter-spacing: .08em; box-shadow: 0 4px 16px rgba(0,0,0,.36); animation: blockedPop .55s ease-out both; }
@keyframes blockedPop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.55); } 28%,72% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-70%) scale(.92); } }
.pause-card { width: min(720px, 100%); max-height: min(88vh, 820px); overflow: auto; }
.pause-heading, .pause-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pause-heading h2 { margin: 5px 0 0; font-size: 2rem; }
.pause-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
.pause-section { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 18px; }
.pause-section-heading { justify-content: flex-start; align-items: flex-start; margin-bottom: 14px; }
.pause-section-heading h3 { margin: 0 0 4px; }
.pause-section-heading p { margin: 0; font-size: .78rem; }
.controls-reference { display: grid; gap: 8px; margin-top: 12px; }
.controls-reference > div { display: grid; grid-template-columns: 88px 1fr; gap: 10px; align-items: baseline; padding: 9px 10px; background: #111b24; border: 1px solid var(--border); border-radius: 10px; }
.controls-reference b { color: #e5edf4; font-size: .78rem; }
.controls-reference span { color: var(--muted); font-size: .76rem; line-height: 1.45; }
.sound-row { display: grid; grid-template-columns: 120px 1fr 48px; gap: 10px; align-items: center; margin: 11px 0; color: var(--muted); font-size: .8rem; }
.sound-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.sound-row output { color: #e7eef6; text-align: right; font-variant-numeric: tabular-nums; }
body.pause-open .game-screen { filter: saturate(.78) brightness(.82); }
body.pause-open .game-screen * { animation-play-state: paused !important; }

@media (max-width: 980px) {
  .board-stage { width: min(88vw, 650px); }
}
@media (max-width: 560px) {
  .pause-actions { grid-template-columns: 1fr; }
  .controls-reference > div { grid-template-columns: 1fr; gap: 4px; }
  .sound-row { grid-template-columns: 1fr 52px; }
  .sound-row input { grid-column: 1 / -1; grid-row: 2; }
  .sound-row output { grid-column: 2; grid-row: 1; }
}