:root {
  --viewport-width: 100vw;
  --viewport-height: 100dvh;
  --background-color: #000;
  --foreground-color: #fff;
  --terminal-green: #9cff9c;
  --terminal-soft-green: rgba(156, 255, 156, 0.18);
  --terminal-panel: rgba(4, 18, 8, 0.58);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  width: var(--viewport-width);
  height: 100%;
  background: var(--background-color);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-text-size-adjust: 100%;
}

body {
  position: fixed;
  inset: 0;
  width: var(--viewport-width);
  height: var(--viewport-height);
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--background-color);
  color: var(--foreground-color);
  font-family: Arial, Helvetica, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

[hidden] {
  display: none !important;
}

/* The root surface is the fixed game stage every scene will occupy. */
.app {
  position: fixed;
  inset: 0;
  width: var(--viewport-width);
  height: var(--viewport-height);
  overflow: hidden;
  background: var(--background-color);
  color: var(--foreground-color);
}

.app::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.035) 0,
      rgba(255, 255, 255, 0.035) 1px,
      transparent 1px,
      transparent 4px
    ),
    rgba(156, 255, 156, 0.012);
  animation: crt-flicker 4s steps(2, end) infinite;
}

/* Scenes stack in the same screen space; SceneManager controls visibility. */
.scene {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 600ms ease, visibility 0s linear 600ms;
}

.scene.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.scene h1 {
  margin: 0;
  color: var(--foreground-color);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.loading-scene {
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

.rotate-phone-message {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  color: var(--foreground-color);
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.9rem, 4vw, 1.25rem);
  line-height: 1;
  text-align: center;
}

.rotate-phone-message p {
  margin: 0;
}

.wizard-question {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(88vw, 720px);
  color: var(--foreground-color);
  font-family: "Courier New", Courier, monospace;
  text-align: center;
  opacity: 1;
  transition: opacity 600ms ease;
}

.wizard-question.is-fading {
  opacity: 0;
}

.wizard-question p {
  max-width: 32rem;
  margin: 0;
  font-size: clamp(0.78rem, 2.8vw, 1.12rem);
  line-height: 1.35;
}

.wizard-question p span {
  display: block;
}

.wizard-question__choices {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 4vw, 24px);
  margin-top: clamp(18px, 5vh, 32px);
}

.wizard-question__choices button {
  min-width: clamp(76px, 18vw, 112px);
  padding: 0.7rem 1rem;
  border: 1px solid var(--foreground-color);
  border-radius: 6px;
  background: transparent;
  color: var(--foreground-color);
  font-family: inherit;
  font-size: clamp(0.78rem, 2.4vw, 1rem);
  line-height: 1;
  text-transform: uppercase;
}

.wizard-question__result {
  margin-top: clamp(18px, 5vh, 32px) !important;
}

.transmission-message {
  margin: 0;
  color: var(--terminal-green);
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.9rem, 4vw, 1.35rem);
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 12px rgba(156, 255, 156, 0.32);
  opacity: 0;
}

.transmission-message.is-visible {
  opacity: 1;
}

.opening-wizard {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.opening-forest {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 34%, rgba(56, 146, 118, 0.28), transparent 20%),
    linear-gradient(#020409 0%, #06130f 48%, #07180d 100%);
  opacity: 0;
  transform: scale(1.01);
}

.opening-wizard.is-active .opening-forest {
  animation: opening-forest-reveal 900ms ease-out forwards;
}

.opening-wizard.is-mountain-exploding {
  animation: opening-mountain-blast-shake 1.2s linear;
}

.opening-wizard.is-path-running {
  animation: opening-big-firework-screen-shake 7s linear 7s infinite;
}

.opening-wizard.is-path-failed {
  animation: opening-path-fail-shudder 2.4s ease-out forwards;
}

.opening-wizard.is-path-failed::after {
  content: "FAILED";
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 50%;
  color: #ff1f2f;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(2.6rem, 10vw, 6.2rem);
  font-weight: 900;
  letter-spacing: 0;
  text-shadow:
    0 0 12px rgba(255, 31, 47, 0.7),
    4px 4px 0 rgba(0, 0, 0, 0.78);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.86);
  animation: opening-path-failed-text 2.2s ease-out forwards;
  pointer-events: none;
}

.opening-wizard.is-path-failed .opening-forest *,
.opening-wizard.is-path-failed .opening-wizard__path-runner {
  animation-duration: 12s !important;
}

.opening-wizard.is-starting-game {
  animation: opening-start-game-fade 800ms ease-in forwards;
}

.opening-wizard.is-path-running.is-mountain-exploding,
.opening-wizard.is-mountain-exploding {
  animation: opening-mountain-blast-shake 1.2s linear;
}

.opening-wizard.is-tap-tutorial-paused {
  animation-play-state: paused;
}

.opening-wizard.is-tap-tutorial-paused .opening-forest,
.opening-wizard.is-tap-tutorial-paused .opening-forest *,
.opening-wizard.is-tap-tutorial-paused .opening-wizard__path-runner {
  animation-play-state: paused !important;
}

.opening-wizard.is-path-running .opening-forest {
  opacity: 1;
  animation: opening-handheld-camera 1.36s ease-in-out infinite;
}

.opening-dialogue {
  position: absolute;
  z-index: 4;
  left: clamp(42vw, 49vw, 520px);
  top: 20vh;
  width: min(34vw, 390px);
  min-width: 220px;
  padding: clamp(10px, 1.8vw, 16px) clamp(13px, 2.4vw, 22px);
  border: 1px solid rgba(156, 255, 156, 0.74);
  border-radius: 8px;
  background: rgba(3, 22, 8, 0.9);
  box-shadow:
    0 0 20px rgba(156, 255, 156, 0.22),
    inset 0 0 18px rgba(156, 255, 156, 0.09);
  color: #ffffff;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.68rem, 1.8vw, 1rem);
  line-height: 1.25;
  text-shadow: 0 0 9px rgba(255, 255, 255, 0.22);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.opening-dialogue::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -9px;
  width: 17px;
  height: 17px;
  border-right: 1px solid rgba(156, 255, 156, 0.74);
  border-bottom: 1px solid rgba(156, 255, 156, 0.74);
  background: rgba(3, 22, 8, 0.9);
  transform: rotate(45deg);
}

.opening-dialogue.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.opening-tap-bubble {
  position: absolute;
  z-index: 5;
  top: var(--bubble-y, 42vh);
  width: clamp(68px, 10vmin, 104px);
  aspect-ratio: 1;
  pointer-events: auto;
  touch-action: manipulation;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
  transition: opacity 180ms ease, transform 180ms ease;
}

.opening-tap-bubble.is-left {
  left: var(--bubble-x, 24vw);
}

.opening-tap-bubble.is-right {
  left: var(--bubble-x, 76vw);
}

.opening-tap-bubble.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.opening-wizard.is-tap-tutorial-paused .opening-tap-bubble {
  pointer-events: none;
}

.opening-wizard.is-tap-tutorial-ready .opening-tap-bubble {
  pointer-events: auto;
}

.opening-wizard.is-tap-tutorial-paused .opening-tap-bubble__ring {
  animation: none !important;
}

.opening-tap-bubble.is-tutorial-target .opening-tap-bubble__ring {
  opacity: 0.82;
  transform: scale(1.32);
}

.opening-wizard.is-tap-tutorial-ready .opening-tap-bubble.is-tutorial-target .opening-tap-bubble__ring {
  animation: none !important;
  opacity: 1;
  transform: scale(0.46);
}

.opening-tap-bubble__button {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.16), transparent 18%),
    radial-gradient(circle, rgba(255, 255, 255, 0.13), rgba(210, 216, 218, 0.1) 64%, rgba(70, 76, 80, 0.16));
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.18),
    inset 0 0 18px rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
  touch-action: manipulation;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.72rem, 2.4vmin, 1.1rem);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4), 2px 2px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}

.opening-tap-bubble__ring {
  position: absolute;
  inset: -42%;
  border: 3px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  box-shadow:
    0 0 13px rgba(255, 255, 255, 0.34),
    inset 0 0 12px rgba(255, 255, 255, 0.18);
  opacity: 0;
  transform: scale(1.42);
  pointer-events: none;
}

.opening-tap-bubble.is-visible .opening-tap-bubble__ring {
  animation: opening-tap-ring-shrink 1.85s linear forwards;
}

.opening-tap-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.62vmin;
  height: 0.62vmin;
  border-radius: 50%;
  opacity: 0;
  background: #ffffff;
  box-shadow:
    0 -1vmin rgba(255, 255, 255, 0.95),
    0.8vmin -0.8vmin rgba(230, 236, 255, 0.9),
    1.1vmin 0 rgba(255, 255, 255, 0.84),
    0.8vmin 0.8vmin rgba(210, 218, 255, 0.8),
    0 1.1vmin rgba(255, 255, 255, 0.86),
    -0.8vmin 0.8vmin rgba(230, 236, 255, 0.9),
    -1.1vmin 0 rgba(255, 255, 255, 0.84),
    -0.8vmin -0.8vmin rgba(210, 218, 255, 0.8);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.3);
}

.opening-tap-bubble::before {
  content: "";
  position: absolute;
  inset: 2%;
  border: 3px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.3);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.28);
}

.opening-tap-bubble.is-popped::after {
  animation: opening-tap-dust-pop 560ms ease-out forwards;
}

.opening-tap-bubble.is-popped::before {
  animation: opening-tap-shock-pop 560ms ease-out forwards;
}

.opening-tap-bubble.is-popped .opening-tap-bubble__button,
.opening-tap-bubble.is-popped .opening-tap-bubble__ring {
  opacity: 0;
  transition: opacity 100ms ease;
}

.opening-tap-tutorial {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 0 6vw 7vh;
  color: #ffffff;
  font-family: "Courier New", Courier, monospace;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 180ms ease;
}

