:root {
  --ink: #271d19;
  --paper: #fff6dd;
  --cream: #fff9ec;
  --red: #e83b2e;
  --gold: #ffc83d;
  --orange: #f77c25;
  --teal: #00a8a8;
  --green: #79bb43;
  --blue: #294fbe;
  --pink: #ff5fb7;
  --sky: #52d8ff;
  --shadow: 0 14px 0 rgba(39, 29, 25, .16), 0 22px 38px rgba(39, 29, 25, .18);
  --spot-x: 50%;
  --spot-y: 46%;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: 90;
  background:
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255, 255, 230, .22), transparent 32%),
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(255, 121, 36, .08) 100%);
  mix-blend-mode: soft-light;
}

body::after {
  z-index: 91;
  opacity: .14;
  background:
    radial-gradient(circle at 12px 12px, rgba(39, 29, 25, .22) 0 2px, transparent 2px) 0 0 / 24px 24px,
    radial-gradient(circle at 10px 10px, rgba(255, 255, 255, .55) 0 1px, transparent 1px) 0 0 / 18px 18px;
  mix-blend-mode: multiply;
}

button, a { font: inherit; }

.deck {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  perspective: 1200px;
}

.slide {
  position: absolute;
  inset: 0;
  display: none;
  padding: clamp(20px, 4vw, 56px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 200, 61, .72), transparent 25%),
    radial-gradient(circle at 88% 12%, rgba(82, 216, 255, .42), transparent 28%),
    radial-gradient(circle at 74% 86%, rgba(255, 95, 183, .28), transparent 34%),
    linear-gradient(100deg, rgba(0, 168, 168, .14) 0 18%, transparent 18% 78%, rgba(232, 59, 46, .12) 78%),
    linear-gradient(135deg, #fff9ec 0%, #ffefa9 46%, #ffc83d 100%);
}

.slide.active {
  display: grid;
  animation: slideIn .62s cubic-bezier(.2, 1.25, .3, 1) both;
}

.slide > * {
  position: relative;
  z-index: 2;
}

.slide::before,
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.slide::before {
  z-index: 0;
  opacity: .62;
  background:
    radial-gradient(ellipse 64px 38px at 10% 16%, rgba(220, 139, 24, .82) 0 55%, transparent 57%),
    radial-gradient(ellipse 74px 42px at 92% 20%, rgba(245, 188, 62, .82) 0 54%, transparent 56%),
    radial-gradient(ellipse 54px 30px at 18% 76%, rgba(228, 155, 36, .76) 0 55%, transparent 57%),
    radial-gradient(ellipse 82px 46px at 84% 82%, rgba(255, 227, 111, .84) 0 54%, transparent 56%),
    radial-gradient(ellipse 58px 34px at 48% 18%, rgba(229, 153, 34, .42) 0 54%, transparent 56%),
    radial-gradient(ellipse 46px 28px at 57% 88%, rgba(255, 214, 78, .46) 0 54%, transparent 56%),
    repeating-linear-gradient(22deg, rgba(133, 74, 16, .14) 0 3px, transparent 3px 10px);
  filter: drop-shadow(0 10px 10px rgba(39, 29, 25, .12));
  animation: snackDrift 18s ease-in-out infinite alternate;
}

.slide::after {
  z-index: 1;
  opacity: .5;
  background:
    radial-gradient(circle at 8% 16%, rgba(255, 95, 183, .24) 0 0, transparent 24%),
    radial-gradient(circle at 92% 12%, rgba(82, 216, 255, .3) 0 0, transparent 24%),
    radial-gradient(circle at 18% 26%, rgba(39, 29, 25, .12) 0 3px, transparent 4px),
    radial-gradient(circle at 38% 74%, rgba(39, 29, 25, .1) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 32%, rgba(39, 29, 25, .1) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 68%, rgba(39, 29, 25, .12) 0 3px, transparent 4px),
    radial-gradient(circle at 12% 92%, rgba(0, 168, 168, .18), transparent 24%),
    radial-gradient(circle at 96% 76%, rgba(232, 59, 46, .14), transparent 22%),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(39, 29, 25, .025) 34px 36px);
  mix-blend-mode: multiply;
  animation: atmosphereDrift 22s ease-in-out infinite alternate;
}

.slide:not(.slide-open) .copy.centered::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -36px;
  width: 92px;
  height: 54px;
  border-radius: 56% 44% 62% 38% / 44% 58% 42% 56%;
  border: 2px solid rgba(119, 76, 12, .4);
  background:
    repeating-linear-gradient(16deg, rgba(138, 82, 13, .22) 0 3px, rgba(255, 236, 125, .16) 3px 10px),
    linear-gradient(135deg, #ffe36f, #e49b24 54%, #f5bd43);
  box-shadow: 0 15px 20px rgba(39, 29, 25, .14);
  transform: rotate(18deg);
  opacity: .72;
  z-index: -1;
  animation: bobChip 2.6s ease-in-out infinite alternate;
}

.slide:not(.slide-open) .copy.centered::before {
  content: "";
  position: absolute;
  left: -52px;
  bottom: -28px;
  width: 58px;
  height: 34px;
  border-radius: 60% 40% 48% 52%;
  background:
    repeating-linear-gradient(-12deg, rgba(138, 82, 13, .18) 0 2px, transparent 2px 8px),
    #f5bd43;
  transform: rotate(-14deg);
  opacity: .62;
  z-index: -1;
  animation: bobChip 2.2s ease-in-out infinite alternate-reverse;
}

.slide:not(.slide-open) .copy.centered h2::after {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: clamp(34px, 4vw, 52px);
  aspect-ratio: 1;
  margin-left: 10px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--red);
  color: #fff6dd;
  font-size: .72em;
  line-height: 1;
  transform: rotate(9deg) translateY(-.08em);
  box-shadow: 5px 5px 0 rgba(39, 29, 25, .18);
}

.slide-open::before,
.slide-open::after {
  display: none;
}

.slide-hook::after,
.slide-package::after,
.slide-written::after,
.slide-bible::after,
.slide-episodes::after,
.slide-source::after {
  background:
    linear-gradient(90deg, rgba(0, 168, 168, .2) 0 10px, transparent 10px 28px),
    radial-gradient(circle at 93% 14%, rgba(232, 59, 46, .16), transparent 28%),
    radial-gradient(circle at 10% 88%, rgba(121, 187, 67, .16), transparent 24%);
  transform: rotate(-2deg) scale(1.08);
}

.slide-world::after {
  opacity: .18;
  background:
    url("assets/friendchips_diner.png") right 7% bottom 5% / min(58vw, 680px) auto no-repeat,
    radial-gradient(circle at 8% 80%, rgba(0, 168, 168, .25), transparent 28%);
}

.slide-characters::after,
.slide-bible::before {
  opacity: .18;
  background:
    url("assets/collage.png") left -80px center / min(42vw, 520px) auto no-repeat,
    url("assets/friendchips_real_bag.png") right -110px bottom -110px / min(34vw, 360px) auto no-repeat;
}

.slide-conflict::before {
  opacity: .2;
  background:
    radial-gradient(circle at 25% 50%, rgba(255, 200, 61, .74), transparent 30%),
    radial-gradient(circle at 75% 50%, rgba(0, 168, 168, .45), transparent 28%),
    repeating-conic-gradient(from 8deg, rgba(232, 59, 46, .2) 0 7deg, transparent 7deg 17deg);
}

.slide-engine::after,
.slide-episodes::before {
  opacity: .2;
  background:
    url("assets/comic.png") right -80px bottom -190px / min(36vw, 380px) auto no-repeat,
    radial-gradient(circle at 18% 16%, rgba(255, 200, 61, .32), transparent 24%);
}

