:root {
  color-scheme: dark;
  --ink: #ffffff;
  --muted: #d8d7ff;
  --panel: rgba(17, 18, 55, 0.78);
  --panel-strong: rgba(15, 18, 48, 0.94);
  --line: rgba(255, 255, 255, 0.2);
  --pink: #ff62cf;
  --cyan: #5fe8ff;
  --gold: #ffd75e;
  --green: #7dff91;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  background: #10143a;
  color: var(--ink);
  overflow-x: hidden;
}

button {
  font: inherit;
}

.app,
.screen {
  min-height: 100vh;
}

.screen {
  display: none;
  position: relative;
  isolation: isolate;
  padding: 22px;
}

.screen.is-active {
  display: block;
}

.screen-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
}

.screen-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(95, 232, 255, 0.24), transparent 30%),
    linear-gradient(90deg, rgba(9, 12, 43, 0.82), rgba(34, 10, 55, 0.62));
}

.classroom-bg {
  background-image: url("Assets/ChatGPT Image May 31, 2026, 03_59_26 PM (4).png");
}

.city-bg {
  background-image: url("Assets/ChatGPT Image May 31, 2026, 03_59_26 PM (5).png");
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1160px;
  margin: 0 auto;
}

.brand-mark,
.spark-score {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 13, 45, 0.5);
  box-shadow: var(--shadow);
  font-weight: 900;
}

.spark-score {
  color: var(--gold);
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(320px, 1.14fr);
  gap: 28px;
  align-items: end;
  max-width: 1160px;
  min-height: calc(100vh - 90px);
  margin: 0 auto;
  padding: 42px 0 18px;
}

.intro-copy {
  max-width: 560px;
  padding-bottom: 32px;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.52);
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 16px;
  font-size: clamp(2.25rem, 7vw, 5rem);
  line-height: 0.96;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1;
}

.intro-copy p:last-child {
  max-width: 42rem;
  color: var(--muted);
  font-size: clamp(1.08rem, 2.5vw, 1.35rem);
  line-height: 1.45;
}

.hero-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.hero-card,
.level-card {
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(20, 20, 65, 0.72);
  color: white;
  box-shadow: var(--shadow);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.hero-card:hover,
.level-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(95, 232, 255, 0.18), var(--shadow);
}

.hero-card {
  min-height: 520px;
  overflow: hidden;
  padding: 16px 12px 0;
}

.hero-card img {
  display: block;
  width: 100%;
  height: 450px;
  object-fit: contain;
  object-position: bottom center;
}

.hero-card span {
  display: block;
  padding: 12px;
  color: var(--gold);
  font-size: 1.5rem;
  font-weight: 900;
}

.icon-button,
.ghost-button,
.primary-button,
.controls button,
.answer-grid button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(17, 20, 58, 0.82);
  color: white;
  cursor: pointer;
}

.icon-button {
  width: 46px;
  font-size: 2rem;
  line-height: 1;
}

.ghost-button,
.primary-button {
  padding: 0 16px;
  font-weight: 900;
}

.primary-button {
  background: linear-gradient(135deg, var(--pink), #7c67ff 55%, var(--cyan));
}

.small-status {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.95rem;
}

.level-content {
  max-width: 1160px;
  margin: 0 auto;
  padding-top: 38px;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 18px;
}

.level-card {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  padding: 0;
  text-align: left;
}

.level-card img {
  display: block;
  width: 100%;
  height: 310px;
  object-fit: cover;
}

.level-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(8, 9, 32, 0.86));
  pointer-events: none;
}

.level-info {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 1;
}

.level-info strong,
.level-info small {
  display: block;
}

.level-info strong {
  font-size: 1.45rem;
}

.level-info small {
  color: var(--muted);
  font-size: 1rem;
}

.completed-stamp {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 2;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 8px;
  background: rgba(2, 16, 24, 0.72);
  color: var(--green);
  font-weight: 900;
  text-align: center;
  backdrop-filter: blur(8px);
}

.is-locked {
  cursor: default;
  filter: saturate(0.55);
  opacity: 0.72;
}

.is-locked:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.28);
}

.game-screen {
  background:
    radial-gradient(circle at 80% 12%, rgba(255, 98, 207, 0.22), transparent 28%),
    linear-gradient(135deg, #0e173d, #281345 58%, #0e2a3f);
}

.moon-screen {
  overflow: hidden;
  background:
    linear-gradient(rgba(9, 11, 39, 0.62), rgba(18, 10, 47, 0.82)),
    url("Assets/moon-stage-level.png") center / cover;
}

.challenge-screen {
  overflow: hidden;
  background:
    linear-gradient(rgba(9, 11, 39, 0.68), rgba(18, 10, 47, 0.86)),
    var(--challenge-bg) center / cover;
}

.arcade-screen {
  overflow: hidden;
  background:
    linear-gradient(rgba(9, 11, 39, 0.66), rgba(18, 10, 47, 0.86)),
    var(--arcade-bg) center / cover;
}

.moon-bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.2), transparent 18%),
    radial-gradient(circle at 75% 26%, rgba(95, 232, 255, 0.18), transparent 24%);
  pointer-events: none;
}

.game-shell {
  max-width: 1200px;
  margin: 0 auto;
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.game-header h2 {
  margin-bottom: 4px;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
}

.game-header p {
  margin-bottom: 0;
  color: var(--muted);
}

.hero-badge {
  min-width: 118px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--gold);
  font-weight: 900;
  text-align: center;
}

.play-area {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 270px;
  gap: 18px;
  align-items: start;
}

.moon-play {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 148px);
}

.moon-stage-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, 0.4fr) minmax(260px, 0.6fr);
  gap: 22px;
  align-items: center;
  width: min(100%, 980px);
  min-height: 560px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 92%, rgba(255, 215, 94, 0.22), transparent 34%),
    rgba(12, 15, 48, 0.76);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.moon-hero {
  align-self: end;
  display: grid;
  place-items: end center;
  min-height: 410px;
}

.moon-hero img {
  width: min(100%, 260px);
  max-height: 430px;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.38));
}

.constellation {
  position: absolute;
  top: 24px;
  right: 26px;
  display: flex;
  gap: 12px;
}

