/* Active Meltdown site styles. One file, no build step.
   Look: chunky stickers (ink outlines, hard offset shadows), candy goo colors, the game's own fonts. */

@font-face { font-family: "Lilita One"; src: url("../fonts/LilitaOne-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("../fonts/Fredoka-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("../fonts/Fredoka-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ink: #1b0f2e;
  --night: #26144a;
  --night-2: #170c2a;
  --cream: #fff3dc;
  --paper: #fffaf0;
  --pink: #ff3d8b;
  --orange: #ff8c1a;
  --yellow: #ffd23f;
  --lime: #b8f53b;
  --cyan: #2ee6e6;
  --grape: #7b3cff;
  --red: #ff4141;
  --display: "Lilita One", "Arial Black", Impact, sans-serif;
  --body: "Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --line: 3px solid var(--ink);
  --pop: 0.35rem 0.35rem 0 var(--ink);
  --pop-big: 0.6rem 0.6rem 0 var(--ink);
  --wrap: 72rem;
  --pop-c: var(--ink); /* hard shadow color; grape on the dark sections, where ink would vanish */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--night-2);
  color: var(--ink);
  font: 500 1.125rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1; margin: 0; }
p { margin: 0 0 1rem; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 0.5rem; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 20; background: var(--yellow); padding: 0.5rem 1rem; border: var(--line); border-radius: 999px; font-weight: 700; }
.skip:focus { top: 1rem; }
.wrap { max-width: var(--wrap); margin: 0 auto; }

/* ---- stickers: pills, buttons, chips ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  font: 400 1.25rem/1 var(--display); letter-spacing: 0.02em; text-decoration: none;
  color: var(--ink); background: var(--lime);
  border: var(--line); border-radius: 999px; box-shadow: 0.35rem 0.35rem 0 var(--pop-c);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 0.5rem 0.5rem 0 var(--pop-c); }
.btn:active { transform: translate(0.2rem, 0.2rem); box-shadow: 0.15rem 0.15rem 0 var(--pop-c); }
.btn--cream { background: var(--cream); }
.btn--pink { background: var(--pink); }
.btn--big { font-size: clamp(1.1rem, 3.6vw, 1.75rem); padding: 1rem 1.8rem; overflow-wrap: anywhere; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.chip {
  display: inline-block; margin: 0;
  padding: 0.15rem 0.7rem;
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.03em; text-transform: uppercase;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--paper);
}
.chip--yellow { background: var(--yellow); }
.chip--cyan { background: var(--cyan); }
.chip--pink { background: var(--pink); }
.chip--lime { background: var(--lime); }
.chip--ink { background: var(--ink); color: var(--cream); }

/* ---- header ---- */
.top {
  position: absolute; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 2rem);
}
.brand, .nav a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--cream); color: var(--ink); text-decoration: none;
  border: var(--line); border-radius: 999px; box-shadow: 0.2rem 0.2rem 0 var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.brand { padding: 0.25rem 1rem 0.25rem 0.3rem; font: 400 1.3rem/1 var(--display); }
.brand svg { width: 2.4rem; height: 2.4rem; }
.nav { display: flex; gap: 0.5rem; }
.nav a { padding: 0.45rem 0.95rem; font-weight: 700; font-size: 1rem; }
.brand:hover, .nav a:hover { transform: translate(-2px, -2px); box-shadow: 0.35rem 0.35rem 0 var(--ink); }
.brand:hover svg { animation: wobble 0.5s ease; }

/* ---- hero ---- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  min-height: max(38rem, 100svh);
  padding: 8rem 1rem 6rem;
  background: linear-gradient(var(--night), var(--night-2));
  color: var(--cream); text-align: center;
  --pop-c: var(--grape);
}
.goo {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; max-width: none;
  image-rendering: pixelated;
  opacity: 0; transition: opacity 0.8s ease;
}
.goo.is-live { opacity: 1; }
/* Static drips for no WebGL and no JS. They fade out once the goo is live. */
.hero__drips {
  position: absolute; inset: 0 0 auto; z-index: -1;
  width: 100%; height: auto; aspect-ratio: 1440 / 100; min-height: 4rem; max-width: none;
  color: var(--pink); transition: opacity 0.8s ease;
}
.hero.has-goo .hero__drips { opacity: 0; }
.hero__inner { max-width: 60rem; }