.slide-proof::after,
.slide-art::after {
  opacity: .16;
  background:
    url("assets/collage.png") right -40px center / min(38vw, 500px) auto no-repeat,
    url("assets/friendchips_real_bag.png") left -90px bottom -150px / min(30vw, 340px) auto no-repeat;
}

.slide-video::after {
  opacity: .18;
  background:
    url("assets/friendchips_intro_poster.jpg") center / cover no-repeat;
  filter: blur(10px) saturate(1.2);
  transform: scale(1.08);
}

.slide-close::after {
  opacity: .2;
  background:
    url("assets/friendchips_diner.png") center / cover no-repeat;
  filter: saturate(1.2);
}

@keyframes slideIn {
  0% { opacity: 0; transform: translateY(28px) scale(.96) rotate(-.6deg); filter: saturate(1.3) contrast(1.05); }
  68% { opacity: 1; transform: translateY(-7px) scale(1.014) rotate(.25deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: none; }
}

@keyframes snackDrift {
  from { transform: translate3d(-10px, -6px, 0) scale(1.02); }
  to { transform: translate3d(14px, 8px, 0) scale(1.06); }
}

@keyframes atmosphereDrift {
  from { transform: translate3d(0, 0, 0) rotate(-1deg) scale(1.04); }
  to { transform: translate3d(-18px, 10px, 0) rotate(1deg) scale(1.08); }
}

@keyframes bobChip {
  from { translate: 0 0; rotate: -3deg; scale: 1; }
  to { translate: 0 -12px; rotate: 6deg; scale: 1.04; }
}

.slide.active .copy,
.slide.active .bible-panel,
.slide.active .profile-detail,
.slide.active .engine-card,
.slide.active .location-card {
  animation: heroReveal .76s cubic-bezier(.18, 1.32, .34, 1) both;
}

.slide.active .art-panel,
.slide.active .collage-wrap,
.slide.active video,
.slide.active .source-pages img {
  animation: posterReveal .82s cubic-bezier(.18, 1.25, .34, 1) both;
}

.slide.active .package-grid div,
.slide.active .episode-card,
.slide.active .profile-card,
.slide.active .character,
.slide.active .art-strip img {
  animation: cardReveal .6s cubic-bezier(.18, 1.36, .34, 1) both;
}

.slide.active .package-grid div:nth-child(2),
.slide.active .episode-card:nth-child(2),
.slide.active .profile-card:nth-child(2),
.slide.active .character:nth-child(2),
.slide.active .art-strip img:nth-child(2) { animation-delay: .04s; }
.slide.active .package-grid div:nth-child(3),
.slide.active .episode-card:nth-child(3),
.slide.active .profile-card:nth-child(3),
.slide.active .character:nth-child(3),
.slide.active .art-strip img:nth-child(3) { animation-delay: .08s; }
.slide.active .package-grid div:nth-child(4),
.slide.active .episode-card:nth-child(4),
.slide.active .profile-card:nth-child(4),
.slide.active .character:nth-child(4),
.slide.active .art-strip img:nth-child(4) { animation-delay: .12s; }
.slide.active .episode-card:nth-child(n+5),
.slide.active .profile-card:nth-child(n+5),
.slide.active .art-strip img:nth-child(n+5) { animation-delay: .16s; }

@keyframes heroReveal {
  0% { opacity: 0; transform: translateY(26px) translateZ(-50px) rotate(-1deg) scale(.96); }
  72% { opacity: 1; transform: translateY(-7px) translateZ(0) rotate(.35deg) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) translateZ(0) rotate(0) scale(1); }
}

@keyframes posterReveal {
  0% { opacity: 0; transform: translateY(22px) rotate(-4deg) scale(.92); filter: saturate(.8); }
  70% { opacity: 1; transform: translateY(-6px) rotate(2deg) scale(1.025); }
  100% { opacity: 1; transform: translateY(0) rotate(1.5deg) scale(1); filter: none; }
}

@keyframes cardReveal {
  0% { opacity: 0; transform: translateY(28px) rotate(-3deg) scale(.88); }
  72% { opacity: 1; transform: translateY(-5px) rotate(1.5deg) scale(1.035); }
  100% { opacity: 1; }
}

.copy {
  max-width: 760px;
  align-self: center;
  z-index: 2;
}

.copy.centered {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.kicker {
  display: inline-flex !important;
  align-items: center;
  min-height: 34px;
  margin: 0 0 12px;
  padding: 5px 10px;
  border: 3px solid rgba(39, 29, 25, .95) !important;
  border-radius: 999px;
  background: #ffe179 !important;
  color: #7a1f16;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  box-shadow: 4px 4px 0 rgba(39, 29, 25, .14) !important;
  transform: rotate(-1deg);
  position: relative;
}

.kicker::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 18px 0 0 var(--sky), 36px 0 0 var(--green);
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin-bottom: 12px;
  font-size: clamp(4rem, 13vw, 11rem);
  line-height: .82;
  text-transform: uppercase;
  text-shadow: 5px 5px 0 var(--red), 10px 10px 0 rgba(39, 29, 25, .18);
}

h2 {
  font-size: clamp(2rem, 5vw, 5.5rem);
  line-height: .95;
  margin-bottom: 20px;
  text-shadow: 3px 3px 0 rgba(255, 255, 255, .52);
}

h3 {
  font-size: clamp(1.35rem, 2.3vw, 2.2rem);
  margin-bottom: 8px;
}

p {
  font-size: clamp(1rem, 1.55vw, 1.35rem);
  line-height: 1.42;
}

.burst-stage {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.sunburst {
  position: absolute;
  width: min(110vmax, 1200px);
  aspect-ratio: 1;
  background: repeating-conic-gradient(from 0deg, #ffcf42 0 9deg, #ff6b2a 9deg 18deg);
  border-radius: 50%;
  opacity: .72;
  animation: slowSpin 28s linear infinite;
}

@keyframes slowSpin { to { transform: rotate(360deg); } }

.chip-bag {
  position: relative;
  z-index: 2;
  justify-self: end;
  margin-right: clamp(20px, 6vw, 90px);
  width: min(40vw, 430px);
  min-width: 270px;
  aspect-ratio: 2 / 3;
  border: 0;
  padding: 0;
  border-radius: 22px;
  background: transparent;
  filter: drop-shadow(0 24px 30px rgba(39, 29, 25, .35));
  cursor: pointer;
  transform: rotate(-4deg);
  transition: transform .2s ease, filter .2s ease;
}

.chip-bag::before {
  content: "";
  position: absolute;
  inset: 9% 10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 104, .9), rgba(255, 91, 44, 0) 68%);
  opacity: .45;
  transform: scale(.92);
}

.chip-bag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform: translateZ(0);
}

.chip-bag:hover {
  transform: rotate(-2deg) scale(1.035);
  filter: drop-shadow(0 28px 34px rgba(39, 29, 25, .38)) saturate(1.07);
}

.chip-bag.popped {
  animation: bagPop 1.2s cubic-bezier(.16, .86, .22, 1) forwards;
  pointer-events: none;
}

@keyframes bagPop {
  0% { transform: rotate(-4deg) scale(1); opacity: 1; }
  14% { transform: rotate(-6deg) scale(1.035, .965); filter: drop-shadow(0 26px 34px rgba(39, 29, 25, .36)) saturate(1.12); }
  30% { transform: rotate(3deg) scale(.955, 1.075); }
  48% { transform: rotate(8deg) scale(1.13); filter: drop-shadow(0 34px 48px rgba(39, 29, 25, .28)) saturate(1.35) brightness(1.08); opacity: 1; }
  72% { transform: rotate(18deg) scale(.44); opacity: .45; filter: blur(1.8px) saturate(1.25); }
  100% { transform: rotate(34deg) scale(.08); opacity: 0; filter: blur(5px) saturate(1.45); }
}