.opening-tap-tutorial.is-visible {
  opacity: 1;
}

.opening-tap-tutorial.is-ready {
  pointer-events: none;
}

.opening-tap-tutorial__copy {
  width: min(78vw, 760px);
  text-align: center;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.34), 2px 2px rgba(0, 0, 0, 0.72);
}

.opening-tap-tutorial__copy p {
  margin: 0 0 0.55rem;
  font-size: clamp(0.78rem, 2.5vw, 1.18rem);
  font-weight: 800;
  line-height: 1.22;
}

.opening-tap-tutorial__copy span {
  display: inline-block;
  font-size: clamp(0.58rem, 1.7vw, 0.82rem);
  letter-spacing: 0;
  opacity: 0.76;
  animation: opening-tutorial-prompt-blink 1.05s steps(2, end) infinite;
}

.opening-tap-tutorial__copy span[hidden] {
  display: none;
}

.opening-tap-tutorial__arrow {
  position: absolute;
  top: var(--bubble-y, 38vh);
  width: clamp(44px, 8vmin, 82px);
  height: clamp(18px, 3.1vmin, 32px);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.38));
  animation: opening-tutorial-arrow-nudge 900ms ease-in-out infinite;
}

.opening-tap-tutorial__arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 72%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-50%);
}

.opening-tap-tutorial__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 0.78em solid transparent;
  border-bottom: 0.78em solid transparent;
  border-left: 1.1em solid rgba(255, 255, 255, 0.9);
  transform: translateY(-50%);
}

.opening-tap-tutorial.is-left .opening-tap-tutorial__arrow {
  left: calc(var(--bubble-x, 24vw) + 11vw);
  transform: translateY(-50%) rotate(180deg);
}

.opening-tap-tutorial.is-right .opening-tap-tutorial__arrow {
  left: calc(var(--bubble-x, 76vw) - 17vw);
  transform: translateY(-50%);
}

.opening-forest__sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 52% 18%, rgba(181, 238, 255, 0.9) 0 2.4vw, transparent 2.5vw),
    radial-gradient(circle at 48% 34%, rgba(73, 178, 143, 0.18), transparent 16vw);
  opacity: 0.7;
}

.opening-forest__stars {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.opening-forest__star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0.42vmin;
  height: 0.42vmin;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.55);
  opacity: 0.28;
  transform: translate(-50%, -50%) scale(var(--scale));
  animation: opening-star-blink 3.4s ease-in-out var(--delay) infinite;
}

.opening-forest__constellation {
  position: absolute;
  top: 13vh;
  width: min(24vw, 230px);
  height: auto;
  overflow: visible;
  opacity: 0;
  transform: translateX(-50%) rotate(-10deg) scale(0.92);
}

.opening-forest__constellation.is-left {
  left: 22%;
}

.opening-forest__constellation.is-right {
  left: 78%;
}

.opening-forest__constellation path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.46);
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 2px rgba(156, 255, 156, 0.32));
}

.opening-forest__constellation circle {
  fill: #fff;
  opacity: 0;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.45));
}

.opening-wizard.is-path-running .opening-forest__constellation {
  animation: opening-constellation-glow 10s ease-in-out 13s infinite;
}

.opening-wizard.is-path-running .opening-forest__constellation path {
  animation: opening-constellation-draw 10s ease-in-out calc(13s + var(--draw-delay)) infinite;
}

.opening-wizard.is-path-running .opening-forest__constellation circle {
  animation: opening-constellation-star 10s ease-in-out 13s infinite;
}

.opening-forest__party-lights {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 35vh;
  width: 50vw;
  height: 36vh;
  pointer-events: none;
  transform: translateX(-50%);
}

.opening-forest__party-light {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 13vw;
  height: 34vh;
  clip-path: polygon(43% 100%, 57% 100%, 100% 0, 0 0);
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255, 255, 255, 0.24), transparent 28%),
    linear-gradient(to top, rgba(156, 255, 156, 0.02), rgba(156, 255, 156, 0.28), transparent 82%);
  mix-blend-mode: screen;
  transform-origin: 50% 100%;
  filter: blur(0.75px);
  opacity: 0;
}

.opening-forest__party-light--1 {
  left: 20%;
  animation: opening-party-beam-one 5.8s ease-in-out infinite;
}

.opening-forest__party-light--2 {
  left: 40%;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(to top, rgba(255, 248, 173, 0.02), rgba(255, 248, 173, 0.24), transparent 82%);
  animation: opening-party-beam-two 6.4s ease-in-out 0.8s infinite;
}

.opening-forest__party-light--3 {
  left: 60%;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255, 255, 255, 0.2), transparent 28%),
    linear-gradient(to top, rgba(152, 226, 255, 0.02), rgba(152, 226, 255, 0.22), transparent 82%);
  animation: opening-party-beam-three 5.5s ease-in-out 1.9s infinite;
}

.opening-forest__party-light--4 {
  left: 80%;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(to top, rgba(206, 156, 255, 0.02), rgba(206, 156, 255, 0.2), transparent 82%);
  animation: opening-party-beam-four 6.8s ease-in-out 2.7s infinite;
}

.opening-forest__fireworks {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 43vh;
  width: 48vw;
  height: 26vh;
  pointer-events: none;
  transform: translateX(-50%);
}

.opening-forest__firework {
  position: absolute;
  width: 0.42vmin;
  height: 0.42vmin;
  border-radius: 50%;
  opacity: 0;
  background: #fff8ad;
  box-shadow:
    0 -2.6vmin #fff8ad,
    1.9vmin -1.9vmin #9cff9c,
    2.8vmin 0 #98e2ff,
    1.9vmin 1.9vmin #ce9cff,
    0 2.7vmin #fff8ad,
    -1.9vmin 1.9vmin #9cff9c,
    -2.8vmin 0 #98e2ff,
    -1.9vmin -1.9vmin #ce9cff;
  filter: drop-shadow(0 0 7px rgba(255, 248, 173, 0.55));
  transform: scale(0.2);
}

.opening-forest__firework--1 {
  left: 22%;
  top: 34%;
  animation: opening-firework-burst 4.8s ease-out 0.4s infinite;
}

.opening-forest__firework--2 {
  left: 62%;
  top: 18%;
  background: #9cff9c;
  animation: opening-firework-burst 5.6s ease-out 2.2s infinite;
}

.opening-forest__firework--3 {
  left: 78%;
  top: 42%;
  background: #98e2ff;
  animation: opening-firework-burst 6.2s ease-out 3.7s infinite;
}

.opening-forest__firework--4 {
  left: 38%;
  top: 13%;
  background: #ce9cff;
  animation: opening-firework-burst 5.2s ease-out 4.4s infinite;
}

.opening-forest__firework--5 {
  left: 52%;
  top: 48%;
  animation: opening-firework-burst 6.8s ease-out 6s infinite;
}

.opening-forest__mountain-explosion {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 36vh;
  width: 42vw;
  height: 28vh;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) scale(0.1);
  background:
    radial-gradient(circle, rgba(247, 255, 218, 1) 0 7%, rgba(156, 255, 156, 0.92) 8% 20%, rgba(43, 255, 93, 0.5) 21% 44%, transparent 70%),
    radial-gradient(circle at 25% 60%, rgba(156, 255, 156, 0.55), transparent 28%),
    radial-gradient(circle at 76% 45%, rgba(255, 248, 173, 0.45), transparent 25%);
  filter:
    blur(0.4px)
    drop-shadow(0 0 24px rgba(156, 255, 156, 0.7))
    drop-shadow(0 0 48px rgba(43, 255, 93, 0.35));
}

.opening-forest.is-mountain-exploding .opening-forest__mountain-explosion {
  animation: opening-mountain-green-explosion 1.2s ease-out;
}

.opening-forest__mountain-explosion::before,
.opening-forest__mountain-explosion::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 1vmin;
  height: 1vmin;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
}

.opening-forest__mountain-explosion::before {
  background: #dfff9c;
  box-shadow:
    0 -16vmin #9cff9c,
    8vmin -12vmin #e8ffb0,
    16vmin -4vmin #45ff70,
    13vmin 8vmin #9cff9c,
    4vmin 15vmin #f7ffda,
    -8vmin 12vmin #45ff70,
    -16vmin 4vmin #9cff9c,
    -12vmin -9vmin #e8ffb0,
    23vmin -10vmin rgba(69, 255, 112, 0.78),
    -23vmin -7vmin rgba(156, 255, 156, 0.72),
    24vmin 10vmin rgba(247, 255, 218, 0.68),
    -22vmin 12vmin rgba(69, 255, 112, 0.72);
}

.opening-forest__mountain-explosion::after {
  width: 36vw;
  height: 24vh;
  background:
    linear-gradient(62deg, transparent 0 44%, rgba(231, 255, 196, 0.9) 45% 47%, transparent 48%),
    linear-gradient(118deg, transparent 0 48%, rgba(69, 255, 112, 0.78) 49% 51%, transparent 52%),
    linear-gradient(22deg, transparent 0 50%, rgba(156, 255, 156, 0.72) 51% 53%, transparent 54%);
  filter: drop-shadow(0 0 10px rgba(156, 255, 156, 0.8));
}

.opening-forest.is-mountain-exploding .opening-forest__mountain-explosion::before {
  animation: opening-mountain-green-shards 1.2s ease-out;
}

.opening-forest.is-mountain-exploding .opening-forest__mountain-explosion::after {
  animation: opening-mountain-green-lightning 1.2s steps(2, end);
}

.opening-forest__big-fireworks {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 42vh;
  width: 44vw;
  height: 34vh;
  pointer-events: none;
  transform: translateX(-50%);
}

.opening-forest__big-firework {
  position: absolute;
  bottom: 0;
  width: 1vmin;
  height: 1vmin;
}

.opening-forest__big-firework--1 {
  left: 27%;
}

