/* ===== 1. Base layout and components ===== */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #061626;
  color: #eaf8ff;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
}
button {
  font: inherit;
  cursor: pointer;
}
#app {
  height: 100%;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% 39%, #195071 0%, #0a3049 43%, #061627 85%);
  position: relative;
  overflow: hidden;
  touch-action: pan-x;
}
#app:before {
  content: "";
  position: absolute;
  inset: 70px 0 175px;
  pointer-events: none;
  opacity: 0.23;
  background: repeating-linear-gradient(0deg, transparent 0 42px, #6ac0db44 43px 44px),
    repeating-linear-gradient(90deg, transparent 0 55px, #6ac0db33 56px 57px);
  transform: perspective(360px) rotateX(17deg) scale(1.15);
}
header {
  height: clamp(46px, 8dvh, 64px);
  flex: none;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  padding: 9px 18px;
  background: linear-gradient(#03101f, #071e30);
  border-bottom: 1px solid #2b6683;
}
header b {
  font-size: 20px;
  letter-spacing: 1.5px;
}
header small {
  display: block;
  font-size: 9px;
  color: #76d7ff;
  letter-spacing: 2px;
}
header .wave {
  text-align: center;
  color: #ffdf9c;
  font-weight: 900;
}
header .wave small {
  color: #b6d1e0;
}
header .money {
  text-align: right;
  color: #8ef0ff;
  font-weight: 800;
}
header .money small {
  color: #8ee4c2;
  font-size: 11px;
  letter-spacing: 0;
}
#field {
  flex: 1;
  position: relative;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
}
#enemyArea {
  position: absolute;
  inset: 0 0 35%;
  pointer-events: none;
}
#status {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #92c6da;
}
#boardWrap {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 14px #28b7ff88);
  touch-action: none;
}
#board {
  position: relative;
  width: 144px;
  height: 144px;
  border: 3px solid #4ebee9;
  background: #0d2d46;
  box-shadow:
    0 0 0 6px #19435a99,
    0 0 22px #42bfff77;
}
.tile {
  position: absolute;
  border: 1px solid #5288a6;
  background: linear-gradient(145deg, #205471, #113750);
  box-shadow: inset 0 0 0 3px #ffffff0b;
}
.tile:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  border-top: 1px solid #83c6df44;
}
.tile.good {
  background: #1b8b8399;
}
.tile.bad {
  background: #9d364b99;
}
.unit {
  position: absolute;
  z-index: 3;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  filter: drop-shadow(0 0 6px var(--glow));
}
.unit svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.unit .lv {
  position: absolute;
  right: -4px;
  top: -5px;
  background: #041c30;
  border: 1px solid #77e6ff;
  border-radius: 50%;
  font-size: 10px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  font-weight: 900;
}
.unit.dragged {
  opacity: 0.24;
}
.unit.shielded {
  filter: drop-shadow(0 0 10px #5cf9ff);
}
#hint {
  position: absolute;
  bottom: 7px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: 1.7px;
  color: #b2d6e5;
  font-weight: 700;
}
#enemies {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.enemy {
  position: absolute;
  width: 48px;
  height: 62px;
  filter: drop-shadow(0 2px 7px #000);
  transform: translate(-50%, -50%);
}
.enemy svg {
  width: 100%;
  height: 100%;
}
.enemy .hp {
  position: absolute;
  top: -5px;
  left: 5px;
  width: 38px;
  height: 4px;
  background: #581e27;
}
.enemy .hp i {
  display: block;
  height: 100%;
  background: #ff6255;
}
#shots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.shot {
  position: absolute;
  height: 3px;
  transform-origin: left center;
  box-shadow: 0 0 9px currentColor;
  border-radius: 9px;
}
.notice {
  position: absolute;
  top: 45px;
  left: 50%;
  transform: translateX(-50%);
  background: #082337e8;
  border: 1px solid #4aafd1;
  border-radius: 7px;
  padding: 8px 10px;
  white-space: nowrap;
  color: #d9f8ff;
  font-size: 11px;
  z-index: 10;
  pointer-events: none;
}
#trayPanel {
  height: clamp(166px, 29dvh, 218px);
  flex: none;
  z-index: 4;
  background: linear-gradient(#102e48, #071c2e);
  border-top: 3px solid #388ab5;
  padding: 11px 14px max(12px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
#trayPanel.return-ready {
  border-top-color: #74e8ff;
  box-shadow: inset 0 10px 18px #3bdcff12;
}
#trayPanel.return-over {
  border-top-color: #fff0a6;
  box-shadow: inset 0 0 24px #5ee9ff4d;
}
#trayPanel.return-over #trayHead {
  color: #fff0a6;
}
#trayHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  letter-spacing: 1.5px;
  font-weight: 900;
}
#trayHead span {
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #a0c3d6;
  font-weight: 500;
}
#cards {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  min-height: 0;
  flex: 1;
  touch-action: pan-x;
}
#cards::-webkit-scrollbar {
  display: none;
}
.card {
  position: relative;
  flex: 0 0 calc((100% - 16px) / 3);
  height: 100%;
  min-height: 76px;
  background: linear-gradient(#205678, #0c2a44);
  border: 1.5px solid #408db6;
  border-radius: 7px;
  text-align: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.card.selected {
  border: 2px solid #85efff;
  box-shadow: 0 0 12px #38d9ff77;
}
.card svg {
  height: calc(100% - 24px);
  max-height: 78px;
  width: 75%;
  display: block;
  margin: 4px auto 0;
}
.card .name {
  position: absolute;
  bottom: 7px;
  left: 1px;
  right: 1px;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}
.card .level {
  position: absolute;
  right: 5px;
  top: 4px;
  color: #ffe09a;
  font-size: 10px;
  font-weight: 900;
}
.card .shape {
  position: absolute;
  top: 6px;
  left: 5px;
  font-size: 8px;
  color: #6be9ee;
}
#controls {
  display: flex;
  gap: 8px;
  height: clamp(48px, 7dvh, 56px);
  flex: none;
}
#controls button {
  border-radius: 8px;
  border: 1.5px solid #559dc1;
  color: #e6f7ff;
  font-size: 13px;
  font-weight: 900;
}
#supply {
  flex: 1;
  background: #235272;
}
#battle {
  flex: 1;
  background: transparent;
  color: #ffdf83 !important;
  border-color: #ffdf83 !important;
  font-size: 13px !important;
  box-shadow: none;
}
#battle:disabled {
  background: transparent;
  color: #ffdf83 !important;
  box-shadow: none;
}
#ghost {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  display: none;
  filter: drop-shadow(0 0 15px #70e8ff);
  transform: translate(-50%, -50%);
}
#ghost svg {
  width: 100%;
  height: 100%;
}
#restart {
  position: absolute;
  top: 6px;
  left: 9px;
  background: none;
  border: none;
  color: #8bbcd2;
  font-size: 10px;
  z-index: 2;
}
#speed {
  position: absolute;
  top: 6px;
  right: 9px;
  background: none;
  border: none;
  color: #8bbcd2;
  font-size: 10px;
  z-index: 2;
}
@media (max-height: 670px) {
  #trayPanel {
    height: clamp(152px, 30dvh, 185px);
  }
  #cards,
  .card {
    min-height: 70px;
  }
  #field #boardWrap {
    bottom: 29px;
  }
  header b {
    font-size: 16px;
  }
}