.constellation span {
  display: grid;
  place-items: center;
  width: 48px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(95, 232, 255, 0.16);
  color: var(--gold);
  font-size: 1.45rem;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(95, 232, 255, 0.38);
}

.moon-question {
  align-self: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(9, 12, 42, 0.78);
}

.moon-question span,
.moon-question p {
  color: var(--muted);
  font-weight: 900;
}

.moon-question h3 {
  margin: 10px 0 8px;
  color: var(--gold);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
}

.moon-answers {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 14px;
}

.moon-answer {
  min-height: 104px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 215, 94, 0.56), transparent 31%),
    rgba(18, 20, 58, 0.86);
  color: white;
  cursor: pointer;
  font-size: 2.2rem;
  font-weight: 900;
  box-shadow: 0 0 24px rgba(255, 215, 94, 0.24);
}

.moon-answer:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.moon-answer:disabled {
  cursor: default;
  opacity: 0.78;
  transform: none;
}

.moon-stars {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
}

.moon-star {
  display: grid;
  place-items: center;
  min-height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.28);
  font-weight: 900;
}

.moon-star.is-lit {
  color: var(--gold);
  background: rgba(255, 215, 94, 0.18);
  box-shadow: 0 0 18px rgba(255, 215, 94, 0.48);
}

.moon-note {
  position: absolute;
  right: 28%;
  bottom: 28%;
  color: #75ff85;
  font-size: 3rem;
  font-weight: 900;
  filter: drop-shadow(0 0 12px rgba(117, 255, 133, 0.9));
  animation: moonNote 720ms ease forwards;
}

.challenge-play {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 148px);
}

.challenge-arena {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(280px, 1fr) 190px;
  gap: 18px;
  align-items: end;
  width: min(100%, 1040px);
  min-height: 560px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 88%, rgba(255, 215, 94, 0.18), transparent 35%),
    rgba(9, 12, 42, 0.78);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.challenge-demon,
.challenge-hero img {
  justify-self: center;
  max-width: 100%;
  max-height: 230px;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.34));
}

.challenge-demon {
  align-self: center;
}

.challenge-demon.is-hit {
  animation: challengeHit 650ms ease;
}

.challenge-demon.is-wrong {
  animation: challengeWrong 360ms ease;
}

.challenge-hero {
  grid-column: 2;
  display: grid;
  place-items: center;
  align-self: end;
}

.challenge-panel {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 12, 42, 0.82);
}

.challenge-panel span,
.challenge-panel p {
  color: var(--muted);
  font-weight: 900;
}

.challenge-panel h3 {
  margin: 10px 0 12px;
  color: var(--gold);
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1;
}

.challenge-answers {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
}

.challenge-answer {
  min-height: 84px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(18, 20, 58, 0.9);
  color: white;
  cursor: pointer;
  font-size: clamp(1.35rem, 3vw, 2.2rem);
  font-weight: 900;
  box-shadow: 0 0 22px rgba(95, 232, 255, 0.18);
}

.challenge-answer:hover {
  border-color: var(--cyan);
  transform: translateY(-3px);
}

.challenge-answer:disabled {
  cursor: default;
  opacity: 0.78;
  transform: none;
}

.challenge-arena.is-demonDj {
  grid-template-columns: 170px minmax(320px, 1fr) 170px;
  grid-template-rows: 220px auto;
  align-items: end;
  min-height: 720px;
  padding: 22px 24px;
}

.is-demonDj .challenge-hero {
  display: none;
}

.is-demonDj .challenge-demon {
  grid-row: 1;
  align-self: center;
  max-height: 205px;
}

.is-demonDj .challenge-demon-left {
  grid-column: 1;
  justify-self: center;
}

.is-demonDj .challenge-demon-right {
  grid-column: 3;
  justify-self: center;
}

.challenge-demon.is-dancing {
  animation: demonDjDance 650ms ease-in-out infinite;
}

.is-demonDj .challenge-panel {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  padding: 18px 20px 20px;
  background:
    radial-gradient(circle at 50% 84%, rgba(95, 232, 255, 0.16), transparent 36%),
    rgba(10, 12, 42, 0.82);
}

.is-demonDj .challenge-panel h3 {
  margin: 6px 0 10px;
  max-width: 100%;
  font-size: clamp(1.45rem, 3vw, 2.45rem);
  line-height: 1.08;
}

.dj-answer-deck {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(118px, 1fr));
  gap: clamp(10px, 3vw, 24px);
  min-height: 430px;
  padding: 18px 11% 165px;
  align-items: start;
  justify-items: center;
}

.dj-booth {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: min(86%, 680px);
  max-height: 250px;
  height: auto;
  object-fit: contain;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.36));
}

.dj-record {
  position: relative;
  z-index: 2;
  justify-self: center;
  display: grid;
  place-items: center;
  width: clamp(104px, 11vw, 142px);
  min-height: auto;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.dj-record img {
  width: 100%;
  height: auto;
  filter:
    hue-rotate(calc(var(--record-hue) - 316deg))
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.42));
  pointer-events: none;
  user-select: none;
}

.dj-record span {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 58%;
  min-height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(9, 12, 42, 0.88);
  color: var(--gold);
  font-size: clamp(1rem, 2.1vw, 1.55rem);
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 10px hsla(var(--record-hue), 100%, 72%, 0.9);
}

.dj-record:hover:not(:disabled) {
  transform: translateY(-8px) rotate(-3deg);
}

.dj-record.is-playing img {
  animation: djRecordSpin 650ms linear infinite;
}

.dj-record.is-playing {
  filter: drop-shadow(0 0 22px rgba(117, 255, 133, 0.74));
  opacity: 1;
}

.dj-record.is-scratch {
  animation: djRecordScratch 420ms ease;
}

.challenge-arena.is-crystalBridge {
  grid-template-columns: 150px minmax(360px, 1fr) 150px;
  grid-template-rows: 190px auto;
  align-items: end;
  min-height: 700px;
}

.is-crystalBridge .challenge-hero {
  grid-row: 1;
  align-self: end;
}

.is-crystalBridge .challenge-demon {
  grid-row: 1;
  align-self: end;
  max-height: 180px;
}

.is-crystalBridge .challenge-panel {
  grid-column: 1 / -1;
  grid-row: 2;
  background:
    radial-gradient(circle at 50% 58%, rgba(95, 232, 255, 0.17), transparent 35%),
    rgba(10, 12, 42, 0.82);
}