.pop-flash {
  position: fixed;
  left: 50%;
  top: 48%;
  z-index: 80;
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 230, .9) 0 12%, rgba(255, 201, 52, .42) 30%, rgba(255, 92, 40, .03) 68%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
}

.pop-flash.active {
  animation: flashPop .82s cubic-bezier(.18, .78, .22, 1) forwards;
}

@keyframes flashPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  18% { opacity: .34; transform: translate(-50%, -50%) scale(8); }
  58% { opacity: .12; transform: translate(-50%, -50%) scale(18); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(28); }
}

.open-copy {
  position: absolute;
  z-index: 3;
  bottom: 12vh;
  left: 6vw;
  max-width: min(580px, 48vw);
  pointer-events: none;
}

.slide-open h1 {
  font-size: clamp(3.7rem, 7.2vw, 7.25rem);
}

.open-copy p:last-child {
  display: inline-block;
  padding: 10px 14px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  font-weight: 800;
}

.chip-particle {
  position: fixed;
  left: 50%;
  top: 45%;
  z-index: 120;
  width: var(--w, 68px);
  height: var(--h, 44px);
  border: 1px solid rgba(119, 76, 12, .62);
  border-radius: 56% 44% 62% 38% / 44% 58% 42% 56%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 239, 142, .88), rgba(255, 239, 142, 0) 22%),
    radial-gradient(circle at 62% 72%, rgba(174, 93, 10, .18), rgba(174, 93, 10, 0) 31%),
    repeating-linear-gradient(var(--ridge, 18deg), rgba(138, 82, 13, .18) 0 3px, rgba(255, 236, 125, .18) 3px 9px),
    linear-gradient(135deg, #ffe36f, #e49b24 52%, #f5bd43);
  box-shadow:
    inset -10px -8px 14px rgba(116, 66, 11, .2),
    inset 7px 7px 12px rgba(255, 247, 168, .5),
    0 10px 18px rgba(39, 29, 25, .24);
  transform-origin: 48% 52%;
  animation: flyChip var(--dur, 1.7s) cubic-bezier(.18, .74, .22, 1) forwards;
  pointer-events: none;
}

.chip-particle::after {
  content: "";
  position: absolute;
  inset: 18% 20%;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 255, 220, .42), rgba(255, 255, 220, 0) 68%);
  mix-blend-mode: screen;
}

.chip-particle.shard {
  clip-path: polygon(5% 35%, 28% 4%, 55% 18%, 86% 0, 98% 42%, 77% 80%, 36% 100%, 12% 76%);
}

.chip-particle.blur {
  filter: blur(1.2px);
}

@keyframes flyChip {
  0% {
    transform: translate(-50%, -50%) rotate(var(--start, 0deg)) scale(.1);
    opacity: 0;
  }
  10% {
    transform: translate(calc(var(--sx) - 50%), calc(var(--sy) - 50%)) rotate(calc(var(--r) * .08)) scale(calc(var(--s) * .45));
    opacity: .98;
  }
  44% {
    transform: translate(calc(var(--mx) - 50%), calc(var(--my) - 50%)) rotate(calc(var(--r) * .3)) scale(calc(var(--s) * .96));
    opacity: 1;
  }
  78% {
    transform: translate(calc(var(--lx) - 50%), calc(var(--ly) - 50%)) rotate(calc(var(--r) * .76)) scale(calc(var(--s) * .98));
    opacity: .86;
  }
  to {
    transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)) rotate(var(--r)) scale(var(--s));
    opacity: 0;
  }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.art-panel {
  margin: 0;
  border: 6px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: white;
  transform: rotate(1.5deg);
}

.art-panel img, .collage-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.metric-row, .final-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.metric-row span, .final-tags span, .inline-link {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 13px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(180deg, #fffdf4, #ffeaa0);
  color: var(--ink);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 4px 4px 0 rgba(39, 29, 25, .16);
}

.world-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px minmax(280px, .7fr);
  gap: 28px;
  align-items: center;
}

.location-stack {
  display: grid;
  gap: 12px;
}

.location, .engine button {
  min-height: 54px;
  border: 4px solid var(--ink);
  border-radius: 14px;
  background: var(--cream);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 5px 5px 0 rgba(39, 29, 25, .18);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.location.active, .engine button.active {
  background: linear-gradient(135deg, var(--teal), var(--blue));
  color: white;
  transform: translate(-2px, -2px) rotate(-1deg);
  box-shadow: 8px 8px 0 rgba(39, 29, 25, .2);
}

.location:hover, .engine button:hover, .bible-tab:hover, .profile-card:hover, .character:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 8px 8px 0 rgba(39, 29, 25, .18);
}

.location-card, .character-detail, .engine-card {
  border: 6px solid var(--ink);
  border-radius: 16px;
  padding: clamp(18px, 3vw, 28px);
  background:
    radial-gradient(circle at 94% 10%, rgba(255, 95, 183, .22), transparent 24%),
    radial-gradient(circle at 8% 88%, rgba(82, 216, 255, .24), transparent 26%),
    linear-gradient(180deg, rgba(255, 253, 244, .98), rgba(255, 238, 189, .96));
  box-shadow: 12px 12px 0 rgba(39, 29, 25, .15), var(--shadow);
}

.character-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 14px;
  align-items: end;
  margin: clamp(16px, 3vh, 32px) auto 18px;
  max-width: 1100px;
}