/* ASTRAL MOTION CSS START */
#app {
  --ui-border: #76d8e1;
}
/* Keep the cell outline, but remove the old inset horizontal shine. */
#app .tile::before,
#ghost .tile::before {
  content: none;
  display: none;
  border: 0;
}
#enemies .enemy.deploying[data-altitude] {
  z-index: 0;
}
#enemies .enemy.deploying .hp {
  visibility: hidden;
}
.astral-exhaust {
  position: absolute;
  left: 50%;
  top: -9%;
  width: 13%;
  height: 24%;
  border-radius: 60% 60% 35% 35%;
  background: linear-gradient(to top, #e8ffff 0%, var(--energy) 30%, transparent 95%);
  filter: drop-shadow(0 0 4px var(--energy));
  transform-origin: 50% 100%;
  pointer-events: none;
  z-index: -1;
}
.astral-ground-trail {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  height: 10px;
  transform: translate(-50%, -50%) rotate(var(--trail-angle));
  animation: astralTrailFade 2s linear forwards;
}
.astral-treads {
  background-image: repeating-linear-gradient(0deg, #05090bb3 0 2px, transparent 2px 4px),
    repeating-linear-gradient(0deg, #05090bb3 0 2px, transparent 2px 4px);
  background-size: 20% 100%;
  background-position: left, right;
  background-repeat: no-repeat;
  opacity: 0.45;
}
.astral-footprints {
  height: 12px;
  background: linear-gradient(#111820cc, #111820cc);
  background-size: 17% 75%;
  background-position: var(--foot-side) center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 1px 1px #b9a48755);
  animation-duration: 1.8s;
}
.astral-footprints.astral-dot-prints {
  background-image: radial-gradient(circle, #10151eef 0 3px, #b9a48777 3.5px, transparent 4.5px);
  background-size: 10px 10px;
  animation-duration: 2s;
}
.astral-dust {
  height: 16px;
  background: radial-gradient(ellipse at 15% 50%, #b9a48777, transparent 28%),
    radial-gradient(ellipse at 85% 50%, #b9a48777, transparent 28%);
  filter: blur(2px);
  animation-duration: 0.65s;
}
@keyframes astralTrailFade {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 0;
  }
}
/* Ground contact stays tight; airborne shadows share one light direction. */
#enemies .enemy[data-altitude] {
  filter: none;
}
#enemies .enemy[data-altitude]::after {
  display: block;
  content: "";
  left: 50%;
  top: 65%;
  width: 65%;
  height: 24%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, #0005, transparent 70%);
  filter: blur(1px);
  z-index: -1;
  pointer-events: none;
}
#enemies .enemy[data-altitude="ground"] {
  z-index: 1;
}
#enemies .enemy[data-altitude="ground"] .astral-body {
  filter: drop-shadow(0 1px 1px #0005);
}
#enemies .enemy[data-altitude="hover"] {
  z-index: 3;
}
#enemies .enemy[data-altitude="hover"]::after {
  left: 61%;
  top: 83%;
  width: 72%;
  height: 29%;
  filter: blur(4px);
  background: radial-gradient(ellipse, #0007, transparent 72%);
}
#enemies .enemy[data-altitude="air"] {
  z-index: 4;
}
#enemies .enemy[data-altitude="air"]::after {
  left: 65%;
  top: 94%;
  width: 72%;
  height: 32%;
  filter: blur(7px);
  background: radial-gradient(ellipse, #0006, transparent 72%);
}
.astral-rotor,
.astral-body {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
}
.enemy .astral-part {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
  will-change: auto;
}
/* Mobile hull dimensions and collision radii share the same 2/3 scale. */
@media (max-width: 600px) {
  #enemies .enemy {
    width: 49.333px;
    height: 56px;
  }
  #enemies .enemy.boss {
    width: 133.333px;
    height: 152px;
  }
  #enemies .enemy .hp {
    left: 12%;
    width: 76%;
    top: -5px;
  }
}
/* Selectively paint warm accents; neutral silver and dark metal stay intact. */
.footprint-art img[src*="/cannon-"] {
  filter: url(#accent-cannon);
}
.footprint-art img[src*="/wish-"]:not([src*="emerald"]) {
  filter: url(#accent-wish);
}
.footprint-art img[src*="/multi-"] {
  filter: url(#accent-multi);
}
.footprint-art img[src*="/quantum-"] {
  filter: url(#accent-quantum);
}
.footprint-art img[src*="/missile-"] {
  filter: url(#accent-missile);
}
.footprint-art img[src*="/barrier-"] {
  filter: url(#accent-barrier);
}
.footprint-art img[src*="/stasis-"] {
  filter: url(#accent-stasis);
}
.footprint-art img[src*="/laser-"]:not([src*="twin"]) {
  filter: url(#accent-laser);
}
.material-stripe {
  position: absolute;
  left: calc(var(--mount-x) - 9%);
  top: calc(var(--mount-y) + 12%);
  width: 18%;
  height: 3%;
  background: var(--signature);
  border-top: 1px solid #eef6ff99;
  border-bottom: 1px solid #111b24;
  box-shadow: 0 1px 1px #0009;
  pointer-events: none;
}
.tier-hardware {
  position: absolute;
  left: var(--mount-x);
  top: var(--mount-y);
  width: 44%;
  height: 24%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 1px 1px #0009);
}
.tier-plate {
  position: absolute;
  top: 0;
  width: 18%;
  height: 65%;
  background: linear-gradient(100deg, #e3e8e9 0%, #65717b 24%, #29323b 50%, #a1abb2 78%, #414b55);
  border: 1px solid #1b252f;
  clip-path: polygon(25% 0, 100% 15%, 100% 85%, 25% 100%, 0 75%, 0 25%);
}
.tier-plate.left {
  left: 0;
}
.tier-plate.right {
  right: 0;
  transform: scaleX(-1);
}
.tier-3 .tier-plate {
  width: 25%;
  height: 90%;
}
.tier-vent {
  position: absolute;
  inset: 20% 18%;
  background: repeating-linear-gradient(0deg, #111a23 0 2px, #74818b 2px 3px);
}
.tier-4,
.tier-5,
.tier-6 {
  width: 66%;
  height: 34%;
}
.tier-4 .tier-plate,
.tier-5 .tier-plate,
.tier-6 .tier-plate {
  width: 23%;
  height: 100%;
  clip-path: polygon(0 0, 100% 24%, 82% 78%, 12% 100%);
}
.tier-5 .tier-plate,
.tier-6 .tier-plate {
  border-top: 3px double #e3ebed;
}
.astral-part.center {
  clip-path: inset(0 25%);
}
.astral-part.left {
  clip-path: inset(0 75% 0 0);
}
.astral-part.right {
  clip-path: inset(0 0 0 75%);
}
.astral-part.left {
  transform-origin: 25% 50%;
}
.astral-part.right {
  transform-origin: 75% 50%;
}
.enemy[data-sprite="lunar-broodmother"] .astral-part.center {
  clip-path: inset(0 27%);
  z-index: 1;
}
.astral-part.leg-l0 {
  clip-path: inset(0 73% 65% 0);
  transform-origin: 27% 25%;
}
.astral-part.leg-r0 {
  clip-path: inset(0 0 65% 73%);
  transform-origin: 73% 25%;
}
.astral-part.leg-l1 {
  clip-path: inset(35% 73% 39% 0);
  transform-origin: 27% 48%;
}
.astral-part.leg-r1 {
  clip-path: inset(35% 0 39% 73%);
  transform-origin: 73% 48%;
}
.astral-part.leg-l2 {
  clip-path: inset(61% 73% 0 0);
  transform-origin: 27% 73%;
}
.astral-part.leg-r2 {
  clip-path: inset(61% 0 0 73%);
  transform-origin: 73% 73%;
}
.enemy[data-sprite="riftwing"] .astral-part.whole {
  transform: rotate(180deg);
}
.astral-enemy-core {
  position: absolute;
  left: 43%;
  top: 43%;
  width: 14%;
  height: 14%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--energy), transparent 70%);
  opacity: 0.08;
  pointer-events: none;
}
.unit.firing {
  animation: none !important;
}
.laser-beam.fission-beam {
  height: 3px;
}
.astral-role {
  position: absolute;
  right: 1px;
  top: 3px;
  width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--role-color);
  border-radius: 3px;
  background: #101e2a;
  color: var(--role-color);
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 1px 2px #0009;
}
.astral-role svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.unit .lv,
.tray-piece .level {
  border-color: var(--role-color, #87e9ff) !important;
  background: #102331 !important;
  color: var(--role-color, #fff) !important;
}
.unit .lv.elite-level,
.tray-piece .level.elite-level {
  border-style: double !important;
  border-width: 3px !important;
}
.card {
  position: relative;
}
.astral-role-name {
  position: absolute;
  top: calc(100% - 14px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  line-height: 12px;
  letter-spacing: 0.6px;
  font-weight: 800;
  color: var(--role-color);
  pointer-events: none;
  text-shadow:
    0 1px 3px #000,
    0 0 5px #000;
}
.tray-piece .astral-role {
  width: 13px;
  height: 13px;
}
/* Keep collision/drag footprints unchanged; inset only the visible equipment. */
.unit .footprint-art {
  inset: 6%;
}
.tray-piece .footprint-art {
  inset: 6%;
}
#ghost .footprint-art {
  inset: 6%;
}
.footprint-art.astral-grid-fit {
  inset: 7% !important;
}
/* Its trimmed source is asymmetric: center the tall barrel in the left
   tile instead of centering the entire L's bounding rectangle. */
.footprint-art.astral-grid-laser {
  left: 3% !important;
  right: 7% !important;
}
.footprint-art.astral-grid-fit img {
  object-fit: fill !important;
}
.astral-grid-laser {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 50%, 50% 100%, 0 100%);
}
.astral-grid-stasis {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 50% 50%);
}
.astral-l-upper,
.astral-l-lower {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
}
.astral-l-upper {
  top: 0;
}
.astral-l-lower {
  bottom: 0;
}
.footprint-art .astral-l-upper img {
  position: absolute;
  inset: 0 0 auto !important;
  height: 160% !important;
  width: 100% !important;
  object-fit: fill !important;
}
.astral-l-upper .astral-l-column {
  clip-path: inset(0 47% 0 0);
}
/* Reposition the side module without shifting the already aligned barrel.
   Retain a small connector overlap so the assembly remains continuous. */
.astral-l-upper .astral-l-hub {
  clip-path: inset(0 0 0 48%);
  transform: translate(3%, -6%);
}
.footprint-art .astral-l-lower img {
  position: absolute;
  inset: auto 0 0 !important;
  height: 266.6667% !important;
  width: 100% !important;
  object-fit: fill !important;
}
.unit .astral-cannon-base {
  clip-path: polygon(0 0, 30% 0, 30% 55%, 70% 55%, 70% 0, 100% 0, 100% 100%, 0 100%);
}
.unit .astral-cannon-head {
  position: absolute;
  inset: 0;
  clip-path: inset(0 30% 45%);
  pointer-events: none;
}
.footprint-art.volley-art {
  overflow: visible !important;
}
.volley-art img {
  position: absolute;
  inset: 0;
  object-fit: fill !important;
}
.volley-chassis {
  clip-path: inset(var(--base-cut) 0 0);
}
.volley-head {
  clip-path: inset(0 0 var(--head-cut));
  transform-origin: 50% var(--volley-pivot);
  z-index: 1;
}
.missile-base-left {
  clip-path: inset(0 57% 0 0);
}
.missile-base-right {
  clip-path: inset(0 0 0 57%);
}
/* Mortar head: stays inside its cell. 90% of the row tall, starting 4% from the top,
   pivoting on the ring at 88% of its own height (= 83% of the cell; see MORTAR_PIVOT). */
.missile-art .missile-turret {
  position: absolute;
  inset: auto;
  left: 50%;
  top: 4%;
  height: 90%;
  aspect-ratio: var(--head-ar, 0.33);
  translate: -50% 0;
  clip-path: none;
  transform-origin: 50% 88%;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px #000a);
}
.missile-art .missile-turret img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
}
.unit[data-type="quantum"] .tier-hardware,
.unit[data-type="missile"] .tier-hardware {
  display: none;
}
.boss-death {
  position: absolute;
  width: var(--blast-size);
  height: var(--blast-size);
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
}
.boss-death-core {
  background: radial-gradient(circle, #fffde3 0%, #ffe390 16%, #ff9c35 33%, #e04d18a6 52%, transparent 70%);
  animation: boss-core-burst 850ms ease-out forwards;
}
.boss-death-ring {
  border: 4px solid #ffd88b;
  box-shadow:
    0 0 16px #ff8c38,
    inset 0 0 12px #ff8c38;
  animation: boss-shockwave 1000ms ease-out forwards;
}
.boss-death-smoke {
  background: radial-gradient(circle, #34303bcc 5%, #57443c99 40%, transparent 70%);
  animation: boss-smoke 1100ms ease-out forwards;
  z-index: 19;
}
@keyframes boss-core-burst {
  0% {
    transform: translate(-50%, -50%) scale(0.25);
    opacity: 1;
  }
  35% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }
}
@keyframes boss-shockwave {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.7);
    opacity: 0;
  }
}
@keyframes boss-smoke {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  30% {
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -60%) scale(1.8);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .boss-death {
    animation: none;
    opacity: 0.65;
  }
  .boss-death-ring,
  .boss-death-smoke {
    display: none;
  }
}
.astral-core {
  position: absolute;
  left: 42%;
  top: 38%;
  width: 16%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--glow), transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.unit[data-type="laser"] .astral-core {
  left: 19%;
  top: 9%;
  width: 12%;
  height: 10%;
}
.unit[data-type="stasis"] .astral-core {
  left: 69%;
  top: 14%;
  width: 12%;
  height: 10%;
}
#app[data-mode="battle"] .unit[data-type="barrier"] .astral-core {
  animation: astralCharge 2.5s ease-in-out infinite;
}
#app[data-mode="battle"] .unit[data-type="wish"] .astral-core {
  animation: astralCharge 3s ease-in-out infinite;
}
#app:not([data-mode="battle"]) .astral-core {
  opacity: 0 !important;
  animation: none !important;
}
.mine {
  background-image: url("../assets/astral/wish-l1.webp") !important;
}
@keyframes astralCharge {
  0%,
  100% {
    opacity: 0.08;
    transform: scale(0.7);
  }
  50% {
    opacity: 0.45;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .astral-core {
    animation: none !important;
  }
}

/* ASTRAL MOTION CSS END */

/* ===== 2. Combat effects ===== */
#field {
  isolation: isolate;
}
#field.battle-active:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 84%, #1ee8ff20 0 16%, transparent 43%),
    radial-gradient(ellipse at 18% 18%, #7fa9d222, transparent 38%),
    linear-gradient(115deg, transparent 0 28%, #d8f2ff09 42%, transparent 56%);
  mix-blend-mode: screen;
  animation: fogSweep 4.5s ease-in-out infinite alternate;
}
#field.battle-active:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 38%, #01071055 100%);
  animation: battleVignette 1.8s ease-in-out infinite alternate;
}
#enemyArea {
  z-index: 2;
}
#boardWrap {
  z-index: 3;
}
#shots {
  z-index: 8;
  overflow: visible;
}
#status,
#hint,
#restart,
#speed {
  z-index: 10;
}
.battle-banner {
  position: absolute;
  left: 50%;
  top: 26%;
  z-index: 30;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  font-weight: 1000;
  letter-spacing: 4px;
  color: #fff2b2;
  text-shadow:
    0 0 8px #ff8a2a,
    0 0 20px #ff532a;
  animation: battleBanner 1.15s cubic-bezier(0.18, 0.82, 0.2, 1) forwards;
}
.battle-banner b {
  display: block;
  font-size: 29px;
}
.battle-banner small {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: 3px;
  color: #aeeeff;
}
.enemy {
  will-change: transform, filter;
}
.enemy:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 55px;
  width: 34px;
  height: 22px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, #243b4b88 0, transparent 67%);
  filter: blur(3px);
  z-index: -1;
}
.enemy .hp {
  height: 6px !important;
  top: -8px !important;
  left: 3px !important;
  width: 42px !important;
  border: 1px solid #ffd5be;
  background: #270b12 !important;
  box-shadow: 0 0 6px #ff372d88;
}
.enemy .hp i {
  background: linear-gradient(90deg, #ff303c, #ff8053) !important;
  box-shadow: 0 0 5px #ff402f;
}
.enemy.destroyed {
  animation: enemyDestroyed 0.22s ease-in forwards;
}
.unit.firing {
  animation: weaponRecoil 0.16s ease-out;
}
.unit.shielded:after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px solid #6ff8ff;
  border-radius: 50%;
  box-shadow:
    inset 0 0 14px #58efff88,
    0 0 14px #58efff88;
  animation: shieldPulse 1.25s ease-in-out infinite;
  pointer-events: none;
}
.shot {
  height: 4px !important;
  background: linear-gradient(
    90deg,
    transparent 0,
    var(--fx-color) 35%,
    #fff 72%,
    var(--fx-color) 100%
  ) !important;
  box-shadow:
    0 0 5px var(--fx-color),
    0 0 12px var(--fx-color) !important;
  animation: shotFlash 0.28s ease-out forwards;
}
.shot.laser {
  height: 3px !important;
  box-shadow:
    0 0 4px #fff,
    0 0 11px var(--fx-color),
    0 0 20px var(--fx-color) !important;
}
.shot.cannon {
  height: 5px !important;
}
.shot.missile {
  height: 7px !important;
  background: linear-gradient(90deg, #43200022, #ff7a25 34%, #fff7c3 80%, #fff) !important;
}
.shot.multi {
  height: 5px !important;
  background: linear-gradient(90deg, transparent, #38ffa5, #e3fff3) !important;
}
.muzzle,
.impact,
.impact-ring,
.spark,
.damage-number,
.smoke-puff {
  position: absolute;
  pointer-events: none;
}
.muzzle {
  width: 24px;
  height: 24px;
  margin: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, var(--fx-color) 24%, transparent 68%);
  box-shadow: 0 0 15px var(--fx-color);
  animation: muzzleFlash 0.2s ease-out forwards;
}
.impact {
  width: 38px;
  height: 38px;
  margin: -19px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #fff 0 8%,
    #fff49e 15%,
    var(--fx-color) 34%,
    #ff4a1f 52%,
    transparent 70%
  );
  filter: drop-shadow(0 0 9px var(--fx-color));
  animation: impactBurst 0.32s ease-out forwards;
}
.impact.big {
  width: 62px;
  height: 62px;
  margin: -31px;
}
.impact-ring {
  width: 20px;
  height: 20px;
  margin: -10px;
  border: 2px solid var(--fx-color);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--fx-color);
  animation: impactRing 0.42s ease-out forwards;
}
.spark {
  width: 3px;
  height: 10px;
  margin: -5px;
  background: linear-gradient(#fff, var(--fx-color), transparent);
  border-radius: 3px;
  box-shadow: 0 0 5px var(--fx-color);
  animation: sparkFly 0.38s ease-out forwards;
}
.damage-number {
  z-index: 15;
  min-width: 34px;
  text-align: center;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: 1000;
  font-style: italic;
  color: #fff1b0;
  text-shadow:
    -1px -1px #70300e,
    1px 1px #70300e,
    0 0 7px #ff7b28;
  animation: damageFloat 0.62s ease-out forwards;
}
.damage-number.critical {
  font-size: 20px;
  color: #fff;
}
.smoke-puff {
  width: 34px;
  height: 34px;
  margin: -17px;
  border-radius: 50%;
  background: radial-gradient(circle, #8ca5b9aa 0, #263d5077 42%, transparent 72%);
  filter: blur(2px);
  animation: smokeRise 0.7s ease-out forwards;
}
.fortress-flash {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  background: radial-gradient(circle at 50% 78%, #ffdf8c66, transparent 28%);
  animation: fortressFlash 0.35s ease-out forwards;
}
@keyframes fogSweep {
  from {
    transform: translate3d(-2%, 0, 0) scale(1.03);
    opacity: 0.45;
  }
  to {
    transform: translate3d(2%, -1%, 0) scale(1.08);
    opacity: 0.85;
  }
}
@keyframes battleVignette {
  from {
    opacity: 0.65;
  }
  to {
    opacity: 1;
  }
}
@keyframes battleBanner {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
  }
  24% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
  }
  65% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -64%) scale(1.08);
  }
}
@keyframes shotFlash {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  25% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 0;
    clip-path: inset(0 0 0 72%);
  }
}
@keyframes muzzleFlash {
  0% {
    opacity: 0;
    transform: scale(0.25);
  }
  35% {
    opacity: 1;
    transform: scale(1.35);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}
@keyframes impactBurst {
  0% {
    opacity: 1;
    transform: scale(0.2) rotate(0);
  }
  55% {
    opacity: 1;
    transform: scale(1.2) rotate(35deg);
  }
  100% {
    opacity: 0;
    transform: scale(1.7) rotate(70deg);
  }
}
@keyframes impactRing {
  from {
    opacity: 1;
    transform: scale(0.3);
  }
  to {
    opacity: 0;
    transform: scale(3.2);
  }
}
@keyframes sparkFly {
  from {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--rot));
  }
  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(calc(var(--rot) + 170deg));
  }
}
@keyframes damageFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, -35%) scale(0.7);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -55%) scale(1.18);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -145%) scale(0.92);
  }
}
@keyframes smokeRise {
  from {
    opacity: 0.75;
    transform: translate(0, 0) scale(0.45);
  }
  to {
    opacity: 0;
    transform: translate(var(--drift), -34px) scale(1.5);
  }
}
@keyframes enemyHit {
  0% {
    filter: brightness(1);
  }
  45% {
    filter: brightness(3.2) saturate(0.2) drop-shadow(0 0 10px #fff);
  }
  100% {
    filter: brightness(1);
  }
}
@keyframes enemyDestroyed {
  to {
    opacity: 0;
    filter: brightness(3) blur(2px);
    transform: translate(-50%, -50%) scale(1.3);
  }
}
@keyframes weaponRecoil {
  0% {
    transform: translateY(0) scale(1);
  }
  38% {
    transform: translateY(3px) scale(0.94);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes shieldPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.13);
  }
}
@keyframes combatKick {
  0%,
  100% {
    transform: translate(0);
  }
  25% {
    transform: translate(-2px, 1px);
  }
  55% {
    transform: translate(2px, -1px);
  }
  80% {
    transform: translate(-1px, 0);
  }
}
@keyframes fortressFlash {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #field.battle-active:before,
  #field.battle-active:after,
  .unit.shielded:after {
    animation-duration: 8s;
  }
  .spark {
    display: none;
  }
}