.is-crystalBridge .challenge-panel h3 {
  margin: 6px 0 12px;
  font-size: clamp(1.45rem, 3vw, 2.45rem);
  line-height: 1.08;
}

.crystal-bridge-game {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 14px;
  align-items: end;
}

.crystal-bridge-stage {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 74px;
  gap: 8px;
  align-items: center;
  min-height: 230px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(95, 232, 255, 0.1), rgba(255, 98, 207, 0.08)),
    rgba(7, 10, 38, 0.58);
  overflow: hidden;
}

.bridge-dock {
  display: grid;
  place-items: center;
  min-height: 76px;
  border: 1px solid rgba(255, 215, 94, 0.42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 215, 94, 0.42), transparent 38%),
    rgba(18, 20, 58, 0.76);
  color: var(--gold);
  font-weight: 1000;
}

.bridge-path {
  position: relative;
  min-height: 150px;
}

.bridge-empty,
.bridge-built img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100%, 720px);
  max-height: 146px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.bridge-empty {
  opacity: 0.16;
  filter: grayscale(0.8) brightness(0.82);
}

.bridge-built {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--bridge-fill)) 0 0);
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.36));
  transition: clip-path 720ms ease;
}

.crystal-bridge-stage.is-building .bridge-built {
  animation: bridgeGlow 760ms ease;
}

.bridge-steps {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 8px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 5px;
}

.bridge-steps span {
  min-height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
}

.bridge-steps span.is-lit {
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(95, 232, 255, 0.72);
}

.bridge-steps span.is-next {
  background: rgba(255, 215, 94, 0.45);
}

.crystal-choice {
  position: relative;
  min-height: 92px;
  border: 1px solid hsla(var(--crystal-hue), 100%, 74%, 0.52);
  background:
    linear-gradient(135deg, hsla(var(--crystal-hue), 100%, 62%, 0.32), rgba(18, 20, 58, 0.9) 58%),
    rgba(18, 20, 58, 0.9);
  overflow: hidden;
}

.crystal-choice::before {
  content: "";
  position: absolute;
  inset: 10px 18px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(255, 255, 255, 0.34) 43% 45%, transparent 46%),
    hsla(var(--crystal-hue), 100%, 62%, 0.18);
  clip-path: polygon(50% 0, 100% 32%, 82% 100%, 18% 100%, 0 32%);
}

.crystal-choice span {
  position: relative;
  z-index: 1;
}

.crystal-choice.is-placing {
  animation: crystalChoicePlace 650ms ease forwards;
}

.crystal-choice.is-cracked {
  animation: crystalCrack 420ms ease;
}

.challenge-arena.is-balanceBoss {
  grid-template-columns: 150px minmax(360px, 1fr) 150px;
  grid-template-rows: 190px auto;
  align-items: end;
  min-height: 700px;
}

.is-balanceBoss .challenge-hero {
  grid-row: 1;
  align-self: end;
}

.is-balanceBoss .challenge-demon {
  grid-row: 1;
  align-self: end;
  max-height: 178px;
}

.is-balanceBoss .challenge-panel {
  grid-column: 1 / -1;
  grid-row: 2;
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 215, 94, 0.16), transparent 34%),
    rgba(10, 12, 42, 0.82);
}

.is-balanceBoss .challenge-panel h3 {
  margin: 6px 0 12px;
  font-size: clamp(1.45rem, 3vw, 2.45rem);
  line-height: 1.08;
}

.balance-game {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 14px;
  align-items: end;
}

.balance-stage {
  --balance-tilt: 0deg;
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 92px;
  gap: 12px;
  align-items: center;
  min-height: 270px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 215, 94, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 98, 207, 0.08), rgba(95, 232, 255, 0.1)),
    rgba(7, 10, 38, 0.58);
  overflow: hidden;
}

.balance-target {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 98px;
  border: 1px solid rgba(255, 215, 94, 0.42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 215, 94, 0.38), transparent 40%),
    rgba(18, 20, 58, 0.78);
  color: white;
  font-weight: 900;
}

.balance-target span {
  color: var(--muted);
  font-size: 0.86rem;
}

.balance-target strong {
  color: var(--gold);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1;
}

.balance-beam-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 190px;
}

.balance-beam-img {
  width: min(100%, 700px);
  max-height: 190px;
  object-fit: contain;
  transform: rotate(var(--balance-tilt));
  transform-origin: 50% 55%;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.38));
  transition: transform 720ms cubic-bezier(0.18, 0.82, 0.25, 1);
  pointer-events: none;
  user-select: none;
}

.balance-glow {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 96px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 94, 0.45), transparent 68%);
  transform: translate(-50%, -50%);
  opacity: 0.55;
}

.balance-stage.is-level .balance-glow {
  animation: balanceGlow 760ms ease;
}

.balance-stage.is-wobbling .balance-beam-img {
  animation: balanceWobble 520ms ease;
}

.balance-weight {
  position: relative;
  min-height: 94px;
  border: 1px solid hsla(var(--weight-hue), 100%, 74%, 0.54);
  background:
    radial-gradient(circle at 50% 30%, hsla(var(--weight-hue), 100%, 62%, 0.34), transparent 38%),
    rgba(18, 20, 58, 0.9);
  overflow: hidden;
}

.balance-weight::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 72px;
  height: 42px;
  border-radius: 50% 50% 12px 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.32), transparent 44%),
    hsla(var(--weight-hue), 100%, 58%, 0.38);
  transform: translateX(-50%);
  box-shadow: inset 0 0 0 2px hsla(var(--weight-hue), 100%, 78%, 0.35);
}

.balance-weight span {
  position: relative;
  z-index: 1;
}

.balance-weight.is-balancing {
  animation: balanceWeightDrop 650ms ease forwards;
}

.balance-weight.is-heavy {
  animation: balanceWeightWrong 520ms ease;
}

.challenge-progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18px, 1fr));
  gap: 7px;
  margin-top: 14px;
}

