/* ============================================================
   E40 ANIMATION ENGINE — camera rig, transitions, Season 2 sets,
   emotional FX. Loaded after style.css (shared base assets).
   ============================================================ */

/* ---------- camera & transitions ---------- */
.cam { transform-origin: 50% 45%; }
.dip {
  position: absolute; inset: 0; z-index: 30; pointer-events: none;
  background: #000; opacity: 0; transition: opacity .45s ease;
}
.dip.on { opacity: 1; }

/* depth of field / rack focus: scenes tag layers, camera swaps focus */
.layer-far, .layer-near, .layer-mid { transition: filter .9s ease, opacity .9s ease; }
.focus-near .layer-far  { filter: blur(5px) brightness(.8); }
.focus-near .layer-near { filter: none; }
.focus-far  .layer-near { filter: blur(5px) brightness(.85); }
.focus-far  .layer-far  { filter: none; }

/* heartbeat overlay (emotional scenes) */
.heart-pulse {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: radial-gradient(100% 90% at 50% 55%, transparent 50%, rgba(236, 72, 153, .28) 100%);
  transition: opacity 1s ease;
}
.heart-pulse.on { opacity: 1; animation: heartThrob 1.15s ease-in-out infinite; }
@keyframes heartThrob { 0%, 100% { opacity: .35; } 12% { opacity: 1; } 26% { opacity: .5; } 38% { opacity: .9; } }

