* {
  box-sizing: border-box;
}

:root {
  --navy: #071735;
  --navy2: #0a2358;
  --cyan: #34e7ff;
  --blue: #237dff;
  --violet: #a64cff;
  --pink: #ff57d8;
  --green: #9cff3c;
  --gold: #ffd166;
  --red: #ff4d5e;
  --glass: rgba(8, 28, 66, .72);
  --border: rgba(80, 218, 255, .32);
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(circle at 50% 100%, #173a78 0%, #071735 40%, #020713 100%);
  color: white;
  font-family: "Kanit", system-ui, sans-serif;
  overflow-x: hidden;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.space-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 15%, rgba(69, 224, 255, .18), transparent 26%),
    radial-gradient(circle at 78% 12%, rgba(178, 77, 255, .18), transparent 28%),
    radial-gradient(circle at 50% 80%, rgba(29, 111, 255, .18), transparent 32%),
    linear-gradient(180deg, #020713, #071735 54%, #0b1f4d);
  overflow: hidden;
}

.space-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(94, 226, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 226, 255, .08) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.8), transparent 90%);
}

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 14px white;
  animation: twinkle 3s ease-in-out infinite;
}

.s1 { left: 12%; top: 16%; }
.s2 { left: 78%; top: 23%; animation-delay: .8s; }
.s3 { left: 62%; top: 43%; animation-delay: 1.5s; }
.s4 { left: 33%; top: 68%; animation-delay: 2.1s; }

.nebula {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(35px);
  opacity: .28;
}

.n1 { background: #4d2cff; left: -120px; top: 80px; }
.n2 { background: #00e1ff; right: -140px; bottom: -120px; }

@keyframes twinkle {
  0%,100% { transform: scale(.5); opacity: .3; }
  50% { transform: scale(1.4); opacity: 1; }
}

.game-shell {
  min-height: 100svh;
}

.hidden {
  display: none !important;
}

.start-screen,
.game-screen {
  min-height: 100svh;
}

.start-screen {
  display: grid;
  place-items: center;
  padding: 28px;
}

.hero-card {
  width: min(960px, 100%);
  border: 1px solid rgba(96, 231, 255, .28);
  background:
    radial-gradient(circle at top left, rgba(52,231,255,.18), transparent 38%),
    radial-gradient(circle at bottom right, rgba(166,76,255,.18), transparent 40%),
    rgba(4, 13, 34, .78);
  backdrop-filter: blur(18px);
  border-radius: 34px;
  padding: clamp(26px, 4vw, 52px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255,255,255,.12);
  text-align: center;
}

.game-logo-mini {
  width: 112px;
  height: 112px;
  border-radius: 30px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.game-logo-mini img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--green);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.eyebrow.danger {
  color: var(--red);
}

h1,
h2 {
  margin: 0;
  line-height: .95;
}

h1 {
  font-size: clamp(3rem, 9vw, 6.5rem);
  font-weight: 900;
  letter-spacing: -.04em;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--pink));
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 8px 28px rgba(0,0,0,.55));
}

.subtitle {
  margin: 18px auto 26px;
  color: #c9e8ff;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  max-width: 680px;
}

.setup-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 16px;
  text-align: left;
}

.field {
  display: grid;
  gap: 8px;
  color: #aeeaff;
  font-weight: 700;
}

.field.wide {
  grid-column: 1 / -1;
}

.field input {
  border: 1px solid rgba(94,231,255,.35);
  border-radius: 18px;
  background: rgba(4, 14, 35, .82);
  color: white;
  padding: 16px 18px;
  outline: none;
  box-shadow: inset 0 0 24px rgba(52,231,255,.08);
}

.segmented {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.seg {
  border: 1px solid rgba(94,231,255,.28);
  color: #d8f6ff;
  background: rgba(4, 14, 35, .72);
  border-radius: 18px;
  padding: 13px 18px;
  font-weight: 800;
  min-width: 130px;
  box-shadow: inset 0 0 18px rgba(52,231,255,.05);
}

.seg small {
  color: #9bbcff;
}

.seg.active {
  background: linear-gradient(180deg, rgba(52,231,255,.28), rgba(38,125,255,.18));
  border-color: rgba(92,234,255,.72);
  color: white;
  box-shadow: 0 0 22px rgba(52,231,255,.22), inset 0 0 20px rgba(52,231,255,.12);
}

.rules-card {
  margin: 18px 0 0;
  border: 1px solid rgba(255,209,102,.32);
  border-radius: 20px;
  background: rgba(255,209,102,.08);
  color: #ffe9ad;
  padding: 14px 16px;
  text-align: left;
}

.start-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 26px;
}

.primary-btn,
.ghost-btn,
.ghost-link {
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  text-decoration: none;
  font-weight: 900;
}

.primary-btn {
  color: #061326;
  background: linear-gradient(180deg, #b7ff49, #53e4ff);
  box-shadow: 0 14px 30px rgba(52,231,255,.25);
}

.ghost-btn,
.ghost-link {
  color: #c9efff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

/* GAME */
.game-screen {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100svh;
  overflow: hidden;
}

.hud {
  width: min(1500px, calc(100% - 20px));
  margin: 10px auto 6px;
  display: grid;
  grid-template-columns: 1.7fr repeat(3, .75fr) 1fr auto;
  gap: 10px;
  align-items: stretch;
  z-index: 5;
}

.pilot-card,
.stat-card,
.hp-card,
.icon-btn,
.combo-box,
.mission-box,
.answer-panel,
.numpad button,
.fire-btn,
.clear-btn {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(12, 48, 102, .72), rgba(3, 11, 28, .82));
  box-shadow: inset 0 0 20px rgba(52,231,255,.08), 0 0 18px rgba(52,231,255,.07);
  backdrop-filter: blur(10px);
}

.pilot-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 18px;
  min-width: 0;
}

.pilot-card img {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  object-fit: cover;
}

.pilot-card strong,
.stat-card strong,
.hp-card strong {
  display: block;
}

.pilot-card span,
.stat-card span,
.hp-card span {
  color: #85dfff;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.stat-card,
.hp-card {
  border-radius: 18px;
  padding: 9px 12px;
}

.stat-card strong {
  font-size: 1.35rem;
  line-height: 1.05;
}

.hearts {
  display: flex;
  gap: 5px;
  padding-top: 4px;
}

.heart {
  width: 26px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  color: #ff5a78;
  filter: drop-shadow(0 0 8px rgba(255,90,120,.85));
  font-size: 1.2rem;
}

.heart.empty {
  opacity: .23;
  filter: none;
}

.top-actions {
  display: flex;
  gap: 8px;
}

.icon-btn {
  color: white;
  border-radius: 16px;
  min-width: 46px;
  font-size: 1.3rem;
}

.battlefield {
  position: relative;
  width: min(1500px, calc(100% - 20px));
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  border: 1px solid rgba(84,217,255,.16);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 100%, rgba(50,161,255,.32), transparent 33%),
    radial-gradient(circle at 22% 25%, rgba(165,78,255,.18), transparent 28%),
    radial-gradient(circle at 80% 18%, rgba(52,231,255,.12), transparent 26%),
    rgba(1, 7, 22, .55);
  box-shadow: inset 0 0 50px rgba(52,231,255,.06), 0 18px 45px rgba(0,0,0,.3);
}

.battlefield::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(70,217,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,217,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.boss-bar {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 40px));
  border: 1px solid rgba(255,72,232,.35);
  border-radius: 999px;
  padding: 8px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  background: rgba(23, 6, 42, .82);
  z-index: 4;
  color: #ffd8ff;
}

.boss-track {
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}

.boss-track div {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ff4fd8, #9b4dff, #34e7ff);
  transition: width .2s ease;
}

.entity-layer,
.laser-layer,
.floating-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.entity {
  position: absolute;
  width: 122px;
  height: 96px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.45));
}

.ship {
  width: 100%;
  height: 62px;
  position: relative;
  animation: hover 1.8s ease-in-out infinite;
}

.ship .body,
.ship .dome,
.ship .wing,
.ship .core-light,
.ship .leg {
  position: absolute;
}

.ship .problem {
  position: absolute;
  left: 50%;
  top: 66px;
  transform: translateX(-50%);
  min-width: 120px;
  text-align: center;
  border-radius: 13px;
  padding: 4px 10px 5px;
  color: #fff;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-shadow: 0 0 10px currentColor;
  background: rgba(1,9,26,.82);
  border: 1px solid currentColor;
  box-shadow: 0 0 18px currentColor;
}

.ship.scout .body {
  left: 9px;
  top: 23px;
  width: 104px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f2f5ff, #69768e);
  border: 2px solid rgba(255,255,255,.65);
}

.ship.scout .dome {
  left: 34px;
  top: 5px;
  width: 54px;
  height: 42px;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 35% 20%, #eaffff, #188dff 42%, #102b78 82%);
}

.ship.scout .core-light {
  left: 52px;
  top: 42px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffd23c;
  box-shadow: 0 0 18px #ffd23c;
}