.challenge-dot {
  min-height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.challenge-dot.is-lit {
  background: var(--gold);
  box-shadow: 0 0 16px rgba(255, 215, 94, 0.68);
}

.challenge-note {
  position: absolute;
  left: 48%;
  top: 38%;
  color: #75ff85;
  font-size: 3.2rem;
  font-weight: 900;
  filter: drop-shadow(0 0 12px rgba(117, 255, 133, 0.9));
  animation: challengeNote 650ms ease forwards;
}

.arcade-play {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 148px);
}

.arcade-stage {
  position: relative;
  display: grid;
  grid-template-columns: 170px minmax(280px, 1fr);
  gap: 18px;
  align-items: center;
  width: min(100%, 1040px);
  min-height: 580px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 88%, rgba(255, 215, 94, 0.18), transparent 34%),
    rgba(9, 12, 42, 0.78);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.arcade-stage.is-wrong {
  animation: challengeWrong 360ms ease;
}

.arcade-hero-image {
  align-self: end;
  justify-self: center;
  max-width: 150px;
  max-height: 250px;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.34));
}

.arcade-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 12, 42, 0.82);
}

.arcade-panel span,
.arcade-panel p {
  color: var(--muted);
  font-weight: 900;
}

.arcade-panel h3 {
  margin: 10px 0 8px;
  color: var(--gold);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
}

.arcade-board,
.arcade-controls,
.arcade-stage > .challenge-progress {
  grid-column: 1 / -1;
}

.falling-block {
  display: grid;
  place-items: center;
  width: min(70%, 360px);
  min-height: 96px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 98, 207, 0.92), rgba(95, 232, 255, 0.84));
  color: white;
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 900;
  box-shadow: 0 0 24px rgba(95, 232, 255, 0.42);
  animation: blockDrop 1.35s ease-in-out infinite alternate;
}

.block-stack {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 12px;
}

.block-lane,
.crossing-pad,
.runner-lane {
  min-height: 90px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(18, 20, 58, 0.9);
  color: white;
  cursor: pointer;
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  font-weight: 900;
  box-shadow: 0 0 22px rgba(95, 232, 255, 0.18);
}

.block-lane {
  display: grid;
  align-items: end;
  justify-items: center;
  gap: 6px;
  padding: 10px;
}

.block-lane span {
  order: 2;
}

.block-lane i {
  display: block;
  width: 70%;
  min-height: 12px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--gold), var(--pink));
}

.crossing-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(42px, 1fr));
  gap: 8px;
  max-width: 560px;
  margin: 0 auto;
}

.crossing-cell {
  display: grid;
  place-items: center;
  min-height: 62px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(95, 232, 255, 0.13);
}

.crossing-cell.has-beat::before {
  content: "♪";
  color: var(--pink);
  font-size: 1.6rem;
  font-weight: 900;
  animation: laneBeat 1.1s ease-in-out infinite alternate;
}

.crossing-cell img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: white;
  box-shadow: 0 0 14px rgba(95, 232, 255, 0.7);
}

.is-crossing .arcade-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 12px;
}

.runner-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 16px;
  min-height: 260px;
  perspective: 700px;
}

.runner-lane {
  display: grid;
  place-items: start center;
  padding-top: 28px;
  background:
    linear-gradient(180deg, rgba(95, 232, 255, 0.22), rgba(255, 98, 207, 0.1)),
    rgba(18, 20, 58, 0.9);
  transform: rotateX(18deg);
  animation: runnerPulse 900ms ease-in-out infinite alternate;
}

.runner-lane span {
  display: grid;
  place-items: center;
  width: 76px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(9, 10, 33, 0.82);
  color: var(--gold);
}

.runner-lane img {
  width: 70px;
  height: 70px;
  margin-top: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: white;
  box-shadow: 0 0 18px rgba(95, 232, 255, 0.8);
  animation: laneJump 620ms ease;
}

.runner-lane.is-selected {
  border-color: var(--gold);
}

.shape-drop-board {
  display: grid;
  place-items: center;
  gap: 14px;
  min-height: 260px;
}

.shape-slot {
  display: grid;
  place-items: center;
  width: 150px;
  aspect-ratio: 1;
  border: 4px dashed rgba(255, 255, 255, 0.58);
  border-radius: 8px;
  color: var(--gold);
  font-size: 2.2rem;
  font-weight: 900;
  box-shadow: inset 0 0 22px rgba(95, 232, 255, 0.26);
}

.shape-shadow {
  color: var(--gold);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
}

.shape-piece,
.tower-block-choice,
.ingredient-orb,
.crossing-pad {
  min-height: 84px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(18, 20, 58, 0.9);
  color: white;
  cursor: pointer;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 900;
}

.shape-piece.is-dropping {
  animation: shapeDrop 650ms ease forwards;
}

.note-lanes,
.gear-board,
.balloon-sky,
.train-tracks {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 14px;
}

.falling-note {
  min-height: 220px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 8px;
  background: rgba(18, 20, 58, 0.82);
  color: white;
  cursor: pointer;
  font-weight: 900;
  overflow: hidden;
}

.falling-note span {
  display: block;
  color: #75ff85;
  font-size: 3.2rem;
  animation: noteFall 1.25s ease-in-out infinite;
  animation-delay: var(--delay);
}

.falling-note strong {
  display: block;
  color: var(--gold);
  font-size: 2rem;
}

.falling-note.is-caught {
  border-color: #75ff85;
}

.cannon-game {
  --aim-angle: 0deg;
  position: relative;
  min-height: 540px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 92%, rgba(255, 215, 94, 0.22), transparent 34%),
    radial-gradient(circle at 16% 18%, rgba(95, 232, 255, 0.24), transparent 28%),
    rgba(7, 10, 38, 0.62);
  overflow: hidden;
}

.cannon-game::before {
  content: "";
  position: absolute;
  inset: 38% -12% -18%;
  background:
    linear-gradient(90deg, transparent, rgba(255, 98, 207, 0.22), transparent),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 72px);
  transform: perspective(440px) rotateX(56deg);
  transform-origin: bottom;
}

.cannon-target-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: clamp(10px, 3vw, 30px);
  align-items: start;
  justify-items: center;
}