/* ===== 3. Barrier coverage ===== */
/* Barrier coverage is shown on nearby board cells, without an oval halo over units. */
.unit.shielded:after {
  display: none !important;
}
.shield-halo {
  display: none !important;
}
.unit.shielded {
  outline: none;
  box-shadow: none;
  filter: none;
}
.unit .shield-outline {
  display: none;
  position: absolute;
  left: -2px;
  top: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 2px #49dfff);
}
.unit.shielded .shield-outline {
  display: block;
}
#enemyArea {
  z-index: 4;
}

/* ===== 4. Integrated board review ===== */
/* Integrated board review: approved art, shared battlefield, two camera states. */
body {
  background: #080f18;
}
#app {
  max-width: 560px;
  margin: auto;
  background: #172633 url("../assets/backgrounds/background-01.jpg") center/cover no-repeat;
  --zoom: 1;
}
#app:before {
  display: none;
}
header {
  background: #071727bb;
  backdrop-filter: blur(12px);
}
#boardWrap {
  bottom: 22%;
  transform: translateX(-50%) scale(var(--zoom));
  transform-origin: 50% 50%;
  transition:
    bottom 0.8s ease,
    transform 0.8s ease;
  filter: drop-shadow(0 6px 10px #0008);
}
#board {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.tile {
  border-radius: 6px;
  border: 1px solid #84d5e699;
  background: #4b95ab38;
  box-shadow: inset 0 0 0 2px #b4efff15;
}
.unit {
  filter: drop-shadow(0 3px 3px #0009);
}
.unit img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.unit .lv {
  top: auto;
  bottom: 0;
  left: -1px;
  right: auto;
  background: #153f65;
}
.card img {
  height: calc(100% - 25px);
  width: 90%;
  object-fit: contain;
  pointer-events: none;
}
#ghost img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#trayPanel {
  background: #081a2ab8;
  backdrop-filter: blur(10px);
  height: clamp(180px, 28dvh, 235px);
}
.card {
  background: #80b5bd16;
  border-color: #96d6df55;
}
#app[data-mode="battle"] #trayPanel {
  display: none;
}
#app[data-mode="battle"] #boardWrap {
  bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  transform-origin: 50% 100%;
  transform: translateX(-50%) scale(var(--battle-zoom, 0.82));
}
#app[data-mode="battle"] #hint {
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
#enemyArea {
  inset: 0 0 18%;
}
.enemy {
  width: 74px;
  height: 84px;
}
.enemy img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.enemy:after {
  display: none;
}
#restart,
#speed {
  top: 14px;
  min-height: 32px;
  padding: 7px 11px;
  background: #061b2bd9;
  border: 1px solid #679bb49c;
  border-radius: 7px;
  color: #e0f5ff;
  font-weight: 700;
  backdrop-filter: blur(6px);
}
#restart:focus-visible,
#speed:focus-visible,
#scenePicker:focus-visible {
  outline: 2px solid #8eeaff;
  outline-offset: 3px;
}
#scenePicker {
  position: absolute;
  top: 54px;
  right: 10px;
  z-index: 11;
  appearance: none;
  -webkit-appearance: none;
  background-color: #061b2bd9;
  background-image: linear-gradient(45deg, transparent 50%, #cdefff 50%),
    linear-gradient(135deg, #cdefff 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 14px,
    calc(100% - 13px) 14px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  color: #e0f5ff;
  border: 1px solid #679bb4;
  border-radius: 7px;
  padding: 7px 34px 7px 11px;
  font: inherit;
  font-size: 11px;
  min-height: 32px;
  min-width: 106px;
  max-width: 140px;
  cursor: pointer;
}
#scenePicker option {
  background: #092338;
  color: #e0f5ff;
}
#hint {
  letter-spacing: 0.5px;
}
#app #status {
  top: 98px;
  color: #d9f5ff;
}
#app[data-mode="lost"] #trayPanel {
  display: flex;
  height: auto;
}
#app[data-mode="lost"] #boardWrap,
#app[data-mode="lost"] #enemyArea,
#app[data-mode="lost"] #hint,
#app[data-mode="lost"] #trayHead,
#app[data-mode="lost"] #cards,
#app[data-mode="lost"] #supply,
#app[data-mode="lost"] #adReward {
  display: none;
}
.game-over {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 35%;
  padding: 24px 16px;
  text-align: center;
  background: #082337ed;
  border: 2px solid #ffb16c;
  border-radius: 14px;
  z-index: 30;
}
.game-over h2 {
  color: #ffd59c;
  margin: 0 0 12px;
}
.game-over small {
  color: #b9dce9;
  line-height: 1.6;
}
#app[data-extending="true"] #boardWrap {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%) scale(var(--zoom));
  transition: none;
}
#trayPanel {
  position: relative;
  isolation: isolate;
}
#trayPanel.confirming-extension > #trayHead,
#trayPanel.confirming-extension > #cards,
#trayPanel.confirming-extension > #controls {
  visibility: hidden;
  pointer-events: none;
}
#trayPanel .extension-confirm {
  position: absolute;
  inset: 6px;
  transform: none;
  width: auto;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: auto;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 8px;
}
#trayPanel .extension-confirm b,
#trayPanel .extension-confirm small {
  flex-basis: 100%;
  margin: 0;
}
#trayPanel .extension-confirm button {
  margin: 0;
  min-height: 44px;
}
@media (prefers-reduced-motion: reduce) {
  #boardWrap {
    transition: none;
  }
}

