:root {
  color-scheme: light;
  --ink: #1c1630;
  --paper: #fffaf1;
  --cyan: #55e7ff;
  --lemon: #ffe45c;
  --pink: #ff5aa5;
  --green: #67e884;
  --red: #ff6148;
  --shadow: 0 18px 0 #1c1630;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 18%, rgba(255, 228, 92, .95) 0 7%, transparent 8%),
    radial-gradient(circle at 88% 12%, rgba(255, 90, 165, .75) 0 8%, transparent 9%),
    radial-gradient(circle at 78% 72%, rgba(85, 231, 255, .72) 0 10%, transparent 11%),
    linear-gradient(135deg, #fffaf1 0%, #8ff0ff 36%, #fffd8d 68%, #ff9bcb 100%);
  font-family: "Fredoka", system-ui, sans-serif;
  transition: color 5s ease, background 5s ease;
}

button,
a {
  font: inherit;
}

button {
  cursor: pointer;
}

.noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(90deg, rgba(28, 22, 48, .25) 1px, transparent 1px),
    linear-gradient(rgba(28, 22, 48, .2) 1px, transparent 1px);
  background-size: 18px 18px;
  mix-blend-mode: multiply;
  transition: opacity 5s ease, mix-blend-mode 5s ease;
}

.cursor-friend {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  pointer-events: none;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--lemon);
  font-family: "Bungee", system-ui, sans-serif;
  transform: translate(-50%, -50%);
  transition: opacity .2s ease;
  box-shadow: 5px 5px 0 var(--ink);
}

body.darkrai-darkmode {
  color-scheme: dark;
  color: #eee9f4;
  background:
    radial-gradient(circle at 18% 16%, rgba(98, 255, 176, .12) 0 7%, transparent 8%),
    radial-gradient(circle at 86% 12%, rgba(181, 36, 70, .22) 0 10%, transparent 11%),
    radial-gradient(circle at 52% 76%, rgba(63, 17, 87, .36) 0 16%, transparent 17%),
    linear-gradient(145deg, #020104 0%, #100713 42%, #030609 72%, #000 100%);
}

body.darkrai-darkmode .noise {
  opacity: .28;
  mix-blend-mode: screen;
  background-image:
    linear-gradient(90deg, rgba(238, 233, 244, .1) 1px, transparent 1px),
    linear-gradient(rgba(181, 36, 70, .16) 1px, transparent 1px);
}

body.darkrai-darkmode .page-shell {
  animation: darkrai-homepage-takeover 5s ease forwards;
}

body.darkrai-darkmode .top-bar a,
body.darkrai-darkmode .primary-link,
body.darkrai-darkmode .sound-button,
body.darkrai-darkmode .lore-button,
body.darkrai-darkmode .panic-button,
body.darkrai-darkmode .stampede-button,
body.darkrai-darkmode .poke-card,
body.darkrai-darkmode .chaos-lab,
body.darkrai-darkmode .status-output,
body.darkrai-darkmode .move-card,
body.darkrai-darkmode .speech-bubble,
body.darkrai-darkmode .platform,
body.darkrai-darkmode .kicker,
body.darkrai-darkmode .river-track img,
body.darkrai-darkmode .hero-wooper {
  border-color: #eee9f4;
  box-shadow: 0 0 0 1px rgba(238, 233, 244, .14), 8px 8px 0 #000;
}

body.darkrai-darkmode .poke-card:not(.darkrai-card),
body.darkrai-darkmode .chaos-lab,
body.darkrai-darkmode .status-output,
body.darkrai-darkmode .speech-bubble,
body.darkrai-darkmode .platform,
body.darkrai-darkmode .top-bar a,
body.darkrai-darkmode .primary-link,
body.darkrai-darkmode .sound-button,
body.darkrai-darkmode .lore-button,
body.darkrai-darkmode .panic-button,
body.darkrai-darkmode .stampede-button {
  color: #eee9f4;
  background: rgba(10, 8, 15, .92);
}

body.darkrai-darkmode h1 {
  text-shadow: 0 0 18px rgba(98, 255, 176, .42), 7px 7px 0 #000;
}

body.darkrai-darkmode .ticker {
  border-color: #eee9f4;
  background: #000;
}

body.darkrai-darkmode .ticker-track span {
  color: #62ffb0;
  text-shadow: 0 0 12px rgba(181, 36, 70, .86);
}

.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  pointer-events: none;
}

.horror-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 44%, transparent 0 20%, rgba(0, 0, 0, .48) 56%, rgba(0, 0, 0, .88) 100%),
    linear-gradient(rgba(120, 0, 0, .08), rgba(170, 0, 0, .7));
}

.horror-active .horror-overlay {
  animation: red-dread 7.4s ease-in forwards;
}

.horror-active .page-shell {
  animation: dread-shake .11s linear infinite;
}

.horror-active .ticker-track {
  animation-duration: 6s;
}

.horror-active .poke-card,
.horror-active .hero-wooper {
  filter: saturate(.45) contrast(1.2) brightness(.64);
}

.pokemon-missing {
  opacity: 0;
}

.page-shell {
  width: min(1160px, calc(100% - 28px));
  margin: 0 auto;
}

.hero {
  position: relative;
  min-height: 94vh;
  padding: clamp(18px, 4vw, 34px) 0 38px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.top-bar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 34px;
}

.top-bar a,
.primary-link,
.sound-button,
.lore-button,
.pirate-button,
.panic-button,
.stampede-button {
  color: var(--ink);
  text-decoration: none;
  border: 3px solid var(--ink);
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink);
  border-radius: 8px;
  padding: 11px 15px;
  font-weight: 800;
  text-transform: uppercase;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.top-bar a:hover,
.primary-link:hover,
.sound-button:hover,
.lore-button:hover,
.pirate-button:hover,
.panic-button:hover,
.stampede-button:hover {
  transform: translate(3px, 3px) rotate(-1deg);
  box-shadow: 2px 2px 0 var(--ink);
  background: var(--green);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  align-items: center;
  gap: clamp(24px, 6vw, 70px);
}

.kicker {
  display: inline-block;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 3px solid var(--ink);
  background: var(--lemon);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Bungee", system-ui, sans-serif;
  line-height: .96;
  letter-spacing: 0;
}

h1 {
  max-width: 770px;
  font-size: clamp(3.05rem, 10vw, 7.6rem);
  text-shadow: 7px 7px 0 var(--cyan), 12px 12px 0 var(--pink);
}

h2 {
  font-size: clamp(2rem, 5vw, 4.4rem);
}

h3 {
  font-size: 1.08rem;
}