.opening-forest__big-firework--2 {
  left: 72%;
}

.opening-forest__big-firework-rocket {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0.5vmin;
  height: 0.5vmin;
  border-radius: 50%;
  background: #fff8ad;
  box-shadow:
    0 0 8px rgba(255, 248, 173, 0.9),
    0 0 16px rgba(156, 255, 156, 0.55);
  opacity: 0;
  will-change: transform, opacity;
}

.opening-forest__big-firework-rocket::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 70%;
  width: 0.38vmin;
  height: 10vmin;
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255, 248, 173, 0.88), rgba(156, 255, 156, 0.48), transparent);
  transform: translateX(-50%);
}

.opening-forest__big-firework-burst {
  position: absolute;
  left: 0;
  bottom: 24vh;
  width: 0.7vmin;
  height: 0.7vmin;
  border-radius: 50%;
  background: #fff8ad;
  opacity: 0;
  box-shadow:
    0 -8vmin #fff8ad,
    4.4vmin -6.5vmin #9cff9c,
    7.8vmin -3.1vmin #98e2ff,
    8.4vmin 2vmin #ce9cff,
    5.4vmin 6.6vmin #fff8ad,
    0 8.7vmin #9cff9c,
    -5.5vmin 6.5vmin #98e2ff,
    -8.4vmin 1.6vmin #ce9cff,
    -7.4vmin -3.4vmin #fff8ad,
    -4.2vmin -6.7vmin #9cff9c,
    0 -12vmin rgba(255, 248, 173, 0.78),
    8.6vmin -8.8vmin rgba(152, 226, 255, 0.78),
    12vmin 0 rgba(206, 156, 255, 0.78),
    8.4vmin 8.5vmin rgba(156, 255, 156, 0.78),
    0 12.2vmin rgba(255, 248, 173, 0.78),
    -8.5vmin 8.2vmin rgba(152, 226, 255, 0.78),
    -12vmin 0 rgba(206, 156, 255, 0.78),
    -8.5vmin -8.5vmin rgba(156, 255, 156, 0.78);
  filter: drop-shadow(0 0 14px rgba(255, 248, 173, 0.82));
  transform: scale(0.12);
  will-change: transform, opacity;
}

.opening-forest__big-firework--1 .opening-forest__big-firework-rocket {
  animation: none;
}

.opening-forest__big-firework--1 .opening-forest__big-firework-burst {
  left: -5vw;
  animation: none;
}

.opening-forest__big-firework--2 .opening-forest__big-firework-rocket {
  animation: none;
}

.opening-forest__big-firework--2 .opening-forest__big-firework-burst {
  left: 5vw;
  animation: none;
}

.opening-wizard.is-path-running .opening-forest__big-firework--1 .opening-forest__big-firework-rocket {
  animation: opening-big-firework-rocket-left 14s linear 7s infinite;
}

.opening-wizard.is-path-running .opening-forest__big-firework--1 .opening-forest__big-firework-burst {
  animation: opening-big-firework-burst 14s ease-out 7s infinite;
}

.opening-wizard.is-path-running .opening-forest__big-firework--2 .opening-forest__big-firework-rocket {
  animation: opening-big-firework-rocket-right 14s linear 14s infinite;
}

.opening-wizard.is-path-running .opening-forest__big-firework--2 .opening-forest__big-firework-burst {
  animation: opening-big-firework-burst 14s ease-out 14s infinite;
}

.opening-forest__path {
  position: absolute;
  left: 50%;
  bottom: -18vh;
  width: 58vw;
  height: 52vh;
  background:
    linear-gradient(90deg, transparent 0 5%, rgba(255, 212, 125, 0.14) 8% 14%, transparent 17% 83%, rgba(255, 212, 125, 0.12) 86% 92%, transparent 95%),
    repeating-linear-gradient(0deg, rgba(87, 49, 26, 0.92) 0 9px, rgba(116, 72, 38, 0.92) 10px 18px);
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 -8px 18px rgba(81, 255, 151, 0.08));
  opacity: 0.96;
  transform: translateX(-50%);
}

.opening-wizard.is-path-running .opening-forest__path {
  animation: opening-path-rush 0.72s linear infinite;
}

.opening-forest__speed-lines {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.opening-wizard.is-path-running .opening-forest__speed-lines {
  animation: opening-speed-lines-reveal 700ms ease-out 500ms forwards;
}

.opening-forest__speed-lines span {
  position: absolute;
  left: var(--x);
  top: -18vh;
  width: 1px;
  height: var(--length);
  border-radius: 999px;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
  opacity: 0;
  transform: rotate(7deg);
}

.opening-wizard.is-path-running .opening-forest__speed-lines span {
  animation: opening-speed-line-rush 780ms linear var(--delay) infinite;
}

.opening-travel-hud {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 15.5vh;
  width: min(44vw, 390px);
  height: 8vh;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.3));
}

.opening-wizard.is-travel-hud-active .opening-travel-hud {
  animation: opening-travel-hud-life 23.5s ease-in-out forwards;
}

.opening-wizard.is-path-complete .opening-travel-hud {
  opacity: 0.88;
  animation: none;
}

.opening-travel-hud__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: rgba(255, 255, 255, 0.88);
  transform: translateY(-50%) scaleX(0);
  transform-origin: 0 50%;
}

.opening-wizard.is-travel-hud-active .opening-travel-hud__line {
  animation: opening-travel-line-draw 760ms ease-out forwards;
}

.opening-travel-hud__post {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 2.4vh;
  background: rgba(255, 255, 255, 0.88);
  opacity: 0;
  transform: translateY(-50%);
}

.opening-travel-hud__post--start {
  left: 0;
}

.opening-travel-hud__post--end {
  right: 0;
}

.opening-wizard.is-travel-hud-active .opening-travel-hud__post {
  animation: opening-travel-post-reveal 420ms ease-out 350ms forwards;
}

.opening-travel-hud__treasure {
  position: absolute;
  right: -3.2vmin;
  top: 48%;
  width: 2.7vmin;
  height: 2.7vmin;
  opacity: 0;
  transform: translateY(-50%) rotate(-8deg);
}

.opening-travel-hud__treasure::before,
.opening-travel-hud__treasure::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 34%;
  border: 2px solid #3a0707;
  border-radius: 4px;
  background: #d52121;
  box-shadow: 0 0 8px rgba(255, 65, 65, 0.4);
  transform: translate(-50%, -50%) rotate(45deg);
}

.opening-travel-hud__treasure::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.opening-wizard.is-travel-hud-active .opening-travel-hud__treasure {
  animation: opening-travel-post-reveal 420ms ease-out 550ms forwards;
}

.opening-wizard.is-path-complete .opening-travel-hud__line {
  transform: translateY(-50%) scaleX(1);
}

.opening-travel-hud__marker {
  position: absolute;
  left: 0;
  top: 50%;
  width: clamp(14px, 3vmin, 24px);
  aspect-ratio: 1;
  opacity: 0;
  border: 2px solid #2d1900;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff4aa 0 18%, transparent 19%),
    radial-gradient(circle, #ffd94a 0 46%, #b66a13 47% 100%);
  box-shadow:
    0 0 10px rgba(255, 217, 74, 0.72),
    0 0 18px rgba(255, 179, 36, 0.34);
  transform: translate(-50%, -50%);
}

.opening-wizard.is-travel-hud-active .opening-travel-hud__marker {
  animation: opening-travel-wizard-progress 21.2s linear 620ms forwards;
}

.opening-wizard.is-path-complete .opening-travel-hud__marker {
  left: 100%;
  opacity: 1;
  animation: none;
  transform: translate(-50%, -50%) scale(0.82);
}

.opening-travel-hud__play {
  position: absolute;
  left: 50%;
  top: 6.1vh;
  display: flex;
  align-items: center;
  gap: 1.2vmin;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.92rem, 3vmin, 1.45rem);
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  text-shadow: 0 0 9px rgba(255, 255, 255, 0.34), 2px 2px rgba(0, 0, 0, 0.75);
  transform: translateX(-50%) translateY(6px) scale(0.92);
}

.opening-travel-hud__play::before,
.opening-travel-hud__play::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 0.72em solid transparent;
  border-bottom: 0.72em solid transparent;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.42));
  transform: translateY(-50%);
}

.opening-travel-hud__play::before {
  left: -2.4em;
  border-left: 1.2em solid rgba(255, 255, 255, 0.92);
}

.opening-travel-hud__play::after {
  right: -2.4em;
  border-right: 1.2em solid rgba(255, 255, 255, 0.92);
}

.opening-wizard.is-path-complete .opening-travel-hud__play {
  opacity: 1;
  pointer-events: auto;
  animation: opening-play-prompt-jiggle 1.7s ease-in-out infinite;
}

.opening-wizard.is-path-complete .opening-travel-hud__play::before {
  animation: opening-play-arrow-pulse-left 850ms ease-in-out infinite;
}

.opening-wizard.is-path-complete .opening-travel-hud__play::after {
  animation: opening-play-arrow-pulse-right 850ms ease-in-out infinite;
}

.opening-travel-hud__goblin {
  position: relative;
  width: 9em;
  height: 6em;
  font-size: clamp(4px, 0.72vmin, 7px);
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 7px rgba(93, 255, 130, 0.58))
    drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.65));
}