/* ===== 5. Unboxed inventory ===== */
/* Unboxed inventory; occupied cells are the visual placement contract. */
#trayPanel {
  background: linear-gradient(transparent, #06182788);
  backdrop-filter: none;
  border-top: 1px solid #85bdcf44;
  gap: 8px;
  padding-top: 8px;
}
#trayHead {
  font-size: 10px;
  letter-spacing: 1px;
}
#cards {
  display: grid;
  grid-template-columns: repeat(var(--tray-columns, 3), minmax(64px, 1fr));
  grid-template-rows: 1fr;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: center;
  min-height: 0;
  touch-action: pan-x;
}
.card {
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 82px;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  min-width: 0;
}
.tray-piece {
  /* Bigger bay pieces, limited by card width and by the bay's height for tall pieces. */
  --tray-cell: min(44px, calc((100cqw - 12px) / var(--piece-columns, 2)), calc(76px / var(--piece-rows, 2)));
  position: relative;
  flex: none;
  pointer-events: none;
}
.card .footprint {
  position: absolute;
  width: var(--tray-cell);
  height: var(--tray-cell);
  border: 1px solid #d8d6a480;
  border-radius: 4px;
  background: #c9c39338;
  box-shadow: inset 0 0 0 2px #d9d6b111;
}
.card .tray-piece img,
.card .tray-piece svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px #0009);
}
.card .level {
  top: auto;
  right: auto;
  bottom: -3px;
  left: -4px;
  background: #756849;
  border: 1px solid #e5dbb4;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #fff1ca;
  font-size: 11px;
  z-index: 2;
}
.card.selected .footprint {
  border-color: #a6faff;
  background: #66e5ff44;
}
.card.selected .tray-piece {
  filter: drop-shadow(0 0 4px #54ddff);
}

/* ===== 6. Patch layer 6 ===== */
.footprint-art {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}
.footprint-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.unit {
  pointer-events: none;
}
.unit .footprint-art {
  pointer-events: auto;
}
.card .tray-piece .footprint-art img {
  filter: none;
}

/* ===== 7. Patch layer 7 ===== */
.unit-health,
.unit-shield {
  position: absolute;
  left: 8%;
  width: 84%;
  height: 5px;
  top: -5px;
  background: #182017;
  border: 1px solid #e6d88c;
  z-index: 5;
  pointer-events: none;
}
.unit-health i,
.unit-shield i {
  display: block;
  height: 100%;
  background: linear-gradient(#b9ff48, #40bd15);
}
.unit-shield {
  top: -9px;
  height: 4px;
  border-color: #70e8ff;
  background: #102f4b;
}
.unit-shield i {
  background: #38dfff;
}
.shield-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  display: block;
  border: 2px solid #97ffff;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    0 0 5px #0ef,
    inset 0 0 4px #0ef;
  pointer-events: none;
}
.projectile,
.enemy-bolt {
  position: absolute;
  width: 15px;
  height: 6px;
  border-radius: 70%;
  background: radial-gradient(ellipse at 75% 50%, white, #ffed88 35%, var(--fx-color) 65%, transparent);
  box-shadow: 0 0 7px var(--fx-color);
  transform: translate(-50%, -50%) rotate(var(--angle, 0rad));
  pointer-events: none;
}
.projectile.missile,
.projectile.quantum {
  width: 20px;
  height: 9px;
}
.enemy-bolt {
  animation: enemyBullet 0.3s linear forwards;
}
.projectile.boss-plasma {
  z-index: 12;
  width: 34px;
  height: 12px;
  background: linear-gradient(90deg, transparent, #d72fff 25%, #ff93ee 65%, white 90%);
  box-shadow:
    0 0 8px #ff65e8,
    0 0 16px #d72fff;
}
@keyframes enemyBullet {
  to {
    translate: var(--dx) var(--dy);
  }
}
.projectile.stasis {
  width: 30px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, #42eaff 22%, #fff 52%, #42eaff 78%, transparent);
  box-shadow:
    0 0 7px #42eaff,
    0 0 15px #42eaff;
}
.laser-beam {
  position: absolute;
  height: 5px;
  transform-origin: 0 50%;
  border-radius: 8px;
  background: linear-gradient(90deg, #0ff 0%, #fff 45%, #42eaff 82%, transparent 100%);
  box-shadow:
    0 0 5px #fff,
    0 0 11px #42eaff,
    0 0 22px #0ff;
  animation: laserPulse 0.34s steps(2, end) infinite;
  pointer-events: none;
}
@keyframes laserPulse {
  0%,
  100% {
    opacity: 0.18;
  }
  35%,
  70% {
    opacity: 1;
  }
}
.quantum-fire {
  position: absolute;
  width: 80px;
  height: 88px;
  margin: -53px -40px;
  pointer-events: none;
  background: radial-gradient(
    ellipse 30px 32px at 50% 60%,
    #fff7b0 0 9%,
    #ffd34a 18%,
    #ff7b22 35%,
    #ee3a0c99 51%,
    transparent 100%
  );
  filter: drop-shadow(0 0 7px #ff7b22);
  transform-origin: 50% 60%;
  animation: quantumFire 0.55s ease-out forwards;
}
.muzzle.quantum-muzzle {
  width: 32px;
  height: 32px;
  margin: -16px;
  animation-duration: 0.3s;
  background: radial-gradient(circle, #fff 0 15%, #fff2a0 25%, #ff932e 42%, transparent 70%);
  box-shadow: 0 0 12px #ff932e;
}
@keyframes quantumFire {
  0% {
    opacity: 0;
    transform: scale(0.35, 0.25);
  }
  20% {
    opacity: 1;
    transform: scale(0.9, 1.1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1, 0.85);
  }
  100% {
    opacity: 0;
    transform: scale(1.15, 1.4);
  }
}
.mine {
  position: absolute;
  width: 30px;
  height: 34px;
  margin: -17px -15px;
  background: center/contain no-repeat;
  filter: drop-shadow(0 0 5px #49eaff);
  animation: minePulse 1.4s ease-in-out infinite;
  pointer-events: none;
}
.weapon-impact {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px;
  pointer-events: none;
  border: 2px solid var(--fx-color);
  border-radius: 50%;
  background: radial-gradient(circle, #ffffffaa, transparent 65%);
  box-shadow: 0 0 9px var(--fx-color);
  animation: weaponBurst 0.38s ease-out forwards;
}
.weapon-impact.fx-cannon {
  width: 22px;
  height: 22px;
  margin: -11px;
  border-radius: 25%;
  border-width: 3px;
  animation-duration: 0.26s;
}
.weapon-impact.fx-laser {
  width: 12px;
  height: 36px;
  margin: -18px -6px;
  border-radius: 45%;
  transform: rotate(35deg);
  animation: laserBurst 0.28s ease-out forwards;
}
.weapon-impact.fx-missile {
  width: 46px;
  height: 46px;
  margin: -23px;
  border: 3px dashed #ffd27c;
  background: radial-gradient(circle, #fff5b8, #ff8e3466 35%, transparent 70%);
  animation-duration: 0.5s;
}
.weapon-impact.fx-multi {
  border: 3px double #70ffc2;
  background: transparent;
  box-shadow:
    0 0 8px #70ffc2,
    inset 0 0 8px #70ffc2;
}
.weapon-impact.fx-stasis {
  border: 2px dotted #94f6ff;
  border-radius: 15%;
  background: transparent;
  animation: laserBurst 0.4s ease-out forwards;
}
.weapon-impact.fx-wish {
  width: 58px;
  height: 58px;
  margin: -29px;
  border: 3px double #a9f8ff;
  background: radial-gradient(circle, #fff, #68e9ff66 22%, transparent 65%);
  animation-duration: 0.65s;
}
.crystal-shard {
  position: absolute;
  width: 7px;
  height: 16px;
  margin: -8px -3px;
  pointer-events: none;
  background: linear-gradient(110deg, #fff, #6ceaff 45%, #168ed9);
  clip-path: polygon(50% 0, 100% 35%, 65% 100%, 0 65%);
  filter: drop-shadow(0 0 4px #7df6ff);
  animation: crystalScatter 0.65s ease-out forwards;
}
@keyframes weaponBurst {
  from {
    transform: scale(0.35);
    opacity: 1;
  }
  to {
    transform: scale(1.65);
    opacity: 0;
  }
}
@keyframes laserBurst {
  from {
    transform: rotate(35deg) scale(0.4);
    opacity: 1;
  }
  to {
    transform: rotate(100deg) scale(1.5);
    opacity: 0;
  }
}
@keyframes crystalScatter {
  from {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }
  to {
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mine {
    animation: none;
  }
  .weapon-impact,
  .crystal-shard {
    animation: none;
  }
}
@keyframes minePulse {
  50% {
    transform: scale(1.12);
    box-shadow:
      0 0 13px #49ffe0,
      0 0 25px #1be0b8;
  }
}

/* ===== 8. Patch layer 8 ===== */
/* All approach headings share the same camera elevation. Rotate artwork, not HP UI. */
.enemy img {
  transform-origin: 50% 50%;
  will-change: transform;
}
.enemy .hp {
  left: 50% !important;
  transform: translateX(-50%);
  width: 42px !important;
}
.enemy {
  z-index: 2;
}
.enemy.deploying {
  z-index: 1;
}
.enemy.deploying .hp {
  visibility: hidden;
}
.enemy.boss {
  z-index: 3;
  width: 200px;
  height: 228px;
  filter: drop-shadow(0 2px 7px #000);
}
.enemy.boss .hp {
  width: 178px !important;
  height: 7px;
  background: #542338;
  border-color: #ffd27a;
}
.enemy.boss .hp i {
  background: linear-gradient(90deg, #ff645c, #ffbd4b);
}
#adReward {
  flex: 1;
  background: #254d68;
  border-color: #73d8ef !important;
  color: #d8f8ff !important;
}
#controls button {
  min-width: 0;
  padding: 5px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1.15;
  font-size: 13px;
  font-weight: 750;
  box-shadow: none;
  transition:
    filter 0.15s,
    border-color 0.15s;
}
#controls button small {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
}
#controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#controls button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@media (hover: hover) {
  #controls button:not(:disabled):hover {
    filter: brightness(1.12);
  }
}
#controls button:not(:disabled):active {
  filter: brightness(0.92);
}
.extension-confirm {
  position: absolute;
  z-index: 20;
  inset: 6px;
  padding: 14px 16px;
  background: #082337f2;
  border: 2px solid #62dfff;
  border-radius: 10px;
  box-shadow: 0 0 24px #26cfff77;
  text-align: center;
  color: #eafaff;
}
.extension-confirm b {
  display: block;
  font-size: 13px;
  letter-spacing: 1px;
  margin-bottom: 7px;
}
.extension-confirm small {
  display: block;
  color: #a9cad8;
  margin-bottom: 12px;
}
.extension-confirm button {
  width: 46%;
  margin: 0 2%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #77e8ff;
  font-weight: 800;
}
.extension-confirm .yes {
  background: #54d7c0;
  color: #062b30;
}
.extension-confirm .no {
  background: #29465a;
  color: #d8f2ff;
}

/* ===== 9. Patch layer 9 ===== */
.unit-vitals {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}
#app[data-mode="build"] .barrier-load,
#app[data-mode="build"] .unit-shield,
#app[data-mode="build"] .shield-halo {
  display: none;
}
#app .barrier-load {
  top: 2px;
}
.mine {
  animation: none;
  filter: none;
  box-shadow: none;
}
.fission-beam {
  height: 2px;
  background: repeating-linear-gradient(90deg, #edb6ff 0 8px, #a43bff 8px 12px, transparent 12px 20px);
  box-shadow: none;
  filter: drop-shadow(0 0 1px #bf55ff);
}
#app[data-mode="battle"] #status {
  display: none;
}
#app .battle-banner {
  top: 45%;
  max-width: 90%;
  white-space: normal;
  animation-duration: 2.1s;
}
#app .battle-banner b {
  font-size: clamp(20px, 5vw, 29px);
}
:root {
  --ui-border: #ffb16c;
}
/* Reserve real space for the three-line HUD and the mobile editing canvas. */
#app header {
  height: 64px;
  min-height: 64px;
  padding: 6px 14px;
  line-height: 1.2;
}
#app header .money {
  font-size: 17px;
  line-height: 1.15;
}
#app header .money small {
  font-size: 10px;
  line-height: 1.25;
}
#app[data-mode="build"] #status {
  display: none;
}
#app #hint {
  bottom: 8px;
  line-height: 14px;
  font-size: 9px;
  pointer-events: none;
}
@media (max-width: 480px) {
  #app header b {
    font-size: 16px;
    letter-spacing: 1px;
  }
  #app header small {
    font-size: 8px;
    letter-spacing: 1.3px;
  }
  #app header .wave {
    font-size: 16px;
  }
  #app #restart,
  #app #speed {
    top: 10px;
    min-height: 34px;
    padding: 7px 10px;
    font-size: 10px;
  }
  #app #scenePicker {
    top: 52px;
    height: 32px;
    font-size: 11px;
    width: 104px;
  }
  #app #trayPanel {
    height: clamp(170px, 27dvh, 205px);
    padding: 8px 10px max(10px, env(safe-area-inset-bottom));
    gap: 6px;
  }
  #app #controls {
    height: 46px;
  }
  #app #controls button {
    font-size: 12px;
  }
  #app #controls button small {
    font-size: 10px;
  }
  #app .card {
    min-height: 0;
  }
  #app .tray-piece {
    --tray-cell: min(40px, calc((100cqw - 12px) / var(--piece-columns, 2)), calc(72px / var(--piece-rows, 2)));
  }
  #app[data-mode="lost"] #trayPanel {
    height: auto;
  }
}
#app #controls button,
#app #restart,
#app #speed,
#app #scenePicker,
#app .extension-confirm,
#app .extension-confirm button,
#app .game-over,
#app .notice {
  border-color: var(--ui-border) !important;
}
#app #battle,
#app #battle:disabled {
  color: var(--ui-border) !important;
}
#app header,
#app #trayPanel {
  border-color: var(--ui-border);
}
#app button:focus-visible,
#app select:focus-visible {
  outline-color: var(--ui-border);
}
.unit-health,
.unit-shield {
  width: 34px;
  max-width: 34px;
  left: 4px;
}
.barrier-load {
  position: absolute;
  left: 4px;
  width: 34px;
  max-width: 34px;
  height: 4px;
  top: -13px;
  background: #183146;
  border: 1px solid #b7f3ff;
  z-index: 6;
  pointer-events: none;
}
.barrier-load i {
  display: block;
  height: 100%;
  background: #37dfff;
  box-shadow: 0 0 5px #37dfff;
}
.extension-preview {
  position: absolute;
  width: 46px;
  height: 46px;
  border: 2px dashed #a4ffdc;
  border-radius: 5px;
  background: #4affb944;
  pointer-events: none;
  z-index: 12;
}
.extension-preview.confirmed-preview {
  border-style: solid;
  border-color: #fff2a6;
  background: #9dffd877;
  box-shadow:
    0 0 14px #8fffff99,
    inset 0 0 10px #fff2a655;
}

/* ===== 10. Sound toggle ===== */
#app #sound,
#app #music {
  position: absolute;
  top: 54px;
  left: 10px;
  z-index: 11;
  min-height: 32px;
  padding: 7px 11px;
  background: #061b2bd9;
  border: 1px solid var(--ui-border, #679bb4);
  border-radius: 7px;
  color: #e0f5ff;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  backdrop-filter: blur(6px);
  cursor: pointer;
}
#app #sound.muted,
#app #music.muted {
  color: #8bbcd2;
  opacity: 0.8;
}
#app #sound:focus-visible,
#app #music:focus-visible {
  outline: 2px solid #8eeaff;
  outline-offset: 3px;
}
@media (max-width: 480px) {
  #app #sound,
#app #music {
    top: 52px;
    min-height: 32px;
    padding: 7px 10px;
  }
}

