/* =====================================================================
   GIGGLEGEAR KINDERGARTEN · website
   Kid-TV cheer on the surface, something wrong underneath.
   ===================================================================== */

:root {
  --night: #140a24;
  --night-2: #0b0615;
  --ink: #1b1030;
  --cream: #fff6df;
  --paper: #fbf3dc;
  --red: #e8413c;
  --red-dk: #a3201c;
  --yellow: #f5c542;
  --yellow-dk: #c9932a;
  --blue: #4f8dff;
  --green: #4fc25a;
  --purple: #8b5cf6;
  --lav: #c79bff;
  --text: #f4ecff;
  --muted: #bfb0d9;
  --radius: 18px;
  --wrap: 1180px;
  --shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --f-toy: "Luckiest Guy", "Comic Sans MS", system-ui, sans-serif;
  --f-horror: "Creepster", "Luckiest Guy", cursive;
  --f-hand: "Patrick Hand", "Comic Sans MS", cursive;
  --f-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "VT323", ui-monospace, Consolas, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font: 17px/1.6 var(--f-body);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--yellow); }
b, strong { font-weight: 800; }
kbd {
  font: 700 .85em var(--f-body);
  background: var(--cream); color: var(--ink);
  border-radius: 6px; padding: .05em .45em;
  box-shadow: 0 3px 0 #b9a98a;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--yellow); color: var(--ink); padding: 8px 14px; border-radius: 8px; }
.skip-link:focus { left: 8px; }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.section { padding: clamp(70px, 10vw, 130px) 0; position: relative; }
.tiny { font-size: .85em; color: var(--muted); }

/* ---------------------------------------------------------- headings */
.kicker {
  font: 400 1.25rem/1 var(--f-hand);
  color: var(--yellow);
  letter-spacing: .04em;
  margin: 0 0 .4rem;
  transform: rotate(-1.5deg);
  display: inline-block;
}
.h-toy {
  font: 400 clamp(2.4rem, 6vw, 4.3rem)/1 var(--f-toy);
  margin: 0 0 1rem;
  letter-spacing: .02em;
  color: var(--cream);
  text-shadow: 0 4px 0 var(--red), 0 8px 0 rgba(0,0,0,.35);
}
.h-horror {
  font: 400 clamp(2.6rem, 7.5vw, 5.6rem)/1.02 var(--f-horror);
  color: #ff3b3b;
  margin: 0 0 1rem;
  text-shadow: 0 0 22px rgba(255, 30, 30, .45), 0 4px 0 #2a0508;
  letter-spacing: .03em;
}
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.sec-sub { color: var(--muted); font-size: 1.1rem; margin: 0; }

.crayon { font-family: var(--f-hand); font-size: 1.2em; color: #ff8a7a; }

/* ---------------------------------------------------------- buttons */
.btn {
  --b: var(--yellow); --b-dk: var(--yellow-dk); --fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 400 1.15rem/1 var(--f-toy);
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--fg);
  background: var(--b);
  border: 0; border-radius: 16px;
  padding: .85em 1.4em .7em;
  box-shadow: 0 6px 0 var(--b-dk), 0 12px 24px rgba(0,0,0,.35);
  transition: transform .12s, box-shadow .12s, filter .2s;
  position: relative;
  user-select: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--b-dk), 0 16px 28px rgba(0,0,0,.4); filter: brightness(1.06); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--b-dk), 0 4px 10px rgba(0,0,0,.4); }
