:root {
  color-scheme: dark;
  --ink: #f7fbff;
  --muted: #9ab7d8;
  --cyan: #42e8ff;
  --blue: #168bff;
  --violet: #7d5cff;
  --gold: #ffd65a;
  --green: #42e884;
  --green-dark: #159a55;
  --red: #ff5f6d;
  --red-dark: #c62f45;
  --panel: rgba(8, 25, 61, .82);
  --line: rgba(103, 223, 255, .34);
  --shadow: 0 14px 40px rgba(0, 4, 22, .46);
}

*, *::before, *::after { box-sizing: border-box; }

html,
body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  min-width: 0;
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  background: #03091c url("assets/backgrounds/space-background-01.png") center / cover fixed;
}

button { font: inherit; }
img { max-width: 100%; height: auto; }

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

.is-loading {
  overflow: hidden;
}

.is-loading .app-shell,
.is-loading .space-decor,
.is-loading .install-control,
.is-loading .install-dialog {
  visibility: hidden;
  pointer-events: none;
}

.preloader {
  position: fixed;
  z-index: 1000;
  inset: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 22%, rgba(42, 101, 190, .23) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 68%, rgba(106, 222, 255, .22) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 120%, rgba(54, 64, 170, .38), transparent 52%),
    linear-gradient(160deg, #071633, #020716 72%);
  background-size: 83px 83px, 127px 127px, auto, auto;
  opacity: 1;
  transition: opacity .32s ease, visibility .32s ease;
}

.preloader.is-exiting {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.preloader-card {
  width: min(300px, calc(100vw - 48px));
  min-height: 210px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 24px;
  border: 1px solid rgba(103, 223, 255, .38);
  border-radius: 28px;
  background: linear-gradient(155deg, rgba(18, 54, 111, .94), rgba(5, 17, 48, .97));
  box-shadow: var(--shadow), 0 0 38px rgba(66, 232, 255, .12), inset 0 1px rgba(255,255,255,.13);
  transition: transform .32s ease, opacity .25s ease;
}

.preloader.is-exiting .preloader-card {
  opacity: 0;
  transform: scale(.96);
}

.preloader-orbit {
  position: relative;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(103, 223, 255, .28);
  border-radius: 50%;
  animation: preloader-float 2.6s ease-in-out infinite;
}

.preloader-planet {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #bdf8ff 0 5%, #42e8ff 18%, #2277dc 52%, #332279 78%);
  box-shadow: inset -8px -6px 12px rgba(3, 8, 42, .55), 0 0 24px rgba(66, 232, 255, .55);
}

.preloader-moon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 9px rgba(255, 214, 90, .8);
  animation: preloader-orbit 1.65s linear infinite;
}

.preloader-text {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 0 15px rgba(66, 232, 255, .62);
}

.preloader-dots::after {
  content: "";
  animation: preloader-dots 1.4s steps(4, end) infinite;
}

.install-control {
  position: fixed;
  z-index: 30;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  padding: 4px;
  border: 1px solid rgba(103, 223, 255, .62);
  border-radius: 19px;
  color: white;
  background: linear-gradient(155deg, rgba(24, 75, 143, .97), rgba(6, 24, 65, .97));
  box-shadow: inset 0 1px rgba(255,255,255,.24), 0 8px 24px rgba(0,4,22,.55), 0 0 18px rgba(66,232,255,.2);
  cursor: pointer;
  touch-action: manipulation;
  animation: install-control-in .28s cubic-bezier(.2,.85,.25,1.15) both;
}
.install-control[hidden] { display: none; }
.install-control:hover { filter: brightness(1.14); }
.install-control:active { transform: translateY(2px) scale(.96); }
.install-control img { display: block; width: 100%; height: 100%; object-fit: contain; }
.install-indicator {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 2px solid #071b45;
  border-radius: 50%;
  color: #061126;
  background: var(--cyan);
  font-size: 1rem;
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 0 10px rgba(66,232,255,.68);
}