.cannon-target {
  display: grid;
  place-items: center;
  width: clamp(112px, 13vw, 176px);
  aspect-ratio: 1;
  min-height: auto;
  border: 3px solid hsla(var(--target-hue), 100%, 72%, 0.78);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, hsla(var(--target-hue), 100%, 62%, 0.34), rgba(12, 15, 54, 0.95) 64%),
    conic-gradient(from 12deg, hsla(var(--target-hue), 100%, 62%, 0.95), #fff171, hsla(var(--target-hue), 100%, 62%, 0.95));
  color: white;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 8px rgba(9, 12, 42, 0.92),
    0 0 24px hsla(var(--target-hue), 100%, 62%, 0.48);
}

.cannon-target span {
  display: grid;
  place-items: center;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(9, 12, 42, 0.92);
  color: #fff171;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 1000;
  text-shadow: 0 0 12px hsla(var(--target-hue), 100%, 72%, 0.9);
}

.cannon-target:hover:not(:disabled) {
  transform: translateY(-4px) scale(1.03);
}

.cannon-target:disabled {
  cursor: default;
}

.cannon-target.is-hit {
  animation: targetHit 650ms ease;
}

.cannon-dock {
  position: absolute;
  left: 50%;
  bottom: -6px;
  z-index: 3;
  width: min(28vw, 250px);
  transform: translateX(-50%);
}

.cannon-pivot {
  transform: rotate(var(--aim-angle));
  transform-origin: 50% 84%;
  transition: transform 170ms ease-out;
}

.cannon-pivot img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.42));
  user-select: none;
  pointer-events: none;
}

.cannon-projectile {
  position: absolute;
  z-index: 4;
  width: 86px;
  aspect-ratio: 1;
  background: url("Assets/star-cannon-projectile.png") center / contain no-repeat;
  transform: translate(-50%, -50%) scale(0.55);
  opacity: 0;
  pointer-events: none;
}

.cannon-projectile.is-fired {
  animation: cannonShot 620ms cubic-bezier(0.18, 0.72, 0.24, 1) forwards;
}

.cannon-game.is-missed .cannon-pivot {
  animation: cannonKick 300ms ease;
}

.gear-choice,
.memory-card,
.balloon-choice,
.train-track {
  min-height: 112px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(18, 20, 58, 0.9);
  color: white;
  cursor: pointer;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 900;
}

.memory-card {
  transform-style: preserve-3d;
}

.memory-card span {
  display: block;
  color: var(--gold);
  font-size: 2rem;
}

.memory-card strong {
  display: none;
}

.memory-card.is-flipped {
  animation: cardFlip 420ms ease;
}

.memory-card.is-flipped span {
  display: none;
}

.memory-card.is-flipped strong {
  display: block;
}

.tower-stack-game {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: end;
  min-height: 250px;
  gap: 6px;
}

.tower-stack-game div {
  display: grid;
  place-items: center;
  width: min(80%, 360px);
  min-height: 26px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  color: var(--gold);
}

.tower-block-choice.is-stacked {
  animation: shapeDrop 650ms ease forwards;
}

.gear-choice span {
  display: block;
  color: var(--gold);
  font-size: 3rem;
}

.gear-choice.is-spinning span {
  animation: gearSpin 650ms ease;
}

.potion-lab {
  position: relative;
  display: grid;
  grid-template-rows: minmax(190px, 1fr) auto;
  gap: 18px;
  min-height: 520px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 98, 207, 0.18), transparent 34%),
    radial-gradient(circle at 50% 85%, rgba(95, 232, 255, 0.12), transparent 40%),
    rgba(7, 10, 38, 0.58);
  overflow: hidden;
}

.potion-cauldron {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 230px;
}

.potion-cauldron img {
  width: min(52vw, 380px);
  max-height: 280px;
  object-fit: contain;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.38));
  pointer-events: none;
  user-select: none;
}

.potion-bottles {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: clamp(12px, 3vw, 26px);
  align-items: end;
}

.potion-bottle {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 210px;
  border: 1px solid hsla(var(--bottle-hue), 100%, 76%, 0.54);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 62%, hsla(var(--bottle-hue), 100%, 62%, 0.22), transparent 40%),
    rgba(18, 20, 58, 0.72);
  cursor: pointer;
  overflow: visible;
  box-shadow: 0 0 20px hsla(var(--bottle-hue), 100%, 62%, 0.22);
}

.potion-bottle img {
  width: min(68%, 148px);
  height: auto;
  filter:
    hue-rotate(calc(var(--bottle-hue) - 318deg))
    drop-shadow(0 16px 20px rgba(0, 0, 0, 0.36));
  pointer-events: none;
  user-select: none;
}

.potion-bottle span {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  min-width: 70px;
  min-height: 48px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(9, 12, 42, 0.88);
  color: var(--gold);
  font-size: clamp(1.6rem, 3.4vw, 2.55rem);
  font-weight: 1000;
  text-shadow: 0 0 10px hsla(var(--bottle-hue), 100%, 72%, 0.9);
}

.potion-bottle:hover:not(:disabled) {
  transform: translateY(-6px) scale(1.02);
}

.potion-bottle:disabled {
  cursor: default;
}

.potion-bottle.is-pouring {
  animation: bottlePour 820ms ease forwards;
  transform-origin: 50% 92%;
}

.potion-bottle.is-exploding {
  animation: potionBottleShake 360ms ease;
}

.potion-explosion {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 4;
  width: min(135%, 230px);
  transform: translate(-50%, -50%) scale(0.35);
  animation: potionExplosion 760ms ease forwards;
  pointer-events: none;
}

.potion-note-burst {
  position: absolute;
  left: 50%;
  bottom: 48%;
  z-index: 4;
  width: min(70vw, 360px);
  transform: translateX(-50%) scale(0.35);
  opacity: 0;
  animation: potionNotesRise 900ms ease forwards;
  pointer-events: none;
}

.balloon-choice {
  min-height: 140px;
  border-radius: 50% 50% 46% 46%;
  background: linear-gradient(180deg, rgba(255, 98, 207, 0.88), rgba(95, 232, 255, 0.82));
  animation: balloonFloat 1.3s ease-in-out infinite alternate;
  animation-delay: var(--float);
}

.balloon-choice.is-popped {
  animation: balloonPop 420ms ease forwards;
}

.train-track {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 180px;
  background:
    linear-gradient(180deg, rgba(95, 232, 255, 0.18), rgba(255, 215, 94, 0.08)),
    rgba(18, 20, 58, 0.9);
}

