:root {
  color-scheme: dark;
  --ink: #e8efe8;
  --muted: #84938a;
  --gold: #eebe67;
  --gold-light: #ffe5a5;
  --jade: #6ed6a2;
  --danger: #ef766f;
  --panel: rgba(10, 18, 16, 0.96);
  --line: rgba(209, 225, 205, 0.105);
  --frame: #101b17;
  --display: Georgia, "Times New Roman", serif;
  --body: "Trebuchet MS", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #09120f; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  background:
    radial-gradient(ellipse at 12% 2%, rgba(18, 97, 172, 0.24), transparent 36%),
    radial-gradient(ellipse at 86% 95%, rgba(43, 108, 226, 0.12), transparent 34%),
    linear-gradient(160deg, #0a1b33, #060b16 57%, #030812);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; }
button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

.game-shell { width: min(1120px, calc(100% - 42px)); margin: 0 auto; padding: 23px 0 26px; }
.masthead { min-height: 69px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.brand-lockup { display: flex; align-items: center; gap: 14px; }
.brand-gem { display: grid; width: 43px; height: 43px; place-items: center; color: var(--gold-light); font-size: 28px; border: 1px solid rgba(235, 190, 103, .28); transform: rotate(45deg); background: rgba(238, 190, 103, .07); }
.brand-gem::first-letter { transform: rotate(-45deg); }
.eyebrow { margin: 0 0 4px; color: #839286; font-size: 8px; font-weight: 700; letter-spacing: 2.1px; }
h1 { margin: 0; font-family: var(--display); font-size: clamp(20px, 2.4vw, 27px); line-height: 1; letter-spacing: 1.5px; font-weight: 700; }
h1 span { color: var(--gold); }
.masthead-actions { display: flex; align-items: center; gap: 9px; }
.player-pill { display: inline-flex; height: 35px; padding: 0 12px; align-items: center; gap: 8px; color: #c6d1c8; font-size: 11px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,255,255,.025); }
.player-indicator, .footer-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 12px rgba(110, 214, 162, .8); }
.icon-button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--gold-light); background: rgba(255,255,255,.025); cursor: pointer; transition: background .18s, border-color .18s, transform .18s; }
.icon-button:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(235, 190, 103, .5); background: rgba(235, 190, 103, .09); }
.icon-button:disabled { color: #758078; cursor: default; }
.icon-button.is-muted { color: #839286; }

.arena-card { overflow: hidden; border: 1px solid rgba(175, 193, 169, .16); background: var(--panel); border-radius: 10px; box-shadow: 0 30px 100px rgba(0,0,0,.38), 0 1px 0 rgba(235,190,103,.05) inset; }
.battle-hud { min-height: 73px; padding: 15px 23px 13px; display: grid; grid-template-columns: minmax(190px, 1.4fr) repeat(3, minmax(74px, .55fr)); gap: 18px; align-items: center; background: linear-gradient(90deg, rgba(16, 29, 24, .98), rgba(12, 19, 17, .98)); }
.hud-health { max-width: 294px; }
.hud-label-row { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 9px; letter-spacing: .7px; color: #a6b4a8; }
.hud-label-row strong { color: var(--ink); font-size: 10px; white-space: nowrap; }
.health-track { width: 100%; height: 8px; overflow: hidden; border-radius: 8px; background: #27352e; box-shadow: 0 1px 2px rgba(0,0,0,.5) inset; }
.health-track > span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #45a969, #8be1a0); box-shadow: 0 0 17px rgba(97, 220, 126, .45); transition: width .22s ease, background .22s; }
.health-track > span.is-danger { background: linear-gradient(90deg, #bb4443, #f58568); box-shadow: 0 0 16px rgba(241, 101, 83, .46); }
.hud-stat { min-width: 0; display: grid; gap: 4px; justify-items: center; }
.hud-stat span { color: #88998c; font-size: 9px; font-weight: 700; letter-spacing: 1.25px; }
.hud-stat strong { color: #e9efe7; font-family: var(--display); font-size: 23px; line-height: .97; font-variant-numeric: tabular-nums; }
.hud-gold strong { color: var(--gold-light); }

.game-stage { position: relative; width: 100%; aspect-ratio: 16 / 8.35; overflow: hidden; background: #111c18; touch-action: manipulation; }
#game-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: manipulation; }
.game-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 94px rgba(0,0,0,.43), inset 0 -16px 50px rgba(0,0,0,.22); }
.battle-telemetry { position: absolute; z-index: 2; top: 13px; right: 14px; left: 14px; display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; }
.wave-progress-panel, .threat-panel { border: 1px solid rgba(231, 225, 192, .17); background: rgba(8, 15, 13, .79); box-shadow: 0 7px 25px rgba(0, 0, 0, .18); backdrop-filter: blur(8px); }
.wave-progress-panel { width: 148px; padding: 8px 9px 9px; border-radius: 5px; }
.telemetry-label { display: flex; justify-content: space-between; gap: 8px; color: #b8c2b7; font-size: 8px; font-weight: 700; letter-spacing: .9px; }
.telemetry-label strong { color: var(--gold-light); font-size: 9px; }
.wave-progress-track { display: block; height: 4px; margin-top: 7px; overflow: hidden; border-radius: 6px; background: rgba(228, 238, 216, .16); }
.wave-progress-track i { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8acfa5, #f3d08a); box-shadow: 0 0 11px rgba(237, 197, 123, .64); transition: width .18s linear; }
.threat-panel { display: inline-flex; min-height: 31px; padding: 0 9px; align-items: center; gap: 7px; border-radius: 20px; color: #e0e4db; font-size: 8px; font-weight: 700; letter-spacing: .65px; }
.threat-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff8174; box-shadow: 0 0 12px rgba(255, 102, 96, .84); animation: threat-pulse 1s ease-in-out infinite; }
@keyframes threat-pulse { 50% { transform: scale(1.35); opacity: .65; } }
.combo-banner { position: absolute; z-index: 2; top: 64px; right: 17px; display: grid; justify-items: end; gap: 1px; opacity: 0; pointer-events: none; transform: translateY(-6px) scale(.9); transition: transform .2s ease, opacity .2s ease; }
.combo-banner.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.combo-banner strong { color: #ffe4a0; font-family: var(--display); font-size: 31px; line-height: .95; text-shadow: 0 2px 15px rgba(8, 12, 10, .88); }
.combo-banner span { color: #ecf1e8; font-size: 8px; font-weight: 700; letter-spacing: 1.2px; text-shadow: 0 1px 8px #08100d; }
.storm-button { position: absolute; z-index: 3; right: 13px; bottom: 12px; isolation: isolate; display: flex; width: 204px; aspect-ratio: 15 / 4; padding: 0 18px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 8px; color: #fff4ce; background: transparent; filter: drop-shadow(0 5px 8px #0009); cursor: pointer; transition: transform .18s, filter .18s; }
.storm-button:disabled { cursor: default; }
.storm-button.is-ready { filter: brightness(1.15) drop-shadow(0 0 12px #ffc55766); }
.storm-button.is-ready:hover { transform: translateY(-2px); }
.storm-button.is-cooling::before, .storm-button:disabled::before { filter: saturate(.55) brightness(.65); }
.storm-button.is-cooling .storm-charge { filter: saturate(.45); opacity: .55; }
.storm-charge-track { position: absolute; left: 12%; right: 12%; bottom: 15%; height: 3px; overflow: hidden; border-radius: 2px; background: #0009; }
.storm-charge { position: absolute; inset: 0 auto 0 0; width: 25%; background: linear-gradient(90deg, #bc7e23, #ffe293); transition: width .22s ease; }
.storm-button.is-ready .storm-charge { background: #ffe293; animation: storm-ready 1.3s ease-in-out infinite; }
@keyframes storm-ready { 50% { opacity: .67; } }
.storm-sigil, .storm-copy, .storm-button kbd { position: relative; z-index: 1; }
.storm-sigil { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border: 1px solid #f1cc6f; border-radius: 50%; color: #fff2ad; background: radial-gradient(circle at 35% 25%, #92661d, #261600 75%); box-shadow: inset 0 0 0 2px #37250a, 0 0 7px #f4c95b44; }
.storm-sigil svg { width: 19px; height: 19px; fill: currentColor; }
.storm-copy { display: grid; gap: 3px; text-align: center; padding-bottom: 3px; text-shadow: 0 1px 3px #000; }
.storm-copy strong { font-family: var(--display); font-size: 11px; letter-spacing: .2px; }
.storm-copy small { color: #ead7ad; font-size: 7px; letter-spacing: .15px; }
.storm-button kbd { margin-left: auto; font-size: 8px; }
.intro-overlay.is-visible ~ .storm-button { visibility: hidden; }
.wave-banner { position: absolute; z-index: 3; top: 14%; left: 50%; transform: translate(-50%, -8px); pointer-events: none; opacity: 0; transition: opacity .28s, transform .28s; }
.wave-banner.is-visible { opacity: 1; transform: translate(-50%, 0); }
.wave-banner span { display: block; padding: 8px 19px; color: var(--gold-light); border: 1px solid rgba(255, 220, 135, .32); background: rgba(10, 16, 14, .81); font-family: var(--display); font-size: 16px; letter-spacing: 2px; }
.wave-banner.is-boss span { color: #ffb2a5; border-color: rgba(255, 106, 83, .48); background: rgba(43, 11, 12, .88); }

.screen-overlay { position: absolute; z-index: 4; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; opacity: 0; pointer-events: none; transition: opacity .24s ease; background: rgba(6, 11, 10, .49); backdrop-filter: blur(2px); }
.screen-overlay.is-visible { opacity: 1; pointer-events: auto; }
.overlay-panel { width: min(490px, 94%); padding: 30px 34px 26px; text-align: center; border: 1px solid rgba(236, 208, 143, .24); border-radius: 4px; background: linear-gradient(145deg, rgba(14, 25, 21, .94), rgba(8, 14, 12, .97)); box-shadow: 0 18px 80px rgba(0,0,0,.48); }
.kicker { margin: 0 0 12px; color: var(--gold); font-size: 9px; font-weight: 700; letter-spacing: 2.9px; }
.kicker > span { display: inline-block; width: 18px; height: 1px; margin: 0 7px 3px; background: rgba(238,190,103,.48); }
.overlay-panel h2 { margin: 0; font-family: var(--display); font-size: clamp(31px, 5.2vw, 50px); line-height: .98; letter-spacing: .9px; }
.overlay-panel h2 em { color: var(--gold-light); font-style: normal; }
.overlay-description { max-width: 348px; margin: 13px auto 20px; color: #aab7af; font-size: 12px; line-height: 1.7; }
.primary-button { position: relative; isolation: isolate; width: min(296px, 100%); aspect-ratio: 15 / 4; min-height: 48px; padding: 0 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; color: #fff6d7; background: transparent; font-family: var(--display); font-size: 13px; font-weight: 700; line-height: 1.1; letter-spacing: .45px; text-shadow: 0 2px 3px #000; cursor: pointer; filter: drop-shadow(0 4px 9px #0009); transition: transform .16s, filter .16s; }
/* Reuse the gold card's inset action bar (x=1774, y=432, w=360, h=96).
   The matching 15:4 aspect ratio preserves its bevels without stretching. */
.primary-button::before, .storm-button::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; clip-path: polygon(5% 0, 95% 0, 100% 18%, 100% 82%, 95% 100%, 5% 100%, 0 82%, 0 18%); background: url("assets/upgrade-cards-premium-v1.png") 97.9029% 68.7898% / 603.3333% 754.1667% no-repeat; }
.primary-button:hover { transform: translateY(-2px); filter: brightness(1.09); }
.primary-button:active, .storm-button:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.primary-button span:last-child { position: absolute; right: 9%; font-size: 20px; line-height: 1; }
.intro-features { margin: 16px -10px 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 14px; color: #a7b3aa; font-size: 8px; letter-spacing: .42px; }
.local-best { margin: 14px 0 0; color: #7f9184; font-size: 8px; letter-spacing: 1px; }
.local-best strong { margin-left: 6px; color: var(--gold-light); font-size: 11px; }
.pause-panel h2, .result-panel h2 { font-size: clamp(25px, 4vw, 36px); }
.result-panel { width: min(460px, 96%); padding: 23px 30px; }
.result-panel .kicker { margin-bottom: 9px; }
.final-score { margin: 10px 0 1px; color: var(--gold-light); font-family: var(--display); font-size: clamp(38px, 7vw, 60px); line-height: 1; font-variant-numeric: tabular-nums; }
.final-score-label { margin: 0; color: #91a095; font-size: 8px; letter-spacing: 2px; }
.result-stats { max-width: 330px; margin: 17px auto 13px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-stats > div { display: grid; gap: 3px; padding: 10px 2px; }
.result-stats strong { color: #eff2ea; font-size: 16px; }
.result-stats span { color: #94a396; font-size: 8px; letter-spacing: .75px; }
.save-status { min-height: 17px; margin: 8px 0 12px; color: #b7c4b9; font-size: 11px; }
.save-status.is-success { color: var(--jade); }
.save-status.is-error { color: #ffaba0; }
.save-status a { color: var(--gold-light); }

.upgrade-dock { padding: 16px 12px 12px; background: radial-gradient(ellipse at 48% 0, rgba(64, 83, 63, .18), transparent 62%), linear-gradient(175deg, rgba(14, 22, 19, .99), rgba(7, 12, 11, 1)); }
.dock-heading { margin: 0 0 10px; display: flex; justify-content: space-between; color: #edf2e7; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; }
.dock-heading span:last-child { color: #a4b2a3; font-size: 8px; }
.upgrade-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.upgrade-card {
  --accent-rgb: 223, 188, 115;
  --sprite-x: 0%;
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  min-width: 0;
  padding: 0;
  aspect-ratio: 434.4 / 438;
  border: 0;
  color: #fff7df;
  background: transparent;
  text-align: center;
  cursor: pointer;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .55));
  transition: transform .16s ease, filter .16s ease;
}
/* Five equal horizontal cells; crop only the atlas's transparent vertical margins.
   The centered emblems and complete frame silhouettes stay inside each button. */
.upgrade-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: url("assets/upgrade-cards-premium-v1.png");
  background-repeat: no-repeat;
  background-size: 500% 165.2968%;
  background-position: var(--sprite-x) 53.14685%;
}
.health-upgrade { --accent-rgb: 67, 218, 108; --sprite-x: 0%; }
.damage-upgrade { --accent-rgb: 247, 119, 48; --sprite-x: 25%; }
.speed-upgrade { --accent-rgb: 34, 164, 246; --sprite-x: 50%; }
.range-upgrade { --accent-rgb: 158, 80, 244; --sprite-x: 75%; }
.spell-upgrade { --accent-rgb: 250, 188, 34; --sprite-x: 100%; }
.upgrade-medallion { display: none; } /* The illustrated atlas supplies the emblems. */
.upgrade-level {
  position: absolute;
  top: 20.55%;
  right: 6.2%;
  width: 18.65%;
  height: 12.55%;
  display: grid;
  place-items: center;
  color: #fff5d7;
  font-family: var(--body);
  font-size: clamp(8px, 6cqw, 13px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 3px #000;
}
.upgrade-copy {
  position: absolute;
  top: 43%;
  right: 8%;
  left: 8%;
  height: 22%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.upgrade-copy strong {
  color: #fff7df;
  font-family: var(--display);
  font-size: clamp(9px, 7.4cqw, 16px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.2px;
  white-space: nowrap;
  text-shadow: 0 2px 3px #000, 0 0 5px #000;
}
.upgrade-copy small {
  color: #e0e9e4;
  font-size: clamp(7px, 4.7cqw, 11px);
  line-height: 1.15;
  white-space: nowrap;
  text-shadow: 0 1px 3px #000;
}
.upgrade-action {
  position: absolute;
  top: 65.5%;
  left: 10%;
  right: 10%;
  height: 19.2%;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff9e6;
  font-family: var(--display);
  font-size: clamp(9px, 6.7cqw, 15px);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 2px 3px #000;
}
.upgrade-cost {
  color: #fff2bd;
  font-family: var(--display);
  font-size: clamp(9px, 6.7cqw, 15px);
  font-weight: 900;
  white-space: nowrap;
  text-shadow: 0 1px 3px #000;
}
.upgrade-action > span { display: inline-flex; align-items: center; height: 100%; line-height: 1; }
.upgrade-card:disabled:not(.is-max) { cursor: default; }
.upgrade-card:disabled:not(.is-max)::before { filter: saturate(.65) brightness(.72); }
.upgrade-card.is-affordable { filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)) drop-shadow(0 0 5px rgba(var(--accent-rgb), .22)); }
.upgrade-card:hover:not(:disabled) { z-index: 2; transform: translateY(-2px); filter: brightness(1.12) drop-shadow(0 6px 9px rgba(var(--accent-rgb), .3)); }
.upgrade-card:active:not(:disabled) { transform: translateY(1px) scale(.985); filter: brightness(1.2); }
.upgrade-card:focus-visible { z-index: 3; outline: 2px solid #fff0ae; outline-offset: 2px; border-radius: 9px; }
.upgrade-card.is-max { cursor: default; }
.upgrade-card.is-max::before { filter: saturate(.55) brightness(.85); }
.upgrade-card.is-max .upgrade-action { justify-content: center; }
.upgrade-card.is-max .upgrade-action > span:first-child { display: none; }
.upgrade-card.is-max .upgrade-cost { color: #ffe7a1; letter-spacing: 1px; }
.upgrade-card.is-flashing { animation: upgrade-flash .43s ease; }
@keyframes upgrade-flash { 0%, 100% { transform: scale(1); } 38% { transform: translateY(-2px) scale(1.018); filter: brightness(1.45) drop-shadow(0 0 12px rgba(var(--accent-rgb), .58)); } }
.battle-footer { min-height: 35px; padding: 12px 3px 0; display: flex; justify-content: space-between; gap: 12px; color: #8f9e92; font-size: 8px; letter-spacing: .58px; }
.battle-footer > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.footer-pulse { width: 6px; height: 6px; }
kbd { padding: 1px 4px; border: 1px solid rgba(209,225,205,.22); border-radius: 3px; color: #cdd6cd; font: inherit; }

@media (max-width: 760px) {
  .game-shell { width: min(100% - 22px, 620px); padding-top: max(11px, env(safe-area-inset-top)); }
  .masthead { min-height: 64px; }
  .brand-lockup { gap: 10px; }
  .brand-gem { width: 34px; height: 34px; font-size: 22px; }
  .eyebrow { font-size: 7px; letter-spacing: 1.15px; }
  h1 { font-size: 20px; }
  .player-pill { max-width: 130px; height: 31px; padding: 0 9px; font-size: 10px; }
  #player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .masthead-actions { gap: 6px; }
  .icon-button { width: 32px; height: 32px; }
  .battle-hud { min-height: 67px; padding: 12px 11px; grid-template-columns: 1.3fr repeat(3, .48fr); gap: 8px; }
  .hud-label-row { font-size: 8px; }
  .hud-label-row strong { font-size: 9px; }
  .hud-stat span { font-size: 8px; letter-spacing: .8px; }
  .hud-stat strong { font-size: 19px; }
  .game-stage { aspect-ratio: 4 / 4.15; }
  .battle-telemetry { top: 9px; right: 9px; left: 9px; }
  .wave-progress-panel { width: 116px; padding: 7px; }
  .telemetry-label { font-size: 7px; letter-spacing: .55px; }
  .threat-panel { min-height: 28px; font-size: 7px; }
  .combo-banner { top: 57px; right: 11px; }
  .combo-banner strong { font-size: 25px; }
  .storm-button { right: 9px; bottom: 9px; width: 180px; gap: 7px; padding: 0 17px; }
  .storm-button kbd { display: none; }
  .overlay-panel { padding: 25px 21px 22px; }
  .upgrade-dock { padding: 17px 10px 12px; }
  .dock-heading { margin-bottom: 8px; }
  .upgrade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; }
  .spell-upgrade { grid-column: span 2; width: calc(50% - 4px); justify-self: center; }
  .dock-heading span:last-child { font-size: 7px; letter-spacing: .4px; }
  .battle-footer > span:last-child { display: none; }
}

@media (max-width: 390px) {
  .game-shell { width: calc(100% - 14px); }
  .brand-gem { width: 29px; height: 29px; }
  h1 { font-size: 17px; }
  .eyebrow { font-size: 6px; }
  .player-pill { max-width: 101px; font-size: 9px; }
  .battle-hud { grid-template-columns: 1.3fr repeat(3, .44fr); gap: 5px; padding-right: 7px; padding-left: 7px; }
  .hud-label-row { font-size: 7px; }
  .hud-stat strong { font-size: 17px; }
  .wave-progress-panel { width: 101px; }
  .game-stage { min-height: 344px; }
  .screen-overlay { padding: 12px; }
  .overlay-panel { width: 100%; padding: 16px 18px; }
  .overlay-panel h2 { font-size: clamp(25px, 8.2vw, 31px); }
  .storm-button { width: 172px; }
  .storm-copy strong { font-size: 10px; }
  .primary-button { font-size: 11px; padding: 0 28px; }
  .primary-button span:last-child { font-size: 17px; right: 8%; }
  .upgrade-copy { gap: 3px; }
  .intro-features { margin-top: 10px; font-size: 7px; gap: 6px; }
  .overlay-description { margin: 10px auto 12px; font-size: 11px; line-height: 1.5; }
  .local-best { margin-top: 10px; }
}

@media (max-width: 350px) {
  .masthead { flex-wrap: wrap; gap: 10px; padding-bottom: 12px; }
  .masthead-actions { margin-left: auto; }
  .primary-button { font-size: 10px; letter-spacing: .3px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .game-shell { width: min(980px, calc(100% - 20px)); padding-top: 6px; }
  .masthead { min-height: 48px; }
  .game-stage { aspect-ratio: 16 / 7.4; }
  .upgrade-dock { padding: 12px 8px 8px; }
  .dock-heading { margin-bottom: 6px; }
  .upgrade-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .spell-upgrade { grid-column: auto; width: auto; justify-self: stretch; }
  .battle-footer { display: none; }
}

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

/* Fullscreen is a display mode, not a second game instance. */
.battlefield { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #060d15; }
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.masthead { flex-wrap: wrap; padding-bottom: 8px; }
.masthead-actions { margin-left: auto; }
.icon-button { min-width: 44px; width: 44px; height: 44px; }
.fullscreen-exit-copy { font-size: 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.display-dialog { width: min(420px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 24px; border: 1px solid #b99348; border-radius: 12px; color: var(--ink); background: linear-gradient(150deg, #112840, #060d19); text-align: center; box-shadow: 0 16px 80px #0009; }
.display-dialog::backdrop { background: #020812c9; }
.display-dialog h2 { margin: 0 0 12px; color: var(--gold-light); font: 700 23px var(--display); }
.display-dialog p { font-size: 14px; line-height: 1.6; }
.display-skip { display: block; min-height: 44px; margin: 8px auto 0; padding: 8px 16px; border: 1px solid #c9af7866; border-radius: 6px; color: #e7edf8; background: #14263c; cursor: pointer; }
.rotate-hint { position: fixed; z-index: 10; top: calc(52px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(350px, calc(100% - 16px)); display: flex; align-items: center; gap: 8px; padding: 2px 4px 2px 12px; color: #f6e6be; background: #102033f5; border: 1px solid #b99348; border-radius: 8px; font-size: 12px; box-shadow: 0 4px 20px #0009; }
.rotate-hint[hidden] { display: none; }
.rotate-hint button { flex: 0 0 44px; height: 44px; border: 0; background: transparent; color: #fff1ce; font-size: 25px; cursor: pointer; }
html.is-expanded, .is-expanded body { width: 100%; height: 100%; min-height: 0; overflow: hidden; overscroll-behavior: none; }
.is-expanded body { padding: 0; }
.is-compact .game-shell { width: 100%; height: 100vh; height: 100dvh; margin: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); display: flex; flex-direction: column; }
.is-compact .masthead { flex: 0 0 48px; min-height: 48px; padding: 2px 8px; gap: 8px; flex-wrap: nowrap; }
.is-compact .brand-gem, .is-compact .eyebrow, .is-compact .player-pill, .is-compact .battle-footer { display: none; }
.is-expanded h1 { font-size: clamp(14px, 2.3vw, 21px); letter-spacing: .5px; }
.is-compact .masthead-actions { gap: 4px; }
.is-expanded #fullscreen-button { width: 64px; grid-template-columns: auto auto; gap: 2px; border-radius: 9px; }
.is-compact .arena-card { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 6px; }
.is-compact .battle-hud { flex: 0 0 46px; min-height: 46px; padding: 5px 12px; gap: 10px; grid-template-columns: minmax(90px, 1.4fr) repeat(3, minmax(40px, .55fr)); }
.is-compact .hud-label-row { margin-bottom: 4px; }
.is-compact .hud-stat { gap: 2px; }
.is-compact .hud-stat strong { font-size: 19px; }
.is-compact .game-stage { --controls-height: 80px; flex: 1; min-height: 0; aspect-ratio: auto; background: #071222; }
.is-compact .battlefield { bottom: var(--controls-height); }
.is-compact .game-stage::after { bottom: var(--controls-height); }
.is-compact .upgrade-dock { position: absolute; z-index: 3; left: 0; right: 178px; bottom: 0; height: var(--controls-height); padding: 8px; background: none; }
.is-compact .dock-heading { display: none; }
.is-compact .upgrade-grid { height: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.is-compact .upgrade-card { container-type: normal; width: auto; height: 100%; min-height: 44px; grid-column: auto; justify-self: stretch; aspect-ratio: auto; display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 2px 4px; align-items: center; padding: 5px; border: 1px solid rgba(var(--accent-rgb), .6); border-radius: 7px; background: linear-gradient(155deg, rgba(var(--accent-rgb), .18), #050b13 75%); box-shadow: inset 0 0 0 2px #cbab6026; }
.is-compact .upgrade-card::before { display: none; }
.is-compact .upgrade-medallion { display: grid; grid-row: 1 / 3; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(var(--accent-rgb), .9); border-radius: 50%; color: rgb(var(--accent-rgb)); background: radial-gradient(circle at 35% 20%, rgba(var(--accent-rgb), .35), #081220); }
.is-compact .upgrade-medallion svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.is-compact .spell-upgrade .upgrade-medallion svg { fill: currentColor; stroke-width: 1; }
.is-compact .upgrade-level, .is-compact .upgrade-action { position: static; width: auto; height: auto; padding: 0; font-size: 11px; line-height: 1.1; }
.is-compact .upgrade-level { grid-column: 2; padding: 2px; border: 1px solid #e6c27155; border-radius: 3px; }
.is-compact .upgrade-action { grid-column: 2; justify-content: center; min-width: 0; }
.is-compact .upgrade-cost { font-size: 11px; }
.is-compact .upgrade-action > span:first-child { display: none; }
.is-compact .upgrade-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.is-compact .upgrade-card:not(.is-affordable):not(.is-max) { border-color: #596474; background: #0c1420; }
.is-compact .upgrade-card:not(.is-affordable) .upgrade-medallion { filter: saturate(.45); }
.is-compact .upgrade-card:disabled { opacity: .7; }
.is-compact .upgrade-card.is-max { border-color: #dac384; background: linear-gradient(140deg, #342c17, #0b1421); }
.is-compact .storm-button { width: 164px; min-height: 44px; right: 7px; bottom: 18px; padding: 0 12px; gap: 5px; }
.is-compact .storm-button kbd { display: none; }
.is-compact .storm-copy strong { font-size: 10px; }
.is-compact .storm-sigil { flex-basis: 22px; height: 22px; }
.is-compact .screen-overlay { padding: 8px; }
.is-compact .overlay-panel { max-height: 100%; overflow: auto; padding: 16px 20px; }
.is-compact .intro-features { display: none; }

@media (max-width: 600px) and (orientation: portrait) {
  .is-compact .game-stage { --controls-height: 126px; }
  .is-compact .upgrade-dock { right: 0; bottom: 50px; height: 76px; padding: 4px; }
  .is-compact .upgrade-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .is-compact .upgrade-card { grid-template-columns: 1fr 1fr; grid-template-rows: 24px 14px 18px; padding: 3px 1px; gap: 1px; }
  .is-compact .upgrade-medallion { grid-column: 1; grid-row: 1; width: 22px; height: 22px; justify-self: center; }
  .is-compact .upgrade-medallion svg { width: 19px; height: 19px; }
  .is-compact .upgrade-level { grid-column: 2; grid-row: 1; font-size: 8px; border: 0; padding: 0; }
  .is-compact .upgrade-action { grid-column: 1 / 3; grid-row: 3; }
  .is-compact .upgrade-cost { font-size: 10px; }
  .is-compact .upgrade-card::after { content: attr(data-short-label); grid-column: 1 / 3; grid-row: 2; font: 700 8px var(--body); color: #e9edf5; letter-spacing: .25px; }
  .is-compact .storm-button { bottom: 6px; }
}
@media (max-width: 760px) and (orientation: landscape) {
  .is-compact .upgrade-dock { right: 146px; padding: 5px; }
  .is-compact .upgrade-grid { gap: 4px; }
  .is-compact .upgrade-card { grid-template-columns: 22px minmax(0, 1fr); padding: 4px 2px; gap: 2px; }
  .is-compact .upgrade-medallion { width: 22px; height: 22px; }
  .is-compact .upgrade-medallion svg { width: 20px; height: 20px; }
  .is-compact .storm-button { width: 140px; right: 3px; padding: 0 10px; }
  .is-compact .storm-sigil { display: none; }
  .is-compact .upgrade-level, .is-compact .upgrade-cost { font-size: 10px; }
}

/* Normal mobile embeds share the compact HUD, sized by the parent viewport.
   Never derive this height from the iframe's own vh: that creates a resize loop. */
html.is-mobile-compact, .is-mobile-compact body { min-height: 0; overflow: hidden; }
.is-mobile-compact:not(.is-expanded) .game-shell { height: var(--embedded-game-height, 100svh); padding: 0; }
.is-mobile-compact .brand-lockup { min-width: 0; }
.is-mobile-compact .masthead { gap: 4px; }
.is-mobile-compact h1 { font-size: 14px; }
.is-mobile-compact .overlay-panel { padding: 12px 14px; }
.is-mobile-compact .overlay-panel h2 { font-size: 29px; }
.is-mobile-compact .overlay-description { margin: 9px auto; font-size: 11px; line-height: 1.4; }
.is-mobile-compact .primary-button { width: 220px; min-height: 44px; font-size: 11px; }
.is-mobile-compact .local-best { margin-top: 6px; }
.is-mobile-compact .kicker { margin-bottom: 8px; }
@media (max-height: 500px) and (orientation: landscape) {
  .is-compact .game-stage { --controls-height: 64px; }
  .is-compact .upgrade-dock { padding-top: 4px; padding-bottom: 4px; }
  .is-compact .storm-button { bottom: 10px; }
  .is-compact .battle-telemetry { top: 5px; }
  .is-compact .wave-progress-panel { padding: 4px 6px; }
  .is-compact .overlay-panel { padding: 8px 14px; }
  .is-compact .overlay-panel h2 { font-size: 25px; }
  .is-compact .kicker { margin-bottom: 5px; font-size: 8px; }
  .is-compact .overlay-description { margin: 6px auto; font-size: 11px; line-height: 1.3; }
  .is-compact .primary-button { width: 200px; min-height: 44px; font-size: 11px; }
  .is-compact .local-best { margin-top: 4px; }
  .is-compact .final-score { font-size: 30px; margin: 4px 0; }
  .is-compact .result-stats { margin: 4px auto; }
  .is-compact .result-stats > div { padding: 3px; }
  .is-compact .save-status { margin: 4px 0; }
}
/* Score recovery remains available after a temporary mobile network failure. */
.score-save-retry{min-height:44px;margin:6px auto;padding:8px 14px;border:1px solid #d6b45e;border-radius:6px;background:#12223a;color:#ffe39b;cursor:pointer;font:700 12px/1.3 Arial,sans-serif}
.score-save-retry[hidden]{display:none!important}
.score-save-retry:focus-visible{outline:2px solid #8ee7ff;outline-offset:3px}