/* bbbbbbb end credits — same South Park construction-paper theme as the live site. */
@font-face { font-family: 'South Park'; src: url('fonts/SouthPark.ttf') format('truetype'); font-display: swap; }

:root {
  --red: #E4141B; --blue: #1F5FBF; --yellow: #FFD400; --green: #29A329;
  --ink: #111111; --paper: #FFFDF5; --panel: #FFFFFF; --muted: #4a4a4a;
  --ground: var(--paper);
  --radius: 10px; --shadow: 5px 5px 0 var(--ink); --shadow-sm: 3px 3px 0 var(--ink);
  --display: 'South Park', 'Impact', 'Arial Black', sans-serif;
  --body: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  --text: #111111; --paper-text: #111111; --paper-muted: #4a4a4a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ground: #1a1a1a; --panel: #262626; --ink: #0a0a0a; --muted: #cfcfcf;
    --text: #f3f1ea; color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --ground: #1a1a1a; --panel: #262626; --ink: #0a0a0a; --muted: #cfcfcf;
  --text: #f3f1ea; color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--ground); color: var(--text); font: 16px/1.5 var(--body); -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(rgba(0,0,0,.045) 1px, transparent 1px); background-size: 14px 14px; overflow-x: clip; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: .02em; line-height: 1.05; margin: 0; }
img { max-width: 100%; }
.muted { color: var(--muted); }

.card { background: var(--panel); border: 3px solid var(--ink); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.chip { display: inline-block; padding: .05rem .6rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--blue); color: #fff;
  font-family: var(--display); font-size: .95rem; letter-spacing: .04em; line-height: 1.35; box-shadow: 2px 2px 0 var(--ink); }
.btn { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; background: var(--blue); color: #fff;
  border: 3px solid var(--ink); padding: .55rem 1.1rem .5rem; border-radius: var(--radius); font-family: var(--display); font-size: 1.15rem;
  letter-spacing: .03em; box-shadow: var(--shadow-sm); transition: transform .06s, box-shadow .06s; text-shadow: 1px 1px 0 rgba(0,0,0,.35); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn.yellow { background: var(--yellow); color: var(--ink); text-shadow: none; }

/* ---- flap heads (straight from the app) ---- */
.flap { position: relative; display: inline-block; }
.flap img { position: absolute; inset: 0; width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.flap .jaw { transform-origin: var(--px) var(--py); }
.flap.talking .jaw { animation: flap 180ms ease-in-out infinite alternate; will-change: transform; }
@keyframes flap { from { transform: rotate(0deg); } to { transform: rotate(var(--open, 32deg)); } }
.flap.idle { animation: bob 3.4s ease-in-out infinite; animation-delay: var(--bobDelay, 0s); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--bobAmp, -2px)); } }
@media (prefers-reduced-motion: reduce) { .flap.idle, .flap.talking .jaw { animation: none; } }
.poop-head { border-radius: 50%; background: var(--yellow); border: 3px solid var(--ink); box-shadow: var(--shadow-sm);
  display: grid; place-items: center; line-height: 1; }

/* ---- seven-B logo ---- */
.logo { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .12em; background: none; border: none; padding: 0; font-size: var(--logo-size, 2.2rem); line-height: 1; }
.logo .b { display: grid; justify-items: center; grid-template-rows: 1em auto; transform: rotate(var(--tilt)); transform-origin: 50% 70%; }
.logo .b .glyph { font-family: var(--display); font-size: 1em; color: var(--c); line-height: 1;
  -webkit-text-stroke: .045em var(--ink); paint-order: stroke fill;
  text-shadow: .05em .05em 0 var(--ink), .09em .09em 0 rgba(0,0,0,.25); }
.logo .b .tail { font-family: var(--body); font-weight: 800; font-size: .26em; letter-spacing: .06em; text-transform: uppercase; color: var(--text); margin-top: .12em; white-space: nowrap; }
.logo.hero { --logo-size: clamp(2.2rem, 9vw, 4.6rem); }