.install-dialog {
  position: fixed;
  z-index: 31;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(82px, calc(env(safe-area-inset-bottom) + 82px));
  width: min(310px, calc(100vw - 28px));
  padding: 13px 38px 13px 12px;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(103, 223, 255, .5);
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(18, 54, 111, .98), rgba(7, 17, 48, .98));
  box-shadow: var(--shadow), 0 0 28px rgba(66,232,255,.13);
  animation: modal-in .28s cubic-bezier(.2,.85,.25,1.15) both;
}
.install-dialog[hidden] { display: none; }
.install-dialog img { width: 46px; height: 46px; object-fit: contain; }
.install-dialog strong, .install-dialog span { display: block; }
.install-dialog strong { margin-bottom: 3px; color: var(--cyan); font-size: 1rem; }
.install-dialog span { color: var(--ink); font-size: .86rem; line-height: 1.3; }
.install-dialog-close {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font-size: 1.3rem;
  cursor: pointer;
}

.app-shell {
  position: relative;
  z-index: 2;
  width: min(100%, 640px);
  max-width: 100%;
  min-width: 0;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.map-tools { display: flex; align-items: center; gap: 9px; }
.sound-button { justify-self: end; font-size: 1.05rem; }

.brand {
  font-size: clamp(1.05rem, 4vw, 1.45rem);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(66, 232, 255, .8);
}

.icon-button, .lang-button, .primary-button, .confirm-button, .key {
  border: 1px solid var(--line);
  color: var(--ink);
  background: linear-gradient(180deg, rgba(35, 77, 142, .95), rgba(12, 33, 79, .95));
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 5px 14px rgba(0,0,0,.25);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.icon-button:active, .lang-button:active, .primary-button:active, .confirm-button:active, .key:active { transform: translateY(2px) scale(.98); }
.icon-button { width: 46px; height: 46px; border-radius: 15px; font-size: 1.2rem; }
.lang-switch { display: flex; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.lang-button { min-width: 47px; height: 42px; border: 0; border-radius: 0; color: var(--muted); }
.lang-button.active { color: #061126; background: var(--cyan); font-weight: 900; }

.map-screen { flex: 1; min-width: 0; max-width: 100%; display: flex; flex-direction: column; }
.map-title { margin: 5px 0 4px; text-align: center; font-size: clamp(1.7rem, 7vw, 2.6rem); }

.planet-grid {
  flex: 1;
  width: min(100%, 540px);
  max-width: 100%;
  min-width: 0;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: center;
  gap: clamp(8px, 1.7vh, 16px) clamp(8px, 3vw, 20px);
}

.planet-card {
  position: relative;
  min-width: 0;
  padding: 0 0 5px;
  border: 0;
  border-radius: 26px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, background .18s ease;
}

.planet-card:last-child { grid-column: 2; }
.planet-card:hover { transform: translateY(-3px) scale(1.04); background: rgba(66, 232, 255, .06); }
.planet-card:active { transform: scale(.96); }
.planet-orbit {
  display: block;
  aspect-ratio: 1;
  filter: drop-shadow(0 8px 11px rgba(0, 0, 0, .42));
  animation: planet-float 4.8s ease-in-out infinite;
  animation-delay: calc(var(--planet-index) * -.37s);
}
.planet-card:hover .planet-orbit { filter: drop-shadow(0 0 15px rgba(66, 232, 255, .62)); }
.planet-card img { display: block; width: 100%; height: 100%; object-fit: contain; animation: planet-breathe 5.6s ease-in-out infinite; animation-delay: calc(var(--planet-index) * -.29s); }
.planet-label {
  display: block;
  margin-top: -4px;
  color: white;
  font-size: clamp(1rem, 4.5vw, 1.35rem);
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 5px #000, 0 0 12px rgba(66,232,255,.65);
}

.modal-backdrop {
  position: fixed;
  z-index: 20;
  inset: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(0, 5, 20, .72);
  backdrop-filter: blur(5px);
  animation: backdrop-in .28s ease both;
}

.modal {
  width: 100%;
  max-width: 370px;
  min-width: 0;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 28px;
  text-align: center;
  background: linear-gradient(155deg, rgba(18, 54, 111, .97), rgba(7, 17, 48, .98));
  box-shadow: var(--shadow), 0 0 40px rgba(66, 232, 255, .15);
  animation: modal-in .32s cubic-bezier(.2,.85,.25,1.15) both;
}
.modal-backdrop.is-exiting { animation: backdrop-out .24s ease both; }
.modal-backdrop.is-exiting .modal { animation: modal-out .24s ease both; }
.modal-planet { width: 145px; height: 145px; object-fit: contain; margin: -5px auto; }
.modal-table { margin: 2px 0 20px; font-size: 2.4rem; font-weight: 900; color: var(--cyan); }
.modal-actions { display: flex; justify-content: center; gap: 18px; }
.modal-actions button { width: 76px; height: 58px; font-size: 1.6rem; }
.positive-button, .key.submit, .complete-actions > .primary-button:first-child {
  color: #041d11;
  border-color: rgba(158,255,197,.72);
  background: linear-gradient(180deg, #7dffb1, var(--green));
  box-shadow: inset 0 1px rgba(255,255,255,.5), 0 7px 18px rgba(27,194,101,.3);
}
.danger-button { border-color: rgba(255,172,180,.72); background: linear-gradient(180deg, #ff7b86, var(--red-dark)); }
.close-button { color: white; border-color: rgba(255,172,180,.72); background: linear-gradient(180deg, #ff7b86, var(--red-dark)); box-shadow: inset 0 1px rgba(255,255,255,.22), 0 5px 14px rgba(110,0,18,.35); }

.game-screen { flex: 1; min-width: 0; max-width: 100%; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.phase-head { min-height: 48px; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; text-align: center; }
.phase-label { font-weight: 900; letter-spacing: .08em; color: var(--cyan); }
.phase-progress { font-size: .85rem; color: var(--muted); }

.panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 25px;
  background: linear-gradient(180deg, rgba(12, 39, 86, .86), rgba(5, 17, 48, .9));
  box-shadow: var(--shadow);
}

.learn-stage { position: relative; flex: 1; min-height: 0; padding: 64px 16px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.card-close-button { position: absolute; z-index: 10; top: 10px; right: 10px; width: 48px; height: 48px; }
.equation { display: flex; align-items: center; justify-content: center; gap: .2em; font-size: clamp(2rem, 10vw, 4rem); font-weight: 900; letter-spacing: .02em; text-align: center; text-shadow: 0 0 22px rgba(66,232,255,.38); }
.equation .answer { color: var(--gold); }
.equation-piece { display: inline-block; opacity: 0; animation: equation-piece-in .28s cubic-bezier(.2,.9,.25,1.16) forwards; animation-delay: calc(var(--piece-index) * 34ms); }
.confirm-button { width: 86px; height: 64px; margin-top: 32px; border-radius: 20px; font-size: 2rem; }
.correction-equation { font-size: clamp(2.7rem, 12vw, 5rem); }
.correction-confirm { animation: control-in .3s cubic-bezier(.2,.9,.25,1.15) both; animation-delay: .16s; }
.control-exit, .controls-exit { pointer-events: none; animation: control-out .25s ease forwards !important; }
.screen-enter { animation: screen-in .28s ease both; }
.game-screen.is-exiting { animation: screen-out .25s ease both; }
.card-enter { animation: card-in .3s cubic-bezier(.2,.85,.3,1) both; }
.card-enter.is-exiting { animation: card-out .25s ease both; }
.equation-swap { animation: equation-in .28s cubic-bezier(.2,.8,.3,1) both; }
.equation-swap.equation-exit, .equation-exit { animation: equation-disperse .25s ease forwards; }
.equation-exit .equation-piece { animation: equation-piece-out .23s ease forwards; animation-delay: calc(var(--piece-index) * 18ms); }
.flash-correct { animation: success-flash .52s ease both; }
.flash-error { animation: error-flash .52s ease both; }

.battery { display: flex; justify-content: center; gap: 8px; padding: 7px 0 2px; }
.battery-cell { width: 36px; height: 14px; border: 2px solid var(--cyan); border-radius: 4px; background: rgba(66,232,255,.08); }
.battery-cell.full { background: linear-gradient(90deg, var(--cyan), #72ffb4); box-shadow: 0 0 10px rgba(66,232,255,.75); }

.answer-grid { width: min(100%, 480px); min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.answer-pod {
  position: relative;
  aspect-ratio: 1.62;
  border: 0;
  padding: 0;
  color: #07162e;
  background: url("assets/game/training/answer-pod-horizontal-01.png") center / contain no-repeat;
  font-size: clamp(1.2rem, 5vw, 1.75rem);
  font-weight: 1000;
  -webkit-text-stroke: .35px rgba(255,255,255,.45);
  text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 2px 3px rgba(255,255,255,.45);
  cursor: pointer;
  touch-action: manipulation;
}
.pod-enter { opacity: 0; animation: pod-in .34s cubic-bezier(.2,.9,.25,1.2) forwards; animation-delay: calc(var(--pod-index) * 38ms); }
.pod-exit { animation: pod-out .28s ease forwards !important; animation-delay: calc(var(--pod-index) * 16ms) !important; }
.answer-pod:nth-child(3n+1) { --pod-x: -22px; --pod-y: 10px; }
.answer-pod:nth-child(3n+2) { --pod-x: 0px; --pod-y: -16px; }
.answer-pod:nth-child(3n) { --pod-x: 22px; --pod-y: 10px; }
.answer-pod:hover { filter: brightness(1.2); }
.answer-pod:active { transform: scale(.96); }
.answer-pod.soft-error { animation: soft-shake .35s ease; filter: saturate(.5); }

.feedback { min-height: 36px; display: grid; place-items: center; font-size: 1.3rem; font-weight: 900; color: var(--gold); }
.feedback.correct { color: #78ffb8; }
.feedback.error { color: #ff8a95; }

.recall-panel { position: relative; flex: 1; min-height: 0; padding: 64px 14px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; min-height: 20px; }
.dot { width: 13px; height: 13px; border: 2px solid var(--cyan); border-radius: 50%; }
.dot.full { background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.dot.full { animation: dot-fill .28s cubic-bezier(.2,.9,.3,1.2) both; }
.input-display {
  width: min(100%, 300px);
  min-height: 60px;
  margin: 12px 0 9px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(1, 9, 28, .75);
  color: var(--gold);
  font-size: 2rem;
  font-weight: 900;
}
.input-display.empty { color: #5f789b; }
.input-display.input-reset { animation: input-reset .25s ease both; }

.keypad { width: min(100%, 300px); min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.key { min-height: 50px; border-radius: 15px; font-size: 1.3rem; font-weight: 900; }
.key.submit { grid-column: 1 / -1; font-size: 1.65rem; }

.battle-field { position: relative; flex: 1; min-width: 0; max-width: 100%; min-height: 240px; overflow: hidden; overflow: clip; border-radius: 24px; isolation: isolate; }
.asteroid-wrap { position: absolute; z-index: 2; left: 50%; top: 16px; width: min(29vw, 132px); aspect-ratio: 1; overflow: visible; transform: translateX(-50%); }
.asteroid-enter { animation: asteroid-in .34s cubic-bezier(.2,.85,.3,1.12) both; }
.asteroid-body { position: absolute; inset: 0; animation: asteroid-idle 4.4s ease-in-out .38s infinite; transform-origin: 50% 54%; }
.asteroid { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 17px rgba(255,202,63,.22)); }
.asteroid-equation { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); min-width: 104px; padding: 7px 12px; border: 1px solid rgba(119,228,255,.45); border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: .24em; color: white; background: rgba(2,10,31,.84); box-shadow: 0 5px 14px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.12); font-size: clamp(1.1rem, 4.5vw, 1.5rem); font-weight: 900; text-shadow: 0 2px 4px #000; white-space: nowrap; }
.asteroid-effect { position: absolute; z-index: 4; inset: -38%; overflow: visible; pointer-events: none; }
.explosion { width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.timer-track { position: absolute; z-index: 9; left: 12%; right: 12%; top: 4px; height: 6px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.16); }
.timer-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), #ff7b4b); transform-origin: left; }
.ship-wrap { position: absolute; z-index: 5; left: 50%; bottom: -10px; width: min(18vw, 76px); aspect-ratio: .78; overflow: visible; transform: translateX(-50%); animation: ship-idle 3.6s ease-in-out infinite; }
.ship { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 13px rgba(66,232,255,.52)); }
.ship-damage { position: absolute; z-index: 6; left: 50%; top: 25%; width: 112%; height: 112%; object-fit: contain; opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.2); }
.laser { position: absolute; z-index: 4; left: calc(50% - 2px); bottom: 68px; width: 4px; height: 40px; border-radius: 8px; opacity: 0; background: #78f8ff; box-shadow: 0 0 14px 5px #2fd8ff; }
.battle-field.firing .laser { animation: fire .5s ease-out; }
.battle-field.hit .asteroid-body { animation: asteroid-destroy .48s ease .16s forwards; }
.battle-field.hit .asteroid-equation { animation: equation-out .2s ease .16s forwards; }
.battle-field.hit .explosion { animation: explosion-bloom .62s ease .1s both; }
.battle-field.miss .laser { animation: miss .5s ease-out; }
.battle-field.damaged .ship-wrap { animation: ship-shake .28s ease; }
.battle-field.damaged .ship-damage { animation: ship-damage .62s ease both; }
.battle-field.asteroid-exit .asteroid-wrap { animation: asteroid-out .26s ease forwards; }
.battle-field.asteroid-exit .asteroid-equation { animation: equation-out .22s ease forwards; }
.battle-controls { display: flex; flex-direction: column; align-items: center; }
.battle-controls .input-display { min-height: 48px; margin: 0 0 7px; }
.battle-controls .key { min-height: 43px; }

.transition-screen, .complete-screen { flex: 1; width: 100%; max-width: 100%; min-width: 0; display: grid; place-items: center; text-align: center; }
.complete-screen { min-height: calc(100dvh - 32px); }
.transition-mark { font-size: clamp(4rem, 20vw, 8rem); font-weight: 900; color: var(--cyan); text-shadow: 0 0 30px var(--cyan); animation: pulse 1s ease-in-out infinite; }
.countdown { font-size: clamp(5rem, 28vw, 10rem); font-weight: 900; color: var(--gold); }
.launch-ship { width: min(38vw, 170px); animation: launch 1.25s ease-in forwards; }
.complete-card { width: min(100%, 390px); padding: 22px 28px 28px; overflow: hidden; }
.complete-card h1 { margin: -2px 0 2px; font-size: clamp(1.8rem, 7vw, 2.45rem); }
.complete-ship { width: min(85%, 280px); max-height: 190px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(20,184,255,.35)); animation: hero-hover 3s ease-in-out infinite; }
.complete-table { font-size: 2.6rem; margin: 4px 0 22px; font-weight: 900; }
.complete-actions { display: grid; gap: 12px; }
.primary-button { min-height: 58px; border-radius: 18px; font-size: 1.3rem; font-weight: 900; }
.secondary-button { display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(20,49,97,.92); }
.victory-enter { animation: victory-in .42s cubic-bezier(.18,.9,.25,1.18) both; }

.space-decor { position: fixed; z-index: 0; width: 260px; height: 260px; opacity: .32; pointer-events: none; background-size: contain; background-repeat: no-repeat; }
.decor-left { left: 1vw; top: 18vh; background-image: url("assets/decor/space/space-decor-01.png"); animation: float 8s ease-in-out infinite; }
.decor-right { right: 1vw; bottom: 10vh; background-image: url("assets/decor/space/space-decor-04.png"); animation: float 10s ease-in-out infinite reverse; }

@keyframes soft-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes fire { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-190px); } }
@keyframes miss { 0% { opacity: 1; transform: translate(0,0) rotate(0); } 100% { opacity: 0; transform: translate(75px,-160px) rotate(20deg); } }
@keyframes pulse { 50% { transform: scale(1.12); opacity: .76; } }
@keyframes launch { 0% { transform: translateY(30vh); } 100% { transform: translateY(-80vh) scale(.45); opacity: .1; } }
@keyframes float { 50% { transform: translateY(-18px) rotate(5deg); } }
@keyframes planet-float { 50% { transform: translateY(-7px) rotate(1.5deg); } }
@keyframes planet-breathe { 50% { transform: scale(1.025); } }
@keyframes backdrop-in { from { opacity: 0; } }
@keyframes backdrop-out { to { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(18px) scale(.92); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(14px) scale(.93); } }
@keyframes screen-in { from { opacity: 0; } }
@keyframes screen-out { to { opacity: 0; transform: translateY(-10px) scale(.985); } }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes card-out { to { opacity: 0; transform: translateY(-14px) scale(.97); } }
@keyframes equation-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes equation-disperse { to { opacity: 0; transform: translateY(-10px) scale(.94); } }
@keyframes equation-piece-in { from { opacity: 0; transform: translate(var(--piece-x, -12px), 12px) scale(.72); } to { opacity: 1; transform: none; } }
@keyframes equation-piece-out { to { opacity: 0; transform: translateY(-10px) scale(.72); } }
@keyframes equation-out { to { opacity: 0; transform: translate(-50%,-64%) scale(.9); } }
@keyframes control-in { from { opacity: 0; transform: translateY(12px) scale(.76); } }
@keyframes control-out { to { opacity: 0; transform: translateY(10px) scale(.82); } }
@keyframes pod-in { from { opacity: 0; transform: translate(var(--pod-x, -12px), var(--pod-y, 16px)) scale(.72); } to { opacity: 1; transform: none; } }
@keyframes pod-out { to { opacity: 0; transform: translate(var(--pod-x, 14px), var(--pod-y, -12px)) scale(.72); } }
@keyframes success-flash { 35% { border-color: rgba(91,255,158,.9); box-shadow: var(--shadow), 0 0 30px rgba(66,232,132,.42), inset 0 0 46px rgba(66,232,132,.16); } }
@keyframes error-flash { 35% { border-color: rgba(255,95,109,.9); box-shadow: var(--shadow), 0 0 28px rgba(255,95,109,.38), inset 0 0 42px rgba(255,95,109,.14); } }
@keyframes asteroid-in { from { opacity: 0; transform: translateX(-50%) translateY(-22px) scale(.82); } }
@keyframes asteroid-idle { 0%, 100% { transform: translate(-2px, 0) rotate(-.7deg) scale(1); } 50% { transform: translate(2px, 5px) rotate(.8deg) scale(1.012); } }
@keyframes asteroid-destroy { 45% { filter: brightness(2.4); transform: scale(.82); opacity: .8; } 100% { transform: scale(.18); opacity: 0; } }
@keyframes asteroid-out { to { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(.82); } }
@keyframes explosion-bloom { 0% { opacity: 0; transform: scale(.25); } 35% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes ship-shake { 20% { transform: translateX(-50%) translateX(-5px) rotate(-3deg); } 45% { transform: translateX(-50%) translateX(5px) rotate(3deg); } 70% { transform: translateX(-50%) translateX(-3px) rotate(-2deg); } }
@keyframes ship-idle { 0%, 100% { transform: translateX(-50%) translate(-3px, 1px) rotate(-.5deg); } 50% { transform: translateX(-50%) translate(3px, -4px) rotate(.5deg); } }
@keyframes ship-damage { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); } 28% { opacity: 1; transform: translate(-50%,-50%) scale(1.05); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.3); } }
@keyframes victory-in { from { opacity: 0; transform: translateY(26px) scale(.88); } 70% { transform: translateY(-3px) scale(1.02); } }
@keyframes hero-hover { 50% { transform: translateY(-6px) rotate(-1deg); } }
@keyframes dot-fill { from { transform: scale(.35); background: white; } }
@keyframes input-reset { 45% { transform: scale(.94); border-color: rgba(66,232,255,.75); } }
@keyframes install-control-in { from { opacity: 0; transform: translateY(10px) scale(.78); } }
@keyframes preloader-float { 50% { transform: translateY(-6px); } }
@keyframes preloader-orbit { from { transform: rotate(0deg) translateX(38px); } to { transform: rotate(360deg) translateX(38px); } }
@keyframes preloader-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }

@media (max-height: 720px) {
  .app-shell { padding-top: 7px; padding-bottom: 7px; }
  .planet-grid { width: min(100%, 82vh, 500px); gap: 2px 14px; }
  .map-title { margin: 0; font-size: 1.55rem; }
  .phase-head { min-height: 42px; }
  .equation { font-size: clamp(1.8rem, 8vw, 3rem); }
  .answer-grid { margin-top: 7px; max-width: 390px; gap: 4px; }
  .key { min-height: 42px; }
  .recall-panel { padding: 7px; }
  .input-display { min-height: 45px; margin: 5px 0; }
  .battle-field { min-height: 190px; }
  .asteroid-wrap { width: min(25vh, 126px); }
}

@media (max-width: 599px) {
  .planet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planet-card:last-child { grid-column: auto; }
}

@media (max-width: 380px) {
  .app-shell { padding-left: 10px; padding-right: 10px; }
  .planet-grid { gap: 3px 7px; }
  .answer-grid { gap: 3px; }
  .battery-cell { width: 31px; }
}

@media (max-width: 820px) { .space-decor { display: none; } }

@media (min-width: 600px) and (max-height: 800px) {
  .planet-grid { width: min(100%, 55vh, 430px); gap: 2px 12px; }
  .map-title { margin-top: 0; }
}

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