#app #music {
  top: 94px;
}
@media (max-width: 480px) {
  #app #music {
    top: 90px;
  }
}

/* ===== 11. Tier readability ===== */
/* Gold tier art (-l5) keeps its gold: the accent filter desaturated it to silver,
   which made level 3 look like level 1. */
#app .footprint-art img[src*="-l5."],
#cards .footprint-art img[src*="-l5."],
#ghost .footprint-art img[src*="-l5."] {
  filter: none;
}

/* Level badge: the original dark, see-through chip with the number in the turret's
   role colour. Level 4 reads MAX with a soft glow in the same colour. */
#app .unit .lv,
#app .tray-piece .level {
  min-width: 13px;
  height: 13px;
  padding: 0 2px;
  border-radius: 7px;
  border: 1px solid var(--role-color, #87e9ff) !important;
  background: #06141fb3 !important;
  color: var(--role-color, #e0f5ff) !important;
  display: grid;
  place-items: center;
  font: 900 8.5px/1 system-ui, sans-serif;
  letter-spacing: 0;
  box-shadow: none;
  text-shadow: 0 1px 1px #000;
}
#app .unit .lv[data-tier="4"],
#app .tray-piece .level[data-tier="4"] {
  height: 12px;
  padding: 0 2.5px;
  font-size: 6.5px;
  letter-spacing: 0.3px;
  box-shadow: 0 0 5px var(--role-color, #87e9ff);
}

/* ===== 12. Onboarding: guide, coach, tips ===== */
#app #guide {
  position: absolute;
  top: 94px;
  right: 10px;
  z-index: 11;
  min-height: 32px;
  padding: 7px 11px;
  background: #061b2bd9;
  border: 1px solid var(--ui-border, #679bb4);
  border-radius: 7px;
  color: #e0f5ff;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  backdrop-filter: blur(6px);
  cursor: pointer;
}
@media (max-width: 480px) {
  #app #guide {
    top: 90px;
  }
}
#app #guide:focus-visible {
  outline: 2px solid #8eeaff;
  outline-offset: 3px;
}

.guide-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #020a12cc;
  backdrop-filter: blur(4px);
}
.guide-card {
  position: relative;
  width: min(100%, 400px);
  max-height: calc(100% - 8px);
  overflow-y: auto;
  padding: 20px 18px 16px;
  border: 1px solid var(--ui-border, #76d8e1);
  border-radius: 14px;
  background: linear-gradient(#0b2436, #061420);
  box-shadow:
    0 0 0 1px #000,
    0 18px 50px #000c,
    0 0 30px #76d8e122;
  color: #d8eef8;
}
.guide-card h2 {
  margin: 12px 0 6px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  text-align: center;
  text-wrap: balance;
}
.guide-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.guide-card p b {
  color: #ffd45a;
}
.guide-card .g-foot {
  margin-top: 12px;
  font-size: 11px;
  color: #8bbcd2;
}
.g-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #8bbcd2;
  font-size: 16px;
  cursor: pointer;
}
.g-art {
  display: grid;
  place-items: center;
  min-height: 120px;
}
.g-grid {
  display: grid;
  grid-template-columns: repeat(3, 40px);
  gap: 4px;
}
.g-grid i {
  width: 40px;
  height: 40px;
  border: 1px solid #84d5e699;
  border-radius: 6px;
  background: #4b95ab38;
}
.g-grid .g-filled img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: g-drop 1.8s ease-out infinite;
}
/* Rises from below, like dragging a turret up from the Deployment Bay. */
@keyframes g-drop {
  0% {
    transform: translateY(96px) scale(1.1);
    opacity: 0;
  }
  35%,
  100% {
    transform: none;
    opacity: 1;
  }
}
.g-grow {
  grid-template-columns: repeat(4, 40px);
}
.g-grow i:nth-child(n + 10) {
  grid-column: 4;
}
.g-grow i:nth-child(10) {
  grid-row: 2;
}
.g-grow i:nth-child(11) {
  grid-row: 3;
}
.g-grid .g-new {
  border: 1.5px dashed #ffd45a;
  background: #ffd45a26;
  animation: g-pulse 1.6s ease-in-out infinite;
}
@keyframes g-pulse {
  50% {
    background: #ffd45a4d;
  }
}
.g-levels {
  display: flex;
  align-items: center;
  gap: 4px;
}
.g-level {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
}
.g-level img {
  width: 54px;
  height: 64px;
  object-fit: contain;
}
.g-level figcaption {
  min-width: 18px;
  padding: 2px 5px;
  border: 1px solid #ffad55;
  border-radius: 9px;
  background: #06141fb3;
  color: #ffad55;
  font: 900 10px/1 system-ui, sans-serif;
  text-align: center;
}
.g-level figcaption[data-tier="4"] {
  box-shadow: 0 0 6px #ffad55;
}
.g-arrow {
  color: #8bbcd2;
  font-size: 18px;
}
.g-enemies {
  display: flex;
  align-items: center;
  gap: 10px;
}
.g-enemies img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}
.g-enemies .g-boss {
  width: 96px;
  height: 96px;
}
.g-turrets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  text-align: left;
}
.g-turrets li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px;
  border: 1px solid #ffffff14;
  border-radius: 8px;
  background: #ffffff08;
}
.g-turrets img {
  flex: none;
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.g-turrets div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.g-turrets b {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--role-color);
}
.g-turrets svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.g-turrets span {
  font-size: 10.5px;
  line-height: 1.35;
  color: #b9d4e0;
}
.g-crystal {
  font-size: 64px;
  color: #69e8ff;
  text-shadow: 0 0 24px #69e8ff88;
}
.g-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 12px;
}
.g-dots i {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #ffffff33;
  transition: width 0.2s;
}
.g-dots i.on {
  width: 18px;
  background: #76d8e1;
}
.g-actions {
  display: flex;
  gap: 8px;
}
.g-actions button {
  flex: 1;
  min-height: 42px;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.g-back,
.g-replay {
  border: 1px solid #679bb4;
  background: #0d2a3d;
  color: #cfeaf5;
}
.g-next {
  border: 1px solid #76d8e1;
  background: #76d8e1;
  color: #04131e;
}
.g-actions button:focus-visible,
.g-close:focus-visible {
  outline: 2px solid #ffd45a;
  outline-offset: 2px;
}

/* Coach bubble and touch point (fixed, so they follow the board's zoom). */
.coach-bubble {
  position: fixed;
  z-index: 70;
  box-sizing: border-box;
  padding: 12px 14px 10px;
  border: 1px solid #ffd45a;
  border-radius: 12px;
  background: #071a28f2;
  box-shadow: 0 10px 30px #000b;
  color: #e6f4fa;
  pointer-events: auto;
}
.coach-bubble .c-text {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.45;
}
.coach-bubble .c-text b {
  color: #ffd45a;
}
.coach-bubble .c-actions {
  display: flex;
  justify-content: flex-end;
}
.coach-bubble button {
  min-height: 32px;
  padding: 6px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #8bbcd2;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.coach-bubble .c-ok {
  background: #ffd45a;
  color: #2a1d00;
}
.coach-touch {
  position: fixed;
  left: -22px;
  top: -22px;
  z-index: 69;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #ffffff40;
  box-shadow:
    0 0 0 6px #ffd45a55,
    0 4px 14px #000a;
  pointer-events: none;
}

/* One-time tips */
.tip-toast {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 196px;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  border: 1px solid #76d8e1;
  border-radius: 10px;
  background: #071a28f2;
  box-shadow: 0 10px 30px #000b;
  animation: tip-in 0.35s ease-out;
}
.tip-toast p {
  flex: 1;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #e6f4fa;
}
.tip-toast b {
  color: #ffd45a;
}
.tip-toast button {
  flex: none;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #76d8e1;
  border-radius: 7px;
  background: #0d2a3d;
  color: #e0f5ff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
@keyframes tip-in {
  from {
    transform: translateY(-8px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .g-grid .g-filled img,
  .g-grid .g-new,
  .tip-toast {
    animation: none;
  }
}

/* Game messages: below the corner buttons, wrapping instead of running off screen. */
#app .notice {
  top: 136px;
  width: max-content;
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  text-wrap: balance;
}
.coach-touch {
  z-index: 71; /* above the coach bubble so the drag path stays visible */
}
.restart-card h2 {
  margin-top: 4px;
}
.restart-card p {
  margin-bottom: 16px;
}
.restart-card .r-go {
  border-color: #ff8a6b;
  background: #ff8a6b;
  color: #2a0d04;
}

/* ===== 13. Economy: vault, ads, offers ===== */
#trayHead {
  gap: 8px;
  min-height: 30px;
}
#trayHead #available {
  margin-right: auto;
}
.vault {
  display: flex;
  align-items: center;
  gap: 5px;
}
.vault-label {
  font-size: 9px;
  letter-spacing: 1px;
  color: #a0c3d6;
  font-weight: 800;
}
.vault-slot {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px dashed #76d8e1aa;
  border-radius: 7px;
  background: #06182766;
  color: #76d8e1;
  font: inherit;
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.vault-slot img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  pointer-events: none;
}
.vault-slot.filled {
  border: 1px solid var(--role-color, #76d8e1);
  background: #0a2232;
}
.vault-slot.armed {
  box-shadow: 0 0 0 2px #ffd45a;
}
.vault-slot.locked {
  border-style: solid;
  border-color: #ffffff22;
  background: #00000040;
  color: #ffd45a;
  gap: 0;
}
.vault-lock {
  font-size: 10px;
  line-height: 1;
  filter: grayscale(1) brightness(1.6);
}
.vault-slot small {
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
}
.vault-plus {
  font-size: 16px;
  line-height: 1;
  opacity: 0.6;
}
.vault-cells {
  font-size: 18px;
  line-height: 1;
}
.vault-lv {
  position: absolute;
  left: -4px;
  bottom: -4px;
  padding: 0 2px;
  min-width: 10px;
  border: 1px solid var(--role-color, #76d8e1);
  border-radius: 6px;
  background: #06141f;
  color: var(--role-color, #76d8e1);
  font: 900 7px/9px system-ui, sans-serif;
  font-style: normal;
}
.vault-cost {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffd45a;
}
.vault.drop-ready .vault-slot:not(.filled):not(.locked) {
  border-color: #ffd45a;
  background: #ffd45a22;
  transform: scale(1.12);
}
.vault-slot:focus-visible {
  outline: 2px solid #ffd45a;
  outline-offset: 2px;
}
#adReward.spent {
  opacity: 0.55;
}
.eco-card p {
  margin-bottom: 16px;
}
.eco-actions button:disabled {
  opacity: 0.35;
  cursor: default;
}
.ad-sim .guide-card {
  text-align: center;
}
.ad-tag {
  font-size: 10px !important;
  letter-spacing: 1.5px;
  color: #ffd45a;
}
.ad-bar {
  height: 6px;
  margin: 14px 0;
  border-radius: 3px;
  background: #ffffff1a;
  overflow: hidden;
}
.ad-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: #76d8e1;
}
.ad-note {
  font-size: 11px !important;
  color: #8bbcd2;
}
.eco-offer {
  position: absolute;
  left: 12px;
  right: 12px;
  top: var(--offer-top, 196px); /* set from JS to sit just above the bay */
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border: 1px solid #ffd45a;
  border-radius: 10px;
  background: #071a28f2;
  box-shadow: 0 10px 30px #000b;
  animation: tip-in 0.35s ease-out;
}
.eco-offer p {
  flex: 1;
  margin: 0;
  font-size: 13px;
  color: #e6f4fa;
}
.eco-offer b {
  color: #69e8ff;
}
.eco-offer .eco-double {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #ffd45a;
  color: #2a1d00;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.eco-offer .eco-close {
  width: 32px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #8bbcd2;
  cursor: pointer;
}
.g-stars {
  display: flex;
  align-items: center;
  gap: 18px;
}
.g-stars > span {
  font-size: 58px;
  color: #ffd45a;
  text-shadow: 0 0 22px #ffd45a77;
}
.g-vault {
  display: flex;
  gap: 6px;
}
.g-vault i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff22;
  border-radius: 8px;
  background: #00000040;
  font-size: 12px;
  font-style: normal;
  filter: grayscale(1) brightness(1.5);
}
.g-vault i.on {
  border: 1px dashed #76d8e1;
  background: #76d8e122;
  filter: none;
}
/* Keep the name label clear of the piece: centre pieces in the space above it. */
#app .card {
  box-sizing: border-box;
  padding-bottom: 16px;
}
@media (max-height: 700px) {
  #app .tray-piece {
    --tray-cell: min(32px, calc((100cqw - 12px) / var(--piece-columns, 2)), calc(50px / var(--piece-rows, 2)));
  }
}