.ship.blade .body {
  left: 38px;
  top: 10px;
  width: 46px;
  height: 52px;
  clip-path: polygon(50% 0%, 100% 45%, 75% 100%, 50% 76%, 25% 100%, 0% 45%);
  background: linear-gradient(180deg, #a64cff, #2b135e);
  border: 2px solid #9cff3c;
}

.ship.blade .wing.left {
  left: 2px;
  top: 18px;
  width: 48px;
  height: 22px;
  clip-path: polygon(0 40%, 100% 0, 76% 100%);
  background: #6c22d8;
  border: 1px solid #9cff3c;
}

.ship.blade .wing.right {
  right: 2px;
  top: 18px;
  width: 48px;
  height: 22px;
  clip-path: polygon(100% 40%, 0 0, 24% 100%);
  background: #6c22d8;
  border: 1px solid #9cff3c;
}

.ship.blade .core-light {
  left: 52px;
  top: 26px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #9cff3c;
  box-shadow: 0 0 18px #9cff3c;
}

.ship.bomber .body {
  left: 9px;
  top: 12px;
  width: 104px;
  height: 52px;
  border-radius: 24px;
  background: linear-gradient(180deg, #7b7755, #222838);
  border: 2px solid #ff9f1c;
}

.ship.bomber .wing.left,
.ship.bomber .wing.right {
  top: 22px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2a2d3b;
  border: 3px solid #ff9f1c;
}

.ship.bomber .wing.left { left: -2px; }
.ship.bomber .wing.right { right: -2px; }

.ship.bomber .core-light {
  left: 50px;
  top: 30px;
  width: 22px;
  height: 18px;
  border-radius: 8px;
  background: #ff9f1c;
  box-shadow: 0 0 18px #ff9f1c;
}

.ship.crystal .body {
  left: 29px;
  top: 2px;
  width: 64px;
  height: 62px;
  clip-path: polygon(50% 0, 95% 30%, 72% 100%, 50% 76%, 28% 100%, 5% 30%);
  background: linear-gradient(145deg, #9ffbff, #7b4cff 48%, #24d7ff);
  border: 2px solid #e7fbff;
}

.ship.crystal .wing.left {
  left: 0;
  top: 20px;
  width: 54px;
  height: 22px;
  clip-path: polygon(0 60%, 100% 0, 70% 100%);
  background: rgba(52,231,255,.85);
}

.ship.crystal .wing.right {
  right: 0;
  top: 20px;
  width: 54px;
  height: 22px;
  clip-path: polygon(100% 60%, 0 0, 30% 100%);
  background: rgba(255,87,216,.85);
}

.ship.spinner .body {
  left: 43px;
  top: 15px;
  width: 36px;
  height: 48px;
  border-radius: 18px;
  background: #5130a1;
  border: 2px solid #34e7ff;
}

.ship.spinner .wing.left,
.ship.spinner .wing.right {
  top: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #34e7ff 25%, #102b78 60%);
  border: 2px solid #85e7ff;
}

.ship.spinner .wing.left { left: 2px; }
.ship.spinner .wing.right {
  right: 2px;
  background: radial-gradient(circle, #fff, #ff57d8 25%, #572b78 60%);
  border-color: #ff9aff;
}

.ship.beetle .body {
  left: 14px;
  top: 9px;
  width: 94px;
  height: 60px;
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(180deg, #7a578e, #1f1830);
  border: 2px solid #9cff3c;
}

.ship.beetle .leg {
  width: 26px;
  height: 24px;
  border-radius: 0 0 16px 16px;
  background: #342144;
  border: 1px solid #9cff3c;
}

.ship.beetle .leg.l1 { left: 5px; top: 48px; transform: rotate(20deg); }
.ship.beetle .leg.l2 { right: 5px; top: 48px; transform: rotate(-20deg); }

.ship.beetle .core-light {
  left: 45px;
  top: 28px;
  width: 32px;
  height: 18px;
  border-radius: 50%;
  background: #9cff3c;
  box-shadow: 0 0 20px #9cff3c;
}

.ship.scout .problem { color: #ffd23c; }
.ship.blade .problem { color: #9cff3c; }
.ship.bomber .problem { color: #ff9f1c; }
.ship.crystal .problem { color: #ff7dff; }
.ship.spinner .problem { color: #34e7ff; }
.ship.beetle .problem { color: #9cff3c; }

.entity.boss {
  width: 260px;
  height: 132px;
}

.entity.boss .ship {
  height: 100px;
  animation: bossHover 2.4s ease-in-out infinite;
}

.entity.boss .ship .body {
  left: 18px;
  top: 16px;
  width: 224px;
  height: 78px;
  border-radius: 50% 50% 34% 34%;
  background: linear-gradient(180deg, #58416d, #0e091c);
  border: 3px solid #b45cff;
  box-shadow: inset 0 0 28px rgba(180,92,255,.36), 0 0 25px rgba(180,92,255,.28);
}

.entity.boss .ship .dome {
  left: 78px;
  top: -4px;
  width: 104px;
  height: 66px;
  border-radius: 50%;
  background: radial-gradient(circle, #e9d3ff, #9e49ff 36%, #220c3c 75%);
}

.entity.boss .ship .core-light {
  left: 112px;
  top: 55px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ff57d8;
  box-shadow: 0 0 32px #ff57d8;
}

.entity.boss .problem {
  top: 96px;
  min-width: 190px;
  color: #ffb5ff;
  font-size: 1.15rem;
}

.drop {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  font-size: 1.8rem;
  font-weight: 900;
  border: 1px solid currentColor;
  background: rgba(2, 9, 24, .84);
  box-shadow: 0 0 20px currentColor;
  animation: pulseDrop 1.1s ease-in-out infinite;
}

.drop.bomb { color: var(--red); }
.drop.heart { color: #ff5a78; }

@keyframes pulseDrop {
  0%,100% { transform: translate(-50%, -50%) scale(.95); }
  50% { transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes hover {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes bossHover {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.015); }
}

.laser {
  position: absolute;
  width: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #7ff5ff, #fff);
  transform-origin: bottom;
  box-shadow: 0 0 18px #34e7ff, 0 0 30px #34e7ff;
  border-radius: 999px;
  animation: laserFlash .22s linear forwards;
}

@keyframes laserFlash {
  from { opacity: 0; transform: scaleY(.2); }
  35% { opacity: 1; transform: scaleY(1); }
  to { opacity: 0; transform: scaleY(1); }
}

.pop {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 900;
  text-shadow: 0 0 12px currentColor;
  animation: floatPop .75s ease-out forwards;
  pointer-events: none;
}

.pop.good { color: var(--green); }
.pop.bad { color: var(--red); }
.pop.gold { color: var(--gold); }

@keyframes floatPop {
  from { opacity: 0; transform: translate(-50%, -35%) scale(.85); }
  20% { opacity: 1; }
  to { opacity: 0; transform: translate(-50%, -95%) scale(1.2); }
}

.explosion {
  position: absolute;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, #fff 0 8%, #ffd166 9% 20%, #ff7a1c 21% 38%, rgba(255,61,92,.35) 39% 60%, transparent 61%);
  filter: blur(.2px);
  animation: boom .45s ease-out forwards;
}

@keyframes boom {
  from { opacity: 1; transform: translate(-50%, -50%) scale(.2); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}

.side-panel {
  position: absolute;
  top: 80px;
  z-index: 3;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.side-panel.left { left: 12px; }
.side-panel.right { right: 12px; }

.combo-box,
.mission-box {
  border-radius: 18px;
  min-width: 118px;
  padding: 10px 12px;
}

.combo-box span,
.mission-box span {
  color: #85dfff;
  font-size: .72rem;
  text-transform: uppercase;
}

.combo-box strong,
.mission-box strong {
  display: block;
  font-size: 1.6rem;
}

.combo-box.mult strong {
  color: var(--gold);
}

.earth-horizon {
  position: absolute;
  left: 50%;
  bottom: -26%;
  width: 118%;
  height: 48%;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.35), transparent 18%),
    radial-gradient(circle at 50% 10%, rgba(52,231,255,.18), transparent 26%),
    linear-gradient(180deg, #1d64c8, #08245c 45%, #020716);
  box-shadow: 0 -18px 44px rgba(52,231,255,.22);
}

.guardian {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 220px;
  height: 150px;
  transform: translateX(-50%);
  z-index: 2;
}

.shield-dome {
  position: absolute;
  left: 15px;
  bottom: 32px;
  width: 190px;
  height: 104px;
  border-radius: 100px 100px 20px 20px;
  border: 2px solid rgba(52,231,255,.42);
  background: radial-gradient(circle at 50% 80%, rgba(52,231,255,.16), transparent 60%);
  box-shadow: 0 0 30px rgba(52,231,255,.18), inset 0 0 22px rgba(52,231,255,.08);
}

.cannon {
  position: absolute;
  left: 74px;
  bottom: 46px;
  width: 72px;
  height: 88px;
  border-radius: 28px;
  background: linear-gradient(180deg, #d6e5ff, #394b66);
  border: 2px solid rgba(255,255,255,.62);
  box-shadow: 0 0 30px rgba(52,231,255,.28);
}

.cannon .core {
  position: absolute;
  left: 50%;
  top: 28px;
  width: 40px;
  height: 40px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #34e7ff 32%, #1455ca 72%);
  box-shadow: 0 0 30px #34e7ff;
}

.cannon .barrel {
  position: absolute;
  left: 50%;
  top: -26px;
  width: 16px;
  height: 42px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #e9fbff, #237dff);
  box-shadow: 0 0 18px rgba(52,231,255,.62);
}

.base-platform {
  position: absolute;
  left: 8px;
  bottom: 0;
  width: 204px;
  height: 46px;
  border-radius: 42px 42px 16px 16px;
  background: linear-gradient(180deg, #596d91, #101c35);
  border: 2px solid rgba(255,255,255,.22);
  box-shadow: 0 0 25px rgba(52,231,255,.18);
}

.stage-banner,
.warning-banner {
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  z-index: 8;
  border-radius: 28px;
  padding: 22px 34px;
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 5rem);
  letter-spacing: .06em;
  text-align: center;
  pointer-events: none;
}

.stage-banner {
  color: #dffcff;
  background: rgba(10, 60, 100, .78);
  border: 1px solid rgba(52,231,255,.45);
  text-shadow: 0 0 22px #34e7ff;
}

.warning-banner {
  color: #ffccd0;
  background: rgba(100, 10, 22, .82);
  border: 1px solid rgba(255,77,94,.55);
  text-shadow: 0 0 22px #ff4d5e;
}

.answer-dock {
  width: min(1500px, calc(100% - 20px));
  margin: 6px auto 10px;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  z-index: 5;
}

.answer-panel {
  border-radius: 20px;
  padding: 10px 16px;
  min-height: 72px;
}

.answer-panel span {
  color: #85dfff;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem;
}

.answer-panel strong {
  display: block;
  font-size: 2rem;
  color: #8af7ff;
  line-height: 1.05;
}

.answer-panel.error {
  border-color: rgba(255,77,94,.78);
  box-shadow: 0 0 24px rgba(255,77,94,.45), inset 0 0 20px rgba(255,77,94,.15);
  animation: shake .25s linear;
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.fire-btn,
.clear-btn {
  border-radius: 20px;
  color: white;
  padding: 0 18px;
  font-weight: 900;
  border-color: rgba(255,255,255,.18);
}

.fire-btn {
  min-width: 150px;
  color: #08172e;
  background: linear-gradient(180deg, #b7ff49, #3ee8ff);
}

.clear-btn {
  min-width: 86px;
}

.numpad {
  display: grid;
  grid-template-columns: repeat(6, 52px);
  gap: 6px;
}

.numpad button {
  min-height: 34px;
  border-radius: 12px;
  color: #d9fbff;
  font-weight: 900;
  border-color: rgba(94,231,255,.26);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .58);
  padding: 20px;
}

.modal-card {
  width: min(640px, 100%);
  border-radius: 30px;
  border: 1px solid rgba(94,231,255,.3);
  background:
    radial-gradient(circle at top left, rgba(255,77,94,.14), transparent 35%),
    rgba(5, 15, 38, .95);
  padding: 30px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.42);
}

.modal-card h2 {
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  color: #fff;
  text-shadow: 0 0 24px rgba(255,77,94,.65);
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 22px 0;
}

.report-grid div {
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
}

.report-grid span {
  color: #85dfff;
  display: block;
}

.report-grid strong {
  font-size: 1.6rem;
}

.paused .battlefield::after {
  content: "PAUSED";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 12;
  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: 900;
  letter-spacing: .12em;
  color: rgba(255,255,255,.85);
  background: rgba(0, 0, 0, .42);
  text-shadow: 0 0 24px rgba(52,231,255,.62);
}

@media (max-width: 920px) {
  .setup-grid {
    grid-template-columns: 1fr;
  }

  .hud {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    margin-top: 6px;
  }

  .pilot-card {
    grid-column: 1 / -1;
  }

  .hp-card {
    grid-column: span 2;
  }

  .top-actions {
    grid-column: 3;
    justify-content: end;
  }

  .stat-card strong {
    font-size: 1.05rem;
  }

  .battlefield {
    border-radius: 18px;
  }

  .side-panel {
    top: 72px;
  }

  .side-panel.right {
    display: none;
  }

  .combo-box,
  .mission-box {
    min-width: 90px;
    padding: 8px;
  }

  .combo-box strong,
  .mission-box strong {
    font-size: 1.2rem;
  }

  .entity {
    width: 100px;
    height: 86px;
  }

  .entity.boss {
    width: 220px;
  }

  .guardian {
    width: 174px;
    height: 122px;
  }

  .answer-dock {
    grid-template-columns: 1fr 96px 68px;
    gap: 6px;
  }

  .numpad {
    grid-column: 1 / -1;
    grid-template-columns: repeat(6, 1fr);
  }

  .numpad button {
    min-height: 38px;
  }

  .answer-panel {
    min-height: 60px;
  }

  .answer-panel strong {
    font-size: 1.55rem;
  }
}

@media (max-height: 680px) and (orientation: landscape) {
  .hud {
    margin-top: 4px;
  }

  .answer-dock {
    margin-bottom: 4px;
  }

  .numpad {
    display: none;
  }

  .answer-dock {
    grid-template-columns: 1fr auto auto;
  }
}


/* ===== V54 fixes: readable bombs, less-blocking panels, better laser ===== */
.side-panel {
  opacity: .58;
  transition: opacity .18s ease, transform .18s ease;
}

.side-panel:hover {
  opacity: .9;
}

.side-panel.left {
  top: auto;
  bottom: 156px;
  transform: scale(.88);
  transform-origin: left bottom;
}

.side-panel.right {
  top: auto;
  bottom: 156px;
  transform: scale(.88);
  transform-origin: right bottom;
}

.combo-box,
.mission-box {
  background: linear-gradient(180deg, rgba(12, 48, 102, .38), rgba(3, 11, 28, .46));
  backdrop-filter: blur(4px);
}

.drop.math-bomb {
  width: 104px;
  height: 70px;
  grid-template-rows: 28px 1fr;
  gap: 0;
  border-radius: 18px;
}

.drop.math-bomb .drop-icon {
  line-height: 1;
  font-size: 1.6rem;
  filter: drop-shadow(0 0 10px currentColor);
}

.drop.math-bomb .drop-problem {
  font-size: .9rem;
  line-height: 1.05;
  color: #fff1e8;
  font-weight: 900;
  text-shadow: 0 0 10px #ff4d5e;
  white-space: nowrap;
}

.laser {
  left: 0;
  top: 0;
  transform-origin: 50% 100%;
  width: 6px;
  background:
    radial-gradient(circle at 50% 0%, #fff 0 10%, transparent 11%),
    linear-gradient(180deg, rgba(52,231,255,0), #ffffff 8%, #34e7ff 32%, #9cff3c 100%);
  box-shadow: 0 0 18px #34e7ff, 0 0 34px rgba(156,255,60,.75);
}

.hit-spark {
  position: absolute;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 8%, #9cff3c 9% 20%, rgba(52,231,255,.45) 21% 45%, transparent 46%),
    conic-gradient(from 0deg, transparent, #fff, transparent, #9cff3c, transparent);
  filter: drop-shadow(0 0 16px #34e7ff);
  animation: sparkPop .32s ease-out forwards;
}

@keyframes sparkPop {
  from { opacity: 1; transform: translate(-50%, -50%) scale(.25) rotate(0deg); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.35) rotate(120deg); }
}

@media (max-width: 920px) {
  .side-panel {
    opacity: .45;
  }

  .side-panel.left {
    left: 6px;
    bottom: 126px;
    transform: scale(.74);
  }

  .side-panel.right {
    display: none;
  }

  .drop.math-bomb {
    width: 92px;
    height: 62px;
  }

  .drop.math-bomb .drop-problem {
    font-size: .8rem;
  }
}


/* ===== V55: math heart supply + stronger shot feedback ===== */
.drop.math-heart {
  width: 104px;
  height: 70px;
  grid-template-rows: 28px 1fr;
  gap: 0;
  border-radius: 18px;
  color: #ff6fa2;
}

.drop.math-heart .drop-icon {
  line-height: 1;
  font-size: 1.55rem;
  filter: drop-shadow(0 0 12px currentColor);
}

.drop.math-heart .drop-problem {
  font-size: .9rem;
  line-height: 1.05;
  color: #fff2f7;
  font-weight: 900;
  text-shadow: 0 0 10px #ff6fa2;
  white-space: nowrap;
}

.cannon.charged .core {
  animation: cannonCharge .32s ease-out;
}

.cannon.charged .barrel {
  box-shadow: 0 0 28px #ffffff, 0 0 48px #34e7ff;
  background: linear-gradient(180deg, #fff, #9cff3c 35%, #34e7ff);
}

@keyframes cannonCharge {
  0% { transform: translateX(-50%) scale(.8); filter: brightness(1); }
  35% { transform: translateX(-50%) scale(1.42); filter: brightness(1.8); }
  100% { transform: translateX(-50%) scale(1); filter: brightness(1.1); }
}

.target-hit-flash {
  animation: targetHitFlash .24s ease-out;
}

@keyframes targetHitFlash {
  0% { filter: brightness(2.4) drop-shadow(0 0 20px #ffffff); }
  50% { filter: brightness(1.6) drop-shadow(0 0 30px #9cff3c); transform: translate(-50%, -50%) scale(1.06); }
  100% { filter: drop-shadow(0 12px 20px rgba(0,0,0,.45)); transform: translate(-50%, -50%) scale(1); }
}

.laser {
  width: 8px;
  background:
    radial-gradient(circle at 50% 0%, #fff 0 12%, transparent 13%),
    linear-gradient(180deg, rgba(52,231,255,0), #ffffff 8%, #5df6ff 28%, #a8ff49 100%);
  box-shadow: 0 0 18px #ffffff, 0 0 34px rgba(52,231,255,.95), 0 0 52px rgba(156,255,60,.65);
}

.laser-bomb {
  background:
    radial-gradient(circle at 50% 0%, #fff 0 12%, transparent 13%),
    linear-gradient(180deg, rgba(255,80,80,0), #ffffff 8%, #ff4d5e 30%, #ffd166 100%);
  box-shadow: 0 0 18px #ffffff, 0 0 34px rgba(255,77,94,.9), 0 0 52px rgba(255,209,102,.55);
}

.laser-heart {
  background:
    radial-gradient(circle at 50% 0%, #fff 0 12%, transparent 13%),
    linear-gradient(180deg, rgba(255,111,162,0), #ffffff 8%, #ff6fa2 35%, #34e7ff 100%);
  box-shadow: 0 0 18px #ffffff, 0 0 34px rgba(255,111,162,.9), 0 0 52px rgba(52,231,255,.55);
}

.laser-trail {
  position: absolute;
  width: 28px;
  transform-origin: 50% 100%;
  pointer-events: none;
  opacity: .75;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(52,231,255,.10) 12%, rgba(156,255,60,.26), transparent);
  filter: blur(7px);
  animation: laserTrailFade .36s ease-out forwards;
}

.laser-trail-bomb {
  background: linear-gradient(180deg, transparent, rgba(255,77,94,.12) 12%, rgba(255,209,102,.30), transparent);
}

.laser-trail-heart {
  background: linear-gradient(180deg, transparent, rgba(255,111,162,.13) 12%, rgba(52,231,255,.24), transparent);
}

@keyframes laserTrailFade {
  from { opacity: .9; transform: translate(-50%, -100%) scaleX(.55); }
  to { opacity: 0; transform: translate(-50%, -100%) scaleX(1.3); }
}

.hit-spark {
  width: 72px;
  height: 72px;
  background:
    radial-gradient(circle, #fff 0 7%, #9cff3c 8% 18%, rgba(52,231,255,.55) 19% 42%, transparent 43%),
    conic-gradient(from 0deg, transparent, #fff, transparent, #9cff3c, transparent, #34e7ff, transparent);
  filter: drop-shadow(0 0 22px #34e7ff);
}

.hit-spark-bomb {
  background:
    radial-gradient(circle, #fff 0 7%, #ffd166 8% 18%, rgba(255,77,94,.65) 19% 42%, transparent 43%),
    conic-gradient(from 0deg, transparent, #fff, transparent, #ff4d5e, transparent, #ffd166, transparent);
  filter: drop-shadow(0 0 24px #ff4d5e);
}

.hit-spark-heart {
  background:
    radial-gradient(circle, #fff 0 7%, #ff6fa2 8% 18%, rgba(52,231,255,.55) 19% 42%, transparent 43%),
    conic-gradient(from 0deg, transparent, #fff, transparent, #ff6fa2, transparent, #34e7ff, transparent);
  filter: drop-shadow(0 0 24px #ff6fa2);
}

.impact-ring {
  position: absolute;
  width: 90px;
  height: 90px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid rgba(156,255,60,.85);
  box-shadow: 0 0 22px rgba(156,255,60,.8), inset 0 0 18px rgba(52,231,255,.4);
  animation: impactRing .48s ease-out forwards;
}

.impact-ring-bomb {
  border-color: rgba(255,77,94,.9);
  box-shadow: 0 0 22px rgba(255,77,94,.8), inset 0 0 18px rgba(255,209,102,.45);
}

.impact-ring-heart {
  border-color: rgba(255,111,162,.9);
  box-shadow: 0 0 22px rgba(255,111,162,.8), inset 0 0 18px rgba(52,231,255,.45);
}

@keyframes impactRing {
  from { opacity: 1; transform: translate(-50%, -50%) scale(.22); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }
}

.supply-burst {
  position: absolute;
  width: 118px;
  height: 118px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 8%, #ff6fa2 9% 20%, rgba(52,231,255,.45) 21% 48%, transparent 49%),
    conic-gradient(from 0deg, transparent, #fff, transparent, #ff6fa2, transparent, #34e7ff, transparent);
  filter: drop-shadow(0 0 24px #ff6fa2);
  animation: supplyBurstPop .65s ease-out forwards;
}

@keyframes supplyBurstPop {
  from { opacity: 1; transform: translate(-50%, -50%) scale(.18) rotate(0deg); }
  45% { opacity: 1; }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.45) rotate(150deg); }
}

.explosion {
  background:
    radial-gradient(circle, #fff 0 7%, #ffd166 8% 18%, #ff7a1c 19% 36%, rgba(255,61,92,.48) 37% 58%, transparent 59%),
    conic-gradient(from 0deg, transparent, rgba(255,255,255,.9), transparent, rgba(255,209,102,.8), transparent, rgba(255,77,94,.75), transparent);
  box-shadow: 0 0 30px rgba(255,122,28,.75), 0 0 52px rgba(255,77,94,.35);
}

@media (max-width: 920px) {
  .drop.math-heart {
    width: 92px;
    height: 62px;
  }

  .drop.math-heart .drop-problem {
    font-size: .8rem;
  }

  .hit-spark {
    width: 58px;
    height: 58px;
  }

  .impact-ring {
    width: 70px;
    height: 70px;
  }
}


/* ===== V56: precise SVG laser + mobile-first compressed layout ===== */
.laser-layer {
  z-index: 6;
}

.laser-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  animation: laserSvgFade .28s ease-out forwards;
}

.laser-svg line {
  stroke-linecap: round;
}

.laser-glow {
  stroke: rgba(92, 245, 255, .72);
  stroke-width: 14;
  filter: drop-shadow(0 0 13px rgba(52, 231, 255, .95));
}

.laser-core {
  stroke: #ffffff;
  stroke-width: 4;
  filter: drop-shadow(0 0 7px #ffffff);
}

.laser-svg-bomb .laser-glow {
  stroke: rgba(255, 96, 80, .76);
  filter: drop-shadow(0 0 13px rgba(255, 77, 94, .95));
}

.laser-svg-bomb .laser-core {
  stroke: #fff1b8;
}

.laser-svg-heart .laser-glow {
  stroke: rgba(255, 111, 162, .76);
  filter: drop-shadow(0 0 13px rgba(255, 111, 162, .95));
}

.laser-svg-heart .laser-core {
  stroke: #fff4fb;
}

@keyframes laserSvgFade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  100% { opacity: 0; }
}

/* old div lasers disabled after V56 */
.laser,
.laser-trail {
  display: none !important;
}

@media (max-width: 920px) {
  body {
    background: #020713;
  }

  .game-screen {
    height: 100svh;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .hud {
    width: calc(100% - 12px);
    margin: 5px auto 4px;
    grid-template-columns: 1.15fr .72fr .72fr .82fr auto;
    gap: 4px;
    align-items: stretch;
  }

  .pilot-card {
    grid-column: 1 / -1;
    min-height: 54px;
    padding: 5px 8px;
    border-radius: 14px;
    gap: 8px;
  }

  .pilot-card img {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .pilot-card strong {
    font-size: 1.02rem;
    line-height: 1;
  }

  .pilot-card span {
    font-size: .64rem;
    letter-spacing: .12em;
  }

  .stat-card,
  .hp-card {
    border-radius: 13px;
    padding: 6px 8px;
    min-height: 50px;
  }

  .stat-card span,
  .hp-card span {
    font-size: .58rem;
    letter-spacing: .08em;
  }

  .stat-card strong {
    font-size: 1.08rem;
    line-height: 1.1;
  }

  .hp-card {
    grid-column: span 1;
    min-width: 0;
  }

  .hearts {
    gap: 2px;
    padding-top: 3px;
  }

  .heart {
    width: 17px;
    height: 17px;
    font-size: .92rem;
  }

  .top-actions {
    grid-column: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  .icon-btn {
    min-width: 36px;
    width: 36px;
    border-radius: 12px;
    padding: 0;
    font-size: 1rem;
  }

  .battlefield {
    width: calc(100% - 12px);
    min-height: 0;
    border-radius: 16px;
  }

  .boss-bar {
    top: 5px;
    width: calc(100% - 12px);
    padding: 5px 7px;
    gap: 6px;
    font-size: .66rem;
  }

  .boss-track {
    height: 9px;
  }

  .side-panel {
    pointer-events: none;
    opacity: .36;
  }

  .side-panel.left {
    left: 5px;
    bottom: 82px;
    transform: scale(.62);
  }

  .side-panel.right {
    display: none !important;
  }

  .entity {
    width: 82px;
    height: 72px;
  }

  .ship {
    transform: scale(.82);
    transform-origin: top center;
  }

  .ship .problem {
    top: 58px;
    min-width: 82px;
    max-width: 110px;
    font-size: .74rem;
    padding: 3px 7px;
    border-radius: 10px;
  }

  .entity.boss {
    width: 178px;
    height: 112px;
  }

  .entity.boss .ship {
    transform: scale(.68);
    transform-origin: top center;
  }

  .entity.boss .problem {
    top: 88px;
    min-width: 150px;
    font-size: .84rem;
  }

  .drop.math-bomb,
  .drop.math-heart {
    width: 72px;
    height: 50px;
    border-radius: 13px;
  }

  .drop.math-bomb .drop-icon,
  .drop.math-heart .drop-icon {
    font-size: 1.05rem;
  }

  .drop.math-bomb .drop-problem,
  .drop.math-heart .drop-problem {
    font-size: .62rem;
  }

  .guardian {
    width: 128px;
    height: 92px;
    bottom: 4px;
  }

  .shield-dome {
    left: 12px;
    bottom: 22px;
    width: 104px;
    height: 66px;
  }

  .cannon {
    left: 43px;
    bottom: 30px;
    width: 42px;
    height: 58px;
    border-radius: 18px;
  }

  .cannon .core {
    top: 18px;
    width: 27px;
    height: 27px;
  }

  .cannon .barrel {
    top: -18px;
    width: 10px;
    height: 30px;
  }

  .base-platform {
    left: 5px;
    width: 118px;
    height: 28px;
  }

  .answer-dock {
    width: calc(100% - 12px);
    margin: 4px auto 5px;
    display: grid;
    grid-template-columns: 1fr 92px 54px;
    gap: 5px;
  }

  .answer-panel {
    min-height: 48px;
    border-radius: 13px;
    padding: 7px 10px;
  }

  .answer-panel span {
    font-size: .58rem;
    letter-spacing: .11em;
  }

  .answer-panel strong {
    font-size: 1.28rem;
  }

  .fire-btn,
  .clear-btn {
    min-width: 0;
    border-radius: 14px;
    padding: 0 8px;
    font-size: .78rem;
    line-height: 1.05;
  }

  .numpad {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
  }

  .numpad button {
    min-height: 31px;
    border-radius: 11px;
    font-size: .92rem;
    padding: 0;
  }

  .stage-banner,
  .warning-banner {
    font-size: clamp(1.5rem, 8vw, 3rem);
    padding: 14px 20px;
  }
}

@media (max-width: 420px) {
  .hud {
    grid-template-columns: .85fr .85fr .9fr .9fr auto;
  }

  .stat-card,
  .hp-card {
    min-height: 46px;
    padding: 5px 7px;
  }

  .pilot-card {
    min-height: 50px;
  }

  .pilot-card img {
    width: 36px;
    height: 36px;
  }

  .pilot-card strong {
    font-size: .95rem;
  }

  .battlefield {
    border-radius: 14px;
  }

  .answer-dock {
    grid-template-columns: 1fr 86px 50px;
  }

  .numpad button {
    min-height: 29px;
  }
}

@media (max-height: 680px) and (orientation: landscape) {
  .hud {
    grid-template-columns: 1.2fr repeat(4, .78fr) auto;
  }

  .pilot-card {
    grid-column: auto;
  }

  .answer-dock {
    grid-template-columns: 1fr 120px 72px;
  }

  .numpad {
    display: none !important;
  }
}


/* ===== V61 CLEAN FIX: rollback to V56 + only mobile menu unlock ===== */
/* Important:
   - No body lock.
   - No :has selector.
   - No game JS changes.
   - Only make the start/menu screen compact and scrollable on mobile.
*/

@media (max-width: 920px) {
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
  }

  .start-screen {
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    padding: 8px 10px 28px !important;
  }

  .hero-card {
    width: min(100%, 430px) !important;
    max-width: calc(100vw - 20px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 14px 16px 16px !important;
    overflow: visible !important;
    border-radius: 20px !important;
    transform: none !important;
  }

  .game-logo-mini {
    width: 52px !important;
    height: 52px !important;
    margin: 0 auto 4px !important;
  }

  .game-logo-mini img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .hero-card .eyebrow {
    font-size: .62rem !important;
    letter-spacing: .16em !important;
    margin-bottom: 2px !important;
  }

  .hero-card h1 {
    font-size: clamp(2rem, 10vw, 3.05rem) !important;
    line-height: .9 !important;
    margin: 0 0 8px !important;
  }

  .hero-card .subtitle {
    font-size: .86rem !important;
    line-height: 1.35 !important;
    margin: 0 0 12px !important;
  }

  .setup-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .field {
    gap: 5px !important;
  }

  .field > span {
    font-size: .86rem !important;
    line-height: 1.12 !important;
    margin: 0 !important;
  }

  .field input {
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 14px !important;
    border-radius: 15px !important;
    font-size: .98rem !important;
  }

  .segmented {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .segmented.difficulty {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .segmented.difficulty .seg:last-child {
    grid-column: 1 / -1 !important;
  }

  .seg {
    min-height: 50px !important;
    padding: 8px 8px !important;
    border-radius: 15px !important;
    font-size: .92rem !important;
    line-height: 1.08 !important;
  }

  .seg small {
    font-size: .66rem !important;
    line-height: 1 !important;
    margin-top: 3px !important;
  }

  .rules-card {
    margin: 10px 0 0 !important;
    padding: 9px 11px !important;
    border-radius: 15px !important;
    font-size: .74rem !important;
    line-height: 1.38 !important;
  }

  .start-actions {
    margin-top: 12px !important;
    display: grid !important;
    grid-template-columns: 1fr 1.25fr !important;
    gap: 8px !important;
  }

  .ghost-link,
  .primary-btn {
    min-height: 44px !important;
    border-radius: 15px !important;
    padding: 0 10px !important;
    font-size: .86rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .primary-btn {
    font-size: .96rem !important;
  }
}

/* Short in-app browser: compact menu more, but still allow scrolling. */
@media (max-width: 920px) and (max-height: 760px) {
  .start-screen {
    padding-top: 6px !important;
    padding-bottom: 24px !important;
  }

  .game-logo-mini {
    width: 42px !important;
    height: 42px !important;
  }

  .hero-card {
    padding: 10px 14px 12px !important;
  }

  .hero-card h1 {
    font-size: clamp(1.72rem, 8.6vw, 2.55rem) !important;
    margin-bottom: 5px !important;
  }

  .hero-card .subtitle {
    font-size: .76rem !important;
    margin-bottom: 8px !important;
  }

  .setup-grid {
    gap: 8px !important;
  }

  .field input {
    min-height: 37px !important;
    height: 37px !important;
  }

  .seg {
    min-height: 43px !important;
    padding: 6px 6px !important;
    font-size: .82rem !important;
  }

  .rules-card {
    max-height: 54px !important;
    overflow: hidden !important;
    font-size: .68rem !important;
    padding: 7px 10px !important;
  }

  .start-actions {
    margin-top: 8px !important;
  }

  .ghost-link,
  .primary-btn {
    min-height: 39px !important;
    font-size: .78rem !important;
  }
}


/* ===== V62: screen switch fix ===== */
/* V61 mobile start-screen display:block!important overrode .hidden.
   Hidden screens must always disappear, otherwise game appears below menu. */

.hidden,
[hidden],
.start-screen.hidden,
.game-screen.hidden,
.modal.hidden,
.overlay.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 920px) {
  .start-screen.hidden,
  .game-screen.hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .game-screen:not(.hidden) {
    display: grid !important;
    min-height: 100svh !important;
  }
}


/* ===== V63: in-game UI cleanup only ===== */
/* No menu changes. No body lock. Focus: keypad, player base, boss spawn feel. */

.sign-toggle.locked {
  display: none !important;
}

/* Clear means clear all, backspace means delete one digit */
.clear-btn {
  font-weight: 900;
}

.numpad button {
  min-height: 46px;
  font-size: 1.05rem;
}

@media (max-width: 920px) {
  .answer-dock {
    grid-template-columns: minmax(0, 1fr) 86px 54px !important;
    gap: 5px !important;
  }

  .answer-panel {
    min-height: 43px !important;
  }

  .answer-panel strong {
    font-size: 1.18rem !important;
  }

  .fire-btn,
  .clear-btn {
    min-height: 43px !important;
    font-size: .72rem !important;
    border-radius: 13px !important;
  }

  .numpad {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .numpad button {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    font-size: 1.04rem !important;
    padding: 0 !important;
  }

  .numpad button[data-key="back"] {
    font-size: 1rem !important;
  }

  .guardian {
    width: 96px !important;
    height: 68px !important;
    bottom: 2px !important;
  }

  .shield-dome {
    left: 9px !important;
    bottom: 16px !important;
    width: 78px !important;
    height: 48px !important;
  }

  .cannon {
    left: 32px !important;
    bottom: 22px !important;
    width: 32px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }

  .cannon .barrel {
    top: -14px !important;
    width: 8px !important;
    height: 24px !important;
  }

  .cannon .core {
    top: 14px !important;
    width: 21px !important;
    height: 21px !important;
  }

  .base-platform {
    left: 4px !important;
    width: 88px !important;
    height: 22px !important;
  }

  .entity.boss {
    width: 156px !important;
    height: 96px !important;
  }

  .entity.boss .ship {
    transform: scale(.58) !important;
    transform-origin: top center !important;
  }

  .entity.boss .problem {
    top: 74px !important;
    min-width: 132px !important;
    max-width: 158px !important;
    font-size: .74rem !important;
  }
}

@media (max-width: 430px) {
  .answer-dock {
    grid-template-columns: minmax(0, 1fr) 78px 50px !important;
  }

  .numpad button {
    min-height: 34px !important;
    height: 34px !important;
    font-size: .98rem !important;
  }
}

@media (min-width: 921px) {
  .guardian {
    transform: translateX(-50%) scale(.9);
    transform-origin: bottom center;
  }

  .entity.boss {
    transform: translateX(-50%) scale(.94);
    transform-origin: top center;
  }
}


/* ===== V64: 2-row numpad + shrink top HUD ===== */
/* Fix v63 issue: keypad became 3 rows and ate battlefield. */

@media (max-width: 920px) {
  /* Top HUD should pay the space cost, not the battlefield */
  .hud,
  .top-hud,
  .hud.top-hud {
    width: calc(100% - 8px) !important;
    margin: 3px auto 2px !important;
    gap: 3px !important;
    grid-template-columns: 1fr .66fr .66fr .72fr auto !important;
  }

  .pilot-card {
    min-height: 34px !important;
    padding: 3px 6px !important;
    gap: 6px !important;
    border-radius: 10px !important;
  }

  .pilot-card img {
    width: 27px !important;
    height: 27px !important;
    border-radius: 8px !important;
  }

  .pilot-card strong {
    font-size: .82rem !important;
    line-height: 1 !important;
  }

  .pilot-card span {
    display: none !important;
  }

  .stat-card,
  .hp-card {
    min-height: 32px !important;
    height: 32px !important;
    padding: 3px 6px !important;
    border-radius: 9px !important;
    gap: 0 !important;
  }

  .stat-card span,
  .hp-card span {
    display: none !important;
  }

  .stat-card strong {
    font-size: .82rem !important;
    line-height: 1 !important;
  }

  .hp-card {
    min-width: 68px !important;
  }

  .hearts {
    padding-top: 0 !important;
    gap: 1px !important;
    align-items: center !important;
  }

  .heart {
    width: 13px !important;
    height: 13px !important;
    font-size: .7rem !important;
    line-height: 1 !important;
  }

  .icon-btn {
    width: 30px !important;
    min-width: 30px !important;
    height: 32px !important;
    border-radius: 9px !important;
    font-size: .78rem !important;
  }

  .top-actions {
    gap: 3px !important;
  }

  /* Answer dock: compact input row + exactly 2 rows of keys */
  .answer-dock {
    width: calc(100% - 8px) !important;
    margin: 2px auto 3px !important;
    grid-template-columns: minmax(0, 1fr) 78px 48px !important;
    gap: 4px !important;
  }

  .answer-panel {
    min-height: 36px !important;
    padding: 4px 8px !important;
    border-radius: 10px !important;
  }

  .answer-panel span {
    display: none !important;
  }

  .answer-panel strong {
    font-size: 1.04rem !important;
    line-height: 1 !important;
  }

  .fire-btn,
  .clear-btn {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    padding: 0 6px !important;
    font-size: .66rem !important;
    line-height: 1 !important;
  }

  .numpad {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .numpad button {
    min-height: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: .92rem !important;
    padding: 0 !important;
  }

  .numpad button[data-key="back"] {
    font-size: .88rem !important;
  }

  /* battlefield should regain height */
  .battlefield {
    width: calc(100% - 8px) !important;
    margin: 0 auto !important;
    min-height: 0 !important;
  }

  /* keep player base small */
  .guardian {
    width: 90px !important;
    height: 64px !important;
  }

  .shield-dome {
    width: 72px !important;
    height: 45px !important;
  }

  .cannon {
    left: 30px !important;
    bottom: 20px !important;
    width: 30px !important;
    height: 42px !important;
  }

  .base-platform {
    width: 82px !important;
    height: 20px !important;
  }
}

@media (max-width: 430px) {
  .answer-dock {
    grid-template-columns: minmax(0, 1fr) 72px 44px !important;
  }

  .numpad {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  .numpad button {
    min-height: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    font-size: .86rem !important;
  }
}


/* ===== V65: UX reflow fix based on user review =====
   Goals:
   - keypad must be symmetrical 5 + 5
   - no lower duplicate delete
   - boss problem text larger, boss ship can be smaller
   - top info flattened into one compact header row
   - hearts move to bottom-right above answer dock
   - answer row uses a single-line "ANSWER ____" layout
*/

/* shared */
.game-screen {
  position: relative;
}

.numpad .sign-toggle,
.numpad button[data-key="back"] {
  display: none !important;
}

/* flatter header */
.top-hud {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  width: min(1500px, calc(100% - 18px)) !important;
  margin: 6px auto 4px !important;
}

.pilot-card {
  flex: 1 1 260px !important;
}

.stat-card {
  flex: 0 0 auto !important;
  min-width: 84px;
}

.top-actions {
  margin-left: auto !important;
}

/* move hearts out of the top row */
.hp-card {
  position: absolute !important;
  right: 12px !important;
  bottom: 86px !important;
  z-index: 11 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(7, 16, 36, .78) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.24), inset 0 0 14px rgba(255,80,110,.12) !important;
  backdrop-filter: blur(10px) !important;
}

.hp-card span {
  display: none !important;
}

.hearts {
  gap: 3px !important;
  padding-top: 0 !important;
}

.heart {
  width: 22px !important;
  height: 20px !important;
  font-size: 1.15rem !important;
  color: #ff3e59 !important;
  filter: drop-shadow(0 0 8px rgba(255,62,89,.9)) !important;
}

/* one-line answer row */
.answer-dock {
  width: min(1500px, calc(100% - 18px)) !important;
  margin: 4px auto 8px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 78px 120px !important;
  gap: 8px !important;
}

.answer-panel {
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.answer-panel span {
  display: inline !important;
  margin: 0 !important;
  font-size: .8rem !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  color: #93e7ff !important;
}

.answer-panel strong {
  display: inline !important;
  font-size: 1.22rem !important;
  line-height: 1 !important;
}

.fire-btn,
.clear-btn {
  min-height: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
  padding: 0 10px !important;
  line-height: 1 !important;
}

.fire-btn {
  min-width: 120px !important;
}

.clear-btn {
  min-width: 78px !important;
}

/* keypad = symmetric 5 + 5 */
.numpad {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.numpad button {
  min-height: 34px !important;
  height: 34px !important;
  border-radius: 12px !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  padding: 0 !important;
}

/* boss: ship smaller, number bigger */
.entity.boss {
  width: 184px !important;
  height: 110px !important;
}

.entity.boss .ship {
  transform: scale(.68) !important;
  transform-origin: top center !important;
}

.entity.boss .problem {
  top: 70px !important;
  min-width: 150px !important;
  max-width: 178px !important;
  padding: 8px 12px !important;
  font-size: .98rem !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
}

/* mobile first refinements */
@media (max-width: 920px) {
  .top-hud {
    gap: 4px !important;
    width: calc(100% - 10px) !important;
    margin: 4px auto 2px !important;
  }

  .pilot-card {
    flex: 1 1 178px !important;
    min-height: 34px !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    gap: 8px !important;
  }

  .pilot-card img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
  }

  .pilot-card strong {
    font-size: .92rem !important;
    line-height: 1 !important;
  }

  .pilot-card span {
    font-size: .66rem !important;
    line-height: 1 !important;
  }

  .stat-card {
    min-width: 58px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 4px 6px !important;
    border-radius: 12px !important;
  }

  .stat-card span {
    display: none !important;
  }

  .stat-card strong {
    font-size: .84rem !important;
    line-height: 1 !important;
  }

  .icon-btn {
    width: 32px !important;
    min-width: 32px !important;
    height: 34px !important;
    border-radius: 12px !important;
    font-size: .82rem !important;
  }

  .hp-card {
    right: 8px !important;
    bottom: 82px !important;
    padding: 4px 8px !important;
  }

  .heart {
    width: 20px !important;
    height: 18px !important;
    font-size: 1.05rem !important;
  }

  .answer-dock {
    width: calc(100% - 10px) !important;
    margin: 2px auto 4px !important;
    grid-template-columns: minmax(0, 1fr) 64px 92px !important;
    gap: 5px !important;
  }

  .answer-panel {
    min-height: 36px !important;
    padding: 0 8px !important;
    gap: 6px !important;
    border-radius: 12px !important;
  }

  .answer-panel span {
    font-size: .7rem !important;
  }

  .answer-panel strong {
    font-size: 1.02rem !important;
  }

  .fire-btn,
  .clear-btn {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    font-size: .7rem !important;
    padding: 0 6px !important;
  }

  .fire-btn {
    min-width: 92px !important;
  }

  .clear-btn {
    min-width: 64px !important;
  }

  .numpad {
    gap: 4px !important;
  }

  .numpad button {
    min-height: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: .92rem !important;
  }

  .entity.boss {
    width: 170px !important;
    height: 104px !important;
  }

  .entity.boss .ship {
    transform: scale(.56) !important;
  }

  .entity.boss .problem {
    top: 64px !important;
    min-width: 142px !important;
    max-width: 166px !important;
    font-size: .9rem !important;
  }
}

@media (max-width: 430px) {
  .top-hud {
    width: calc(100% - 8px) !important;
  }

  .pilot-card {
    flex-basis: 156px !important;
    min-height: 32px !important;
    padding: 3px 7px !important;
  }

  .pilot-card strong {
    font-size: .86rem !important;
  }

  .pilot-card span {
    font-size: .62rem !important;
  }

  .stat-card {
    min-width: 54px !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 3px 5px !important;
  }

  .stat-card strong {
    font-size: .78rem !important;
  }

  .icon-btn {
    width: 30px !important;
    min-width: 30px !important;
    height: 32px !important;
  }

  .answer-dock {
    width: calc(100% - 8px) !important;
    grid-template-columns: minmax(0, 1fr) 58px 84px !important;
    gap: 4px !important;
  }

  .answer-panel {
    min-height: 34px !important;
    padding: 0 7px !important;
    gap: 5px !important;
  }

  .answer-panel span {
    font-size: .64rem !important;
  }

  .answer-panel strong {
    font-size: .98rem !important;
  }

  .fire-btn,
  .clear-btn {
    min-height: 34px !important;
    height: 34px !important;
    font-size: .66rem !important;
  }

  .numpad button {
    min-height: 28px !important;
    height: 28px !important;
    font-size: .86rem !important;
  }

  .hp-card {
    right: 6px !important;
    bottom: 78px !important;
    padding: 4px 7px !important;
  }

  .heart {
    width: 18px !important;
    height: 16px !important;
    font-size: .98rem !important;
  }

  .entity.boss .problem {
    font-size: .86rem !important;
  }
}

/* ===== V66: boss pacing + readable boss + mobile HUD/controls rebuild ===== */

/* desktop: cleaner header, clearer fire button */
.top-hud {
  display: grid !important;
  grid-template-columns: minmax(280px, 1.5fr) repeat(3, minmax(86px, .52fr)) minmax(92px, .55fr) auto;
  gap: 10px !important;
  align-items: stretch !important;
}

.pilot-card {
  min-height: 58px;
}

.score-card,
.stage-card,
.wave-card,
.hp-card {
  min-width: 0;
}

.hp-card {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  min-width: 92px !important;
  width: auto !important;
  height: auto !important;
  padding: 9px 12px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(12, 48, 102, .72), rgba(3, 11, 28, .82)) !important;
  border: 1px solid var(--border) !important;
  box-shadow: inset 0 0 20px rgba(52,231,255,.08), 0 0 18px rgba(52,231,255,.07) !important;
}

.hp-card span {
  display: block !important;
}

.hearts {
  justify-content: flex-start;
  gap: 4px !important;
}

.heart {
  width: 24px !important;
  height: 22px !important;
  font-size: 1.15rem !important;
  color: #ff4d5e !important;
}

.top-actions {
  margin-left: 0 !important;
  justify-content: flex-end;
  align-items: stretch;
}

.icon-btn {
  min-width: 48px;
}

.answer-dock {
  grid-template-columns: minmax(0, 1fr) 92px 124px !important;
  align-items: stretch;
}

.answer-panel {
  min-width: 0;
}

.answer-panel span {
  display: inline !important;
}

.fire-btn,
.clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
  overflow: hidden;
}

.fire-btn {
  flex-direction: column;
  gap: 1px;
}

.fire-btn .btn-main {
  display: block;
  font-size: 1rem;
  font-weight: 900;
}

.fire-btn .btn-sub {
  display: block;
  font-size: .74rem;
  opacity: .86;
}

.clear-btn {
  font-size: .92rem !important;
}

.numpad button {
  min-height: 40px !important;
  height: 40px !important;
}

/* boss readability and a bit more spectacle */
.entity.boss {
  width: 198px !important;
  height: 118px !important;
}

.entity.boss .ship {
  transform: scale(.64) !important;
  transform-origin: top center !important;
}

.entity.boss .problem {
  top: 68px !important;
  min-width: 168px !important;
  max-width: 194px !important;
  padding: 8px 12px !important;
  font-size: 1.18rem !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  text-shadow: 0 0 14px currentColor, 0 0 26px rgba(255,255,255,.18) !important;
}

.drop.math-bomb,
.drop.math-heart {
  width: 112px;
  height: 76px;
}

.drop.math-bomb .drop-problem,
.drop.math-heart .drop-problem {
  font-size: .96rem;
}

.hit-spark,
.impact-ring,
.explosion {
  pointer-events: none;
}

@media (max-width: 920px) {
  .top-hud {
    width: calc(100% - 10px) !important;
    margin: 4px auto 3px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto !important;
    grid-template-areas:
      "pilot pilot pilot actions"
      "score stage wave hp" !important;
    gap: 5px !important;
    align-items: stretch !important;
  }

  .pilot-card {
    grid-area: pilot;
    min-height: 40px !important;
    padding: 5px 8px !important;
    border-radius: 12px !important;
    gap: 8px !important;
    flex: initial !important;
  }

  .pilot-card img {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
  }

  .pilot-card strong {
    font-size: .94rem !important;
    line-height: 1 !important;
  }

  .pilot-card span {
    font-size: .62rem !important;
    line-height: 1 !important;
    display: block !important;
  }

  .score-card { grid-area: score; }
  .stage-card { grid-area: stage; }
  .wave-card { grid-area: wave; }

  .stat-card,
  .hp-card {
    min-height: 42px !important;
    height: 42px !important;
    padding: 5px 7px !important;
    border-radius: 12px !important;
  }

  .stat-card span,
  .hp-card span {
    display: block !important;
    font-size: .52rem !important;
    letter-spacing: .08em !important;
  }

  .stat-card strong {
    font-size: .92rem !important;
    line-height: 1 !important;
  }

  .hp-card {
    grid-area: hp;
    padding: 4px 7px !important;
    min-width: 0 !important;
  }

  .hearts {
    justify-content: flex-start;
    gap: 1px !important;
  }

  .heart {
    width: 15px !important;
    height: 15px !important;
    font-size: .88rem !important;
  }

  .top-actions {
    grid-area: actions;
    margin-left: 0 !important;
    display: flex !important;
    gap: 5px !important;
    justify-content: flex-end !important;
  }

  .icon-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 40px !important;
    border-radius: 12px !important;
    font-size: .88rem !important;
  }

  .side-panel.left {
    left: 6px;
    bottom: 102px;
    transform: scale(.60);
    opacity: .42;
  }

  .battlefield {
    width: calc(100% - 10px) !important;
  }

  .entity {
    width: 84px;
    height: 74px;
  }

  .ship .problem {
    top: 58px;
    min-width: 86px;
    max-width: 112px;
    font-size: .78rem !important;
    padding: 4px 7px !important;
  }

  .entity.boss {
    width: 182px !important;
    height: 112px !important;
  }

  .entity.boss .ship {
    transform: scale(.52) !important;
  }

  .entity.boss .problem {
    top: 62px !important;
    min-width: 154px !important;
    max-width: 176px !important;
    padding: 8px 10px !important;
    font-size: 1.02rem !important;
    line-height: 1.08 !important;
  }

  .boss-bar {
    top: 6px;
    width: calc(100% - 12px);
    padding: 6px 8px;
    gap: 8px;
    font-size: .72rem;
  }

  .answer-dock {
    width: calc(100% - 10px) !important;
    margin: 3px auto 4px !important;
    grid-template-columns: minmax(0, 1fr) 66px 96px !important;
    gap: 5px !important;
  }

  .answer-panel {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 8px !important;
    gap: 6px !important;
    border-radius: 12px !important;
  }

  .answer-panel span {
    font-size: .66rem !important;
    letter-spacing: .08em !important;
    flex: 0 0 auto;
  }

  .answer-panel strong {
    font-size: 1rem !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fire-btn,
  .clear-btn {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 6px !important;
    border-radius: 12px !important;
  }

  .fire-btn .btn-main {
    font-size: .82rem;
  }

  .fire-btn .btn-sub {
    display: none;
  }

  .clear-btn {
    font-size: .74rem !important;
  }

  .numpad {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .numpad button {
    min-height: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    font-size: .96rem !important;
  }

  .numpad button[data-key="0"] {
    grid-column: 5;
  }

  .drop.math-bomb,
  .drop.math-heart {
    width: 84px;
    height: 58px;
    border-radius: 14px;
  }

  .drop.math-bomb .drop-icon,
  .drop.math-heart .drop-icon {
    font-size: 1.1rem;
  }

  .drop.math-bomb .drop-problem,
  .drop.math-heart .drop-problem {
    font-size: .74rem !important;
  }
}

@media (max-width: 430px) {
  .top-hud {
    width: calc(100% - 8px) !important;
    gap: 4px !important;
  }

  .pilot-card {
    min-height: 38px !important;
    padding: 4px 7px !important;
  }

  .pilot-card strong {
    font-size: .9rem !important;
  }

  .pilot-card span {
    font-size: .58rem !important;
  }

  .stat-card,
  .hp-card {
    min-height: 40px !important;
    height: 40px !important;
    padding: 4px 6px !important;
  }

  .stat-card strong {
    font-size: .84rem !important;
  }

  .icon-btn {
    width: 32px !important;
    min-width: 32px !important;
    height: 38px !important;
  }

  .answer-dock {
    width: calc(100% - 8px) !important;
    grid-template-columns: minmax(0, 1fr) 62px 88px !important;
    gap: 4px !important;
  }

  .answer-panel {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 7px !important;
  }

  .answer-panel span {
    font-size: .62rem !important;
  }

  .answer-panel strong {
    font-size: .94rem !important;
  }

  .fire-btn,
  .clear-btn {
    min-height: 36px !important;
    height: 36px !important;
  }

  .fire-btn .btn-main {
    font-size: .76rem;
  }

  .clear-btn {
    font-size: .7rem !important;
  }

  .numpad button {
    min-height: 32px !important;
    height: 32px !important;
    font-size: .9rem !important;
  }

  .entity.boss .problem {
    font-size: .96rem !important;
    min-width: 148px !important;
    max-width: 170px !important;
  }
}


/* ===== V67: mobile bottom controls aligned + larger boss math ===== */
@media (max-width: 920px) {
  .answer-dock {
    width: calc(100% - 10px) !important;
    margin: 3px auto 4px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    align-items: stretch !important;
  }

  .answer-panel {
    grid-column: 1 / span 3 !important;
    grid-row: 1 !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 10px !important;
    gap: 6px !important;
    border-radius: 14px !important;
  }

  .clear-btn,
  .fire-btn {
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 14px !important;
  }

  .clear-btn {
    grid-column: 4 !important;
    font-size: .82rem !important;
  }

  .fire-btn {
    grid-column: 5 !important;
  }

  .fire-btn .btn-main {
    font-size: .88rem !important;
  }

  .fire-btn .btn-sub {
    display: none !important;
  }

  .numpad {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .numpad button {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
  }

  .entity.boss {
    width: 190px !important;
    height: 118px !important;
  }

  .entity.boss .ship {
    transform: scale(.48) !important;
  }

  .entity.boss .problem {
    top: 58px !important;
    min-width: 174px !important;
    max-width: 196px !important;
    padding: 9px 12px !important;
    font-size: 1.22rem !important;
    line-height: 1.08 !important;
    letter-spacing: .01em !important;
  }
}

@media (max-width: 430px) {
  .answer-dock {
    width: calc(100% - 8px) !important;
    gap: 4px !important;
  }

  .answer-panel {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 8px !important;
  }

  .answer-panel span {
    font-size: .64rem !important;
  }

  .answer-panel strong {
    font-size: 1rem !important;
  }

  .clear-btn,
  .fire-btn {
    min-height: 40px !important;
    height: 40px !important;
  }

  .clear-btn {
    font-size: .78rem !important;
  }

  .fire-btn .btn-main {
    font-size: .84rem !important;
  }

  .numpad button {
    min-height: 34px !important;
    height: 34px !important;
    font-size: .96rem !important;
  }

  .entity.boss .ship {
    transform: scale(.46) !important;
  }

  .entity.boss .problem {
    top: 56px !important;
    min-width: 168px !important;
    max-width: 190px !important;
    font-size: 1.16rem !important;
  }
}


/* ===== V68: visible mobile control fix, hard override ===== */
/* This block is intentionally placed last and uses high specificity to beat older V64-V67 rules. */

@media (max-width: 920px) {
  section.game-screen:not(.hidden) > footer.answer-dock {
    width: calc(100% - 10px) !important;
    margin: 3px auto 4px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: 44px 36px 36px !important;
    gap: 4px !important;
    align-items: stretch !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel {
    grid-column: 1 / span 3 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
    grid-column: 4 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    font-size: .86rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    position: static !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
    grid-column: 5 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
    position: static !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
    font-size: .9rem !important;
    line-height: 1 !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-sub {
    display: none !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
    grid-column: 1 / -1 !important;
    grid-row: 2 / span 2 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, 36px) !important;
    gap: 4px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    padding: 0 !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad .sign-toggle,
  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button[data-key="back"] {
    display: none !important;
  }

  /* Boss math must be readable even if boss ship is scaled down */
  .entity.boss {
    width: 196px !important;
    height: 122px !important;
  }

  .entity.boss .ship {
    transform: scale(.44) !important;
    transform-origin: top center !important;
  }

  .entity.boss .problem {
    top: 54px !important;
    left: 50% !important;
    min-width: 180px !important;
    max-width: 204px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    font-size: 1.34rem !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: .01em !important;
    text-align: center !important;
    background: rgba(5, 8, 25, .92) !important;
    box-shadow: 0 0 22px currentColor, 0 0 34px rgba(255,255,255,.18) !important;
  }

  .boss-bar {
    top: 5px !important;
    z-index: 7 !important;
  }
}

@media (max-width: 430px) {
  section.game-screen:not(.hidden) > footer.answer-dock {
    width: calc(100% - 8px) !important;
    grid-template-rows: 42px 34px 34px !important;
    gap: 4px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel,
  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn,
  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
    min-height: 42px !important;
    height: 42px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
    grid-template-rows: repeat(2, 34px) !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
    min-height: 34px !important;
    height: 34px !important;
    font-size: .95rem !important;
  }

  .entity.boss .problem {
    min-width: 174px !important;
    max-width: 198px !important;
    font-size: 1.26rem !important;
  }
}


/* ===== V69: final control grid for desktop + mobile, boss readability boost ===== */
/* Same UX on every device:
   ANSWER = columns 1-3
   CLEAR = column 4, directly above number 4
   FIRE = column 5, directly above number 5
   NUMPAD = 5 x 2
*/

section.game-screen:not(.hidden) > footer.answer-dock {
  width: min(1500px, calc(100% - 18px)) !important;
  margin: 5px auto 8px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-template-rows: 50px 44px 44px !important;
  gap: 7px !important;
  align-items: stretch !important;
  z-index: 8 !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel {
  grid-column: 1 / span 3 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel span {
  display: inline !important;
  flex: 0 0 auto !important;
  font-size: .86rem !important;
  letter-spacing: .12em !important;
  white-space: nowrap !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel strong {
  display: inline !important;
  font-size: 1.34rem !important;
  line-height: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
  grid-column: 4 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  font-size: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  transform: none !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
  grid-column: 5 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  transform: none !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
  display: block !important;
  font-size: 1.08rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-sub {
  display: block !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  opacity: .82 !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
  grid-column: 1 / -1 !important;
  grid-row: 2 / span 2 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, 44px) !important;
  gap: 7px !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  font-size: 1.12rem !important;
  padding: 0 !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .numpad .sign-toggle,
section.game-screen:not(.hidden) > footer.answer-dock > .numpad button[data-key="back"] {
  display: none !important;
}

/* Boss problem: make math readable first, ship second */
.entity.boss {
  width: 240px !important;
  height: 132px !important;
}

.entity.boss .ship {
  transform: scale(.56) !important;
  transform-origin: top center !important;
}

.entity.boss .problem {
  top: 62px !important;
  left: 50% !important;
  min-width: 218px !important;
  max-width: 252px !important;
  padding: 12px 16px !important;
  border-radius: 18px !important;
  font-size: 1.72rem !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  background: rgba(4, 8, 24, .95) !important;
  border-width: 2px !important;
  text-shadow: 0 0 16px currentColor, 0 0 34px rgba(255,255,255,.24) !important;
  box-shadow: 0 0 24px currentColor, 0 0 42px rgba(255,255,255,.18), inset 0 0 18px rgba(255,255,255,.08) !important;
}

/* Bomb / heart math readability */
.drop.math-bomb,
.drop.math-heart {
  width: 118px !important;
  height: 78px !important;
}

.drop.math-bomb .drop-problem,
.drop.math-heart .drop-problem {
  font-size: 1.02rem !important;
  line-height: 1.05 !important;
}

@media (max-width: 920px) {
  section.game-screen:not(.hidden) > footer.answer-dock {
    width: calc(100% - 10px) !important;
    margin: 3px auto 4px !important;
    grid-template-rows: 44px 36px 36px !important;
    gap: 4px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    gap: 7px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel span {
    font-size: .68rem !important;
    letter-spacing: .09em !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel strong {
    font-size: 1.12rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn,
  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
    font-size: .86rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
    font-size: .9rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-sub {
    display: none !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
    grid-template-rows: repeat(2, 36px) !important;
    gap: 4px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
  }

  .entity.boss {
    width: 220px !important;
    height: 128px !important;
  }

  .entity.boss .ship {
    transform: scale(.44) !important;
  }

  .entity.boss .problem {
    top: 54px !important;
    min-width: 198px !important;
    max-width: 226px !important;
    padding: 11px 14px !important;
    border-radius: 17px !important;
    font-size: 1.48rem !important;
    line-height: 1.02 !important;
  }

  .drop.math-bomb,
  .drop.math-heart {
    width: 92px !important;
    height: 62px !important;
  }

  .drop.math-bomb .drop-problem,
  .drop.math-heart .drop-problem {
    font-size: .84rem !important;
  }
}

@media (max-width: 430px) {
  section.game-screen:not(.hidden) > footer.answer-dock {
    width: calc(100% - 8px) !important;
    grid-template-rows: 42px 34px 34px !important;
    gap: 4px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel,
  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn,
  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
    min-height: 42px !important;
    height: 42px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel {
    padding: 0 8px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel span {
    font-size: .62rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel strong {
    font-size: 1.04rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
    font-size: .78rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
    font-size: .86rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
    grid-template-rows: repeat(2, 34px) !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
    min-height: 34px !important;
    height: 34px !important;
    font-size: .96rem !important;
  }

  .entity.boss {
    width: 210px !important;
    height: 124px !important;
  }

  .entity.boss .problem {
    top: 52px !important;
    min-width: 190px !important;
    max-width: 218px !important;
    padding: 10px 13px !important;
    font-size: 1.38rem !important;
  }
}


/* ===== V70: final layout reset — 10-digit bottom row, HP + Answer + Clear + Fire above ===== */
/* Main rule for both desktop and mobile:
   - Bottom row: 1 2 3 4 5 6 7 8 9 0 in one horizontal row
   - Above row: HP left, Answer center, Clear, Fire far right
   - Fire is the primary action on the far right
*/

/* HEADER without HP */
section.game-screen:not(.hidden) > header.top-hud {
  display: grid !important;
  grid-template-columns: minmax(250px, 1.6fr) minmax(92px, .55fr) minmax(92px, .55fr) minmax(110px, .7fr) auto !important;
  gap: 8px !important;
  width: min(1500px, calc(100% - 16px)) !important;
  margin: 6px auto 5px !important;
  align-items: stretch !important;
}

section.game-screen:not(.hidden) > header.top-hud .pilot-card {
  grid-column: auto !important;
  min-height: 52px !important;
}

section.game-screen:not(.hidden) > header.top-hud .score-card,
section.game-screen:not(.hidden) > header.top-hud .stage-card,
section.game-screen:not(.hidden) > header.top-hud .wave-card {
  min-height: 52px !important;
}

section.game-screen:not(.hidden) > header.top-hud .top-actions {
  display: flex !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  margin-left: 0 !important;
}

/* BOTTOM CONTROL DOCK */
section.game-screen:not(.hidden) > footer.answer-dock {
  width: min(1500px, calc(100% - 16px)) !important;
  margin: 4px auto 7px !important;
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  grid-template-rows: 52px 48px !important;
  gap: 6px !important;
  align-items: stretch !important;
  z-index: 9 !important;
}

/* HP is now part of the bottom control dock */
section.game-screen:not(.hidden) > footer.answer-dock > .hp-card {
  grid-column: 1 / span 2 !important;
  grid-row: 1 !important;
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  height: 52px !important;
  padding: 6px 10px !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  background: linear-gradient(180deg, rgba(12, 48, 102, .72), rgba(3, 11, 28, .82)) !important;
  border: 1px solid var(--border) !important;
  box-shadow: inset 0 0 20px rgba(52,231,255,.08), 0 0 18px rgba(52,231,255,.07) !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .hp-card span {
  display: block !important;
  color: #85dfff !important;
  font-size: .66rem !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
}

section.game-screen:not(.hidden) > footer.answer-dock .hearts {
  display: flex !important;
  gap: 4px !important;
  padding-top: 4px !important;
}

section.game-screen:not(.hidden) > footer.answer-dock .heart {
  width: 22px !important;
  height: 20px !important;
  font-size: 1.18rem !important;
  color: #ff405c !important;
  filter: drop-shadow(0 0 8px rgba(255,64,92,.9)) !important;
}

/* Answer field in the center */
section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel {
  grid-column: 3 / span 5 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel span {
  display: inline !important;
  flex: 0 0 auto !important;
  color: #93e7ff !important;
  font-size: .78rem !important;
  letter-spacing: .11em !important;
  white-space: nowrap !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel strong {
  display: inline !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Clear and Fire on the right */
section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
  grid-column: 8 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  font-size: .98rem !important;
  position: static !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
  grid-column: 9 / span 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  position: static !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
  display: block !important;
  font-size: 1.08rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-sub {
  display: block !important;
  font-size: .7rem !important;
  line-height: 1 !important;
  opacity: .82 !important;
}

/* 0–9 horizontal at the very bottom */
section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  grid-template-rows: 48px !important;
  gap: 6px !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  padding: 0 !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .numpad .sign-toggle,
section.game-screen:not(.hidden) > footer.answer-dock > .numpad button[data-key="back"] {
  display: none !important;
}

/* Boss math readability: slightly bigger again */
.entity.boss {
  width: 248px !important;
  height: 138px !important;
}

.entity.boss .ship {
  transform: scale(.54) !important;
  transform-origin: top center !important;
}

.entity.boss .problem {
  top: 62px !important;
  min-width: 230px !important;
  max-width: 266px !important;
  padding: 13px 16px !important;
  border-radius: 18px !important;
  font-size: 1.86rem !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  background: rgba(4, 8, 24, .95) !important;
  border-width: 2px !important;
  text-align: center !important;
}

/* MOBILE */
@media (max-width: 920px) {
  section.game-screen:not(.hidden) > header.top-hud {
    width: calc(100% - 10px) !important;
    margin: 4px auto 3px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto !important;
    grid-template-areas:
      "pilot pilot pilot actions"
      "score stage wave wave" !important;
    gap: 5px !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .pilot-card {
    grid-area: pilot !important;
    min-height: 40px !important;
    padding: 5px 8px !important;
    border-radius: 12px !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .score-card { grid-area: score !important; }
  section.game-screen:not(.hidden) > header.top-hud .stage-card { grid-area: stage !important; }
  section.game-screen:not(.hidden) > header.top-hud .wave-card { grid-area: wave !important; }

  section.game-screen:not(.hidden) > header.top-hud .stat-card {
    min-height: 38px !important;
    height: 38px !important;
    padding: 4px 7px !important;
    border-radius: 12px !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .stat-card span {
    display: block !important;
    font-size: .52rem !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .stat-card strong {
    font-size: .9rem !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .top-actions {
    grid-area: actions !important;
    gap: 5px !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .icon-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 40px !important;
    border-radius: 12px !important;
    font-size: .86rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock {
    width: calc(100% - 10px) !important;
    margin: 3px auto 4px !important;
    grid-template-rows: 42px 34px !important;
    gap: 4px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .hp-card {
    grid-column: 1 / span 2 !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 4px 7px !important;
    border-radius: 13px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .hp-card span {
    font-size: .56rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock .hearts {
    gap: 2px !important;
    padding-top: 2px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock .heart {
    width: 15px !important;
    height: 15px !important;
    font-size: .88rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel {
    grid-column: 3 / span 5 !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 8px !important;
    border-radius: 13px !important;
    gap: 6px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel span {
    font-size: .62rem !important;
    letter-spacing: .08em !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel strong {
    font-size: 1.04rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    font-size: .74rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
    font-size: .84rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-sub {
    display: none !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
    grid-template-rows: 34px !important;
    gap: 4px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
    min-height: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    font-size: .92rem !important;
  }

  .entity.boss {
    width: 226px !important;
    height: 132px !important;
  }

  .entity.boss .ship {
    transform: scale(.42) !important;
  }

  .entity.boss .problem {
    top: 52px !important;
    min-width: 206px !important;
    max-width: 236px !important;
    padding: 12px 14px !important;
    font-size: 1.58rem !important;
  }
}

@media (max-width: 430px) {
  section.game-screen:not(.hidden) > footer.answer-dock {
    width: calc(100% - 8px) !important;
    grid-template-rows: 40px 32px !important;
    gap: 3px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .hp-card,
  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel,
  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn,
  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
    min-height: 40px !important;
    height: 40px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel span {
    font-size: .58rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel strong {
    font-size: .98rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
    font-size: .68rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
    font-size: .78rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
    grid-template-rows: 32px !important;
    gap: 3px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
    min-height: 32px !important;
    height: 32px !important;
    font-size: .84rem !important;
  }

  .entity.boss .problem {
    min-width: 198px !important;
    max-width: 228px !important;
    font-size: 1.46rem !important;
  }
}


/* ===== V71: portrait-first final control layout =====
   Design goal:
   - Top header does NOT contain HP. Keep upper-right space free for future upgrades.
   - Bottom control area:
     row 1 = HP left | answer display center | CLEAR | red circular FIRE
     row 2 = 0 1 2 3 4 5 6 7 8 9 full-width
   - Works on desktop and mobile; mobile is the priority.
*/

/* ---------- Top HUD: no HP, leave space for future feature area ---------- */
section.game-screen:not(.hidden) > header.top-hud {
  width: min(1500px, calc(100% - 16px)) !important;
  margin: 6px auto 5px !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 1.55fr) minmax(94px, .56fr) minmax(94px, .56fr) minmax(116px, .70fr) minmax(120px, .72fr) auto !important;
  gap: 8px !important;
  align-items: stretch !important;
}

section.game-screen:not(.hidden) > header.top-hud > .hp-card {
  display: none !important;
}

section.game-screen:not(.hidden) > header.top-hud .pilot-card {
  min-height: 54px !important;
  border-radius: 18px !important;
}

section.game-screen:not(.hidden) > header.top-hud .score-card,
section.game-screen:not(.hidden) > header.top-hud .stage-card,
section.game-screen:not(.hidden) > header.top-hud .wave-card {
  min-height: 54px !important;
  height: 54px !important;
  padding: 8px 12px !important;
  border-radius: 18px !important;
}

section.game-screen:not(.hidden) > header.top-hud .score-card strong,
section.game-screen:not(.hidden) > header.top-hud .stage-card strong,
section.game-screen:not(.hidden) > header.top-hud .wave-card strong {
  font-size: 1.24rem !important;
}

section.game-screen:not(.hidden) > header.top-hud::after {
  content: "";
  min-height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(94,231,255,.18);
  background:
    linear-gradient(180deg, rgba(12, 48, 102, .28), rgba(3, 11, 28, .34)),
    radial-gradient(circle at 50% 50%, rgba(52,231,255,.10), transparent 64%);
  box-shadow: inset 0 0 18px rgba(52,231,255,.05);
}

section.game-screen:not(.hidden) > header.top-hud .top-actions {
  display: flex !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  margin-left: 0 !important;
}

section.game-screen:not(.hidden) > header.top-hud .icon-btn {
  min-width: 52px !important;
  height: 54px !important;
  border-radius: 16px !important;
}

/* ---------- Bottom control dock ---------- */
section.game-screen:not(.hidden) > footer.answer-dock {
  width: min(1500px, calc(100% - 16px)) !important;
  margin: 4px auto 7px !important;
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  grid-template-rows: 64px 54px !important;
  gap: 7px !important;
  align-items: stretch !important;
  z-index: 9 !important;
}

/* HP bottom-left only */
section.game-screen:not(.hidden) > footer.answer-dock > .hp-card {
  grid-column: 1 / span 2 !important;
  grid-row: 1 !important;
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 64px !important;
  height: 64px !important;
  padding: 8px 12px !important;
  border-radius: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  background:
    linear-gradient(180deg, rgba(14, 47, 94, .75), rgba(3, 11, 28, .86)),
    radial-gradient(circle at 20% 40%, rgba(255,64,92,.16), transparent 56%) !important;
  border: 1px solid rgba(94,231,255,.30) !important;
  box-shadow: inset 0 0 22px rgba(52,231,255,.08), 0 0 18px rgba(52,231,255,.08) !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .hp-card span {
  display: block !important;
  color: #ff4d74 !important;
  font-size: .74rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  line-height: 1 !important;
}

section.game-screen:not(.hidden) > footer.answer-dock .hearts {
  display: flex !important;
  gap: 5px !important;
  padding-top: 7px !important;
}

section.game-screen:not(.hidden) > footer.answer-dock .heart {
  width: 25px !important;
  height: 23px !important;
  font-size: 1.28rem !important;
  color: #ff3d5f !important;
  filter: drop-shadow(0 0 10px rgba(255,61,95,.95)) !important;
}

/* Answer display: no label feel; just a clean input frame */
section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel {
  grid-column: 3 / span 5 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 64px !important;
  height: 64px !important;
  padding: 0 18px !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    linear-gradient(180deg, rgba(9, 31, 70, .65), rgba(2, 9, 24, .88)),
    radial-gradient(circle at 50% 50%, rgba(52,231,255,.09), transparent 70%) !important;
  border: 1px solid rgba(94,231,255,.38) !important;
  box-shadow: inset 0 0 24px rgba(52,231,255,.10), 0 0 18px rgba(52,231,255,.08) !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel span {
  display: none !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel strong {
  display: block !important;
  font-size: 2rem !important;
  line-height: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #8af7ff !important;
  text-align: center !important;
  text-shadow: 0 0 14px rgba(52,231,255,.85) !important;
}

/* CLEAR */
section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
  grid-column: 8 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 64px !important;
  height: 64px !important;
  padding: 0 !important;
  border-radius: 18px !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  color: #bffaff !important;
  background: linear-gradient(180deg, rgba(15, 86, 145, .92), rgba(4, 19, 43, .94)) !important;
  border: 1px solid rgba(94,231,255,.46) !important;
  box-shadow: inset 0 0 20px rgba(52,231,255,.14), 0 0 18px rgba(52,231,255,.13) !important;
  position: static !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* FIRE: red circular launch button */
section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
  grid-column: 9 / span 2 !important;
  grid-row: 1 / span 2 !important;
  justify-self: end !important;
  align-self: center !important;
  width: min(132px, 100%) !important;
  height: min(132px, 100%) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  position: static !important;
  transform: none !important;
  z-index: 10 !important;
  display: grid !important;
  place-items: center !important;
  background:
    radial-gradient(circle at 50% 42%, #fff7f7 0 4%, #ff9ca3 5% 14%, #ff293d 15% 48%, #8a0714 70%, #1a0308 100%) !important;
  border: 5px solid rgba(255,120,126,.82) !important;
  box-shadow:
    0 0 20px rgba(255, 43, 63, .95),
    0 0 46px rgba(255, 43, 63, .55),
    inset 0 0 20px rgba(255,255,255,.18),
    inset 0 -12px 28px rgba(0,0,0,.45) !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.26);
  pointer-events: none;
}

section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
  display: block !important;
  font-size: 1.45rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
  color: #fff !important;
  text-shadow: 0 0 14px rgba(255,255,255,.95), 0 0 24px rgba(255,40,50,.95) !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-sub {
  display: none !important;
}

/* Digits: one horizontal row at very bottom, keep 0 visible */
section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
  grid-column: 1 / span 8 !important;
  grid-row: 2 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  grid-template-rows: 54px !important;
  gap: 6px !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  font-size: 1.26rem !important;
  font-weight: 900 !important;
  padding: 0 !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .numpad .sign-toggle,
section.game-screen:not(.hidden) > footer.answer-dock > .numpad button[data-key="back"] {
  display: none !important;
}

/* Boss math: a little larger */
.entity.boss .problem {
  font-size: 1.98rem !important;
  min-width: 242px !important;
  max-width: 280px !important;
  padding: 14px 18px !important;
}

/* ---------- Mobile portrait ---------- */
@media (max-width: 920px) {
  section.game-screen:not(.hidden) > header.top-hud {
    width: calc(100% - 10px) !important;
    margin: 4px auto 3px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto !important;
    grid-template-areas:
      "pilot pilot pilot actions"
      "score stage wave wave" !important;
    gap: 5px !important;
  }

  section.game-screen:not(.hidden) > header.top-hud::after {
    display: none !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .pilot-card {
    grid-area: pilot !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 5px 8px !important;
    border-radius: 13px !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .pilot-card img {
    width: 30px !important;
    height: 30px !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .pilot-card strong {
    font-size: .92rem !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .pilot-card span {
    font-size: .58rem !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .score-card { grid-area: score !important; }
  section.game-screen:not(.hidden) > header.top-hud .stage-card { grid-area: stage !important; }
  section.game-screen:not(.hidden) > header.top-hud .wave-card { grid-area: wave !important; }

  section.game-screen:not(.hidden) > header.top-hud .stat-card {
    min-height: 38px !important;
    height: 38px !important;
    padding: 4px 7px !important;
    border-radius: 13px !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .stat-card span {
    font-size: .5rem !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .stat-card strong {
    font-size: .88rem !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .top-actions {
    grid-area: actions !important;
    gap: 5px !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .icon-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 40px !important;
    border-radius: 12px !important;
    font-size: .86rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock {
    width: calc(100% - 10px) !important;
    margin: 3px auto 4px !important;
    grid-template-rows: 46px 34px !important;
    gap: 4px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .hp-card {
    grid-column: 1 / span 2 !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 5px 8px !important;
    border-radius: 14px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .hp-card span {
    font-size: .56rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock .hearts {
    gap: 2px !important;
    padding-top: 3px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock .heart {
    width: 16px !important;
    height: 16px !important;
    font-size: .96rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel {
    grid-column: 3 / span 4 !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 8px !important;
    border-radius: 14px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel strong {
    font-size: 1.18rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
    grid-column: 7 / span 2 !important;
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    font-size: .78rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
    grid-column: 9 / span 2 !important;
    grid-row: 1 / span 2 !important;
    width: min(80px, 100%) !important;
    height: min(80px, 100%) !important;
    border-width: 4px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
    font-size: 1rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
    grid-column: 1 / span 8 !important;
    grid-row: 2 !important;
    grid-template-rows: 34px !important;
    gap: 3px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
    min-height: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    font-size: .82rem !important;
  }

  .entity.boss .problem {
    font-size: 1.64rem !important;
    min-width: 214px !important;
    max-width: 246px !important;
    padding: 12px 15px !important;
  }
}

@media (max-width: 430px) {
  section.game-screen:not(.hidden) > footer.answer-dock {
    width: calc(100% - 8px) !important;
    grid-template-rows: 44px 32px !important;
    gap: 3px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .hp-card,
  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel,
  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
    min-height: 44px !important;
    height: 44px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel strong {
    font-size: 1.08rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
    font-size: .72rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
    width: min(76px, 100%) !important;
    height: min(76px, 100%) !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
    font-size: .92rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
    grid-template-rows: 32px !important;
    gap: 3px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
    min-height: 32px !important;
    height: 32px !important;
    font-size: .76rem !important;
    border-radius: 9px !important;
  }

  .entity.boss .problem {
    font-size: 1.5rem !important;
    min-width: 202px !important;
    max-width: 234px !important;
  }
}


/* ===== V72: zero key mobile fix ===== */
/* FIRE / CLEAR / HP / ANSWER stay in row 1 only.
   Digits always own full row 2 with 10 columns. */

section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
  grid-row: 1 !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  width: 100% !important;
  z-index: 9 !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .numpad button[data-key="0"] {
  display: inline-flex !important;
  grid-column: auto !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .numpad .sign-toggle,
section.game-screen:not(.hidden) > footer.answer-dock > .numpad button[data-key="back"] {
  display: none !important;
}

@media (max-width: 920px) {
  section.game-screen:not(.hidden) > footer.answer-dock {
    grid-template-rows: 46px 34px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
    grid-column: 9 / span 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    aspect-ratio: auto !important;
    border-radius: 18px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn::before {
    inset: 5px !important;
    border-radius: 14px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    grid-template-rows: 34px !important;
    gap: 3px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
    min-height: 34px !important;
    height: 34px !important;
    font-size: .82rem !important;
    border-radius: 9px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button[data-key="0"] {
    display: inline-flex !important;
    grid-column: auto !important;
  }
}

@media (max-width: 430px) {
  section.game-screen:not(.hidden) > footer.answer-dock {
    grid-template-rows: 44px 32px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
    height: 44px !important;
    min-height: 44px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
    grid-template-rows: 32px !important;
    gap: 3px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
    min-height: 32px !important;
    height: 32px !important;
    font-size: .74rem !important;
    border-radius: 8px !important;
  }
}


/* ===== V73: FIRE overlap + bigger boss font =====
   Goal:
   - keep 0 visible on mobile
   - FIRE stays large and can overlap upward into the play area a bit
   - boss math becomes clearly larger
*/

/* generic bottom dock tuning */
section.game-screen:not(.hidden) > footer.answer-dock {
  position: relative !important;
  overflow: visible !important;
}

/* remove visible label feel from answer box */
section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel span {
  display: none !important;
}

/* desktop/tablet */
section.game-screen:not(.hidden) > footer.answer-dock {
  grid-template-columns: 1.7fr 1.7fr 1.2fr 1.2fr 1.2fr 1.2fr 1fr 1fr 1.3fr 1.3fr !important;
  grid-template-rows: 66px 56px !important;
  gap: 7px !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .hp-card {
  grid-column: 1 / span 2 !important;
  grid-row: 1 !important;
  min-height: 66px !important;
  height: 66px !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel {
  grid-column: 3 / span 4 !important;
  grid-row: 1 !important;
  min-height: 66px !important;
  height: 66px !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel strong {
  font-size: 2.15rem !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
  grid-column: 7 / span 2 !important;
  grid-row: 1 !important;
  min-height: 66px !important;
  height: 66px !important;
  font-size: 1rem !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
  grid-column: 9 / span 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: start !important;
  width: min(138px, 100%) !important;
  height: 108px !important;
  min-height: 108px !important;
  border-radius: 999px !important;
  position: relative !important;
  top: -18px !important;
  z-index: 20 !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
  font-size: 1.5rem !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  grid-template-rows: 56px !important;
  gap: 6px !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
  min-height: 56px !important;
  height: 56px !important;
  font-size: 1.28rem !important;
  border-radius: 16px !important;
}

/* bigger boss formula */
.entity.boss .problem {
  font-size: 2.5rem !important;
  min-width: 270px !important;
  max-width: 320px !important;
  padding: 16px 20px !important;
  line-height: 1.05 !important;
}

/* mobile */
@media (max-width: 920px) {
  section.game-screen:not(.hidden) > footer.answer-dock {
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    grid-template-rows: 44px 32px !important;
    gap: 4px !important;
    margin: 2px auto 4px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .hp-card {
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 4px 7px !important;
    border-radius: 14px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .hp-card span {
    font-size: .54rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock .hearts {
    gap: 2px !important;
    padding-top: 2px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock .heart {
    font-size: .92rem !important;
    width: 15px !important;
    height: 15px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel {
    grid-column: 3 / span 4 !important;
    grid-row: 1 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 8px !important;
    border-radius: 14px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel strong {
    font-size: 1.1rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
    grid-column: 7 / span 2 !important;
    grid-row: 1 !important;
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    font-size: .72rem !important;
    padding: 0 !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
    grid-column: 9 / span 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    width: 100% !important;
    height: 74px !important;
    min-height: 74px !important;
    border-radius: 999px !important;
    position: relative !important;
    top: -10px !important;
    z-index: 24 !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn::before {
    inset: 5px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
    font-size: .95rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    grid-template-rows: 32px !important;
    gap: 3px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
    min-height: 32px !important;
    height: 32px !important;
    font-size: .75rem !important;
    border-radius: 9px !important;
  }

  .entity.boss .problem {
    font-size: 2.05rem !important;
    min-width: 230px !important;
    max-width: 275px !important;
    padding: 13px 16px !important;
    line-height: 1.05 !important;
  }
}

@media (max-width: 430px) {
  section.game-screen:not(.hidden) > footer.answer-dock {
    grid-template-rows: 42px 31px !important;
    gap: 3px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .hp-card,
  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel,
  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
    min-height: 42px !important;
    height: 42px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel strong {
    font-size: 1.02rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
    font-size: .68rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
    height: 70px !important;
    min-height: 70px !important;
    top: -9px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
    font-size: .88rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
    min-height: 31px !important;
    height: 31px !important;
    font-size: .72rem !important;
  }

  .entity.boss .problem {
    font-size: 1.92rem !important;
    min-width: 220px !important;
    max-width: 260px !important;
  }
}


/* ===== V74: FIRE lifted upward, no digit overlap, boss font larger ===== */

/* Desktop / large screens */
section.game-screen:not(.hidden) > footer.answer-dock {
  overflow: visible !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
  grid-column: 9 / span 2 !important;
  grid-row: 1 !important;
  width: min(146px, 100%) !important;
  height: 118px !important;
  min-height: 118px !important;
  top: -52px !important; /* lift upward into game area, not downward into digits */
  bottom: auto !important;
  align-self: start !important;
  justify-self: end !important;
  z-index: 30 !important;
  border-radius: 999px !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn::before {
  inset: 6px !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
  font-size: 1.58rem !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
  grid-column: 7 / span 2 !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
  grid-row: 2 !important;
  margin-top: 0 !important;
}

.entity.boss .problem {
  font-size: 2.85rem !important;
  min-width: 290px !important;
  max-width: 340px !important;
  padding: 18px 22px !important;
  line-height: 1.02 !important;
  letter-spacing: .02em !important;
}

@media (max-width: 920px) {
  section.game-screen:not(.hidden) > footer.answer-dock {
    grid-template-rows: 44px 32px !important;
    overflow: visible !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .hp-card {
    grid-column: 1 / span 2 !important;
    grid-row: 1 !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel {
    grid-column: 3 / span 4 !important;
    grid-row: 1 !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
    grid-column: 7 / span 2 !important;
    grid-row: 1 !important;
    min-height: 44px !important;
    height: 44px !important;
    font-size: .74rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
    grid-column: 9 / span 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 78px !important;
    min-height: 78px !important;
    top: -36px !important; /* fully clear the digit row */
    bottom: auto !important;
    border-radius: 999px !important;
    z-index: 35 !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn::before {
    inset: 5px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
    font-size: 1rem !important;
    line-height: 1 !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-sub {
    font-size: .58rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
    grid-template-rows: 32px !important;
    gap: 3px !important;
    margin-top: 0 !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
    min-height: 32px !important;
    height: 32px !important;
    font-size: .75rem !important;
  }

  .entity.boss .problem {
    font-size: 2.3rem !important;
    min-width: 245px !important;
    max-width: 290px !important;
    padding: 14px 18px !important;
    line-height: 1.02 !important;
  }
}

@media (max-width: 430px) {
  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
    height: 76px !important;
    min-height: 76px !important;
    top: -38px !important; /* even more upward so it never sits on top of digits */
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
    font-size: .96rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
    font-size: .73rem !important;
  }

  .entity.boss .problem {
    font-size: 2.18rem !important;
    min-width: 236px !important;
    max-width: 280px !important;
  }
}


/* ==========================================================================
   V75 PHASE 1 UI REBUILD
   Base: v74 fallback
   Scope: visual/layout shell only. No gameplay logic changes.
   ========================================================================== */

:root {
  --v75-bg0: #030815;
  --v75-bg1: #06152b;
  --v75-panel: rgba(5, 18, 43, .82);
  --v75-panel2: rgba(9, 36, 82, .72);
  --v75-cyan: #48e8ff;
  --v75-blue: #1788ff;
  --v75-purple: #b84dff;
  --v75-magenta: #ff4df0;
  --v75-red: #ff2d44;
  --v75-red2: #ff7a84;
  --v75-gold: #ffc84a;
}

/* Global shell: deeper contrast and concept-like frame */
body {
  background:
    radial-gradient(circle at 45% -10%, rgba(87, 64, 200, .18), transparent 34%),
    radial-gradient(circle at 60% 100%, rgba(0, 194, 255, .12), transparent 40%),
    linear-gradient(180deg, #01040c 0%, #030816 100%) !important;
}

.game-screen {
  background:
    radial-gradient(circle at 50% 18%, rgba(99, 55, 180, .16), transparent 44%),
    radial-gradient(circle at 50% 84%, rgba(28, 164, 255, .10), transparent 32%) !important;
}

/* -------------------- TOP HUD -------------------- */
section.game-screen:not(.hidden) > header.top-hud {
  width: min(1540px, calc(100% - 18px)) !important;
  margin: 7px auto 5px !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 1.6fr) minmax(110px, .58fr) minmax(110px, .58fr) minmax(126px, .68fr) minmax(128px, .72fr) auto !important;
  gap: 8px !important;
  align-items: stretch !important;
}

section.game-screen:not(.hidden) > header.top-hud > .hp-card {
  display: none !important;
}

section.game-screen:not(.hidden) > header.top-hud .pilot-card,
section.game-screen:not(.hidden) > header.top-hud .stat-card,
section.game-screen:not(.hidden) > header.top-hud::after,
section.game-screen:not(.hidden) > header.top-hud .icon-btn {
  background:
    linear-gradient(180deg, rgba(12, 47, 96, .82), rgba(2, 9, 24, .92)),
    radial-gradient(circle at 14% 20%, rgba(82, 232, 255, .18), transparent 58%) !important;
  border: 1px solid rgba(76, 232, 255, .36) !important;
  box-shadow:
    inset 0 0 22px rgba(72, 232, 255, .10),
    0 0 16px rgba(72, 232, 255, .10) !important;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)) !important;
}

section.game-screen:not(.hidden) > header.top-hud .pilot-card {
  min-height: 58px !important;
  padding: 8px 14px !important;
  gap: 12px !important;
  border-radius: 0 !important;
}

section.game-screen:not(.hidden) > header.top-hud .pilot-card img {
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
  filter: drop-shadow(0 0 10px rgba(72,232,255,.42)) !important;
}

section.game-screen:not(.hidden) > header.top-hud .pilot-card strong {
  font-size: 1.08rem !important;
  letter-spacing: .01em !important;
}

section.game-screen:not(.hidden) > header.top-hud .pilot-card span {
  color: var(--v75-cyan) !important;
  font-size: .70rem !important;
  letter-spacing: .14em !important;
  text-shadow: 0 0 10px rgba(72,232,255,.7) !important;
}

section.game-screen:not(.hidden) > header.top-hud .stat-card {
  min-height: 58px !important;
  height: 58px !important;
  padding: 8px 14px !important;
  border-radius: 0 !important;
}

section.game-screen:not(.hidden) > header.top-hud .stat-card span {
  color: #8fefff !important;
  font-size: .68rem !important;
  letter-spacing: .14em !important;
}

section.game-screen:not(.hidden) > header.top-hud .stat-card strong {
  font-size: 1.32rem !important;
  color: #f2fbff !important;
  text-shadow: 0 0 12px rgba(116, 237, 255, .44) !important;
}

section.game-screen:not(.hidden) > header.top-hud::after {
  content: "";
  min-height: 58px !important;
  opacity: .74;
  background:
    linear-gradient(180deg, rgba(9, 30, 66, .52), rgba(3, 12, 28, .76)),
    repeating-linear-gradient(90deg, rgba(72,232,255,.10) 0 2px, transparent 2px 18px) !important;
}

section.game-screen:not(.hidden) > header.top-hud .top-actions {
  display: flex !important;
  gap: 7px !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  margin-left: 0 !important;
}

section.game-screen:not(.hidden) > header.top-hud .icon-btn {
  min-width: 54px !important;
  height: 58px !important;
  border-radius: 0 !important;
  color: #f2fbff !important;
  font-size: 1.05rem !important;
}

/* -------------------- ARENA -------------------- */
.battlefield {
  border-radius: 18px !important;
  border: 1px solid rgba(72, 232, 255, .28) !important;
  box-shadow:
    inset 0 0 26px rgba(72,232,255,.07),
    inset 0 -80px 140px rgba(22, 130, 255, .12),
    0 0 24px rgba(72,232,255,.07) !important;
  background:
    linear-gradient(rgba(72, 232, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 232, 255, .055) 1px, transparent 1px),
    radial-gradient(circle at 30% 30%, rgba(139, 62, 255, .16), transparent 36%),
    radial-gradient(circle at 74% 24%, rgba(0, 232, 255, .08), transparent 40%),
    linear-gradient(180deg, #020712 0%, #061326 100%) !important;
  background-size: 90px 90px, 90px 90px, auto, auto, auto !important;
}

.battlefield::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(72,232,255,.10), transparent 14%, transparent 86%, rgba(72,232,255,.10)),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 22%, transparent 82%, rgba(0,0,0,.16));
  mix-blend-mode: screen;
}

/* -------------------- BOSS MATH READABILITY -------------------- */
.entity.boss {
  width: 270px !important;
  height: 150px !important;
}

.entity.boss .ship {
  transform: scale(.52) !important;
  transform-origin: top center !important;
}

.entity.boss .problem {
  top: 58px !important;
  min-width: 286px !important;
  max-width: 340px !important;
  padding: 18px 22px !important;
  border-radius: 20px !important;
  font-size: 3rem !important;
  line-height: 1.02 !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(31, 8, 58, .96), rgba(5, 6, 22, .96)),
    radial-gradient(circle at 50% 50%, rgba(255,78,244,.20), transparent 72%) !important;
  border: 2px solid rgba(255, 93, 244, .70) !important;
  box-shadow:
    0 0 24px rgba(255, 78, 244, .74),
    0 0 50px rgba(152, 65, 255, .34),
    inset 0 0 22px rgba(255, 255, 255, .08) !important;
  text-shadow:
    0 0 10px #fff,
    0 0 22px rgba(255,78,244,.95),
    0 0 44px rgba(255,78,244,.55) !important;
}

/* -------------------- BOTTOM CONTROL DOCK -------------------- */
section.game-screen:not(.hidden) > footer.answer-dock {
  position: relative !important;
  overflow: visible !important;
  width: min(1540px, calc(100% - 18px)) !important;
  margin: 5px auto 8px !important;
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  grid-template-rows: 68px 56px !important;
  gap: 7px !important;
  align-items: stretch !important;
  z-index: 12 !important;
}

/* HP bottom-left */
section.game-screen:not(.hidden) > footer.answer-dock > .hp-card {
  grid-column: 1 / span 2 !important;
  grid-row: 1 !important;
  position: static !important;
  width: 100% !important;
  height: 68px !important;
  min-height: 68px !important;
  padding: 8px 14px !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)) !important;
  background:
    linear-gradient(180deg, rgba(15, 50, 100, .80), rgba(2, 10, 26, .92)),
    radial-gradient(circle at 24% 38%, rgba(255, 61, 95, .18), transparent 58%) !important;
  border: 1px solid rgba(72,232,255,.38) !important;
  box-shadow: inset 0 0 22px rgba(72,232,255,.10), 0 0 18px rgba(72,232,255,.08) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .hp-card span {
  display: block !important;
  color: var(--v75-red2) !important;
  font-size: .76rem !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  line-height: 1 !important;
}

section.game-screen:not(.hidden) > footer.answer-dock .hearts {
  gap: 6px !important;
  padding-top: 8px !important;
}

section.game-screen:not(.hidden) > footer.answer-dock .heart {
  width: 25px !important;
  height: 24px !important;
  font-size: 1.34rem !important;
  color: #ff3e5d !important;
  filter: drop-shadow(0 0 10px rgba(255,62,93,.96)) !important;
}

/* Answer frame: no label, just a neon input slot */
section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel {
  grid-column: 3 / span 4 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 68px !important;
  min-height: 68px !important;
  padding: 0 18px !important;
  border-radius: 0 !important;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px) !important;
  background:
    linear-gradient(180deg, rgba(11, 35, 79, .70), rgba(2, 8, 24, .96)),
    radial-gradient(circle at 50% 50%, rgba(72,232,255,.12), transparent 74%) !important;
  border: 1px solid rgba(72,232,255,.44) !important;
  box-shadow:
    inset 0 0 26px rgba(72,232,255,.14),
    0 0 18px rgba(72,232,255,.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel span {
  display: none !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel strong {
  font-size: 2.28rem !important;
  line-height: 1 !important;
  color: #8fffff !important;
  text-align: center !important;
  text-shadow: 0 0 16px rgba(72,232,255,.92) !important;
}

/* CLEAR */
section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
  grid-column: 7 / span 2 !important;
  grid-row: 1 !important;
  height: 68px !important;
  min-height: 68px !important;
  width: 100% !important;
  border-radius: 0 !important;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px) !important;
  background:
    linear-gradient(180deg, rgba(16, 95, 160, .98), rgba(4, 18, 42, .96)) !important;
  border: 1px solid rgba(72,232,255,.52) !important;
  color: #d8feff !important;
  box-shadow: inset 0 0 20px rgba(72,232,255,.16), 0 0 18px rgba(72,232,255,.13) !important;
  position: static !important;
  transform: none !important;
  font-size: 1.08rem !important;
  font-weight: 900 !important;
}

/* FIRE: large red launch button, lifted upward only */
section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
  grid-column: 9 / span 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: start !important;
  width: min(150px, 100%) !important;
  height: 120px !important;
  min-height: 120px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 999px !important;
  top: -54px !important;
  bottom: auto !important;
  position: relative !important;
  z-index: 35 !important;
  transform: none !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 50% 35%, #fff4f4 0 5%, #ff9ca4 6% 15%, #ff2439 16% 54%, #850612 73%, #1b0205 100%) !important;
  border: 6px solid rgba(255, 123, 132, .86) !important;
  box-shadow:
    0 0 24px rgba(255, 45, 68, .98),
    0 0 58px rgba(255, 45, 68, .58),
    inset 0 0 24px rgba(255,255,255,.18),
    inset 0 -14px 32px rgba(0,0,0,.48) !important;
  display: grid !important;
  place-items: center !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn::before {
  content: "";
  position: absolute;
  inset: 7px !important;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.28);
  pointer-events: none;
}

section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
  display: block !important;
  color: #fff !important;
  font-size: 1.60rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: .03em !important;
  text-shadow: 0 0 16px rgba(255,255,255,.96), 0 0 28px rgba(255,44,60,.94) !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-sub {
  display: none !important;
}

/* Digits row: 0 1 2 3 4 5 6 7 8 9 */
section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  grid-template-rows: 56px !important;
  gap: 7px !important;
  z-index: 10 !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  border-radius: 0 !important;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px) !important;
  background:
    linear-gradient(180deg, rgba(27, 119, 204, .88), rgba(3, 16, 41, .98)) !important;
  border: 1px solid rgba(72,232,255,.55) !important;
  color: #e9fcff !important;
  box-shadow: inset 0 0 20px rgba(72,232,255,.15), 0 0 14px rgba(72,232,255,.10) !important;
  font-size: 1.34rem !important;
  font-weight: 950 !important;
  padding: 0 !important;
}

section.game-screen:not(.hidden) > footer.answer-dock > .numpad .sign-toggle,
section.game-screen:not(.hidden) > footer.answer-dock > .numpad button[data-key="back"] {
  display: none !important;
}

/* Mobile tuning */
@media (max-width: 920px) {
  section.game-screen:not(.hidden) > header.top-hud {
    width: calc(100% - 10px) !important;
    margin: 4px auto 3px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto !important;
    grid-template-areas:
      "pilot pilot pilot actions"
      "score stage wave wave" !important;
    gap: 5px !important;
  }

  section.game-screen:not(.hidden) > header.top-hud::after {
    display: none !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .pilot-card {
    grid-area: pilot !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 5px 8px !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .pilot-card img {
    width: 31px !important;
    height: 31px !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .pilot-card strong {
    font-size: .92rem !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .pilot-card span {
    font-size: .58rem !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .score-card { grid-area: score !important; }
  section.game-screen:not(.hidden) > header.top-hud .stage-card { grid-area: stage !important; }
  section.game-screen:not(.hidden) > header.top-hud .wave-card { grid-area: wave !important; }

  section.game-screen:not(.hidden) > header.top-hud .stat-card {
    min-height: 38px !important;
    height: 38px !important;
    padding: 4px 7px !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .stat-card span {
    font-size: .50rem !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .stat-card strong {
    font-size: .88rem !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .top-actions {
    grid-area: actions !important;
  }

  section.game-screen:not(.hidden) > header.top-hud .icon-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 42px !important;
    font-size: .86rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock {
    width: calc(100% - 10px) !important;
    margin: 3px auto 4px !important;
    grid-template-rows: 44px 32px !important;
    gap: 4px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .hp-card {
    grid-column: 1 / span 2 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 4px 7px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .hp-card span {
    font-size: .54rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock .hearts {
    gap: 2px !important;
    padding-top: 3px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock .heart {
    width: 15px !important;
    height: 15px !important;
    font-size: .92rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel {
    grid-column: 3 / span 4 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 8px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel strong {
    font-size: 1.13rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
    grid-column: 7 / span 2 !important;
    height: 44px !important;
    min-height: 44px !important;
    font-size: .74rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
    grid-column: 9 / span 2 !important;
    width: 100% !important;
    height: 78px !important;
    min-height: 78px !important;
    top: -38px !important;
    border-width: 4px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn::before {
    inset: 5px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
    font-size: .98rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
    grid-template-rows: 32px !important;
    gap: 3px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
    height: 32px !important;
    min-height: 32px !important;
    font-size: .76rem !important;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px) !important;
  }

  .entity.boss {
    width: 250px !important;
    height: 142px !important;
  }

  .entity.boss .ship {
    transform: scale(.40) !important;
  }

  .entity.boss .problem {
    top: 48px !important;
    font-size: 2.35rem !important;
    min-width: 248px !important;
    max-width: 292px !important;
    padding: 14px 18px !important;
  }
}

@media (max-width: 430px) {
  section.game-screen:not(.hidden) > footer.answer-dock {
    grid-template-rows: 42px 31px !important;
    gap: 3px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .hp-card,
  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel,
  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
    height: 42px !important;
    min-height: 42px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .answer-panel strong {
    font-size: 1.04rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .clear-btn {
    font-size: .68rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn {
    height: 76px !important;
    min-height: 76px !important;
    top: -39px !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .fire-btn .btn-main {
    font-size: .92rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
    height: 31px !important;
    min-height: 31px !important;
    font-size: .72rem !important;
  }

  .entity.boss .problem {
    font-size: 2.16rem !important;
    min-width: 235px !important;
    max-width: 280px !important;
  }
}


/* ==========================================================================
   V76 GRAPHIC UPGRADE PHASE 1
   Scope: visual CSS upgrade only + numpad order 1..9,0
   ========================================================================== */

/* keep the new digit order in a clean line */
section.game-screen:not(.hidden) > footer.answer-dock > .numpad {
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
}
section.game-screen:not(.hidden) > footer.answer-dock > .numpad button[data-key="0"] {
  display: inline-flex !important;
  grid-column: auto !important;
}

/* ---------- Enemy ships: more alien silhouettes ---------- */
.entity .ship {
  position: relative;
  filter:
    drop-shadow(0 0 12px rgba(72,232,255,.35))
    drop-shadow(0 0 22px currentColor);
}

.entity .ship::before,
.entity .ship::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* base alien hull frame */
.ship-shape {
  position: relative;
  overflow: visible !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.55) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 46%, currentColor 0 14%, transparent 15%),
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 24%),
    linear-gradient(180deg, rgba(13, 31, 62, .96), rgba(2, 7, 20, .96)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.10),
    inset 0 -10px 18px rgba(0,0,0,.48),
    0 0 18px currentColor !important;
}

/* Scout: saucer with ring */
.ship.scout .ship-shape {
  width: 74px !important;
  height: 38px !important;
  border-radius: 50% 50% 38% 38% / 60% 60% 40% 40% !important;
  clip-path: ellipse(50% 42% at 50% 52%) !important;
}
.ship.scout .ship-shape::before {
  content: "";
  position: absolute;
  left: 18px;
  top: -19px;
  width: 38px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.72), transparent 14%),
    radial-gradient(circle, currentColor 0 45%, rgba(255,255,255,.18) 46% 62%, transparent 63%);
  box-shadow: 0 0 16px currentColor;
}
.ship.scout .ship-shape::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 5px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}

/* Blade: angular fighter */
.ship.blade .ship-shape {
  width: 86px !important;
  height: 44px !important;
  clip-path: polygon(50% 0, 100% 42%, 70% 58%, 92% 100%, 50% 76%, 8% 100%, 30% 58%, 0 42%) !important;
  border-radius: 0 !important;
}
.ship.blade .ship-shape::before {
  content: "";
  position: absolute;
  left: 37px;
  top: 13px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}

/* Bomber: heavy pod */
.ship.bomber .ship-shape {
  width: 84px !important;
  height: 50px !important;
  border-radius: 24px 24px 36px 36px !important;
  clip-path: polygon(12% 18%, 88% 18%, 100% 48%, 78% 100%, 22% 100%, 0 48%) !important;
}
.ship.bomber .ship-shape::before,
.ship.bomber .ship-shape::after {
  content: "";
  position: absolute;
  top: 15px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
}
.ship.bomber .ship-shape::before { left: 13px; }
.ship.bomber .ship-shape::after { right: 13px; }

/* Crystal: prism shard */
.ship.crystal .ship-shape {
  width: 78px !important;
  height: 56px !important;
  clip-path: polygon(50% 0, 80% 22%, 100% 54%, 68% 100%, 50% 78%, 32% 100%, 0 54%, 20% 22%) !important;
  border-radius: 0 !important;
}
.ship.crystal .ship-shape::before {
  content: "";
  position: absolute;
  inset: 9px 25px;
  background: rgba(255,255,255,.30);
  clip-path: polygon(50% 0, 100% 45%, 65% 100%, 35% 100%, 0 45%);
  box-shadow: 0 0 18px currentColor;
}

/* Spinner: twin core */
.ship.spinner .ship-shape {
  width: 86px !important;
  height: 48px !important;
  border-radius: 999px !important;
  clip-path: polygon(4% 50%, 28% 12%, 72% 12%, 96% 50%, 72% 88%, 28% 88%) !important;
}
.ship.spinner .ship-shape::before,
.ship.spinner .ship-shape::after {
  content: "";
  position: absolute;
  top: 17px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 16px currentColor;
}
.ship.spinner .ship-shape::before { left: 21px; }
.ship.spinner .ship-shape::after { right: 21px; }

/* Beetle: organic claw */
.ship.beetle .ship-shape {
  width: 84px !important;
  height: 54px !important;
  clip-path: polygon(50% 0, 78% 14%, 100% 46%, 78% 64%, 92% 100%, 54% 78%, 46% 78%, 8% 100%, 22% 64%, 0 46%, 22% 14%) !important;
  border-radius: 0 !important;
}
.ship.beetle .ship-shape::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 17px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 18px currentColor;
}

/* ---------- Boss visual: more premium, less placeholder ---------- */
.entity.boss .ship .ship-shape,
.entity.boss .ship-shape {
  width: 238px !important;
  height: 118px !important;
  clip-path: polygon(50% 0, 64% 16%, 92% 10%, 100% 38%, 84% 65%, 96% 100%, 62% 82%, 50% 92%, 38% 82%, 4% 100%, 16% 65%, 0 38%, 8% 10%, 36% 16%) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,.56) 0 4%, transparent 5%),
    radial-gradient(circle at 50% 38%, #b84dff 0 12%, transparent 13%),
    radial-gradient(circle at 29% 52%, #9d44ff 0 8%, transparent 9%),
    radial-gradient(circle at 71% 52%, #9d44ff 0 8%, transparent 9%),
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 20%),
    linear-gradient(180deg, rgba(38, 22, 72, .98), rgba(5, 5, 20, .98)) !important;
  border: 2px solid rgba(196, 89, 255, .60) !important;
  box-shadow:
    0 0 28px rgba(184, 77, 255, .72),
    0 0 58px rgba(102, 51, 255, .36),
    inset 0 0 30px rgba(255,255,255,.10),
    inset 0 -20px 30px rgba(0,0,0,.55) !important;
}
.entity.boss .ship .ship-shape::before,
.entity.boss .ship-shape::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 13px;
  transform: translateX(-50%);
  width: 34px;
  height: 72px;
  clip-path: polygon(50% 0, 100% 35%, 72% 100%, 28% 100%, 0 35%);
  background:
    radial-gradient(circle at 50% 28%, #fff, #ff79ff 12%, #a945ff 42%, transparent 72%);
  box-shadow: 0 0 28px #c855ff;
}
.entity.boss .ship .ship-shape::after,
.entity.boss .ship-shape::after {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 17px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #bb4dff, #48e8ff, #bb4dff, transparent);
  box-shadow: 0 0 20px rgba(184,77,255,.82);
}

/* Boss math remains the main readable target */
.entity.boss .problem {
  font-size: 3.05rem !important;
  min-width: 300px !important;
  max-width: 360px !important;
  padding: 18px 24px !important;
}

/* ---------- Boss bombs / supply items: more game-like ---------- */
.drop.math-bomb,
.drop.math-heart {
  overflow: visible !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.10),
    0 0 24px currentColor !important;
}

.drop.math-bomb {
  border-radius: 999px !important;
  clip-path: polygon(50% 0, 61% 16%, 82% 6%, 84% 28%, 100% 38%, 86% 52%, 100% 72%, 76% 74%, 70% 100%, 50% 84%, 30% 100%, 24% 74%, 0 72%, 14% 52%, 0 38%, 16% 28%, 18% 6%, 39% 16%) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.78) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 48%, currentColor 0 38%, rgba(8,8,20,.96) 39% 72%, transparent 73%) !important;
}

.drop.math-bomb .drop-icon {
  filter: drop-shadow(0 0 12px currentColor) !important;
}

.drop.math-heart {
  border-radius: 22px !important;
  clip-path: polygon(50% 0, 88% 16%, 100% 52%, 50% 100%, 0 52%, 12% 16%) !important;
  background:
    radial-gradient(circle at 38% 32%, #fff 0 5%, transparent 6%),
    radial-gradient(circle at 50% 48%, #ff4d72 0 46%, rgba(60,4,20,.96) 47% 72%, transparent 73%) !important;
  color: #ff4d72 !important;
}

.drop.math-bomb .drop-problem,
.drop.math-heart .drop-problem {
  font-weight: 950 !important;
  text-shadow: 0 0 10px currentColor !important;
}

/* ---------- Stronger VFX feel ---------- */
.laser-line,
.laser-core,
.laser-glow {
  filter: drop-shadow(0 0 12px #60f4ff) drop-shadow(0 0 22px #2b8dff) !important;
}

.hit-spark {
  box-shadow: 0 0 28px rgba(255,255,255,.8), 0 0 44px currentColor !important;
}

.explosion {
  filter: drop-shadow(0 0 18px currentColor) !important;
}

/* ---------- Mobile scale and readability ---------- */
@media (max-width: 920px) {
  .ship.scout .ship-shape { width: 64px !important; height: 33px !important; }
  .ship.blade .ship-shape,
  .ship.bomber .ship-shape,
  .ship.spinner .ship-shape,
  .ship.beetle .ship-shape { width: 72px !important; height: 42px !important; }
  .ship.crystal .ship-shape { width: 68px !important; height: 48px !important; }

  .entity.boss .ship .ship-shape,
  .entity.boss .ship-shape {
    width: 206px !important;
    height: 102px !important;
  }

  .entity.boss .problem {
    font-size: 2.42rem !important;
    min-width: 254px !important;
    max-width: 300px !important;
    padding: 15px 18px !important;
  }

  .drop.math-bomb,
  .drop.math-heart {
    width: 86px !important;
    height: 62px !important;
  }

  .drop.math-bomb .drop-problem,
  .drop.math-heart .drop-problem {
    font-size: .92rem !important;
  }

  section.game-screen:not(.hidden) > footer.answer-dock > .numpad button {
    font-size: .78rem !important;
  }
}

@media (max-width: 430px) {
  .entity.boss .problem {
    font-size: 2.22rem !important;
    min-width: 238px !important;
    max-width: 284px !important;
  }
}


/* ==========================================================================
   V78 PRODUCTION ASSET PASS
   Real in-game sprites, no labels, no concept-card panels.
   ========================================================================== */

.battlefield {
  background:
    linear-gradient(180deg, rgba(1, 5, 18, .50), rgba(1, 7, 22, .28)),
    radial-gradient(circle at 50% 100%, rgba(32, 150, 255, .18), transparent 42%),
    url('../../assets/alien-math-attack/game-assets/bg_earth_orbit.jpg') center / cover no-repeat,
    #020915 !important;
}

.battlefield::before {
  background-image:
    linear-gradient(rgba(70,217,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,217,255,.028) 1px, transparent 1px) !important;
  background-size: 52px 52px !important;
  opacity: .72;
}

.entity {
  width: 150px !important;
  height: 116px !important;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.54));
}

.ship {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: contain !important;
  animation: hover 1.8s ease-in-out infinite !important;
  filter:
    drop-shadow(0 0 10px rgba(70, 225, 255, .20))
    drop-shadow(0 0 18px rgba(155, 88, 255, .13)) !important;
}

.ship .body,
.ship .dome,
.ship .wing,
.ship .core-light,
.ship .leg,
.ship .ship-shape {
  display: none !important;
}

.ship .sprite-shadow {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 36%;
  height: 38%;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor 0 6%, transparent 66%);
  opacity: .14;
  filter: blur(14px);
  pointer-events: none;
}

.ship.scout { background-image: url('../../assets/alien-math-attack/game-assets/enemy_scout.png') !important; color: #ffd23c; }
.ship.blade { background-image: url('../../assets/alien-math-attack/game-assets/enemy_blade.png') !important; color: #9cff3c; }
.ship.bomber { background-image: url('../../assets/alien-math-attack/game-assets/enemy_bomber.png') !important; color: #ff9f1c; }
.ship.crystal { background-image: url('../../assets/alien-math-attack/game-assets/enemy_crystal.png') !important; color: #ff7dff; }
.ship.spinner { background-image: url('../../assets/alien-math-attack/game-assets/enemy_spinner.png') !important; color: #34e7ff; }
.ship.beetle { background-image: url('../../assets/alien-math-attack/game-assets/enemy_beetle.png') !important; color: #9cff3c; }

.ship .problem {
  top: auto !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 112px !important;
  max-width: 140px !important;
  padding: 5px 10px 6px !important;
  font-size: 1rem !important;
  line-height: 1.02 !important;
  border-radius: 15px !important;
  background: linear-gradient(180deg, rgba(3, 10, 28, .88), rgba(6, 18, 40, .94)) !important;
  border: 1px solid currentColor !important;
  box-shadow:
    0 0 14px currentColor,
    inset 0 0 12px rgba(255,255,255,.08) !important;
  backdrop-filter: blur(3px);
  z-index: 3;
}

.entity.boss {
  width: 420px !important;
  height: 245px !important;
}

.entity.boss .ship {
  animation: bossHover 2.4s ease-in-out infinite !important;
  filter:
    drop-shadow(0 20px 30px rgba(0,0,0,.62))
    drop-shadow(0 0 26px rgba(176, 74, 255, .30)) !important;
}

.ship.boss-overlord { background-image: url('../../assets/alien-math-attack/game-assets/boss_overlord.png') !important; color: #c85cff; }
.ship.boss-crimson { background-image: url('../../assets/alien-math-attack/game-assets/boss_crimson.png') !important; color: #ff5a4a; }
.ship.boss-quantum { background-image: url('../../assets/alien-math-attack/game-assets/boss_quantum.png') !important; color: #47f3ff; }
.ship.boss-obsidian { background-image: url('../../assets/alien-math-attack/game-assets/boss_obsidian.png') !important; color: #c85cff; }
.ship.boss-celestial { background-image: url('../../assets/alien-math-attack/game-assets/boss_celestial.png') !important; color: #5ee7ff; }

.entity.boss .problem {
  top: 46% !important;
  bottom: auto !important;
  min-width: 250px !important;
  max-width: 350px !important;
  padding: 11px 22px 13px !important;
  border-radius: 20px !important;
  font-size: 2.05rem !important;
  line-height: 1.02 !important;
  letter-spacing: .02em !important;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(21, 4, 46, .92), rgba(3, 8, 25, .96)) !important;
  border: 2px solid currentColor !important;
  box-shadow:
    0 0 18px currentColor,
    0 0 38px rgba(255,255,255,.10),
    inset 0 0 18px rgba(255,255,255,.08) !important;
  text-shadow:
    0 0 10px #fff,
    0 0 20px currentColor !important;
}

.guardian {
  width: 250px !important;
  height: 160px !important;
  bottom: 2px !important;
}

.guardian::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 220px;
  height: 150px;
  transform: translateX(-50%);
  background: url('../../assets/alien-math-attack/game-assets/player_ship_default.png') center bottom / contain no-repeat;
  filter:
    drop-shadow(0 0 16px rgba(67, 190, 255, .55))
    drop-shadow(0 0 28px rgba(58, 120, 255, .28));
  z-index: 4;
}

.cannon {
  left: 120px !important;
  bottom: 48px !important;
  width: 10px !important;
  height: 10px !important;
  opacity: 0 !important;
}

.cannon .core,
.cannon .barrel {
  opacity: 0 !important;
}

.shield-dome {
  opacity: .18;
}

.base-platform {
  opacity: .14;
}

.drop.math-bomb {
  width: 94px !important;
  height: 92px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: block !important;
  overflow: visible !important;
}

.drop.math-bomb::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter:
    drop-shadow(0 0 12px currentColor)
    drop-shadow(0 0 24px rgba(255,255,255,.12));
}

.bomb-plasma { color: #b85cff !important; }
.bomb-bio { color: #9cff3c !important; }
.bomb-ring { color: #34e7ff !important; }
.bomb-crystal { color: #ff7dff !important; }
.bomb-drill { color: #ff9f1c !important; }
.bomb-singularity { color: #c85cff !important; }

.bomb-plasma::before { background-image: url('../../assets/alien-math-attack/game-assets/bomb_plasma.png'); }
.bomb-bio::before { background-image: url('../../assets/alien-math-attack/game-assets/bomb_bio.png'); }
.bomb-ring::before { background-image: url('../../assets/alien-math-attack/game-assets/bomb_ring.png'); }
.bomb-crystal::before { background-image: url('../../assets/alien-math-attack/game-assets/bomb_crystal.png'); }
.bomb-drill::before { background-image: url('../../assets/alien-math-attack/game-assets/bomb_drill.png'); }
.bomb-singularity::before { background-image: url('../../assets/alien-math-attack/game-assets/bomb_singularity.png'); }

.drop.math-bomb .drop-icon {
  display: none !important;
}

.drop.math-bomb .drop-problem {
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  min-width: 82px;
  max-width: 120px;
  padding: 4px 8px 5px;
  border-radius: 12px;
  color: #fff !important;
  font-size: .78rem !important;
  line-height: 1.02;
  background: linear-gradient(180deg, rgba(5, 10, 28, .90), rgba(12, 18, 42, .96));
  border: 1px solid currentColor;
  box-shadow: 0 0 12px currentColor;
  text-align: center;
}

.drop.math-heart {
  width: 86px !important;
  height: 78px !important;
  background:
    radial-gradient(circle at 50% 40%, #fff 0 7%, #ff8eb2 8% 24%, #ff4778 25% 52%, rgba(55, 4, 28, .96) 53% 75%, transparent 76%) !important;
  border-radius: 50% !important;
  clip-path: none !important;
  border: 0 !important;
  box-shadow: 0 0 18px #ff5a91, 0 0 34px rgba(255,90,145,.35) !important;
}

.drop.math-heart .drop-icon {
  display: none !important;
}

.drop.math-heart .drop-problem {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  min-width: 82px;
  padding: 4px 8px 5px;
  border-radius: 12px;
  color: #fff !important;
  font-size: .78rem !important;
  background: linear-gradient(180deg, rgba(42, 4, 24, .90), rgba(12, 18, 42, .96));
  border: 1px solid #ff7aa6;
  box-shadow: 0 0 12px #ff7aa6;
  text-align: center;
}

@media (max-width: 920px) {
  .entity {
    width: 116px !important;
    height: 92px !important;
  }

  .ship .problem {
    min-width: 86px !important;
    max-width: 112px !important;
    font-size: .74rem !important;
    padding: 3px 7px 4px !important;
    bottom: -2px !important;
  }

  .entity.boss {
    width: 276px !important;
    height: 166px !important;
  }

  .entity.boss .problem {
    top: 45% !important;
    min-width: 170px !important;
    max-width: 230px !important;
    font-size: 1.34rem !important;
    padding: 7px 12px 8px !important;
  }

  .guardian {
    width: 170px !important;
    height: 112px !important;
  }

  .guardian::before {
    width: 152px;
    height: 108px;
    bottom: 6px;
  }

  .cannon {
    left: 82px !important;
    bottom: 30px !important;
  }

  .drop.math-bomb {
    width: 70px !important;
    height: 70px !important;
  }

  .drop.math-bomb .drop-problem,
  .drop.math-heart .drop-problem {
    min-width: 62px;
    font-size: .62rem !important;
    bottom: -7px;
  }

  .drop.math-heart {
    width: 64px !important;
    height: 64px !important;
  }
}


/* ==========================================================================
   V79 SPRITE POLISH PASS
   - cleaner enemy/player sprites
   - stronger laser glow
   - remove floating answer label
   - firing aura on player ship
   ========================================================================== */

.battlefield {
  background:
    linear-gradient(180deg, rgba(1, 5, 18, .28), rgba(1, 7, 22, .12)),
    radial-gradient(circle at 50% 100%, rgba(49, 170, 255, .18), transparent 44%),
    url('../../assets/alien-math-attack/game-assets/bg_earth_orbit.jpg') center / cover no-repeat,
    #030916 !important;
}

.battlefield::before {
  opacity: .44 !important;
}

.entity {
  width: 162px !important;
  height: 126px !important;
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.52));
}

.ship {
  background-position: center 6px !important;
  background-size: contain !important;
  image-rendering: auto;
  filter:
    drop-shadow(0 0 10px rgba(84, 221, 255, .24))
    drop-shadow(0 0 22px rgba(120, 92, 255, .18)) !important;
}

.ship .problem {
  bottom: -4px !important;
  min-width: 118px !important;
  max-width: 148px !important;
  padding: 6px 11px 7px !important;
  font-size: 1rem !important;
  background: linear-gradient(180deg, rgba(2, 9, 26, .90), rgba(5, 17, 40, .96)) !important;
  box-shadow:
    0 0 16px currentColor,
    0 0 28px rgba(255,255,255,.08),
    inset 0 0 12px rgba(255,255,255,.08) !important;
}

.entity.boss {
  width: 430px !important;
  height: 250px !important;
}

.guardian {
  width: 240px !important;
  height: 190px !important;
  bottom: -2px !important;
}

.guardian::before {
  width: 228px !important;
  height: 224px !important;
  bottom: 12px !important;
  background: url('../../assets/alien-math-attack/game-assets/player_ship_default.png') center bottom / contain no-repeat !important;
  filter:
    drop-shadow(0 0 14px rgba(110, 220, 255, .62))
    drop-shadow(0 0 32px rgba(55, 120, 255, .32)) !important;
  animation: guardianIdleV79 1.9s ease-in-out infinite;
}

.guardian::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 156px;
  height: 156px;
  transform: translateX(-50%) scale(1);
  background: radial-gradient(circle, rgba(79, 198, 255, .26) 0%, rgba(56, 142, 255, .18) 34%, rgba(56, 142, 255, .06) 58%, transparent 72%);
  filter: blur(10px);
  opacity: .78;
  pointer-events: none;
  z-index: 2;
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
}

.guardian.firing::before {
  filter:
    drop-shadow(0 0 18px rgba(155, 233, 255, .95))
    drop-shadow(0 0 38px rgba(77, 148, 255, .62))
    drop-shadow(0 0 62px rgba(84, 209, 255, .34)) !important;
}

.guardian.firing::after {
  transform: translateX(-50%) scale(1.15);
  opacity: 1;
  filter: blur(14px);
}

@keyframes guardianIdleV79 {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}

.answer-panel > span {
  display: none !important;
}

.answer-panel strong {
  font-size: 2.15rem !important;
  letter-spacing: .04em;
}

.laser-svg {
  mix-blend-mode: screen;
}

.laser-svg line {
  stroke-linecap: round;
}

.laser-glow {
  stroke: #4ae4ff !important;
  stroke-width: 16px !important;
  opacity: .98 !important;
  filter: drop-shadow(0 0 8px rgba(74,228,255,.96)) drop-shadow(0 0 18px rgba(74,228,255,.74)) drop-shadow(0 0 34px rgba(71,154,255,.52));
}

.laser-core {
  stroke: #ffffff !important;
  stroke-width: 5px !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 0 12px rgba(108,220,255,.9));
}

.laser-svg-bomb .laser-glow {
  stroke: #ff9a3c !important;
  filter: drop-shadow(0 0 8px rgba(255,154,60,.96)) drop-shadow(0 0 16px rgba(255,95,64,.72)) drop-shadow(0 0 30px rgba(255,95,64,.44));
}

.laser-svg-heart .laser-glow {
  stroke: #ff71b0 !important;
  filter: drop-shadow(0 0 8px rgba(255,113,176,.96)) drop-shadow(0 0 16px rgba(255,153,210,.72)) drop-shadow(0 0 30px rgba(255,153,210,.44));
}

.hit-spark,
.impact-ring {
  mix-blend-mode: screen;
}

.hit-spark {
  width: 34px !important;
  height: 34px !important;
  margin-left: -17px !important;
  margin-top: -17px !important;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(150,236,255,.95) 22%, rgba(68,198,255,.6) 52%, rgba(68,198,255,0) 74%) !important;
  box-shadow: 0 0 18px rgba(146, 233, 255, .95), 0 0 34px rgba(67, 171, 255, .52) !important;
}

.impact-ring {
  width: 52px !important;
  height: 52px !important;
  margin-left: -26px !important;
  margin-top: -26px !important;
  border: 2px solid rgba(122, 228, 255, .96) !important;
  box-shadow: 0 0 18px rgba(122, 228, 255, .72), inset 0 0 10px rgba(255,255,255,.25) !important;
}

@media (max-width: 920px) {
  .entity {
    width: 126px !important;
    height: 100px !important;
  }

  .ship .problem {
    min-width: 86px !important;
    max-width: 116px !important;
    font-size: .74rem !important;
    padding: 4px 7px 5px !important;
  }

  .guardian {
    width: 184px !important;
    height: 146px !important;
  }

  .guardian::before {
    width: 174px !important;
    height: 178px !important;
    bottom: 6px !important;
  }

  .guardian::after {
    width: 116px;
    height: 116px;
    bottom: 16px;
  }

  .answer-panel strong {
    font-size: 1.92rem !important;
  }

  .laser-glow {
    stroke-width: 12px !important;
  }

  .laser-core {
    stroke-width: 4px !important;
  }
}


/* ==========================================================================
   V80 REAL VISIBLE SPRITE CACHE-FIX PASS
   Uses new *_v80 filenames so old cached enemy/player images cannot appear.
   ========================================================================== */

.battlefield {
  background:
    linear-gradient(180deg, rgba(1, 5, 18, .24), rgba(1, 7, 22, .10)),
    radial-gradient(circle at 50% 100%, rgba(45, 168, 255, .16), transparent 44%),
    url('../../assets/alien-math-attack/game-assets/bg_clean_space_v80.jpg?v=80') center / cover no-repeat,
    #030916 !important;
}

.entity {
  width: 166px !important;
  height: 128px !important;
}

.ship {
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: contain !important;
  image-rendering: auto !important;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.26))
    drop-shadow(0 0 18px currentColor)
    drop-shadow(0 16px 20px rgba(0,0,0,.48)) !important;
}

/* hide every leftover original CSS ship part */
.ship .body,
.ship .dome,
.ship .wing,
.ship .core-light,
.ship .leg,
.ship .ship-shape,
.ship .sprite-shadow {
  display: none !important;
}

.ship.scout   { background-image: url('../../assets/alien-math-attack/game-assets/enemy_scout_v80.png?v=80') !important; color: #ffd23c !important; }
.ship.blade   { background-image: url('../../assets/alien-math-attack/game-assets/enemy_blade_v80.png?v=80') !important; color: #96ff39 !important; }
.ship.bomber  { background-image: url('../../assets/alien-math-attack/game-assets/enemy_bomber_v80.png?v=80') !important; color: #ff9c28 !important; }
.ship.crystal { background-image: url('../../assets/alien-math-attack/game-assets/enemy_crystal_v80.png?v=80') !important; color: #ff74ff !important; }
.ship.spinner { background-image: url('../../assets/alien-math-attack/game-assets/enemy_spinner_v80.png?v=80') !important; color: #35eaff !important; }
.ship.beetle  { background-image: url('../../assets/alien-math-attack/game-assets/enemy_beetle_v80.png?v=80') !important; color: #a5ff35 !important; }

/* make math plate separate and clean, no sprite labels */
.ship .problem {
  top: auto !important;
  bottom: -2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 104px !important;
  max-width: 150px !important;
  padding: 5px 10px 6px !important;
  font-size: .98rem !important;
  line-height: 1.02 !important;
  border-radius: 14px !important;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(1, 8, 24, .92), rgba(7, 20, 45, .96)) !important;
  border: 1px solid currentColor !important;
  box-shadow:
    0 0 14px currentColor,
    0 0 26px rgba(255,255,255,.06),
    inset 0 0 10px rgba(255,255,255,.10) !important;
  text-shadow: 0 0 8px currentColor !important;
  z-index: 10 !important;
}

/* Player: vertical hero ship; firing version appears only during laser shot */
.guardian {
  width: 230px !important;
  height: 180px !important;
  bottom: -4px !important;
}

.guardian::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 4px !important;
  width: 196px !important;
  height: 220px !important;
  transform: translateX(-50%) !important;
  background: url('../../assets/alien-math-attack/game-assets/player_ship_idle_v80.png?v=80') center bottom / contain no-repeat !important;
  filter:
    drop-shadow(0 0 16px rgba(100, 220, 255, .70))
    drop-shadow(0 0 32px rgba(70, 140, 255, .38)) !important;
  z-index: 4 !important;
  animation: guardianFloatV80 1.8s ease-in-out infinite !important;
}

.guardian.firing::before {
  width: 218px !important;
  height: 300px !important;
  bottom: 0 !important;
  background-image: url('../../assets/alien-math-attack/game-assets/player_ship_firing_v80.png?v=80') !important;
  filter:
    drop-shadow(0 0 22px rgba(160, 240, 255, 1))
    drop-shadow(0 0 48px rgba(65, 150, 255, .74))
    drop-shadow(0 0 78px rgba(85, 210, 255, .46)) !important;
}

.guardian::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 18px !important;
  width: 150px !important;
  height: 150px !important;
  transform: translateX(-50%) scale(1) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(87, 210, 255, .30), rgba(67, 130, 255, .16) 44%, transparent 70%) !important;
  filter: blur(10px) !important;
  opacity: .85 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.guardian.firing::after {
  transform: translateX(-50%) scale(1.28) !important;
  opacity: 1 !important;
  filter: blur(14px) !important;
}

@keyframes guardianFloatV80 {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-5px); }
}

/* Stronger firing laser */
.laser-svg {
  mix-blend-mode: screen !important;
}

.laser-glow {
  stroke: #36eaff !important;
  stroke-width: 18px !important;
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 8px rgba(80, 235, 255, 1))
    drop-shadow(0 0 20px rgba(80, 200, 255, .85))
    drop-shadow(0 0 42px rgba(70, 145, 255, .58)) !important;
}

.laser-core {
  stroke: #ffffff !important;
  stroke-width: 5px !important;
  opacity: 1 !important;
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,1))
    drop-shadow(0 0 14px rgba(130,235,255,.95)) !important;
}

.hit-spark {
  width: 38px !important;
  height: 38px !important;
  margin-left: -19px !important;
  margin-top: -19px !important;
  background: radial-gradient(circle, #fff 0 8%, #bdf8ff 10% 28%, rgba(72, 220, 255, .68) 45%, transparent 75%) !important;
  box-shadow: 0 0 22px rgba(180,245,255,.98), 0 0 42px rgba(72,190,255,.58) !important;
}

.impact-ring {
  width: 58px !important;
  height: 58px !important;
  margin-left: -29px !important;
  margin-top: -29px !important;
  border: 2px solid rgba(145, 235, 255, .95) !important;
  box-shadow: 0 0 20px rgba(145, 235, 255, .72), inset 0 0 10px rgba(255,255,255,.3) !important;
}

/* No answer label */
.answer-panel span {
  display: none !important;
}

@media (max-width: 920px) {
  .entity {
    width: 126px !important;
    height: 102px !important;
  }

  .ship .problem {
    min-width: 82px !important;
    max-width: 112px !important;
    font-size: .72rem !important;
    padding: 4px 7px 5px !important;
    bottom: -3px !important;
  }

  .guardian {
    width: 176px !important;
    height: 142px !important;
  }

  .guardian::before {
    width: 150px !important;
    height: 176px !important;
    bottom: 0 !important;
  }

  .guardian.firing::before {
    width: 166px !important;
    height: 226px !important;
    bottom: -4px !important;
  }

  .guardian::after {
    width: 112px !important;
    height: 112px !important;
    bottom: 14px !important;
  }

  .laser-glow {
    stroke-width: 13px !important;
  }

  .laser-core {
    stroke-width: 4px !important;
  }
}


/* ===== V81: user-provided production sprite swap =====
   Replaces enemy/player sprites with the user's approved artwork.
   Goals:
   - no floating labels baked into sprites
   - cleaner glow
   - player firing uses the same ship with stronger neon aura, not a pasted second ship
*/
.battlefield {
  background:
    linear-gradient(180deg, rgba(1, 5, 18, .20), rgba(1, 7, 22, .08)),
    radial-gradient(circle at 50% 100%, rgba(45, 168, 255, .14), transparent 40%),
    url('../../assets/alien-math-attack/game-assets/bg_clean_space_v80.jpg?v=80') center / cover no-repeat,
    #030916 !important;
}

.entity {
  width: 176px !important;
  height: 134px !important;
}

.ship {
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: contain !important;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.22))
    drop-shadow(0 0 10px currentColor)
    drop-shadow(0 12px 18px rgba(0,0,0,.42)) !important;
}

.ship.scout   { background-image: url('../../assets/alien-math-attack/game-assets/enemy_scout_v81.png?v=81') !important; color: #ffd23c !important; }
.ship.blade   { background-image: url('../../assets/alien-math-attack/game-assets/enemy_blade_v81.png?v=81') !important; color: #96ff39 !important; }
.ship.bomber  { background-image: url('../../assets/alien-math-attack/game-assets/enemy_bomber_v81.png?v=81') !important; color: #ff9c28 !important; }
.ship.crystal { background-image: url('../../assets/alien-math-attack/game-assets/enemy_crystal_v81.png?v=81') !important; color: #7ce9ff !important; }
.ship.spinner { background-image: url('../../assets/alien-math-attack/game-assets/enemy_spinner_v81.png?v=81') !important; color: #35eaff !important; }
.ship.beetle  { background-image: url('../../assets/alien-math-attack/game-assets/enemy_beetle_v81.png?v=81') !important; color: #9cff3c !important; }

.guardian {
  width: 212px !important;
  height: 178px !important;
  bottom: -2px !important;
}

.guardian::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 8px !important;
  width: 182px !important;
  height: 182px !important;
  transform: translateX(-50%) !important;
  background: url('../../assets/alien-math-attack/game-assets/player_ship_idle_v81.png?v=81') center bottom / contain no-repeat !important;
  filter:
    drop-shadow(0 0 10px rgba(120, 225, 255, .65))
    drop-shadow(0 0 22px rgba(72, 155, 255, .42))
    drop-shadow(0 10px 18px rgba(0,0,0,.35)) !important;
  z-index: 4 !important;
  animation: guardianFloatV81 1.8s ease-in-out infinite !important;
}

.guardian.firing::before {
  background-image: url('../../assets/alien-math-attack/game-assets/player_ship_firing_v81.png?v=81') !important;
  transform: translateX(-50%) scale(1.03) !important;
  filter:
    drop-shadow(0 0 18px rgba(180, 245, 255, .98))
    drop-shadow(0 0 38px rgba(72, 180, 255, .78))
    drop-shadow(0 0 70px rgba(70, 215, 255, .35))
    drop-shadow(0 10px 18px rgba(0,0,0,.35)) !important;
}

.guardian::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 32px !important;
  width: 132px !important;
  height: 132px !important;
  transform: translateX(-50%) scale(1) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(80, 218, 255, .22), rgba(70, 140, 255, .12) 44%, transparent 72%) !important;
  filter: blur(10px) !important;
  opacity: .85 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.guardian.firing::after {
  width: 178px !important;
  height: 178px !important;
  bottom: 34px !important;
  transform: translateX(-50%) scale(1) !important;
  opacity: 1 !important;
  background: radial-gradient(circle, rgba(170, 245, 255, .55), rgba(72, 180, 255, .22) 46%, transparent 76%) !important;
  filter: blur(14px) !important;
}

@keyframes guardianFloatV81 {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

/* Keep boss formula readable. */
.entity.boss .problem {
  font-size: clamp(1.15rem, 1.3vw, 1.45rem) !important;
  padding: 8px 16px 10px !important;
}


/* ==========================================================================
   V82 — FINAL USER ASSET INTEGRATION
   Uses user-provided PNG sprites directly. No background removal, no gray cleanup.
   ========================================================================== */

.battlefield {
  background:
    linear-gradient(180deg, rgba(1, 5, 18, .18), rgba(1, 7, 22, .10)),
    var(--battle-bg),
    #030916 !important;
  background-size: cover !important;
  background-position: center !important;
}

.battlefield[data-bg="1"] { --battle-bg: url('../../assets/alien-math-attack/game-assets/bg_earth_station_v82_game.jpg?v=83'); }
.battlefield[data-bg="2"] { --battle-bg: url('../../assets/alien-math-attack/game-assets/bg_nebula_rift_v82_game.jpg?v=83'); }
.battlefield[data-bg="3"] { --battle-bg: url('../../assets/alien-math-attack/game-assets/bg_crystal_void_v82_game.jpg?v=83'); }
.battlefield[data-bg="4"] { --battle-bg: url('../../assets/alien-math-attack/game-assets/bg_frozen_orbit_v82_game.jpg?v=83'); }
.battlefield[data-bg="5"] { --battle-bg: url('../../assets/alien-math-attack/game-assets/bg_ruins_v82_game.jpg?v=83'); }
.battlefield[data-bg="6"] { --battle-bg: url('../../assets/alien-math-attack/game-assets/bg_lava_warzone_v82_game.jpg?v=83'); }
.battlefield[data-bg="7"] { --battle-bg: url('../../assets/alien-math-attack/game-assets/bg_portal_v82_game.jpg?v=83'); }

.battlefield::before {
  opacity: .32 !important;
}

.entity {
  width: 150px !important;
  height: 108px !important;
  filter: none !important;
}

.entity.boss {
  width: 360px !important;
  height: 210px !important;
}

.ship {
  width: 100% !important;
  height: 100% !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: contain !important;
  image-rendering: auto !important;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.18))
    drop-shadow(0 0 12px currentColor)
    drop-shadow(0 10px 16px rgba(0,0,0,.35)) !important;
}

.ship .body,
.ship .dome,
.ship .wing,
.ship .core-light,
.ship .leg,
.ship .ship-shape,
.ship .sprite-shadow {
  display: none !important;
}

/* User enemy sprites */
.ship.scout   { background-image: url('../../assets/alien-math-attack/game-assets/enemy_scout_v82.png?v=83') !important; color: #ffd23c !important; }
.ship.blade   { background-image: url('../../assets/alien-math-attack/game-assets/enemy_blade_v82.png?v=83') !important; color: #9cff3c !important; }
.ship.bomber  { background-image: url('../../assets/alien-math-attack/game-assets/enemy_bomber_v82.png?v=83') !important; color: #ff9c28 !important; }
.ship.crystal { background-image: url('../../assets/alien-math-attack/game-assets/enemy_crystal_v82.png?v=83') !important; color: #6ee8ff !important; }
.ship.spinner { background-image: url('../../assets/alien-math-attack/game-assets/enemy_spinner_v82.png?v=83') !important; color: #35eaff !important; }
.ship.beetle  { background-image: url('../../assets/alien-math-attack/game-assets/enemy_beetle_v82.png?v=83') !important; color: #94ff36 !important; }

/* User boss sprites */
.ship.boss-overlord   { background-image: url('../../assets/alien-math-attack/game-assets/boss_overlord_v82.png?v=83') !important; color: #c85cff !important; }
.ship.boss-crimson    { background-image: url('../../assets/alien-math-attack/game-assets/boss_crimson_v82.png?v=83') !important; color: #ff5a4a !important; }
.ship.boss-quantum    { background-image: url('../../assets/alien-math-attack/game-assets/boss_quantum_v82.png?v=83') !important; color: #47f3ff !important; }
.ship.boss-obsidian   { background-image: url('../../assets/alien-math-attack/game-assets/boss_obsidian_v82.png?v=83') !important; color: #c85cff !important; }
.ship.boss-celestial  { background-image: url('../../assets/alien-math-attack/game-assets/boss_celestial_v82.png?v=83') !important; color: #5ee7ff !important; }
.ship.boss-prism      { background-image: url('../../assets/alien-math-attack/game-assets/boss_prism_v82.png?v=83') !important; color: #ad6bff !important; }
.ship.boss-dreadnought{ background-image: url('../../assets/alien-math-attack/game-assets/boss_dreadnought_v82.png?v=83') !important; color: #ff9c28 !important; }

/* Enemy question panel: separated from sprite and readable */
.ship .problem {
  top: auto !important;
  bottom: -9px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 104px !important;
  max-width: 150px !important;
  padding: 5px 10px 6px !important;
  border-radius: 14px !important;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(0,7,22,.92), rgba(8,18,40,.96)) !important;
  border: 1px solid currentColor !important;
  font-size: 1rem !important;
  line-height: 1.02 !important;
  text-shadow: 0 0 8px currentColor !important;
  box-shadow:
    0 0 12px currentColor,
    inset 0 0 10px rgba(255,255,255,.08) !important;
  z-index: 20 !important;
}

/* Boss question must be below boss, not hidden by boss HP/name bar or buried in body. */
.entity.boss .ship .problem {
  top: auto !important;
  bottom: -20px !important;
  min-width: 220px !important;
  max-width: 330px !important;
  padding: 9px 18px 11px !important;
  border-radius: 18px !important;
  font-size: clamp(1.45rem, 2.2vw, 2.1rem) !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  background: linear-gradient(180deg, rgba(6,4,24,.94), rgba(10,20,48,.98)) !important;
  border: 2px solid currentColor !important;
  box-shadow:
    0 0 18px currentColor,
    0 0 30px rgba(255,255,255,.10),
    inset 0 0 16px rgba(255,255,255,.10) !important;
}

/* Player ship: use the single provided sprite. Firing = aura only, no image swap. */
.guardian {
  width: 170px !important;
  height: 150px !important;
  bottom: 4px !important;
}

.guardian::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 2px !important;
  width: 138px !important;
  height: 150px !important;
  transform: translateX(-50%) !important;
  background: url('../../assets/alien-math-attack/game-assets/player_ship_v82.png?v=83') center bottom / contain no-repeat !important;
  filter:
    drop-shadow(0 0 10px rgba(120, 225, 255, .42))
    drop-shadow(0 8px 14px rgba(0,0,0,.32)) !important;
  z-index: 4 !important;
  animation: guardianFloatV82 1.8s ease-in-out infinite !important;
}

.guardian::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 22px !important;
  width: 96px !important;
  height: 96px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(85,210,255,.18), rgba(70,140,255,.09) 48%, transparent 72%) !important;
  filter: blur(10px) !important;
  opacity: .70 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.guardian.firing::before {
  filter:
    drop-shadow(0 0 14px rgba(185,245,255,.85))
    drop-shadow(0 0 28px rgba(72,180,255,.58))
    drop-shadow(0 8px 14px rgba(0,0,0,.32)) !important;
}

.guardian.firing::after {
  width: 132px !important;
  height: 132px !important;
  bottom: 20px !important;
  background: radial-gradient(circle, rgba(175,245,255,.42), rgba(70,180,255,.18) 46%, transparent 76%) !important;
  filter: blur(12px) !important;
  opacity: 1 !important;
}

@keyframes guardianFloatV82 {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-4px); }
}

/* Laser and hit effect: clean neon, not messy sprite overlay. */
.laser-glow {
  stroke: #36eaff !important;
  stroke-width: 14px !important;
  opacity: .92 !important;
  filter:
    drop-shadow(0 0 8px rgba(80,235,255,.85))
    drop-shadow(0 0 20px rgba(80,200,255,.65)) !important;
}
.laser-core {
  stroke: #ffffff !important;
  stroke-width: 4px !important;
  opacity: 1 !important;
}
.answer-panel span { display: none !important; }

@media (max-width: 920px) {
  .entity {
    width: 102px !important;
    height: 80px !important;
  }
  .ship .problem {
    min-width: 74px !important;
    max-width: 104px !important;
    font-size: .68rem !important;
    padding: 4px 6px 5px !important;
    bottom: -8px !important;
  }

  .entity.boss {
    width: 230px !important;
    height: 150px !important;
  }

  .entity.boss .ship .problem {
    bottom: -22px !important;
    min-width: 170px !important;
    max-width: 224px !important;
    font-size: 1.25rem !important;
    padding: 7px 10px 8px !important;
  }

  .guardian {
    width: 128px !important;
    height: 118px !important;
    bottom: 2px !important;
  }
  .guardian::before {
    width: 96px !important;
    height: 118px !important;
    bottom: 0 !important;
  }
  .guardian::after {
    width: 76px !important;
    height: 76px !important;
    bottom: 16px !important;
  }
  .guardian.firing::after {
    width: 104px !important;
    height: 104px !important;
    bottom: 14px !important;
  }
}


/* ==========================================================================
   V85 HARD OVERRIDE — Alien Math Attack only
   Purpose: make visual change obvious even if older V80-V84 rules remain.
   ========================================================================== */

/* Normal enemies: smaller than previous versions */
#gameScreen .battlefield .entity:not(.boss) {
  width: 118px !important;
  height: 88px !important;
  z-index: 4 !important;
}

/* Boss: clearly larger than normal enemies on desktop */
#gameScreen .battlefield .entity.boss {
  width: min(560px, 44vw) !important;
  height: 330px !important;
  z-index: 7 !important;
}

#gameScreen .battlefield .entity.boss .ship {
  width: 100% !important;
  height: 100% !important;
  background-size: contain !important;
  background-position: center top !important;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.18))
    drop-shadow(0 0 18px currentColor)
    drop-shadow(0 12px 18px rgba(0,0,0,.45)) !important;
}

/* Readable question labels for enemies and boss */
#gameScreen .battlefield .ship .problem {
  top: auto !important;
  bottom: -10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: block !important;
  min-width: 112px !important;
  max-width: 168px !important;
  padding: 6px 12px 7px !important;
  border-radius: 15px !important;
  font-size: 1.05rem !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(0,7,22,.97), rgba(7,18,42,.99)) !important;
  border: 1.5px solid currentColor !important;
  text-shadow: 0 0 8px currentColor, 0 2px 5px rgba(0,0,0,.7) !important;
  box-shadow: 0 0 14px currentColor, inset 0 0 10px rgba(255,255,255,.10) !important;
  z-index: 30 !important;
}

#gameScreen .battlefield .entity.boss .ship .problem {
  bottom: -16px !important;
  min-width: 268px !important;
  max-width: 420px !important;
  padding: 11px 20px 13px !important;
  border-radius: 22px !important;
  font-size: clamp(1.8rem, 2.6vw, 2.5rem) !important;
  border-width: 2px !important;
}

/* Player ship: smaller and lower profile */
#gameScreen .battlefield .guardian {
  width: 148px !important;
  height: 132px !important;
  bottom: 0 !important;
}
#gameScreen .battlefield .guardian::before {
  width: 112px !important;
  height: 130px !important;
  bottom: 0 !important;
}

/* Bomb and supply: force image sprites whether JS uses .drop-icon or .drop-sprite */
#gameScreen .battlefield .drop.math-bomb,
#gameScreen .battlefield .drop.math-heart,
#gameScreen .battlefield .drop.math-supply {
  width: 122px !important;
  height: 116px !important;
  display: block !important;
  place-items: unset !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ff4d5e !important;
  font-size: 0 !important;
  overflow: visible !important;
  z-index: 8 !important;
  animation: dropFloatV85 1.2s ease-in-out infinite !important;
}

#gameScreen .battlefield .drop.math-heart,
#gameScreen .battlefield .drop.math-supply {
  color: #ff6fa2 !important;
}

#gameScreen .battlefield .drop.math-bomb .drop-icon,
#gameScreen .battlefield .drop.math-bomb .drop-sprite,
#gameScreen .battlefield .drop.math-heart .drop-icon,
#gameScreen .battlefield .drop.math-heart .drop-sprite,
#gameScreen .battlefield .drop.math-supply .drop-icon,
#gameScreen .battlefield .drop.math-supply .drop-sprite {
  position: absolute !important;
  display: block !important;
  left: 50% !important;
  top: 0 !important;
  width: 82px !important;
  height: 82px !important;
  transform: translateX(-50%) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  filter: drop-shadow(0 0 12px currentColor) drop-shadow(0 8px 12px rgba(0,0,0,.45)) !important;
}

#gameScreen .battlefield .drop.math-bomb .drop-icon,
#gameScreen .battlefield .drop.math-bomb .drop-sprite {
  background-image: url('../../assets/alien-math-attack/game-assets/bomb_v85.png?v=85') !important;
}

#gameScreen .battlefield .drop.math-heart .drop-icon,
#gameScreen .battlefield .drop.math-heart .drop-sprite,
#gameScreen .battlefield .drop.math-supply .drop-icon,
#gameScreen .battlefield .drop.math-supply .drop-sprite {
  background-image: url('../../assets/alien-math-attack/game-assets/supply_heart_v85.png?v=85') !important;
}

#gameScreen .battlefield .drop.math-bomb .drop-problem,
#gameScreen .battlefield .drop.math-heart .drop-problem,
#gameScreen .battlefield .drop.math-supply .drop-problem {
  position: absolute !important;
  display: block !important;
  left: 50% !important;
  top: 78px !important;
  transform: translateX(-50%) !important;
  min-width: 94px !important;
  max-width: 138px !important;
  padding: 6px 9px 7px !important;
  border-radius: 14px !important;
  font-size: .96rem !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  text-align: center !important;
  white-space: nowrap !important;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(0,7,22,.97), rgba(8,18,42,.99)) !important;
  border: 1.5px solid currentColor !important;
  text-shadow: 0 0 8px currentColor, 0 2px 5px rgba(0,0,0,.72) !important;
  box-shadow: 0 0 14px currentColor, inset 0 0 10px rgba(255,255,255,.10) !important;
  z-index: 20 !important;
}

@keyframes dropFloatV85 {
  0%,100% { transform: translate(-50%, -50%) translateY(0) scale(1); }
  50% { transform: translate(-50%, -50%) translateY(-4px) scale(1.04); }
}

/* Mobile: enemies and player smaller, boss still larger and readable */
@media (max-width: 920px) {
  #gameScreen .battlefield .entity:not(.boss) {
    width: 72px !important;
    height: 58px !important;
  }

  #gameScreen .battlefield .ship .problem {
    bottom: -10px !important;
    min-width: 68px !important;
    max-width: 94px !important;
    padding: 4px 6px 5px !important;
    border-radius: 11px !important;
    font-size: .70rem !important;
    line-height: 1.02 !important;
  }

  #gameScreen .battlefield .entity.boss {
    width: min(330px, 84vw) !important;
    height: 220px !important;
  }

  #gameScreen .battlefield .entity.boss .ship .problem {
    bottom: -22px !important;
    min-width: 188px !important;
    max-width: 290px !important;
    padding: 8px 12px 9px !important;
    border-radius: 16px !important;
    font-size: 1.35rem !important;
  }

  #gameScreen .battlefield .guardian {
    width: 102px !important;
    height: 100px !important;
    bottom: 0 !important;
  }

  #gameScreen .battlefield .guardian::before {
    width: 74px !important;
    height: 98px !important;
    bottom: 0 !important;
  }

  #gameScreen .battlefield .drop.math-bomb,
  #gameScreen .battlefield .drop.math-heart,
  #gameScreen .battlefield .drop.math-supply {
    width: 90px !important;
    height: 92px !important;
  }

  #gameScreen .battlefield .drop.math-bomb .drop-icon,
  #gameScreen .battlefield .drop.math-bomb .drop-sprite,
  #gameScreen .battlefield .drop.math-heart .drop-icon,
  #gameScreen .battlefield .drop.math-heart .drop-sprite,
  #gameScreen .battlefield .drop.math-supply .drop-icon,
  #gameScreen .battlefield .drop.math-supply .drop-sprite {
    width: 56px !important;
    height: 56px !important;
  }

  #gameScreen .battlefield .drop.math-bomb .drop-problem,
  #gameScreen .battlefield .drop.math-heart .drop-problem,
  #gameScreen .battlefield .drop.math-supply .drop-problem {
    top: 55px !important;
    min-width: 70px !important;
    max-width: 100px !important;
    padding: 4px 6px 5px !important;
    border-radius: 11px !important;
    font-size: .72rem !important;
  }
}


/* =======================================================================
   V86 OVERRIDE — boss/bomb/supply/mobile scale cleanup
   ======================================================================= */

/* desktop: regular enemies slightly smaller so boss reads larger */
#gameScreen .battlefield .entity:not(.boss) {
  width: 106px !important;
  height: 78px !important;
}

#gameScreen .battlefield .ship {
  background-position: center center !important;
}

#gameScreen .battlefield .ship .problem {
  bottom: -14px !important;
  min-width: 100px !important;
  max-width: 154px !important;
  padding: 6px 10px 7px !important;
  border-radius: 15px !important;
  font-size: 0.98rem !important;
}

/* desktop boss: much larger than normal enemies, label large and below sprite */
#gameScreen .battlefield .entity.boss {
  width: min(660px, 52vw) !important;
  height: 390px !important;
}

#gameScreen .battlefield .entity.boss .ship {
  background-position: center top !important;
  background-size: contain !important;
}

#gameScreen .battlefield .entity.boss .ship .problem {
  bottom: -34px !important;
  min-width: 320px !important;
  max-width: 440px !important;
  padding: 12px 20px 13px !important;
  border-radius: 22px !important;
  font-size: clamp(2.0rem, 2.8vw, 2.7rem) !important;
  line-height: 1.02 !important;
}

/* bomb + supply: smaller, cleaner, clear question */
#gameScreen .battlefield .drop.math-bomb,
#gameScreen .battlefield .drop.math-heart,
#gameScreen .battlefield .drop.math-supply {
  width: 86px !important;
  height: 88px !important;
}

#gameScreen .battlefield .drop.math-bomb .drop-icon,
#gameScreen .battlefield .drop.math-bomb .drop-sprite,
#gameScreen .battlefield .drop.math-heart .drop-icon,
#gameScreen .battlefield .drop.math-heart .drop-sprite,
#gameScreen .battlefield .drop.math-supply .drop-icon,
#gameScreen .battlefield .drop.math-supply .drop-sprite {
  width: 56px !important;
  height: 56px !important;
  top: 0 !important;
}

#gameScreen .battlefield .drop.math-bomb .drop-problem,
#gameScreen .battlefield .drop.math-heart .drop-problem,
#gameScreen .battlefield .drop.math-supply .drop-problem {
  top: 52px !important;
  min-width: 72px !important;
  max-width: 112px !important;
  padding: 4px 7px 5px !important;
  border-radius: 11px !important;
  font-size: .78rem !important;
  line-height: 1.02 !important;
}

/* player ship slightly smaller on desktop */
#gameScreen .battlefield .guardian {
  width: 138px !important;
  height: 122px !important;
}
#gameScreen .battlefield .guardian::before {
  width: 104px !important;
  height: 122px !important;
}

@media (max-width: 920px) {
  /* mobile enemies and player smaller */
  #gameScreen .battlefield .entity:not(.boss) {
    width: 76px !important;
    height: 56px !important;
  }

  #gameScreen .battlefield .ship .problem {
    bottom: -10px !important;
    min-width: 62px !important;
    max-width: 92px !important;
    padding: 3px 5px 4px !important;
    border-radius: 10px !important;
    font-size: .64rem !important;
  }

  #gameScreen .battlefield .entity.boss {
    width: min(300px, 88vw) !important;
    height: 188px !important;
  }

  #gameScreen .battlefield .entity.boss .ship .problem {
    bottom: -24px !important;
    min-width: 188px !important;
    max-width: 250px !important;
    padding: 8px 11px 9px !important;
    border-radius: 16px !important;
    font-size: 1.45rem !important;
  }

  #gameScreen .battlefield .drop.math-bomb,
  #gameScreen .battlefield .drop.math-heart,
  #gameScreen .battlefield .drop.math-supply {
    width: 72px !important;
    height: 74px !important;
  }

  #gameScreen .battlefield .drop.math-bomb .drop-icon,
  #gameScreen .battlefield .drop.math-bomb .drop-sprite,
  #gameScreen .battlefield .drop.math-heart .drop-icon,
  #gameScreen .battlefield .drop.math-heart .drop-sprite,
  #gameScreen .battlefield .drop.math-supply .drop-icon,
  #gameScreen .battlefield .drop.math-supply .drop-sprite {
    width: 42px !important;
    height: 42px !important;
  }

  #gameScreen .battlefield .drop.math-bomb .drop-problem,
  #gameScreen .battlefield .drop.math-heart .drop-problem,
  #gameScreen .battlefield .drop.math-supply .drop-problem {
    top: 37px !important;
    min-width: 58px !important;
    max-width: 86px !important;
    padding: 3px 5px 4px !important;
    border-radius: 9px !important;
    font-size: .62rem !important;
  }

  #gameScreen .battlefield .guardian {
    width: 110px !important;
    height: 98px !important;
    bottom: 0 !important;
  }

  #gameScreen .battlefield .guardian::before {
    width: 78px !important;
    height: 96px !important;
  }

  #gameScreen .battlefield .guardian::after {
    width: 66px !important;
    height: 66px !important;
    bottom: 12px !important;
  }

  #gameScreen .battlefield .guardian.firing::after {
    width: 92px !important;
    height: 92px !important;
    bottom: 10px !important;
  }
}


/* =======================================================================
   V90 QUESTION LABEL FIX
   Wider one-line labels placed below ship sprites.
   Do not change ship / boss / bomb / supply object sizes.
   ======================================================================= */

/* Keep ship artwork visible: label moves below the sprite and stays on one line. */
#gameScreen .battlefield .entity:not(.boss) .ship .problem {
  top: auto !important;
  bottom: -30px !important;
  width: max-content !important;
  min-width: 136px !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 5px 12px 6px !important;
  border-radius: 14px !important;
  font-size: 1.08rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  z-index: 40 !important;
}

/* Boss keeps its own large label, but also one-line and clear. */
#gameScreen .battlefield .entity.boss .ship .problem {
  white-space: nowrap !important;
  overflow: visible !important;
  width: max-content !important;
  max-width: none !important;
  min-height: 0 !important;
}

/* Drop labels also stay one line and readable without changing object size. */
#gameScreen .battlefield .drop.math-bomb .drop-problem,
#gameScreen .battlefield .drop.math-heart .drop-problem,
#gameScreen .battlefield .drop.math-supply .drop-problem {
  width: max-content !important;
  min-width: 70px !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1 !important;
}

/* Mobile: ship size unchanged; only label grows wider and sits below the sprite. */
@media (max-width: 920px) {
  #gameScreen .battlefield .entity:not(.boss) .ship .problem {
    bottom: -22px !important;
    min-width: 100px !important;
    max-width: none !important;
    padding: 4px 8px 5px !important;
    border-radius: 11px !important;
    font-size: .78rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #gameScreen .battlefield .entity.boss .ship .problem {
    white-space: nowrap !important;
    width: max-content !important;
    max-width: none !important;
  }

  #gameScreen .battlefield .drop.math-bomb .drop-problem,
  #gameScreen .battlefield .drop.math-heart .drop-problem,
  #gameScreen .battlefield .drop.math-supply .drop-problem {
    min-width: 64px !important;
    max-width: none !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: .58rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
}


/* =======================================================================
   V91 SURGICAL FIX — drop labels + mobile boss question + calm boss recoil
   Do not change ship/object sizes.
   ======================================================================= */

#gameScreen .battlefield .entity.boss.boss-heavy-hit {
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.25))
    drop-shadow(0 0 20px currentColor)
    drop-shadow(0 12px 18px rgba(0,0,0,.45)) !important;
}

/* Disable old springy bounce on boss hit */
#gameScreen .battlefield .entity.boss.target-hit-flash,
#gameScreen .battlefield .entity.boss.boss-heavy-hit .ship {
  transform: translate(-50%, -50%) !important;
}

/* Desktop: fix bomb label clipping and supply extra line. Object sizes unchanged. */
#gameScreen .battlefield .drop.math-bomb .drop-problem,
#gameScreen .battlefield .drop.math-heart .drop-problem,
#gameScreen .battlefield .drop.math-supply .drop-problem {
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  min-height: 22px !important;
  padding-top: 2px !important;
  padding-bottom: 3px !important;
  font-size: .82rem !important;
}

/* Bomb: wider label for two-digit expressions. */
#gameScreen .battlefield .drop.math-bomb .drop-problem {
  min-width: 88px !important;
  max-width: 124px !important;
  top: 38px !important;
}

/* Supply: exactly one clean single-line label, no blank strip underneath. */
#gameScreen .battlefield .drop.math-heart .drop-problem,
#gameScreen .battlefield .drop.math-supply .drop-problem {
  min-width: 84px !important;
  max-width: 116px !important;
  min-height: 20px !important;
  padding-top: 1px !important;
  padding-bottom: 2px !important;
  top: 38px !important;
}

/* Mobile: larger question fonts only. Do not touch ship sizes. */
@media (max-width: 920px) {
  #gameScreen .battlefield .entity.boss .ship .problem {
    font-size: 1.95rem !important;
    min-width: 250px !important;
    max-width: 360px !important;
    padding: 11px 15px 12px !important;
    line-height: 1.02 !important;
  }

  #gameScreen .battlefield .drop.math-bomb .drop-problem,
  #gameScreen .battlefield .drop.math-heart .drop-problem,
  #gameScreen .battlefield .drop.math-supply .drop-problem {
    white-space: nowrap !important;
    overflow: visible !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 18px !important;
    padding-top: 1px !important;
    padding-bottom: 2px !important;
    font-size: .66rem !important;
  }

  #gameScreen .battlefield .drop.math-bomb .drop-problem {
    min-width: 66px !important;
    max-width: 94px !important;
    top: 25px !important;
  }

  #gameScreen .battlefield .drop.math-heart .drop-problem,
  #gameScreen .battlefield .drop.math-supply .drop-problem {
    min-width: 64px !important;
    max-width: 90px !important;
    top: 25px !important;
  }
}


/* =======================================================================
   V92 EXACT FIX — no boss scale, robust bomb/supply labels
   Scope: DO NOT alter ship sizes or layout.
   ======================================================================= */

#gameScreen .battlefield .entity.boss.boss-soft-hit .ship {
  transform: none !important;
  filter:
    brightness(1.16)
    drop-shadow(0 0 8px rgba(255,255,255,.18))
    drop-shadow(0 0 13px currentColor)
    drop-shadow(0 10px 16px rgba(0,0,0,.35)) !important;
}

#gameScreen .battlefield .entity.boss.target-hit-flash,
#gameScreen .battlefield .entity.boss.boss-heavy-hit,
#gameScreen .battlefield .entity.boss.boss-soft-hit {
  transform: translate(-50%, -50%) !important;
}

#gameScreen .battlefield .drop.math-bomb,
#gameScreen .battlefield .drop.math-heart,
#gameScreen .battlefield .drop.math-supply {
  overflow: visible !important;
}

#gameScreen .battlefield .drop.math-bomb::before,
#gameScreen .battlefield .drop.math-bomb::after,
#gameScreen .battlefield .drop.math-heart::before,
#gameScreen .battlefield .drop.math-heart::after,
#gameScreen .battlefield .drop.math-supply::before,
#gameScreen .battlefield .drop.math-supply::after {
  content: none !important;
  display: none !important;
}

#gameScreen .battlefield .drop.math-bomb .drop-problem,
#gameScreen .battlefield .drop.math-heart .drop-problem,
#gameScreen .battlefield .drop.math-supply .drop-problem {
  box-sizing: border-box !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: visible !important;
  text-overflow: clip !important;
  height: 24px !important;
  min-height: 24px !important;
  line-height: 1 !important;
  padding: 0 9px !important;
  border-radius: 12px !important;
  border: 2px solid currentColor !important;
  outline: 1px solid rgba(255,255,255,.28) !important;
  background: linear-gradient(180deg, rgba(0,7,22,.98), rgba(8,18,42,.99)) !important;
  color: #fff !important;
  text-align: center !important;
  font-size: .84rem !important;
  font-weight: 950 !important;
  box-shadow:
    0 0 10px currentColor,
    0 0 0 1px rgba(0,0,0,.35),
    inset 0 0 8px rgba(255,255,255,.10) !important;
  z-index: 30 !important;
}

#gameScreen .battlefield .drop.math-bomb .drop-problem {
  top: 40px !important;
  min-width: 96px !important;
  max-width: 138px !important;
}

#gameScreen .battlefield .drop.math-heart .drop-problem,
#gameScreen .battlefield .drop.math-supply .drop-problem {
  top: 39px !important;
  min-width: 90px !important;
  max-width: 128px !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 8px !important;
}

@media (max-width: 920px) {
  #gameScreen .battlefield .drop.math-bomb .drop-problem,
  #gameScreen .battlefield .drop.math-heart .drop-problem,
  #gameScreen .battlefield .drop.math-supply .drop-problem {
    height: 19px !important;
    min-height: 19px !important;
    padding: 0 6px !important;
    border-radius: 9px !important;
    border-width: 1.6px !important;
    outline-width: 1px !important;
    font-size: .64rem !important;
    line-height: 1 !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  #gameScreen .battlefield .drop.math-bomb .drop-problem {
    top: 28px !important;
    min-width: 72px !important;
    max-width: 100px !important;
  }

  #gameScreen .battlefield .drop.math-heart .drop-problem,
  #gameScreen .battlefield .drop.math-supply .drop-problem {
    top: 27px !important;
    min-width: 68px !important;
    max-width: 96px !important;
    height: 18px !important;
    min-height: 18px !important;
  }

  #gameScreen .battlefield .entity.boss .ship .problem {
    font-size: 1.95rem !important;
  }
}


/* =======================================================================
   V93 — BGM + mute button + boss flash-only recoil
   Scope: no ship/object/label size changes.
   ======================================================================= */

.sound-btn {
  min-width: 42px !important;
}
.sound-btn.muted {
  opacity: .68 !important;
}

#gameScreen .battlefield .entity.boss.boss-flash-only,
#gameScreen .battlefield .entity.boss.boss-flash-only .ship,
#gameScreen .battlefield .entity.boss.target-hit-flash,
#gameScreen .battlefield .entity.boss.boss-heavy-hit,
#gameScreen .battlefield .entity.boss.boss-soft-hit {
  transform: translate(-50%, -50%) !important;
}

#gameScreen .battlefield .entity.boss.boss-flash-only .ship {
  animation: none !important;
  transform: none !important;
  filter:
    brightness(1.18)
    drop-shadow(0 0 8px rgba(255,255,255,.18))
    drop-shadow(0 0 14px currentColor)
    drop-shadow(0 10px 16px rgba(0,0,0,.35)) !important;
}

@media (max-width: 920px) {
  .sound-btn { min-width: 36px !important; }
}


/* =======================================================================
   V94 — true boss recoil only + lightweight WebAudio SFX support
   Boss size must never change on hit.
   ======================================================================= */

/* Replace earlier boss hover keyframes with no scale at all. */
@keyframes bossHover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* During boss hit, stop all hover/flash animations so no scale can sneak in. */
#gameScreen .battlefield .entity.boss.boss-recoil-only,
#gameScreen .battlefield .entity.boss.boss-flash-only,
#gameScreen .battlefield .entity.boss.boss-soft-hit,
#gameScreen .battlefield .entity.boss.boss-heavy-hit,
#gameScreen .battlefield .entity.boss.target-hit-flash {
  animation: none !important;
  transform: translate(-50%, -50%) !important;
}

#gameScreen .battlefield .entity.boss.boss-recoil-only .ship,
#gameScreen .battlefield .entity.boss.boss-flash-only .ship,
#gameScreen .battlefield .entity.boss.boss-soft-hit .ship,
#gameScreen .battlefield .entity.boss.boss-heavy-hit .ship,
#gameScreen .battlefield .entity.boss.target-hit-flash .ship {
  animation: none !important;
  transform: translate(0, 0) scale(1) !important;
}

/* Flash only by filter. No transform/scale/rotate. */
#gameScreen .battlefield .entity.boss.boss-recoil-only .ship {
  filter:
    brightness(1.18)
    drop-shadow(0 0 7px rgba(255,255,255,.16))
    drop-shadow(0 0 12px currentColor)
    drop-shadow(0 10px 16px rgba(0,0,0,.35)) !important;
}


/* =======================================================================
   V95 — true boss recoil only + real laser SFX + image explosion effect
   ======================================================================= */

/* Boss hit: absolutely no class-based animation/scale during hit. */
#gameScreen .battlefield .entity.boss.target-hit-flash,
#gameScreen .battlefield .entity.boss.boss-heavy-hit,
#gameScreen .battlefield .entity.boss.boss-soft-hit,
#gameScreen .battlefield .entity.boss.boss-flash-only,
#gameScreen .battlefield .entity.boss.boss-recoil-only {
  animation: bossHover 2.4s ease-in-out infinite !important;
}

#gameScreen .battlefield .entity.boss.target-hit-flash .ship,
#gameScreen .battlefield .entity.boss.boss-heavy-hit .ship,
#gameScreen .battlefield .entity.boss.boss-soft-hit .ship,
#gameScreen .battlefield .entity.boss.boss-flash-only .ship,
#gameScreen .battlefield .entity.boss.boss-recoil-only .ship {
  animation: bossHover 2.4s ease-in-out infinite !important;
}

/* Ensure final boss hover has zero scale. */
@keyframes bossHover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Explosion effect from image asset. Size close to normal ship, not giant. */
#gameScreen .battlefield .explosion {
  width: 106px !important;
  height: 106px !important;
  border-radius: 0 !important;
  background: url('../assets/alien-math-attack/fx/explosion_v96.png?v=96') center / contain no-repeat !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 12px rgba(255,135,35,.55)) !important;
  opacity: .96;
  pointer-events: none !important;
  animation: explosionImageV95 .42s ease-out forwards !important;
  z-index: 38 !important;
}

#gameScreen .battlefield .explosion.explosion-big {
  width: 150px !important;
  height: 150px !important;
}

@keyframes explosionImageV95 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.52); }
  18% { opacity: .98; transform: translate(-50%, -50%) scale(.92); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}

@media (max-width: 920px) {
  #gameScreen .battlefield .explosion {
    width: 76px !important;
    height: 76px !important;
  }
  #gameScreen .battlefield .explosion.explosion-big {
    width: 112px !important;
    height: 112px !important;
  }
}


/* =======================================================================
   V96 EXACT FIX — explosion scene + real bomb/life-up audio assets only
   Scope: do not touch gameplay layout, labels, ship sizes, or boss recoil.
   ======================================================================= */

#gameScreen .battlefield .explosion {
  width: 104px !important;
  height: 104px !important;
  background: url('../assets/alien-math-attack/fx/explosion_v96.png?v=96') center / contain no-repeat !important;
  filter: drop-shadow(0 0 12px rgba(255,126,34,.48)) !important;
  mix-blend-mode: screen;
  pointer-events: none !important;
  z-index: 54 !important;
  animation: explosionImageV96 .46s ease-out forwards !important;
}

#gameScreen .battlefield .explosion.explosion-big {
  width: 148px !important;
  height: 148px !important;
}

#gameScreen .battlefield .explosion.explosion-base {
  width: 118px !important;
  height: 118px !important;
  z-index: 82 !important;
  animation-duration: .52s !important;
}

@keyframes explosionImageV96 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.50); }
  16% { opacity: .96; transform: translate(-50%, -50%) scale(.86); }
  72% { opacity: .86; transform: translate(-50%, -50%) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
}

@media (max-width: 920px) {
  #gameScreen .battlefield .explosion {
    width: 76px !important;
    height: 76px !important;
  }
  #gameScreen .battlefield .explosion.explosion-big {
    width: 112px !important;
    height: 112px !important;
  }
  #gameScreen .battlefield .explosion.explosion-base {
    width: 88px !important;
    height: 88px !important;
  }
}


/* =======================================================================
   V97 FIX — audio restore, boss warning, real explosion sprite
   Scope: only warning/audio/explosion visuals.
   ======================================================================= */

/* Red flashing WARNING banner when boss appears */
#gameScreen .warning-banner {
  display: grid !important;
  place-items: center !important;
  gap: 2px !important;
  min-width: min(520px, 78vw) !important;
  padding: 12px 22px !important;
  border-radius: 18px !important;
  border: 2px solid rgba(255,255,255,.72) !important;
  background:
    linear-gradient(180deg, rgba(255,55,55,.98), rgba(128,0,20,.96)) !important;
  color: #fff !important;
  box-shadow:
    0 0 18px rgba(255,47,47,.80),
    0 0 42px rgba(255,47,47,.38),
    inset 0 0 18px rgba(255,255,255,.18) !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.38), 0 0 12px rgba(255,255,255,.60) !important;
  animation: warningPulseV97 .22s steps(2, end) infinite !important;
  z-index: 80 !important;
}

#gameScreen .warning-banner span {
  display: block !important;
  font-size: clamp(1.2rem, 3.8vw, 2.2rem) !important;
  font-weight: 1000 !important;
  letter-spacing: .16em !important;
  line-height: 1 !important;
}

#gameScreen .warning-banner strong {
  display: block !important;
  font-size: clamp(.72rem, 1.55vw, .95rem) !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  line-height: 1.1 !important;
}

@keyframes warningPulseV97 {
  0%, 100% { opacity: 1; filter: brightness(1.22); transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .66; filter: brightness(.92); transform: translate(-50%, -50%) scale(1); }
}

/* Use uploaded explosion image; visible near ship size, not full-screen. */
#gameScreen .explosion {
  width: 96px !important;
  height: 96px !important;
  border-radius: 0 !important;
  background: url('../../assets/alien-math-attack/fx/explosion_v97.png?v=97') center / contain no-repeat !important;
  filter:
    drop-shadow(0 0 10px rgba(255,160,40,.70))
    drop-shadow(0 0 18px rgba(255,60,20,.38)) !important;
  opacity: .96 !important;
  animation: explosionSpriteV97 .62s ease-out forwards !important;
  pointer-events: none !important;
  z-index: 35 !important;
}

#gameScreen .explosion.explosion-big {
  width: 136px !important;
  height: 136px !important;
}

#gameScreen .explosion.explosion-base {
  width: 124px !important;
  height: 124px !important;
  z-index: 48 !important;
}

@media (max-width: 920px) {
  #gameScreen .explosion {
    width: 70px !important;
    height: 70px !important;
  }
  #gameScreen .explosion.explosion-big {
    width: 108px !important;
    height: 108px !important;
  }
  #gameScreen .explosion.explosion-base {
    width: 92px !important;
    height: 92px !important;
  }
}

@keyframes explosionSpriteV97 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.36) rotate(-3deg); }
  14% { opacity: .98; transform: translate(-50%, -50%) scale(.86) rotate(1deg); }
  45% { opacity: .92; transform: translate(-50%, -50%) scale(1.02) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18) rotate(2deg); }
}

/* Extra guard: boss hit must never scale because of warning/explosion patch. */
#gameScreen .battlefield .entity.boss,
#gameScreen .battlefield .entity.boss.target-hit-flash,
#gameScreen .battlefield .entity.boss.boss-soft-hit,
#gameScreen .battlefield .entity.boss.boss-heavy-hit {
  transform: translate(-50%, -50%) !important;
}
#gameScreen .battlefield .entity.boss .ship,
#gameScreen .battlefield .entity.boss.target-hit-flash .ship,
#gameScreen .battlefield .entity.boss.boss-soft-hit .ship,
#gameScreen .battlefield .entity.boss.boss-heavy-hit .ship {
  transform: none !important;
}


/* =======================================================================
   V98 EXACT WARNING + AUDIO PATH FIX
   Scope: warning/audio/explosion path only. Do not touch gameplay/layout.
   ======================================================================= */

#gameScreen .warning-banner {
  display: grid !important;
  place-items: center !important;
  min-width: min(380px, 72vw) !important;
  padding: 14px 24px !important;
  border-radius: 16px !important;
  border: 2px solid rgba(255,190,190,.95) !important;
  background: linear-gradient(180deg, rgba(145,0,0,.98), rgba(62,0,0,.98)) !important;
  color: #ff2222 !important;
  font-size: clamp(2.2rem, 7vw, 4rem) !important;
  font-weight: 1000 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 8px rgba(255,255,255,.80),
    0 0 16px rgba(255,20,20,.95),
    0 2px 0 rgba(0,0,0,.65) !important;
  box-shadow:
    0 0 18px rgba(255,0,0,.85),
    0 0 48px rgba(255,0,0,.40),
    inset 0 0 22px rgba(255,255,255,.14) !important;
  animation: warningBlinkV98 .18s steps(2, end) infinite !important;
  z-index: 90 !important;
}

#gameScreen .warning-banner span,
#gameScreen .warning-banner strong {
  display: none !important;
}

@keyframes warningBlinkV98 {
  0%, 100% { opacity: 1; filter: brightness(1.35); transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .48; filter: brightness(.72); transform: translate(-50%, -50%) scale(1); }
}

#gameScreen .explosion {
  background-image: url('/assets/alien-math-attack/fx/explosion_v98.png?v=98') !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}


/* =======================================================================
   V99 FINAL FIX — EXACT WARNING + ABSOLUTE AUDIO/EXPLOSION ASSET PATHS
   Scope: warning/audio/explosion only. No gameplay/layout/label/recoil changes.
   ======================================================================= */

#gameScreen .warning-banner {
  display: grid !important;
  place-items: center !important;
  min-width: min(360px, 70vw) !important;
  padding: 13px 24px !important;
  border-radius: 16px !important;
  border: 2px solid rgba(255, 150, 150, .95) !important;
  background: linear-gradient(180deg, rgba(165,0,0,.98), rgba(64,0,0,.98)) !important;
  color: #ff2a2a !important;
  font-size: clamp(2.25rem, 7vw, 4.2rem) !important;
  font-weight: 1000 !important;
  letter-spacing: .14em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 5px rgba(255,255,255,.9),
    0 0 15px rgba(255,0,0,1),
    0 2px 0 rgba(0,0,0,.68) !important;
  box-shadow:
    0 0 18px rgba(255,0,0,.9),
    0 0 46px rgba(255,0,0,.42),
    inset 0 0 20px rgba(255,255,255,.14) !important;
  animation: warningBlinkV99 .16s steps(2, end) infinite !important;
  z-index: 95 !important;
}

#gameScreen .warning-banner span,
#gameScreen .warning-banner strong {
  display: none !important;
}

@keyframes warningBlinkV99 {
  0%, 100% { opacity: 1; filter: brightness(1.42); transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .42; filter: brightness(.70); transform: translate(-50%, -50%) scale(1); }
}

#gameScreen .explosion,
#gameScreen .battlefield .explosion {
  width: 96px !important;
  height: 96px !important;
  border-radius: 0 !important;
  background: url('/assets/alien-math-attack/fx/explosion_v98.png') center / contain no-repeat !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 10px rgba(255,150,35,.70))
    drop-shadow(0 0 18px rgba(255,55,15,.38)) !important;
  mix-blend-mode: screen !important;
  opacity: .96 !important;
  pointer-events: none !important;
  z-index: 55 !important;
  animation: explosionSpriteV99 .62s ease-out forwards !important;
}

#gameScreen .explosion.explosion-big,
#gameScreen .battlefield .explosion.explosion-big {
  width: 136px !important;
  height: 136px !important;
}

#gameScreen .explosion.explosion-base,
#gameScreen .battlefield .explosion.explosion-base {
  width: 124px !important;
  height: 124px !important;
  z-index: 82 !important;
}

@media (max-width: 920px) {
  #gameScreen .explosion,
  #gameScreen .battlefield .explosion {
    width: 72px !important;
    height: 72px !important;
  }
  #gameScreen .explosion.explosion-big,
  #gameScreen .battlefield .explosion.explosion-big {
    width: 108px !important;
    height: 108px !important;
  }
  #gameScreen .explosion.explosion-base,
  #gameScreen .battlefield .explosion.explosion-base {
    width: 92px !important;
    height: 92px !important;
  }
}

@keyframes explosionSpriteV99 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.36) rotate(-3deg); }
  14% { opacity: .98; transform: translate(-50%, -50%) scale(.86) rotate(1deg); }
  48% { opacity: .92; transform: translate(-50%, -50%) scale(1.02) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18) rotate(2deg); }
}


/* =======================================================================
   V100 POLISH — subtle enemy drift + sector loop label support
   Scope: no gameplay/layout/audio/label/boss-recoil changes.
   ======================================================================= */
#gameScreen #hudDifficulty {
  white-space: nowrap;
}
@media (max-width: 920px) {
  #gameScreen #hudDifficulty {
    font-size: .72rem;
  }
}