.opening-travel-hud__goblin::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1em;
  height: 1em;
  background: #7dff83;
  box-shadow:
    2em 0 #7dff83,
    6em 0 #7dff83,
    1em 1em #7dff83,
    2em 1em #7dff83,
    3em 1em #7dff83,
    5em 1em #7dff83,
    6em 1em #7dff83,
    7em 1em #7dff83,
    0 2em #7dff83,
    1em 2em #7dff83,
    2em 2em #7dff83,
    3em 2em #7dff83,
    4em 2em #7dff83,
    5em 2em #7dff83,
    6em 2em #7dff83,
    7em 2em #7dff83,
    8em 2em #7dff83,
    0 3em #7dff83,
    2em 3em #7dff83,
    3em 3em #7dff83,
    4em 3em #7dff83,
    5em 3em #7dff83,
    6em 3em #7dff83,
    8em 3em #7dff83,
    0 4em #7dff83,
    1em 4em #7dff83,
    2em 4em #7dff83,
    3em 4em #7dff83,
    4em 4em #7dff83,
    5em 4em #7dff83,
    6em 4em #7dff83,
    7em 4em #7dff83,
    8em 4em #7dff83,
    1em 5em #7dff83,
    3em 5em #7dff83,
    5em 5em #7dff83,
    7em 5em #7dff83;
}

.opening-travel-hud__goblin::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1em;
  height: 1em;
  background: #08150a;
  box-shadow:
    2em 2em #08150a,
    6em 2em #08150a,
    3em 4em #08150a,
    4em 4em #08150a,
    5em 4em #08150a;
}

.opening-forest__horizon {
  position: absolute;
  left: 50%;
  bottom: 34vh;
  width: 38vw;
  height: 18vh;
  background:
    repeating-linear-gradient(90deg, rgba(18, 80, 58, 0.84) 0 7px, rgba(6, 42, 32, 0.92) 8px 14px);
  clip-path: polygon(0 100%, 8% 45%, 14% 100%, 22% 28%, 30% 100%, 40% 18%, 50% 100%, 62% 26%, 70% 100%, 79% 42%, 88% 100%, 96% 54%, 100% 100%);
  opacity: 0.72;
  transform: translateX(-50%);
}

.opening-forest__prop {
  position: absolute;
  z-index: var(--z, 1);
  left: var(--x);
  bottom: var(--y);
  width: var(--size);
  height: var(--size);
  opacity: var(--alpha, 1);
  transform: translateX(-50%) scale(var(--scale, 1));
  transform-origin: 50% 100%;
  image-rendering: pixelated;
}

.opening-wizard.is-path-running .opening-forest__start-prop {
  animation: opening-forest-start-prop-rush var(--run-duration) linear var(--run-delay) forwards;
}

.opening-forest__prop--tree {
  height: calc(var(--size) * 1.95);
}

.opening-forest__prop--tree::before {
  content: "";
  position: absolute;
  left: 36%;
  bottom: 0;
  width: 28%;
  height: 72%;
  background:
    linear-gradient(90deg, #2a160d, #6e3c1d 42%, #1b0d08 100%);
  border: 3px solid #080604;
  box-shadow:
    inset 8px 0 rgba(255, 171, 75, 0.12),
    inset -8px 0 rgba(0, 0, 0, 0.35);
}

.opening-forest__prop--tree::after {
  content: "";
  position: absolute;
  left: 5%;
  top: 0;
  width: 90%;
  height: 58%;
  background:
    radial-gradient(circle at 30% 50%, #1f7f45 0 22%, transparent 23%),
    radial-gradient(circle at 58% 30%, #2f9a52 0 24%, transparent 25%),
    radial-gradient(circle at 68% 62%, #145e38 0 28%, transparent 29%),
    radial-gradient(circle at 45% 65%, #1f7f45 0 31%, transparent 32%);
  filter: drop-shadow(0 0 9px rgba(85, 255, 143, 0.15));
}

.opening-forest__prop--rock {
  height: calc(var(--size) * 0.58);
  border: 3px solid #080a0f;
  border-radius: 44% 56% 38% 62% / 54% 46% 54% 46%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.18) 0 12%, transparent 13%),
    linear-gradient(135deg, #5d6980, #242938 78%);
  box-shadow: inset -8px -8px rgba(0, 0, 0, 0.22), 0 0 8px rgba(93, 214, 255, 0.08);
}

.opening-forest__prop--mushroom {
  height: calc(var(--size) * 0.72);
}

.opening-forest__prop--mushroom::before {
  content: "";
  position: absolute;
  left: 40%;
  bottom: 0;
  width: 20%;
  height: 46%;
  background: #e7d7aa;
  border: 2px solid #100a08;
}

.opening-forest__prop--mushroom::after {
  content: "";
  position: absolute;
  left: 17%;
  bottom: 34%;
  width: 66%;
  height: 42%;
  border: 2px solid #100a08;
  border-radius: 999px 999px 8px 8px;
  background:
    radial-gradient(circle at 28% 42%, #ffffff 0 9%, transparent 10%),
    radial-gradient(circle at 58% 26%, #ffffff 0 8%, transparent 9%),
    #8f2f54;
}

.opening-forest__prop--glow {
  width: calc(var(--size) * 0.24);
  height: calc(var(--size) * 0.24);
  border-radius: 50%;
  background: #9cff9c;
  box-shadow: 0 0 12px #9cff9c, 0 0 24px rgba(156, 255, 156, 0.65);
  animation: opening-forest-glow 1.8s ease-in-out infinite;
}

.opening-forest__run-prop {
  position: absolute;
  z-index: var(--z, 2);
  left: var(--start-x);
  bottom: var(--start-y);
  width: var(--base-size);
  height: var(--base-size);
  opacity: 0;
  transform: translateX(-50%) scale(0.12);
  transform-origin: 50% 100%;
  image-rendering: pixelated;
}

.opening-forest__run-prop.opening-forest__prop--tree {
  height: calc(var(--base-size) * 1.95);
}

.opening-forest__run-prop.opening-forest__prop--rock {
  height: calc(var(--base-size) * 0.58);
}

.opening-forest__run-prop.opening-forest__prop--mushroom {
  height: calc(var(--base-size) * 0.72);
}

.opening-wizard.is-path-running .opening-forest__run-prop {
  animation: opening-forest-run-prop var(--run-duration) linear var(--run-delay) infinite;
}

.opening-wizard__runner,
.opening-wizard__idle,
.opening-wizard__path-runner {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 4vh;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 18px rgba(156, 255, 156, 0.36))
    drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.72));
  transform-origin: 50% 88%;
}

.opening-wizard__runner {
  width: clamp(132px, 21vw, 246px);
  aspect-ratio: 354 / 373;
  background: url("assets/wizard-run-v2-tight.png") 0 0 / 800% 100% no-repeat;
  opacity: 0;
  transform: translate3d(-28vw, 0, 0);
}

.opening-wizard.is-active .opening-wizard__runner {
  animation:
    menu-wizard-run-frames 0.58s step-end infinite,
    opening-wizard-run-in 3.1s linear forwards;
}

.opening-wizard__idle {
  left: 39vw;
  width: clamp(100px, 15.7vw, 184px);
  aspect-ratio: 543 / 724;
  background: url("assets/cute-wizard-design-wave-staff-aligned.png") 0 0 / 400% 100% no-repeat;
  opacity: 0;
  transform: translate3d(0, 0, 0) scaleY(1);
}

.opening-wizard.is-active .opening-wizard__idle {
  animation:
    opening-wizard-idle-reveal 3.1s ease-in-out forwards,
    opening-wizard-breathe 2.2s ease-in-out 2.65s infinite;
}

.opening-wizard.is-path-running .opening-wizard__idle {
  opacity: 0;
  animation: none;
}

.opening-wizard__path-runner {
  left: 39vw;
  bottom: 5vh;
  width: clamp(112px, 17vw, 204px);
  aspect-ratio: 290 / 341;
  background: url("assets/wizard-run-back-tight.png") 0 0 / 800% 100% no-repeat;
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1);
}

.opening-wizard.is-path-running .opening-wizard__path-runner {
  opacity: 1;
  animation:
    menu-wizard-run-frames 0.72s step-end infinite,
    opening-path-camera-bob 1.12s ease-in-out infinite;
}

.wizard-hologram {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(126vw, 132vh, 1160px);
  max-height: 112vh;
  object-fit: contain;
  object-position: bottom center;
  opacity: 0;
  filter: grayscale(0.35) sepia(0.18) hue-rotate(62deg) saturate(1.35)
    drop-shadow(0 0 18px rgba(156, 255, 156, 0.28));
  transform: translateX(-50%);
}

.wizard-hologram.is-visible {
  animation: wizard-hologram-arrive 1.15s ease-out forwards;
}

.wizard-hologram::selection {
  background: transparent;
}

.wizard-speech {
  position: absolute;
  top: 13vh;
  right: clamp(18px, 8vw, 110px);
  width: min(46vw, 360px);
  min-width: clamp(170px, 32vw, 240px);
  padding: clamp(10px, 2vw, 16px) clamp(14px, 2.8vw, 22px);
  border: 1px solid rgba(156, 255, 156, 0.7);
  border-radius: 10px;
  background: rgba(4, 24, 10, 0.84);
  box-shadow: 0 0 18px rgba(156, 255, 156, 0.22), inset 0 0 16px rgba(156, 255, 156, 0.08);
  color: var(--foreground-color);
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.8rem, 2.6vw, 1.15rem);
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.24);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.wizard-speech::after {
  content: "";
  position: absolute;
  right: clamp(18px, 4vw, 36px);
  bottom: -10px;
  width: 18px;
  height: 18px;
  border-right: 1px solid rgba(156, 255, 156, 0.7);
  border-bottom: 1px solid rgba(156, 255, 156, 0.7);
  background: rgba(4, 24, 10, 0.84);
  transform: rotate(45deg);
}

.wizard-speech.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.loading-scene.is-ending .wizard-hologram,
.loading-scene.is-ending .wizard-speech {
  opacity: 0;
  transition: opacity 800ms ease;
}

.mini-game-intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vh, 20px);
  padding: clamp(14px, 4vw, 28px);
  color: var(--foreground-color);
  font-family: "Courier New", Courier, monospace;
  text-align: center;
  overflow: hidden;
  transition: opacity 700ms ease;
}