.train-track::after {
  content: "";
  position: absolute;
  bottom: 22px;
  left: 16px;
  right: 16px;
  height: 8px;
  border-radius: 999px;
  background: var(--cyan);
}

.train-track i {
  position: absolute;
  bottom: 38px;
  width: 58px;
  height: 34px;
  border-radius: 8px;
  background: var(--gold);
  box-shadow: 0 0 16px rgba(255, 215, 94, 0.65);
}

.train-track.is-routed i,
.train-track.is-routed::before {
  animation: trainMove 650ms ease forwards;
}

.arcade-note {
  position: absolute;
  left: 52%;
  top: 46%;
  color: #75ff85;
  font-size: 3.2rem;
  font-weight: 900;
  filter: drop-shadow(0 0 12px rgba(117, 255, 133, 0.9));
  animation: arcadeNote 650ms ease forwards;
}

.maze {
  display: grid;
  grid-template-columns: repeat(15, minmax(24px, 1fr));
  aspect-ratio: 1 / 1;
  width: min(100%, 780px);
  margin: 0 auto;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(rgba(12, 16, 55, 0.74), rgba(12, 16, 55, 0.84)),
    url("Assets/math-maze-level.png") center / cover;
  box-shadow: var(--shadow);
}

.cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(22, 28, 83, 0.62);
}

.wall {
  background: rgba(10, 12, 38, 0.9);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.05);
}

.path {
  background: rgba(96, 88, 190, 0.45);
}

.gate {
  background: linear-gradient(135deg, rgba(255, 98, 207, 0.7), rgba(95, 232, 255, 0.64));
}

.gate::before {
  content: "?";
  display: grid;
  place-items: center;
  width: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(9, 10, 33, 0.78);
  color: var(--gold);
  font-size: clamp(1rem, 3vw, 1.7rem);
  font-weight: 900;
}

.gate.open {
  background: rgba(125, 255, 145, 0.45);
}

.gate.open::before {
  content: "✓";
  color: var(--green);
}

.monster {
  position: absolute;
  z-index: 2;
  width: 74%;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background:
    url("Assets/monster.png") var(--monster-x, 50%) var(--monster-y, 50%) / 330% 220% no-repeat,
    rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 16px rgba(255, 98, 207, 0.72);
  animation: bob 1.4s ease-in-out infinite;
}

.goal {
  background: rgba(255, 215, 94, 0.42);
  animation: pulse 1.2s ease-in-out infinite;
}

.goal::before {
  content: "★";
  color: var(--gold);
  font-size: clamp(1.6rem, 5vw, 2.8rem);
  filter: drop-shadow(0 0 12px rgba(255, 215, 94, 0.85));
}

.player {
  position: absolute;
  z-index: 3;
  width: 76%;
  aspect-ratio: 1;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--player-image) center 10% / cover no-repeat, #162050;
  box-shadow: 0 0 18px rgba(95, 232, 255, 0.78);
}

.side-panel {
  display: grid;
  gap: 14px;
}

.mascot-strip,
.stat-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.mascot-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.mascot-strip img {
  width: 74px;
  height: 86px;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.mascot-strip strong,
.mascot-strip span {
  display: block;
}

.mascot-strip strong {
  font-size: 1.25rem;
}

.mascot-strip span {
  color: var(--muted);
}

.stat-box {
  padding: 16px;
}

.stat-box span,
.stat-box strong {
  display: block;
}

.stat-box span {
  color: var(--muted);
}

.stat-box strong {
  margin-top: 6px;
  color: var(--gold);
  font-size: 1.8rem;
}

.stat-box small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 900;
}

.controls {
  display: grid;
  grid-template-columns: repeat(3, 64px);
  justify-content: center;
  gap: 8px;
}

.controls button {
  width: 64px;
  height: 58px;
  color: var(--cyan);
  font-size: 1.3rem;
  font-weight: 900;
}

.controls button[data-move="up"] {
  grid-column: 2;
}

.controls button[data-move="left"] {
  grid-column: 1;
}

.controls button[data-move="right"] {
  grid-column: 3;
}

.controls button[data-move="down"] {
  grid-column: 2;
}

dialog {
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  background: var(--panel-strong);
  color: white;
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: rgba(4, 7, 26, 0.72);
  backdrop-filter: blur(4px);
}

.math-dialog form,
.win-dialog form {
  width: min(88vw, 430px);
  padding: 22px;
}

.math-dialog.is-battle form {
  width: min(92vw, 560px);
}

.battle-scene {
  display: grid;
  position: relative;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: end;
  min-height: 160px;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 80%, rgba(95, 232, 255, 0.22), transparent 34%),
    radial-gradient(circle at 82% 22%, rgba(255, 98, 207, 0.28), transparent 36%),
    rgba(8, 12, 42, 0.72);
  overflow: hidden;
}

.battle-scene[hidden] {
  display: none;
}

.battle-token {
  justify-self: center;
  width: min(34vw, 140px);
  aspect-ratio: 1;
  border: 3px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 22px rgba(95, 232, 255, 0.45);
}

.hero-token {
  background: var(--player-image) center 12% / cover no-repeat;
}

.monster-token {
  background:
    url("Assets/monster.png") var(--monster-x, 50%) var(--monster-y, 50%) / 330% 220% no-repeat,
    rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 22px rgba(255, 98, 207, 0.6);
}

.monster-token.is-hit {
  animation: monsterHit 620ms ease;
}

.music-hit {
  position: absolute;
  left: 25%;
  top: 48%;
  z-index: 4;
  color: #75ff85;
  font-size: 3rem;
  font-weight: 900;
  filter: drop-shadow(0 0 12px rgba(117, 255, 133, 0.9));
  animation: musicHit 620ms ease forwards;
}

.battle-stage {
  min-height: 22px;
  margin-bottom: 8px;
  color: var(--cyan);
  font-weight: 900;
}

.math-dialog h3,
.win-dialog h3 {
  margin-bottom: 16px;
  color: var(--gold);
  font-size: 2rem;
}

.answer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.answer-grid button {
  height: 64px;
  color: var(--cyan);
  font-size: 1.6rem;
  font-weight: 900;
}

.feedback {
  min-height: 24px;
  margin: 12px 0 0;
  color: var(--green);
  font-weight: 900;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: inset 0 0 10px rgba(255, 215, 94, 0.25);
  }
  50% {
    box-shadow: inset 0 0 26px rgba(255, 215, 94, 0.72), 0 0 22px rgba(255, 215, 94, 0.45);
  }
}

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