.tagline,
.chaos-lab p {
  max-width: 640px;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.45;
  font-weight: 700;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.primary-link {
  background: var(--pink);
}

.sound-button {
  background: var(--cyan);
}

.lore-button {
  background:
    radial-gradient(circle at 20% 18%, #fff 0 10%, transparent 11%),
    linear-gradient(135deg, #1c1630 0%, #ff5aa5 54%, #ffe45c 100%);
  color: #fffaf1;
  text-shadow: 2px 2px 0 #1c1630;
}

.pirate-button {
  background:
    linear-gradient(135deg, #111 0 46%, #d71920 46% 56%, #111 56% 100%);
  color: #fffaf1;
  text-shadow: 2px 2px 0 #000;
}

.stampede-button {
  width: 100%;
  background: var(--lemon);
}

.wooper-stage {
  position: relative;
  min-height: 440px;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.hero-wooper {
  width: min(72vw, 330px);
  border: 5px solid var(--ink);
  border-radius: 50%;
  background: #b7f6ff;
  padding: 22px;
  image-rendering: auto;
  box-shadow: var(--shadow);
  animation: floaty 3.2s ease-in-out infinite, spin-pop 8s steps(1) infinite;
}

.speech-bubble,
.platform {
  position: absolute;
  border: 3px solid var(--ink);
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink);
  border-radius: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.speech-bubble {
  right: 2%;
  top: 13%;
  padding: 14px 16px;
  transform: rotate(8deg);
  animation: wobble 1.9s ease-in-out infinite;
}

.platform {
  bottom: 34px;
  padding: 12px 18px;
  background: var(--green);
}

.sky-bits span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  font-family: "Bungee", system-ui, sans-serif;
  animation: drift 5s ease-in-out infinite;
  animation-delay: var(--d);
}

.ticker {
  overflow: hidden;
  border: solid var(--ink);
  border-width: 4px 0;
  background: var(--ink);
  color: var(--paper);
  margin: 0 calc(50% - 50vw) 52px;
}

.ticker-track {
  display: flex;
  width: max-content;
  gap: 30px;
  padding: 14px 0;
  font-family: "Bungee", system-ui, sans-serif;
  white-space: nowrap;
  animation: marquee 19s linear infinite;
}

.ticker-track span {
  color: var(--lemon);
  text-shadow: 3px 3px 0 var(--pink);
}

.move-zone {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(320px, 1.2fr);
  gap: 20px;
  align-items: end;
  margin: 0 0 64px;
}

.move-copy p:not(.kicker) {
  max-width: 470px;
  margin: 12px 0 0;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.35;
}

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

.move-card {
  min-height: 124px;
  padding: 12px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  font-family: "Bungee", system-ui, sans-serif;
  font-size: clamp(.88rem, 1.5vw, 1.2rem);
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 7px 7px 0 var(--ink);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.move-card:hover,
.move-card:focus-visible {
  transform: translate(3px, 3px) rotate(-2deg);
  box-shadow: 3px 3px 0 var(--ink);
  filter: saturate(1.25);
}

.move-card.water {
  background: linear-gradient(135deg, #55e7ff, #f4feff);
}

.move-card.bubble {
  background: linear-gradient(135deg, #ff9bcb, #b7f6ff);
}

.move-card.tackle {
  background: linear-gradient(135deg, #67e884, #fffaf1);
}

.move-card.roar {
  background: linear-gradient(135deg, #ff6148, #ffe45c);
}

.section-heading {
  margin-bottom: 22px;
}

.pokemon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(210px, auto);
  gap: 16px;
}

.poke-card {
  position: relative;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 16px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--ink);
  transition: transform .18s ease, background .18s ease;
}

.poke-card:hover {
  transform: translateY(-8px) rotate(var(--tilt, -1deg));
  background: #ecff88;
}

.greninja-card {
  cursor: pointer;
}

.umbreon-card {
  cursor: pointer;
  background: #15121f;
  color: #f8f5ff;
}

.lapras-card {
  cursor: pointer;
}

.darkrai-card {
  overflow: visible;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, .08), transparent 34%),
    linear-gradient(145deg, #09070f, #261122 58%, #050307);
  color: #fff9fb;
}

.darkrai-card h3,
.darkrai-card p {
  position: relative;
  z-index: 3;
  text-shadow: 0 0 12px rgba(255, 255, 255, .42);
}

.darkrai-card .darkrai-sprite {
  z-index: 2;
  filter:
    brightness(.72)
    contrast(1.5)
    drop-shadow(0 0 18px rgba(255, 255, 255, .36))
    drop-shadow(0 0 30px rgba(120, 0, 120, .86));
}

.candle-ring {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.ritual-candle {
  position: absolute;
  width: 34px;
  height: 58px;
  padding: 0;
  border: 3px solid #f5eef5;
  border-radius: 8px 8px 4px 4px;
  background:
    linear-gradient(90deg, #f6ece1, #7c6d67 46%, #f5ece3);
  box-shadow: 0 0 0 3px #050307, 0 0 20px rgba(255, 255, 255, .12);
  pointer-events: auto;
  cursor: crosshair;
}

.ritual-candle span {
  position: absolute;
  left: 50%;
  top: -16px;
  width: 16px;
  height: 22px;
  border-radius: 50% 50% 45% 45%;
  background: #111;
  transform: translateX(-50%) scale(.55);
  box-shadow: 0 0 0 transparent;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.ritual-candle.lit span {
  background: radial-gradient(circle at 50% 72%, #fff 0 12%, #ffe45c 28%, #ff6a00 56%, #6d0000 78%);
  box-shadow: 0 0 18px #ffda6d, 0 0 34px #b40013, 0 0 62px rgba(255, 0, 0, .72);
  transform: translateX(-50%) scale(1);
  animation: flame-tremble .16s linear infinite;
}

.candle-left {
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
}

.candle-right {
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
}

.darkrai-card.darkrai-vanished {
  opacity: 0;
  pointer-events: none;
  transform: scale(.82) rotate(-3deg);
  transition: opacity .7s ease, transform .7s ease;
}

.darkrai-card.darkrai-random {
  position: fixed;
  left: var(--darkrai-left);
  top: var(--darkrai-top);
  z-index: 95;
  width: min(280px, calc(100vw - 34px));
  min-height: 280px;
  opacity: 1;
  pointer-events: auto;
  transform: rotate(var(--darkrai-tilt, -2deg));
  animation: darkrai-materialize .8s ease forwards, darkrai-hover 4.4s ease-in-out infinite;
}

.darkrai-flash {
  position: fixed;
  inset: 0;
  z-index: 84;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 244, 210, .9), rgba(98, 255, 176, .28) 22%, transparent 64%),
    rgba(0, 0, 0, .76);
  opacity: 0;
  animation: darkrai-flash 5s ease forwards;
}

.darkrai-whisper {
  position: fixed;
  left: 50%;
  top: 46%;
  z-index: 86;
  width: min(920px, calc(100vw - 28px));
  color: #eee9f4;
  font-family: "Bungee", system-ui, sans-serif;
  font-size: clamp(1.8rem, 8vw, 5.9rem);
  line-height: .92;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(98, 255, 176, .55), 7px 7px 0 #000;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: darkrai-whisper 5s ease forwards;
}

body.darkrai-darkmode::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 40%, transparent 0 36%, rgba(0, 0, 0, .62) 100%),
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(238, 233, 244, .035) 8px 9px);
  opacity: .7;
}

.lapras-card::after {
  content: "rain";
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 6px 9px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--cyan);
  color: var(--ink);
  font-family: "Bungee", system-ui, sans-serif;
  font-size: .72rem;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--ink);
}

.umbreon-card::after {
  content: "moon";
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 6px 9px;
  border: 3px solid #f8f5ff;
  border-radius: 8px;
  background: #101010;
  color: #f8f5ff;
  font-family: "Bungee", system-ui, sans-serif;
  font-size: .72rem;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 #5f5a74;
}

.greninja-card::after {
  content: "tap";
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 6px 9px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--lemon);
  font-family: "Bungee", system-ui, sans-serif;
  font-size: .72rem;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 var(--ink);
}

.greninja-card.battle-bond {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 228, 92, .72)),
    conic-gradient(from 0deg, #ff004c, #ffb000, #fff200, #21d95f, #00d5ff, #4747ff, #c000ff, #ff004c);
  animation: rainbow-card 1.8s linear infinite;
}

.greninja-card.battle-bond .greninja-sprite {
  animation: battle-bond-glow .72s ease-in-out infinite alternate;
  filter:
    drop-shadow(0 0 8px #fff)
    drop-shadow(0 0 16px #00d5ff)
    drop-shadow(0 0 25px #ff004c);
}

.poke-card:nth-child(2n) {
  --tilt: 1deg;
}

.poke-card img {
  position: absolute;
  right: 10px;
  top: 8px;
  width: min(42%, 138px);
  max-height: 135px;
  object-fit: contain;
  filter: drop-shadow(5px 7px 0 rgba(28, 22, 48, .26));
  animation: bouncy 2.7s ease-in-out infinite;
}

.poke-card p {
  max-width: 80%;
  margin: 8px 0 0;
  font-weight: 700;
  line-height: 1.25;
}

.main-card {
  grid-column: span 2;
  background: var(--cyan);
}

.tall-card {
  grid-row: span 2;
  background: var(--pink);
}

.main-card img,
.tall-card img {
  width: min(50%, 210px);
  max-height: 220px;
}

.chaos-lab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 410px);
  gap: 24px;
  align-items: center;
  margin: 76px 0 52px;
  padding: clamp(20px, 5vw, 42px);
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: var(--green);
  box-shadow: 10px 10px 0 var(--ink);
}

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

.status-output {
  min-height: 154px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: inset 0 0 0 8px #fffd8d;
  font-family: "Bungee", system-ui, sans-serif;
  font-size: clamp(1.25rem, 4vw, 2.1rem);
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.panic-button {
  width: 100%;
  background: var(--red);
}

.water-beam {
  position: fixed;
  right: 50%;
  top: 32%;
  width: 54vw;
  height: 34px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #fff, #fff 12px, #55e7ff 12px, #55e7ff 28px);
  box-shadow: 0 0 0 8px rgba(85, 231, 255, .38), 7px 7px 0 var(--ink);
  transform-origin: right center;
  animation: water-shot .7s cubic-bezier(.2,.8,.2,1) forwards;
}

.flame-beam {
  position: fixed;
  right: 50%;
  top: 32%;
  width: 56vw;
  height: 42px;
  border: 4px solid #170603;
  border-radius: 999px 35% 35% 999px;
  background:
    radial-gradient(circle at 86% 50%, #fff8b8 0 8%, transparent 9%),
    repeating-linear-gradient(90deg, #ffef8a 0 12px, #ff7a1a 12px 25px, #cc1f0d 25px 38px);
  box-shadow: 0 0 18px rgba(255, 111, 22, .78), 7px 7px 0 #170603;
  transform-origin: right center;
  animation: flame-shot .7s cubic-bezier(.2,.8,.2,1) forwards;
}

.bubble-pop {
  position: fixed;
  left: var(--left);
  top: var(--top);
  width: var(--size);
  height: var(--size);
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: rgba(255, 255, 255, .68);
  box-shadow: inset 8px 8px 0 rgba(85, 231, 255, .7), 4px 4px 0 rgba(28, 22, 48, .45);
  animation: bubble-float var(--speed) ease-out forwards;
}

.roar-wave {
  position: fixed;
  left: 50%;
  top: 40%;
  width: 38px;
  height: 38px;
  border: 5px solid var(--ink);
  border-radius: 50%;
  background: rgba(255, 228, 92, .45);
  transform: translate(-50%, -50%);
  animation: roar-pulse .72s ease-out forwards;
}

.battle-word {
  position: fixed;
  left: 50%;
  top: 20%;
  padding: 12px 16px;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--ink);
  font-family: "Bungee", system-ui, sans-serif;
  font-size: clamp(1.2rem, 6vw, 4rem);
  text-align: center;
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(-4deg);
  animation: word-pop .8s ease-out forwards;
}

.mega-scene {
  position: fixed;
  inset: 0;
  z-index: 68;
  display: grid;
  place-items: center;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, .95), rgba(0, 213, 255, .5) 18%, rgba(255, 0, 76, .42) 38%, rgba(0, 0, 0, .82) 72%),
    conic-gradient(from 0deg, #ff004c, #ffb000, #fff200, #21d95f, #00d5ff, #4747ff, #c000ff, #ff004c);
  animation: mega-scene-fade 3.2s ease forwards;
}

.mega-core {
  position: relative;
  display: grid;
  place-items: center;
  width: min(78vw, 430px);
  aspect-ratio: 1;
}

.mega-core::before,
.mega-core::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 6px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  box-shadow: 0 0 34px rgba(255, 255, 255, .95);
  animation: mega-ring 1s linear infinite;
}

.mega-core::after {
  inset: 12%;
  border-color: rgba(255, 0, 76, .85);
  animation-direction: reverse;
}

.mega-core img {
  position: relative;
  z-index: 2;
  width: min(58vw, 260px);
  border: 5px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  padding: 20px;
  filter:
    drop-shadow(0 0 12px #fff)
    drop-shadow(0 0 28px #00d5ff)
    drop-shadow(0 0 42px #ff004c);
  animation: mega-evolve-pop 3.2s ease forwards;
}

.mega-label {
  position: fixed;
  left: 50%;
  bottom: 13vh;
  width: min(900px, calc(100vw - 28px));
  color: #fff;
  font-family: "Bungee", system-ui, sans-serif;
  font-size: clamp(1.7rem, 8vw, 5.4rem);
  line-height: .9;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 18px #00d5ff, 5px 5px 0 #160018;
  transform: translateX(-50%);
  animation: mega-label 3.2s ease forwards;
}

.umbreon-night {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  color: #f4f2ff;
  background:
    radial-gradient(circle at 80% 18%, rgba(230, 230, 255, .18) 0 7%, transparent 8%),
    linear-gradient(#000 0%, #03030b 40%, #080713 64%, #010104 100%);
  animation: night-quake .12s linear infinite, night-arrive .5s ease-out forwards;
}

.umbreon-night::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 32vh;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255, 255, 255, .08) 8% 11%, transparent 11% 22%, rgba(255, 255, 255, .1) 22% 25%, transparent 25%),
    linear-gradient(#111 0 22%, #030303 23% 100%);
  border-top: 2px solid rgba(255, 255, 255, .2);
  transform: skewY(-2deg);
}

.moon-button {
  position: absolute;
  right: clamp(24px, 12vw, 160px);
  top: clamp(26px, 9vh, 82px);
  width: clamp(86px, 18vw, 148px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 32%, #fff 0 8%, transparent 9%),
    radial-gradient(circle at 62% 66%, #b8b8c8 0 10%, transparent 11%),
    radial-gradient(circle, #f7f5e7 0 58%, #bbb9c8 76%, #565368 100%);
  box-shadow: 0 0 42px rgba(244, 242, 255, .78), 0 0 110px rgba(130, 120, 255, .42);
  cursor: pointer;
  animation: moon-pulse 1.4s ease-in-out infinite;
}

.moon-button:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 8px;
}

.street-umbreon {
  position: absolute;
  left: 6vw;
  bottom: 20vh;
  width: clamp(108px, 24vw, 210px);
  border-radius: 12px;
  background: transparent;
  filter:
    brightness(.52)
    contrast(1.65)
    saturate(.9)
    drop-shadow(0 0 8px #ffffff)
    drop-shadow(0 0 20px #7f70ff)
    drop-shadow(0 0 42px #2d1cff);
  animation: moon-walk 5.4s ease-in-out infinite;
}

.street-hint {
  position: absolute;
  left: 50%;
  bottom: 8vh;
  width: min(780px, calc(100vw - 28px));
  color: rgba(255, 255, 255, .86);
  font-family: "Bungee", system-ui, sans-serif;
  font-size: clamp(1rem, 4vw, 2.2rem);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
  text-shadow: 0 0 18px #8b7cff;
  animation: hint-flicker 2s linear infinite;
}

.shadow-ball {
  position: fixed;
  left: var(--ball-left);
  top: var(--ball-top);
  width: var(--ball-size);
  height: var(--ball-size);
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 35%, #efe7ff 0 8%, transparent 9%),
    radial-gradient(circle, #6f39ff 0 34%, #250030 62%, transparent 72%);
  box-shadow: 0 0 24px #8f52ff, 0 0 70px rgba(111, 57, 255, .8);
  animation: shadow-blast var(--ball-speed) ease-out forwards;
}

.umbreon-flee {
  animation: umbreon-flee 1.8s cubic-bezier(.5,0,.95,.2) forwards;
}

.umbreon-left-message {
  position: fixed;
  left: 50%;
  top: 46%;
  z-index: 82;
  width: min(940px, calc(100vw - 28px));
  color: #f7f2ff;
  font-family: "Bungee", system-ui, sans-serif;
  font-size: clamp(1.8rem, 8vw, 5.8rem);
  line-height: .92;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 22px #5d35ff, 6px 6px 0 #050008;
  transform: translate(-50%, -50%);
  animation: ominous-hold 1.4s ease-out forwards;
}

.lapras-rain-scene {
  position: fixed;
  inset: 0;
  z-index: 78;
  overflow: hidden;
  pointer-events: none;
  color: #f7fdff;
  background:
    radial-gradient(ellipse at 18% 18%, rgba(255, 255, 255, .2), transparent 18%),
    radial-gradient(ellipse at 82% 26%, rgba(85, 231, 255, .24), transparent 22%),
    radial-gradient(circle at 50% 35%, rgba(115, 220, 255, .22), transparent 42%),
    linear-gradient(#061421 0%, #12324b 52%, #07131e 100%);
  animation: rainy-arrive .8s ease-out forwards;
}

.lapras-rain-scene::before,
.lapras-rain-scene::after {
  content: "";
  position: absolute;
  inset: -20%;
  background-image:
    radial-gradient(ellipse at 8% 8%, rgba(255, 255, 255, .92) 0 7px, transparent 8px),
    radial-gradient(ellipse at 28% 18%, rgba(85, 231, 255, .86) 0 8px, transparent 9px),
    radial-gradient(ellipse at 52% 4%, rgba(255, 255, 255, .9) 0 6px, transparent 7px),
    radial-gradient(ellipse at 78% 16%, rgba(85, 231, 255, .8) 0 9px, transparent 10px),
    radial-gradient(ellipse at 93% 6%, rgba(255, 255, 255, .82) 0 7px, transparent 8px),
    repeating-linear-gradient(105deg, rgba(190, 238, 255, .78) 0 7px, transparent 7px 40px);
  background-size: 240px 170px, 260px 190px, 210px 150px, 280px 200px, 230px 180px, 120px 120px;
  opacity: .22;
  transform: translateY(-12%);
  animation: rain-fall .9s linear infinite, rain-build 4.2s ease-in forwards;
}

.lapras-rain-scene::after {
  opacity: .12;
  background-image:
    radial-gradient(ellipse at 16% 8%, rgba(255, 255, 255, .78) 0 10px, transparent 11px),
    radial-gradient(ellipse at 42% 26%, rgba(111, 222, 255, .9) 0 13px, transparent 14px),
    radial-gradient(ellipse at 72% 12%, rgba(255, 255, 255, .76) 0 9px, transparent 10px),
    repeating-linear-gradient(100deg, rgba(255, 255, 255, .5) 0 4px, transparent 4px 32px);
  background-size: 300px 230px, 260px 200px, 340px 250px, 140px 140px;
  animation-duration: .54s, 4.2s;
}

.credit-wrap {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 2;
  width: min(980px, calc(100vw - 28px));
  transform: translate(-50%, -50%);
}

.lapras-credit {
  margin: 0;
  color: #f8feff;
  font-family: "Bungee", system-ui, sans-serif;
  font-size: clamp(1.42rem, 5.8vw, 4.7rem);
  line-height: .98;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(91, 222, 255, .9), 5px 5px 0 #061421;
  opacity: 0;
  animation: credit-reveal 1.4s ease forwards;
  animation-delay: 1.25s;
}

.lapras-credit.washed {
  animation: text-wash-away 1s ease-in forwards;
}

.surf-wash {
  position: absolute;
  left: -22%;
  top: 51%;
  z-index: 3;
  width: 0;
  height: min(58vh, 520px);
  border: 5px solid rgba(255, 255, 255, .72);
  border-left: 0;
  border-radius: 0 52% 46% 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .95) 0 12%, transparent 13%),
    radial-gradient(circle at 76% 36%, rgba(255, 255, 255, .86) 0 8%, transparent 9%),
    repeating-radial-gradient(circle at 82% 22%, rgba(255, 255, 255, .58) 0 8px, rgba(85, 231, 255, .28) 9px 18px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .78) 0 14px, rgba(90, 219, 255, .78) 14px 34px),
    linear-gradient(90deg, rgba(5, 126, 204, .96), rgba(60, 214, 255, .92) 62%, rgba(255, 255, 255, .5));
  filter: drop-shadow(0 0 24px rgba(85, 231, 255, .8));
  opacity: 0;
  transform: translateY(-50%);
}

.surf-wash.active {
  animation: wave-wipe 1.9s cubic-bezier(.18,.82,.25,1) forwards;
}

.surf-lapras {
  position: absolute;
  left: -280px;
  top: 39%;
  z-index: 4;
  width: clamp(160px, 34vw, 340px);
  border-radius: 18px;
  filter:
    drop-shadow(0 0 16px #b7f6ff)
    drop-shadow(0 0 36px #55e7ff);
  transform: translateY(-50%);
}

.surf-lapras.active {
  animation: lapras-surf 2.3s cubic-bezier(.15,.78,.24,1) forwards;
}

.lore-scene {
  position: fixed;
  inset: 0;
  z-index: 110;
  overflow: hidden;
  pointer-events: none;
  color: #fffaf1;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 228, 92, .1), transparent 26%),
    linear-gradient(130deg, #040208 0%, #120817 44%, #03121a 100%);
  animation: lore-curtain 15.5s ease forwards;
}

.lore-scene::before {
  content: "";
  position: absolute;
  inset: -15%;
  background:
    repeating-linear-gradient(100deg, transparent 0 22px, rgba(255, 255, 255, .08) 22px 23px),
    radial-gradient(circle at 18% 28%, rgba(255, 90, 165, .26), transparent 22%),
    radial-gradient(circle at 78% 66%, rgba(85, 231, 255, .24), transparent 24%);
  opacity: .5;
  animation: lore-backdrop-sway 5.5s ease-in-out infinite;
}

.lore-title {
  position: absolute;
  left: 50%;
  top: clamp(18px, 4vh, 44px);
  z-index: 5;
  width: min(920px, calc(100vw - 28px));
  font-family: "Bungee", system-ui, sans-serif;
  font-size: clamp(1.7rem, 7vw, 5.5rem);
  line-height: .9;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(255, 228, 92, .8), 6px 6px 0 #000;
  transform: translateX(-50%);
  animation: lore-title-drop 15.5s ease forwards;
}

.lore-spotlight {
  position: absolute;
  left: 50%;
  top: -26vh;
  z-index: 2;
  width: min(82vw, 680px);
  height: 125vh;
  background: radial-gradient(ellipse at 50% 20%, rgba(255, 244, 197, .74) 0 10%, rgba(255, 228, 92, .22) 28%, transparent 64%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  transform: translateX(-50%) rotate(-14deg);
  animation: lore-spotlight-sweep 15.5s ease-in-out forwards;
}

.mercury-puddle {
  position: absolute;
  left: 50%;
  bottom: 7vh;
  z-index: 3;
  width: min(72vw, 720px);
  height: clamp(48px, 10vw, 92px);
  border: 4px solid rgba(255, 255, 255, .52);
  border-radius: 50%;
  background:
    radial-gradient(circle at 24% 34%, rgba(255, 255, 255, .95) 0 8%, transparent 9%),
    radial-gradient(circle at 70% 52%, rgba(176, 232, 255, .86) 0 10%, transparent 11%),
    linear-gradient(90deg, #3e4650, #f0f6f8 36%, #6b7177 58%, #f8ffff 76%, #363b45);
  box-shadow: 0 0 28px rgba(175, 233, 255, .55), inset 0 -12px 28px rgba(0, 0, 0, .44);
  transform: translateX(-50%) scaleX(.2);
  opacity: 0;
  animation: mercury-warning 15.5s ease forwards;
}

.lore-side {
  position: absolute;
  top: 22vh;
  z-index: 4;
  width: min(42vw, 420px);
  height: min(48vh, 430px);
}

.meltan-side {
  left: clamp(12px, 6vw, 92px);
}

.wooper-side {
  right: clamp(12px, 6vw, 92px);
}

.lore-side img {
  position: absolute;
  width: clamp(112px, 21vw, 230px);
  aspect-ratio: 1;
  object-fit: contain;
  border: 5px solid #fffaf1;
  border-radius: 8px;
  background: rgba(255, 250, 241, .92);
  padding: 8px;
  box-shadow: 8px 8px 0 #000, 0 0 22px rgba(255, 255, 255, .32);
  opacity: 0;
}

.meltan-side img {
  left: calc(var(--lore-index) * 18%);
  top: calc(var(--lore-index) * 16%);
  animation: meltan-evidence 15.5s ease forwards;
  animation-delay: calc(var(--lore-index) * .18s);
}

.wooper-side img {
  right: calc(var(--lore-index) * 16%);
  top: calc(14% + var(--lore-index) * 13%);
  animation: wooper-chaos-entry 15.5s ease forwards;
  animation-delay: calc(5.7s + var(--lore-index) * .2s);
}

.interest-beam {
  position: absolute;
  left: 49%;
  top: 47%;
  z-index: 3;
  width: min(56vw, 680px);
  height: 34px;
  border: 4px solid #fffaf1;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #ffe45c 0 18px, #55e7ff 18px 36px, #ff5aa5 36px 54px);
  box-shadow: 0 0 34px rgba(255, 228, 92, .62), 6px 6px 0 #000;
  transform-origin: left center;
  opacity: 0;
  animation: interest-transfer 15.5s ease forwards;
}

.lore-caption {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 5vh, 50px);
  z-index: 6;
  width: min(1020px, calc(100vw - 28px));
  min-height: 112px;
  transform: translateX(-50%);
}

.lore-caption p {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 14px 18px;
  border: 4px solid #fffaf1;
  border-radius: 8px;
  background: rgba(0, 0, 0, .78);
  box-shadow: 8px 8px 0 #000;
  font-family: "Bungee", system-ui, sans-serif;
  font-size: clamp(1rem, 3.6vw, 2.4rem);
  line-height: 1.02;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(18px) scale(.96);
  animation: lore-caption-beat 15.5s ease forwards;
  animation-delay: calc(var(--caption-index) * 2.6s);
}

.lore-finale {
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 7;
  width: min(980px, calc(100vw - 28px));
  color: #fffaf1;
  font-family: "Bungee", system-ui, sans-serif;
  font-size: clamp(2.4rem, 12vw, 8.8rem);
  line-height: .86;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 22px #55e7ff, 8px 8px 0 #1c1630, 13px 13px 0 #ff5aa5;
  transform: translate(-50%, -50%) scale(.5) rotate(-8deg);
  opacity: 0;
  animation: lore-finale-pop 15.5s ease forwards;
}

.runner {
  position: fixed;
  left: var(--start-left);
  top: var(--start-top);
  z-index: 31;
  width: var(--run-size);
  aspect-ratio: 1;
  object-fit: contain;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  padding: 8px;
  box-shadow: 6px 6px 0 var(--ink);
  animation: horror-run var(--run-speed) cubic-bezier(.12,.82,.24,1) forwards;
  animation-delay: var(--run-delay);
}

.horror-message {
  position: fixed;
  left: 50%;
  top: 44%;
  z-index: 70;
  width: min(920px, calc(100vw - 26px));
  color: #fff8f8;
  font-family: "Bungee", system-ui, sans-serif;
  font-size: clamp(2rem, 9vw, 6.7rem);
  line-height: .9;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 0 18px rgba(255, 0, 0, .8),
    5px 5px 0 #210006;
  transform: translate(-50%, -50%) scale(.82);
  opacity: 0;
  animation: message-rise 3.9s ease forwards;
}

.final-wooper-scene {
  position: fixed;
  left: 50%;
  bottom: -42vh;
  z-index: 72;
  width: min(62vw, 360px);
  transform: translateX(-50%);
  animation: wooper-arrival 5s ease-in-out forwards;
}

.final-wooper {
  width: 100%;
  border: 5px solid #1a0004;
  border-radius: 50%;
  background: #cfedf4;
  padding: 24px;
  box-shadow:
    0 0 42px rgba(255, 0, 0, .55),
    12px 12px 0 #1a0004;
  filter: contrast(1.16) saturate(.72);
}

.wooper-stain {
  position: absolute;
  left: var(--stain-left);
  top: var(--stain-top);
  width: var(--stain-size);
  height: var(--stain-size);
  border-radius: 50%;
  background: radial-gradient(circle, #b40013 0 48%, #4b0007 76%, transparent 78%);
  opacity: .88;
  mix-blend-mode: multiply;
  animation: stain-crawl 1.7s ease-in-out infinite alternate;
  animation-delay: var(--stain-delay);
}

.blood-spot {
  position: fixed;
  z-index: 71;
  left: var(--blood-left);
  top: var(--blood-top);
  width: var(--blood-size);
  height: var(--blood-size);
  border-radius: 50%;
  background: radial-gradient(circle, #b00012 0 42%, #4f0008 72%, transparent 74%);
  opacity: 0;
  transform: scale(.2);
  animation: blood-bloom 1.4s ease-out forwards;
  animation-delay: var(--blood-delay);
}

.tackle-hit .page-shell {
  animation: page-shake .18s linear 5;
}

.roaring .ticker,
.roaring .poke-card,
.roaring .hero-wooper {
  animation: page-shake .2s linear 4;
}

.sprite-river {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  overflow: hidden;
  padding: 32px 0 46px;
}

.river-track {
  display: flex;
  width: max-content;
  gap: clamp(22px, 5vw, 60px);
  animation: river 24s linear infinite;
}

.river-pirate {
  position: relative;
  display: block;
  flex: 0 0 auto;
}

.river-track img {
  width: clamp(86px, 16vw, 150px);
  aspect-ratio: 1;
  object-fit: contain;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  padding: 10px;
  box-shadow: 6px 6px 0 var(--ink);
}

body.pirate-party {
  color: #f9efe1;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 218, 112, .95) 0 6%, transparent 7%),
    linear-gradient(180deg, #78d1df 0 26%, #e9c57d 26% 38%, #1b1111 38% 100%);
  animation: pirate-sky-sway 10s ease-in-out infinite;
}

body.pirate-party::after {
  content: "";
  position: fixed;
  inset: auto 0 0;
  z-index: 1;
  height: 24vh;
  pointer-events: none;
  background:
    radial-gradient(80% 70% at 50% 120%, rgba(255, 231, 160, .9) 0 58%, transparent 59%),
    repeating-linear-gradient(90deg, rgba(105, 66, 32, .24) 0 22px, rgba(255, 238, 184, .2) 22px 44px);
  opacity: .72;
}

body.pirate-party .page-shell {
  position: relative;
  z-index: 3;
  animation: deck-rock 7s ease-in-out infinite;
}

body.pirate-party .noise {
  opacity: .1;
  mix-blend-mode: multiply;
  background-image:
    linear-gradient(90deg, rgba(10, 8, 8, .18) 1px, transparent 1px),
    linear-gradient(rgba(10, 8, 8, .12) 1px, transparent 1px);
}

body.pirate-party .top-bar a,
body.pirate-party .primary-link,
body.pirate-party .sound-button,
body.pirate-party .lore-button,
body.pirate-party .pirate-button,
body.pirate-party .panic-button,
body.pirate-party .stampede-button,
body.pirate-party .move-card,
body.pirate-party .poke-card,
body.pirate-party .chaos-lab,
body.pirate-party .status-output,
body.pirate-party .speech-bubble,
body.pirate-party .platform,
body.pirate-party .kicker,
body.pirate-party .river-track img,
body.pirate-party .hero-wooper {
  border-color: #050505;
  box-shadow: 7px 7px 0 #050505;
}

body.pirate-party .poke-card,
body.pirate-party .chaos-lab,
body.pirate-party .status-output,
body.pirate-party .speech-bubble,
body.pirate-party .platform,
body.pirate-party .top-bar a,
body.pirate-party .primary-link,
body.pirate-party .sound-button,
body.pirate-party .lore-button,
body.pirate-party .pirate-button,
body.pirate-party .panic-button,
body.pirate-party .stampede-button {
  color: #f9efe1;
  background:
    linear-gradient(135deg, #211616, #070707);
}

body.pirate-party h1 {
  color: #f9efe1;
  text-shadow: 5px 5px 0 #050505, 10px 10px 0 #981622;
}

body.pirate-party .ticker {
  background: #050505;
  border-color: #c99a42;
}

body.pirate-party .ticker-track {
  animation-duration: 11s;
}

body.pirate-party .ticker-track span {
  color: #f4d17c;
  text-shadow: 3px 3px 0 #5e0d15;
}

body.pirate-party .move-card.water,
body.pirate-party .move-card.bubble,
body.pirate-party .move-card.tackle,
body.pirate-party .move-card.roar {
  color: #f9efe1;
  background:
    linear-gradient(135deg, #111, #8d121d 72%);
}

body.pirate-party .primary-link,
body.pirate-party .panic-button,
body.pirate-party .pirate-button {
  background: #9d1823;
}

body.pirate-party .sound-button,
body.pirate-party .lore-button,
body.pirate-party .kicker,
body.pirate-party .platform {
  color: #120d0d;
  background: #e7c071;
  text-shadow: none;
}

body.pirate-party .hero-wooper,
body.pirate-party .river-track > .river-pirate > img:not(.pirate-hat) {
  background: #f2e5c6;
}

.pirate-hat {
  position: absolute;
  z-index: 7;
  display: block;
  max-height: none;
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  object-fit: contain;
  filter: drop-shadow(4px 6px 0 rgba(0, 0, 0, .45));
  transform-origin: 50% 80%;
  animation: hat-drop .78s cubic-bezier(.2, 1.4, .3, 1) both, hat-bob 2.2s ease-in-out .78s infinite;
}

body.pirate-party .river-track .pirate-hat,
body.pirate-party .poke-card .pirate-hat,
body.pirate-party .wooper-stage .pirate-hat {
  display: block;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(4px 6px 0 rgba(0, 0, 0, .45));
  max-height: none;
  object-fit: contain;
  padding: 0;
  pointer-events: none;
  animation: hat-drop .78s cubic-bezier(.2, 1.4, .3, 1) both, hat-bob 2.2s ease-in-out .78s infinite;
}

body.pirate-party .wooper-stage .hero-hat {
  left: 50%;
  top: 28px;
  width: min(30vw, 190px);
  transform: translateX(-50%) rotate(-8deg);
}

body.pirate-party .poke-card .card-hat {
  right: 5%;
  top: -7px;
  width: min(30%, 94px);
  transform: rotate(-10deg);
}

body.pirate-party .main-card .card-hat,
body.pirate-party .tall-card .card-hat {
  width: min(32%, 128px);
}

body.pirate-party .river-track .river-hat {
  left: 50%;
  top: -18%;
  width: 48%;
  transform: translateX(-50%) rotate(-9deg);
}

.pirate-coin {
  position: fixed;
  left: var(--coin-left);
  top: -30px;
  z-index: 90;
  width: 22px;
  height: 22px;
  border: 3px solid #4f2705;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff5a8 0 20%, #ffd55b 21% 58%, #b97412 59%);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
  animation: coin-rain 1.8s ease-in forwards;
  animation-delay: var(--coin-delay);
}

body.charmy-takeover {
  color: #fff3df;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 197, 93, .4), transparent 22%),
    radial-gradient(circle at 85% 12%, rgba(232, 72, 36, .46), transparent 18%),
    linear-gradient(180deg, #26110d 0%, #100807 48%, #040202 100%);
}

body.charmy-takeover::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .72;
  background:
    radial-gradient(circle at 20% 95%, rgba(255, 95, 30, .32), transparent 24%),
    radial-gradient(circle at 72% 92%, rgba(255, 174, 64, .26), transparent 28%),
    linear-gradient(180deg, transparent 0 55%, rgba(156, 26, 12, .18));
  animation: charmy-heat-haze 5.8s ease-in-out infinite;
}

body.charmy-takeover::after {
  content: "";
  position: fixed;
  inset: auto 0 0;
  z-index: 1;
  height: 30vh;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% 120%, rgba(255, 163, 66, .54) 0 54%, transparent 55%),
    linear-gradient(180deg, transparent, rgba(79, 10, 4, .84));
}

body.charmy-takeover .page-shell {
  position: relative;
  z-index: 3;
  animation: none;
}

body.charmy-takeover .noise {
  opacity: .18;
  mix-blend-mode: screen;
}

body.charmy-takeover .top-bar a,
body.charmy-takeover .primary-link,
body.charmy-takeover .sound-button,
body.charmy-takeover .lore-button,
body.charmy-takeover .pirate-button,
body.charmy-takeover .panic-button,
body.charmy-takeover .stampede-button,
body.charmy-takeover .move-card,
body.charmy-takeover .poke-card,
body.charmy-takeover .chaos-lab,
body.charmy-takeover .status-output,
body.charmy-takeover .speech-bubble,
body.charmy-takeover .platform,
body.charmy-takeover .kicker,
body.charmy-takeover .river-track img,
body.charmy-takeover .hero-wooper {
  border-color: #170603;
  box-shadow: 7px 7px 0 #170603;
}

body.charmy-takeover .poke-card,
body.charmy-takeover .chaos-lab,
body.charmy-takeover .status-output,
body.charmy-takeover .speech-bubble,
body.charmy-takeover .top-bar a,
body.charmy-takeover .primary-link,
body.charmy-takeover .sound-button,
body.charmy-takeover .lore-button,
body.charmy-takeover .pirate-button,
body.charmy-takeover .panic-button,
body.charmy-takeover .stampede-button {
  color: #fff3df;
  background: linear-gradient(135deg, #24100d, #6d170e 72%);
}

body.charmy-takeover .kicker,
body.charmy-takeover .platform {
  color: #1b0804;
  background: #ffbd58;
}

body.charmy-takeover h1 {
  color: #fff3df;
  text-shadow: 5px 5px 0 #170603, 10px 10px 0 #d83a16, 0 0 22px rgba(255, 142, 45, .58);
}

body.charmy-takeover .hero-wooper {
  background: #ffe0a0;
  animation: charmy-boss-float 2.5s ease-in-out infinite;
}

body.charmy-takeover .ticker {
  background: #170603;
  border-color: #ff9f3d;
}

body.charmy-takeover .ticker-track {
  animation-duration: 13s;
}

body.charmy-takeover .ticker-track span {
  color: #ffbd58;
  text-shadow: 3px 3px 0 #9f1e0b;
}

body.charmy-takeover .move-card.water,
body.charmy-takeover .move-card.bubble,
body.charmy-takeover .move-card.tackle,
body.charmy-takeover .move-card.roar {
  color: #fff3df;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 205, 99, .8) 0 8%, transparent 9%),
    linear-gradient(135deg, #170603, #9f1e0b 64%, #f0701f);
}

body.charmy-takeover .poke-card img:not(.pirate-hat) {
  filter: saturate(.75) sepia(.2) brightness(.72) drop-shadow(5px 7px 0 rgba(23, 6, 3, .42));
}

body.charmy-takeover .poke-card.charmy-commanded {
  transform: rotate(var(--tilt, -1deg));
}

body.charmy-takeover .poke-card.charmy-commanded::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 0 58%, rgba(255, 83, 26, .28));
}

.charmy-order {
  position: absolute;
  left: 14px;
  top: 12px;
  z-index: 6;
  padding: 6px 9px;
  border: 3px solid #170603;
  border-radius: 8px;
  color: #1b0804;
  background: #ffbd58;
  box-shadow: 4px 4px 0 #170603;
  font-family: "Bungee", system-ui, sans-serif;
  font-size: .62rem;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

.charmy-ember {
  position: fixed;
  left: var(--ember-left);
  bottom: -20px;
  z-index: 88;
  width: 10px;
  height: 18px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 75%, #fff8c6 0 14%, #ffbd58 28%, #e74718 66%, transparent 70%);
  filter: drop-shadow(0 0 10px rgba(255, 95, 30, .82));
  animation: charmy-ember-rise 2.2s ease-out forwards;
  animation-delay: var(--ember-delay);
}

.charmy-fire {
  position: fixed;
  left: var(--fire-left);
  top: var(--fire-top);
  z-index: 74;
  width: var(--fire-size);
  height: var(--fire-size);
  padding: 0;
  border: 4px solid #170603;
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 50% 76%, #fff7b1 0 14%, #ffd660 15% 32%, transparent 33%),
    radial-gradient(circle at 48% 62%, #ff8a24 0 44%, #d72a10 45% 66%, transparent 67%);
  box-shadow:
    0 0 16px rgba(255, 188, 72, .82),
    0 0 34px rgba(218, 48, 18, .62),
    5px 5px 0 #170603;
  cursor: pointer;
  transform-origin: 50% 90%;
  animation: charmy-fire-pop .38s ease-out both, charmy-fire-dance .42s ease-in-out infinite alternate;
  animation-delay: var(--fire-delay), calc(var(--fire-delay) + .38s);
}

.charmy-fire::before,
.charmy-fire::after {
  content: "";
  position: absolute;
  inset: 22% 26% 10%;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 50% 72%, #fffde2 0 18%, #ffed80 19% 46%, transparent 47%);
  pointer-events: none;
}

.charmy-fire::after {
  inset: auto 10% -8px;
  height: 18px;
  border: 3px solid #170603;
  border-radius: 50%;
  background: rgba(23, 6, 3, .18);
  filter: blur(1px);
}

.charmy-fire:hover,
.charmy-fire:focus-visible {
  filter: brightness(1.2) saturate(1.2);
  outline: 3px solid #fff7b1;
  outline-offset: 4px;
}

.charmy-fire.burned-away {
  pointer-events: none;
  animation: charmy-fire-out .5s ease-in forwards;
}

body.charmy-happy .hero-wooper,
.charmy-happy-main {
  background: #ffeaa8;
  filter:
    drop-shadow(0 0 16px rgba(255, 230, 111, .8))
    drop-shadow(0 0 28px rgba(255, 111, 46, .56));
  animation: charmy-happy-bounce .74s ease-in-out infinite;
}

.charmy-finale {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 238, 159, .42), transparent 36%),
    linear-gradient(145deg, rgba(12, 5, 3, .92), rgba(107, 23, 12, .88));
  animation: charmy-finale-arrive .55s ease-out both;
}

.showstopper-photo {
  width: min(78vw, 520px);
  max-height: min(68vh, 620px);
  object-fit: cover;
  border: 6px solid #fff3df;
  border-radius: 8px;
  box-shadow:
    0 0 44px rgba(255, 209, 104, .58),
    14px 14px 0 #170603;
  animation: showstopper-pop .7s cubic-bezier(.2,.8,.2,1) both;
}

.finale-charmy,
.finale-wooper {
  position: absolute;
  z-index: 2;
  width: clamp(92px, 18vw, 170px);
  border: 4px solid #170603;
  border-radius: 50%;
  background: #fff3df;
  padding: 10px;
  box-shadow: 7px 7px 0 #170603;
}

.finale-charmy {
  left: max(18px, calc(50% - 390px));
  bottom: 12vh;
  background: #ffe0a0;
  animation: finale-side-bounce 1.1s ease-in-out infinite;
}

.finale-wooper {
  right: max(18px, calc(50% - 390px));
  bottom: 12vh;
  background: #b7f6ff;
  animation: finale-side-bounce 1.1s ease-in-out infinite reverse;
}

.showstopper-caption {
  position: absolute;
  left: 50%;
  bottom: 7vh;
  z-index: 3;
  padding: 10px 14px;
  border: 4px solid #170603;
  border-radius: 8px;
  color: #170603;
  background: #ffbd58;
  box-shadow: 6px 6px 0 #170603;
  font-family: "Bungee", system-ui, sans-serif;
  font-size: clamp(1.1rem, 4vw, 2.5rem);
  text-transform: uppercase;
  transform: translateX(-50%) rotate(-2deg);
}

.showstopper-close {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 4;
  padding: 10px 13px;
  border: 4px solid #170603;
  border-radius: 8px;
  color: #170603;
  background: #fff3df;
  box-shadow: 5px 5px 0 #170603;
  font-family: "Bungee", system-ui, sans-serif;
  text-transform: uppercase;
}

.boop .hero-wooper,
.boop .poke-card img:not(.pirate-hat) {
  animation-duration: .55s;
}

.boop .page-shell {
  animation: page-shake .28s linear 3;
}

@keyframes floaty {
  0%,
  100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-20px) rotate(4deg); }
}

@keyframes spin-pop {
  0%,
  88% { border-radius: 50%; }
  89%,
  100% { border-radius: 24px; }
}

@keyframes wobble {
  0%,
  100% { transform: rotate(8deg) scale(1); }
  50% { transform: rotate(2deg) scale(1.06); }
}

@keyframes drift {
  0%,
  100% { transform: translate(0, 0) rotate(-6deg); }
  50% { transform: translate(9px, -16px) rotate(8deg); }
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

@keyframes bouncy {
  0%,
  100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(4deg); }
}

@keyframes pirate-sky-sway {
  0%,
  100% { background-position: 0 0, 0 0, 0 0; }
  50% { background-position: 18px -8px, 0 12px, 0 0; }
}

@keyframes deck-rock {
  0%,
  100% { transform: rotate(0); }
  25% { transform: rotate(.25deg) translateY(-2px); }
  75% { transform: rotate(-.22deg) translateY(2px); }
}

@keyframes hat-drop {
  0% { opacity: 0; translate: 0 -80px; scale: .55; rotate: 18deg; }
  70% { opacity: 1; translate: 0 8px; scale: 1.08; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes hat-bob {
  0%,
  100% { margin-top: 0; }
  50% { margin-top: -7px; }
}

@keyframes coin-rain {
  0% { opacity: 0; transform: translateY(-20px) rotate(0); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translateY(105vh) rotate(var(--coin-spin)); }
}

@keyframes charmy-heat-haze {
  0%,
  100% { opacity: .58; transform: translateY(0) scale(1); }
  50% { opacity: .82; transform: translateY(-8px) scale(1.02); }
}

@keyframes charmy-boss-float {
  0%,
  100% { transform: translateY(0) rotate(-3deg); filter: drop-shadow(0 0 14px rgba(255, 109, 33, .4)); }
  50% { transform: translateY(-18px) rotate(4deg); filter: drop-shadow(0 0 28px rgba(255, 109, 33, .72)); }
}

@keyframes charmy-ember-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(.45) rotate(-8deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--ember-drift), -105vh) scale(1.4) rotate(24deg); }
}

@keyframes charmy-fire-pop {
  0% { opacity: 0; transform: translateY(22px) scale(.4) rotate(-12deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes charmy-fire-dance {
  0% { transform: translateY(0) scaleX(.92) rotate(-5deg); }
  100% { transform: translateY(-7px) scaleX(1.08) rotate(5deg); }
}

@keyframes charmy-fire-out {
  0% { opacity: 1; transform: translateY(-7px) scale(1) rotate(5deg); filter: blur(0); }
  100% { opacity: 0; transform: translateY(18px) scale(.14) rotate(28deg); filter: blur(7px) grayscale(1); }
}

@keyframes charmy-happy-bounce {
  0%,
  100% { transform: translateY(0) rotate(-5deg) scale(1); }
  50% { transform: translateY(-18px) rotate(5deg) scale(1.06); }
}

@keyframes charmy-finale-arrive {
  from { opacity: 0; filter: blur(10px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes showstopper-pop {
  0% { opacity: 0; transform: translateY(24px) scale(.86) rotate(-2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(1deg); }
}

@keyframes finale-side-bounce {
  0%,
  100% { transform: translateY(0) rotate(-7deg); }
  50% { transform: translateY(-16px) rotate(7deg); }
}

@keyframes river {
  to { transform: translateX(calc(-50% - 30px)); }
}

@keyframes page-shake {
  0%,
  100% { transform: translate(0, 0); }
  25% { transform: translate(5px, -3px); }
  50% { transform: translate(-4px, 4px); }
  75% { transform: translate(3px, 3px); }
}

@keyframes water-shot {
  0% { opacity: 0; transform: scaleX(.1) rotate(-6deg); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: scaleX(1.08) rotate(-6deg); }
}

@keyframes flame-shot {
  0% { opacity: 0; transform: scaleX(.1) rotate(-7deg); filter: blur(4px); }
  16% { opacity: 1; filter: blur(0); }
  70% { opacity: 1; transform: scaleX(1.08) rotate(-7deg) translateX(-8px); }
  100% { opacity: 0; transform: scaleX(1.16) rotate(-7deg) translateX(-18px); filter: blur(3px); }
}

@keyframes bubble-float {
  0% { opacity: 0; transform: translateY(30px) scale(.2); }
  20% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-190px) scale(1.35); }
}

@keyframes roar-pulse {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(18); }
}

@keyframes word-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.45) rotate(8deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(-4deg); }
  100% { opacity: 0; transform: translate(-50%, -130%) scale(.92) rotate(3deg); }
}

@keyframes run-across {
  0% { transform: translateX(0) translateY(0) rotate(-12deg) scaleX(1); }
  20% { transform: translateX(25vw) translateY(-18px) rotate(10deg) scaleX(1); }
  50% { transform: translateX(58vw) translateY(16px) rotate(-8deg) scaleX(1); }
  100% { transform: translateX(calc(100vw + 320px)) translateY(-8px) rotate(16deg) scaleX(1); }
}

@keyframes horror-run {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(-10deg) scale(1);
  }
  42% {
    opacity: 1;
    transform: translate(calc(var(--run-x) * .46), var(--run-y)) rotate(22deg) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(var(--run-x), calc(var(--run-y) * -1)) rotate(-34deg) scale(.7);
  }
}

@keyframes red-dread {
  0% { opacity: 0; backdrop-filter: none; }
  34% { opacity: .42; backdrop-filter: saturate(.6); }
  72% { opacity: .78; backdrop-filter: saturate(.45) contrast(1.2); }
  100% { opacity: .94; backdrop-filter: saturate(.25) contrast(1.35); }
}

@keyframes dread-shake {
  0% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(3px, -5px) rotate(.2deg); }
  40% { transform: translate(-6px, 2px) rotate(-.25deg); }
  60% { transform: translate(5px, 4px) rotate(.18deg); }
  80% { transform: translate(-2px, -3px) rotate(-.2deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

@keyframes message-rise {
  0% { opacity: 0; transform: translate(-50%, -48%) scale(.68); filter: blur(8px); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); filter: blur(0); }
  76% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: .08; transform: translate(-50%, -54%) scale(.92); }
}

@keyframes wooper-arrival {
  0% { bottom: -42vh; transform: translateX(-50%) rotate(0) scale(.9); }
  38% { bottom: 10vh; transform: translateX(-50%) rotate(-4deg) scale(1); }
  52% { bottom: 18vh; transform: translateX(-50%) rotate(5deg) scale(1.05); }
  66% { bottom: 10vh; transform: translateX(-50%) rotate(-4deg) scale(1); }
  80% { bottom: 17vh; transform: translateX(-50%) rotate(4deg) scale(1.04); }
  100% { bottom: 12vh; transform: translateX(-50%) rotate(0) scale(1); }
}

@keyframes stain-crawl {
  0% { transform: translateY(0) scale(.96); }
  100% { transform: translateY(8px) scale(1.08); }
}

@keyframes blood-bloom {
  0% { opacity: 0; transform: scale(.1); filter: blur(4px); }
  25% { opacity: .95; transform: scale(1.08); filter: blur(0); }
  100% { opacity: .82; transform: scale(1); }
}

@keyframes rainbow-card {
  to { filter: hue-rotate(360deg) saturate(1.25); }
}

@keyframes battle-bond-glow {
  0% { transform: translateY(-4px) rotate(-4deg) scale(1); }
  100% { transform: translateY(-14px) rotate(4deg) scale(1.12); }
}

@keyframes mega-scene-fade {
  0% { opacity: 0; filter: brightness(1); }
  12% { opacity: 1; filter: brightness(1.8); }
  72% { opacity: 1; filter: brightness(1.15); }
  100% { opacity: 0; filter: brightness(2.4); }
}

@keyframes mega-ring {
  to { transform: rotate(360deg) scale(1.08); }
}

@keyframes mega-evolve-pop {
  0% { transform: scale(.52) rotate(-12deg); opacity: 0; }
  18% { transform: scale(.92) rotate(8deg); opacity: 1; }
  54% { transform: scale(1.26) rotate(-4deg); }
  100% { transform: scale(1.05) rotate(0); opacity: 1; }
}

@keyframes mega-label {
  0% { opacity: 0; transform: translateX(-50%) translateY(30px) scale(.8); }
  20% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.04); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(.92); }
}

@keyframes night-arrive {
  from { opacity: 0; filter: blur(16px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes night-quake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(3px, -2px); }
  50% { transform: translate(-4px, 3px); }
  75% { transform: translate(2px, 4px); }
  100% { transform: translate(0, 0); }
}

@keyframes moon-pulse {
  0%,
  100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.35); }
}

@keyframes moon-walk {
  0% { transform: translateX(0) translateY(0) scaleX(1); }
  28% { transform: translateX(30vw) translateY(-16px) scaleX(1); }
  56% { transform: translateX(54vw) translateY(4px) scaleX(1); }
  57% { transform: translateX(54vw) translateY(4px) scaleX(-1); }
  100% { transform: translateX(12vw) translateY(-8px) scaleX(-1); }
}

@keyframes hint-flicker {
  0%,
  100% { opacity: .4; }
  8% { opacity: 1; }
  10% { opacity: .2; }
  14% { opacity: .9; }
  58% { opacity: .5; }
  60% { opacity: 1; }
}

@keyframes shadow-blast {
  0% { opacity: 0; transform: scale(.15); filter: blur(4px); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--ball-x), var(--ball-y)) scale(1.8); filter: blur(0); }
}

@keyframes umbreon-flee {
  0% { opacity: 1; transform: translateX(54vw) translateY(4px) scaleX(1); }
  100% { opacity: 0; transform: translateX(118vw) translateY(-18vh) scaleX(1) rotate(18deg); }
}

@keyframes ominous-hold {
  from { opacity: 0; filter: blur(8px); transform: translate(-50%, -45%) scale(.86); }
  to { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(1); }
}

@keyframes rainy-arrive {
  from { opacity: 0; filter: saturate(.5) blur(12px); }
  to { opacity: 1; filter: saturate(1) blur(0); }
}

@keyframes rain-fall {
  to { transform: translate(-7%, 22%); }
}

@keyframes rain-build {
  to { opacity: .84; }
}

@keyframes credit-reveal {
  from { opacity: 0; transform: translateY(22px) scale(.94); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes wave-wipe {
  0% { opacity: 0; width: 0; transform: translateY(-50%) skewX(-12deg) scaleY(.84); }
  16% { opacity: .95; }
  58% { opacity: 1; transform: translateY(-50%) skewX(-12deg) scaleY(1.08); }
  100% { opacity: 0; width: 150vw; transform: translateY(-50%) skewX(-12deg) scaleY(1); }
}

@keyframes lapras-surf {
  0% { transform: translate(-12vw, -50%) rotate(-5deg); }
  34% { transform: translate(36vw, -86%) rotate(7deg); }
  68% { transform: translate(78vw, -34%) rotate(-5deg); }
  100% { transform: translate(126vw, -58%) rotate(5deg); }
}

@keyframes lore-curtain {
  0% { opacity: 0; filter: saturate(.7) blur(10px); }
  5%,
  91% { opacity: 1; filter: saturate(1) blur(0); }
  100% { opacity: 0; filter: saturate(1.4) blur(14px); }
}

@keyframes lore-backdrop-sway {
  0%,
  100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(-4%, 3%) rotate(2deg); }
}

@keyframes lore-title-drop {
  0% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(.86); }
  6%,
  84% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  92%,
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(.96); }
}

@keyframes lore-spotlight-sweep {
  0% { opacity: 0; transform: translateX(-50%) rotate(-28deg); }
  8% { opacity: 1; transform: translateX(-68%) rotate(-18deg); }
  35% { transform: translateX(-68%) rotate(-18deg); }
  47% { transform: translateX(-50%) rotate(0); }
  72% { transform: translateX(-32%) rotate(18deg); }
  92% { opacity: 1; transform: translateX(-32%) rotate(18deg); }
  100% { opacity: 0; transform: translateX(-50%) rotate(0); }
}

@keyframes mercury-warning {
  0%,
  16% { opacity: 0; transform: translateX(-50%) scaleX(.2); }
  24%,
  42% { opacity: .95; transform: translateX(-50%) scaleX(1); }
  50% { opacity: .22; transform: translateX(-50%) scaleX(.72); }
  64%,
  100% { opacity: 0; transform: translateX(-50%) scaleX(.1); }
}

@keyframes meltan-evidence {
  0%,
  6% { opacity: 0; transform: translateX(-80px) rotate(-12deg) scale(.78); filter: brightness(.7); }
  12%,
  34% { opacity: 1; transform: translateX(0) rotate(var(--lore-turn)) scale(1); filter: brightness(1); }
  46% { opacity: .78; transform: translateX(12vw) translateY(10px) rotate(8deg) scale(.9); filter: saturate(.55) brightness(.8); }
  64%,
  100% { opacity: .18; transform: translateX(4vw) translateY(44px) rotate(-5deg) scale(.72); filter: grayscale(.8) brightness(.55); }
}

@keyframes wooper-chaos-entry {
  0%,
  36% { opacity: 0; transform: translateX(110px) translateY(20px) rotate(18deg) scale(.6); }
  44% { opacity: 1; transform: translateX(-16px) translateY(-18px) rotate(-10deg) scale(1.08); }
  56% { opacity: 1; transform: translateX(8px) translateY(10px) rotate(8deg) scale(.98); }
  74% { opacity: 1; transform: translateX(-10vw) translateY(-8vh) rotate(-16deg) scale(1.16); }
  90% { opacity: 1; transform: translateX(-4vw) translateY(0) rotate(7deg) scale(1.03); }
  100% { opacity: 0; transform: translateX(-2vw) translateY(14vh) rotate(-4deg) scale(.92); }
}

@keyframes interest-transfer {
  0%,
  43% { opacity: 0; transform: rotate(-6deg) scaleX(.08); }
  50% { opacity: 1; transform: rotate(-6deg) scaleX(1); }
  62% { opacity: 1; transform: rotate(-6deg) scaleX(.7) translateX(22vw); }
  72%,
  100% { opacity: 0; transform: rotate(-6deg) scaleX(.12) translateX(42vw); }
}

@keyframes lore-caption-beat {
  0%,
  5% { opacity: 0; transform: translateY(18px) scale(.96); }
  8%,
  18% { opacity: 1; transform: translateY(0) scale(1); }
  23%,
  100% { opacity: 0; transform: translateY(-18px) scale(.98); }
}

@keyframes lore-finale-pop {
  0%,
  78% { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-8deg); }
  84% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(4deg); }
  91% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25) rotate(0); }
}

@keyframes text-wash-away {
  0% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); filter: blur(0); }
  100% { opacity: 0; clip-path: inset(0 0 0 100%); transform: translateY(24px); filter: blur(7px); }
}

@keyframes flame-tremble {
  0% { transform: translateX(-50%) scale(1) skewX(-4deg); }
  50% { transform: translateX(-50%) scale(1.1) skewX(5deg); }
  100% { transform: translateX(-50%) scale(.94) skewX(-2deg); }
}

@keyframes darkrai-homepage-takeover {
  0% { filter: brightness(1) saturate(1); }
  100% { filter: brightness(.74) saturate(.62) contrast(1.12); }
}

@keyframes darkrai-flash {
  0% { opacity: 0; filter: blur(20px); }
  16% { opacity: .96; filter: blur(0); }
  58% { opacity: .72; }
  100% { opacity: 0; filter: blur(10px); }
}

@keyframes darkrai-whisper {
  0% { opacity: 0; transform: translate(-50%, -44%) scale(.82); filter: blur(10px); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -56%) scale(.96); filter: blur(6px); }
}

@keyframes darkrai-materialize {
  from { opacity: 0; filter: blur(14px) brightness(1.6); }
  to { opacity: 1; filter: blur(0) brightness(1); }
}

@keyframes darkrai-hover {
  0%,
  100% { margin-top: 0; }
  50% { margin-top: -10px; }
}

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

@media (max-width: 900px) {
  .hero {
    min-height: auto;
  }

  .hero-grid,
  .move-zone,
  .chaos-lab {
    grid-template-columns: 1fr;
  }

  .wooper-stage {
    min-height: 360px;
  }

  .pokemon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .move-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tall-card {
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .page-shell {
    width: min(100% - 18px, 1160px);
  }

  .top-bar {
    justify-content: stretch;
  }

  .top-bar a {
    flex: 1;
    padding-inline: 8px;
    text-align: center;
  }

  h1 {
    font-size: clamp(2.6rem, 17vw, 4.5rem);
    text-shadow: 4px 4px 0 var(--cyan), 7px 7px 0 var(--pink);
  }

  .tagline,
  .chaos-lab p {
    font-size: 1rem;
  }

  .hero-actions {
    display: grid;
  }

  .primary-link,
  .sound-button,
  .lore-button,
  .pirate-button {
    width: 100%;
    text-align: center;
  }

  .wooper-stage {
    min-height: 310px;
  }

  .hero-wooper {
    width: min(78vw, 260px);
    box-shadow: 10px 10px 0 var(--ink);
  }

  .hero-hat {
    top: 34px;
    width: min(50vw, 180px);
  }

  .card-hat {
    width: min(45%, 118px);
  }

  .charmy-order {
    max-width: 118px;
    font-size: .56rem;
  }

  .charmy-fire {
    border-width: 3px;
  }

  .showstopper-photo {
    width: min(88vw, 420px);
    max-height: 58vh;
    border-width: 4px;
    box-shadow:
      0 0 32px rgba(255, 209, 104, .5),
      8px 8px 0 #170603;
  }

  .finale-charmy,
  .finale-wooper {
    width: clamp(74px, 24vw, 112px);
    bottom: 15vh;
  }

  .showstopper-caption {
    bottom: 6vh;
    width: min(88vw, 360px);
    text-align: center;
  }

  .speech-bubble {
    right: 0;
    top: 0;
    max-width: 146px;
    font-size: .84rem;
  }

  .platform {
    bottom: 12px;
    font-size: .84rem;
  }

  .sky-bits span {
    width: 35px;
    height: 35px;
  }

  .pokemon-grid {
    grid-template-columns: 1fr;
  }

  .move-grid {
    grid-template-columns: 1fr;
  }

  .move-card {
    min-height: 82px;
  }

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

  .poke-card {
    min-height: 190px;
  }

  .poke-card p {
    max-width: 72%;
  }

  .chaos-lab {
    margin-top: 54px;
    padding: 18px;
  }

  .cursor-friend {
    display: none;
  }

  .lore-title {
    top: 16px;
  }

  .lore-side {
    top: 17vh;
    width: 58vw;
    height: 34vh;
  }

  .meltan-side {
    left: 10px;
  }

  .wooper-side {
    right: 10px;
    top: 38vh;
  }

  .lore-side img {
    width: clamp(86px, 34vw, 150px);
    border-width: 4px;
    padding: 6px;
  }

  .interest-beam {
    left: 25%;
    top: 45%;
    width: 58vw;
    height: 26px;
  }

  .lore-caption {
    min-height: 138px;
  }

  .lore-caption p {
    font-size: clamp(.82rem, 5vw, 1.36rem);
  }
}