.mini-game-intro.is-entering {
  opacity: 0;
}

.mini-game-intro.is-exiting {
  opacity: 0;
}

.mini-game-intro__wormhole {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 24% 32%, rgba(156, 255, 156, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 22%, rgba(156, 255, 156, 0.75) 0 1px, transparent 2px),
    radial-gradient(circle at 48% 76%, rgba(156, 255, 156, 0.68) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 68%, rgba(156, 255, 156, 0.86) 0 1px, transparent 2px),
    radial-gradient(circle at 15% 74%, rgba(156, 255, 156, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at center, rgba(177, 92, 255, 0.16), transparent 58%);
  background-size: 160px 110px, 220px 140px, 180px 130px, 260px 170px, 210px 150px, 100% 100%;
  opacity: 0.8;
  animation: star-twinkle 2.6s steps(2, end) infinite, star-drift 14s linear infinite;
}

.mini-game-intro::before,
.mini-game-intro::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 34vw;
  height: 18vh;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(156, 255, 156, 0.16), transparent 70%);
  filter: blur(8px);
  opacity: 0.4;
  animation: smoke-drift 5.5s ease-in-out infinite;
}

.mini-game-intro::before {
  left: 18%;
  top: 24%;
}

.mini-game-intro::after {
  right: 16%;
  bottom: 24%;
  animation-delay: -2s;
}

.mini-game-intro__wormhole::before,
.mini-game-intro__wormhole::after {
  content: "";
  position: absolute;
  width: 46vw;
  height: 28vh;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 20% 44%, rgba(156, 255, 156, 0.1), transparent 64%),
    radial-gradient(ellipse at 64% 52%, rgba(255, 255, 255, 0.08), transparent 58%);
  filter: blur(13px);
  opacity: 0.44;
  mix-blend-mode: screen;
  animation: menu-smoke-swirl 9s ease-in-out infinite;
}

.mini-game-intro__wormhole::before {
  left: 4%;
  top: 10%;
}

.mini-game-intro__wormhole::after {
  right: 2%;
  bottom: 8%;
  animation-delay: -4s;
}

.arcade-logo {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: min(86vw, 680px);
  padding: clamp(16px, 3vw, 28px) clamp(24px, 6vw, 54px);
  border: 4px double rgba(156, 255, 156, 0.92);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(156, 255, 156, 0.12), transparent 18% 82%, rgba(156, 255, 156, 0.12)),
    rgba(4, 18, 8, 0.72);
  color: var(--terminal-green);
  box-shadow:
    0 0 0 3px rgba(177, 92, 255, 0.28),
    0 0 28px rgba(156, 255, 156, 0.38),
    inset 0 0 26px rgba(156, 255, 156, 0.14);
  transform: skewX(-6deg);
  animation: arcade-logo-float 1.8s ease-in-out infinite;
}

.arcade-logo::before,
.arcade-logo::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.arcade-logo::before {
  inset: -18px;
  border: 2px solid rgba(156, 255, 156, 0.34);
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(156, 255, 156, 0.22);
}

.arcade-logo::after {
  display: none;
}

.arcade-logo__line {
  display: block;
  position: relative;
  z-index: 1;
  font-size: clamp(2rem, 9vw, 5.6rem);
  font-weight: 900;
  line-height: 0.78;
  text-transform: uppercase;
  text-shadow:
    2px 2px 0 #041208,
    -2px -2px 0 #041208,
    2px -2px 0 #041208,
    -2px 2px 0 #041208,
    4px 4px 0 rgba(177, 92, 255, 0.55),
    -3px -2px 0 rgba(96, 207, 255, 0.35),
    0 0 14px rgba(156, 255, 156, 0.66);
  -webkit-text-stroke: 1px rgba(225, 255, 225, 0.72);
}

.arcade-logo__line--bottom {
  margin-top: 0.08em;
  color: #ffffff;
}

.arcade-logo__leaf {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  display: inline-block;
  width: clamp(190px, 40vw, 360px);
  height: clamp(170px, 34vw, 310px);
  margin: 0;
  background: transparent;
  filter:
    drop-shadow(0 0 14px rgba(156, 255, 156, 0.55))
    drop-shadow(0 2px 0 #000);
  opacity: 0.28;
  transform: translate(-50%, -50%) rotate(-5deg);
  animation: leaf-back-glow 1.8s ease-in-out infinite;
}

.arcade-logo__leaf::before,
.arcade-logo__leaf::after {
  content: "";
  position: absolute;
  inset: 0;
}

.arcade-logo__leaf::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 26%),
    linear-gradient(90deg, #1f8f35, #54f064 50%, #188432);
  clip-path: polygon(
    50% 0,
    52% 9%,
    55% 17%,
    54% 25%,
    58% 37%,
    65% 28%,
    70% 19%,
    78% 11%,
    76% 25%,
    85% 22%,
    96% 25%,
    86% 35%,
    78% 47%,
    92% 46%,
    100% 54%,
    87% 58%,
    74% 65%,
    83% 74%,
    86% 84%,
    73% 80%,
    61% 73%,
    58% 85%,
    52% 100%,
    50% 88%,
    48% 100%,
    42% 85%,
    39% 73%,
    27% 80%,
    14% 84%,
    17% 74%,
    26% 65%,
    13% 58%,
    0 54%,
    8% 46%,
    22% 47%,
    14% 35%,
    4% 25%,
    15% 22%,
    24% 25%,
    22% 11%,
    30% 19%,
    35% 28%,
    42% 37%,
    46% 25%,
    45% 17%,
    48% 9%
  );
}

.arcade-logo__leaf::after {
  background:
    linear-gradient(90deg, transparent 49%, rgba(8, 38, 21, 0.94) 49% 51%, transparent 51%),
    linear-gradient(34deg, transparent 46%, rgba(8, 38, 21, 0.76) 46% 48%, transparent 48%),
    linear-gradient(-34deg, transparent 52%, rgba(8, 38, 21, 0.76) 52% 54%, transparent 54%),
    linear-gradient(57deg, transparent 47%, rgba(8, 38, 21, 0.72) 47% 49%, transparent 49%),
    linear-gradient(-57deg, transparent 51%, rgba(8, 38, 21, 0.72) 51% 53%, transparent 53%),
    radial-gradient(ellipse at 35% 28%, rgba(255, 255, 255, 0.42) 0 7%, transparent 8%),
    radial-gradient(ellipse at 65% 28%, rgba(255, 255, 255, 0.3) 0 6%, transparent 7%);
  clip-path: polygon(50% 0, 100% 54%, 52% 100%, 48% 100%, 0 54%);
  opacity: 0.85;
}

.mini-game-intro__prompt {
  position: relative;
  z-index: 1;
  color: var(--foreground-color) !important;
  margin: clamp(8px, 2.5vh, 20px) 0 0;
  font-size: clamp(0.58rem, 1.8vw, 0.86rem) !important;
  opacity: 0.35;
  animation: slow-prompt-blink 2.2s ease-in-out infinite;
}

.fantasy-floater {
  position: absolute;
  z-index: 1;
  width: 42px;
  height: 42px;
  opacity: 0.84;
  filter: drop-shadow(0 0 10px rgba(156, 255, 156, 0.42));
}