@keyframes musicHit {
  0% {
    opacity: 0;
    transform: translate(0, 18px) scale(0.5) rotate(-18deg);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(230px, -38px) scale(1.25) rotate(18deg);
  }
}

@keyframes monsterHit {
  0%,
  100% {
    filter: none;
  }
  20%,
  60% {
    filter: sepia(1) saturate(5) hue-rotate(305deg) brightness(1.2);
    transform: translateX(7px);
  }
  40%,
  80% {
    filter: sepia(1) saturate(5) hue-rotate(305deg) brightness(1.2);
    transform: translateX(-7px);
  }
}

@keyframes moonNote {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.55) rotate(-16deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-150px, -240px) scale(1.3) rotate(18deg);
  }
}

@keyframes challengeNote {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.55) rotate(-16deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(120px, -120px) scale(1.3) rotate(18deg);
  }
}

@keyframes challengeHit {
  0%,
  100% {
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.34));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(117, 255, 133, 0.85)) brightness(1.3);
    transform: scale(0.94);
  }
}

@keyframes challengeWrong {
  0%,
  100% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-8px);
  }
  60% {
    transform: translateX(8px);
  }
}

@keyframes demonDjDance {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg) scale(1);
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.34));
  }

  33% {
    transform: translateY(-12px) rotate(6deg) scale(1.04);
    filter: drop-shadow(0 0 18px rgba(255, 98, 207, 0.72));
  }

  66% {
    transform: translateY(-8px) rotate(-7deg) scale(1.03);
    filter: drop-shadow(0 0 18px rgba(95, 232, 255, 0.72));
  }
}

@keyframes djRecordSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes djRecordScratch {
  0%,
  100% {
    transform: translateX(0) rotate(0);
  }

  25% {
    transform: translateX(-9px) rotate(-9deg);
  }

  55% {
    transform: translateX(10px) rotate(10deg);
  }

  80% {
    transform: translateX(-5px) rotate(-5deg);
  }
}

@keyframes bridgeGlow {
  0% {
    filter: brightness(1.6);
  }

  55% {
    filter: brightness(1.9) drop-shadow(0 0 28px rgba(95, 232, 255, 0.85));
  }

  100% {
    filter: brightness(1);
  }
}

@keyframes crystalChoicePlace {
  45% {
    transform: translateY(-16px) scale(1.06);
    box-shadow: 0 0 26px rgba(95, 232, 255, 0.68);
  }

  100% {
    transform: translateY(-36px) scale(0.6);
    opacity: 0;
  }
}

@keyframes crystalCrack {
  20% {
    transform: translateX(-7px) rotate(-2deg);
    filter: brightness(1.35);
  }

  50% {
    transform: translateX(8px) rotate(2deg);
  }

  80% {
    transform: translateX(-4px);
  }
}

@keyframes balanceGlow {
  0%,
  100% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(1);
  }

  45% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.55);
    box-shadow: 0 0 28px rgba(255, 215, 94, 0.72);
  }
}

@keyframes balanceWobble {
  0%,
  100% {
    transform: rotate(var(--balance-tilt));
  }

  25% {
    transform: rotate(calc(var(--balance-tilt) - 6deg));
  }

  58% {
    transform: rotate(calc(var(--balance-tilt) + 7deg));
  }
}

@keyframes balanceWeightDrop {
  42% {
    transform: translateY(-18px) scale(1.06);
    box-shadow: 0 0 24px rgba(255, 215, 94, 0.64);
  }

  100% {
    transform: translateY(-42px) scale(0.68);
    opacity: 0;
  }
}

@keyframes balanceWeightWrong {
  22% {
    transform: translateX(-7px) rotate(-3deg);
  }

  55% {
    transform: translateX(8px) rotate(3deg);
    filter: brightness(1.35);
  }

  82% {
    transform: translateX(-4px);
  }
}

@keyframes blockDrop {
  from {
    transform: translateY(-18px);
  }
  to {
    transform: translateY(18px);
  }
}

@keyframes laneBeat {
  from {
    transform: translateX(-20%);
  }
  to {
    transform: translateX(20%);
  }
}

@keyframes runnerPulse {
  from {
    box-shadow: 0 0 18px rgba(95, 232, 255, 0.18);
  }
  to {
    box-shadow: 0 0 28px rgba(255, 215, 94, 0.38);
  }
}

@keyframes arcadeNote {
  0% {
    opacity: 0;
    transform: translateY(32px) scale(0.55) rotate(-18deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-70px, -170px) scale(1.35) rotate(18deg);
  }
}

@keyframes laneJump {
  0% {
    transform: translateY(28px) scale(0.88);
  }
  55% {
    transform: translateY(-28px) scale(1.05);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes shapeDrop {
  0% {
    transform: translateY(-110px) rotate(-12deg);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes noteFall {
  0% {
    transform: translateY(-90px);
  }
  100% {
    transform: translateY(70px);
  }
}

@keyframes targetHit {
  18% {
    filter: brightness(1.8) saturate(1.3);
  }

  50% {
    transform: scale(1.16);
    box-shadow: 0 0 28px rgba(117, 255, 133, 0.8);
  }
}

@keyframes cannonShot {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55) rotate(0deg);
  }

  12% {
    opacity: 1;
  }

  82% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--shot-x)), calc(-50% + var(--shot-y))) scale(1.12) rotate(540deg);
  }
}

@keyframes cannonKick {
  35% {
    transform: rotate(var(--aim-angle)) translateY(8px) scale(0.98);
  }
}

@keyframes cardFlip {
  50% {
    transform: rotateY(90deg);
  }
}

@keyframes gearSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pourOrb {
  to {
    transform: translateY(120px) scale(0.4);
    opacity: 0;
  }
}

@keyframes bottlePour {
  40% {
    transform: translateY(-34px) rotate(-16deg) scale(1.04);
  }

  78% {
    transform: translateY(-64px) rotate(-32deg) scale(0.96);
    opacity: 0.96;
  }

  100% {
    transform: translateY(-72px) rotate(-36deg) scale(0.86);
    opacity: 0;
  }
}