/* Level numbers: exact circles, digit centred horizontally and vertically. */
#app .unit .lv,
#app .tray-piece .level {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  min-width: 13px;
  height: 13px;
  padding: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-box: trim-both cap alphabetic; /* trims to the digit's cap height so flex centres it exactly */
}
#app .unit .lv[data-tier="4"],
#app .tray-piece .level[data-tier="4"] {
  width: auto;
  height: 12px;
  padding: 0 2.5px;
}

/* ===== 14. Merge hints ===== */
#board .unit.merge-match {
  z-index: 3;
}
#board .unit svg.merge-outline,
#cards .tray-piece svg.merge-outline {
  position: absolute;
  inset: auto;
  left: -2px;
  top: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  max-height: none;
  margin: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
  animation: none;
  filter: none;
  /* Saturated version of the role colour so it reads on every background */
  color: color-mix(in srgb, var(--role-color, #ffd45a) 80%, #ffffff 20%);
}
.merge-outline path {
  fill: none;
  stroke-linejoin: round;
}
.merge-outline .mo-wash {
  fill: currentColor;
  fill-opacity: 0.16;
  stroke: none;
}
.merge-outline .mo-casing {
  stroke: #02070c;
  stroke-width: 6.5px;
  stroke-opacity: 0.85;
}
.merge-outline .mo-glow {
  stroke: currentColor;
  stroke-width: 9px;
  stroke-opacity: 0.35;
  filter: blur(3px);
  animation: moGlow 1s ease-in-out infinite alternate;
}
.merge-outline .mo-line {
  stroke: currentColor;
  stroke-width: 3.2px;
}
@keyframes moGlow {
  from { stroke-opacity: 0.15; }
  to { stroke-opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
  .merge-outline .mo-glow { animation: none; stroke-opacity: 0.5; }
}
.g-star {
  color: #ffd45a;
  text-shadow: 0 0 24px #ffd45a88;
}
.g-vault-demo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.g-bay-item {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid #d8d6a480;
  border-radius: 6px;
  animation: g-to-vault 2s ease-in-out infinite;
}
.g-bay-item img,
.g-vault i img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}
.g-vault i {
  flex-direction: column;
  width: 44px;
  height: 44px;
}
.g-vault i small {
  font-size: 8px;
  color: #ffd45a;
  font-weight: 800;
}
.g-vault i.on {
  filter: none;
}
.g-vault i.on img {
  animation: g-arrive 2s ease-in-out infinite;
}
@keyframes g-to-vault {
  0%,
  20% {
    transform: none;
    opacity: 1;
  }
  55%,
  100% {
    transform: translateX(60px) scale(0.8);
    opacity: 0;
  }
}
@keyframes g-arrive {
  0%,
  50% {
    opacity: 0;
  }
  65%,
  100% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .g-bay-item,
  .g-vault i.on img {
    animation: none;
  }
}

/* ===== 15. Victory screen & Star Shop ===== */
.money {
  position: relative;
}
#starPlus {
  position: absolute;
  right: -26px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #ffd45a;
  color: #2a1d00;
  font: 900 17px/22px -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  box-shadow: 0 0 0 2px rgba(255, 212, 90, 0.3);
  cursor: pointer;
}
#starPlus::before {
  content: "";
  position: absolute;
  inset: -11px;
}
#starPlus:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
header .money {
  margin-right: 26px;
}

.victory-overlay,
.shop-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #e6f4fa;
}
.victory-overlay {
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(ellipse at 50% 45%, rgba(2, 10, 18, 0.55), rgba(2, 10, 18, 0.9) 75%);
  backdrop-filter: blur(3px);
  animation: v-fade 0.3s ease-out both;
}
@keyframes v-fade {
  from {
    opacity: 0;
  }
}
.v-fx i {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d0 0%, #ffb347 30%, #ff5a2a 55%, rgba(255, 90, 42, 0) 72%);
  animation: v-boom 2.4s ease-out infinite;
  pointer-events: none;
}
.v-fx i:nth-child(1) {
  left: 12%;
  top: 10%;
  width: 120px;
  height: 120px;
}
.v-fx i:nth-child(2) {
  right: 8%;
  top: 16%;
  width: 96px;
  height: 96px;
  animation-delay: 0.9s;
}
.v-fx i:nth-child(3) {
  left: 40%;
  top: 4%;
  width: 150px;
  height: 150px;
  animation-delay: 1.6s;
}
@keyframes v-boom {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  60% {
    transform: scale(1.25);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
.v-stack {
  position: relative;
  width: min(100%, 360px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.v-card {
  box-sizing: border-box;
  padding: 24px 20px 20px;
  border-radius: 18px;
  border: 1px solid #76d8e1;
  background: linear-gradient(#0b2436f5, #061420f5);
  box-shadow:
    0 0 0 1px #000,
    0 24px 60px #000c,
    0 0 40px rgba(118, 216, 225, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: v-rise 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.boss .v-card {
  border-color: #ffd45a;
  background: linear-gradient(#1a2a2ef5, #0a1418f5);
  box-shadow:
    0 0 0 1px #000,
    0 24px 60px #000c,
    0 0 44px rgba(255, 212, 90, 0.3);
}
@keyframes v-rise {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}
.v-kicker {
  margin: 0;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 4px;
  color: #76d8e1;
}
.boss .v-kicker {
  color: #ffd45a;
}
.v-card h2 {
  margin: -6px 0 0;
  font-weight: 900;
  font-size: 32px;
  line-height: 1.05;
  color: #fff;
  text-align: center;
  text-wrap: balance;
}
.v-sub {
  margin: -6px 0 0;
  font-size: 14px;
  color: #c9dbe3;
}
.v-stars {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.v-stars span {
  width: 38px;
  height: 38px;
  fill: #2c3e4c;
  animation: v-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.v-stars span:nth-child(2) {
  width: 50px;
  height: 50px;
  animation-delay: 0.12s;
}
.v-stars span:nth-child(3) {
  animation-delay: 0.24s;
}
.v-stars span.on {
  fill: #ffd45a;
  filter: drop-shadow(0 0 8px rgba(255, 212, 90, 0.6));
}
.v-stars svg {
  width: 100%;
  height: 100%;
}
@keyframes v-pop {
  0% {
    transform: scale(0) rotate(-30deg);
  }
  70% {
    transform: scale(1.2);
  }
}
.v-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.v-stats div {
  padding: 10px 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.v-stats b {
  font-weight: 900;
  font-size: 19px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.v-stats b.v-gem {
  color: #69e8ff;
}
.v-stats small {
  font-size: 10px;
  letter-spacing: 1px;
  color: #a9c7d4;
}
.v-double,
.v-continue {
  width: 100%;
  border-radius: 12px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.v-double {
  min-height: 54px;
  border: 0;
  font-size: 18px;
  color: #2a1d00;
  background: linear-gradient(110deg, #ffd45a 40%, #fff2b8 50%, #ffd45a 60%);
  background-size: 200% 100%;
  animation: v-shine 2.6s linear infinite;
  box-shadow: 0 6px 20px rgba(255, 212, 90, 0.35);
}
.v-double:disabled {
  animation: none;
  background: #3a4a2a;
  color: #c8f08a;
  box-shadow: none;
  font-size: 15px;
}
@keyframes v-shine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.v-continue {
  min-height: 46px;
  border: 1px solid #679bb4;
  background: #0d2a3d;
  color: #cfeaf5;
  font-size: 15px;
}
.v-offer {
  position: relative;
  box-sizing: border-box;
  padding: 16px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 130, 150, 0.6);
  background: linear-gradient(120deg, #2a1028f2, #121a2ef2);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: v-rise 0.55s 0.3s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.v-badge {
  position: absolute;
  top: -10px;
  left: 14px;
  padding: 3px 9px;
  border-radius: 6px;
  background: #ff8296;
  color: #2a0a12;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 1px;
}
.v-offer-star {
  flex: none;
  width: 44px;
  height: 44px;
  fill: #ffd45a;
  filter: drop-shadow(0 0 10px rgba(255, 212, 90, 0.5));
}
.v-offer-star svg {
  width: 100%;
  height: 100%;
}
.v-offer-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v-offer-text b {
  font-weight: 900;
  font-size: 18px;
  color: #fff;
}
.v-offer-text small {
  font-size: 12px;
  color: #c9b8d6;
}
.v-buy {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: #ff8296;
  color: #2a0a12;
  font: inherit;
  font-weight: 900;
  font-size: 16px;
  cursor: pointer;
}

.shop-overlay {
  display: flex;
  align-items: flex-end;
  background: rgba(2, 10, 18, 0.78);
  animation: v-fade 0.25s ease-out both;
}
.shop-sheet {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 16px max(22px, env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  border-top: 1px solid #76d8e1;
  background: linear-gradient(#0d2638, #061420);
  box-shadow: 0 -20px 50px #000c;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: v-rise 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.shop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.shop-head h2 {
  margin: 0;
  font-weight: 900;
  font-size: 24px;
  color: #fff;
}
.shop-head p {
  margin: 2px 0 0;
  font-size: 13px;
  color: #a9c7d4;
}
.shop-head p b {
  color: #ffd45a;
}
.shop-close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #cfeaf5;
  font-size: 16px;
  cursor: pointer;
}
.shop-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}
.shop-row.free {
  border: 1px dashed #76d8e1;
  background: rgba(118, 216, 225, 0.06);
}
.shop-row > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.shop-row b {
  font-size: 15px;
  color: #fff;
}
.shop-row small {
  font-size: 12px;
  color: #a9c7d4;
}
.shop-row button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  font: inherit;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
}
.shop-free {
  border: 1px solid #76d8e1;
  background: #0d2a3d;
  color: #e0f5ff;
}
.shop-pass {
  border: 0;
  background: #ff8296;
  color: #2a0a12;
}
.shop-row button:disabled {
  opacity: 0.5;
  cursor: default;
}
.shop-packs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 8px;
}
.shop-pack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 6px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}
.shop-pack.t1 {
  border: 2px solid #ffd45a;
  background: rgba(255, 212, 90, 0.08);
  box-shadow: 0 0 24px rgba(255, 212, 90, 0.2);
}
.shop-pack.t2 {
  border-color: #7ff0a5;
  background: rgba(127, 240, 165, 0.06);
}
.shop-tag {
  position: absolute;
  top: -10px;
  padding: 3px 7px;
  border-radius: 6px;
  background: #ffd45a;
  color: #2a1d00;
  font-weight: 900;
  font-size: 9.5px;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.t2 .shop-tag {
  background: #7ff0a5;
  color: #04210f;
}
.shop-icon {
  display: flex;
  height: 36px;
  align-items: center;
  fill: #ffd45a;
}
.shop-icon svg {
  width: 30px;
  height: 30px;
  margin: 0 -7px;
}
.shop-icon.n3 svg:nth-child(2) {
  width: 36px;
  height: 36px;
  position: relative;
  z-index: 1;
}
.shop-pack b {
  font-weight: 900;
  font-size: 18px;
  color: #fff;
}
.shop-pack small {
  font-size: 10.5px;
  color: #a9c7d4;
  text-align: center;
}
.t1 small {
  color: #ffd45a;
}
.t2 small {
  color: #7ff0a5;
}
.shop-pack button {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: #ffd45a;
  color: #2a1d00;
  font: inherit;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
}
.shop-note {
  margin: 0;
  font-size: 11px;
  color: #8bbcd2;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .v-fx i,
  .v-card,
  .v-offer,
  .v-stars span,
  .v-double,
  .shop-sheet,
  .victory-overlay,
  .shop-overlay {
    animation: none;
  }
}

/* ===== 16. Compact HUD: menu button, speed chip, stars chip ===== */
header .money,
#app header .money {
  margin-right: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#app header .money {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  height: 100%;
  margin: 0;
  font-size: 19px;
  line-height: 1;
}
#app header .money .crystals {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  font-variant-numeric: tabular-nums;
}
#app header .money .crystals i {
  font-style: normal;
  font-size: 17px;
  line-height: 1;
}
#app header .money .hp-legacy {
  display: none;
}
#app header .money .star-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 2px 0 9px;
  border: 1px solid rgba(255, 212, 90, 0.45);
  border-radius: 999px;
  background: rgba(255, 212, 90, 0.1);
  line-height: 1;
}
#app header .money .star-chip #points {
  display: inline;
  margin: 0;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}
#app header .money .star-chip #starPlus {
  position: relative;
  right: auto;
  bottom: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 20px;
  box-shadow: none;
}

/* Health in the bay header (build) */
#app #trayHead {
  position: relative;
}
#app #trayHead .bay-hp {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(142, 228, 194, 0.4);
  background: rgba(142, 228, 194, 0.1);
  color: #8ee4c2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#app #trayHead .bay-hp i {
  font-style: normal;
}
#app #trayHead .bay-hp[data-tone="warn"] {
  color: #ffc861;
  border-color: rgba(255, 200, 97, 0.45);
  background: rgba(255, 200, 97, 0.1);
}
#app #trayHead .bay-hp[data-tone="low"] {
  color: #ff7a6b;
  border-color: rgba(255, 122, 107, 0.5);
  background: rgba(255, 122, 107, 0.12);
}

/* Health bar along the bottom of the battlefield (battle) */
#app .battle-hp {
  display: none;
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 12;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  --hp: #5fe0a8;
}
#app[data-mode="battle"] .battle-hp {
  display: flex;
}
#app .battle-hp[data-tone="warn"] { --hp: #ffc861; }
#app .battle-hp[data-tone="low"] { --hp: #ff6b5b; }
#app .battle-hp-label {
  min-width: 52px;
  color: var(--hp);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