.character {
  height: clamp(150px, 28vh, 270px);
  display: grid;
  align-items: end;
  justify-items: center;
  border: 4px solid var(--ink);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 225, 121, .56), transparent 42%),
    rgba(255, 249, 236, .9);
  cursor: pointer;
  overflow: hidden;
  box-shadow: 6px 6px 0 rgba(39, 29, 25, .14);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.character.active { background: #ffe179; transform: translateY(-10px) rotate(-1deg); }
.character.villain.active { background: #ff7b5b; transform: translateY(-10px) rotate(1deg); }

.character img {
  width: 100%;
  height: calc(100% - 34px);
  object-fit: contain;
  padding: 8px 8px 0;
}

.character span {
  width: 100%;
  padding: 7px 4px;
  background: var(--ink);
  color: white;
  font-weight: 900;
}

.character-detail {
  width: min(780px, 92vw);
  margin: 0 auto;
  text-align: center;
}

.character-detail .role {
  color: #7a1f16;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.versus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.team {
  min-height: 72vh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 22px;
  border: 6px solid var(--ink);
  border-radius: 18px;
  box-shadow: 13px 13px 0 rgba(39, 29, 25, .15), var(--shadow);
}

.team.warm { background: linear-gradient(145deg, #fff5bf, #ffad33); }
.team.cold { background: linear-gradient(145deg, #e8fbff, #6ec5d9); }

.team img {
  max-width: min(70%, 380px);
  max-height: 38vh;
  object-fit: contain;
}

.vs-core {
  position: relative;
  display: grid;
  place-items: center;
  width: 120px;
  aspect-ratio: 1;
  border: 6px solid var(--ink);
  border-radius: 50%;
  background: var(--red);
  color: white;
  font-size: 2.8rem;
  font-weight: 1000;
  box-shadow: var(--shadow);
}

.vs-core::before {
  content: "";
  position: absolute;
  inset: -36px;
  z-index: -1;
  background: repeating-conic-gradient(from -8deg, var(--gold) 0 8deg, transparent 8deg 15deg);
  clip-path: polygon(50% 0, 58% 31%, 89% 11%, 69% 42%, 100% 50%, 69% 58%, 89% 89%, 58% 69%, 50% 100%, 42% 69%, 11% 89%, 31% 58%, 0 50%, 31% 42%, 11% 11%, 42% 31%);
}

.engine {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 16px 0;
}

.engine button {
  width: 58px;
  border-radius: 50%;
}

.engine-card {
  width: min(820px, 92vw);
  margin: 0 auto;
  text-align: center;
}

.comic-strip {
  position: absolute;
  right: 4vw;
  bottom: -4vh;
  width: min(22vw, 250px);
  max-height: 52vh;
  object-fit: contain;
  transform: rotate(4deg);
  border: 5px solid var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.proof-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(320px, .68fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}

.collage-wrap {
  height: min(78vh, 760px);
  border: 6px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  background: white;
  box-shadow: var(--shadow);
}

.package-grid {
  align-self: start;
  width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 28px auto 0;
}

.package-grid div,
.episode-card {
  border: 4px solid var(--ink);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 95, 183, .15) 0 18%, transparent 18% 100%),
    radial-gradient(circle at 90% 10%, rgba(255, 200, 61, .28), transparent 26%),
    rgba(255, 249, 236, .94);
  box-shadow: 8px 8px 0 rgba(39, 29, 25, .17);
  padding: 18px;
  transition: transform .16s ease, box-shadow .16s ease;
}

.package-grid div:hover,
.episode-card:hover,
.art-strip img:hover {
  transform: translateY(-5px) rotate(-1deg) scale(1.015);
  box-shadow: 12px 12px 0 rgba(39, 29, 25, .18);
}

.package-grid div:nth-child(even),
.episode-card:nth-child(odd),
.art-strip img:nth-child(even) {
  transform: rotate(-1deg);
}

.package-grid div:nth-child(odd),
.episode-card:nth-child(even),
.art-strip img:nth-child(odd) {
  transform: rotate(1deg);
}

.package-grid strong,
.package-grid span {
  display: block;
}

.package-grid strong {
  font-size: 1.05rem;
  color: #7a1f16;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.package-grid span {
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  font-weight: 900;
  line-height: 1.1;
}

.bible-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
  width: min(1180px, 94vw);
  margin: auto;
}

.bible-tabs {
  display: grid;
  gap: 10px;
  align-content: center;
}

.bible-tab {
  min-height: 54px;
  border: 4px solid var(--ink);
  border-radius: 14px;
  background: var(--cream);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 5px 5px 0 rgba(39, 29, 25, .16);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.bible-tab.active {
  background: linear-gradient(135deg, var(--red), var(--orange));
  color: white;
  transform: translate(-2px, -2px) rotate(-1deg);
  box-shadow: 8px 8px 0 rgba(39, 29, 25, .2);
}

.bible-panel,
.profile-detail {
  max-height: 74vh;
  overflow: auto;
  border: 6px solid var(--ink);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 95, 183, .18), transparent 24%),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(39, 29, 25, .035) 28px 30px),
    linear-gradient(180deg, rgba(255, 253, 244, .98), rgba(255, 245, 211, .96));
  box-shadow: 13px 13px 0 rgba(39, 29, 25, .15), var(--shadow);
  padding: clamp(20px, 3vw, 34px);
}

.bible-panel h2 {
  font-size: clamp(2rem, 4.7vw, 4.4rem);
}

.bible-panel ul {
  margin: 0;
  padding-left: 1.1em;
}

.bible-panel li {
  margin: 0 0 10px;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.35;
}

.character-bible {
  display: grid;
  grid-template-columns: minmax(260px, .62fr) minmax(0, 1.18fr);
  grid-template-rows: auto 1fr;
  gap: 18px 24px;
  align-items: start;
}

.character-bible .copy {
  grid-column: 1 / -1;
}

.profile-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 50vh;
  overflow: auto;
  padding-right: 4px;
}

.profile-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 76px;
  border: 4px solid var(--ink);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 200, 61, .34), transparent 28%),
    rgba(255, 249, 236, .92);
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
  text-align: left;
  overflow: hidden;
  box-shadow: 5px 5px 0 rgba(39, 29, 25, .14);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.profile-card.active {
  background: linear-gradient(135deg, #ffe179, #fff8d9);
  transform: translate(-2px, -2px) rotate(-1deg);
  box-shadow: 8px 8px 0 rgba(39, 29, 25, .18);
}

.profile-card img {
  width: 62px;
  height: 68px;
  object-fit: contain;
}

.profile-detail {
  min-height: 330px;
  max-height: 50vh;
}

.profile-detail .role {
  color: #7a1f16;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.episode-board {
  width: min(1180px, 94vw);
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-height: 62vh;
  overflow: auto;
  padding: 0 4px 6px;
}

.episode-card span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  margin-bottom: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: linear-gradient(135deg, var(--red), var(--orange));
  color: white;
  font-weight: 900;
  font-size: .9rem;
}

.episode-card h3 {
  font-size: clamp(1.15rem, 2vw, 1.7rem);
}

.episode-card p {
  font-size: clamp(.92rem, 1.15vw, 1.05rem);
}

.hero-episode {
  grid-column: span 2;
  background:
    radial-gradient(circle at 88% 12%, rgba(82, 216, 255, .32), transparent 28%),
    linear-gradient(135deg, #ffe179, #ffad33);
}

.art-strip {
  width: min(1160px, 94vw);
  max-height: 52vh;
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 12px;
  overflow: auto;
  padding: 4px 4px 86px;
}

.slide-bible h2,
.slide-art h2 {
  font-size: clamp(2.2rem, 4.4vw, 4.8rem);
}

.art-strip img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  border: 4px solid var(--ink);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 225, 121, .46), transparent 34%),
    rgba(255, 249, 236, .9);
  box-shadow: 7px 7px 0 rgba(39, 29, 25, .14);
  transition: transform .16s ease, box-shadow .16s ease;
}

.source-layout {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(360px, .9fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}

.source-pages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.source-pages img {
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  border: 5px solid var(--ink);
  border-radius: 8px;
  background: white;
  box-shadow: 9px 9px 0 rgba(39, 29, 25, .14), var(--shadow);
}

.slide-video {
  align-content: center;
  justify-items: center;
  gap: 18px;
}

video {
  width: min(900px, 86vw);
  max-height: 56vh;
  border: 6px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  box-shadow: var(--shadow);
}

.video-note {
  max-width: 700px;
  text-align: center;
  font-size: .95rem;
  margin-bottom: 58px;
}

.close-stage {
  display: grid;
  grid-template-columns: minmax(240px, .55fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}

.close-drey {
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  filter: drop-shadow(12px 18px 0 rgba(39, 29, 25, .12));
}

.deck-nav {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 20;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 249, 236, .92);
  box-shadow: 0 8px 20px rgba(39, 29, 25, .16);
}

.deck-nav button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.dots {
  display: flex;
  gap: 7px;
  align-items: center;
}

.dots button {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid var(--ink);
  background: transparent;
  font-size: 0;
}

.dots button.active { background: var(--red); }

/* Memorable show-bible pass: turn the deck into a kinetic snack theater. */
.deck {
  background:
    radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255, 255, 255, .5), transparent 24%),
    repeating-linear-gradient(112deg, rgba(255, 95, 183, .18) 0 20px, transparent 20px 44px),
    linear-gradient(135deg, #2bd5df 0%, #fff174 42%, #ff7936 100%);
}

.deck::before,
.deck::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

.deck::before {
  inset: 14px;
  z-index: 0;
  border: 8px solid rgba(39, 29, 25, .92);
  border-radius: 24px;
  box-shadow:
    inset 0 0 0 7px rgba(255, 246, 221, .74),
    inset 0 0 60px rgba(255, 255, 255, .38),
    0 16px 0 rgba(39, 29, 25, .16);
}