/* =======================================================================
   V101 COMBO + LOCAL LEADERBOARD
   ======================================================================= */
.report-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.leaderboard-modal-card {
  width: min(720px, 100%);
}

.leaderboard-sub {
  margin: -8px 0 18px;
  color: #85dfff;
  font-weight: 800;
}

.leaderboard-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  max-height: min(54svh, 520px);
  overflow-y: auto;
  padding-right: 4px;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
}

.leaderboard-row.is-top {
  border-color: rgba(255, 217, 102, .55);
  background: linear-gradient(180deg, rgba(255,217,102,.16), rgba(255,255,255,.07));
  box-shadow: 0 0 18px rgba(255,217,102,.12);
}

.leaderboard-row > b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #061326;
  background: linear-gradient(180deg, #b7ff49, #53e4ff);
  font-weight: 1000;
}

.leaderboard-player strong,
.leaderboard-score strong {
  display: block;
  color: #fff;
  font-weight: 950;
}

.leaderboard-player span,
.leaderboard-score span,
.leaderboard-empty {
  color: #9edfff;
  font-weight: 700;
  font-size: .86rem;
}

.leaderboard-score {
  text-align: right;
}

.leaderboard-empty {
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
  text-align: center;
}

@media (max-width: 640px) {
  .leaderboard-row {
    grid-template-columns: 34px 1fr;
  }
  .leaderboard-score {
    grid-column: 2;
    text-align: left;
  }
}