.kicker {
  display: inline-block; margin-bottom: 1.25rem;
  padding: 0.3rem 0.9rem;
  font: 400 1rem/1.2 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); background: var(--yellow);
  border: var(--line); border-radius: 999px; box-shadow: 0.2rem 0.2rem 0 var(--pop-c);
  transform: rotate(-3deg);
}
.title {
  font-size: clamp(3.4rem, 14vw, 10.5rem); line-height: 0.84;
  text-transform: uppercase; letter-spacing: 0.01em;
  /* ink outline that reads over the goo, then a hard grape drop */
  text-shadow:
    0.035em 0 0 var(--ink), -0.035em 0 0 var(--ink), 0 0.035em 0 var(--ink), 0 -0.035em 0 var(--ink),
    0.025em 0.025em 0 var(--ink), -0.025em 0.025em 0 var(--ink), 0.025em -0.025em 0 var(--ink), -0.025em -0.025em 0 var(--ink),
    0.06em 0.08em 0 var(--grape);
}
.title { margin-bottom: 0.3em; }
.title__line { display: block; }
.melt span { position: relative; display: inline-block; transition: transform 0.15s ease; }
.melt span:nth-child(6n+1) { color: var(--pink); }
.melt span:nth-child(6n+2) { color: var(--orange); }
.melt span:nth-child(6n+3) { color: var(--yellow); }
.melt span:nth-child(6n+4) { color: var(--lime); }
.melt span:nth-child(6n+5) { color: var(--cyan); }
.melt span:nth-child(6n+6) { color: var(--cream); }
.melt span:hover { transform: translateY(-0.06em) rotate(-5deg); }
/* a second title line in plain cream, so a two-line title isn't all candy */
.melt.melt--plain span { color: var(--cream); }
/* drips hanging off some letters. Each one hangs under a stroke of its letter and is narrower than
   it. Centered by default, which fits most letters' bottom strokes (T, O, E, S, the M's middle);
   d--left hangs it under a left stem, like the N's, which runs 7 to 35 percent of the N (measured
   in Lilita One, 2026-10-15). d1 to d4 only set the length and speed.
   The drip starts inside the stroke (the baseline sits at 0.76em), and a grape copy behind it
   carries on the letter's drop shadow. */
.melt .d::before, .melt .d::after {
  content: ""; position: absolute; top: 0.7em; left: var(--x, 50%);
  width: 0.11em; height: var(--len, 0.42em); margin-left: -0.055em;
  border-radius: 0 0 999px 999px;
  transform-origin: top; animation: drip var(--speed, 3.6s) ease-in-out infinite alternate;
}
.melt .d::after { z-index: 1; background: currentColor; }
.melt .d::before { z-index: -1; margin: 0.08em 0 0 0.005em; background: var(--grape); }
.melt .d1 { --len: 0.55em; --speed: 3.2s; }
.melt .d2 { --len: 0.4em; --speed: 4.1s; }
.melt .d3 { --len: 0.36em; --speed: 2.8s; }
.melt .d4 { --len: 0.7em; --speed: 3.7s; }
.melt .d--left { --x: 21%; }

.lede {
  max-width: 34rem; margin: 0.5rem auto 0;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.45;
  text-shadow: 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink);
}
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 2rem 0 0; }