.btn-download { --b: var(--red); --b-dk: var(--red-dk); --fg: #fff; }
.btn-download b { color: var(--yellow); font-weight: 400; }
.btn-sm { font-size: .95rem; padding: .7em 1.1em .55em; border-radius: 12px; box-shadow: 0 4px 0 var(--b-dk); }
.btn-sm:hover { box-shadow: 0 5px 0 var(--b-dk); }
.btn-sm:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--b-dk); }
.btn-ghost { --b: rgba(255,255,255,.08); --b-dk: rgba(0,0,0,.4); --fg: var(--cream); backdrop-filter: blur(6px); outline: 2px solid rgba(255,255,255,.25); }
.btn-xl {
  flex-direction: column; gap: .15em;
  padding: .7em 2.1em .8em;
  border-radius: 26px;
  background: radial-gradient(120% 90% at 50% 10%, #ff6d63, var(--red) 55%, #c02620);
  box-shadow: 0 10px 0 var(--red-dk), 0 0 0 6px var(--yellow), 0 0 0 12px var(--ink), 0 26px 40px rgba(0,0,0,.5);
  animation: btn-bob 2.6s ease-in-out infinite;
}
.btn-xl:hover { box-shadow: 0 12px 0 var(--red-dk), 0 0 0 6px var(--yellow), 0 0 0 12px var(--ink), 0 30px 44px rgba(0,0,0,.55); }
.btn-xl:active { transform: translateY(8px); box-shadow: 0 2px 0 var(--red-dk), 0 0 0 6px var(--yellow), 0 0 0 12px var(--ink), 0 10px 20px rgba(0,0,0,.5); }
.btn-top { font-size: 1rem; opacity: .95; }
.btn-big { font-size: clamp(2.6rem, 6vw, 3.4rem); color: var(--yellow); text-shadow: 0 4px 0 var(--red-dk); line-height: .9; }
.btn-sub { font: 800 .72rem/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
@keyframes btn-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

/* ---------------------------------------------------------- PA ticker */
.pa {
  position: relative; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  width: 100%; border: 0; margin: 0;
  padding: 7px 14px;
  background: repeating-linear-gradient(90deg, #1e1236 0 28px, #22143d 28px 56px);
  color: var(--yellow);
  font: 400 1.25rem/1 var(--f-mono);
  letter-spacing: .06em;
  overflow: hidden;
  border-bottom: 2px solid #000;
  text-align: left;
}
.pa-icon { flex: none; font-size: 1rem; }
.pa-track { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.pa-text { display: inline-block; white-space: nowrap; animation: marquee 60s linear infinite; }
.pa:hover .pa-text { animation-play-state: paused; }
.pa.is-playing { color: #fff; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  padding: 10px clamp(12px, 3vw, 28px);
  background: rgba(20, 10, 36, .82);
  backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--red), #ff9f1c, var(--yellow), var(--green), var(--blue), var(--purple)) 1;
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cream); font: 400 1.35rem/1 var(--f-toy); letter-spacing: .05em; }
.nav-gear { transition: transform .8s cubic-bezier(.2,1.6,.4,1); }
.nav-brand:hover .nav-gear, .nav-brand.wind .nav-gear { transform: rotate(360deg); }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a {
  color: var(--text); text-decoration: none; font-weight: 800; font-size: .95rem;
  padding: 8px 12px; border-radius: 10px; transition: background .2s, color .2s;
}
.nav-links a:hover, .nav-links a.active { background: rgba(255,255,255,.08); color: var(--yellow); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.sound-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.15);
  border-radius: 999px; padding: 6px 12px; font-weight: 800; font-size: .85rem;
  transition: background .2s, border-color .2s;
}
.sound-toggle[aria-pressed="true"] { background: rgba(245,197,66,.16); border-color: var(--yellow); color: var(--yellow); }
.nav-burger { display: none; background: none; border: 0; padding: 8px; }
.nav-burger span { display: block; width: 24px; height: 3px; background: var(--cream); border-radius: 2px; margin: 4px 0; transition: .25s; }

/* ---------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: min(100svh, 980px);
  display: grid; align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-stage, .hero-scrim { position: absolute; inset: 0; z-index: -1; }
.hero-frame {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity .08s linear;
}
.hero-frame.is-on { opacity: 1; animation: hero-drift 18s ease-in-out infinite alternate; }
@keyframes hero-drift { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.1) translate(-1.2%, -1%); } }
.hero-blackout { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .05s; }
.hero.flicker .hero-blackout { opacity: .92; }
.hero-scrim {
  background:
    radial-gradient(90% 70% at 70% 40%, transparent 30%, rgba(8, 3, 16, .55) 75%),
    linear-gradient(90deg, rgba(10, 4, 20, .93) 0%, rgba(10, 4, 20, .75) 38%, rgba(10, 4, 20, .1) 70%),
    linear-gradient(0deg, var(--night) 0%, transparent 25%);
}
.hero-inner { width: min(var(--wrap), 100% - 32px); margin-inline: auto; padding: 60px 0 110px; max-width: var(--wrap); }
.hero-inner > * { max-width: 600px; }
.hero-logo { width: min(560px, 100%); height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); cursor: pointer; transform-origin: 50% 30%; }
.hero-logo.wobble { animation: wobble .7s; }
@keyframes wobble { 0%,100% { rotate: 0deg; } 20% { rotate: -4deg; } 40% { rotate: 3deg; } 60% { rotate: -2deg; } 80% { rotate: 1deg; } }
.hero-chapter {
  font: 400 clamp(1.3rem, 3vw, 1.9rem)/1.1 var(--f-toy); letter-spacing: .06em;
  color: var(--yellow); margin: .6rem 0 0;
  text-shadow: 0 3px 0 rgba(0,0,0,.6);
}
.hero-chapter span { color: var(--cream); }
.hero-tag { font-size: clamp(1.05rem, 2vw, 1.3rem); color: #eadff9; margin: 1.1rem 0 2rem; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.hero-tag b { color: #ffd36a; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 30px; }
.hero-chips { list-style: none; padding: 0; margin: 2.4rem 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-chips li {
  font-weight: 800; font-size: .88rem;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.14);
  padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(6px);
}
.hero-note {
  position: absolute; right: 22px; bottom: 22px; margin: 0;
  font: 400 1.05rem var(--f-hand); color: rgba(255,255,255,.4);
  transform: rotate(-2deg);
}
.hero-scroll {
  position: absolute; left: 50%; bottom: 18px; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--cream); text-decoration: none; font: 400 1rem var(--f-hand); opacity: .75;
}
.hero-scroll svg { animation: windup 2.4s ease-in-out infinite; }
@keyframes windup { 0%, 100% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } }

/* ---------------------------------------------------------- wainscot + textures */
.wainscot {
  height: 70px;
  background: url(../assets/tex/wainscot.webp) repeat-x center / auto 100%;
  box-shadow: inset 0 8px 0 var(--cream), inset 0 12px 0 rgba(0,0,0,.25), 0 -6px 18px rgba(0,0,0,.4);
  position: relative; z-index: 2;
}
.wainscot-thin { height: 26px; box-shadow: inset 0 4px 0 var(--cream); }

/* ---------------------------------------------------------- story */
.story {
  background:
    linear-gradient(180deg, rgba(20,10,36,.93), rgba(20,10,36,.97)),
    url(../assets/tex/wall_gears.webp) repeat 0 0 / 360px;
}
.story-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.story-text p { font-size: 1.08rem; color: #e4d9f5; }
.story-after { color: var(--muted) !important; font-style: italic; }

.voicemail {
  margin: 1.6rem 0;
  background: linear-gradient(160deg, #1f1537, #120b22);
  border: 2px solid #3b2a63;
  border-radius: 22px;
  padding: 18px 20px 16px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
}
.vm-head { display: flex; align-items: center; gap: 14px; }
.vm-dot { width: 12px; height: 12px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 12px #ff3b3b; animation: blink 1.2s steps(2) infinite; flex: none; }
@keyframes blink { 50% { opacity: .15; } }
.vm-title { font-weight: 900; font-size: 1.1rem; }
.vm-from { font-size: .9rem; color: var(--muted); }
.vm-play {
  margin-left: auto; width: 56px; height: 56px; border-radius: 50%; border: 0;
  background: var(--green); color: #083b10;
  box-shadow: 0 5px 0 #237a2e; display: grid; place-items: center; transition: transform .1s;
}
.vm-play:active { transform: translateY(4px); box-shadow: 0 1px 0 #237a2e; }
.vm-play .i-pause { display: none; }
.voicemail.playing .vm-play { background: #ff5a4a; color: #fff; box-shadow: 0 5px 0 var(--red-dk); }
.voicemail.playing .i-play { display: none; }
.voicemail.playing .i-pause { display: inline; }
.vm-wave { display: flex; align-items: center; gap: 3px; height: 44px; margin: 14px 0 8px; }
.vm-wave i { flex: 1; height: 16%; background: #4d3a78; border-radius: 3px; transition: height .08s, background .2s; }
.voicemail.playing .vm-wave i { background: #ffd36a; }
.vm-transcript { font: 400 1.25rem/1.35 var(--f-hand); color: #ffd36a; margin: 0; min-height: 3.4em; }
.vm-transcript .w { opacity: .18; transition: opacity .2s; }
.vm-transcript .w.on { opacity: 1; }

.story-board { position: relative; min-height: 600px; }
.pin {
  position: absolute; margin: 0; background: #fff; padding: 10px 10px 34px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  width: min(66%, 380px);
  transition: transform .35s cubic-bezier(.2,1.4,.4,1);
}
.pin::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 26px; translate: -50% 0;
  background: rgba(255, 240, 170, .75); rotate: -3deg; box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.pin figcaption { font: 400 1.15rem var(--f-hand); color: #3a3060; text-align: center; margin-top: 6px; }
.pin-a { top: 0; left: 2%; rotate: -5deg; }
.pin-b { top: 40%; right: 0; rotate: 4deg; }
.pin:hover { transform: scale(1.04); z-index: 3; }
.badge-card {
  position: absolute; left: 6%; bottom: 0; z-index: 2;
  background: none; border: 0; padding: 0; rotate: 9deg;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.6));
  transition: rotate .3s, scale .3s;
}
.badge-card img { width: 150px; height: auto; }
.badge-card span { display: block; font: 400 1rem var(--f-hand); color: var(--yellow); text-align: center; }
.badge-card:hover { rotate: 0deg; scale: 1.08; }
.badge-card.scanned img { animation: scan-ok .6s; }
@keyframes scan-ok { 30% { filter: drop-shadow(0 0 24px #7dff8a) brightness(1.3); } }

/* ---------------------------------------------------------- gang cards */
.gang {
  background:
    linear-gradient(180deg, rgba(20,10,36,.98) 0%, rgba(20,10,36,.7) 20%, rgba(20,10,36,.7) 80%, rgba(20,10,36,.98) 100%),
    url(../assets/tex/floor_checker.webp) repeat 0 0 / 260px;
}
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card {
  --c: #6fa8ff; --c2: #fff;
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 42%, color-mix(in srgb, var(--c) 55%, #000) 100%);
  border-radius: 24px;
  padding: 0 0 18px;
  color: #1b1030;
  box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--ink), var(--shadow);
  transform-style: preserve-3d;
  transition: transform .15s ease-out, box-shadow .3s;
  display: flex; flex-direction: column;
  margin-top: 60px;
}
.card::after {  /* holo shine */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.35), transparent 45%);
  opacity: 0; transition: opacity .3s;
}
.card:hover::after { opacity: 1; }
.card-art { height: 270px; margin-top: -70px; padding: 0 10px 6px; display: grid; place-items: end center; transform: translateZ(40px); }
.card-art img { max-height: 264px; max-width: 100%; width: auto; height: auto; filter: drop-shadow(0 16px 14px rgba(0,0,0,.45)); transition: transform .4s cubic-bezier(.2,1.6,.4,1); }
.card:hover .card-art img { transform: translateY(-10px) scale(1.05) rotate(-2deg); }
.card.scary .card-art img { animation: jitter .12s steps(2) infinite; }
@keyframes jitter { 0% { translate: -2px 1px; } 50% { translate: 2px -1px; } }
.card-body { padding: 10px 18px 0; display: flex; flex-direction: column; flex: 1; transform: translateZ(20px); }
.card-role { margin: 0; font: 900 .75rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.card h3 { font: 400 1.75rem/1.05 var(--f-toy); margin: .25rem 0 .5rem; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 1px #000; letter-spacing: .02em; }
.card-body > p { font-size: .93rem; line-height: 1.45; margin: 0 0 .7rem; color: #1b1030; font-weight: 600; }
.card-stats { margin: 0 0 .7rem; display: grid; gap: 6px; }
.card-stats div { background: rgba(255,255,255,.55); border-radius: 10px; padding: 6px 10px; }
.card-stats dt { font: 900 .68rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.card-stats dd { margin: 2px 0 0; font-size: .88rem; font-weight: 700; line-height: 1.3; }
.card blockquote {
  margin: auto 0 .8rem; padding: 8px 12px; border-radius: 12px;
  background: rgba(20, 10, 36, .85); color: #fff;
  font: 400 1.08rem/1.25 var(--f-hand);
}
.voice-btn {
  align-self: flex-start;
  background: #1b1030; color: #fff; border: 0; border-radius: 999px;
  padding: 8px 14px; font-weight: 800; font-size: .9rem;
  box-shadow: 0 4px 0 rgba(0,0,0,.35);
  transition: transform .1s, background .2s;
}
.voice-btn:hover { background: #2d1b50; }
.voice-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.voice-btn.is-playing { background: var(--red); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; }
.duo-item {
  display: flex; gap: 18px; align-items: center;
  background: rgba(20,10,36,.88); border: 2px solid #3b2a63; border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow);
}
.duo-item h3 { font: 400 1.4rem var(--f-toy); margin: 0 0 .2rem; color: var(--yellow); letter-spacing: .03em; }
.duo-item p { margin: 0; color: #ddd0f2; font-size: .98rem; }
.duo-emoji { font-size: 3.4rem; flex: none; width: 90px; text-align: center; }
.duo-zoomer { flex: none; width: 90px; background: none; border: 0; padding: 0; transition: transform .2s; }
.duo-zoomer:hover { transform: rotate(-6deg) scale(1.08); }
.duo-zoomer.honk { animation: honk .35s; }
@keyframes honk { 30% { transform: scale(1.25) rotate(4deg); } }

/* ---------------------------------------------------------- joke */
.joke { position: relative; overflow: hidden; padding: 70px 0 110px; background: #2f8f3a url(../assets/tex/carpet_road.webp) repeat 0 0 / 300px; }
.joke::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night) 0%, rgba(20,10,36,.35) 25%, rgba(20,10,36,.35) 75%, var(--night) 100%); }
.joke-road { position: absolute; left: 0; right: 0; bottom: 36px; height: 120px; background: url(../assets/tex/road.webp) repeat-x center / auto 100%; box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff; }
.joke-inner { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 26px; min-height: 330px; }
.joke-revvy { width: clamp(200px, 30vw, 340px); height: auto; filter: drop-shadow(0 18px 14px rgba(0,0,0,.5)); translate: var(--drive, 0) 0; position: relative; z-index: 2; margin-bottom: -10px; }
.joke-revvy.bounce { animation: revvy-bounce .25s 6; }
@keyframes revvy-bounce { 50% { transform: translateY(-14px) rotate(-3deg); } }
.joke-bubble {
  position: relative; align-self: start;
  background: #fff; color: var(--ink); border-radius: 28px; padding: 22px 26px;
  box-shadow: 0 0 0 5px var(--ink), 0 20px 40px rgba(0,0,0,.45);
  max-width: 640px;
}
.joke-bubble::after {
  content: ""; position: absolute; left: -26px; bottom: 28px; border: 16px solid transparent;
  border-right: 22px solid #fff; filter: drop-shadow(-5px 0 0 var(--ink));
}
.joke-who { margin: 0 0 4px; font: 900 .78rem var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.joke-line { font: 400 clamp(1.3rem, 2.6vw, 1.75rem)/1.2 var(--f-toy); margin: 0 0 16px; letter-spacing: .01em; }
.joke-line b { color: var(--red); font-weight: 400; }
.joke-line.punch { animation: punch .5s cubic-bezier(.2,1.8,.4,1); }
@keyframes punch { from { transform: scale(.85); opacity: 0; } }
.btn-joke { --b: var(--blue); --b-dk: #2e5bb5; --fg: #fff; }
.btn-joke:disabled { cursor: default; opacity: .8; transform: none; }

/* ---------------------------------------------------------- gallery */
.photos {
  background:
    linear-gradient(180deg, rgba(20,10,36,.97), rgba(20,10,36,.9) 50%, rgba(20,10,36,.97)),
    url(../assets/tex/wall_dots.webp) repeat 0 0 / 300px;
}
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: 26px 22px; }
.shot {
  grid-column: span 4;
  background: #fff; padding: 10px 10px 12px; border: 0; margin: 0;
  box-shadow: 0 14px 30px rgba(0,0,0,.5);
  rotate: var(--r, 0deg);
  transition: rotate .3s, transform .3s cubic-bezier(.2,1.4,.4,1), box-shadow .3s;
  text-align: left; position: relative;
}
.shot.wide { grid-column: span 6; }
.shot.hero-shot { grid-column: span 8; grid-row: span 2; }
.shot:hover, .shot:focus-visible { rotate: 0deg; transform: scale(1.03); z-index: 3; box-shadow: 0 24px 50px rgba(0,0,0,.6); }
.shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #111; }
.shot.hero-shot img { aspect-ratio: auto; height: calc(100% - 38px); }
.shot span { display: block; font: 400 1.15rem/1.2 var(--f-hand); color: #3a3060; margin-top: 8px; }
.shot::before {
  content: ""; position: absolute; top: -10px; left: 50%; width: 80px; height: 22px; translate: -50% 0; z-index: 1;
  background: rgba(255, 240, 170, .7); rotate: calc(var(--r, 0deg) * -2);
}

/* ---------------------------------------------------------- lightbox (CCTV) */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(3, 2, 8, .94);
  display: grid; place-items: center; align-content: center; gap: 12px;
  padding: 50px 64px;
}
.lightbox[hidden] { display: none; }
.lb-screen {
  position: relative; max-width: min(1400px, 100%);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 0 0 10px #22202a, 0 0 0 14px #0e0d12, 0 30px 80px rgba(0,0,0,.8);
  background: #000;
}
.lb-screen img { max-height: calc(100vh - 170px); width: auto; filter: saturate(.85) contrast(1.05); animation: lb-in .35s; }
@keyframes lb-in { from { filter: brightness(3) saturate(0); } }
.lb-cctv { position: absolute; inset: 0; pointer-events: none; font: 400 clamp(1.1rem, 2vw, 1.7rem)/1 var(--f-mono); color: #fff; text-shadow: 0 0 6px rgba(0,0,0,.9), 0 0 2px #000; }
.lb-rec { position: absolute; top: 14px; left: 18px; color: #ff4040; animation: blink 1s steps(2) infinite; }
.lb-cam { position: absolute; top: 14px; right: 18px; }
.lb-time { position: absolute; bottom: 14px; left: 18px; }
.lb-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply;
}
.lb-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 18%; background: linear-gradient(180deg, transparent, rgba(255,255,255,.06), transparent); animation: roll 5s linear infinite; }
@keyframes roll { from { top: -20%; } to { top: 100%; } }
.lb-cap { margin: 0; font: 400 1.35rem var(--f-hand); color: var(--cream); text-align: center; }
.lb-btn {
  position: fixed; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.2); color: #fff;
  width: 52px; height: 52px; border-radius: 50%; font-size: 1.8rem; line-height: 1; display: grid; place-items: center;
  transition: background .2s;
}
.lb-btn:hover { background: var(--red); border-color: var(--red); }
.lb-close { top: 16px; right: 16px; font-size: 1.3rem; }
.lb-prev { left: 12px; top: 50%; translate: 0 -50%; }
.lb-next { right: 12px; top: 50%; translate: 0 -50%; }

/* ---------------------------------------------------------- schedule / chalkboard */
.schedule { background: url(../assets/tex/floor_wood.webp) repeat 0 0 / 320px; }
.schedule::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night), rgba(20,10,36,.55) 18%, rgba(20,10,36,.55) 82%, var(--night)); }
.chalkboard {
  position: relative;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(135deg, #24473a, #1b3a2e 60%, #173127);
  border: 18px solid #8a5a2b;
  border-image: linear-gradient(135deg, #a8713a, #6d4420) 1;
  box-shadow: inset 0 0 60px rgba(0,0,0,.5), 0 30px 60px rgba(0,0,0,.55);
  padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 26%, 300px);
  color: #eef3ea;
  font-family: var(--f-hand);
}
.chalk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; border-bottom: 2px dashed rgba(255,255,255,.3); margin-bottom: 18px; }
.chalk-head h2 { font: 400 clamp(2rem, 5vw, 3.2rem)/1.1 var(--f-hand); margin: 0 0 8px; letter-spacing: .06em; text-shadow: 0 0 1px #fff; }
.chalk-date { font-size: 1.3rem; opacity: .75; letter-spacing: .2em; }
.chalk-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.chalk-list li { display: grid; grid-template-columns: 130px 1fr; gap: 16px; font-size: clamp(1.1rem, 2vw, 1.35rem); line-height: 1.3; }
.chalk-list .t { color: #ffe27a; }
.chalk-list b { font-weight: 400; color: #9fd8ff; }
.chalk-list u { text-decoration-color: #ff6d63; text-decoration-thickness: 2px; }
.chalk-list .scribble .w s { opacity: .6; text-decoration-color: #ff6d63; text-decoration-thickness: 3px; }
.chalk-list .scribble em { color: #ff8a7a; font-style: normal; display: inline-block; transform: rotate(-2deg); }
.chalk-rainbow {
  position: absolute; right: clamp(-30px, -2vw, 0px); top: 50%; translate: 0 -50%;
  width: clamp(160px, 22%, 260px); height: auto; rotate: 4deg;
  box-shadow: 0 16px 34px rgba(0,0,0,.55);
}

/* ---------------------------------------------------------- nap game */
.naptime { background: #141a4a url(../assets/tex/carpet_stars.webp) repeat 0 0 / 340px; }
.naptime::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night), rgba(12, 10, 40, .72) 15%, rgba(12, 10, 40, .72) 85%, var(--night)); }
.naptime .wrap { position: relative; }
.nap-game { max-width: 980px; margin: 0 auto; border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 5px #2a2366, var(--shadow); background: #0c0a24; }
.nap-view { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.nap-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .12s; }
.nap-img.is-on { opacity: 1; }
.nap-dim { position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, transparent, rgba(0,0,0,.55)); pointer-events: none; }
.nap-game.watching .nap-dim { background: radial-gradient(70% 70% at 50% 45%, transparent, rgba(80,0,20,.55)); }
.nap-status {
  position: absolute; top: 16px; left: 50%; translate: -50% 0;
  font: 400 clamp(1.1rem, 2.6vw, 1.7rem)/1 var(--f-toy); letter-spacing: .06em;
  padding: 10px 18px 8px; border-radius: 12px; background: rgba(0,0,0,.6); color: #fff; white-space: nowrap;
}
.nap-game.singing .nap-status { color: #8ef58a; }
.nap-game.turning .nap-status, .nap-game.watching .nap-status { color: #ff6d63; }
.nap-lyric { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font: 400 clamp(1rem, 2.2vw, 1.35rem) var(--f-hand); color: #d9c2ff; text-shadow: 0 2px 6px #000; padding: 0 20px; }
.nap-lyric .note { display: inline-block; animation: note 1s ease-in-out infinite; }
@keyframes note { 50% { transform: translateY(-5px) rotate(8deg); } }
.nap-caught {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(circle, rgba(160,0,30,.35), rgba(40,0,10,.9));
  opacity: 0;
}
.nap-caught span { font: 400 clamp(3rem, 12vw, 8rem)/1 var(--f-horror); color: #ff2e3e; text-shadow: 0 0 30px #ff0020; transform: scale(.6); }
.nap-game.caught .nap-caught { opacity: 1; animation: caught-flash .6s; }
.nap-game.caught .nap-caught span { transform: scale(1); transition: transform .3s cubic-bezier(.2,2,.4,1); }
.nap-game.caught .nap-view { animation: shake .4s; }
@keyframes caught-flash { 0% { background: #fff; } }
@keyframes shake { 20% { transform: translate(-8px, 4px); } 40% { transform: translate(7px, -5px); } 60% { transform: translate(-5px, 3px); } 80% { transform: translate(3px, -2px); } }
.nap-ui { padding: 18px 20px 20px; display: grid; gap: 14px; }
.nap-bar { position: relative; height: 34px; border-radius: 999px; background: #1f1a4d; box-shadow: inset 0 3px 8px rgba(0,0,0,.5); }
.nap-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #6d52d9, #c79bff); transition: width .1s linear; }
.nap-bed, .nap-door { position: absolute; top: 50%; translate: 0 -50%; font-size: 1.3rem; }
.nap-bed { left: 8px; } .nap-door { right: 8px; }
.nap-you { position: absolute; top: 50%; left: 34px; translate: -50% -55%; font-size: 1.6rem; transition: left .1s linear; filter: drop-shadow(0 2px 3px #000); }
.nap-controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.btn-nap { --b: var(--lav); --b-dk: #7c56c2; --fg: #1b1030; min-width: 220px; touch-action: none; -webkit-touch-callout: none; }
.btn-nap.holding { --b: #8ef58a; --b-dk: #3c9c38; transform: translateY(4px); box-shadow: 0 2px 0 var(--b-dk); }
.nap-tries { font-weight: 800; color: var(--muted); margin-left: auto; }

/* ---------------------------------------------------------- report card */
.report {
  background:
    linear-gradient(180deg, rgba(20,10,36,.97), rgba(20,10,36,.88) 50%, rgba(20,10,36,.97)),
    url(../assets/tex/wall_clouds.webp) repeat 0 0 / 320px;
}
.stats { list-style: none; padding: 0; margin: 0 auto 50px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; max-width: 1000px; }
.stats li {
  text-align: center; padding: 16px 8px 14px; border-radius: 16px;
  background: var(--c, var(--red)); color: #fff;
  box-shadow: 0 6px 0 rgba(0,0,0,.3), inset 0 -6px 0 rgba(0,0,0,.15);
  rotate: var(--r, 0deg);
}
.stats li:nth-child(1) { --c: var(--red); --r: -2deg; }
.stats li:nth-child(2) { --c: #ff9f1c; --r: 1.5deg; }
.stats li:nth-child(3) { --c: #e0a800; --r: -1deg; }
.stats li:nth-child(4) { --c: #33a83f; --r: 2deg; }
.stats li:nth-child(5) { --c: var(--blue); --r: -1.5deg; }
.stats li:nth-child(6) { --c: var(--purple); --r: 1deg; }
.stats b { display: block; font: 400 clamp(2rem, 4vw, 2.8rem)/1 var(--f-toy); text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.stats span { font-weight: 800; font-size: .82rem; line-height: 1.2; display: block; margin-top: 4px; }

.report-card {
  position: relative; max-width: 1000px; margin: 0 auto;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(80, 110, 200, .18) 31px 32px);
  color: #2a2140; border-radius: 6px;
  padding: clamp(22px, 4vw, 44px);
  box-shadow: var(--shadow);
  rotate: -.4deg;
}
.report-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 64px; width: 2px; background: rgba(230, 70, 70, .45); }
.rc-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; border-bottom: 3px double #2a2140; padding-bottom: 12px; margin-bottom: 8px; position: relative; }
.rc-school { margin: 0; font: 900 .8rem var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: #6b5d8e; }
.rc-head h3 { font: 400 clamp(1.8rem, 4vw, 2.5rem)/1 var(--f-toy); margin: 4px 0 0; color: var(--red); letter-spacing: .03em; }
.rc-name { font-weight: 700; font-size: .95rem; text-align: right; }
.rc-name span { font: 400 1.35rem var(--f-hand); color: #2350b8; }
.rc-table { width: 100%; border-collapse: collapse; position: relative; }
.rc-table th, .rc-table td { text-align: left; padding: 12px 10px; border-bottom: 1px dashed rgba(42,33,64,.25); vertical-align: top; }
.rc-table thead th { font: 900 .75rem var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: #6b5d8e; }
.rc-table tbody th { font-weight: 900; white-space: nowrap; font-size: 1rem; }
.rc-table td:last-child { font-size: .98rem; }
.grade {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 3px solid #d62e2e; color: #d62e2e; font: 400 1.5rem/1 var(--f-hand); rotate: -8deg;
}
.grade.bad { border-color: #d62e2e; background: rgba(214,46,46,.1); }
.rc-comment { margin: 18px 0 0; font-size: 1rem; position: relative; }
.rc-comment .crayon { color: #2350b8; font-size: 1.3rem; }
.rc-sign { font: 400 1.5rem var(--f-hand); color: #2350b8; white-space: nowrap; }
.rc-stamp { position: absolute; right: 18px; bottom: -34px; width: 110px; rotate: 12deg; opacity: .95; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); animation: spin 22s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------- controls */
.controls { background: var(--night-2); }
.blocks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 16px; }
.blocks li {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: #1e1336; border-radius: 16px; padding: 18px 12px 16px;
  font-weight: 800; text-align: center; color: #e4d9f5;
  box-shadow: inset 0 0 0 2px #33245a;
}
.keys { display: flex; gap: 6px; }
.blocks kbd {
  --k: var(--red);
  display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 10px;
  font: 400 1.35rem/1 var(--f-toy); color: #fff;
  background: var(--k); border-radius: 9px;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 5px 0 rgba(0,0,0,.35);
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.blocks kbd.wide { font-size: 1.05rem; }
.blocks li:nth-child(6n+1) kbd { --k: var(--red); }
.blocks li:nth-child(6n+2) kbd { --k: #ff9f1c; }
.blocks li:nth-child(6n+3) kbd { --k: #d9a300; }
.blocks li:nth-child(6n+4) kbd { --k: #33a83f; }
.blocks li:nth-child(6n+5) kbd { --k: var(--blue); }
.blocks li:nth-child(6n+6) kbd { --k: var(--purple); }
.blocks li:hover kbd { animation: block-hop .4s; }
.blocks kbd:nth-child(2) { animation-delay: .05s !important; }
.blocks kbd:nth-child(3) { animation-delay: .1s !important; }
.blocks kbd:nth-child(4) { animation-delay: .15s !important; }
@keyframes block-hop { 40% { transform: translateY(-8px) rotate(-6deg); } }

/* ---------------------------------------------------------- chapters */
.chapters { background: linear-gradient(180deg, var(--night-2), var(--night)); }
.cubbies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cubby {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, #2a1a4a, #1c1133);
  border: 3px solid #3d2a6b; border-radius: 22px; padding: 18px 18px 22px;
  box-shadow: var(--shadow);
}
.cubby-open { border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(245,197,66,.18), 0 0 50px rgba(245,197,66,.14), var(--shadow); }
.cubby-tag { margin: 0; font: 900 .78rem var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); }
.cubby img, .cubby-lock { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: #0a0612; }
.cubby h3 { font: 400 1.7rem/1 var(--f-toy); margin: 6px 0 0; letter-spacing: .03em; }
.cubby p { margin: 0; color: #d8cdee; font-size: .98rem; }
.cubby .btn { align-self: flex-start; margin-top: auto; }
.cubby-price { font: 400 1.3rem var(--f-hand); color: var(--muted) !important; margin-top: auto !important; }
.cubby-open .cubby-price { margin-top: 4px !important; }
.free-stamp {
  display: inline-block; font: 400 1.7rem/1 var(--f-toy); color: var(--green);
  border: 4px solid var(--green); border-radius: 10px; padding: 6px 12px 2px; rotate: -6deg; letter-spacing: .08em;
}
.cubby-lock { position: relative; overflow: hidden; display: grid; place-items: center; }
.cubby-lock img { position: absolute; inset: 0; height: 100%; filter: grayscale(1) brightness(.35) blur(2px); }
.cubby-lock .lock { position: relative; font-size: 2.6rem; filter: drop-shadow(0 4px 6px #000); }
.cubby-lock .qq { position: absolute; font: 400 4rem var(--f-horror); color: rgba(255,60,60,.25); }
.cubby-locked h3 { color: #cbbfe6; }

.elevator {
  margin-top: 50px; display: grid; grid-template-columns: 260px 1fr; gap: 34px; align-items: center;
  background: #1a1030; border-radius: 24px; padding: 26px; border: 3px solid #3d2a6b;
}
.elev-doors {
  position: relative; height: 300px; border-radius: 10px 10px 0 0; overflow: hidden;
  background: #050308; box-shadow: 0 0 0 10px #58504a, 0 0 0 14px #2c2723;
}
.elev-door {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2;
  background: linear-gradient(90deg, #8e8a86, #c9c5c0 40%, #8e8a86), url(../assets/tex/brick.webp);
  background-blend-mode: normal;
  transition: transform 1.4s cubic-bezier(.6,0,.3,1);
}
.elev-door.l { left: 0; border-right: 2px solid #3e3a37; }
.elev-door.r { right: 0; border-left: 2px solid #3e3a37; }
.elev-inside { position: absolute; inset: 0; display: grid; place-items: end center; background: radial-gradient(circle at 50% 30%, #3d1d10, #050308 70%); }
.elev-inside img { height: 94%; width: auto; filter: brightness(.7) sepia(.4); }
.elevator.bang .elev-doors { animation: shake .35s; }
.elevator.open .elev-door.l { transform: translateX(-100%); }
.elevator.open .elev-door.r { transform: translateX(100%); }
.elev-text h3 { font: 400 2rem/1 var(--f-toy); margin: 0 0 8px; color: var(--yellow); letter-spacing: .03em; }
.elev-text p { color: #d8cdee; margin: 0 0 18px; }
.btn-bang { --b: #c9c5c0; --b-dk: #6e6964; --fg: #1b1030; }
.elev-msg { min-height: 3em; font: 400 1.3rem/1.3 var(--f-hand); color: #ff9b8f !important; margin-top: 16px !important; }

/* ---------------------------------------------------------- faq + reqs */
.faq { background: var(--night); }
.faq-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: start; }
.faq-list { display: grid; gap: 12px; margin-top: 1.2rem; }
.faq-list details {
  background: #1e1336; border-radius: 16px; border: 2px solid #33245a;
  transition: border-color .2s;
}
.faq-list details[open] { border-color: var(--lav); }
.faq-list summary {
  list-style: none; cursor: pointer; padding: 16px 52px 16px 20px; position: relative;
  font-weight: 900; font-size: 1.08rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; translate: 0 -50%;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--red); color: #fff; font: 400 1.3rem/1 var(--f-toy); transition: rotate .25s;
}
.faq-list details[open] summary::after { rotate: 45deg; background: var(--lav); color: var(--ink); }
.faq-list details p { margin: 0; padding: 0 20px 18px; color: #d8cdee; }

.paper {
  position: relative; background: var(--paper); color: #2a2140;
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(80,110,200,.2) 31px 32px);
  padding: 30px 28px 30px 56px; border-radius: 4px; rotate: 1.5deg;
  box-shadow: var(--shadow);
}
.paper::before { content: ""; position: absolute; top: 0; bottom: 0; left: 38px; width: 2px; background: rgba(230,70,70,.5); }
.paper h3 { font: 400 2.1rem/1 var(--f-toy); margin: 0; color: var(--blue); letter-spacing: .03em; }
.paper-sub { font: 400 1.2rem var(--f-hand); margin: 4px 0 12px; color: #6b5d8e; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.checklist li { position: relative; padding-left: 30px; line-height: 1.4; }
.checklist li::before { content: "✔"; position: absolute; left: 0; top: -2px; font: 400 1.35rem var(--f-hand); color: #2f9a3b; }
.checklist li.strike { text-decoration: line-through; text-decoration-color: #d62e2e; text-decoration-thickness: 2px; opacity: .8; }
.checklist li.strike::before { content: "✘"; color: #d62e2e; }
.paper-hand { position: absolute; right: -26px; top: -34px; width: 96px; rotate: 22deg; opacity: .9; pointer-events: none; }

/* ---------------------------------------------------------- final */
.final {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(90px, 14vw, 170px) 0 clamp(200px, 26vw, 300px);
  background:
    radial-gradient(60% 60% at 50% 100%, rgba(255, 40, 40, .22), transparent 70%),
    linear-gradient(180deg, var(--night), #07030d);
}
.final-inner { position: relative; z-index: 2; }
.final-inner p { font-size: 1.2rem; color: var(--muted); margin: 0 0 2.2rem; }
.final-graffiti { position: absolute; top: 40px; left: 50%; translate: -50% 0; width: min(900px, 90%); opacity: .12; rotate: -3deg; pointer-events: none; }
.final-grinsley {
  position: absolute; left: 50%; bottom: 0; z-index: 1;
  width: clamp(200px, 28vw, 340px); height: auto;
  translate: -50% 70%;
  transition: translate 1.6s cubic-bezier(.3,.8,.3,1);
  filter: brightness(.55) drop-shadow(0 -10px 30px rgba(255,40,40,.25));
  pointer-events: none;
}
.final.peek .final-grinsley { translate: -50% 42%; }

/* ---------------------------------------------------------- footer */
.footer { background: #07030d; }
.foot-inner { text-align: center; padding: 40px 0 50px; color: var(--muted); }
.foot-logo { width: 220px; height: auto; margin: 0 auto 16px; opacity: .9; }
.foot-inner p { margin: 0 auto 8px; max-width: 640px; }
.foot-small { font-size: .85rem; opacity: .75; }
.foot-hint { font-family: var(--f-hand); font-size: 1rem; }
.foot-hint kbd { font-size: .8rem; margin: 0 1px; }

/* ---------------------------------------------------------- overlays */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 300;
  translate: -50% 150%; opacity: 0;
  display: flex; align-items: center; gap: 14px;
  background: #fff; color: var(--ink); border-radius: 18px;
  padding: 14px 20px; max-width: min(520px, calc(100% - 32px));
  box-shadow: 0 0 0 4px var(--ink), 0 20px 50px rgba(0,0,0,.6);
  font-weight: 700; line-height: 1.35;
  transition: translate .45s cubic-bezier(.2,1.5,.4,1), opacity .3s;
}
.toast.show { translate: -50% 0; opacity: 1; }
.toast img { width: 64px; height: auto; flex: none; }
.toast b { font: 400 1.2rem var(--f-toy); color: var(--red); display: block; letter-spacing: .03em; }

.subtitle {
  position: fixed; left: 50%; bottom: 100px; z-index: 280; translate: -50% 0;
  max-width: min(760px, calc(100% - 32px)); text-align: center;
  background: rgba(8, 4, 16, .86); border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  padding: 10px 16px; font-weight: 600; font-size: 1.02rem;
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.subtitle.show { opacity: 1; }
.subtitle b { color: var(--sc, #fff); }

.scare { position: fixed; inset: 0; z-index: 500; display: none; place-items: center; background: #000; pointer-events: none; }
.scare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.4) saturate(1.3) brightness(.9); animation: scare-zoom .9s cubic-bezier(.1,.9,.2,1) forwards; }
.scare span { position: relative; font: 400 clamp(2.5rem, 9vw, 7rem)/1 var(--f-horror); color: #ff2436; text-shadow: 0 0 30px #000, 0 0 60px #f00; text-align: center; }
.scare.show { display: grid; animation: shake .25s 3; }
@keyframes scare-zoom { from { transform: scale(1); } to { transform: scale(1.5); } }

.fx-grain {
  position: fixed; inset: -50%; z-index: 400; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } }

/* glitch text */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; opacity: .8; }
.glitch::before { color: #ff3b6b; animation: glitch-a 3s infinite steps(1); }
.glitch::after { color: #3bd6ff; animation: glitch-b 3s infinite steps(1); }
@keyframes glitch-a { 0%, 90%, 100% { transform: none; clip-path: inset(0 0 100% 0); } 92% { transform: translate(-2px, 1px); clip-path: inset(20% 0 50% 0); } 95% { transform: translate(2px, -1px); clip-path: inset(60% 0 10% 0); } }
@keyframes glitch-b { 0%, 88%, 100% { transform: none; clip-path: inset(0 0 100% 0); } 90% { transform: translate(2px, 0); clip-path: inset(10% 0 70% 0); } 96% { transform: translate(-2px, 1px); clip-path: inset(50% 0 20% 0); } }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.card.reveal.in { transition: opacity .7s ease, transform .15s ease-out; }
.cards .card:nth-child(2) { transition-delay: .08s; }
.cards .card:nth-child(3) { transition-delay: .16s; }
.cards .card:nth-child(4) { transition-delay: .24s; }
.cards .card.in { transition-delay: 0s; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 70px 26px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .nav-links a { padding: 8px 8px; font-size: .9rem; }
}
@media (max-width: 920px) {
  .nav-links {
    position: fixed; top: var(--nav-h, 64px); left: 0; right: 0; flex-direction: column; gap: 0;
    background: rgba(14, 7, 26, .97); padding: 8px 16px 16px; border-bottom: 3px solid var(--red);
    transform: translateY(-120%); transition: transform .3s; z-index: -1; visibility: hidden;
  }
  .nav-links a { padding: 14px 10px; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.06); }
  .nav.open .nav-links { transform: none; visibility: visible; }
  .nav-burger { display: block; }
  .nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-right { margin-left: auto; }
  .story-grid, .faq-grid { grid-template-columns: 1fr; }
  .story-board { min-height: 540px; max-width: 560px; width: 100%; margin: 0 auto; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .shot, .shot.wide { grid-column: span 1; }
  .shot.hero-shot { grid-column: span 2; grid-row: auto; }
  .shot.hero-shot img { aspect-ratio: 16 / 9; height: auto; }
  .cubbies { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .elevator { grid-template-columns: 1fr; text-align: center; }
  .elev-doors { width: 220px; height: 260px; margin: 0 auto; }
  .chalkboard { padding-right: clamp(20px, 4vw, 56px); padding-bottom: 260px; }
  .chalk-rainbow { top: auto; bottom: 20px; right: 50%; translate: 50% 0; width: 170px; }
  .duo { grid-template-columns: 1fr; }
  .joke-inner { grid-template-columns: 1fr; justify-items: center; }
  .joke-revvy { order: 2; }
  .joke-bubble::after { left: 50%; bottom: -30px; translate: -50% 0; border: 16px solid transparent; border-top: 22px solid #fff; filter: drop-shadow(0 5px 0 var(--ink)); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .sound-toggle .st-label { display: none; }
  .nav-right .btn-sm { display: none; }
  .nav-brand span { font-size: 1.15rem; }
  .hero-inner { padding: 40px 0 120px; }
  .hero-scrim { background: linear-gradient(180deg, rgba(10,4,20,.55), rgba(10,4,20,.82) 50%, var(--night)); }
  .hero-note { display: none; }
  .hero-cta { gap: 26px; }
  .cards { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: 1fr; gap: 22px; }
  .shot.hero-shot { grid-column: span 1; }
  .rc-table thead { display: none; }
  .rc-table tr { display: grid; grid-template-columns: 1fr auto; padding: 10px 0; border-bottom: 1px dashed rgba(42,33,64,.25); }
  .rc-table th, .rc-table td { border: 0; padding: 4px 6px; }
  .rc-table td:last-child { grid-column: 1 / -1; }
  .report-card::before { left: 14px; }
  .chalk-list li { grid-template-columns: 1fr; gap: 0; }
  .story-board { min-height: 440px; }
  .badge-card img { width: 110px; }
  .lightbox { padding: 60px 8px 80px; }
  .lb-prev, .lb-next { top: auto; bottom: 16px; translate: none; }
  .nap-tries { margin-left: 0; }
  .btn-nap { flex: 1; min-width: 0; }
  .blocks { grid-template-columns: repeat(2, 1fr); }
  .paper { padding-left: 46px; }
  .paper::before { left: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .fx-grain { display: none; }
}