/* =======================================================================
   V102 — start screen leaderboard position + avatar picker + leaderboard tabs
   Scope: UI only. No gameplay/audio/movement changes.
   ======================================================================= */

.hero-card {
  position: relative;
}

.leaderboard-corner-btn {
  position: absolute;
  top: clamp(18px, 3vw, 32px);
  right: clamp(18px, 3vw, 34px);
  z-index: 4;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  padding: 11px 18px;
  color: #061326;
  background: linear-gradient(180deg, #ffe78a, #ffb02e);
  box-shadow: 0 12px 28px rgba(255,176,46,.22), inset 0 1px 0 rgba(255,255,255,.55);
  font-weight: 950;
  letter-spacing: .01em;
}

.leaderboard-corner-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.pilot-field {
  grid-column: 1 / -1;
}

.pilot-name-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
}

.avatar-picker-button {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  border: 2px solid rgba(92,234,255,.58);
  background: rgba(255,255,255,.08);
  padding: 5px;
  box-shadow: inset 0 0 18px rgba(52,231,255,.10), 0 0 18px rgba(52,231,255,.12);
}

.avatar-picker-button img,
.avatar-option img,
.leaderboard-avatar {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(38px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(94,231,255,.18);
  border-radius: 20px;
  background: rgba(255,255,255,.045);
}

.avatar-option {
  aspect-ratio: 1;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(4,14,35,.72);
  padding: 4px;
  opacity: .78;
  transition: .16s ease;
}

.avatar-option:hover,
.avatar-option.active {
  opacity: 1;
  border-color: rgba(183,255,73,.82);
  box-shadow: 0 0 16px rgba(183,255,73,.22), inset 0 0 16px rgba(52,231,255,.10);
}

.leaderboard-tabs-wrap {
  display: grid;
  gap: 10px;
  margin: 14px 0 12px;
}

.leaderboard-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.leaderboard-tabs button {
  border: 1px solid rgba(94,231,255,.25);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: #c9efff;
  font-weight: 900;
  padding: 9px 14px;
}

.leaderboard-tabs button.active {
  color: #061326;
  border-color: rgba(183,255,73,.72);
  background: linear-gradient(180deg, #b7ff49, #53e4ff);
  box-shadow: 0 0 18px rgba(83,228,255,.18);
}

.leaderboard-row {
  grid-template-columns: 42px 46px 1fr auto;
}

.leaderboard-avatar {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  padding: 3px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(94,231,255,.25);
}

@media (max-width: 720px) {
  .leaderboard-corner-btn {
    top: 16px;
    right: 16px;
    padding: 9px 13px;
    font-size: .86rem;
  }
  .game-logo-mini {
    margin-top: 40px;
  }
  .pilot-name-row {
    grid-template-columns: 64px 1fr;
  }
  .avatar-picker-button {
    width: 64px;
    height: 64px;
  }
  .avatar-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .leaderboard-row {
    grid-template-columns: 34px 42px 1fr;
  }
  .leaderboard-score {
    grid-column: 3;
    text-align: left;
  }
}


/* =======================================================================
   V103 UI FIX — avatar picker popup + survival-only leaderboard + intro audio
   ======================================================================= */

/* Avatar choices should not clutter the start screen. They pop up only after pressing the avatar image. */
#startScreen .pilot-field {
  position: relative !important;
}

#startScreen .avatar-picker-button {
  cursor: pointer !important;
}

#startScreen .avatar-grid {
  display: none !important;
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + 10px) !important;
  width: min(420px, calc(100vw - 48px)) !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  grid-template-columns: repeat(5, minmax(54px, 1fr)) !important;
  gap: 10px !important;
  padding: 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(96, 216, 255, .42) !important;
  background: linear-gradient(180deg, rgba(6,18,44,.98), rgba(8,12,34,.98)) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.50), 0 0 25px rgba(56,216,255,.20) !important;
  z-index: 60 !important;
}

#startScreen .avatar-grid.is-open {
  display: grid !important;
}

#startScreen .avatar-option {
  width: 100% !important;
  aspect-ratio: 1 !important;
}

/* Leaderboard now ranks Survival only; no Practice tab needed. */
#leaderboardModeTabs,
.leaderboard-mode-tabs {
  display: none !important;
}

.leaderboard-modal-card .leaderboard-tabs-wrap {
  justify-content: center !important;
}

@media (max-width: 720px) {
  #startScreen .avatar-grid {
    grid-template-columns: repeat(4, minmax(52px, 1fr)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}


/* V104 Online Leaderboard status label */
.leaderboard-source {
  margin-top: 10px;
  text-align: center;
  color: rgba(198, 239, 255, .72);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
}