.deck::after {
  left: -10vw;
  right: -10vw;
  bottom: -7vh;
  z-index: 1;
  height: 18vh;
  background:
    radial-gradient(ellipse at 50% 0, rgba(39, 29, 25, .22), transparent 62%),
    repeating-linear-gradient(90deg, rgba(39, 29, 25, .12) 0 14px, transparent 14px 34px);
  transform: rotate(-1deg);
}

.slide {
  z-index: 2;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .45), transparent 20%),
    radial-gradient(circle at 86% 14%, rgba(255, 95, 183, .38), transparent 26%),
    radial-gradient(circle at 78% 84%, rgba(0, 168, 168, .32), transparent 30%),
    linear-gradient(135deg, rgba(255, 249, 236, .78), rgba(255, 200, 61, .58));
}

.slide.active {
  z-index: 3;
}

.slide:not(.slide-open) {
  padding-top: clamp(58px, 7vw, 86px);
  padding-right: clamp(104px, 10vw, 148px);
}

.snack-marquee {
  position: fixed;
  left: -8vw;
  right: -8vw;
  top: 24px;
  z-index: 16;
  height: 42px;
  overflow: hidden;
  border-block: 4px solid var(--ink);
  background: linear-gradient(90deg, var(--red), var(--orange), var(--gold), var(--teal), var(--blue), var(--pink));
  box-shadow: 0 8px 0 rgba(39, 29, 25, .16);
  transform: rotate(-1.3deg);
  pointer-events: none;
  opacity: 1;
  transition: opacity .25s ease, transform .25s ease;
}

.deck[data-active-slide="Pop"] .snack-marquee {
  opacity: 0;
  transform: translateY(-58px) rotate(-1.3deg);
}

.snack-marquee-track {
  display: flex;
  width: max-content;
  min-width: 200%;
  height: 100%;
  align-items: center;
  gap: 26px;
  animation: snackTicker 18s linear infinite;
}

.snack-marquee span {
  flex: 0 0 auto;
  color: #fffdf4;
  font-size: 1.05rem;
  font-weight: 1000;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 rgba(39, 29, 25, .88);
  white-space: nowrap;
}

.snack-marquee span:nth-child(odd) {
  color: #fff174;
}

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