/* ---------- episode select overlay ---------- */
.ep-buttons { display: flex; flex-direction: column; gap: 1.8cqh; margin-top: 2.4cqh; width: 100%; }
.ep-btn {
  padding: 2cqh 6cqw; border: .5cqw solid rgba(251, 146, 60, .45); border-radius: 4cqw;
  background: rgba(251, 146, 60, .1); color: #ffd9b5; cursor: pointer;
  font-size: 3.9cqw; font-weight: 800; letter-spacing: .04em;
  display: flex; flex-direction: column; gap: .5cqh; align-items: center;
  transition: transform .15s ease, background .3s ease;
}
.ep-btn:active { transform: scale(.95); }
.ep-btn small { font-size: 2.8cqw; font-weight: 600; color: #93a4d8; letter-spacing: .12em; }
.ep-btn.primary { background: linear-gradient(145deg, #fb923c, #ea580c); color: #24120a; border: none; box-shadow: 0 1.4cqh 4cqh rgba(249, 115, 22, .35); }
.ep-btn.primary small { color: rgba(36, 18, 10, .7); }
.series-link {
  display: inline-block; margin-top: 1cqh; padding: 1.4cqh 6cqw;
  border: .4cqw solid rgba(147, 164, 216, .45); border-radius: 5cqw;
  color: #bcc9f2; font-size: 3.4cqw; font-weight: 700; letter-spacing: .08em;
  text-decoration: none; background: rgba(147, 164, 216, .08);
  font-family: inherit; cursor: pointer;
}
.series-link:active { transform: scale(.95); }
.series-link.end-series { margin-top: 3.4cqh; animation: capIn 1s ease both 1.9s; opacity: 0; }

/* ---------- season-grouped episode card menu ---------- */
.season-block { width: 100%; text-align: left; }
.season-block + .season-block { margin-top: 2.6cqh; }
.season-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 3.4cqw; font-weight: 900; letter-spacing: .3em; color: #93a4d8;
  margin: 0 0 1.2cqh;
}
.season-head span { font-size: 2.5cqw; letter-spacing: .12em; color: rgba(147, 164, 216, .6); font-weight: 700; }
.ep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw; }
.ep-card {
  text-align: left; padding: 1.5cqh 3.4cqw; border-radius: 3cqw;
  border: .4cqw solid rgba(251, 146, 60, .38); background: rgba(251, 146, 60, .09);
  color: #ffd9b5; font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: .5cqh;
  opacity: 0; transform: translateY(2cqh);
  animation: cardIn .55s cubic-bezier(.2, 1.2, .4, 1) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
  transition: transform .15s ease, background .3s ease;
}
.ep-card:active { transform: scale(.95); }
.ec-num { font-size: 2.4cqw; font-weight: 800; letter-spacing: .22em; color: var(--orange); }
.ec-name { font-size: 3.8cqw; font-weight: 900; color: #fff; letter-spacing: .03em; }
.ep-card small { font-size: 2.5cqw; color: #93a4d8; line-height: 1.45; font-weight: 600; }
@keyframes cardIn { to { opacity: 1; transform: none; } }
.season-note { margin-top: 1.2cqh; font-size: 2.7cqw; color: rgba(147, 164, 216, .75); font-style: italic; }
.ep-buttons.pulse { animation: menuPulse .8s ease; }
@keyframes menuPulse { 30% { transform: scale(1.02); } }

/* ---------- generic built scenes ---------- */
.sc-title { background: radial-gradient(130% 110% at 50% -10%, #1b2347 0%, #090d1e 55%, #04060f 100%); }
.sc-title .cam { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqh; }
.tc-kicker { font-size: 3.8cqw; font-weight: 800; letter-spacing: .4em; color: #c3cdf0; text-shadow: 0 .3cqh 1.8cqh rgba(0,0,0,.85); text-align: center;
  max-width: 90cqw; line-height: 1.35; text-wrap: balance; opacity: 0; animation: capIn 1.2s ease forwards .3s; }
.tc-title { font-size: 13cqw; font-weight: 900; letter-spacing: .06em; text-align: center; line-height: 1.1; opacity: 0; animation: stampIn .8s cubic-bezier(.2, 1.3, .4, 1) forwards .9s; }
.tc-title.accent { color: var(--orange); }
.tc-sub { font-size: 3.6cqw; color: #c3cdf0; text-shadow: 0 .3cqh 1.6cqh rgba(0,0,0,.8); letter-spacing: .12em; text-align: center;
  max-width: 90cqw; line-height: 1.4; text-wrap: balance; opacity: 0; animation: capIn 1.2s ease forwards 1.7s; }
.tc-rule { width: 0; height: .5cqh; background: var(--orange); animation: ruleGrow 1s ease forwards 1.4s; }
@keyframes ruleGrow { to { width: 28cqw; } }

.sc-redflag { background: radial-gradient(120% 100% at 50% 0%, #7f1d1d 0%, #450a0a 55%, #1c0505 100%); }
.sc-redflag .cam { display: flex; flex-direction: column; align-items: center; padding-top: 10cqh; }
.sc-challenge { background: radial-gradient(120% 100% at 50% 0%, #134e4a 0%, #042f2e 60%, #021716 100%); }
.sc-challenge .cam { display: flex; flex-direction: column; align-items: center; padding-top: 12cqh; }
.sc-end { background: radial-gradient(130% 110% at 50% -10%, #1b2347 0%, #090d1e 55%, #04060f 100%); }
.sc-end .cam { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqh; }
.end-buttons { display: flex; gap: 3cqw; margin-top: 4cqh; }
.eps-btn {
  padding: 2cqh 6cqw; border: .5cqw solid rgba(147, 164, 216, .45); border-radius: 5cqw;
  background: rgba(147, 164, 216, .1); color: #dbe2ff; font-size: 4cqw; font-weight: 800; cursor: pointer;
  animation: capIn 1s ease both 1.9s; opacity: 0;
}
.eps-btn:active, .replay-btn:active { transform: scale(.94); }
.rf-note-sm { margin-top: 3cqh; text-align: center; font-size: 3.3cqw; line-height: 1.65; color: #fecaca; padding: 0 8cqw; opacity: 0; animation: capIn 1s ease forwards 3.6s; }

/* ============================================================
   SEASON 2 SETS
   ============================================================ */

/* ---------- school hallway ---------- */
.sc-hallway { background: linear-gradient(180deg, #e7e0d1 0%, #d6ccb8 55%, #8a7f6a 56%, #6e6353 100%); }
.hall-wall { position: absolute; inset: 0 0 42cqh 0; }
.hall-lockers { position: absolute; bottom: 0; left: 0; right: 0; height: 34cqh;
  background: repeating-linear-gradient(90deg, #3b82a0 0 11cqw, #34718c 11cqw 11.6cqw); }
.hall-lockers::after { content: ""; position: absolute; top: 34%; left: 0; right: 0; height: .8cqh;
  background: repeating-linear-gradient(90deg, transparent 0 4cqw, rgba(255,255,255,.25) 4cqw 7cqw, transparent 7cqw 11.6cqw); }
.hall-floor { position: absolute; bottom: 0; left: 0; right: 0; height: 42cqh;
  background: linear-gradient(180deg, #b3a893 0%, #8f8470 100%); }
.hall-floor::before { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(100deg, transparent 0 9cqw, rgba(0,0,0,.07) 9cqw 9.6cqw); }
.hall-banner {
  position: absolute; top: 4cqh; left: 50%; transform: translateX(-50%) rotate(-1deg);
  padding: 1cqh 5cqw; background: #dc7b2d; color: #fff7ed; border-radius: 1cqw;
  font-size: 3cqw; font-weight: 800; letter-spacing: .1em;
  animation: bannerSway 4s ease-in-out infinite alternate;
}
@keyframes bannerSway { from { transform: translateX(-50%) rotate(-1.6deg); } to { transform: translateX(-50%) rotate(1.2deg); } }
.hall-lights { position: absolute; top: 0; left: 0; right: 0; height: 3cqh; display: flex; justify-content: space-evenly; }
.hall-lights i { width: 16cqw; height: 100%; background: #fffbe8; border-radius: 0 0 1.4cqw 1.4cqw; box-shadow: 0 2cqh 8cqh rgba(255, 251, 232, .5); animation: lampFlicker 5s ease-in-out infinite; }

/* walking students (silhouette puppets) */
.student { position: absolute; bottom: 18cqh; width: 10cqw; height: 26cqh; animation: walkAcross linear both; }
@keyframes walkAcross { from { left: 108%; } to { left: -16%; } }
.student.rev { animation-name: walkAcrossRev; }
@keyframes walkAcrossRev { from { left: -16%; } to { left: 108%; } }
.student .st-head { position: absolute; top: 0; left: 22%; width: 56%; height: 22%; border-radius: 45%; background: #4b3a2d; }
.student .st-body { position: absolute; top: 20%; left: 12%; width: 76%; height: 46%; border-radius: 2cqw 2cqw 1cqw 1cqw; }
.student .st-leg { position: absolute; top: 63%; width: 24%; height: 36%; border-radius: 1cqw; background: #313d52; transform-origin: top center; }
.student .st-leg.f { left: 22%; animation: legRun .5s ease-in-out infinite alternate; }
.student .st-leg.b { left: 52%; animation: legRun .5s ease-in-out infinite alternate-reverse; }
.student .st-bob { position: absolute; inset: 0; animation: walkBob .5s ease-in-out infinite alternate; }
@keyframes walkBob { from { transform: translateY(0); } to { transform: translateY(-1cqh); } }

/* madison clique — chatting group */
.clique { position: absolute; bottom: 18cqh; right: 8cqw; width: 34cqw; height: 28cqh; }
.clique .student { position: absolute; bottom: 0; animation: none; }
.clique .student.s1 { left: 0; } .clique .student.s2 { left: 12cqw; } .clique .student.s3 { left: 24cqw; }
.gab { position: absolute; display: flex; gap: .9cqw; padding: 1cqh 2.2cqw; background: #fff; border-radius: 3cqw; border-bottom-left-radius: .6cqw; animation: bubbleIn .5s ease both, gabFloat 2s ease-in-out infinite alternate .5s; }
@keyframes gabFloat { from { transform: translateY(0); } to { transform: translateY(-.9cqh); } }
.gab i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #64748b; animation: tdBounce 1s ease-in-out infinite; }
.gab i:nth-child(2) { animation-delay: .16s; } .gab i:nth-child(3) { animation-delay: .32s; }

/* Jaci walking alone */
.jaci-walk { position: absolute; bottom: 15cqh; left: 16cqw; width: 30cqw; z-index: 4; animation: walkBob .55s ease-in-out infinite alternate; }
.jaci-walk svg { width: 100%; height: auto; filter: drop-shadow(0 1.6cqh 2.4cqh rgba(0,0,0,.35)); }

/* narration cards */
.nar-card {
  position: absolute; left: 8cqw; right: 8cqw; z-index: 9;
  text-align: center; font-size: 4.8cqw; font-weight: 800; line-height: 1.55;
  color: #fff; text-shadow: 0 .6cqh 2.4cqh rgba(0,0,0,.85);
  opacity: 0;
}
.nar-card.dark { color: #1f2937; text-shadow: 0 .3cqh 1.6cqh rgba(255,255,255,.5); }
.nar-card.in { animation: narIn .9s ease forwards; }
.nar-card.out { animation: narOut .7s ease forwards; }
@keyframes narIn { from { opacity: 0; transform: translateY(2cqh); } to { opacity: 1; transform: none; } }
@keyframes narOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-1.6cqh); } }

/* ---------- Jaci's bedroom (night) ---------- */
.sc-jroom { background: linear-gradient(180deg, #241a33 0%, #150f22 60%, #0a0713 100%); transition: filter 2s ease; }
.sc-jroom.late { filter: brightness(.72) saturate(.85); }
.jr-window { position: absolute; top: 6cqh; right: 8cqw; width: 30cqw; height: 16cqh; border-radius: 1.6cqw; background: linear-gradient(180deg, #1e2a52, #131b38); border: .9cqw solid #35284e; overflow: hidden; }
.jr-window .moon { width: 6cqw; height: 6cqw; top: 20%; left: 18%; }
.jr-poster { position: absolute; top: 7cqh; left: 8cqw; padding: 1.8cqw 2.6cqw; border-radius: 1.2cqw; background: #35284e; color: #d8b4fe; font-weight: 900; font-size: 3.2cqw; letter-spacing: .1em; transform: rotate(-2deg); animation: posterSway 7s ease-in-out infinite alternate; }
.jr-bed { position: absolute; bottom: 0; left: 0; right: 0; height: 30cqh; background: linear-gradient(180deg, #4c3575 0%, #3b2a5c 40%, #2a1e42 100%); border-radius: 6cqw 6cqw 0 0; }
.jr-bed::before { content: ""; position: absolute; top: -4cqh; left: 6cqw; width: 26cqw; height: 9cqh; border-radius: 3cqw; background: #6d5aa8; }
.jr-lamp { position: absolute; bottom: 26cqh; right: 6cqw; width: 14cqw; height: 20cqh; }
.jr-lamp::before { content: ""; position: absolute; top: 0; left: 25%; width: 50%; height: 34%; background: #f6c37b; clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.jr-lamp::after { content: ""; position: absolute; top: 34%; left: 47%; width: 6%; height: 60%; background: #7a6a55; }
.jr-lampglow { position: absolute; bottom: 20cqh; right: 0; width: 46cqw; height: 40cqh; pointer-events: none;
  background: radial-gradient(50% 45% at 70% 45%, rgba(246, 195, 123, .3), transparent 70%);
  transition: opacity 2.5s ease; animation: lampFlicker 4.5s ease-in-out infinite; }
.sc-jroom.late .jr-lampglow { opacity: .35; }
.jaci-sit { position: absolute; bottom: 16cqh; left: 50%; width: 46cqw; transform: translateX(-50%); z-index: 3; }
.jaci-sit svg { width: 100%; height: auto; filter: drop-shadow(0 2cqh 3cqh rgba(0,0,0,.55)); }
.jr-phoneglow { position: absolute; bottom: 18cqh; left: 50%; transform: translateX(-50%); width: 40cqw; height: 26cqh; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 70%, rgba(150, 130, 255, .45), transparent 70%);
  animation: deviceGlow 2.4s ease-in-out infinite alternate; }
.jr-clock { position: absolute; top: 26cqh; left: 8cqw; font-family: "Courier New", monospace; font-size: 4.2cqw; color: #a78bfa; letter-spacing: .1em; }

/* ---------- Jaci character states (SVG classes) ---------- */
.kid .blush-l, .kid .blush-r { opacity: 0; transition: opacity 1s ease; }
.kid.blushing .blush-l, .kid.blushing .blush-r { opacity: .85; }
.kid .tear { opacity: 0; }
.kid.tearing .tear { animation: tearFall 2.6s ease-in infinite; }
.kid.tearing .tear.t2 { animation-delay: 1.2s; }
@keyframes tearFall {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  12% { opacity: .95; transform: translateY(2px) scale(1); }
  80% { opacity: .9; transform: translateY(26px) scale(1); }
  100% { opacity: 0; transform: translateY(34px) scale(.8); }
}
.kid .bust { transform-origin: 50% 100%; }
.kid.breathing .bust { animation: breathe 1.1s ease-in-out infinite alternate; }
@keyframes breathe { from { transform: scaleY(1); } to { transform: scaleY(1.035) translateY(-1px); } }
.kid.shaky .hand-l, .kid.shaky .hand-r { animation: handShake .12s linear infinite alternate !important; }
@keyframes handShake { from { transform: translate(-.8px, 0) rotate(-2deg); } to { transform: translate(.8px, -.6px) rotate(2deg); } }
.kid.look-away .pupils { animation: none; transform: translate(-3.4px, 2px); transition: transform .7s ease; }

/* ---------- Sparkr filter / profile screen ---------- */
.sc-filter { background: radial-gradient(120% 110% at 50% 0%, #3b0f2e 0%, #1d0917 60%, #0d040b 100%); }
.big-phone { position: absolute; left: 50%; top: 7cqh; transform: translateX(-50%); width: 74cqw; }
.big-phone .phone-body { border-color: #52224a; }
.big-phone .phone-screen { height: 74cqh; background: linear-gradient(180deg, #2a1226, #170a15); }
.spk-head { display: flex; align-items: center; gap: 2cqw; padding: 2.4cqh 5cqw 1cqh; font-weight: 900; font-size: 5cqw; color: #f9a8d4; }
.spk-head .spk-flame { font-size: 5.4cqw; animation: flameFlick .5s ease-in-out infinite alternate; }
@keyframes flameFlick { from { transform: scale(1) rotate(-3deg); } to { transform: scale(1.12) rotate(3deg); } }
.selfie-wrap { position: relative; width: 40cqw; height: 40cqw; margin: 1.6cqh auto 0; border-radius: 50%; overflow: hidden; border: 1cqw solid #ec4899; background: radial-gradient(circle at 50% 32%, #3d2a55, #1c1230); }
.selfie-wrap svg { width: 135%; margin-left: -17%; margin-top: 4%; }
.scan-line { position: absolute; left: 0; right: 0; height: 14%; top: -20%;
  background: linear-gradient(180deg, transparent, rgba(236, 72, 153, .55), transparent); }
.scan-line.go { animation: scanSweep 1.6s ease-in-out 2; }
@keyframes scanSweep { 0% { top: -20%; } 100% { top: 110%; } }
.filter-label { text-align: center; margin-top: 1.4cqh; font-family: "Courier New", monospace; font-size: 3.2cqw; color: #f9a8d4; letter-spacing: .2em; }
.filter-label .dots::after { content: ""; animation: loadDots 1.2s steps(4) infinite; }
@keyframes loadDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.age-roll { display: flex; justify-content: center; align-items: baseline; gap: 2cqw; margin-top: 1.2cqh; font-weight: 900; }
.age-roll .age-label { font-size: 3cqw; color: #d8b4fe; letter-spacing: .2em; }
.age-roll .age-num { font-size: 8cqw; color: #fff; min-width: 14cqw; text-align: center; }
.age-roll .age-num.rolling { animation: numFlash .12s linear infinite; }
@keyframes numFlash { 50% { color: #f9a8d4; transform: translateY(-.4cqh); } }
.age-roll .age-num.lie { color: #f43f5e; text-shadow: 0 0 3cqw rgba(244, 63, 94, .8); }
.prof-rows { margin: 1.6cqh 6cqw 0; display: flex; flex-direction: column; gap: 1.2cqh; }
.prof-row { display: flex; justify-content: space-between; gap: 3cqw; padding: 1.2cqh 3.4cqw; border-radius: 2.4cqw; background: rgba(255,255,255,.06); border: .4cqw solid rgba(249, 168, 212, .25); font-size: 3.1cqw; opacity: 0; transform: translateX(-4cqw); }
.prof-row.in { animation: chipIn .5s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.prof-row .pr-k { color: #d8b4fe; letter-spacing: .14em; font-weight: 700; }
.prof-row .pr-v { color: #fff; font-weight: 800; }
.prof-row .pr-v.typed::after { content: "▌"; color: #ec4899; animation: caretBlink .7s steps(1) infinite; }
.live-tag { margin: 2cqh auto 0; width: fit-content; padding: 1cqh 5cqw; border-radius: 3cqw; background: #16a34a; font-weight: 900; font-size: 3.4cqw; letter-spacing: .16em; opacity: 0; }
.live-tag.in { animation: stampIn .55s cubic-bezier(.2, 1.4, .4, 1) forwards; }

/* ---------- match flood ---------- */
.sc-flood { background: radial-gradient(120% 110% at 50% 0%, #3b0f2e 0%, #14060f 65%, #090309 100%); }
.flood-counter { position: absolute; top: 9cqh; left: 0; right: 0; text-align: center; z-index: 6; }
.flood-counter b { display: block; font-size: 13cqw; font-weight: 900; color: #f9a8d4; text-shadow: 0 0 6cqw rgba(236, 72, 153, .6); }
.flood-counter span { font-size: 3.4cqw; letter-spacing: .22em; color: #d8b4fe; }
.match-card {
  position: absolute; top: -14cqh; width: 38cqw; padding: 1.6cqh 3cqw; border-radius: 3cqw; z-index: 4;
  background: rgba(255, 255, 255, .96); color: #1f2937; font-size: 2.9cqw; font-weight: 700;
  display: flex; align-items: center; gap: 2cqw;
  animation: matchFall linear forwards;
  box-shadow: 0 1.4cqh 3cqh rgba(0,0,0,.4);
}
.match-card .mc-av { width: 7cqw; height: 7cqw; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 3.6cqw; background: #cbd5e1; }
.match-card small { display: block; color: #64748b; font-weight: 600; }
@keyframes matchFall { from { transform: translateY(0) rotate(var(--rot, 2deg)); } to { transform: translateY(140cqh) rotate(var(--rot, 2deg)); } }
.flood-phone { position: absolute; bottom: 7cqh; left: 50%; transform: translateX(-50%); width: 34cqw; z-index: 6; }
.flood-phone .phone-screen { height: 26cqh; display: flex; align-items: center; justify-content: center; font-size: 12cqw; background: linear-gradient(180deg, #2a1226, #170a15); }
.flood-phone.buzzing .phone-body { animation: vibrate .09s linear infinite; }

/* ---------- Sparkr chat skin ---------- */
.skin-sparkr .chat-head { color: rgba(249, 168, 212, .8); }
.skin-sparkr .chat-head .who { color: #f472b6; }
.skin-sparkr .chat-head .dot { background: #f472b6; }
.skin-sparkr .bubble.them { background: #3f1d38; color: #fce7f3; }
.skin-sparkr .bubble.them .b-who { color: #f9a8d4; }
.skin-sparkr .bubble.me { background: linear-gradient(145deg, #ec4899, #be185d); color: #fff; }
.skin-sparkr .typing-row { background: #3f1d38; }
.skin-sparkr .composer .caret { background: #f472b6; }
.skin-sparkr .composer .send { color: #f472b6; }
.skin-sparkr .key.flash { background: #ec4899; color: #fff; }
.chat-roombg-night {
  position: absolute; inset: 0; opacity: .5; filter: blur(3px) saturate(.8);
  background: linear-gradient(180deg, #241a33 0%, #150f22 60%, #0a0713 100%);
}
.late-cap { position: absolute; z-index: 9; left: 8cqw; right: 8cqw; bottom: 8cqh; text-align: center;
  font-size: 4.2cqw; font-weight: 700; font-style: italic; color: #d8b4fe; text-shadow: 0 .5cqh 2cqh rgba(0,0,0,.9);
  opacity: 0; animation: capRise 1.4s ease forwards; }

/* ---------- counselor's office (engine set) ---------- */
.sc-counselor { background: linear-gradient(180deg, #f3e8d7 0%, #e5d5bd 60%, #9c8563 61%, #7c6a50 100%); }
.co-desk { position: absolute; bottom: 12cqh; left: 10cqw; right: 10cqw; height: 16cqh; border-radius: 2cqw 2cqw 0 0; background: #8b5e34; }
.co-plant { position: absolute; bottom: 38cqh; right: 8cqw; width: 10cqw; height: 16cqh; }
.co-plant::before { content: "🪴"; font-size: 10cqw; position: absolute; bottom: 0; animation: posterSway 5s ease-in-out infinite alternate; display: block; }
.co-poster { position: absolute; top: 8cqh; left: 10cqw; padding: 1.6cqw 2.6cqw; background: #fff; color: #334155; border-radius: 1cqw; font-size: 2.7cqw; font-weight: 800; transform: rotate(-1.5deg); animation: posterSway 6s ease-in-out infinite alternate; }

/* ---------- police office (engine set) ---------- */
.sc-police { background: linear-gradient(180deg, #0c1a2e 0%, #081221 60%, #04080f 100%); }
.po-window { position: absolute; top: 5cqh; left: 8cqw; width: 36cqw; height: 15cqh; border-radius: 1.4cqw; background: linear-gradient(180deg, #12233d, #0a1526); border: .8cqw solid #1d3450; overflow: hidden; }
.po-blinds { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 1.6cqh, rgba(148, 163, 184, .18) 1.6cqh 2.2cqh); }
.po-badge { position: absolute; top: 6cqh; right: 9cqw; font-size: 8cqw; animation: posterSway 5s ease-in-out infinite alternate; }
.po-desk { position: absolute; bottom: 0; left: 0; right: 0; height: 34cqh; background: linear-gradient(180deg, #24344d 0%, #16233a 100%); border-radius: 5cqw 5cqw 0 0; }
.po-monitor { position: absolute; bottom: 26cqh; left: 12cqw; width: 36cqw; height: 22cqh; border-radius: 1.6cqw; background: #020617; border: 1cqw solid #334155; overflow: hidden; }
.po-screen { position: absolute; inset: 1cqw; background: #071427; font-family: "Courier New", monospace; font-size: 2.5cqw; color: #7dd3fc; padding: 1cqh 2cqw; line-height: 1.7; }
.po-screen.flashing { animation: screenFlash 1s steps(2) infinite; }
@keyframes screenFlash { 0% { background: #071427; } 50% { background: #12325a; box-shadow: inset 0 0 6cqw rgba(56, 189, 248, .5); } }
.po-alert { color: #f87171; font-weight: 800; animation: dotPulse 1s ease-in-out infinite; }
.po-lightbar { position: absolute; top: 0; left: 0; right: 0; height: 1.4cqh; opacity: .5;
  background: linear-gradient(90deg, #ef4444 0 50%, #3b82f6 50% 100%); background-size: 60cqw 100%;
  animation: lightbarSweep 1.4s linear infinite; }
@keyframes lightbarSweep { from { background-position: 0 0; } to { background-position: 60cqw 0; } }

/* evidence folder */
.folder { position: absolute; bottom: 6cqh; right: 8cqw; width: 34cqw; height: 20cqh; z-index: 5; perspective: 60cqw; }
.folder .f-back { position: absolute; inset: 0; border-radius: 1.6cqw; background: #b48a3c; }
.folder .f-paper { position: absolute; inset: 1.4cqh 2cqw; border-radius: .8cqw; background: #f8fafc; color: #0f172a;
  font-family: "Courier New", monospace; font-size: 2.2cqw; padding: 1cqh 2cqw; line-height: 1.6;
  transform: translateY(0); transition: transform 1.2s ease .5s; }
.folder.open .f-paper { transform: translateY(-5cqh) rotate(-2deg); }
.folder .f-paper b { color: #dc2626; }
.folder .f-front { position: absolute; inset: 0; top: 30%; border-radius: 1.6cqw; background: #d3a24a; transform-origin: bottom center; transition: transform 1.1s cubic-bezier(.3, 0, .2, 1) .2s; }
.folder .f-tab { position: absolute; top: -2.4cqh; left: 6%; padding: .5cqh 3cqw; border-radius: 1cqw 1cqw 0 0; background: #d3a24a; font-size: 2.2cqw; font-weight: 900; color: #5c3d0d; letter-spacing: .14em; }
.folder.open .f-front { transform: rotateX(-52deg); }

/* ---------- fort-building world (S1E2) ---------- */
.sc-build { background: linear-gradient(180deg, #60a5fa 0%, #93c5fd 46%, #86efac 47%, #16a34a 100%); }
.bw-sky { position: absolute; inset: 0 0 45cqh 0; }
.bw-hud {
  position: absolute; top: 2.4cqh; left: 3cqw; z-index: 6;
  padding: 1cqh 3cqw; border-radius: 2.6cqw; background: rgba(8, 12, 26, .78);
  border: .4cqw solid rgba(255, 255, 255, .25);
  font-family: "Courier New", monospace; font-size: 3cqw; display: flex; gap: 3cqw; color: #e2e8f0;
}
.bw-hud span { color: var(--orange); font-weight: 800; }
.bw-ground { position: absolute; bottom: 0; left: 0; right: 0; height: 34cqh; background: linear-gradient(180deg, #4d7c0f 0%, #3f6212 100%); }
.bw-ground::before {
  content: ""; position: absolute; inset: 0; opacity: .3;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 .4cqw, transparent .4cqw 8cqw),
    repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 .4cqw, transparent .4cqw 8cqw);
}
.bw-block {
  position: absolute; width: 8cqw; height: 8cqw; border-radius: 1.2cqw; z-index: 3;
  box-shadow: inset 0 -1.4cqw rgba(0, 0, 0, .28), inset 0 .8cqw rgba(255, 255, 255, .25);
}
.bw-block.drop { animation: bwDrop .5s cubic-bezier(.3, 1.4, .4, 1) both; }
@keyframes bwDrop { from { transform: translateY(-46cqh); } to { transform: none; } }
.bw-avatar { left: 16cqw; bottom: 30cqh; }
.bw-tag { left: 16cqw; bottom: 56cqh; }
.bw-say {
  position: absolute; z-index: 7; left: 27cqw; bottom: 57cqh;
  padding: 1cqh 3cqw; background: #fff; color: #1f2937;
  border-radius: 3cqw; border-bottom-left-radius: .6cqw;
  font-size: 3.2cqw; font-weight: 700; animation: bubbleIn .5s ease both;
}

/* ---------- predator dossier (S1E4 / S1E7) ---------- */
.sc-dossier { background: radial-gradient(120% 100% at 50% 0%, #16202c 0%, #0a1118 60%, #05080c 100%); }
.sc-dossier .cam { display: flex; align-items: center; justify-content: center; }
.dossier {
  width: 80cqw; border-radius: 2cqw; background: #0d151d; border: .5cqw solid #22313f;
  padding: 2.6cqh 4.5cqw 3.2cqh; font-family: "Courier New", monospace;
  box-shadow: 0 2cqh 6cqh rgba(0, 0, 0, .6); position: relative;
}
.do-head { display: flex; align-items: center; gap: 2cqw; font-size: 3cqw; letter-spacing: .22em; color: #7dd3fc; margin-bottom: 1.4cqh; font-weight: 800; }
.do-dot { width: 2cqw; height: 2cqw; border-radius: 50%; background: #38bdf8; animation: dotPulse 1.4s ease-in-out infinite; }
.do-row {
  display: flex; justify-content: space-between; gap: 3cqw; padding: 1.3cqh 0;
  border-bottom: .2cqw dashed rgba(125, 211, 252, .22); font-size: 3.1cqw;
  opacity: 0; transform: translateX(-3cqw); transition: opacity .4s ease, transform .4s ease;
}
.do-row.in { opacity: 1; transform: none; }
.do-k { color: #64748b; letter-spacing: .14em; white-space: nowrap; }
.do-v { color: #e2e8f0; font-weight: 700; text-align: right; }
.do-stamp {
  position: absolute; right: 3cqw; bottom: -3.2cqh; padding: .8cqh 3cqw;
  border: .6cqw solid #dc2626; color: #f87171; font-weight: 900; letter-spacing: .2em;
  font-size: 3cqw; border-radius: 1cqw; background: rgba(10, 5, 5, .78);
  transform: rotate(-6deg); opacity: 0;
}
.do-stamp.in { animation: stampIn .5s cubic-bezier(.2, 1.4, .4, 1) forwards; }

/* ---------- hidden calculator vault (S1E5) ---------- */
.sc-hiddenapp { background: radial-gradient(120% 110% at 50% 0%, #1f2937 0%, #0b1220 60%, #05070f 100%); }
.sc-hiddenapp .cam { display: flex; align-items: center; justify-content: center; }
.ha-screen { display: flex; flex-direction: column; background: #0b0f14; }
.ha-title { padding: 2.2cqh 5cqw 0; font-size: 4cqw; font-weight: 800; color: #cbd5e1; }
.ha-display {
  margin: 1.4cqh 5cqw 0; padding: 1.6cqh 3cqw; border-radius: 1.6cqw; background: #020617;
  color: #e2e8f0; text-align: right; font-size: 7cqw; font-family: "Courier New", monospace;
}
.ha-keys { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; padding: 2cqh 5cqw 3cqh; }
.ha-key {
  display: flex; align-items: center; justify-content: center; border-radius: 2cqw;
  background: #1e293b; color: #e2e8f0; font-size: 4.6cqw; font-weight: 700;
  transition: background .12s ease, color .12s ease;
}
.ha-key.flash { background: #38bdf8; color: #04121c; }
.ha-vault {
  position: absolute; inset: 0; background: #170b10; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2cqh;
  opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s;
}
.ha-vault.open { opacity: 1; visibility: visible; transition: opacity .8s ease; }
.hv-head { font-size: 4cqw; font-weight: 900; letter-spacing: .3em; color: #f87171; }
.hv-grid { display: grid; grid-template-columns: repeat(3, 15cqw); gap: 2cqw; }
.hv-grid i { height: 15cqw; border-radius: 1.6cqw; background: linear-gradient(145deg, #3f3f46, #27272a); position: relative; overflow: hidden; }
.hv-grid i::after { content: ""; position: absolute; inset: 0; background: rgba(20, 10, 14, .55); backdrop-filter: blur(4px); }
.hv-note { font-size: 2.9cqw; color: #fda4af; font-style: italic; }

/* ---------- narrowing map (S1E6) ---------- */
.sc-map { background: radial-gradient(130% 110% at 50% 0%, #10233c 0%, #071426 55%, #030a13 100%); }
.map-grid {
  position: absolute; inset: 0; opacity: .32;
  background:
    linear-gradient(rgba(56, 189, 248, .16) .3cqw, transparent .3cqw),
    linear-gradient(90deg, rgba(56, 189, 248, .16) .3cqw, transparent .3cqw);
  background-size: 10cqw 10cqw;
}
.map-state {
  position: absolute; top: 8cqh; left: 0; right: 0; text-align: center;
  font-size: 9cqw; font-weight: 900; letter-spacing: .4em; color: rgba(125, 211, 252, .45);
}
.map-ring {
  position: absolute; left: 50%; top: 55%; border: .6cqw solid rgba(248, 113, 113, .75);
  border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0;
}
.map-ring.in { animation: ringIn 1.1s ease forwards; }
@keyframes ringIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.map-ring.r1 { width: 82cqw; height: 82cqw; }
.map-ring.r2 { width: 48cqw; height: 48cqw; border-color: rgba(248, 113, 113, .85); }
.map-ring.r3 { width: 21cqw; height: 21cqw; border-color: #ef4444; box-shadow: 0 0 5cqw rgba(239, 68, 68, .55); }
.map-pin {
  position: absolute; left: 50%; top: 55%; width: 4.5cqw; height: 4.5cqw;
  border-radius: 50% 50% 50% 0; background: #ef4444; opacity: 0;
  transform: translate(-50%, -130%) rotate(-45deg);
}
.map-pin.in { animation: pinDrop .55s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes pinDrop {
  from { opacity: 1; transform: translate(-50%, -420%) rotate(-45deg); }
  to { opacity: 1; transform: translate(-50%, -130%) rotate(-45deg); }
}
.map-tags { position: absolute; left: 7cqw; top: 19cqh; display: flex; flex-direction: column; gap: 1.2cqh; z-index: 5; }
.map-tag {
  width: fit-content; padding: .9cqh 3cqw; border-radius: 2cqw;
  font-family: "Courier New", monospace; font-size: 3cqw; font-weight: 700;
  background: rgba(2, 6, 23, .82); border: .4cqw solid rgba(148, 163, 184, .4); color: #e2e8f0;
  opacity: 0; transform: translateX(-3cqw); transition: opacity .4s ease, transform .4s ease;
}
.map-tag.in { opacity: 1; transform: none; }
.map-tag.no { color: #94a3b8; text-decoration: line-through; }
.map-tag.hit { color: #fecaca; border-color: rgba(239, 68, 68, .6); }

/* ---------- classroom (S1E8) ---------- */
.sc-class { background: linear-gradient(180deg, #e9e2d0 0%, #dcd2ba 55%, #97876b 56%, #75664e 100%); }
.cl-wall { position: absolute; inset: 0 0 44cqh 0; }
.cl-board {
  position: absolute; top: 6cqh; left: 13cqw; right: 13cqw; height: 22cqh;
  border-radius: 1.6cqw; background: #14532d; border: 1.4cqw solid #7c5a34;
  display: flex; align-items: center; justify-content: center; padding: 0 3cqw;
}
.cl-board span { font-family: "Courier New", monospace; font-size: 4.4cqw; font-weight: 700; color: #f0fdf4; letter-spacing: .08em; text-align: center; }
.cl-clock { position: absolute; top: 2cqh; right: 6cqw; width: 7cqw; height: 7cqw; border-radius: 50%; background: #f8fafc; border: .6cqw solid #475569; }
.cl-clock::after { content: ""; position: absolute; left: 50%; top: 14%; width: .5cqw; height: 38%; background: #475569; transform-origin: bottom; transform: rotate(40deg); }
.cl-floor { position: absolute; bottom: 0; left: 0; right: 0; height: 44cqh; background: linear-gradient(180deg, #b3a488 0%, #8f8065 100%); }
.cl-desk { position: absolute; width: 20cqw; height: 11cqh; z-index: 3; }
.cl-desk::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 42%; border-radius: 1cqw; background: #a16207; box-shadow: inset 0 -.8cqw rgba(0, 0, 0, .25); }
.cl-desk::after { content: ""; position: absolute; top: 42%; left: 10%; width: 7%; height: 58%; background: #713f12; box-shadow: 15.5cqw 0 0 #713f12; }
.cl-desk.hot::before { outline: .7cqw solid #ef4444; outline-offset: .5cqw; }
.cl-teacher { position: absolute; bottom: 33cqh; left: 50%; transform: translateX(-50%); width: 16cqw; height: 30cqh; z-index: 2; opacity: 0; }
.cl-teacher.walk { opacity: 1; animation: teacherIn 2.8s ease both; }
@keyframes teacherIn { from { transform: translateX(-50%) translateX(48cqw); } to { transform: translateX(-50%); } }
.ct-head { position: absolute; top: 0; left: 28%; width: 44%; height: 21%; border-radius: 45%; background: #e8b48c; }
.ct-body { position: absolute; top: 19%; left: 8%; width: 84%; height: 62%; border-radius: 2.4cqw 2.4cqw 1cqw 1cqw; background: #334155; }
.cl-tag {
  position: absolute; z-index: 6; padding: .7cqh 2.6cqw; border-radius: 2cqw;
  background: rgba(127, 29, 29, .92); color: #fecaca; font-size: 2.7cqw; font-weight: 800;
  letter-spacing: .1em; opacity: 0;
}
.cl-tag.in { animation: stampIn .5s cubic-bezier(.2, 1.4, .4, 1) forwards; }

/* ---------- content warning (S1E8) ---------- */
.sc-warn { background: radial-gradient(120% 100% at 50% 0%, #1c0808 0%, #0d0404 60%, #050202 100%); }
.sc-warn .cam { display: flex; align-items: center; justify-content: center; }
.warn-card {
  width: 78cqw; border: .6cqw solid rgba(239, 68, 68, .7); border-radius: 2.4cqw;
  padding: 3.4cqh 5cqw; background: rgba(28, 8, 8, .6); text-align: center;
}
.wc-head { font-size: 4.6cqw; font-weight: 900; letter-spacing: .3em; color: #f87171; margin-bottom: 1.6cqh; animation: dotPulse 1.6s ease-in-out infinite; }
.warn-card p { font-size: 3.4cqw; line-height: 1.7; color: #fecaca; }

/* ---------- encrypted channel chat skin (S1E8) ---------- */
.chat-cryptbg {
  position: absolute; inset: 0; opacity: .3;
  background:
    repeating-linear-gradient(0deg, transparent 0 3cqh, rgba(74, 222, 128, .07) 3cqh 3.2cqh),
    radial-gradient(120% 100% at 50% 0%, #05140b 0%, #020a05 75%);
}
.chat-panel.skin-crypt { background: rgba(3, 12, 7, .9); border-color: rgba(74, 222, 128, .22); }
.skin-crypt .chat-head { color: rgba(134, 239, 172, .75); font-family: "Courier New", monospace; }
.skin-crypt .chat-head .who { color: #4ade80; }
.skin-crypt .bubble.them {
  background: #052e16; color: #dcfce7;
  border: .3cqw solid rgba(74, 222, 128, .28);
  font-family: "Courier New", monospace;
}
.skin-crypt .bubble.them .b-who { color: #4ade80; }
.skin-crypt .typing-row { background: #052e16; }

/* ---------- S2 E2–E8 additions ---------- */

/* in-person speech bubbles */
.say-bubble {
  position: absolute; z-index: 9; left: 8cqw; top: 16cqh; max-width: 68cqw;
  padding: 1.4cqh 4cqw; background: #fff; color: #1f2937;
  border-radius: 3.4cqw; border-bottom-left-radius: .7cqw;
  font-size: 3.6cqw; font-weight: 700; line-height: 1.5;
  box-shadow: 0 1.2cqh 3cqh rgba(0, 0, 0, .4);
  opacity: 0; transform: translateY(1.6cqh) scale(.94);
  transition: opacity .4s ease, transform .45s cubic-bezier(.2, 1.3, .4, 1);
}
.say-bubble.in { opacity: 1; transform: none; }
.say-bubble.gone { opacity: 0; transform: translateY(-1.4cqh); }
.say-bubble.right { left: auto; right: 8cqw; border-radius: 3.4cqw; border-bottom-right-radius: .7cqw; }
.say-bubble b {
  display: block; font-size: 2.5cqw; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: .4cqh; color: #f97316;
}
.say-bubble.amanda b { color: #c026d3; }
.say-bubble.agent b { color: #2563eb; }
.say-bubble.jaci b { color: #8b5cf6; }
.say-bubble.teach b { color: #0d9488; }
.say-bubble.mom b { color: #e11d48; }

/* Amanda in the hallway — faces Jaci from the right */
.amanda-walk { position: absolute; bottom: 15cqh; right: 12cqw; width: 30cqw; z-index: 4; }
.amanda-walk svg { width: 100%; height: auto; transform: scaleX(-1); filter: drop-shadow(0 1.6cqh 2.4cqh rgba(0, 0, 0, .35)); }

/* frozen hallway crowd (S2E6) */
.student.st-still { animation: none; }
.student.st-still .st-bob { animation: none; }
.student.st-still .st-leg { animation: none; }

/* narration montage scenes */
.sc-mont { background: radial-gradient(130% 110% at 50% -10%, #241530 0%, #120a1c 55%, #060310 100%); }

/* daytime chat backdrop (school lunch) */
.chat-roombg-day {
  position: absolute; inset: 0; opacity: .5; filter: blur(4px) saturate(.8);
  background: linear-gradient(180deg, #e9e2d0 0%, #dcd2ba 55%, #97876b 56%, #75664e 100%);
}

/* "Messages" chat skin (S2E8 — Amanda) */
.chat-panel.skin-msgs { background: rgba(12, 8, 16, .92); border-color: rgba(232, 121, 249, .25); }
.skin-msgs .chat-head { color: rgba(203, 213, 225, .8); }
.skin-msgs .chat-head .dot { background: #e879f9; }
.skin-msgs .chat-head .who { color: #e879f9; }
.skin-msgs .bubble.them { background: #3b1240; color: #fae8ff; }
.skin-msgs .bubble.them .b-who { color: #e879f9; }
.skin-msgs .bubble.me { background: linear-gradient(145deg, #10b981, #047857); color: #fff; }
.skin-msgs .bubble.me .b-who { color: #a7f3d0; }
.skin-msgs .typing-row { background: #3b1240; }
.skin-msgs .composer .caret { background: #e879f9; }
.skin-msgs .composer .send { color: #e879f9; }
.skin-msgs .key.flash { background: #c026d3; color: #fff; }

/* "The Gab" video-spread phone (S2E6) */
.sc-gab { background: radial-gradient(120% 110% at 50% 0%, #10312e 0%, #071716 60%, #030b0a 100%); }
.sc-gab .cam { display: flex; align-items: center; justify-content: center; }
.gab-phone .phone-body { border-color: #134e4a; }
.gab-phone .phone-screen { background: linear-gradient(180deg, #0a1f1d, #04100f); }
.gab-head { display: flex; align-items: center; gap: 2cqw; padding: 2.2cqh 5cqw 0; font-weight: 900; font-size: 4.6cqw; color: #5eead4; }
.gab-mark { color: #2dd4bf; }
.gab-video {
  position: relative; margin: 1.6cqh 5cqw 0; height: 26cqh; border-radius: 2.4cqw;
  overflow: hidden; background: #020a09; border: .4cqw solid rgba(94, 234, 212, .25);
}
.gv-blur { position: absolute; inset: 0; background: radial-gradient(42% 46% at 50% 42%, #7c5a4a 0%, #241a1c 72%); filter: blur(14px) saturate(.7); }
.gv-pix {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 2cqh, transparent 2cqh 4cqh),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 2cqw, transparent 2cqw 4cqw);
}
.gv-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 12cqw; height: 12cqw; border-radius: 50%; background: rgba(2, 10, 9, .72);
  border: .5cqw solid rgba(94, 234, 212, .7); display: flex; align-items: center; justify-content: center;
  color: #5eead4; font-size: 4.6cqw; padding-left: .8cqw;
}
.gv-name { position: absolute; left: 3cqw; bottom: 1.2cqh; font-size: 3cqw; font-weight: 800; color: #ccfbf1; text-shadow: 0 .4cqh 1.4cqh rgba(0, 0, 0, .85); }
.gv-fake {
  position: absolute; right: 2cqw; top: 1.4cqh; padding: .6cqh 2.4cqw;
  border: .5cqw solid #f43f5e; border-radius: 1cqw; color: #fda4af;
  font-weight: 900; font-size: 2.6cqw; letter-spacing: .18em;
  transform: rotate(6deg); opacity: 0; background: rgba(20, 4, 8, .72);
}
.gv-fake.in { animation: stampIn .5s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.gab-stats { display: flex; justify-content: space-between; margin: 1.4cqh 6cqw 0; font-family: "Courier New", monospace; font-size: 3.2cqw; color: #5eead4; }
.gab-stats b { color: #fff; }
.gab-row { margin: 1.4cqh 5cqw 0; display: flex; flex-direction: column; gap: 1cqh; }
.gab-repost {
  padding: 1cqh 3cqw; border-radius: 2cqw; background: rgba(94, 234, 212, .07);
  border: .3cqw solid rgba(94, 234, 212, .2); font-size: 2.9cqw; color: #99f6e4;
  opacity: 0; transform: translateX(-4cqw); transition: opacity .4s ease, transform .4s ease;
}
.gab-repost.in { opacity: 1; transform: none; }

/* flashback treatment (S2E8) */
.flash-tag {
  position: absolute; top: 3cqh; left: 4cqw; z-index: 9; padding: .8cqh 3cqw;
  border-radius: 2.4cqw; background: rgba(2, 6, 23, .74); border: .4cqw solid rgba(232, 121, 249, .5);
  color: #f0abfc; font-size: 2.8cqw; font-weight: 800; letter-spacing: .2em;
}
.flash-veil {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: linear-gradient(180deg, rgba(88, 28, 135, .16), rgba(10, 4, 16, .32));
}

/* ============================================================
   SEASON 3 SETS — "The Digital Front Door"
   ============================================================ */

/* ---------- family living room ---------- */
.sc-lroom { background: linear-gradient(180deg, #f5e9d4 0%, #ecdcc0 55%, #a3835f 56%, #83684a 100%); transition: filter 1.6s ease; }
.sc-lroom.night { filter: brightness(.6) saturate(.75) hue-rotate(-14deg); }
.lr-floor { position: absolute; bottom: 0; left: 0; right: 0; height: 44cqh;
  background: linear-gradient(180deg, #b08a5e 0%, #8a6a45 100%); }
.lr-floor::before { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 14cqw, rgba(0,0,0,.08) 14cqw 14.6cqw); }
.lr-window { position: absolute; top: 5cqh; left: 7cqw; width: 30cqw; height: 17cqh; border-radius: 1.4cqw;
  border: 1cqw solid #7c5c3c; overflow: hidden; z-index: 1; }
.lr-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #7dc4f4, #cfe9fb); }
.lr-sky.night { background: linear-gradient(180deg, #131b38, #1e2a52); }
.lr-tv { position: absolute; top: 8cqh; right: 8cqw; width: 34cqw; height: 20cqh; border-radius: 1.2cqw;
  background: #0b0f1c; border: 1cqw solid #2c3444; z-index: 1; }
.lr-tvscreen { position: absolute; inset: 1cqw; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 3cqw; font-weight: 900; letter-spacing: .12em; color: #7dd3fc;
  background: linear-gradient(160deg, #10203c, #0a1226); animation: tvGlow 3s ease-in-out infinite alternate; }
@keyframes tvGlow { from { filter: brightness(.92); } to { filter: brightness(1.12); } }
.lr-shelf { position: absolute; top: 33cqh; left: 8cqw; width: 22cqw; height: 1.6cqh; border-radius: .6cqh; background: #6d4f31; z-index: 1; }
.lr-router { position: absolute; top: 28.4cqh; left: 12cqw; width: 13cqw; height: 4.2cqh; border-radius: 1cqw;
  background: #1f2937; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 1.6cqw; }
.lr-router::before, .lr-router::after { content: ""; position: absolute; top: -3.4cqh; width: .9cqw; height: 3.6cqh; border-radius: .5cqw; background: #111827; }
.lr-router::before { left: 18%; } .lr-router::after { right: 18%; }
.lr-router i { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #4ade80; animation: routerBlink 1.4s steps(2) infinite; }
.lr-router i:nth-child(2) { animation-delay: .45s; background: #38bdf8; }
.lr-router i:nth-child(3) { animation-delay: .9s; background: #fbbf24; }
@keyframes routerBlink { 50% { opacity: .25; } }
.lr-router.busy i { animation-duration: .35s; }
.lr-door { position: absolute; top: 12cqh; left: 44cqw; width: 15cqw; height: 32cqh; border-radius: 1.2cqw 1.2cqw 0 0;
  background: #7c5c3c; border: .8cqw solid #5f4327; z-index: 1; display: flex; justify-content: center; padding-top: 2cqh; }
.lr-door span { font-size: 1.9cqw; font-weight: 800; letter-spacing: .18em; color: #f3e2c4; }
.lr-couch { position: absolute; bottom: 8cqh; left: 50%; transform: translateX(-50%); width: 66cqw; height: 17cqh; z-index: 2;
  background: linear-gradient(180deg, #3f6212 0%, #365314 100%); border-radius: 3.4cqw 3.4cqw 1.6cqw 1.6cqw; }
.lr-couch::before { content: ""; position: absolute; top: -6.5cqh; left: 0; right: 0; height: 8cqh;
  background: #4d7c0f; border-radius: 2.6cqw 2.6cqw 0 0; }
.lr-couch::after { content: ""; position: absolute; top: -3cqh; left: -3.4cqw; width: 7cqw; height: 14cqh;
  background: #4d7c0f; border-radius: 2.4cqw; box-shadow: 65.8cqw 0 0 #4d7c0f; }
.lr-balloon { position: absolute; top: 6cqh; width: 7cqw; height: 9cqh; border-radius: 50% 50% 48% 52%; z-index: 3;
  animation: balloonBob 3s ease-in-out infinite alternate; }
.lr-balloon::after { content: ""; position: absolute; bottom: -7cqh; left: 50%; width: .35cqw; height: 7cqh; background: rgba(255,255,255,.55); }
@keyframes balloonBob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-2.2cqh) rotate(3deg); } }
.lr-cake { position: absolute; bottom: 26cqh; right: 10cqw; width: 16cqw; height: 9cqh; z-index: 4; }
.lr-cake i { position: absolute; left: 10%; right: 10%; border-radius: 1cqw; background: #f9a8d4; }
.lr-cake i:nth-child(1) { bottom: 0; height: 42%; background: #f472b6; }
.lr-cake i:nth-child(2) { bottom: 40%; height: 32%; left: 20%; right: 20%; background: #fbcfe8; }
.lr-cake i:nth-child(3) { bottom: 70%; height: 26%; left: 34%; right: 34%; background: #fda4af; }
.lr-cake::after { content: "🎂"; position: absolute; top: -5cqh; left: 50%; transform: translateX(-50%); font-size: 4.4cqw; }

/* positioned figure (person/kid svg wrapper) */
.fig { position: absolute; z-index: 5; }
.fig svg { width: 100%; height: auto; filter: drop-shadow(0 1.6cqh 2.6cqh rgba(0,0,0,.35)); }
.fig.bob { animation: walkBob .6s ease-in-out infinite alternate; }
.fig.enter-r { animation: figEnterR 1.6s ease both; }
@keyframes figEnterR { from { transform: translateX(46cqw); opacity: 0; } to { transform: none; opacity: 1; } }
.fig.enter-l { animation: figEnterL 1.6s ease both; }
@keyframes figEnterL { from { transform: translateX(-46cqw); opacity: 0; } to { transform: none; opacity: 1; } }

/* say-bubble accents — Season 3 cast */
.say-bubble.mom b { color: #e11d48; }
.say-bubble.dad b { color: #0e7490; }
.say-bubble.dylan b { color: #ea580c; }
.say-bubble.pal b { color: #16a34a; }
.say-bubble.det b { color: #2563eb; }

/* ---------- router admin device list ---------- */
.sc-devlist { background: radial-gradient(120% 100% at 50% 0%, #16202c 0%, #0a1118 60%, #05080c 100%); }
.sc-devlist .cam { display: flex; align-items: center; justify-content: center; }
.dev-panel { width: 82cqw; border-radius: 3cqw; background: #0d1826; border: .5cqw solid #24405c;
  padding: 2cqh 4cqw 2.4cqh; font-family: "Courier New", monospace; }
.dv-head { display: flex; align-items: center; gap: 2cqw; font-size: 3.2cqw; font-weight: 800;
  letter-spacing: .14em; color: #7dd3fc; padding-bottom: 1.4cqh; border-bottom: .3cqw solid #24405c; }
.dv-head .dot { width: 2cqw; height: 2cqw; border-radius: 50%; background: #4ade80; animation: dotPulse 1.6s ease-in-out infinite; }
.dv-head .dv-count { margin-left: auto; font-size: 5cqw; color: #fff; }
.dv-row { display: flex; justify-content: space-between; gap: 3cqw; padding: 1.15cqh 2cqw;
  border-bottom: .2cqw solid rgba(36, 64, 92, .5); font-size: 2.9cqw; opacity: 0; transform: translateX(-3cqw); }
.dv-row.in { animation: chipIn .45s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.dv-row .dv-name { color: #e2e8f0; font-weight: 700; }
.dv-row .dv-note { color: #64748b; }
.dv-row.unknown .dv-name { color: #f87171; }
.dv-row.unknown .dv-note { color: #fca5a5; font-weight: 800; }
.dv-row.unknown { background: rgba(248, 113, 113, .07); }

/* ---------- network-scan laptop ---------- */
.sc-scan { background: radial-gradient(120% 110% at 50% 0%, #1a1030 0%, #0d0819 60%, #050310 100%); }
.sc-scan .cam { display: flex; align-items: center; justify-content: center; }
.scan-laptop { width: 78cqw; }
.sl-lid { border: 1cqw solid #334155; border-bottom: none; border-radius: 2cqw 2cqw 0 0; background: #0b1220; padding: 1.2cqw; }
.sl-screen { height: 52cqh; overflow: hidden; background: #060d1a; border-radius: 1cqw; padding: 1.6cqh 3cqw;
  font-family: "Courier New", monospace; font-size: 2.75cqw; line-height: 1.85; color: #86efac; }
.sl-title { color: #4ade80; font-weight: 800; letter-spacing: .16em; border-bottom: .2cqw solid rgba(74, 222, 128, .3);
  padding-bottom: .8cqh; margin-bottom: .8cqh; }
.sl-line { opacity: 0; animation: chipIn .3s ease forwards; white-space: pre-wrap; }
.sl-line.dim { color: #475569; }
.sl-line.alert { color: #f87171; font-weight: 800; }
.sl-line.warn { color: #fbbf24; }
.sl-base { height: 2.6cqh; background: linear-gradient(180deg, #334155, #1e293b); border-radius: 0 0 3cqw 3cqw; }

/* ---------- smart house cross-section ---------- */
.sc-smart { background: radial-gradient(120% 100% at 50% 0%, #172554 0%, #0c1436 60%, #05081c 100%); }
.sc-smart .cam { display: flex; align-items: center; justify-content: center; }
.smart-house { position: relative; width: 88cqw; height: 74cqh; }
.sh-roof { position: absolute; top: 0; left: 4cqw; right: 4cqw; height: 16cqh;
  background: #7c5c3c; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sh-body { position: absolute; top: 15.6cqh; left: 10cqw; right: 10cqw; bottom: 4cqh;
  background: rgba(240, 228, 205, .1); border: .6cqw solid #a3835f; border-radius: 0 0 2cqw 2cqw; }
.sh-dev { position: absolute; display: flex; align-items: center; gap: 1.4cqw; opacity: .18; transition: opacity .6s ease; z-index: 2; }
.sh-dev.on { opacity: 1; }
.sh-dev i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #38bdf8; flex: none;
  box-shadow: 0 0 2.6cqw rgba(56, 189, 248, .9); }
.sh-dev.on i { animation: dotPulse 1.5s ease-in-out infinite; }
.sh-dev span { font-size: 2.6cqw; font-weight: 800; letter-spacing: .06em; color: #bae6fd; white-space: nowrap; }
.sh-count { position: absolute; bottom: -4cqh; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2.6cqw; }
.sh-count b { font-size: 11cqw; font-weight: 900; color: #38bdf8; text-shadow: 0 0 5cqw rgba(56, 189, 248, .6); }
.sh-count span { font-size: 2.7cqw; letter-spacing: .2em; color: #93a4d8; line-height: 1.5; }

/* ---------- leaked-files email ---------- */
.sc-mail { background: radial-gradient(120% 100% at 50% 0%, #3f1420 0%, #22090f 60%, #0e0306 100%); }
.sc-mail .cam { display: flex; align-items: center; justify-content: center; }
.mail-panel { position: relative; width: 82cqw; border-radius: 3cqw; background: #f8fafc; color: #0f172a;
  padding: 2cqh 4cqw 3cqh; box-shadow: 0 3cqh 8cqh rgba(0,0,0,.5); }
.ml-head { display: flex; flex-direction: column; gap: .6cqh; font-size: 2.8cqw; font-weight: 700;
  padding-bottom: 1.4cqh; border-bottom: .25cqw solid #e2e8f0; color: #475569; }
.ml-head .ml-subj { color: #0f172a; font-weight: 900; font-size: 3.2cqw; }
.ml-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; margin-top: 1.8cqh; }
.ml-card { display: flex; align-items: center; gap: 2cqw; padding: 1.3cqh 2.6cqw; border-radius: 1.6cqw;
  background: #eef2f7; border: .3cqw solid #dbe3ec; font-size: 2.8cqw; font-weight: 800; color: #334155;
  opacity: 0; transform: translateY(1.6cqh); }
.ml-card.in { animation: chipIn .45s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.ml-card .ml-ic { font-size: 4cqw; }
.ml-stamp { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%) rotate(-9deg) scale(3);
  padding: 1cqh 4cqw; border: .9cqw solid #dc2626; border-radius: 1.4cqw; color: #dc2626;
  font-size: 6cqw; font-weight: 900; letter-spacing: .12em; opacity: 0; z-index: 3; }
.ml-stamp.in { animation: stampIn .5s cubic-bezier(.2, 1.4, .4, 1) forwards; }

/* ---------- big hallway router (finale) ---------- */
.router-big { position: relative; width: 100%; }
.rb-antenna { position: absolute; top: -12cqh; width: 1.6cqw; height: 13cqh; border-radius: 1cqw; background: #111827; }
.rb-antenna.a1 { left: 16%; transform: rotate(-9deg); } .rb-antenna.a2 { right: 16%; transform: rotate(9deg); }
.rb-body { position: relative; height: 13cqh; border-radius: 2.4cqw; background: linear-gradient(180deg, #1f2937, #111827);
  border: .5cqw solid #374151; display: flex; align-items: center; justify-content: center; gap: 3cqw; }
.rb-body i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #4ade80; animation: routerBlink 1.2s steps(2) infinite; }
.rb-body i:nth-child(2) { animation-delay: .2s; } .rb-body i:nth-child(3) { animation-delay: .4s; background: #38bdf8; }
.rb-body i:nth-child(4) { animation-delay: .6s; background: #fbbf24; } .rb-body i:nth-child(5) { animation-delay: .8s; }
.rb-label { margin-top: 1.6cqh; text-align: center; font-size: 3cqw; font-weight: 900; letter-spacing: .3em; color: #93a4d8; }

/* ---------- Season 4 — cafeteria set ---------- */
.sc-cafeteria { background: linear-gradient(180deg, #f2ead8 0%, #e6dac2 54%, #9aa39a 55%, #77817a 100%); }
.caf-windows { position: absolute; top: 5cqh; left: 6cqw; right: 6cqw; height: 16cqh; display: flex; gap: 4cqw; z-index: 1; }
.caf-windows i { flex: 1; border-radius: 1.2cqw; border: .9cqw solid #8a7f6a;
  background: linear-gradient(180deg, #9fd3f2, #d8eefb); }
.caf-banner { position: absolute; top: 24cqh; left: 50%; transform: translateX(-50%); padding: .8cqh 4cqw;
  border-radius: 1cqw; background: #b45309; color: #fff7e6; font-size: 2.5cqw; font-weight: 900;
  letter-spacing: .16em; z-index: 1; }
.caf-floor { position: absolute; bottom: 0; left: 0; right: 0; height: 45cqh;
  background: linear-gradient(180deg, #aab3aa 0%, #828c84 100%); }
.caf-floor::before { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 12cqw, rgba(0,0,0,.07) 12cqw 12.5cqw); }
.caf-table { position: absolute; bottom: 8cqh; left: 50%; transform: translateX(-50%); width: 78cqw; height: 7cqh;
  border-radius: 1.6cqw; background: linear-gradient(180deg, #c9863f, #9c6428); z-index: 2; }
.caf-table::before, .caf-table::after { content: ""; position: absolute; top: 7cqh; width: 2.6cqw; height: 8cqh; background: #7c5c3c; }
.caf-table::before { left: 10%; } .caf-table::after { right: 10%; }
.caf-table.back { bottom: 30cqh; width: 52cqw; height: 5cqh; opacity: .75; transform: translateX(-50%) scale(.86); }
.caf-tray { position: absolute; top: -2.4cqh; width: 12cqw; height: 2.6cqh; border-radius: .8cqw;
  background: #dd6b20; box-shadow: inset 0 -.8cqh rgba(0,0,0,.18); }
.caf-tray::after { content: ""; position: absolute; top: -1.3cqh; left: 24%; width: 3.4cqw; height: 1.5cqh;
  border-radius: 50%; background: #fde68a; }

/* say-bubble accents — Season 4 cast */
.say-bubble.maya b { color: #db2777; }
.say-bubble.lily b { color: #7c3aed; }
.say-bubble.coun b { color: #0891b2; }

/* say-bubble accents — Season 5 cast ("The Trap") */
.say-bubble.ethan b { color: #60a5fa; }
.say-bubble.emom b { color: #f59e0b; }
.say-bubble.coach b { color: #22d3ee; }
.say-bubble.couns b { color: #22d3ee; }
.say-bubble.invest b { color: #34d399; }

/* S5 cut-to-black boundary device */
.cut-black { position: absolute; inset: 0; z-index: 42; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.4cqh; text-align: center; opacity: 0; transition: opacity .55s ease; padding: 0 8cqw; }
.cut-black.on { opacity: 1; }
.cut-black .cb1 { color: #fff; font-weight: 800; letter-spacing: .04em;
  font-size: clamp(20px, 5.2cqh, 46px); margin: 0; }
.cut-black .cb2 { color: #ef4444; font-weight: 700; letter-spacing: .06em;
  font-size: clamp(15px, 3.4cqh, 30px); margin: 0; text-transform: uppercase; }
/* S5 resource card (NCMEC / 988) */
.res-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 78cqw; max-width: 78cqw; background: rgba(8, 14, 26, .94);
  border: 1px solid rgba(52, 211, 153, .35); border-radius: 3cqw; padding: 4cqh 5cqw;
  text-align: center; box-shadow: 0 3cqh 8cqh rgba(0,0,0,.5); }
.res-card h3 { color: #34d399; font-size: clamp(15px, 3.2cqh, 26px); margin: 0 0 2.4cqh;
  letter-spacing: .08em; }
.res-card .res-row { color: #e2e8f0; font-size: clamp(13px, 2.7cqh, 22px);
  margin: 1.2cqh 0; line-height: 1.35; }
.res-card .res-row b { color: #fff; }
.res-card .res-row .res-num { color: #7dd3fc; font-weight: 800; }

/* say-bubble accents — Season 6 cast ("The Familiar Face") */
.say-bubble.hmom b { color: #f472b6; }
.say-bubble.hdad b { color: #38bdf8; }
.say-bubble.ava b { color: #fbbf24; }
.say-bubble.noah b { color: #4ade80; }
.say-bubble.david b { color: #f87171; }
.say-bubble.carter b { color: #22d3ee; }
.say-bubble.ram b { color: #34d399; }

/* S6 fake-video card — shows only the RESULT of AI manipulation, never the process */
.fake-vid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 54cqw; max-width: 320px; aspect-ratio: 9 / 12; border-radius: 3cqw;
  overflow: hidden; background: #0a0f1c; border: 2px solid rgba(248, 113, 113, .5);
  box-shadow: 0 3cqh 9cqh rgba(0,0,0,.55); opacity: 0; transition: opacity .5s ease; }
.fake-vid.in { opacity: 1; }
.fake-vid .fv-screen { position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 20%, #24304e 0%, #131a2e 60%, #0a0f1c 100%); }
.fake-vid .fv-face { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 74%; filter: saturate(.9); }
.fake-vid .fv-face svg { width: 100%; height: auto; display: block; }
.fake-vid .fv-scan { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(148,163,184,.06) 0 2px, transparent 2px 5px);
  mix-blend-mode: screen; animation: fvScan 2.4s linear infinite; }
@keyframes fvScan { from { background-position-y: 0; } to { background-position-y: 5px; } }
.fake-vid.glitch .fv-face { animation: fvGlitch 3.1s steps(1) infinite; }
@keyframes fvGlitch {
  0%,92%,100% { transform: translateX(-50%); filter: none; }
  93% { transform: translate(-52%, .3cqh); filter: hue-rotate(12deg); }
  95% { transform: translate(-48%, -.2cqh); }
  97% { transform: translate(-51%, 0); filter: saturate(1.3); }
}
.fake-vid .fv-badge { position: absolute; top: 2.2cqh; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: .8cqw; z-index: 3;
  background: rgba(185, 28, 28, .92); color: #fff; font-weight: 800;
  font-size: clamp(10px, 1.9cqh, 15px); letter-spacing: .06em;
  padding: .7cqh 2.4cqw; border-radius: 2cqw; white-space: nowrap;
  box-shadow: 0 1.4cqh 3cqh rgba(0,0,0,.4); }
.fake-vid .fv-badge .fv-warn { font-size: 1.2em; }
.fake-vid .fv-cap { position: absolute; left: 4%; right: 4%; bottom: 3cqh; z-index: 3;
  background: rgba(6, 10, 20, .82); color: #f1f5f9; border-radius: 1.6cqw;
  padding: 1.3cqh 3%; text-align: center; line-height: 1.3;
  font-size: clamp(11px, 2.2cqh, 18px); }
.fake-vid .fv-cap b { color: #fca5a5; }
/* flaw callout pins on the fake video */
.fv-flaw { position: absolute; z-index: 4; background: rgba(250, 204, 21, .95);
  color: #1c1300; font-weight: 700; font-size: clamp(9px, 1.7cqh, 13px);
  padding: .5cqh 1.8cqw; border-radius: 1.4cqw; white-space: nowrap;
  opacity: 0; transform: scale(.8); transition: opacity .4s ease, transform .4s ease;
  box-shadow: 0 1cqh 2.4cqh rgba(0,0,0,.4); }
.fv-flaw.in { opacity: 1; transform: scale(1); }