:root {
  color-scheme: dark;
  font-family: 'Noto Sans KR', Pretendard, system-ui, sans-serif;
  font-size: 16px;
  --sea-950: #071d27;
  --sea-900: #103743;
  --sea-800: #20525a;
  --ink: #172226;
  --stone-100: #f6e9cc;
  --stone-200: #dbccaa;
  --stone-400: #b9ab8a;
  --olive-500: #87945d;
  --gold: #eec678;
  --bronze: #a66e3b;
  --coral: #dc6c5f;
  --cyan: #74cad5;
  --focus: #fff0a6;
  --panel: rgba(10, 35, 41, 0.97);
  --line: rgba(238, 227, 202, 0.24);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body {
  background: radial-gradient(circle at 55% 35%, #2a6370 0, var(--sea-900) 45%, var(--sea-950) 100%);
  color: var(--stone-100);
  overscroll-behavior: none;
  touch-action: manipulation;
  word-break: keep-all;
  line-break: strict;
}

button, select { font: inherit; }

button, select {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--stone-100);
  background: #294b52;
}

button { cursor: pointer; font-weight: 700; padding: 0.55rem 0.75rem; }
button:hover:not(:disabled) { filter: brightness(1.12); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: 0.42; }
button:focus-visible, select:focus-visible, summary:focus-visible, canvas:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.title-screen {
  position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto;
  display: flex; align-items: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: linear-gradient(90deg, rgba(6, 29, 38, 0.96) 0%, rgba(9, 40, 47, 0.87) 35%, rgba(16, 51, 54, 0.18) 75%),
    linear-gradient(0deg, rgba(6, 27, 36, 0.82), transparent 50%),
    url('./assets/art/coast-v1.webp') center / cover, #103743;
  isolation: isolate;
}
.title-atmosphere { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.title-atmosphere::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 35% 58% at 73% 45%, rgba(243, 185, 93, 0.32), transparent 78%),
    linear-gradient(180deg, transparent 65%, rgba(4, 24, 32, 0.4));
}
.title-hero { position: absolute; right: clamp(0px, 4vw, 80px); bottom: 2dvh; height: min(89dvh, 830px); width: auto; max-width: none; object-fit: contain; filter: drop-shadow(-12px 18px 18px rgba(4, 25, 30, 0.62)); }
.title-content { position: relative; z-index: 1; width: min(48vw, 590px); margin-left: clamp(1rem, 4vw, 6rem); display: grid; justify-items: start; align-content: center; padding: 1rem 0; }
.title-eyebrow { margin: 0 0 0.75rem; color: #f5d99d; font-size: clamp(0.7rem, 1.5vw, 0.85rem); font-weight: 800; letter-spacing: 0.12em; text-shadow: 0 2px 8px #08242d; }
.title-emblem { width: 62px; height: 62px; overflow: hidden; border: 2px solid var(--gold); border-radius: 50%; background: #304c4b; box-shadow: 0 0 0 5px rgba(11, 34, 40, 0.65), 0 0 28px rgba(228, 173, 91, 0.28); }
.title-emblem img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 52% 15%; }
.title-content h1 { margin: 0.5rem 0 0; color: #ffe5ab; font-size: clamp(3.1rem, 7vw, 5.8rem); font-weight: 800; letter-spacing: -0.09em; line-height: 1.15; text-shadow: 0 4px 0 #593d2a, 0 12px 24px rgba(0, 0, 0, 0.7); }
.title-lead { margin: 0.85rem 0 1.1rem; max-width: 26rem; color: #f3e9d1; font-size: clamp(0.84rem, 1.8vw, 1rem); line-height: 1.65; text-shadow: 0 2px 5px #09232a; }
.title-action { min-width: min(20rem, 88vw); min-height: 56px; padding: 0.7rem 1.4rem; border: 2px solid #f6dcaa; border-radius: 4px; box-shadow: inset 0 1px 0 #fff0c5, 0 5px 0 #754b2e, 0 12px 22px rgba(0, 0, 0, 0.42); font-size: 1.08rem; }
.title-action span { margin-left: 0.45rem; }.title-action:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #754b2e; }
.title-note { margin: 1.2rem 0 0; color: #e0ceb0; font-size: 0.73rem; text-shadow: 0 2px 5px #09232a; }
.pwa-actions { min-height: 44px; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.4rem; margin-top: 0.4rem; color: #e0ceb0; font-size: 0.72rem; }
.pwa-actions button { min-height: 44px; background: rgba(13, 39, 46, 0.92); border-color: var(--bronze); font-size: 0.73rem; }
.training-inner .pwa-actions { margin-top: 0; padding-top: 0.3rem; border-top: 1px solid var(--line); }

.game-shell {
  width: 100%;
  height: 100dvh;
  min-height: 280px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  position: relative;
}

.battle-hud {
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(8.5rem, auto) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.2rem clamp(0.35rem, 1vw, 0.9rem);
  padding: 0.3rem clamp(0.45rem, 1.2vw, 1rem) 0.25rem;
  background: linear-gradient(180deg, #19444c, #0c303b 58%, #08242e);
  border-bottom: 3px solid var(--bronze);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  z-index: 5;
}

.game-mark { display: flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.game-mark strong { font-size: 1.08rem; letter-spacing: -0.04em; }
.helm {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 2px solid #f7d994; border-radius: 50% 50% 38% 38%; background: linear-gradient(#dbab5f, #a66e3b); color: #fff3d2; font-weight: 800;
  box-shadow: inset 0 -4px 0 rgba(78, 55, 25, 0.25);
}
.playtest-tag { color: var(--stone-200); font-size: 0.63rem; letter-spacing: 0.03em; }

.vitals { display: flex; align-items: stretch; justify-content: center; gap: clamp(0.2rem, 0.6vw, 0.5rem); min-width: 0;
  padding: 0.38rem 1rem; background: url('./assets/art/resource-plaque-native-v1.png') center / 100% 100% no-repeat; }
.vital {
  min-width: 62px; padding: 0.18rem 0.45rem; display: grid; grid-template-columns: auto auto; column-gap: 0.28rem;
  align-items: center; justify-content: center; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; line-height: 1.05;
}
.vital b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.vital small { grid-column: 1 / -1; color: var(--stone-400); font-size: 0.65rem; text-align: center; }
.hearts > span { color: var(--coral); }.gold > span { color: var(--gold); }
.round-controls { display: flex; gap: 0.35rem; }
.icon-button { min-width: 44px; padding-inline: 0.6rem; }
.primary-action { color: #261d16; background: linear-gradient(#f9df9f, #d9a85e); border-color: #ffe2a2; }
.secondary-action { color: #d9f6f8; background: #245f69; }
.danger-action { background: #7b3d38; border-color: #cc776d; }

.playfield { min-height: 0; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: radial-gradient(ellipse at 54% 45%, #20535a, #0b2a34 75%); }
.arena-wrap { min-height: 0; min-width: 0; display: grid; place-items: center; position: relative; padding: 0.45rem; overflow: hidden; }
#battle-canvas {
  width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 24 / 13;
  display: block;
  border: 0;
  outline: 3px solid var(--bronze);
  border-radius: 4px;
  box-shadow: 0 0 0 6px rgba(237, 203, 138, 0.1), 0 18px 42px rgba(0, 0, 0, 0.5);
  touch-action: none;
}
.deck-context { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.45rem; min-width: 0; padding: 0.12rem 0.35rem; background: rgba(5, 26, 34, 0.62); border-top: 1px solid rgba(238, 198, 120, 0.18); }
.arena-caption { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; flex: none; font-size: 0.67rem; font-weight: 700; line-height: 1.3; }
.arena-caption span { display: inline-block; }
#map-caption { color: var(--stone-200); }
#phase-caption { color: var(--gold); }
.wave-preview {
  min-width: 0; padding: 0 0 0 0.5rem; border-left: 2px solid var(--gold);
  color: var(--stone-100); font-size: 0.65rem; line-height: 1.25; overflow-wrap: anywhere;
}
.toast {
  position: absolute; left: 50%; bottom: 0.75rem; transform: translateX(-50%); max-width: 86%;
  padding: 0.5rem 0.8rem; border-radius: 9px; background: rgba(15, 28, 31, 0.94); border: 1px solid var(--coral);
  font-size: 0.82rem; text-align: center; z-index: 8;
}

.battle-controls { min-width: 0; min-height: 86px; display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding: 0.25rem clamp(0.75rem, 2vw, 2rem) 0.45rem; border-top: 1px solid rgba(238, 198, 120, 0.28); background: linear-gradient(180deg, rgba(7, 29, 39, 0.2), rgba(7, 29, 39, 0.94)); }
.battle-controls button { border-color: rgba(238, 198, 120, 0.7); box-shadow: inset 0 1px 0 rgba(255, 230, 175, 0.26), 0 4px 10px rgba(0, 0, 0, 0.34); }
.battle-controls button:disabled { opacity: 0.72; }
.battle-controls button[aria-pressed="true"], #rally-button[aria-pressed="true"] { border-color: var(--focus); box-shadow: inset 0 0 0 2px rgba(255, 240, 166, 0.36), 0 0 10px rgba(255, 240, 166, 0.25); }
.hero-control { min-width: 156px; min-height: 76px; display: grid; grid-template-columns: 56px auto; grid-template-rows: 1fr 1fr; align-items: center; gap: 0 0.5rem; padding: 0.3rem 0.7rem 0.3rem 0.3rem; text-align: left; background: linear-gradient(140deg, #695334, #243f42 72%); }
.hero-control .control-name { align-self: end; font-size: 0.82rem; white-space: nowrap; }
.hero-control small { align-self: start; color: var(--stone-200); font-size: 0.69rem; }
.hero-control .ability-glyph { grid-row: 1 / 3; width: 56px; height: 56px; border: 3px solid #e4bb73; box-shadow: inset 0 0 0 3px rgba(8, 37, 43, 0.5); font: 700 2.1rem Georgia, serif; }
.map-switch, .site-picker, .site-list, .ability-grid, .ability-grid button, .ability-grid button > span { min-width: 0; max-width: 100%; }
.map-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
.map-switch button[aria-pressed="true"] { background: var(--olive-500); color: #111d1e; border-color: #d7e091; }
.site-picker { display: grid; gap: 0.25rem; }
.site-picker label { color: var(--gold); font-size: 0.78rem; font-weight: 800; }
.site-picker select { width: 100%; padding: 0 0.6rem; background: #203f46; }
.site-picker span { color: var(--stone-400); font-size: 0.67rem; line-height: 1.35; }
.site-list { display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 0.25rem; }
.site-list button { min-width: 44px; padding-inline: 0.25rem; }
.site-list button[aria-pressed="true"] { color: var(--ink); background: var(--gold); border-color: #ffe4a4; }
.ability-grid { display: flex; gap: 0.5rem; }
.ability-grid button { width: 76px; min-width: 76px; height: 76px; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem; padding: 0.2rem; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #38636a, #14333c 80%); }
.ability-grid button > span:nth-child(2) { font-size: 0.68rem; white-space: nowrap; }
.ability-grid small { color: var(--stone-200); font-size: 0.57rem; line-height: 1; white-space: nowrap; }
.ability-grid button:disabled small { color: var(--stone-200); }
.ability-glyph {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ink); font-weight: 800; --cooldown-progress: 0; --glyph-fill: var(--stone-200);
  background: conic-gradient(from 0deg, rgba(9, 25, 29, 0.82) calc(var(--cooldown-progress) * 1turn), transparent 0), var(--glyph-fill);
}
.hero-glyph { --glyph-fill: var(--gold); }.reinforce-glyph { --glyph-fill: var(--cyan); }.area-glyph { --glyph-fill: #c3a0e8; }.retry-glyph { --glyph-fill: var(--stone-200); }
.training-settings { position: relative; min-width: 82px; }
.training-settings summary { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0 0.35rem; border: 1px solid rgba(238, 198, 120, 0.38); border-radius: 5px; cursor: pointer; color: var(--stone-200); font-size: 0.7rem; font-weight: 700; list-style: none; }
.training-settings summary::-webkit-details-marker { display: none; }
.training-settings summary::after { content: '⌄'; font-size: 1.2rem; }
.training-settings[open] summary::after { transform: rotate(180deg); }
.training-inner { display: grid; gap: 0.55rem; padding: 0.7rem; }
.training-settings[open] .training-inner { position: absolute; right: 0; top: calc(100% + 0.35rem); width: min(320px, 90vw); max-height: min(70dvh, 520px); overflow: auto; z-index: 12; background: var(--panel); border: 1px solid var(--bronze); border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); }
.training-inner > p:first-child { margin: 0; color: var(--stone-200); font-size: 0.67rem; line-height: 1.4; }
.restart-action { width: 100%; background: #423a34; border-color: #9b7355; font-size: 0.75rem; }
.boundary-note { margin: 0; padding-top: 0.4rem; color: var(--stone-400); font-size: 0.68rem; line-height: 1.45; border-top: 1px solid var(--line); }
.boundary-note span { color: var(--coral); }

.build-panel {
  position: absolute; left: 50%; bottom: max(0.7rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(670px, calc(100% - 1.2rem)); max-height: calc(100dvh - 60px); padding: 0.65rem; z-index: 12;
  background: var(--panel); border: 1px solid rgba(242, 198, 109, 0.55); border-radius: 14px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45); overflow: auto;
}
.build-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.45rem; }
.build-heading > div { display: flex; align-items: baseline; gap: 0.5rem; }
.build-heading small { color: var(--stone-400); }.build-heading strong { color: var(--gold); font-size: 1.15rem; }
.tower-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.42rem; }
.tower-choices button { min-width: 0; min-height: 78px; display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; text-align: left; padding: 0.4rem; }
.tower-choices b { font-size: 0.78rem; }.tower-choices small { grid-column: 2; color: var(--gold); font-size: 0.68rem; }
.tower-icon { grid-row: 1 / 3; width: 31px; height: 31px; border-radius: 8px; display: grid; place-items: center; color: var(--ink); }
.tower-icon.archer { background: #82a780; }.tower-icon.barracks { background: var(--cyan); }.tower-icon.magic { background: #c0a4e0; }.tower-icon.artillery { background: var(--coral); }
.built-actions { display: grid; grid-template-columns: 1fr repeat(3, auto); gap: 0.45rem; align-items: center; }
.built-actions p { margin: 0; font-size: 0.78rem; }

.target-bar {
  position: absolute; left: 50%; bottom: max(0.65rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(680px, calc(100% - 1rem)); min-height: 64px; padding: 0.55rem; z-index: 14;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.4rem;
  border: 1px solid var(--cyan); border-radius: 14px; background: var(--panel); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.48);
}
.target-bar > div { display: grid; }.target-bar strong { color: var(--cyan); }.target-bar span { color: var(--stone-400); font-size: 0.72rem; }

.confirm-dialog { color: var(--stone-100); background: var(--panel); border: 1px solid var(--coral); border-radius: 14px; padding: 0; max-width: min(390px, calc(100% - 2rem)); }
.confirm-dialog::backdrop { background: rgba(7, 17, 20, 0.72); }
.confirm-dialog form { padding: 1rem; }.confirm-dialog strong { color: var(--gold); }.confirm-dialog p { line-height: 1.55; }
.confirm-dialog form > div { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.result-panel {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); min-width: 260px; z-index: 15;
  padding: 1rem; display: grid; gap: 0.65rem; text-align: center; border-radius: 14px;
  background: rgba(13, 31, 36, 0.96); border: 1px solid var(--gold); box-shadow: 0 14px 44px rgba(0, 0, 0, 0.54);
}
.result-panel[hidden], .target-bar[hidden] { display: none; }
.result-panel strong { color: var(--gold); font-size: 1.35rem; }

.fatal-error { max-width: 560px; margin: 12vh auto; padding: 1.4rem; border: 1px solid var(--coral); border-radius: 14px; background: var(--panel); text-align: center; }
.fatal-error button { margin-top: 0.7rem; }
.print-summary { display: none; }
.rotate-guidance { display: none; }

@media (max-aspect-ratio: 1.549/1) {
  .title-content { width: min(46vw, 520px); margin-left: clamp(0.5rem, 3vw, 2rem); }
  .title-hero { right: -2%; height: min(78dvh, 630px); }
  .game-mark .playtest-tag { display: none; }
  .battle-controls { min-height: 78px; }
  .hero-control { min-height: 70px; }
  .ability-grid button { width: 70px; min-width: 70px; height: 70px; min-height: 70px; }
}

@media (max-height: 470px) {
  .title-content { width: min(50vw, 460px); margin-left: clamp(0.35rem, 2vw, 1.2rem); }
  .title-hero { right: 1%; height: 94dvh; }
  .battle-hud { min-height: 50px; padding-block: 0.1rem; }
  .game-mark strong { font-size: 0.9rem; }.playtest-tag { display: none; }
  .vital { min-width: 52px; padding-inline: 0.2rem; }.vital small { display: none; }
  .round-controls button { min-height: 44px; padding-inline: 0.55rem; }
  .arena-caption { font-size: 0.61rem; }
  .wave-preview { font-size: 0.61rem; }
  .title-content { padding-block: 0.5rem; }
  .title-eyebrow { margin-bottom: 0.4rem; }
  .title-emblem { width: 42px; height: 42px; }.title-content h1 { font-size: 2.8rem; }
  .title-lead { margin: 0.45rem 0 0.6rem; }.title-note { margin: 0.55rem 0 0; }
}

@media (max-height: 470px) and (max-width: 950px) and (min-aspect-ratio: 1.55/1) {
  .playfield { grid-template-columns: 76px minmax(0, 1fr) 120px; grid-template-rows: minmax(0, 1fr); }
  .arena-wrap { grid-column: 2; grid-row: 1; padding: 0.25rem; }
  .battle-controls { grid-column: 1 / -1; grid-row: 1; min-height: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr) 120px; align-items: end; gap: 0; padding: 0 0.25rem 0.4rem; border: 0; background: none; pointer-events: none; }
  .battle-controls button { pointer-events: auto; }
  .hero-control { grid-column: 1; width: 70px; min-width: 70px; min-height: 94px; display: flex; flex-direction: column; justify-content: center; gap: 0.12rem; padding: 0.2rem; text-align: center; }
  .hero-control .ability-glyph { width: 44px; height: 44px; font-size: 1.65rem; }
  .hero-control .control-name { align-self: center; font-size: 0.64rem; }
  .hero-control small { align-self: center; font-size: 0.59rem; }
  .ability-grid { grid-column: 3; flex-direction: column; align-items: end; justify-content: end; gap: 0.35rem; }
  .ability-grid button { width: 70px; min-width: 70px; height: 70px; min-height: 70px; }
  .ability-glyph { width: 27px; height: 27px; }
}

@media (max-width: 760px) and (max-height: 470px) {
  .game-mark strong { display: none; }
  .battle-hud { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .round-controls .secondary-action { width: 48px; font-size: 0; }
  .round-controls .secondary-action::after { content: '＋'; font-size: 1rem; }
}

@media (max-width: 599px) and (max-aspect-ratio: 0.799/1) {
  .title-screen, .game-shell { visibility: hidden; }
  .rotate-guidance { position: fixed; inset: 0; z-index: 40; display: grid; place-content: center; justify-items: center; gap: 0.5rem; padding: 1.5rem; text-align: center; background: #0b2933; color: var(--stone-100); }
  .rotate-guidance span { color: var(--gold); font-size: 3rem; line-height: 1; }
  .rotate-guidance strong { font-size: 1.25rem; }
  .rotate-guidance p { margin: 0; color: var(--stone-200); font-size: 0.85rem; }
}

@media print {
  html, body { overflow: visible; height: auto; background: white; color: #172226; }
  .game-shell, .title-screen, .rotate-guidance, .fatal-error { display: none !important; }
  .print-summary { display: block; margin: 18mm; font-size: 12pt; line-height: 1.7; }
  .print-summary h1, .print-summary p { break-inside: avoid; }
}

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

.hero-control .hero-glyph { overflow: hidden; }
.hero-control .hero-glyph img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Persistent selection information belongs to the HUD, never over a road. */
.selection-stats { grid-column: 1 / -1; min-width: 0; display: grid; grid-template-columns: minmax(135px, auto) minmax(0, 1fr) 44px; gap: 0.25rem 0.65rem; align-items: center; padding: 0.25rem 0.4rem; border-top: 1px solid var(--bronze); background: rgba(5, 26, 34, 0.8); }
.selection-heading { display: grid; gap: 0.1rem; }
.selection-heading strong { color: var(--gold); font-size: 0.75rem; }
.selection-heading small { color: var(--stone-200); font-size: 0.6rem; }
.selection-stats dl { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; margin: 0; min-width: 0; }
.selection-stats dl > div { display: grid; gap: 0.05rem; }
.selection-stats dt { font-size: 0.59rem; color: var(--stone-200); }
.selection-stats dd { margin: 0; font-size: 0.73rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.selection-stats button { min-width: 44px; padding: 0; }
.tower-choices button[aria-pressed="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.build-confirm-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.45rem; }
.build-confirm-row > span { color: var(--stone-200); font-size: 0.68rem; }
.build-confirm-row button { flex: none; }
@media (max-width: 950px) {
  .selection-stats { grid-template-columns: minmax(110px, 0.7fr) minmax(0, 2fr) 44px; gap: 0.2rem 0.35rem; }
  .selection-stats dl { gap: 0.15rem 0.45rem; }
  .selection-stats dd { font-size: 0.67rem; }
  .selection-heading strong { font-size: 0.67rem; }
  .selection-heading small { font-size: 0.55rem; }
  .built-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .built-actions p { grid-column: 1 / -1; }
  .built-actions button { min-width: 0; padding-inline: 0.25rem; font-size: 0.7rem; }
  .tower-choices button { min-height: 56px; padding: 0.25rem; }
}

/* Stable HUD band: selection never participates in board sizing. */
.deck-context { position: relative; height: 44px; min-height: 44px; }
.selection-stats { position: absolute; inset: 0; display: flex; gap: 12px; border: 0; padding: 0 48px 0 8px; background: #092b34; }
.selection-heading { flex: none; }
.selection-heading strong, .selection-stats dt, .selection-stats dd { font-size: 12px; }
.selection-heading small { display: none; }
.selection-stats dl { flex-wrap: nowrap; overflow-x: auto; gap: 12px; white-space: nowrap; }
.selection-stats dl > div { display: flex; align-items: center; gap: 4px; }
.selection-stats button { position: absolute; right: 0; top: 0; height: 44px; }
.deck-context.has-build .selection-stats { padding-right: 260px; }
.deck-context.has-build .selection-stats > button { display: none; }
.build-panel { position: fixed; inset: 0; width: auto; padding: 0; transform: none; background: none; border: 0; box-shadow: none; overflow: visible; pointer-events: none; }
.build-panel button { pointer-events: auto; }
.build-heading { position: fixed; top: var(--hud-top); right: var(--hud-right); height: 44px; margin: 0; }
.build-heading > div { display: none; }
.tower-choices { position: fixed; left: var(--site-x); top: var(--site-y); display: block; width: 0; height: 0; }
.tower-choices button { position: absolute; width: 64px; height: 60px; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 2px; border-radius: 22px; border: 2px solid #c8a76b; background: radial-gradient(ellipse at 40% 25%, #466064, #152d34); box-shadow: 0 3px 5px #071d27b0, inset 0 1px #f1d6a3; }
.tower-choices button:nth-child(1) { left: -32px; top: -82px; }
.tower-choices button:nth-child(2) { left: 24px; top: -30px; }
.tower-choices button:nth-child(3) { left: -32px; top: 22px; }
.tower-choices button:nth-child(4) { left: -88px; top: -30px; }
.tower-choices .tower-icon { display: none; }
.tower-choices b, .tower-choices small { font-size: 12px; }
.build-confirm-row, .built-actions { position: fixed; top: var(--hud-top); right: calc(var(--hud-right) + 44px); display: flex; align-items: center; height: 44px; margin: 0; gap: 4px; background: #092b34; pointer-events: auto; }
.build-confirm-row > span, .built-actions > p { display: none; }
.build-confirm-row button, .built-actions button { height: 44px; min-height: 44px; padding: 4px 8px; font-size: 12px; }
#battle-canvas { aspect-ratio: 24 / 13.5; }

/* Viewport-fit battlefield and accepted HUD-A overlay boxes. */
.game-shell { display:block; padding:0; }
.playfield, .arena-wrap { position:absolute; inset:0; width:100%; height:100%; display:grid; place-items:center; padding:0; }
.arena-wrap { grid-column:auto!important; grid-row:auto!important; overflow:hidden; }
#battle-canvas { max-width:none; max-height:none; outline:0; border:0; }
.battle-hud, .round-controls, .battle-controls, .ability-grid { display:contents!important; }
.game-mark, .arena-caption, .wave-preview { display:none; }
.vitals { z-index:6; display:flex; justify-content:center; align-items:flex-start; gap:12px; padding:5px 12px 0; background:url('./assets/art/resource-plaque-v1.png') center/100% 100% no-repeat; border:0; }
.vitals .vital { font-size:13px; }
.vital small { display:none; }
.deck-context { position:fixed; left:var(--plaque-x); top:calc(var(--plaque-y) + var(--plaque-h) - 22px); width:var(--plaque-w); height:22px; min-height:0; z-index:7; border:0; padding:0; background:none; }
.selection-stats { background:none; padding:0 12px!important; gap:8px; justify-content:center; }
.selection-heading strong, .selection-stats dt, .selection-stats dd { font-size:12px; }
.selection-heading { max-width:120px; overflow:hidden; white-space:nowrap; }
.selection-stats dl { gap:8px; }
.selection-stats > button { display:none; }
#hero-button,#reinforce-button,#area-button,#start-button,#early-button,#pause-button { z-index:8; margin:0; padding:4px; border:0; box-shadow:none; min-width:44px; min-height:44px; font-size:12px; }
#reinforce-button,#area-button,#start-button,#early-button,.tower-choices button { background:url('./assets/art/ability-medallion-area-v1.png') center/100% 100% no-repeat; border:0; border-radius:50%; }
#hero-button { background:url('./assets/art/hero-portrait-frame-v2.png') center/100% 100% no-repeat; }
#hero-button .ability-glyph { width:65%; height:65%; margin:auto; border:0; box-shadow:none; }
#hero-button .control-name,#hero-state { display:none; }
#hero-hp { z-index:9; accent-color:#81bc63; }
#reinforce-button .ability-glyph,#area-button .ability-glyph { width:20px; height:20px; font-size:18px; border:0; background:none; box-shadow:none; }
#reinforce-button small,#area-button small { font-size:12px; }
#start-button,#early-button { line-height:1.1; padding:12px; }
.training-settings { position:fixed; left:4px; top:8px; z-index:9; width:68px; }
.training-settings > summary { font-size:12px; min-height:44px; padding:4px; }
.build-heading { top:auto!important; bottom:2px; right:76px!important; }
.build-confirm-row,.built-actions { top:auto!important; bottom:2px; right:120px!important; height:44px; background:#092b34d9; }
.tower-choices button { width:64px; height:64px; box-shadow:none; }
.game-shell[data-hud="fold"] .vitals { padding-top:26px; }
.game-shell[data-hud="fold"] .deck-context { top:calc(var(--plaque-y) + 50px); }
.game-shell[data-hud="fold"] .training-settings { left:auto; right:8px; top:58px; }
.game-shell[data-hud="fold"] .build-confirm-row,.game-shell[data-hud="fold"] .built-actions { bottom:12px; right:270px!important; }
.game-shell[data-hud="fold"] .build-heading { bottom:12px; right:224px!important; }
/* Keep the generated medallion's bright centre behind readable labels. */
#reinforce-button,#area-button,#start-button,#early-button,.tower-choices button { background-image:radial-gradient(circle,rgba(7,29,39,.94) 0 49%,transparent 53%),url('./assets/art/ability-medallion-area-v1.png'); color:#fff0c9; text-shadow:0 1px 2px #071d27; }
.selection-stats { background:rgba(7,29,39,.88); border-radius:4px; }
.selection-stats dl > div:nth-child(n+4) { display:none; }
.selection-stats dl { overflow-x:auto; }
.training-settings { width:68px; }
.training-settings > summary { width:68px; box-sizing:border-box; }