.panic-wrap { display: grid; justify-items: center; gap: 0.6rem; margin-top: 2.5rem; }
.panic {
  display: grid; place-items: center;
  width: 6.75rem; height: 6.75rem; padding: 0;
  background: repeating-linear-gradient(45deg, var(--yellow) 0 0.55rem, var(--ink) 0.55rem 1.1rem);
  border: var(--line); border-radius: 50%; box-shadow: 0.35rem 0.35rem 0 var(--pop-c);
  cursor: pointer;
  /* the small pull toward a close cursor, set by main.js */
  translate: var(--pull-x, 0) var(--pull-y, 0);
  transition: translate 0.25s cubic-bezier(0.2, 0.8, 0.3, 1.3);
}
.panic__dome {
  display: grid; place-items: center;
  width: 4.9rem; height: 4.9rem; padding: 0.4rem;
  font: 400 0.82rem/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--cream); text-shadow: 0 2px 0 #8f0f1e;
  background: radial-gradient(circle at 35% 30%, #ff9b9b 0 12%, var(--red) 13% 62%, #c4142a 63%);
  border: var(--line); border-radius: 50%;
  box-shadow: 0 0.35rem 0 #8f0f1e;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.panic:hover .panic__dome { transform: translateY(-2px); box-shadow: 0 0.5rem 0 #8f0f1e; }
.panic:active .panic__dome { transform: translateY(0.3rem); box-shadow: 0 0.05rem 0 #8f0f1e; }
.panic-count { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--yellow); text-shadow: 0 2px 0 var(--ink); }
/* The text shakes, the button stays put: shaking .hero__inner itself would make it the button's
   positioning box for the length of the shake, and the button jumped toward the middle. */
.hero.shake .hero__inner > :not(.panic-wrap) { animation: shake 0.55s ease; }

@media (min-width: 64rem) {
  .panic-wrap { position: absolute; right: clamp(1.5rem, 4vw, 3rem); bottom: 3rem; margin: 0; }
}

/* ---- dividers ---- */
.drips {
  width: 100%; height: auto; aspect-ratio: 1440 / 100; min-height: 3rem; max-width: none;
  margin-top: -1px; position: relative; z-index: 1;
}
.drips--night { color: var(--night-2); background: var(--cream); }
.drips--grape { color: var(--grape); background: var(--night-2); }
.drips--cream { color: var(--cream); background: var(--night-2); }

/* ---- sections ---- */
.section { position: relative; padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1rem, 4vw, 2rem); }
.section--cream { background: var(--cream); }
.section--grape { background: var(--grape); color: var(--cream); }
.section--night { background: var(--night-2); color: var(--cream); --pop-c: var(--grape); }
.section h2 { font-size: clamp(2.6rem, 7vw, 4.5rem); margin-bottom: 1rem; }
.section-head { margin-bottom: 2.5rem; max-width: 40rem; }
.section-head p:last-child { font-size: 1.25rem; margin: 0; }
.eyebrow { margin-bottom: 0.6rem; font: 400 1.05rem/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pink); }
.eyebrow--lime { color: var(--lime); }

/* ---- games ---- */
.game {
  display: grid; grid-template-columns: 1.1fr 1fr;
  background: var(--paper);
  border: var(--line); border-radius: 1.75rem; box-shadow: var(--pop-big);
  overflow: hidden;
}
.game__art { border-right: var(--line); background: #5fd4ff; }
.game__art svg { width: 100%; height: 100%; min-height: 18rem; }
.art-bubble { font: 400 26px var(--display); fill: var(--ink); }
.game__body { padding: clamp(1.5rem, 4vw, 2.75rem); }
.game h3 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 0.25rem 0 1rem; color: var(--pink); text-shadow: 0.05em 0.06em 0 var(--ink); }
.ticks { margin: 0 0 1.5rem; display: grid; gap: 0.55rem; }
.ticks li { position: relative; padding-left: 1.9rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.3em;
  width: 1.05rem; height: 1.2rem;
  background: var(--lime); border: 2px solid var(--ink);
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
}
.ticks li:nth-child(2)::before { background: var(--yellow); }
.ticks li:nth-child(3)::before { background: var(--cyan); }
.ticks li:nth-child(4)::before { background: var(--pink); }
.game__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0; }
.soon { font-weight: 700; font-size: 0.95rem; opacity: 0.7; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.75rem; margin-top: 2.5rem; }
.card {
  position: relative; padding: 1.75rem 1.75rem 1.25rem;
  background: var(--paper);
  border: var(--line); border-radius: 1.5rem; box-shadow: var(--pop);
  transition: transform 0.2s ease;
}
.card--tilt-l { transform: rotate(-1deg); }
.card--tilt-r { transform: rotate(1deg); }
.card:hover { transform: rotate(0) translateY(-4px); }
.card h3 { font-size: 2rem; margin: 0.75rem 0 0.6rem; }