/* ---- credits layout ---- */
.credits { display: grid; justify-items: center; gap: 0; padding: 0 1rem; }
.block { width: 100%; max-width: 640px; display: grid; justify-items: center; gap: 1.1rem; text-align: center; padding: 18vh 0; }
.block.tall { padding: 30vh 0; }
.kicker { font-family: var(--display); font-size: 1.15rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.headline { font-size: clamp(2.4rem, 9vw, 4.2rem); }
.headline .hl-red { color: var(--red); } .headline .hl-blue { color: var(--blue); }
.headline .hl-yellow { color: var(--yellow); } .headline .hl-green { color: var(--green); }
.headline .tinted { -webkit-text-stroke: .022em var(--ink); paint-order: stroke fill; text-shadow: .04em .04em 0 var(--ink); }
.sub { font-size: 1.2rem; margin: 0; }
.hint { font-size: .9rem; }

/* cast */
.cast { display: grid; gap: 3.2rem; justify-items: center; }
.cast-row { display: grid; justify-items: center; gap: .5rem; }
.cast-as { font-family: var(--display); font-size: clamp(1.6rem, 6vw, 2.3rem); line-height: 1.1; }
.cast-as .as { font-family: var(--body); font-weight: 400; font-style: italic; font-size: .55em; color: var(--muted); padding: 0 .35em; }
.cast-role { margin: 0; color: var(--muted); font-size: .95rem; }

/* schedule */
.sched { width: 100%; display: grid; gap: .7rem; text-align: left; }
.sched-row { display: grid; grid-template-columns: 5.2rem 1fr; gap: .8rem; align-items: baseline;
  border-top: 2px solid var(--ink); padding-top: .6rem; }
.sched-row:first-child { border-top: 0; padding-top: 0; }
.sched-time { font-family: var(--display); font-size: 1.25rem; color: var(--red); white-space: nowrap; }
.sched-what { display: grid; gap: .15rem; }
.sched-title { font-family: var(--display); font-size: 1.25rem; }
.sched-who { font-size: .9rem; color: var(--muted); }

/* acts: clue + guesses */
.act { gap: 1.4rem; }
.act-n { font-family: var(--display); font-size: 1.1rem; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }
.clue { width: 100%; background: var(--yellow); color: #111; border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1rem 1.2rem; transform: rotate(-1deg); }
.clue .k { font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; display: block; margin-bottom: .2rem; }
.clue p { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.35; }
.guesses { width: 100%; display: grid; gap: .9rem; }
.guess { display: grid; grid-template-columns: 64px 1fr; gap: .7rem; align-items: end; text-align: left; }
.guess .bubble { position: relative; background: var(--panel); border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: .55rem .8rem .6rem; }
.guess .bubble::before { content: ''; position: absolute; left: -12px; bottom: 12px; width: 14px; height: 14px;
  background: var(--panel); border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg) skew(8deg, 8deg); }
.guess .qt { margin: 0; font-size: 1.05rem; font-weight: 700; }
.guess .qt .resolved { font-weight: 400; color: var(--muted); font-size: .85rem; }
.guess .when { font-size: .78rem; color: var(--muted); margin: .1rem 0 0; }
.verdict { justify-self: start; margin-left: calc(64px + .7rem); border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); font-family: var(--display); letter-spacing: .03em; font-size: 1rem; padding: .3rem .7rem .25rem; }
.verdict.correct { background: var(--green); color: #fff; }
.verdict.warmer { background: var(--red); color: #fff; }
.verdict.colder { background: var(--blue); color: #fff; }
.verdict.first, .verdict.same, .verdict.unknown { background: var(--yellow); color: #111; }
.arrive { width: 100%; background: var(--green); color: #111; border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow); font-family: var(--display); font-size: 1.3rem; padding: .7rem 1rem; }

/* map */
.map-block { max-width: 760px; }
.journey { position: relative; width: 100%; border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
  background: #dfe9d3; overflow: hidden; }
.journey svg { display: block; width: 100%; height: auto; }
.journey .heads { position: absolute; inset: 0; pointer-events: none; }
.journey .jh { position: absolute; transform: translate(-50%, -85%); transition: none; }
.journey .jh .nm { text-align: center; font-family: var(--display); font-size: .72rem; line-height: 1; margin-top: 1px; color: #111;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 2px 0 #fff; white-space: nowrap; }
.map-caption { width: 100%; background: var(--yellow); color: #111; border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); font-family: var(--display); font-size: 1.15rem; padding: .55rem .9rem .5rem; min-height: 2.6rem; }
.stop-pin-svg { font-family: var(--display); }
.confetti { position: absolute; width: 9px; height: 13px; border: 2px solid var(--ink); pointer-events: none; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; width: 100%; }
.stat { display: grid; gap: .1rem; padding: .9rem .5rem; }
.stat .n { font-family: var(--display); font-size: 2.2rem; color: var(--red); }
.stat:nth-child(2) .n { color: var(--blue); } .stat:nth-child(3) .n { color: var(--green); } .stat:nth-child(4) .n { color: var(--red); }
.stat .l { font-size: .85rem; color: var(--muted); }

/* finale */
.finale-heads { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1rem; align-items: flex-end; max-width: 560px; }
.the-end { font-size: clamp(3rem, 14vw, 6rem); }
.fin { font-family: var(--display); font-size: 1.3rem; color: var(--muted); }

.scroll-toggle { position: fixed; right: .9rem; bottom: .9rem; z-index: 50; font-size: 1.3rem; padding: .35rem .7rem .3rem; }
@media (prefers-reduced-motion: reduce) { .scroll-toggle { display: none; } }