@keyframes potionBottleShake {
  20% {
    transform: rotate(-7deg) translateX(-8px);
  }

  45% {
    transform: rotate(8deg) translateX(8px);
  }

  70% {
    transform: rotate(-5deg) translateX(-5px);
  }
}

@keyframes potionExplosion {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35) rotate(-8deg);
  }

  22% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.15) rotate(10deg);
  }
}

@keyframes potionNotesRise {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(24px) scale(0.35);
  }

  24% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-120px) scale(1.05);
  }
}

@keyframes balloonFloat {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(12px);
  }
}

@keyframes balloonPop {
  to {
    transform: scale(1.35);
    opacity: 0;
  }
}

@keyframes trainMove {
  to {
    transform: translateX(80px);
  }
}

@media (max-width: 860px) {
  .screen {
    padding: 14px;
  }

  .hero-layout,
  .play-area,
  .level-grid {
    grid-template-columns: 1fr;
  }

  .hero-layout {
    align-items: start;
    padding-top: 28px;
  }

  .intro-copy {
    padding-bottom: 0;
  }

  .hero-card {
    min-height: 390px;
  }

  .hero-card img {
    height: 320px;
  }

  .level-card,
  .level-card img {
    min-height: 240px;
    height: 240px;
  }

  .game-header {
    align-items: flex-start;
  }

  .hero-badge {
    min-width: 88px;
  }

  .side-panel {
    grid-template-columns: 1fr;
  }

  .moon-stage-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .moon-hero {
    min-height: 280px;
  }

  .moon-hero img {
    max-height: 300px;
  }

  .constellation {
    position: static;
    justify-content: center;
    grid-row: 1;
  }

  .moon-answers {
    grid-template-columns: 1fr;
  }

  .challenge-arena {
    grid-template-columns: 1fr 1fr;
    min-height: auto;
  }

  .challenge-hero,
  .challenge-panel {
    grid-column: 1 / -1;
  }

  .challenge-demon,
  .challenge-hero img {
    max-height: 170px;
  }

  .challenge-answers {
    grid-template-columns: 1fr;
  }

  .challenge-arena.is-demonDj {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 170px auto;
    min-height: auto;
    padding: 16px;
  }

  .is-demonDj .challenge-demon {
    max-height: 150px;
  }

  .is-demonDj .challenge-demon-left {
    grid-column: 1;
  }

  .is-demonDj .challenge-demon-right {
    grid-column: 2;
  }

  .is-demonDj .challenge-panel {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .is-demonDj .challenge-panel h3 {
    font-size: clamp(1.25rem, 5vw, 1.8rem);
  }

  .dj-answer-deck {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 310px;
    padding: 8px 5% 115px;
  }

  .dj-booth {
    width: min(96%, 520px);
    max-height: 160px;
  }

  .dj-record {
    width: min(25vw, 104px);
  }

  .dj-record span {
    min-height: 32px;
    font-size: clamp(0.78rem, 2.8vw, 1.05rem);
  }

  .challenge-arena.is-crystalBridge {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 150px auto;
    min-height: auto;
    padding: 16px;
  }

  .is-crystalBridge .challenge-hero {
    display: none;
  }

  .is-crystalBridge .challenge-demon {
    max-height: 136px;
  }

  .crystal-bridge-game {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .crystal-bridge-stage {
    grid-template-columns: 50px minmax(0, 1fr) 50px;
    min-height: 180px;
    padding: 10px;
  }

  .bridge-dock {
    min-height: 54px;
    font-size: 0.78rem;
  }

  .bridge-path {
    min-height: 104px;
  }

  .bridge-empty,
  .bridge-built img {
    max-height: 96px;
  }

  .bridge-steps {
    gap: 3px;
    bottom: 2px;
  }

  .crystal-choice {
    min-height: 76px;
    font-size: clamp(0.8rem, 3vw, 1.15rem);
  }

  .challenge-arena.is-balanceBoss {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 150px auto;
    min-height: auto;
    padding: 16px;
  }

  .is-balanceBoss .challenge-hero {
    display: none;
  }

  .is-balanceBoss .challenge-demon {
    max-height: 136px;
  }

  .balance-game {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .balance-stage {
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    min-height: 190px;
    padding: 10px;
  }

  .balance-target {
    min-height: 68px;
  }

  .balance-target strong {
    font-size: 1.65rem;
  }

  .balance-beam-wrap {
    min-height: 128px;
  }

  .balance-beam-img {
    max-height: 116px;
  }

  .balance-weight {
    min-height: 76px;
    font-size: clamp(0.8rem, 3vw, 1.15rem);
  }

  .arcade-stage {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .arcade-hero-image {
    max-height: 210px;
  }

  .block-stack,
  .is-crossing .arcade-controls,
  .runner-lanes,
  .note-lanes,
  .gear-board,
  .balloon-sky,
  .train-tracks,
  .potion-lab {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .topbar {
    align-items: stretch;
  }

  .brand-mark,
  .spark-score,
  .ghost-button {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 0.9rem;
  }

  .hero-cards {
    grid-template-columns: 1fr;
  }

  .hero-card {
    min-height: 330px;
  }

  .hero-card img {
    height: 270px;
  }

  .game-header {
    flex-wrap: wrap;
  }

  .cannon-game {
    min-height: 420px;
    padding: 12px;
  }

  .cannon-target-row {
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cannon-target {
    min-height: auto;
    border-width: 2px;
    box-shadow:
      inset 0 0 0 5px rgba(9, 12, 42, 0.92),
      0 0 18px hsla(var(--target-hue), 100%, 62%, 0.44);
  }

  .cannon-dock {
    bottom: 0;
    width: min(54vw, 190px);
  }

  .cannon-projectile {
    width: 62px;
  }

  .potion-lab {
    min-height: 480px;
    padding: 12px;
  }

  .potion-cauldron {
    min-height: 200px;
  }

  .potion-cauldron img {
    width: min(82vw, 300px);
  }

  .potion-bottles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .potion-bottle {
    min-height: 160px;
  }

  .potion-bottle img {
    width: min(88%, 110px);
  }

  .potion-bottle span {
    min-width: 46px;
    min-height: 36px;
    font-size: 1.45rem;
  }

  .maze {
    padding: 6px;
  }

  .cell {
    border-width: 0;
  }
}