/* ---- hazard tape ---- */
.tape {
  position: relative; z-index: 2;
  margin: -1.6rem -2rem; padding: 0.7rem 0;
  background: var(--yellow); border-block: var(--line);
  transform: rotate(-2deg);
  overflow: hidden;
  box-shadow: 0 0.4rem 0 var(--ink);
}
.tape__track { display: flex; align-items: center; gap: 1.5rem; width: max-content; animation: tape 40s linear infinite; }
.tape span { font: 400 clamp(1.2rem, 2.6vw, 1.6rem)/1 var(--display); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.tape i { width: 0.9rem; height: 0.9rem; flex: none; background: var(--pink); border: 2px solid var(--ink); border-radius: 50%; }
.tape i:nth-of-type(3n+2) { background: var(--cyan); }
.tape i:nth-of-type(3n) { background: var(--lime); }

/* ---- studio ---- */
.section--grape { padding-top: clamp(5rem, 10vw, 8rem); }
.studio { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.studio h2 { text-shadow: 0.05em 0.06em 0 var(--ink); }
.studio__text p:not(.eyebrow) { font-size: 1.2rem; }

.console {
  padding: 1.25rem 1.4rem 1rem;
  font: 600 0.95rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--lime); text-transform: uppercase;
  background: var(--ink) repeating-linear-gradient(transparent 0 3px, rgb(255 255 255 / 0.035) 3px 4px);
  border: var(--line); border-radius: 1.25rem; box-shadow: var(--pop-big);
  transform: rotate(1.5deg);
}
.console__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; color: var(--cream); letter-spacing: 0.1em; }
.lamp { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--red); box-shadow: 0 0 0.6rem var(--red); animation: blink 1s steps(2, jump-none) infinite; }
.console dl { margin: 0; }
/* each row: name, a dotted leader, value */
.console dl div { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.15rem 0; }
.console dl div::before { content: ""; order: 1; flex: 1; min-width: 1rem; border-bottom: 2px dotted rgb(184 245 59 / 0.35); }
.console dt { white-space: nowrap; }
.console dd { order: 2; margin: 0; text-align: right; color: var(--cream); }
.console .hot { color: var(--pink); }
.console__prompt { margin: 0.75rem 0 0; }
.cursor { display: inline-block; width: 0.6em; height: 1em; vertical-align: -0.15em; background: var(--lime); animation: blink 1.1s steps(2, jump-none) infinite; }

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; margin-top: clamp(3rem, 6vw, 4.5rem); }
.pillar {
  padding: 1.5rem;
  color: var(--ink); background: var(--cream);
  border: var(--line); border-radius: 1.5rem; box-shadow: var(--pop);
  transition: transform 0.15s ease;
}
.pillar:nth-child(odd) { transform: rotate(-1deg); }
.pillar:nth-child(even) { transform: rotate(1deg); }
.pillar:hover { transform: translateY(-4px); }
.pillar svg { width: 4.5rem; height: 4.5rem; margin-bottom: 0.9rem; }
.pillar:hover svg { animation: wobble 0.5s ease; }
.pillar h3 { font-size: 1.6rem; margin-bottom: 0.5rem; }
.pillar p { margin: 0; font-size: 1.02rem; }

/* ---- contact ---- */
.contact { text-align: center; max-width: 44rem; }
.contact__mark { width: 6rem; height: 6rem; margin: 0 auto 1.25rem; animation: bob 3s ease-in-out infinite; }
.contact h2 { color: var(--lime); text-shadow: 0.05em 0.06em 0 var(--grape); }
.contact > p { font-size: 1.2rem; }
.contact .btn { margin: 0.75rem 0 0.5rem; }
.contact__small { font-size: 1rem !important; opacity: 0.75; margin-top: 1rem; }