#app .battle-hp-label b {
  font-weight: 900;
}
#app .battle-hp-track {
  position: relative;
  flex: 1;
  height: 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
#app .battle-hp-track i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 6px;
}
#app .battle-hp-fill {
  background: var(--hp);
  box-shadow: 0 0 10px var(--hp);
  transition: width 0.25s ease-out, background-color 0.3s;
}
#app .battle-hp-lag {
  background: #fff;
  opacity: 0.55;
  transition: width 0.6s ease-in 0.35s;
}
#app .battle-hp.hit .battle-hp-track {
  animation: hpHit 0.45s ease-out;
}
@keyframes hpHit {
  0% { transform: translateX(0); border-color: #fff; }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  #app .battle-hp.hit .battle-hp-track { animation: none; }
  #app .battle-hp-fill, #app .battle-hp-lag { transition: none; }
}

#app #menuBtn,
#app #speed {
  position: absolute;
  top: 10px;
  z-index: 12;
  height: 34px;
  min-height: 0;
  background: #061b2bd9;
  border: 1px solid var(--ui-border, #679bb4);
  border-radius: 9px;
  color: #e0f5ff;
  backdrop-filter: blur(6px);
  cursor: pointer;
}
#app #menuBtn {
  left: 10px;
  width: 34px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
#app #menuBtn i {
  display: block;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.15s, opacity 0.15s;
}
#app #menuBtn.open i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
#app #menuBtn.open i:nth-child(2) { opacity: 0; }
#app #menuBtn.open i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
#app #speed {
  right: 10px;
  left: auto;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}
#app #speed::before {
  content: "▸▸";
  margin-right: 4px;
  font-size: 10px;
  letter-spacing: -2px;
  opacity: 0.8;
}
#app #menuBtn:focus-visible,
#app #speed:focus-visible {
  outline: 2px solid #8eeaff;
  outline-offset: 2px;
}

#app #hudMenu {
  position: absolute;
  top: 50px;
  left: 10px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 172px;
  padding: 8px;
  background: #061b2bf2;
  border: 1px solid var(--ui-border, #679bb4);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}
#app #hudMenu[hidden] {
  display: none;
}
#app #hudMenu .menu-view > button,
#app #hudMenu .menu-row {
  position: static;
  inset: auto;
  width: 100%;
  min-height: 38px;
  height: auto;
  margin: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(103, 155, 180, 0.4) !important;
  border-radius: 8px;
  color: #e0f5ff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-align: left;
  backdrop-filter: none;
  opacity: 1;
}
#app #hudMenu > button:active {
  background: rgba(142, 234, 255, 0.12);
}
#app #hudMenu .menu-view {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#app #hudMenu .menu-view[hidden] {
  display: none;
}
#app #hudMenu .menu-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}
#app #hudMenu .menu-view > button,
#app #hudMenu .menu-opt {
  position: relative;
  width: 100%;
  min-height: 38px;
  margin: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(103, 155, 180, 0.4) !important;
  border-radius: 8px;
  color: #e0f5ff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-align: left;
  cursor: pointer;
}
#app #hudMenu .menu-scene-btn {
  flex-wrap: wrap;
  row-gap: 3px;
  padding: 7px 12px !important;
}
#app #hudMenu .menu-scene-btn small {
  flex-basis: 100%;
  color: #b6d1e0;
  font-size: 9px;
  letter-spacing: 1px;
}
#app #hudMenu .menu-scene-val {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: uppercase;
}
#app #hudMenu .menu-scene-btn > i,
#app #hudMenu .menu-back > i {
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  color: #8eeaff;
}
#app #hudMenu .menu-view > .menu-back {
  background: none !important;
  border-color: transparent !important;
  color: #b6d1e0 !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  padding: 0 6px !important;
  min-height: 30px !important;
}
#app #hudMenu .menu-scene-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: min(320px, 46dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-right: -4px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #2b6683 transparent;
}
#app #hudMenu .menu-opt {
  flex: none;
  justify-content: space-between;
  min-height: 34px;
  text-transform: uppercase;
}
#app #hudMenu .menu-opt i {
  font-style: normal;
  color: #8eeaff;
  visibility: hidden;
}
#app #hudMenu .menu-scene-list .menu-opt.on {
  background: rgba(142, 234, 255, 0.12) !important;
  border-color: #8eeaff !important;
  color: #ffffff;
}
#app #hudMenu .menu-opt.on i {
  visibility: visible;
}
#app #hudMenu .menu-view > button:active {
  background: rgba(142, 234, 255, 0.12);
}
#app #hudMenu .menu-view > button:focus-visible,
#app #hudMenu .menu-opt:focus-visible {
  outline: 2px solid #8eeaff;
  outline-offset: 1px;
}
#app #hudMenu #sound.muted,
#app #hudMenu #music.muted {
  color: #8bbcd2;
}
#app[data-mode="battle"] #hint {
  display: none;
}
@media (max-width: 480px) {
  /* Let the wave label take the space that's left, so wider crystal counts don't collide with it. */
  #app header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 8px;
  }
  #app header .money {
    gap: 8px;
    font-size: 17px;
  }
  #app header .money .crystals i {
    font-size: 15px;
  }
}

/* Star Shop: slides up from the bottom, slides back down on close */
#app .shop-overlay {
  animation: none;
  opacity: 0;
  transition: opacity 0.28s ease-out;
}
#app .shop-overlay .shop-sheet {
  animation: none;
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.2, 0.85, 0.25, 1);
}
#app .shop-overlay.open {
  opacity: 1;
}
#app .shop-overlay.open .shop-sheet {
  transform: translateY(0);
}
#app .shop-overlay.closing {
  pointer-events: none;
  transition-duration: 0.26s;
  transition-delay: 0.04s;
}
#app .shop-overlay.closing .shop-sheet {
  transition: transform 0.28s cubic-bezier(0.5, 0, 0.75, 0);
}
@media (prefers-reduced-motion: reduce) {
  #app .shop-overlay,
  #app .shop-overlay .shop-sheet {
    transition: none;
  }
}

/* Star "+" drawn with two bars so it sits exactly in the centre of its circle */
#app header .money .star-chip #starPlus {
  font-size: 0;
  color: transparent;
  background-color: #ffd45a;
  background-image: linear-gradient(#2a1d00, #2a1d00), linear-gradient(#2a1d00, #2a1d00);
  background-size: 10px 2.5px, 2.5px 10px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== 17. Brand logo in the top bar ===== */
#app header .brand {
  display: flex;
  align-items: center;
  min-width: 0;
}
#app header .brand img {
  display: block;
  height: 38px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
@media (max-width: 400px) {
  #app header .brand img {
    height: 32px;
  }
}
#app header .wave {
  white-space: nowrap;
}
@media (max-width: 370px) {
  #app header {
    padding-left: 10px;
    padding-right: 10px;
    column-gap: 6px;
  }
  #app header .brand img {
    height: 28px;
  }
  #app header .wave {
    font-size: 15px;
  }
  #app header .money {
    gap: 6px;
    font-size: 16px;
  }
}

/* ===== 18. Top bar never overflows ===== */
#app header {
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: 10px;
}
#app header .brand {
  min-width: 0;
  overflow: hidden;
}
#app header .wave {
  text-align: center;
}
#app header .num-src {
  display: none !important;
}
#app header .num-view {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#app header .money {
  gap: 8px;
}
#app header .money .crystals {
  gap: 4px;
}
#app header .money .star-chip {
  gap: 5px;
  padding-left: 8px;
  letter-spacing: 0;
}
#app header .money .star-chip .num-view {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  color: #ffe39a;
}
@media (max-width: 400px) {
  #app header {
    column-gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
  }
  #app header .money {
    gap: 6px;
    font-size: 16px;
  }
  #app header .money .crystals i {
    font-size: 13px;
  }
}

/* ===== 19. Lives ===== */
.lives-pips {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  vertical-align: middle;
}
.lives-pips i {
  display: block;
  width: 10px;
  height: 12px;
}
.lives-pips svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: rgba(255, 255, 255, 0.14);
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1;
}
.lives-pips i.on svg {
  fill: #ffd45a;
  stroke: #fff4cf;
  filter: drop-shadow(0 0 3px rgba(255, 212, 90, 0.6));
}
#app .battle-hp-label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.eco-card small {
  display: block;
  margin-top: 8px;
  color: #9fc3d6;
  font-size: 12px;
}
.eco-actions:has(> button:nth-child(3)) {
  flex-direction: column;
  align-items: stretch;
}
.eco-actions:has(> button:nth-child(3)) > button {
  width: 100%;
}

/* ===== 20. Variety: special rounds, swarm, faction bosses ===== */
.special-overlay {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 8, 16, 0.72);
  animation: v-fade 0.25s ease-out both;
}
.special-card {
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  padding: 22px 20px 20px;
  border-radius: 18px;
  text-align: center;
  color: #fff;
  background: linear-gradient(#141025, #090a18);
  border: 1px solid var(--sp);
  box-shadow: 0 0 40px color-mix(in srgb, var(--sp) 40%, transparent);
  animation: v-rise 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.special-card small {
  font-size: 11px;
  letter-spacing: 3px;
  font-weight: 700;
  color: var(--sp);
}
.special-card h2 {
  margin: 8px 0 4px;
  font-size: 32px;
  letter-spacing: 1px;
}
.special-card p {
  margin: 0 0 14px;
  font-size: 13px;
  color: #b9b4cf;
}
.special-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.special-card li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  color: #e6e2f2;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid color-mix(in srgb, var(--sp) 35%, transparent);
}
.special-card li i {
  width: 20px;
  font-style: normal;
  text-align: center;
  color: var(--sp);
}
.special-reward {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  color: #ffe39a;
}
.special-reward b {
  margin-left: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 212, 90, 0.5);
  background: rgba(255, 212, 90, 0.12);
}
.special-go {
  margin-top: 16px;
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 12px;
  background: var(--sp);
  color: #0d0a18;
  font: inherit;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}
.special-go:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
#field.blackout::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 3, 8, 0.93) 0%, rgba(0, 3, 8, 0.8) 38%, rgba(0, 3, 8, 0.35) 66%, rgba(0, 3, 8, 0.1) 100%);
}
.loot-pop {
  position: absolute;
  z-index: 20;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: 13px;
  color: #ffe39a;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
  animation: lootUp 0.9s ease-out forwards;
}
@keyframes lootUp {
  to {
    transform: translate(-50%, -150%);
    opacity: 0;
  }
}
.enemy.small .astral-part,
.enemy.small > img {
  scale: 0.62;
}
.enemy.regen {
  filter: drop-shadow(0 0 10px rgba(77, 255, 143, 0.7));
}

/* ===== 21. Type system =====
   Display (Russo One): screen titles only. Everything else uses the game's system font:
   eyebrow labels 11px/700 tracked caps · body 13px/1.5 · numbers 900 tabular ·
   buttons 900 (hero gold 54px, primary cyan 46px, secondary dark 46px, compact 42px/13px/800). */