.cartoon-cameos {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.cameo {
  position: absolute;
  width: clamp(82px, 10vw, 155px);
  max-height: 26vh;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(10px 14px 0 rgba(39, 29, 25, .16));
  transition: opacity .36s ease, transform .5s cubic-bezier(.2, 1.4, .34, 1);
  animation: cameoFloat 3.2s ease-in-out infinite alternate;
}

.cameo-drey { left: 18px; bottom: 22px; transform: translateX(-130%) rotate(-8deg); }
.cameo-spud { left: 24px; top: 104px; transform: translateX(-130%) rotate(9deg); }
.cameo-chip { right: 118px; top: 100px; transform: translateY(-150%) rotate(-7deg); }
.cameo-kevin { right: 112px; bottom: 20px; transform: translateX(145%) rotate(8deg); }
.cameo-bag { right: 112px; top: 92px; transform: translateY(-150%) rotate(8deg); }

.deck:not([data-active-slide="Pop"]) .cameo {
  opacity: .09;
}

.deck[data-active-slide="Hook"] .cameo-bag,
.deck[data-active-slide="Package"] .cameo-bag,
.deck[data-active-slide="Art Gallery"] .cameo-bag {
  opacity: .34;
  transform: translate(0, 0) rotate(8deg) scale(1.04);
}

.deck[data-active-slide="Characters"] .cameo-drey,
.deck[data-active-slide="Character Bible"] .cameo-drey,
.deck[data-active-slide="Close"] .cameo-drey {
  opacity: .28;
  transform: translate(0, 0) rotate(-8deg) scale(1.05);
}

.deck[data-active-slide="Engine"] .cameo-spud,
.deck[data-active-slide="Episode Guide"] .cameo-spud {
  opacity: .3;
  transform: translate(0, 0) rotate(9deg) scale(1.05);
}

.deck[data-active-slide="Written Pitch"] .cameo-chip,
.deck[data-active-slide="Source PDF"] .cameo-chip {
  opacity: .28;
  transform: translate(0, 0) rotate(-7deg) scale(1.05);
}

.deck[data-active-slide="Conflict"] .cameo-kevin,
.deck[data-active-slide="World"] .cameo-kevin {
  opacity: .32;
  transform: translate(0, 0) rotate(8deg) scale(1.08);
}

.deck[data-active-slide="Characters"] .cameo,
.deck[data-active-slide="Character Bible"] .cameo,
.deck[data-active-slide="Episode Guide"] .cameo,
.deck[data-active-slide="Written Pitch"] .cameo,
.deck[data-active-slide="Source PDF"] .cameo {
  opacity: 0 !important;
}

@keyframes cameoFloat {
  from { translate: 0 0; }
  to { translate: 0 -12px; }
}

h1, h2 {
  font-family: Impact, "Arial Black", Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  color: var(--ink);
  -webkit-text-stroke: 1px rgba(39, 29, 25, .2);
}

h2 {
  text-shadow:
    4px 4px 0 #fff6dd,
    8px 8px 0 rgba(255, 95, 183, .28),
    11px 11px 0 rgba(39, 29, 25, .12);
}

.slide:not(.slide-open) .copy:not(.centered) h2 {
  font-size: clamp(2rem, 4.2vw, 4.7rem);
  line-height: .88;
}

.slide:not(.slide-open) .copy:not(.centered) p:not(.kicker) {
  font-size: clamp(.98rem, 1.25vw, 1.18rem);
}

.slide:not(.slide-open) .copy:not(.centered) {
  padding: clamp(18px, 2.5vw, 30px);
  border: 7px solid var(--ink);
  border-radius: 24px;
  background:
    radial-gradient(circle at 94% 8%, rgba(255, 95, 183, .2), transparent 24%),
    linear-gradient(180deg, rgba(255, 253, 244, .96), rgba(255, 237, 146, .92));
  box-shadow: 14px 14px 0 rgba(39, 29, 25, .16), 0 28px 44px rgba(39, 29, 25, .14);
  transform: rotate(-1.2deg);
}

.metric-row span,
.final-tags span,
.inline-link {
  border-width: 4px;
  background: linear-gradient(135deg, #fffdf4 0 58%, var(--gold) 58% 100%);
  transform: rotate(-1deg);
}

.metric-row span:nth-child(even),
.final-tags span:nth-child(even) {
  background: linear-gradient(135deg, #fffdf4 0 58%, var(--sky) 58% 100%);
  transform: rotate(1deg);
}

.kicker {
  background: linear-gradient(135deg, #fff174, #fffdf4 62%, #ffb3df) !important;
}

.slide-hook {
  background:
    linear-gradient(90deg, rgba(255, 246, 221, .92) 0 47%, rgba(255, 111, 47, .38) 47% 100%),
    url("assets/friendchips_diner.png") center / cover no-repeat;
}

.slide-hook .split {
  grid-template-columns: minmax(0, .86fr) minmax(280px, 1.08fr);
  gap: clamp(18px, 3vw, 42px);
}

.slide-hook .art-panel {
  border-width: 9px;
  border-radius: 28px;
  transform: rotate(5deg) scale(1.05);
  clip-path: polygon(0 3%, 96% 0, 100% 92%, 4% 100%);
}

.slide-hook .copy {
  max-height: calc(100vh - 156px);
  overflow: hidden;
}

.slide-world {
  background:
    radial-gradient(circle at 54% 48%, rgba(255, 246, 221, .94), rgba(255, 246, 221, .54) 32%, transparent 52%),
    url("assets/friendchips_diner.png") right -4vw bottom -8vh / min(70vw, 900px) auto no-repeat,
    linear-gradient(135deg, #28cdda, #fff174 48%, #ff7a36);
}

.world-grid {
  grid-template-columns: minmax(0, .86fr) 250px minmax(300px, .84fr);
}

.location-stack {
  transform: rotate(-4deg);
  padding: 14px;
  border: 7px solid var(--ink);
  border-radius: 24px;
  background: rgba(255, 249, 236, .86);
  box-shadow: 12px 12px 0 rgba(39, 29, 25, .16);
}

.location {
  background: linear-gradient(135deg, #fffdf4, #fff174);
}

.location-card {
  position: relative;
  transform: rotate(2deg);
}

.location-card::before,
.engine-card::before,
.bible-panel::before,
.profile-detail::before {
  content: "";
  position: absolute;
  width: 74px;
  height: 30px;
  left: 28px;
  top: -17px;
  border: 4px solid var(--ink);
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--pink) 0 14px, var(--gold) 14px 28px, var(--sky) 28px 42px);
  box-shadow: 5px 5px 0 rgba(39, 29, 25, .15);
}

.slide-characters {
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 241, 116, .86), transparent 34%),
    repeating-conic-gradient(from 0deg at 50% 65%, rgba(232, 59, 46, .18) 0 7deg, rgba(255, 255, 255, .18) 7deg 14deg),
    linear-gradient(135deg, #2bd5df, #fff174 58%, #ff7936);
}

.slide-characters .copy.centered {
  max-width: min(920px, 82vw);
}

.slide-characters .copy.centered h2 {
  font-size: clamp(2.05rem, 3.8vw, 4.25rem);
  line-height: .9;
  margin-bottom: 10px;
}

.character-spotlight {
  position: absolute;
  left: 50%;
  bottom: -9vh;
  z-index: 1;
  width: min(48vw, 620px);
  height: min(62vh, 620px);
  display: grid;
  place-items: end center;
  opacity: .24;
  transform: translateX(-50%);
  filter: drop-shadow(18px 22px 0 rgba(39, 29, 25, .12));
  pointer-events: none;
}

.character-spotlight img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: heroBob 2.6s ease-in-out infinite alternate;
}

.character-spotlight.pop img {
  animation: spotlightPop .48s cubic-bezier(.18, 1.55, .36, 1), heroBob 2.6s .48s ease-in-out infinite alternate;
}

@keyframes heroBob {
  from { transform: translateY(0) rotate(-1deg); }
  to { transform: translateY(-14px) rotate(1deg); }
}

@keyframes spotlightPop {
  from { transform: scale(.72) rotate(-12deg); opacity: .45; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

.character-grid {
  position: relative;
  z-index: 3;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: clamp(12px, 1.5vw, 22px);
  margin-block: 8px 12px;
}

.character {
  height: clamp(168px, 25vh, 256px);
  grid-template-rows: minmax(0, 1fr) 36px;
  border-width: 6px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .9), transparent 28%),
    linear-gradient(160deg, #fff174, #fffdf4 58%, #ffb3df);
}

.character img {
  width: 100%;
  height: 100%;
  max-width: 88%;
  min-height: 0;
  object-fit: contain;
  object-position: center bottom;
  padding: 8px 10px 0;
  align-self: end;
  justify-self: center;
}

.character span {
  min-height: 36px;
  align-self: end;
}

.character:nth-child(1) { transform: rotate(-4deg) translateY(8px); }
.character:nth-child(2) { transform: rotate(3deg) translateY(-6px); }
.character:nth-child(3) { transform: rotate(-2deg) translateY(4px); }
.character:nth-child(4) { transform: rotate(4deg) translateY(-8px); }
.character:nth-child(5) { transform: rotate(-3deg) translateY(10px); }

.character.active {
  transform: translateY(-18px) rotate(0) scale(1.08);
  box-shadow: 13px 13px 0 rgba(39, 29, 25, .22);
}

.character-detail {
  position: relative;
  z-index: 4;
  border-width: 7px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .72), transparent 18%),
    linear-gradient(180deg, #fffdf4, #ffe86f);
  transform: rotate(-1deg);
  padding: clamp(12px, 2vw, 22px);
}

.character-detail h3 {
  margin-bottom: 4px;
}

.character-detail p {
  font-size: clamp(.95rem, 1.15vw, 1.08rem);
}

.slide-conflict {
  background:
    linear-gradient(112deg, rgba(255, 174, 38, .92) 0 48%, rgba(39, 29, 25, .94) 48% 51%, rgba(43, 213, 223, .88) 51% 100%),
    repeating-conic-gradient(from 12deg, rgba(255, 255, 255, .2) 0 8deg, transparent 8deg 18deg);
}

.team {
  border-width: 8px;
  border-radius: 30px;
  transform: rotate(-2deg);
}

.team.cold {
  transform: rotate(2deg);
}

.vs-core {
  transform: rotate(-8deg);
  animation: vsPulse 1.8s ease-in-out infinite alternate;
}

@keyframes vsPulse {
  to { scale: 1.08; }
}

.slide-engine {
  background:
    url("assets/comic.png") right -6vw bottom -18vh / min(48vw, 560px) auto no-repeat,
    linear-gradient(135deg, #fff174, #ffb3df 48%, #2bd5df);
}

.engine {
  position: relative;
  width: min(650px, 90vw);
  margin-inline: auto;
  padding: 20px 26px;
  border: 7px solid var(--ink);
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, #fffdf4 0 32px, #ffe86f 32px 64px);
  box-shadow: 12px 12px 0 rgba(39, 29, 25, .16);
}

.engine button {
  width: 68px;
  height: 68px;
  border-width: 5px;
  font-size: 1.35rem;
}

.engine-card {
  position: relative;
  border-width: 8px;
  border-radius: 30px;
  transform: rotate(1deg);
}

.comic-strip {
  width: min(25vw, 310px);
  border-width: 8px;
  border-radius: 24px;
  transform: rotate(8deg);
}

.slide-proof {
  background:
    radial-gradient(circle at 28% 46%, rgba(255, 246, 221, .9), transparent 38%),
    url("assets/collage.png") right -4vw center / min(56vw, 760px) auto no-repeat,
    linear-gradient(135deg, #ff7936, #fff174 48%, #2bd5df);
}

.proof-layout .collage-wrap,
.source-pages img,
.art-panel,
.collage-wrap,
video {
  border-width: 8px;
  border-radius: 26px;
}

.proof-layout .collage-wrap {
  transform: rotate(3deg);
}

.slide-package {
  background:
    url("assets/friendchips_real_bag.png") right -2vw bottom -12vh / min(42vw, 520px) auto no-repeat,
    radial-gradient(circle at 16% 28%, rgba(255, 255, 255, .75), transparent 24%),
    linear-gradient(135deg, #2bd5df, #fff174 55%, #ff7936);
}

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

.package-grid,
.bible-layout,
.character-bible,
.episode-board,
.art-strip {
  max-width: calc(100vw - 220px);
}

.package-grid div,
.episode-card {
  border-width: 6px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 95, 183, .18) 0 24%, transparent 24% 100%),
    radial-gradient(circle at 86% 12%, rgba(82, 216, 255, .28), transparent 28%),
    linear-gradient(180deg, rgba(255, 253, 244, .96), rgba(255, 238, 126, .9));
  box-shadow: 11px 11px 0 rgba(39, 29, 25, .18);
}

.package-grid div:nth-child(1) { transform: rotate(-4deg); }
.package-grid div:nth-child(2) { transform: rotate(3deg) translateY(12px); }
.package-grid div:nth-child(3) { transform: rotate(-2deg) translateY(-10px); }
.package-grid div:nth-child(4) { transform: rotate(4deg); }

.slide-written,
.slide-bible {
  background:
    linear-gradient(90deg, rgba(255, 246, 221, .92) 0 36%, rgba(255, 246, 221, .48) 36%),
    url("assets/collage.png") left -14vw bottom -10vh / min(52vw, 620px) auto no-repeat,
    linear-gradient(135deg, #fff174, #ffb3df 44%, #2bd5df);
}

.slide-bible .copy {
  max-width: 720px;
  padding: clamp(14px, 2vw, 22px) !important;
}

.slide-bible .copy h2 {
  font-size: clamp(2rem, 3.7vw, 4rem) !important;
  line-height: .88;
  margin-bottom: 0;
}

.slide-bible .copy .kicker {
  margin-bottom: 8px;
}

.bible-layout,
.character-bible {
  position: relative;
  z-index: 3;
}

.bible-tabs,
.profile-list {
  padding: 14px;
  border: 7px solid var(--ink);
  border-radius: 24px;
  background: rgba(255, 253, 244, .84);
  box-shadow: 12px 12px 0 rgba(39, 29, 25, .16);
  transform: rotate(-2deg);
}

.bible-tab,
.profile-card {
  border-width: 5px;
  background: linear-gradient(135deg, #fffdf4, #fff174);
}

.bible-panel,
.profile-detail {
  position: relative;
  border-width: 8px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(82, 216, 255, .2), transparent 22%),
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(39, 29, 25, .045) 24px 27px),
    #fffdf4;
}

.slide-episodes {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 246, 221, .84), transparent 30%),
    url("assets/drey_2.png") right -18vw bottom -18vh / min(28vw, 340px) auto no-repeat,
    linear-gradient(135deg, #ff7936, #fff174 50%, #2bd5df);
}

.episode-board {
  width: min(1040px, calc(100vw - 220px));
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(132px, auto);
  gap: 18px;
  max-height: 56vh;
  padding: 6px 10px 72px;
}

.hero-episode {
  grid-column: span 3;
  grid-row: span 2;
  display: grid;
  align-content: center;
}

.episode-card:nth-child(2) { grid-column: span 3; transform: rotate(2deg); }
.episode-card:nth-child(3),
.episode-card:nth-child(4),
.episode-card:nth-child(5),
.episode-card:nth-child(6) { grid-column: span 2; }

.episode-card span {
  border-width: 3px;
  box-shadow: 4px 4px 0 rgba(39, 29, 25, .16);
}

.slide-art {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 246, 221, .82), transparent 34%),
    linear-gradient(135deg, #2bd5df, #fff174 50%, #ff5fb7);
}

.art-strip {
  grid-template-columns: repeat(10, minmax(190px, 1fr));
  max-height: 58vh;
  padding: 22px 18px 92px;
  border: 8px solid var(--ink);
  border-radius: 30px;
  background: rgba(255, 253, 244, .72);
  box-shadow: 14px 14px 0 rgba(39, 29, 25, .16);
}

.art-strip img {
  height: 260px;
  border-width: 6px;
  border-radius: 22px;
  background: linear-gradient(135deg, #fffdf4, #fff174);
}

.slide-source {
  background:
    radial-gradient(circle at 72% 42%, rgba(255, 246, 221, .92), transparent 36%),
    linear-gradient(135deg, #ffb3df, #fff174 48%, #2bd5df);
}

.source-pages {
  transform: rotate(2deg);
}

.slide-video {
  background:
    linear-gradient(rgba(39, 29, 25, .52), rgba(39, 29, 25, .22)),
    url("assets/friendchips_intro_poster.jpg") center / cover no-repeat;
}

.slide-video .copy.centered {
  padding: 16px 22px;
  border: 7px solid var(--ink);
  border-radius: 24px;
  background: rgba(255, 253, 244, .9);
  box-shadow: 12px 12px 0 rgba(39, 29, 25, .18);
  transform: rotate(-1deg);
}

video {
  border-width: 9px;
  border-radius: 30px;
  box-shadow:
    0 0 0 8px rgba(255, 200, 61, .95),
    16px 16px 0 rgba(39, 29, 25, .22),
    0 30px 55px rgba(39, 29, 25, .28);
}

.slide-close {
  background:
    linear-gradient(90deg, rgba(255, 246, 221, .82), rgba(255, 246, 221, .46)),
    url("assets/friendchips_diner.png") center / cover no-repeat;
}

.close-drey {
  filter:
    drop-shadow(14px 18px 0 rgba(255, 95, 183, .4))
    drop-shadow(28px 30px 0 rgba(39, 29, 25, .12));
  animation: heroBob 2.2s ease-in-out infinite alternate;
}

.deck-nav {
  z-index: 24;
  left: auto;
  right: 20px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  flex-direction: column;
  border-width: 5px;
  background: rgba(255, 253, 244, .96);
  box-shadow: 0 9px 0 rgba(39, 29, 25, .16), 0 16px 34px rgba(39, 29, 25, .2);
}

.deck-nav button {
  background: linear-gradient(135deg, var(--ink), #7a1f16);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .24);
}

.dots {
  flex-direction: column;
}

.stage-pop,
.cursor-chip {
  position: fixed;
  z-index: 18;
  pointer-events: none;
}

.stage-pop {
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  background: var(--pop-color);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(39, 29, 25, .15);
  animation: stagePop .86s cubic-bezier(.18, .9, .32, 1) forwards;
}

.stage-pop.star {
  clip-path: polygon(50% 0, 61% 34%, 97% 34%, 68% 55%, 79% 91%, 50% 69%, 21% 91%, 32% 55%, 3% 34%, 39% 34%);
}

.stage-pop.dot {
  border-radius: 50%;
}

.stage-pop.chiplet {
  width: 38px;
  height: 24px;
  border-radius: 56% 44% 62% 38% / 44% 58% 42% 56%;
  background:
    repeating-linear-gradient(16deg, rgba(138, 82, 13, .2) 0 3px, transparent 3px 8px),
    var(--pop-color);
}

@keyframes stagePop {
  0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.3); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--spin)) scale(1.22); }
}