/* ---- footer ---- */
.footer { padding: 2rem clamp(1rem, 4vw, 2rem) 2.5rem; background: var(--night-2); color: var(--cream); font-size: 0.95rem; }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.5rem; border-top: 2px dashed rgb(255 243 220 / 0.2); }
.footer__brand { display: inline-flex; align-items: center; gap: 0.5rem; font: 400 1.2rem/1 var(--display); text-decoration: none; }
.footer__brand svg { width: 2rem; height: 2rem; }
.footer__nav { display: flex; gap: 1.25rem; }
.footer__nav a { text-decoration: none; font-weight: 700; }
.footer__nav a:hover { color: var(--lime); }
.footer p { margin: 0; opacity: 0.7; }

/* ---- links between pages ---- */
.nav a[aria-current], .footer__nav a[aria-current] { background: var(--yellow); }
.footer__nav a[aria-current] { background: none; color: var(--yellow); }
.game h3 a { color: inherit; text-decoration: none; }
.game h3 a:hover { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.12em; }
.more { margin: 2.5rem 0 0; text-align: center; }

/* ---- inner pages: a shorter hero with the goo ---- */
.hero--page { min-height: 0; padding: 8.5rem 1rem 4.5rem; }
/* room under the title for its drips, up to d1 (d4 is too long here). Drips read best off a flat
   stroke (an E's bar, an M's middle, the dot of a "!"); off a curve like an S they look like a cedilla. */
.hero--page .title { font-size: clamp(3.2rem, 10vw, 6.8rem); margin-bottom: 0.55em; }
.hero--page .lede { margin-top: 0.75rem; }
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 0 0 1.1rem; font-weight: 700; font-size: 0.95rem; text-shadow: 0 2px 0 var(--ink); }
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.6; }
.crumbs a { color: var(--cream); }
.crumbs [aria-current] { color: var(--yellow); }