@font-face {
  font-family: "Russo One";
  src: url("../assets/fonts/russo-one.woff2") format("woff2");
  font-display: swap;
}
:root {
  --font-display: "Russo One", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.battle-banner b,
.game-over h2,
.guide-card h2,
.v-card h2,
.shop-head h2,
.special-card h2,
.pz h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.guide-card h2 {
  font-size: 20px;
}
.special-go {
  font-family: var(--font-ui);
  font-weight: 900;
}

/* ===== 22. Puzzle breaks (Reactor Link, Decrypt) ===== */
.pz {
  position: absolute;
  inset: 0;
  z-index: 75;
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  color: #d8eef8;
  background: radial-gradient(ellipse at 50% 35%, #12324a, #040c16 75%);
  animation: v-fade 0.25s ease-out both;
}
.pz.pz-win {
  background: radial-gradient(ellipse at 50% 35%, #2a2408, #040c16 75%);
}
.pz-top {
  flex: none;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #2b6683;
  background: linear-gradient(#03101f, #071e30);
}
.pz-eyebrow,
.pz-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #76d7ff;
}
.pz-kicker {
  display: block;
  color: #ffcf6b;
  letter-spacing: 3px;
}
.pz-fail .pz-kicker {
  color: #ff9b8a;
}
.pz-timer {
  font-size: 18px;
  font-weight: 900;
  color: #ffe39a;
  font-variant-numeric: tabular-nums;
}
.pz-timer.low {
  color: #ff7a6b;
}
.pz-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 12px;
  padding: 12px 16px max(18px, env(safe-area-inset-bottom));
}
.pz-head {
  text-align: center;
}
.pz h2 {
  margin: 4px 0 0;
  font-size: 28px;
  color: #fff;
}
.pz-head p {
  margin: 6px 6px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #a9c7d4;
}
.pz-chips {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.pz-chips span {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #bfe9ff;
  background: rgba(118, 216, 225, 0.08);
  border: 1px solid rgba(118, 216, 225, 0.35);
  font-variant-numeric: tabular-nums;
}
.pz-chips span.gold {
  color: #ffe39a;
  background: rgba(255, 212, 90, 0.12);
  border-color: rgba(255, 212, 90, 0.5);
}
.pz-stage {
  display: flex;
  justify-content: center;
}
.pz-reward {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #e9dcb8;
  background: rgba(255, 212, 90, 0.07);
  border: 1px solid rgba(255, 212, 90, 0.3);
}
.pz-reward b {
  color: #ffe39a;
}
.pz-win .pz-reward,
.pz-fail .pz-reward {
  padding: 0;
  background: none;
  border: 0;
}
.pz-gains {
  display: flex;
  gap: 8px;
}
.pz-gains > div {
  flex: 1;
  padding: 10px 4px;
  border-radius: 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(118, 216, 225, 0.4);
}
.pz-gains b {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: #8ef0ff;
}
.pz-gains small {
  font-size: 11px;
  color: #9fb4c4;
}
.pz-gains .star {
  border-color: rgba(255, 212, 90, 0.5);
}
.pz-gains .star b {
  color: #ffe39a;
}
.pz-gains .gold {
  border-color: rgba(255, 179, 71, 0.5);
}
.pz-gains .gold b {
  color: #ffb347;
}
.pz-actions {
  display: flex;
  gap: 10px;
}
.pz-btn {
  flex: 1;
  min-height: 46px;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}
.pz-btn.sec {
  border: 1px solid #679bb4;
  background: #0d2a3d;
  color: #cfeaf5;
}
.pz-btn.hero {
  min-height: 54px;
  font-size: 18px;
  border: 0;
  color: #2a1d00;
  background: #ffd45a;
}
.pz-btn:disabled {
  opacity: 0.45;
}
.pz-btn:focus-visible {
  outline: 2px solid #ffd45a;
  outline-offset: 2px;
}

/* Reactor Link board */
.rx-board {
  position: relative;
  flex: none;
}
.rx-plate {
  position: absolute;
  border-radius: 16px;
  background: rgba(4, 16, 26, 0.85);
  border: 1px solid rgba(118, 216, 225, 0.35);
}
.rx-tile {
  position: absolute;
  width: var(--t);
  height: var(--t);
  padding: 0;
  border-radius: 9px;
  border: 1px solid rgba(118, 216, 225, 0.22);
  background: rgba(10, 32, 48, 0.9);
  color: #56707f;
  cursor: pointer;
  overflow: visible;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.rx-tile.on {
  color: #ffd45a;
  border-color: rgba(255, 212, 90, 0.55);
  background: rgba(255, 212, 90, 0.09);
}
.rx-tile.locked {
  cursor: default;
  background: rgba(40, 56, 68, 0.95);
  border-color: rgba(138, 163, 179, 0.55);
  background-image: radial-gradient(circle at 18% 18%, #8aa3b3 2.5px, transparent 3px), radial-gradient(circle at 82% 18%, #8aa3b3 2.5px, transparent 3px),
    radial-gradient(circle at 18% 82%, #8aa3b3 2.5px, transparent 3px), radial-gradient(circle at 82% 82%, #8aa3b3 2.5px, transparent 3px);
}
.rx-tile.locked.on {
  background-color: rgba(70, 60, 30, 0.95);
}
.rx-tile.hinted {
  box-shadow: 0 0 0 2px #fff, 0 0 18px #ffd45a;
}
.rx-tile:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  z-index: 2;
}
.rx-pipe {
  position: absolute;
  inset: 0;
  transition: transform 0.18s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.rx-pipe svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rx-pipe path {
  stroke: currentColor;
  fill: none;
}
.rx-pipe circle {
  fill: currentColor;
}
.rx-pipe circle.cap {
  fill: #2c3e4a;
  stroke: currentColor;
  stroke-width: 4px;
}
.rx-tile.on .rx-pipe {
  filter: drop-shadow(0 0 4px #ffb347);
}
.rx-tile.on .rx-pipe circle.cap {
  fill: #fff3b0;
}
.rx-wire {
  position: absolute;
  background: #56707f;
}
.rx-wire.on {
  background: #ffd45a;
  box-shadow: 0 0 8px #ffb347;
}
.rx-socket {
  position: absolute;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 2px solid #56707f;
  background: #061626;
}
.rx-socket img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: grayscale(1) brightness(0.7);
}
.rx-socket.on {
  border-color: #ffd45a;
  box-shadow: 0 0 14px rgba(255, 212, 90, 0.7);
}
.rx-socket.on img {
  filter: none;
}
.rx-socket.reactor i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8dc 0 35%, #ffd45a 40%);
  box-shadow: 0 0 10px #ffd45a;
}

/* Decrypt board */
.dc-board {
  position: relative;
  flex: none;
  border-radius: 12px;
  outline: 1px solid rgba(92, 245, 220, 0.4);
  outline-offset: 5px;
  background: rgba(4, 16, 26, 0.8);
}
.dc-tile {
  position: absolute;
  padding: 0;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background-repeat: no-repeat;
  cursor: pointer;
  transition: left 0.14s ease-out, top 0.14s ease-out, border-color 0.2s;
}
.dc-tile.ok {
  border-color: #5cf5dc;
}
.dc-tile:focus-visible {
  outline: 2px solid #fff;
  z-index: 2;
}
.dc-peek {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.dc-board.peek .dc-peek,
.dc-board.solved .dc-peek {
  opacity: 1;
}
.dc-board.solved {
  outline-color: #5cf5dc;
  box-shadow: 0 0 30px rgba(92, 245, 220, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .rx-pipe,
  .dc-tile {
    transition: none;
  }
}

/* ===== 23. Boss warning ===== */
#app .battle-banner.boss-warn {
  top: 38%;
  color: #ffe1dc;
  text-shadow: 0 0 10px #ff3b2f, 0 0 26px #ff3b2f;
  animation: bossWarn 2.6s ease-out forwards;
}
#app .battle-banner.boss-warn em {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #1a0303;
  background: #ff4a3d;
  text-shadow: none;
  animation: warnBlink 0.5s steps(2, jump-none) 5;
}
#app .battle-banner.boss-warn b {
  font-size: clamp(24px, 7vw, 34px);
}
#app .battle-banner.boss-warn small {
  font-size: 12px;
  color: #ffb4a8;
}
@keyframes bossWarn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
}
@keyframes warnBlink {
  50% { opacity: 0.25; }
}
#field.boss-alert::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 29;
  pointer-events: none;
  box-shadow: inset 0 0 60px 10px rgba(255, 50, 40, 0.75);
  animation: bossEdge 0.65s ease-in-out infinite alternate;
}
@keyframes bossEdge {
  from { opacity: 0.25; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #field.boss-alert::before,
  #app .battle-banner.boss-warn em { animation: none; }
}

/* ===== 24. Mobile: top bar spacing and a bay header that never overlaps ===== */
/* Top bar: logo hugs its image, the wave label sits centred in the space between logo and
   currencies, and the logo is the part that shrinks when room runs out. */
#app header {
  display: flex;
  align-items: center;
  column-gap: 10px;
}
#app header .brand {
  flex: 0 1 auto;
  min-width: 0;
}
#app header .wave {
  flex: 1 0 auto;
  text-align: center;
}
#app header .money {
  flex: none;
}

/* Bay header: title · count · health pill · vault, all in one row with no overlap. */
#app #trayHead {
  display: flex;
  align-items: center;
  gap: 8px;
}
#app #trayHead .bay-title,
#app #trayHead #available {
  flex: none;
  white-space: nowrap;
}
#app #trayHead #available {
  margin-right: 0;
}
#app #trayHead .bay-title,
#app #trayHead .bay-title .bay-word {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
#app #trayHead .bay-hp {
  position: static;
  transform: none;
  flex: none;
  margin: 0 auto;
}
#app #trayHead .bay-title { order: 0; }
#app #trayHead #available { order: 1; }
#app #trayHead .bay-hp { order: 2; }
#app #trayHead .vault {
  flex: none;
  order: 3;
}
#app #trayHead .lives-pips {
  margin-left: 4px;
}
@media (max-width: 430px) {
  /* The empty dashed slot and the locked slots read as the vault on their own. */
  #app #trayHead .vault-label {
    display: none;
  }
  #app #trayHead {
    letter-spacing: 1px;
  }
}
@media (max-width: 380px) {
  #app #trayHead .bay-word {
    display: none;
  }
  #app #trayHead .bay-hp {
    padding: 4px 7px;
  }
}

/* Reactor Link: empty cells are just floor, not tiles you can turn */
#app .rx-tile.empty {
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(160, 195, 214, 0.08);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

/* Decrypt: the tile outline is drawn inside the picture (no border), so the image isn't pushed 2px */
#app .dc-tile {
  border: 0;
  box-sizing: border-box;
  background-origin: border-box;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22);
}
#app .dc-tile.ok {
  box-shadow: inset 0 0 0 2px #5cf5dc;
}

/* Hex currency: the ⬢ glyph draws smaller than the old ◆, so size it up to sit with the number */
#app header .money .crystals i {
  font-size: 20px;
  line-height: 1;
  transform: translateY(-1px);
}
@media (max-width: 400px) {
  #app header .money .crystals i {
    font-size: 18px;
  }
}

/* Vault: take-out confirm shows the stored turret */
#app .eco-card .vault-take-art {
  display: block;
  width: 76px;
  height: 76px;
  margin: 2px auto 10px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
}
#app .eco-card .vault-take-art.cells {
  display: grid;
  place-items: center;
  font-size: 44px;
  color: #76d8e1;
}
#app .eco-card .vault-take-note {
  display: inline-block;
  margin-top: 8px;
  color: #8ee4c2;
  font-weight: 800;
}
#app .eco-card .vault-take-hint {
  display: inline-block;
  margin-top: 6px;
  color: #9fc3d6;
  font-size: 13px;
}

/* Dialog buttons: one-line labels only; rows that don't fit stack (set by economy.dialog) */
#app .eco-actions button {
  white-space: nowrap;
}
#app .eco-actions.stacked {
  flex-direction: column;
  align-items: stretch;
}
#app .eco-actions.stacked > button {
  width: 100%;
}

/* Rail Cannon: the head turns on its hub (split art, so no clipping needed) */
#app .unit .astral-cannon-base,
#app .unit .astral-cannon-head.cannon-turret {
  clip-path: none;
}
#app .unit .astral-cannon-head.cannon-turret {
  z-index: 1;
  will-change: transform;
}

/* Boss fight: the warning's flashing red edge keeps going while the boss is on the field,
   a touch slower than the warning itself so it reads as "danger" without strobing */
#field.boss-alert.boss-fight::before {
  animation-duration: 0.9s;
}

/* Board -> bay tap return: the real card waits hidden while the flying copy lands on it */
#cards .card.arriving {
  opacity: 0;
}
.return-ghost .astral-role,
.return-ghost .lv,
.return-ghost svg.merge-outline {
  display: none;
}

/* Puzzle prize: show the turret on its reward tile, and make its bay card glow when it arrives */
#app .pz-gains .pz-gain-art {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 4px;
  object-fit: contain;
}
#cards .card.reward-new {
  animation: rewardNew 0.9s ease-in-out 3;
}
@keyframes rewardNew {
  0%, 100% { filter: none; transform: scale(1); }
  50% { filter: drop-shadow(0 0 10px #ffd45a) brightness(1.2); transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  #cards .card.reward-new { animation: none; outline: 2px solid #ffd45a; }
}
/* The split cannon files contain "/cannon-" in their names, which pulled in the old warm accent
   filter (meant for other art) and washed the gold out. The split art is already final colour. */
#app .footprint-art img.astral-cannon-base[src*="/cannon-"],
#app .footprint-art img.cannon-turret[src*="/cannon-"] {
  filter: none;
}