.cursor-chip {
  width: 24px;
  height: 15px;
  border: 2px solid rgba(39, 29, 25, .72);
  border-radius: 56% 44% 62% 38% / 44% 58% 42% 56%;
  background:
    repeating-linear-gradient(16deg, rgba(138, 82, 13, .2) 0 2px, transparent 2px 6px),
    #ffc83d;
  transform: translate(-50%, -50%);
  animation: trailChip .7s ease-out forwards;
}

@keyframes trailChip {
  to {
    opacity: 0;
    transform: translate(calc(-50% + var(--drift-x)), calc(-50% + var(--drift-y))) rotate(80deg) scale(.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .snack-marquee-track,
  .cameo,
  .close-drey,
  .character-spotlight img,
  .slide::before,
  .slide::after {
    animation: none !important;
  }
}

@media (max-width: 900px) {
  body { overflow: auto; }
  .deck { min-height: 100vh; height: auto; }
  .slide {
    min-height: 100vh;
    position: relative;
    padding-bottom: 92px;
  }
  .slide:not(.slide-open) {
    padding-right: clamp(20px, 4vw, 56px);
  }
  .slide:not(.active) { display: none; }
  .split,
  .world-grid,
  .versus,
  .proof-layout,
  .bible-layout,
  .character-bible,
  .source-layout,
  .close-stage {
    grid-template-columns: 1fr;
  }
  .package-grid,
  .episode-board,
  .art-strip,
  .source-pages {
    grid-template-columns: 1fr;
  }
  .package-grid,
  .bible-layout,
  .character-bible,
  .episode-board,
  .art-strip {
    max-width: 94vw;
  }
  .episode-board {
    width: min(1180px, 94vw);
  }
  .bible-panel,
  .profile-detail {
    max-height: none;
  }
  .profile-list {
    grid-template-columns: 1fr;
    max-height: none;
  }
  .character-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
  .character { height: 190px; }
  .team { min-height: 36vh; }
  .vs-core { margin: 0 auto; }
  .comic-strip {
    position: static;
    width: min(64vw, 240px);
    margin: 20px auto 0;
  }
  .open-copy {
    position: relative;
    left: auto;
    bottom: auto;
    max-width: 92vw;
    padding-top: 48vh;
    text-align: center;
  }
  .slide-open h1 {
    font-size: clamp(2.75rem, 12vw, 3.15rem);
  }
  .chip-bag {
    position: absolute;
    top: 11vh;
    justify-self: center;
    margin-right: 0;
    width: min(78vw, 320px);
    min-width: 0;
  }
  .deck-nav {
    left: 50%;
    right: auto;
    top: auto;
    bottom: 18px;
    transform: translateX(-50%);
    flex-direction: row;
    width: calc(100vw - 20px);
    justify-content: center;
    gap: 6px;
    padding: 7px;
  }
  .deck-nav button {
    width: 36px;
    height: 36px;
  }
  .dots {
    flex-direction: row;
    gap: 4px;
  }
  .dots button {
    width: 9px;
    height: 9px;
    border-width: 1px;
  }

  html,
  body,
  .deck {
    overflow-x: hidden;
  }

  .deck::before {
    inset: 6px;
    border-width: 4px;
    border-radius: 16px;
    box-shadow:
      inset 0 0 0 3px rgba(255, 246, 221, .74),
      0 8px 0 rgba(39, 29, 25, .12);
  }

  .deck::after,
  .cartoon-cameos,
  .character-spotlight,
  .stage-pop,
  .cursor-chip {
    display: none;
  }

  .snack-marquee {
    top: 8px;
    height: 32px;
    border-block-width: 3px;
  }

  .snack-marquee-track {
    gap: 18px;
  }

  .snack-marquee span {
    font-size: .78rem;
    text-shadow: 2px 2px 0 rgba(39, 29, 25, .88);
  }

  .slide {
    align-content: start;
    gap: 16px;
    padding: 58px 16px 92px;
    overflow: visible;
  }

  .slide:not(.slide-open) {
    padding: 58px 16px 92px;
  }

  .slide > * {
    max-width: 100%;
  }

  h2,
  .slide:not(.slide-open) .copy:not(.centered) h2,
  .slide-characters .copy.centered h2,
  .slide-bible .copy h2 {
    font-size: clamp(2rem, 9.4vw, 3.25rem) !important;
    line-height: .92;
    text-shadow:
      2px 2px 0 #fff6dd,
      4px 4px 0 rgba(255, 95, 183, .25);
  }

  p,
  .slide:not(.slide-open) .copy:not(.centered) p:not(.kicker),
  .episode-card p,
  .profile-detail p {
    font-size: clamp(.96rem, 4vw, 1.05rem);
    line-height: 1.38;
  }

  .kicker {
    min-height: 30px;
    padding: 4px 9px;
    font-size: .78rem;
    border-width: 3px !important;
  }

  .slide:not(.slide-open) .copy:not(.centered),
  .slide-video .copy.centered {
    padding: 14px !important;
    border-width: 5px;
    border-radius: 18px;
    transform: none;
    box-shadow: 7px 7px 0 rgba(39, 29, 25, .15);
  }

  .slide-hook .copy {
    max-height: none;
    overflow: visible;
  }

  .slide-hook .art-panel,
  .art-panel,
  .collage-wrap,
  .proof-layout .collage-wrap,
  .source-pages img,
  video {
    border-width: 5px;
    border-radius: 18px;
    transform: none;
    clip-path: none;
    box-shadow: 7px 7px 0 rgba(39, 29, 25, .15);
  }

  .metric-row,
  .final-tags {
    gap: 7px;
  }

  .metric-row span,
  .final-tags span,
  .inline-link {
    min-height: 34px;
    padding: 7px 10px;
    border-width: 3px;
    font-size: .88rem;
    transform: none;
  }

  .location-stack,
  .bible-tabs,
  .profile-list {
    transform: none;
    padding: 10px;
    border-width: 5px;
    border-radius: 18px;
    box-shadow: 7px 7px 0 rgba(39, 29, 25, .14);
  }

  .location,
  .bible-tab {
    min-height: 48px;
    border-width: 3px;
    border-radius: 12px;
  }

  .location-card,
  .character-detail,
  .engine-card,
  .bible-panel,
  .profile-detail {
    width: 100%;
    min-height: 0;
    max-height: none;
    padding: 16px;
    border-width: 5px;
    border-radius: 20px;
    transform: none;
    box-shadow: 8px 8px 0 rgba(39, 29, 25, .14);
  }

  .character-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-block: 8px;
    max-width: 100%;
  }

  .character,
  .character:nth-child(1),
  .character:nth-child(2),
  .character:nth-child(3),
  .character:nth-child(4),
  .character:nth-child(5),
  .character.active,
  .character.villain.active {
    height: 168px;
    transform: none;
    border-width: 4px;
    border-radius: 16px;
    box-shadow: 5px 5px 0 rgba(39, 29, 25, .14);
  }

  .character span {
    font-size: .9rem;
  }

  .team,
  .team.cold {
    min-height: 0;
    padding: 16px;
    border-width: 5px;
    border-radius: 20px;
    transform: none;
  }

  .team img {
    max-height: 28vh;
  }

  .vs-core {
    width: 92px;
    font-size: 2rem;
  }

  .engine {
    width: 100%;
    gap: 8px;
    padding: 12px;
    border-width: 5px;
    overflow-x: auto;
  }

  .engine button {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-width: 4px;
  }

  .comic-strip {
    display: none;
  }

  .package-grid,
  .episode-board,
  .art-strip {
    width: 100%;
    max-width: 100%;
    max-height: none;
    overflow: visible;
    gap: 12px;
    padding: 0 0 12px;
  }

  .package-grid div,
  .package-grid div:nth-child(1),
  .package-grid div:nth-child(2),
  .package-grid div:nth-child(3),
  .package-grid div:nth-child(4),
  .episode-card,
  .episode-card:nth-child(2),
  .episode-card:nth-child(3),
  .episode-card:nth-child(4),
  .episode-card:nth-child(5),
  .episode-card:nth-child(6),
  .hero-episode {
    grid-column: auto;
    grid-row: auto;
    padding: 14px;
    border-width: 5px;
    border-radius: 18px;
    transform: none;
  }

  .episode-board {
    grid-auto-rows: auto;
  }

  .profile-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .profile-card {
    grid-template-columns: 44px minmax(0, 1fr);
    min-height: 62px;
    border-width: 3px;
    border-radius: 12px;
    font-size: .88rem;
  }

  .profile-card img {
    width: 44px;
    height: 54px;
  }

  .art-strip {
    border-width: 5px;
    border-radius: 20px;
    background: rgba(255, 253, 244, .82);
  }

  .art-strip img {
    height: auto;
    min-height: 180px;
    max-height: 280px;
    border-width: 4px;
    transform: none !important;
  }

  .source-pages {
    transform: none;
  }

  video {
    width: 100%;
    max-height: 42vh;
  }

  .close-drey {
    max-height: 42vh;
  }

  .dots {
    max-width: calc(100vw - 112px);
    overflow-x: auto;
    padding: 2px;
    scrollbar-width: none;
  }

  .dots::-webkit-scrollbar {
    display: none;
  }

  .dots button {
    flex: 0 0 auto;
  }
}

@media (max-width: 480px) {
  .slide {
    padding-inline: 14px;
  }

  .profile-list {
    grid-template-columns: 1fr;
  }

  .character {
    height: 156px !important;
  }

  .deck-nav {
    bottom: 8px;
    width: calc(100vw - 12px);
  }
}