/* ---- the games page: one tile per game ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 2rem; }
.tile {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper);
  border: var(--line); border-radius: 1.5rem; box-shadow: var(--pop);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tile--link:hover { transform: translate(-3px, -3px); box-shadow: 0.6rem 0.6rem 0 var(--ink); }
.tile__art { aspect-ratio: 16 / 10; border-bottom: var(--line); background: #5fd4ff; }
.tile__art svg { width: 100%; height: 100%; }
.tile__body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.5rem 1.5rem; }
.tile h3 { font-size: 2.2rem; margin: 0.2rem 0 0.6rem; }
.tile h3 a { color: var(--pink); text-decoration: none; text-shadow: 0.05em 0.06em 0 var(--ink); }
/* the whole tile is the link */
.tile h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* the game in the works: one wide tile, art on the left */
.tiles--wide { grid-template-columns: 1fr; }
@media (min-width: 52rem) {
  .tile--wide { display: grid; grid-template-columns: 1.15fr 1fr; }
  .tile--wide .tile__art { aspect-ratio: auto; min-height: 21rem; border-bottom: 0; border-right: var(--line); }
  .tile--wide .tile__body { padding: 2rem 2.25rem; }
  .tile--wide h3 { font-size: 3rem; }
}
.section-head--next { margin-top: clamp(3.5rem, 7vw, 5rem); }
.tile__more { margin: auto 0 0; padding-top: 0.75rem; font: 400 1.2rem/1 var(--display); color: var(--ink); }
.tile--link:hover .tile__more { color: var(--pink); }
.tile--mystery .tile__art { display: grid; place-items: center; background: repeating-linear-gradient(-45deg, var(--grape) 0 1.4rem, #6a2ff0 1.4rem 2.8rem); }
.tile--soup .tile__art { background: repeating-linear-gradient(-45deg, var(--orange) 0 1.4rem, #ff7a00 1.4rem 2.8rem); }
.tile--shh .tile__art { background: repeating-linear-gradient(-45deg, var(--night) 0 1.4rem, #321c5c 1.4rem 2.8rem); }


/* ---- how far along a game is: four segments, like a stamina bar ---- */
.stage { margin: 0.25rem 0 1rem; }
.stage__bar { display: flex; gap: 0.3rem; padding: 0.3rem; background: var(--ink); border-radius: 999px; }
.stage__bar li { flex: 1; height: 0.75rem; border-radius: 999px; background: rgb(255 243 220 / 0.18); }
.stage__bar .is-done { background: var(--lime); }
.stage__bar [aria-current] {
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 0.4rem, var(--orange) 0.4rem 0.8rem);
  background-size: 200% 100%; animation: crawl 1.2s linear infinite;
}
.stage__now { margin: 0.45rem 0 0; font-size: 0.92rem; font-weight: 700; }
.stage__now b { color: var(--pink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- locked games ---- */
.lock {
  position: relative; z-index: 2; display: grid; place-items: center;
  width: 7.5rem; height: 7.5rem; padding: 0;
  background: none; border: 0; cursor: pointer;
  animation: bob 3s ease-in-out infinite;
}
.lock svg { width: 100%; height: 100%; filter: drop-shadow(0.3rem 0.35rem 0 var(--ink)); }
.lock:hover svg { animation: wobble 0.5s ease; }
.lock.rattle svg { animation: rattle 0.45s ease; }
.stamp {
  position: absolute; z-index: 2; right: 0.9rem; top: 1rem;
  padding: 0.15rem 0.6rem;
  font: 400 1.35rem/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red); border: 0.2rem solid var(--red); border-radius: 0.4rem;
  background: rgb(255 250 240 / 0.9);
  transform: rotate(12deg);
  pointer-events: none;
}
.unlock { margin: 0.25rem 0 0; font-size: 0.98rem; }
.unlock b { font-family: var(--display); font-weight: 400; letter-spacing: 0.03em; color: var(--grape); }
.unlock a { color: var(--grape); font-weight: 700; }
/* a blacked out name, like a classified file. Select it to read what's under the bar. */
.redact {
  display: inline-block; padding: 0 0.12em;
  color: transparent; background: var(--ink);
  border-radius: 0.15em; transform: rotate(-1.5deg);
}
.redact::selection { color: var(--cream); background: var(--ink); }
/* a stage nobody will confirm: hatched segments, none lit */
.stage--unknown .stage__bar li { background: repeating-linear-gradient(-45deg, rgb(255 243 220 / 0.3) 0 0.25rem, transparent 0.25rem 0.5rem); }
/* how far you are toward an unlock, filled from the visitor's own meltdown count (main.js) */
.meter { height: 1.35rem; margin: 0.6rem 0 0; padding: 0.3rem; background: var(--ink); border-radius: 999px; }
.meter__fill {
  display: block; height: 100%; min-width: 0.75rem; width: calc(var(--p, 0) * 100%);
  background: repeating-linear-gradient(-45deg, var(--pink) 0 0.4rem, var(--red) 0.4rem 0.8rem);
  border-radius: 999px; transition: width 0.6s ease;
}
.meter__label { margin: 0.4rem 0 0; font-size: 0.92rem; font-weight: 700; }
.lock-hint { min-height: 1.5em; margin: 0.6rem 0 0; font-weight: 700; color: var(--red); }
/* the small padlock on the home page's teaser cards */
.lock--badge { position: absolute; right: 1rem; top: -2rem; width: 4.25rem; height: 4.25rem; }
.card--tilt-r .lock--badge { animation-delay: -1.5s; }

/* ---- a game's page ---- */
.intro { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
.art-panel { aspect-ratio: 16 / 11; background: #5fd4ff; border: var(--line); border-radius: 1.75rem; box-shadow: var(--pop-big); overflow: hidden; }
.art-panel svg { width: 100%; height: 100%; }
.facts { padding: 1.5rem 1.6rem; background: var(--paper); border: var(--line); border-radius: 1.5rem; box-shadow: var(--pop); transform: rotate(1deg); }
.facts h2 { font-size: 1.9rem; margin-bottom: 1rem; }
.facts dl { display: grid; gap: 0.85rem; margin: 0 0 1.25rem; }
.facts dt { font: 400 0.95rem/1.2 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pink); }
.facts dd { margin: 0; font-weight: 700; }
.facts .btn { width: 100%; }
.prose { max-width: 46rem; margin-top: clamp(3rem, 6vw, 4.5rem); }
.prose p { font-size: 1.2rem; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.feature {
  padding: 1.3rem 1.5rem 1.4rem;
  background: var(--paper);
  border: var(--line); border-top-width: 0.9rem; border-radius: 1.4rem; box-shadow: var(--pop);
}
.feature:nth-child(6n+1) { border-top-color: var(--pink); }
.feature:nth-child(6n+2) { border-top-color: var(--cyan); }
.feature:nth-child(6n+3) { border-top-color: var(--yellow); }
.feature:nth-child(6n+4) { border-top-color: var(--lime); }
.feature:nth-child(6n+5) { border-top-color: var(--orange); }
.feature:nth-child(6n+6) { border-top-color: var(--grape); }
.feature h3 { font-size: 1.55rem; margin-bottom: 0.5rem; }
.feature p { margin: 0; font-size: 1.02rem; }
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 2rem 1.25rem; margin-top: 2.75rem; }
.steps li {
  counter-increment: step; position: relative;
  padding: 2.4rem 1.25rem 1.25rem;
  color: var(--ink); background: var(--cream);
  border: var(--line); border-radius: 1.25rem; box-shadow: var(--pop);
}
.steps li::before {
  content: counter(step); position: absolute; top: -1.4rem; left: 1.1rem;
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem;
  font: 400 1.6rem/1 var(--display);
  background: var(--yellow); border: var(--line); border-radius: 50%;
}
.steps li:nth-child(2)::before { background: var(--cyan); }
.steps li:nth-child(3)::before { background: var(--pink); }
.steps li:nth-child(4)::before { background: var(--lime); }
.steps h3 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.steps p { margin: 0; font-size: 1rem; }
.small-print { margin-top: 2rem; font-size: 0.95rem; opacity: 0.75; }

/* ---- 404 ---- */
.lost { min-height: 100svh; }
.lost .title { font-size: clamp(5rem, 22vw, 12rem); }
.lost__mark { width: 8rem; height: 8rem; margin: 0 auto 1.5rem; animation: bob 3s ease-in-out infinite; }

/* ---- motion ---- */
@keyframes drip { from { transform: scaleY(0.7); } to { transform: scaleY(1); } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 60% { transform: rotate(7deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes blink { to { visibility: hidden; } }
@keyframes tape { to { transform: translateX(-50%); } }
@keyframes crawl { to { background-position: -1.13rem 0; } }
@keyframes rattle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-14deg) translateX(-3px); }
  40% { transform: rotate(11deg) translateX(3px); }
  60% { transform: rotate(-7deg); }
  80% { transform: rotate(4deg); }
}
/* translate and rotate, not transform, so the kicker keeps its own tilt while it shakes */
@keyframes shake {
  0%, 100% { translate: 0; rotate: 0deg; }
  15% { translate: -6px 2px; rotate: -1deg; }
  30% { translate: 5px -3px; rotate: 1deg; }
  45% { translate: -4px 3px; rotate: 0deg; }
  60% { translate: 3px -2px; rotate: 0.5deg; }
  80% { translate: -2px 1px; rotate: 0deg; }
}

/* ---- small screens ---- */
@media (max-width: 52rem) {
  .game { grid-template-columns: 1fr; }
  .intro { grid-template-columns: 1fr; }
  .facts { transform: none; }
  .game__art { border-right: 0; border-bottom: var(--line); }
  .studio { grid-template-columns: 1fr; }
}
@media (max-width: 34rem) {
  .brand__name { display: none; }
  .brand { padding: 0.25rem; }
  .nav { gap: 0.35rem; }
  .nav a { padding: 0.4rem 0.7rem; font-size: 0.92rem; }
  .btn { font-size: 1.1rem; }
  .console { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .melt .d::before, .melt .d::after { transform: none; }
}