.fantasy-floater--fairy {
  top: 14%;
  left: -42px;
  background:
    radial-gradient(ellipse at 28% 46%, rgba(96, 207, 255, 0.9) 0 18%, transparent 19%),
    radial-gradient(ellipse at 72% 46%, rgba(96, 207, 255, 0.9) 0 18%, transparent 19%),
    linear-gradient(#b15cff 0 0) 45% 28% / 10px 24px no-repeat,
    radial-gradient(circle at 50% 18%, #fff 0 10%, transparent 11%);
  animation: fantasy-fly-one 6.2s linear infinite;
}

.fantasy-floater--tree {
  right: -50px;
  bottom: 18%;
  background:
    linear-gradient(#6d421f 0 0) 18px 20px / 7px 22px no-repeat,
    linear-gradient(#9cff9c 0 0) 5px 8px / 32px 14px no-repeat,
    linear-gradient(#6be46f 0 0) 10px 0 / 22px 14px no-repeat,
    linear-gradient(#2f9f3a 0 0) 13px 26px / 16px 8px no-repeat;
  transform: scale(1.3);
  animation: fantasy-fly-two 7.4s linear infinite;
}

.fantasy-floater--mushroom {
  left: 14%;
  bottom: -42px;
  background:
    linear-gradient(#f5e8c6 0 0) 16px 21px / 11px 18px no-repeat,
    linear-gradient(#d93131 0 0) 5px 9px / 34px 13px no-repeat,
    linear-gradient(#d93131 0 0) 12px 1px / 20px 13px no-repeat,
    linear-gradient(#fff 0 0) 11px 12px / 6px 4px no-repeat,
    linear-gradient(#fff 0 0) 25px 6px / 5px 5px no-repeat;
  transform: scale(0.95);
  animation: fantasy-fly-three 5.7s linear infinite;
}

.fantasy-floater--frog {
  left: -52px;
  bottom: 32%;
  background:
    linear-gradient(#57d65d 0 0) 7px 16px / 30px 18px no-repeat,
    linear-gradient(#57d65d 0 0) 0 26px / 12px 7px no-repeat,
    linear-gradient(#57d65d 0 0) 32px 26px / 12px 7px no-repeat,
    radial-gradient(circle at 16px 15px, #fff 0 5px, transparent 6px),
    radial-gradient(circle at 29px 15px, #fff 0 5px, transparent 6px),
    radial-gradient(circle at 16px 15px, #000 0 2px, transparent 3px),
    radial-gradient(circle at 29px 15px, #000 0 2px, transparent 3px);
  animation: fantasy-fly-four 8.4s linear infinite;
}

.fantasy-floater--hat {
  right: 18%;
  top: -48px;
  background:
    linear-gradient(#b15cff 0 0) 8px 29px / 30px 8px no-repeat,
    linear-gradient(135deg, transparent 0 34%, #5b2ba0 35% 64%, transparent 65%) 7px 0 / 30px 32px no-repeat,
    linear-gradient(#ffd64a 0 0) 18px 24px / 10px 4px no-repeat;
  animation: fantasy-fly-five 6.8s linear infinite;
}

.fantasy-floater--leaf-charm {
  right: -38px;
  top: 22%;
  width: 52px;
  height: 52px;
  background:
    linear-gradient(90deg, transparent 48%, #092d1a 48% 52%, transparent 52%),
    linear-gradient(90deg, #1f8f35, #54f064 52%, #188432);
  clip-path: polygon(
    50% 0,
    55% 22%,
    75% 4%,
    72% 27%,
    96% 21%,
    78% 43%,
    100% 51%,
    76% 58%,
    88% 76%,
    63% 69%,
    53% 92%,
    50% 100%,
    47% 92%,
    37% 69%,
    12% 76%,
    24% 58%,
    0 51%,
    22% 43%,
    4% 21%,
    28% 27%,
    25% 4%,
    45% 22%
  );
  box-shadow: inset 0 0 0 2px rgba(5, 22, 10, 0.78);
  animation: fantasy-fly-six 5.1s linear infinite;
}

.fantasy-floater--smoke-stick {
  right: -52px;
  top: 64%;
  width: 46px;
  height: 86px;
  opacity: 0.9;
  background:
    linear-gradient(90deg, transparent 0 21px, #111 21px 24px, transparent 24px),
    linear-gradient(120deg, transparent 0 37%, #4c4632 38% 43%, transparent 44%),
    linear-gradient(84deg, #d8cfa9 0 45%, #7a6f4f 46% 100%);
  clip-path: polygon(42% 18%, 78% 18%, 65% 100%, 18% 100%);
  animation: fantasy-fly-seven 8.4s linear infinite;
}

.fantasy-floater--smoke-stick::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -46px;
  width: 58px;
  height: 62px;
  background:
    radial-gradient(ellipse at 20% 78%, transparent 0 24%, #ffffff 25% 31%, transparent 32%),
    radial-gradient(ellipse at 55% 58%, transparent 0 20%, #ffffff 21% 27%, transparent 28%),
    radial-gradient(ellipse at 36% 34%, transparent 0 18%, #ffffff 19% 25%, transparent 26%),
    radial-gradient(ellipse at 72% 18%, transparent 0 13%, #ffffff 14% 20%, transparent 21%);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.32));
  animation: smoke-line-wobble 1.7s ease-in-out infinite;
}

.fantasy-floater--smoke-stick::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 13px;
  width: 13px;
  height: 13px;
  border: 2px solid #111;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 48%, #ffd64a 0 18%, transparent 19%),
    radial-gradient(circle at 52% 50%, #ff6a2a 0 54%, #7a210d 55% 100%);
  box-shadow:
    0 0 8px rgba(255, 106, 42, 0.9),
    0 0 14px rgba(255, 214, 74, 0.45);
  animation: ember-pulse 0.72s steps(2, end) infinite;
}

.mini-game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--background-color);
  cursor: crosshair;
}

.animated-ellipsis span {
  display: inline-block;
  animation: loading-dot 1.1s ease-in-out infinite;
}

.animated-ellipsis span:nth-child(2) {
  animation-delay: 0.16s;
}

.animated-ellipsis span:nth-child(3) {
  animation-delay: 0.32s;
}

.terminal-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(92vw, 720px);
  height: min(78vh, 360px);
  max-height: calc(var(--viewport-height) - 28px);
  padding: clamp(16px, 4vw, 30px);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  color: var(--terminal-green);
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 0;
  transition: background 900ms ease, border-color 900ms ease, box-shadow 900ms ease;
}

.terminal-panel.is-visible {
  border-color: var(--terminal-soft-green);
  background: var(--terminal-panel);
  box-shadow: 0 0 28px rgba(156, 255, 156, 0.08);
}

.terminal-kicker {
  margin: 0 0 clamp(10px, 2.5vh, 18px);
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.62rem, 1.8vw, 0.78rem);
  line-height: 1;
  text-align: center;
}

.terminal-output {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  gap: clamp(5px, 1.5vh, 10px);
  opacity: 0;
  transition: opacity 500ms ease;
}

.terminal-panel.is-visible .terminal-output {
  opacity: 1;
}

.signal-strength {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.5vh, 16px);
  margin-top: clamp(8px, 2vh, 14px);
}

.signal-strength__label {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.68rem, 2.7vw, 1.05rem);
  line-height: 1;
  text-align: center;
}

.signal-strength__bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: clamp(5px, 1.5vw, 9px);
  height: clamp(38px, 12vh, 72px);
}

.signal-strength__bar {
  width: clamp(8px, 2.4vw, 14px);
  height: var(--bar-height);
  border: 1px solid rgba(156, 255, 156, 0.7);
  background: rgba(156, 255, 156, 0.22);
  box-shadow: 0 0 10px rgba(156, 255, 156, 0.14);
  animation: signal-fluctuate 520ms steps(2, end) infinite;
}

.signal-strength__bar:nth-child(1) {
  --bar-height: 28%;
  animation-delay: 0ms;
}

.signal-strength__bar:nth-child(2) {
  --bar-height: 46%;
  animation-delay: 110ms;
}

.signal-strength__bar:nth-child(3) {
  --bar-height: 66%;
  animation-delay: 220ms;
}

.signal-strength__bar:nth-child(4) {
  --bar-height: 86%;
  animation-delay: 330ms;
}

.signal-strength.is-locked .signal-strength__bar {
  height: 100%;
  background: rgba(156, 255, 156, 0.82);
  animation: none;
}

.terminal-line {
  min-height: 1.25em;
  margin: 0;
  color: var(--terminal-green);
  font-size: clamp(0.68rem, 2.7vw, 1.12rem);
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 0 10px rgba(156, 255, 156, 0.22);
}

.terminal-line.is-muted {
  color: rgba(255, 255, 255, 0.82);
}

.terminal-line.is-final {
  color: var(--foreground-color);
  font-size: clamp(0.92rem, 4vw, 1.65rem);
  letter-spacing: 0.08em;
  text-shadow: 0 0 18px rgba(156, 255, 156, 0.42);
}

.loading-scene.is-complete .terminal-panel {
  animation: final-signal-glow 1.8s ease-in-out infinite;
}

.loading-cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  margin-left: 0.12em;
  background: currentColor;
  vertical-align: -0.16em;
  animation: blink-cursor 1s steps(1, end) infinite;
}

@keyframes blink-cursor {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@keyframes loading-dot {
  0%,
  80%,
  100% {
    opacity: 0.28;
    transform: translateY(0);
  }

  40% {
    opacity: 1;
    transform: translateY(-0.18em);
  }
}

@keyframes slow-prompt-blink {
  0%,
  100% {
    opacity: 0.24;
  }

  50% {
    opacity: 1;
  }
}

@keyframes star-drift {
  to {
    background-position: 160px 110px, -220px 140px, 180px -130px, -260px -170px, 210px 150px, 0 0;
  }
}

@keyframes star-twinkle {
  0%,
  100% {
    opacity: 0.62;
  }

  50% {
    opacity: 0.95;
  }
}

@keyframes smoke-drift {
  0%,
  100% {
    transform: translateX(-16px) scale(0.9);
  }

  50% {
    transform: translateX(18px) scale(1.15);
  }
}

@keyframes menu-smoke-swirl {
  0%,
  100% {
    transform: translate3d(-18px, 0, 0) scale(0.94);
    opacity: 0.32;
  }

  50% {
    transform: translate3d(22px, -10px, 0) scale(1.14);
    opacity: 0.54;
  }
}

@keyframes arcade-logo-float {
  0%,
  100% {
    transform: skewX(-6deg) translateY(0) scale(1);
    filter: brightness(0.98);
  }

  50% {
    transform: skewX(-6deg) translateY(-3px) scale(1.012);
    filter: brightness(1.12);
  }
}

@keyframes leaf-glow {
  0%,
  100% {
    opacity: 0.62;
    transform: scale(0.92);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes leaf-back-glow {
  0%,
  100% {
    opacity: 0.24;
    filter:
      drop-shadow(0 0 10px rgba(156, 255, 156, 0.35))
      drop-shadow(0 2px 0 #000);
  }

  50% {
    opacity: 0.44;
    filter:
      drop-shadow(0 0 22px rgba(156, 255, 156, 0.72))
      drop-shadow(0 2px 0 #000);
  }
}

@keyframes menu-wizard-run-frames {
  0%,
  12.49% {
    background-position: 0 0;
  }

  12.5%,
  24.99% {
    background-position: 14.285% 0;
  }

  25%,
  37.49% {
    background-position: 28.571% 0;
  }

  37.5%,
  49.99% {
    background-position: 42.857% 0;
  }

  50%,
  62.49% {
    background-position: 57.142% 0;
  }

  62.5%,
  74.99% {
    background-position: 71.428% 0;
  }

  75%,
  87.49% {
    background-position: 85.714% 0;
  }

  87.5%,
  100% {
    background-position: 100% 0;
  }
}

@keyframes menu-wizard-run-path {
  0% {
    transform: translate3d(-34vw, 0, 0) scaleX(1);
    opacity: 0;
  }

  4% {
    opacity: 1;
  }

  13% {
    transform: translate3d(-6vw, 0, 0) scaleX(1);
  }

  24% {
    transform: translate3d(18vw, 0, 0) scaleX(1);
  }

  31% {
    transform: translate3d(32vw, 0, 0) scaleX(1);
    opacity: 1;
  }

  32%,
  100% {
    transform: translate3d(32vw, 0, 0) scaleX(1);
    opacity: 0;
  }
}

@keyframes opening-forest-reveal {
  from {
    opacity: 0;
    transform: scale(1.025);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes opening-handheld-camera {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1.012);
  }

  18% {
    transform: translate3d(-0.18vw, 0.14vh, 0) scale(1.014);
  }

  42% {
    transform: translate3d(0.14vw, -0.12vh, 0) scale(1.013);
  }

  68% {
    transform: translate3d(-0.1vw, -0.08vh, 0) scale(1.015);
  }

  84% {
    transform: translate3d(0.16vw, 0.1vh, 0) scale(1.013);
  }
}

@keyframes opening-path-fail-shudder {
  0% {
    transform: translate3d(0, 0, 0);
    filter: none;
  }

  18% {
    transform: translate3d(-2px, 1px, 0);
    filter: saturate(0.9);
  }

  42% {
    transform: translate3d(2px, -1px, 0);
    filter: saturate(0.72);
  }

  70% {
    transform: translate3d(-1px, 1px, 0);
    filter: saturate(0.52) brightness(0.88);
  }

  100% {
    transform: translate3d(0, 0, 0);
    filter: saturate(0.35) brightness(0.72);
  }
}

@keyframes opening-path-failed-text {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }

  18%,
  82% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@keyframes opening-start-game-fade {
  from {
    opacity: 1;
    filter: brightness(1);
  }

  to {
    opacity: 0;
    filter: brightness(0);
  }
}

@keyframes opening-forest-glow {
  0%,
  100% {
    opacity: 0.55;
    transform: translateX(-50%) scale(var(--scale, 1));
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(calc(var(--scale, 1) * 1.25));
  }
}

@keyframes opening-star-blink {
  0%,
  100% {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(var(--scale));
  }

  45% {
    opacity: 0.68;
    transform: translate(-50%, -50%) scale(calc(var(--scale) * 1.35));
  }

  62% {
    opacity: 0.38;
  }
}

@keyframes opening-tap-ring-shrink {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }

  8% {
    opacity: 1;
  }

  58% {
    opacity: 1;
    transform: scale(0.72);
  }

  100% {
    opacity: 0.9;
    transform: scale(0.08);
  }
}

@keyframes opening-tap-dust-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  }

  22% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(2.1) rotate(12deg);
  }

  72% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(4.4) rotate(28deg);
  }

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

@keyframes opening-tap-shock-pop {
  0% {
    opacity: 0;
    transform: scale(0.25);
  }

  18% {
    opacity: 0.9;
    transform: scale(0.9);
  }

  68% {
    opacity: 0.45;
    transform: scale(1.65);
  }

  100% {
    opacity: 0;
    transform: scale(2.1);
  }
}

@keyframes opening-tutorial-prompt-blink {
  0%,
  42% {
    opacity: 0.78;
  }

  43%,
  100% {
    opacity: 0.28;
  }
}

@keyframes opening-tutorial-arrow-nudge {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0.7vmin 0;
  }
}

@keyframes opening-speed-lines-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes opening-speed-line-rush {
  0% {
    opacity: 0;
    transform: translate3d(0, -12vh, 0) rotate(7deg) scaleY(0.45);
  }

  18% {
    opacity: 0.3;
  }

  100% {
    opacity: 0;
    transform: translate3d(8vw, 126vh, 0) rotate(7deg) scaleY(1.35);
  }
}

@keyframes opening-path-camera-bob {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(0, 0.45vh, 0) scale(1.006);
  }
}

@keyframes opening-travel-hud-life {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-3px);
  }

  6%,
  100% {
    opacity: 0.82;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes opening-travel-line-draw {
  from {
    transform: translateY(-50%) scaleX(0);
  }

  to {
    transform: translateY(-50%) scaleX(1);
  }
}

@keyframes opening-travel-post-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes opening-travel-wizard-progress {
  0% {
    opacity: 0;
    left: 0;
    transform: translate(-50%, -50%) scale(0.78);
  }

  5% {
    opacity: 1;
  }

  88% {
    opacity: 1;
    left: 100%;
    transform: translate(-50%, -50%) scale(0.78);
  }

  100% {
    opacity: 1;
    left: 100%;
    transform: translate(-50%, -50%) scale(0.82);
  }
}

@keyframes opening-play-prompt-jiggle {
  0%,
  72%,
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }

  78% {
    transform: translateX(-50%) translateY(-2px) rotate(-2deg) scale(1.06);
  }

  84% {
    transform: translateX(-50%) translateY(1px) rotate(2deg) scale(1.02);
  }

  90% {
    transform: translateX(-50%) translateY(-1px) rotate(-1deg) scale(1.04);
  }
}

@keyframes opening-play-arrow-pulse-left {
  0%,
  100% {
    opacity: 0.35;
    translate: 0 0;
  }

  50% {
    opacity: 1;
    translate: 0.45em 0;
  }
}

@keyframes opening-play-arrow-pulse-right {
  0%,
  100% {
    opacity: 0.35;
    translate: 0 0;
  }

  50% {
    opacity: 1;
    translate: -0.45em 0;
  }
}

@keyframes opening-constellation-glow {
  0%,
  8%,
  82%,
  100% {
    opacity: 0;
    transform: translateX(-50%) rotate(-10deg) scale(0.92);
  }

  14%,
  68% {
    opacity: 0.42;
    transform: translateX(-50%) rotate(-10deg) scale(0.96);
  }
}

@keyframes opening-constellation-draw {
  0%,
  12%,
  100% {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  28%,
  64% {
    stroke-dashoffset: 0;
    opacity: 0.62;
  }

  78% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes opening-constellation-star {
  0%,
  14%,
  100% {
    opacity: 0;
  }

  24%,
  66% {
    opacity: 0.58;
  }

  78% {
    opacity: 0;
  }
}

@keyframes opening-party-beam-one {
  0%,
  100% {
    opacity: 0;
    transform: translateX(-4vw) rotate(-28deg) scaleY(0.92);
  }

  18%,
  72% {
    opacity: 0.72;
  }

  50% {
    opacity: 0.9;
    transform: translateX(5vw) rotate(18deg) scaleY(1.12);
  }
}

@keyframes opening-party-beam-two {
  0%,
  100% {
    opacity: 0;
    transform: translateX(-4vw) rotate(22deg) scaleY(1.04);
  }

  20%,
  78% {
    opacity: 0.68;
  }

  50% {
    opacity: 0.86;
    transform: translateX(4vw) rotate(-18deg) scaleY(0.96);
  }
}

@keyframes opening-party-beam-three {
  0%,
  100% {
    opacity: 0;
    transform: translateX(4vw) rotate(-18deg) scaleY(0.96);
  }

  18%,
  70% {
    opacity: 0.62;
  }

  50% {
    opacity: 0.84;
    transform: translateX(-5vw) rotate(20deg) scaleY(1.14);
  }
}

@keyframes opening-party-beam-four {
  0%,
  100% {
    opacity: 0;
    transform: translateX(4vw) rotate(28deg) scaleY(0.9);
  }

  22%,
  76% {
    opacity: 0.58;
  }

  50% {
    opacity: 0.78;
    transform: translateX(-5vw) rotate(-22deg) scaleY(1.1);
  }
}

@keyframes opening-firework-burst {
  0%,
  62%,
  100% {
    opacity: 0;
    transform: scale(0.18);
  }

  68% {
    opacity: 1;
    transform: scale(0.42);
  }

  82% {
    opacity: 0.85;
    transform: scale(1.05);
  }

  96% {
    opacity: 0;
    transform: scale(1.45);
  }
}

@keyframes opening-mountain-green-explosion {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.08);
  }

  12% {
    opacity: 1;
    transform: translateX(-50%) scale(0.95);
  }

  34% {
    opacity: 0.92;
    transform: translateX(-50%) scale(1.45);
  }

  68% {
    opacity: 0.42;
    transform: translateX(-50%) scale(1.9);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scale(2.2);
  }
}

@keyframes opening-mountain-green-shards {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1) rotate(0deg);
  }

  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.8) rotate(8deg);
  }

  42% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.55) rotate(22deg);
  }

  78% {
    opacity: 0.28;
    transform: translate(-50%, -50%) scale(2.2) rotate(38deg);
  }

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

@keyframes opening-mountain-green-lightning {
  0%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
  }

  10%,
  18%,
  32%,
  44% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.15);
  }

  14%,
  26%,
  38%,
  54% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1.35);
  }
}

@keyframes opening-mountain-blast-shake {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  8% {
    transform: translate3d(7px, -4px, 0);
  }

  16% {
    transform: translate3d(-8px, 5px, 0);
  }

  24% {
    transform: translate3d(6px, 6px, 0);
  }

  32% {
    transform: translate3d(-6px, -5px, 0);
  }

  42% {
    transform: translate3d(5px, -4px, 0);
  }

  54% {
    transform: translate3d(-4px, 4px, 0);
  }

  68% {
    transform: translate3d(3px, -2px, 0);
  }

  82% {
    transform: translate3d(-2px, 2px, 0);
  }
}

@keyframes opening-big-firework-rocket-left {
  0%,
  3%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(0.7);
  }

  4% {
    opacity: 1;
  }

  9.5% {
    opacity: 1;
    transform: translate(-4vw, -25vh) scale(1);
  }

  11% {
    opacity: 0;
    transform: translate(-5vw, -28vh) scale(0.65);
  }
}

@keyframes opening-big-firework-rocket-right {
  0%,
  3%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(0.7);
  }

  4% {
    opacity: 1;
  }

  9.5% {
    opacity: 1;
    transform: translate(4vw, -25vh) scale(1);
  }

  11% {
    opacity: 0;
    transform: translate(5vw, -28vh) scale(0.65);
  }
}

@keyframes opening-big-firework-burst {
  0%,
  10.8%,
  100% {
    opacity: 0;
    transform: scale(0.12);
  }

  11.2% {
    opacity: 1;
    transform: scale(0.4);
  }

  15% {
    opacity: 1;
    transform: scale(1.25);
  }

  21% {
    opacity: 0.88;
    transform: scale(1.85);
  }

  25% {
    opacity: 0.5;
    transform: scale(2.12);
  }

  30% {
    opacity: 0;
    transform: scale(2.28);
  }
}

@keyframes opening-big-firework-screen-shake {
  0%,
  21%,
  39%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  23% {
    transform: translate3d(1.5px, -1px, 0);
  }

  25% {
    transform: translate3d(-1.5px, 1px, 0);
  }

  27% {
    transform: translate3d(1.2px, 1.4px, 0);
  }

  29% {
    transform: translate3d(-1.2px, -1px, 0);
  }

  31% {
    transform: translate3d(0.9px, -1.1px, 0);
  }

  33% {
    transform: translate3d(-0.8px, 0.8px, 0);
  }
}

@keyframes opening-forest-run-prop {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(0) scale(0.12);
    filter: brightness(0.65) saturate(0.85);
  }

  6% {
    opacity: 1;
  }

  28% {
    opacity: 1;
    transform: translateX(calc(-50% + var(--early-shift))) translateY(var(--early-drop)) scale(var(--early-scale));
    filter: brightness(0.78) saturate(0.92);
  }

  54% {
    opacity: 1;
    transform: translateX(calc(-50% + var(--mid-shift))) translateY(var(--mid-drop)) scale(var(--mid-scale));
    filter: brightness(0.95) saturate(1.04);
  }

  78% {
    opacity: 1;
    transform: translateX(calc(-50% + var(--near-shift))) translateY(var(--near-drop)) scale(var(--near-scale));
    filter: brightness(1.08) saturate(1.12);
  }

  94% {
    opacity: 1;
    transform: translateX(calc(-50% + var(--end-shift))) translateY(var(--end-drop)) scale(var(--end-scale));
    filter: brightness(1.16) saturate(1.2);
  }

  100% {
    opacity: 0;
    transform: translateX(calc(-50% + var(--end-shift))) translateY(var(--end-drop)) scale(var(--end-scale));
    filter: brightness(1.16) saturate(1.2);
  }
}

@keyframes opening-forest-start-prop-rush {
  from {
    opacity: var(--alpha, 1);
    transform: translateX(-50%) translateY(0) scale(var(--scale, 1));
    filter: brightness(1) saturate(1);
  }

  26% {
    opacity: var(--alpha, 1);
    transform: translateX(calc(-50% + var(--early-shift))) translateY(var(--early-drop)) scale(var(--early-scale));
    filter: brightness(1.02) saturate(1.04);
  }

  54% {
    opacity: var(--alpha, 1);
    transform: translateX(calc(-50% + var(--mid-shift))) translateY(var(--mid-drop)) scale(var(--mid-scale));
    filter: brightness(1.04) saturate(1.08);
  }

  78% {
    opacity: var(--alpha, 1);
    transform: translateX(calc(-50% + var(--near-shift))) translateY(var(--near-drop)) scale(var(--near-scale));
    filter: brightness(1.08) saturate(1.12);
  }

  92% {
    opacity: var(--alpha, 1);
    transform: translateX(calc(-50% + var(--end-shift))) translateY(var(--end-drop)) scale(var(--end-scale));
    filter: brightness(1.12) saturate(1.18);
  }

  to {
    opacity: 0;
    transform: translateX(calc(-50% + var(--end-shift))) translateY(var(--end-drop)) scale(var(--end-scale));
    filter: brightness(1.12) saturate(1.18);
  }
}

@keyframes opening-path-rush {
  from {
    background-position: 0 0, 0 0;
  }

  to {
    background-position: 0 36px, 0 36px;
  }
}

@keyframes opening-wizard-run-in {
  0% {
    opacity: 0;
    transform: translate3d(-28vw, 0, 0);
  }

  8% {
    opacity: 1;
  }

  84% {
    opacity: 1;
    transform: translate3d(39vw, 0, 0);
  }

  84.1%,
  100% {
    opacity: 0;
    transform: translate3d(39vw, 0, 0);
  }
}

@keyframes opening-wizard-idle-reveal {
  0%,
  83.9% {
    opacity: 0;
  }

  84%,
  100% {
    opacity: 1;
  }
}

@keyframes opening-wizard-breathe {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scaleY(1);
  }

  50% {
    transform: translate3d(0, -1px, 0) scaleY(1.012);
  }
}

@keyframes menu-wizard-run-back-path {
  0%,
  31.9% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0) scale(1.08);
  }

  32% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1.08);
  }

  52% {
    opacity: 1;
    transform: translate3d(-50%, -3vh, 0) scale(0.94);
  }

  76% {
    opacity: 1;
    transform: translate3d(-50%, -8vh, 0) scale(0.72);
  }

  100% {
    opacity: 0.9;
    transform: translate3d(-50%, -12vh, 0) scale(0.56);
  }
}

@keyframes fantasy-fly-one {
  from {
    transform: translateX(0) translateY(0) rotate(-8deg) scale(0.9);
  }

  to {
    transform: translateX(calc(100vw + 100px)) translateY(18vh) rotate(18deg) scale(1.08);
  }
}

@keyframes fantasy-fly-two {
  from {
    transform: translateX(0) translateY(0) scale(1.25) rotate(10deg);
  }

  to {
    transform: translateX(calc(-100vw - 120px)) translateY(-22vh) scale(1.35) rotate(-12deg);
  }
}

@keyframes fantasy-fly-three {
  from {
    transform: translateY(0) translateX(0) scale(0.92) rotate(-8deg);
  }

  to {
    transform: translateY(calc(-100vh - 90px)) translateX(24vw) scale(1.05) rotate(12deg);
  }
}

@keyframes fantasy-fly-four {
  from {
    transform: translateX(0) translateY(0) scale(1) rotate(0deg);
  }

  to {
    transform: translateX(calc(100vw + 110px)) translateY(-16vh) scale(1.18) rotate(22deg);
  }
}

@keyframes fantasy-fly-five {
  from {
    transform: translateY(0) translateX(0) scale(1) rotate(14deg);
  }

  to {
    transform: translateY(calc(100vh + 100px)) translateX(-18vw) scale(1.1) rotate(-16deg);
  }
}

@keyframes fantasy-fly-six {
  from {
    transform: translateX(0) translateY(0) scale(0.72) rotate(0deg);
    opacity: 0.25;
  }

  45% {
    opacity: 1;
  }

  to {
    transform: translateX(calc(-100vw - 90px)) translateY(12vh) scale(1.25) rotate(180deg);
    opacity: 0.55;
  }
}

@keyframes fantasy-fly-seven {
  from {
    transform: translateX(0) translateY(0) scale(0.82) rotate(28deg);
  }

  35% {
    transform: translateX(-42vw) translateY(-18vh) scale(0.94) rotate(170deg);
  }

  70% {
    transform: translateX(-78vw) translateY(8vh) scale(0.9) rotate(315deg);
  }

  to {
    transform: translateX(calc(-100vw - 130px)) translateY(-10vh) scale(1.04) rotate(510deg);
  }
}

@keyframes ember-pulse {
  0%,
  100% {
    filter: brightness(0.9);
    transform: scale(0.92);
  }

  50% {
    filter: brightness(1.35);
    transform: scale(1.12);
  }
}

@keyframes smoke-line-wobble {
  0%,
  100% {
    transform: translateX(-2px) scaleX(0.94);
    opacity: 0.72;
  }

  50% {
    transform: translateX(5px) scaleX(1.08);
    opacity: 1;
  }
}

@media (max-height: 430px) {
  .mini-game-intro {
    gap: 8px;
  }

  .arcade-logo {
    min-width: min(82vw, 560px);
    padding: 10px 24px;
  }

  .arcade-logo__line {
    font-size: clamp(1.7rem, 7.5vw, 3.7rem);
  }

}

@keyframes crt-flicker {
  0%,
  100% {
    opacity: 0.82;
  }

  50% {
    opacity: 1;
  }
}

@keyframes final-signal-glow {
  0%,
  100% {
    box-shadow: 0 0 22px rgba(156, 255, 156, 0.08);
  }

  50% {
    box-shadow: 0 0 34px rgba(156, 255, 156, 0.18);
  }
}

@keyframes signal-fluctuate {
  0% {
    opacity: 0.34;
    transform: scaleY(0.42);
  }

  33% {
    opacity: 0.78;
    transform: scaleY(0.88);
  }

  66% {
    opacity: 0.48;
    transform: scaleY(0.62);
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes wizard-hologram-arrive {
  0% {
    opacity: 0;
    filter: grayscale(0.65) sepia(0.22) hue-rotate(62deg) saturate(1.6)
      drop-shadow(0 0 10px rgba(156, 255, 156, 0.18));
    clip-path: inset(0 0 18% 0);
    transform: translateX(-50%);
  }

  18% {
    opacity: 0.24;
    clip-path: inset(0 0 12% 0);
    transform: translateX(-50%);
  }

  34% {
    opacity: 0.52;
    clip-path: inset(0 0 7% 0);
    transform: translateX(-50%);
  }

  55% {
    opacity: 0.84;
    clip-path: inset(0);
    transform: translateX(-50%);
  }

  68% {
    opacity: 1;
    clip-path: inset(0);
    filter: grayscale(0.35) sepia(0.18) hue-rotate(62deg) saturate(1.35)
      drop-shadow(0 0 20px rgba(156, 255, 156, 0.3));
  }

  100% {
    opacity: 1;
    clip-path: inset(0);
    filter: grayscale(0.28) sepia(0.12) hue-rotate(48deg) saturate(1.16)
      drop-shadow(0 0 15px rgba(156, 255, 156, 0.2));
    transform: translateX(-50%);
  }
}