/* Weird IQ Test (26/10): the game show of the launch video. The stage, Smoke (the host, no cigar), the podiums, the crowd, the
   lights, the curtain, the confetti and the stamp are GPT art in art/; the contestants (Crow, Beanie, Stereo) are the original
   Codex Pets. quiz.js places the layers on the stage picture (--board-top, --floor-b, sizes) and moves them a few pixels with
   the pointer (--px, --py). The palette is the site's, never purple. */
:root {
  --green: #64ff00; --cyan: #00eadb; --yellow: #ffe900; --pink: #ff49cf; --red: #ff453a; --orange: #ff9f0a; --blue: #008cff;
  --ink: #f6f7f5; --mono: "VT323", ui-monospace, Consolas, monospace; --px-font: "Silkscreen", "VT323", monospace;
  --rainbow: linear-gradient(90deg, #ff453a 0 14%, #ff9f0a 14% 28%, #ffe900 28% 42%, #64ff00 42% 57%, #00eadb 57% 71%, #008cff 71% 85%, #ff49cf 85% 100%);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #050608; color: var(--ink); font: 400 22px/1.2 var(--mono); -webkit-font-smoothing: none; }
img { user-select: none; -webkit-user-drag: none; }
[hidden] { display: none !important; }

/* ---- the stage picture and its lights ---- */
.show { --px: 0; --py: 0; --board-top: 200px; --floor-b: 8vh; --seat: 120px; --host-h: 420px;
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate; }
.stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.back { position: absolute; left: 0; top: 0; max-width: none; transform: translate(calc(var(--px) * -6px), calc(var(--py) * -4px));
  animation: stagelight 5.5s ease-in-out infinite; }
@keyframes stagelight { 0%, 100% { filter: brightness(1) saturate(1.05); } 50% { filter: brightness(1.1) saturate(1.15); } }
.beam { position: absolute; top: -2%; height: 92%; width: auto; mix-blend-mode: screen; opacity: 0.42; transform-origin: 50% 0;
  translate: calc(var(--px) * -6px) 0; }
.beam.b1 { left: 22%; animation: sweep 7s ease-in-out infinite; }
.beam.b2 { right: 22%; animation: sweep 7s ease-in-out -3.5s infinite reverse; }
@keyframes sweep { 0%, 100% { rotate: 24deg; } 50% { rotate: -6deg; } }
.show.party .beam { animation-duration: 1.6s; opacity: 0.6; }

/* ---- the header ---- */
.qz-top { position: absolute; z-index: 6; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; }
.qz-logo img { display: block; height: 24px; width: auto; }
.qz-top-r { display: flex; gap: 8px; align-items: center; }
.qz-back, .qz-sound { font: 400 13px/1 var(--px-font); color: var(--ink); text-decoration: none; padding: 9px 11px; border: 2px solid rgba(246, 247, 245, 0.55);
  background: rgba(5, 6, 8, 0.78); cursor: pointer; }
.qz-sound[aria-pressed="true"] { color: var(--yellow); border-color: var(--yellow); }
.qz-back:hover, .qz-back:focus-visible, .qz-sound:hover, .qz-sound:focus-visible { border-color: var(--yellow); color: var(--yellow); outline: none; }

/* ---- the question board, under the WEIRD IQ TEST sign ---- */
.qz { position: relative; z-index: 4; width: min(660px, calc(100vw - 24px)); margin: 0 auto; padding-top: var(--board-top); padding-bottom: 34vh; }
.board { position: relative; border: 4px solid transparent; border-radius: 16px;
  background: linear-gradient(rgba(4, 6, 12, 0.94), rgba(4, 6, 12, 0.94)) padding-box, var(--rainbow) border-box;
  box-shadow: 0 0 0 2px #000, 0 0 34px rgba(255, 233, 0, 0.18), 0 26px 60px rgba(0, 0, 0, 0.65); padding: 0 0 18px; }
.qz-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 11px 18px 9px; border-radius: 12px 12px 0 0; background: rgba(255, 255, 255, 0.04);
  color: var(--yellow); font: 400 13px/1.2 var(--px-font); letter-spacing: 0.03em; border-bottom: 2px solid rgba(255, 255, 255, 0.08); }
#qz-clock { color: var(--cyan); text-align: right; white-space: nowrap; }
.lamps { display: flex; gap: 10px; justify-content: center; padding: 14px 0 0; }
.lamps i { width: 18px; height: 18px; border-radius: 50%; background: #2a2410; border: 2px solid #5a4a12; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35); }
.lamps i.on { background: var(--yellow); border-color: #fff6a8; box-shadow: 0 0 12px rgba(255, 233, 0, 0.8), inset 0 -3px 0 rgba(0, 0, 0, 0.15); }
.lamps i.now { animation: lamp 0.8s steps(2) infinite; }
@keyframes lamp { 0% { background: #2a2410; } 100% { background: #8a7a1a; } }
.qz-screen { min-height: 140px; padding: 14px 20px 6px; color: var(--ink); }
.qz-screen p { margin: 0 0 7px; white-space: pre-wrap; }
.qz-screen .dim { color: rgba(246, 247, 245, 0.6); }
.qz-screen .hi { color: var(--yellow); text-shadow: 0 0 8px rgba(255, 233, 0, 0.45); font-size: 26px; }
.qz-screen .cy { color: var(--cyan); }
.qz-screen .err { color: var(--red); }
.qz-screen .q { font: 400 19px/1.4 var(--px-font); color: var(--ink); margin: 4px 0 10px; text-shadow: 0 2px 0 #000; }
.qz-pic { display: block; width: 168px; height: 182px; margin: 2px auto 8px; border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 8px; background-color: #0b0f18; object-fit: contain; }
div.qz-pic { background-size: 960px 1430px; background-position: -720px 0; }
.qz-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px 20px 0; }
.qz-keys.one { grid-template-columns: 1fr; justify-items: center; }
/* the answers are buzzers: a red dome with the letter, then the answer */
.qz-key { display: flex; gap: 12px; align-items: center; width: 100%; min-height: 58px; padding: 8px 14px 8px 10px; text-align: left; cursor: pointer;
  font: 400 24px/1.05 var(--mono); color: var(--ink); background: linear-gradient(#0b1020, #070a14); border: 2px solid #2a3654; border-radius: 12px; text-decoration: none;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06), 0 3px 0 #000; transition: border-color 0.12s, background 0.12s; }
.qz-key b { flex: none; display: grid; place-items: center; width: 38px; height: 34px; border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; font: 400 14px/1 var(--px-font);
  color: #fff; background: radial-gradient(circle at 35% 30%, #ff9a8a 0 12%, #ff3b2f 30%, #b3150c 100%); border-bottom: 4px solid #5e0a05; text-shadow: 0 1px 0 #5e0a05;
  transition: transform 0.08s, border-width 0.08s; }
.qz-key:hover, .qz-key:focus-visible { outline: none; border-color: var(--yellow); background: linear-gradient(#1b2340, #0e1428);
  box-shadow: 0 0 0 2px rgba(255, 233, 0, 0.35), 0 0 22px rgba(255, 233, 0, 0.25), 0 3px 0 #000; }
.qz-key:hover b, .qz-key:focus-visible b { box-shadow: 0 0 14px rgba(255, 69, 58, 0.8); }
.qz-key.picked { border-color: var(--yellow); background: linear-gradient(#3a3306, #1d1a03); }
.qz-key.picked b { transform: translateY(3px); border-bottom-width: 1px; }
.qz-key.go { width: auto; min-width: 260px; justify-content: center; background: var(--yellow); color: #0c0d0f; border-color: #fff4a0; font: 400 16px/1 var(--px-font);
  padding: 18px 24px; box-shadow: 0 0 24px rgba(255, 233, 0, 0.4), 0 4px 0 #000; }
.qz-key.go:hover, .qz-key.go:focus-visible { background: #fff27a; border-color: #fff; color: #0c0d0f; box-shadow: 0 0 0 3px #fff, 0 0 30px rgba(255, 233, 0, 0.55), 0 4px 0 #000; }
@media (hover: none) { .qz-key:hover { border-color: #2a3654; background: linear-gradient(#0b1020, #070a14); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06), 0 3px 0 #000; }
  .qz-key.go:hover { background: var(--yellow); border-color: #fff4a0; box-shadow: 0 0 24px rgba(255, 233, 0, 0.4), 0 4px 0 #000; } }
.qz-key.ghost { width: auto; justify-content: center; font: 400 13px/1 var(--px-font); padding: 12px 18px; min-height: 0; }
.qz-key[disabled] { opacity: 0.5; cursor: default; }
/* the study pages as case files of the lineup (owner 28/10): an evidence tag with a caution stripe and its file number */
.qz-keys { counter-reset: casefile; }
.qz-key.case { counter-increment: casefile; position: relative; padding-left: 26px; border-color: var(--yellow); color: var(--yellow);
  background: linear-gradient(#14130a, #0a0904); }
.qz-key.case::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; border-radius: inherit;
  background: repeating-linear-gradient(135deg, var(--yellow) 0 6px, #0c0d0f 6px 12px); }
.qz-key.case span::before { content: 'FILE 0' counter(casefile) ' · '; color: var(--cyan); }
.qz-key.case:hover, .qz-key.case:focus-visible { border-color: #fff; color: #fff; background: linear-gradient(#2a2709, #141203); }
.stamp { position: absolute; z-index: 2; right: -46px; top: -40px; width: min(220px, 40%); height: auto; pointer-events: none; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.6)); }
.stamp.slam { animation: slam 0.42s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes slam { 0% { opacity: 0; scale: 2.4; rotate: -14deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
/* the rule under the board (owner 27/10: contrast, "rainbow... fundo desfocado em preto... um glitchzinho"): white words on a soft
   dark cloud, no band; ONE TRY PER TICKET in the rainbow, now and then a small RGB glitch */
.qz-foot { margin: 14px auto 0; text-align: center; font: 400 21px/1.3 var(--mono); color: #fff;
  text-shadow: 0 0 5px #000, 0 0 11px #000, 0 0 18px rgba(0, 0, 0, 0.85), 0 2px 0 #000; }
/* a dark cloud, blurred, behind the whole line: the stage floor is bright on wide screens (owner 27/10: "no PC tem que ter mais contraste") */
.qz-foot { position: relative; isolation: isolate; width: fit-content; max-width: 100%; padding: 6px 18px; }
.qz-foot::before { content: ""; position: absolute; z-index: -1; inset: -6px -10px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.75) 55%, rgba(0, 0, 0, 0) 100%); filter: blur(8px); }
.qz-one { display: inline-block; margin-right: 6px; font: 400 21px/1.3 var(--px-font); letter-spacing: 0.04em; text-transform: uppercase;
  color: transparent; background: var(--rainbow); -webkit-background-clip: text; background-clip: text; text-shadow: none;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 9px rgba(0, 0, 0, 0.9)); animation: one-glitch 3.6s steps(1) infinite; }
@keyframes one-glitch {
  0%, 90%, 100% { transform: none; }
  91% { transform: translateX(2px); filter: drop-shadow(-2px 0 0 rgba(255, 43, 90, 0.85)) drop-shadow(2px 0 0 rgba(0, 228, 255, 0.85)) drop-shadow(0 0 6px #000); }
  93% { transform: translateX(-2px) skewX(-8deg); filter: drop-shadow(2px 0 0 rgba(255, 43, 90, 0.85)) drop-shadow(-2px 0 0 rgba(0, 228, 255, 0.85)) drop-shadow(0 0 6px #000); }
  95% { transform: translateX(1px); } }
@media (prefers-reduced-motion: reduce) { .qz-one { animation: none; } }
.qz-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- the result card to share ---- */
.share-card { display: block; width: min(100%, 300px); height: auto; margin: 10px auto 2px; border-radius: 8px; border: 2px solid #2a3654; }   /* small: the keys stay on a laptop screen */

/* ---- one try: the rule before Start, and the two-step answer (choose, then Lock in) ---- */
.one-try { display: grid; gap: 6px; margin: 12px 0 4px; padding: 12px 14px; border: 2px solid var(--yellow); border-radius: 10px; background: rgba(255, 233, 0, 0.07); }
.one-try b { font: 400 13px/1 var(--px-font); letter-spacing: .08em; color: var(--yellow); }
.one-try span { font: 400 19px/1.25 var(--mono); color: var(--ink); }
.qz-key.chosen { border-color: var(--cyan); background: linear-gradient(#063a3a, #032222); box-shadow: 0 0 0 2px rgba(0, 234, 219, 0.35), 0 3px 0 #000; }
.qz-keys .qz-key.lock { grid-column: 1 / -1; justify-self: center; margin-top: 4px; }
.qz-key.lock[disabled] { opacity: 0.45; background: #3a3a2a; border-color: #5a5a3a; color: #0c0d0f; box-shadow: none; }

/* ---- before round 1 opens: the board as a poster ---- */
.soon { text-align: center; padding: 2px 0 4px; }
.qz-screen .soon p { margin: 0; white-space: normal; }
.soon-label { font: 400 13px/1 var(--px-font); letter-spacing: .12em; color: rgba(246, 247, 245, 0.7); }
.qz-screen .soon-count { margin: 6px 0 14px; font: 400 64px/1 var(--mono); letter-spacing: .04em; color: var(--yellow); text-shadow: 0 0 18px rgba(255, 233, 0, 0.45), 0 3px 0 #000; }
.soon-days { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.soon-days li { padding: 9px 6px 8px; border: 2px solid #2a3654; border-radius: 10px; background: rgba(255, 255, 255, 0.03); }
.soon-days li.now { border-color: var(--yellow); box-shadow: 0 0 14px rgba(255, 233, 0, 0.25); }
.soon-days b { display: block; font: 400 15px/1 var(--px-font); color: var(--ink); }
.soon-days li.now b { color: var(--yellow); }
.soon-days span { display: block; margin-top: 6px; font: 400 18px/1.05 var(--mono); color: rgba(246, 247, 245, 0.75); }
.qz-screen .soon-time { margin-bottom: 14px; font: 400 18px/1.2 var(--mono); color: var(--cyan); }
.soon-prizes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.soon-prizes div { display: grid; gap: 4px; padding: 10px 8px; border-radius: 10px; background: rgba(0, 234, 219, 0.06); border: 2px solid rgba(0, 234, 219, 0.35); }
.soon-prizes b { font: 400 12px/1 var(--px-font); letter-spacing: .06em; color: var(--cyan); }
.soon-prizes span { font: 400 19px/1.1 var(--mono); color: var(--ink); }
.qz-screen .soon-note { font: 400 18px/1.25 var(--mono); color: rgba(246, 247, 245, 0.6); }
@media (max-width: 640px) {
  .qz-screen .soon-count { font-size: 52px; }
  .soon-days span { font-size: 16px; }
  .soon-prizes { grid-template-columns: 1fr; }
}

/* ---- the launch video on the board until round 1 opens ---- */
.trailer { position: relative; margin: 14px 20px 2px; border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; border: 2px solid #222a3e; }
.trailer video { display: block; width: 100%; height: 100%; object-fit: cover; }
.trailer-sound { position: absolute; right: 10px; bottom: 10px; font: 400 12px/1 var(--px-font); color: #0c0d0f; background: var(--yellow); border: 2px solid #fff4a0;
  border-radius: 8px; padding: 9px 12px; cursor: pointer; box-shadow: 0 3px 0 #000; }
.trailer-sound:hover, .trailer-sound:focus-visible { background: #fff27a; outline: none; }

/* ---- the APPLAUSE sign drops in on a perfect run ---- */
/* it hangs in front of the WEIRD IQ TEST sign (quiz.js sets --sign-mid and --sign-w from the stage picture) */
.applause { position: absolute; z-index: 5; left: 50%; top: var(--sign-mid, 160px); width: var(--sign-w, 340px); height: auto; translate: -50% -150vh; pointer-events: none; }
.applause.on { animation: drop 4.4s ease-in-out both; }
@keyframes drop { 0% { translate: -50% -150vh; } 12% { translate: -50% -50%; filter: brightness(0.7); }
  16%, 28%, 40%, 52%, 64% { filter: brightness(1.25) drop-shadow(0 0 26px rgba(255, 233, 0, 0.85)); } 22%, 34%, 46%, 58% { filter: brightness(0.6); }
  88% { translate: -50% -50%; } 100% { translate: -50% -150vh; } }

/* ---- the floor: Smoke at his podium, the three contestants at theirs ---- */
.floor { position: absolute; z-index: 3; left: 0; right: 0; bottom: var(--floor-b); height: 0; pointer-events: none;
  translate: calc(var(--px) * 4px) calc(var(--py) * 2px); }
.host-wrap { position: absolute; bottom: 0; right: calc(50% + 352px); width: calc(var(--host-h) * 0.57); }
.host { display: block; width: 100%; height: auto; transform-origin: 50% 100%; animation: bob 3.4s ease-in-out infinite; }
.host.present { animation: present 0.6s cubic-bezier(.2, .9, .3, 1.3), bob 3.4s ease-in-out 0.6s infinite; }
.host.tilt { rotate: -5deg; transition: rotate 0.5s; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes present { 0% { scale: 1; } 40% { scale: 1.06; rotate: -3deg; } 100% { scale: 1; rotate: 0deg; } }
/* Smoke's speech balloon (owner 27/10: "tinha que parecer mais um balão mesmo de fala"): above his head with a gap, round, and a
   comic tail (black outline, white fill) slanting down to him */
.bubble { position: absolute; left: 50%; bottom: calc(100% + 26px); width: max-content; max-width: 240px; margin: 0; padding: 10px 15px 9px; translate: -28% 0;
  font: 400 13px/1.35 var(--px-font); color: #0c0d0f; background: #fff; border: 3px solid #0c0d0f; border-radius: 20px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
  opacity: 0; transition: opacity 0.2s; }
.bubble::before { content: ""; position: absolute; left: 24%; top: 100%; border-top: 28px solid #0c0d0f; border-right: 20px solid transparent; }
.bubble::after { content: ""; position: absolute; left: calc(24% + 3px); top: calc(100% - 3px); border-top: 24px solid #fff; border-right: 14px solid transparent; }
.bubble.on { opacity: 1; }
.cast { position: absolute; bottom: 0; left: calc(50% + 352px); display: flex; gap: 10px; align-items: flex-end; }
.seat { position: relative; width: var(--seat); height: calc(var(--seat) * 1.75); }
/* owner 27/10: the cats sit lower, their paws behind the podium's top edge */
.seat .pet { position: absolute; left: 50%; bottom: calc(var(--seat) * 0.4); width: calc(var(--seat) * 1.12); height: calc(var(--seat) * 1.213); translate: -50% 0;
  background-repeat: no-repeat; background-size: calc(var(--seat) * 8.96) calc(var(--seat) * 13.34); z-index: 1; }
.seat .podium { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; z-index: 2; }
.seat.buzz .podium { animation: buzz 0.32s steps(2) 2; }
/* the plate on each podium: a tiny amber LED sign inside the gold frame (podium.webp: the frame's face is 19-81% across,
   16-37% of the seat's width up from the bottom) */
.seat .plate { position: absolute; z-index: 3; left: 19%; width: 62%; bottom: calc(var(--seat) * 0.165); height: calc(var(--seat) * 0.2);
  display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 2px; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 159, 10, 0.16) 0.9px, transparent 1.3px) 0 0 / 3px 3px, #0b0703; }
.seat .plate b { font: 400 calc(var(--seat) * 0.18)/1 var(--mono); letter-spacing: 0.06em; white-space: nowrap; color: #ffb21f;
  text-shadow: 0 0 4px rgba(255, 159, 10, 0.95), 0 0 11px rgba(255, 110, 0, 0.55); }
.seat .plate.run { justify-content: flex-start; }
.seat .plate.run b { padding-left: 100%; animation: plate-run 4.6s linear infinite; }
.seat.buzz .plate { animation: buzz 0.32s steps(2) 2; }
@keyframes plate-run { to { transform: translateX(-100%); } }
@keyframes buzz { 0% { translate: 0 0; filter: brightness(1.5); } 100% { translate: 0 2px; filter: brightness(1); } }
.seat .bzz { position: absolute; left: 50%; bottom: calc(var(--seat) * 1.5); translate: -50% 0; font: 400 13px/1 var(--px-font); color: var(--yellow);
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(255, 233, 0, 0.7); opacity: 0; z-index: 3; white-space: nowrap; }
.seat.buzz .bzz { animation: bzz 0.7s ease-out; }
@keyframes bzz { 0% { opacity: 1; translate: -50% 6px; } 100% { opacity: 0; translate: -50% -22px; } }

/* ---- the crowd, two rows that move a little apart (2.5D) and cheer ---- */
.crowd { position: absolute; z-index: 4; left: -3%; right: -3%; bottom: -1%; pointer-events: none; }
.crowd .row { display: block; width: 100%; height: auto; }
.crowd .rb { position: absolute; left: 0; bottom: 0; translate: calc(var(--px) * 8px) 0; }
.crowd .rf { position: relative; translate: calc(var(--px) * 14px) 0; }
.show.party .crowd .rb { animation: cheer 0.34s steps(2) 10; }
.show.party .crowd .rf { animation: cheer 0.34s steps(2) -0.17s 10; }
@keyframes cheer { 0% { margin-bottom: 0; } 100% { margin-bottom: 12px; } }

/* ---- confetti and the curtain ---- */
.confetti { position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: 0; }
.confetti { --t1: 1100px; --t2: 1500px; }
.confetti i { position: absolute; inset: 0; background: url(art/confetti.webp) 0 0 / var(--t1) var(--t1) repeat; opacity: 0.85; }
.confetti i + i { background-size: var(--t2) var(--t2); opacity: 0.55; }
.confetti.on { animation: fade 4.6s ease-in both; }
.confetti.on i { animation: fall 2.4s linear 2; }
.confetti.on i + i { animation: fall2 2.6s linear 2; }
@keyframes fall { from { background-position: 0 calc(var(--t1) * -1); } to { background-position: 90px 0; } }
@keyframes fall2 { from { background-position: 400px calc(var(--t2) * -1); } to { background-position: 330px 0; } }
@keyframes fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.curtain { position: fixed; inset: 0; z-index: 30; pointer-events: none; display: flex; }
.curtain img { width: 50%; height: 100%; object-fit: cover; }
.curtain .cl { object-position: 100% 50%; }
.curtain .cr { object-position: 0 50%; }
.curtain.open .cl { animation: open-l 1.5s cubic-bezier(.6, 0, .3, 1) 0.35s both; }
.curtain.open .cr { animation: open-r 1.5s cubic-bezier(.6, 0, .3, 1) 0.35s both; }
@keyframes open-l { to { transform: translateX(-102%); } }
@keyframes open-r { to { transform: translateX(102%); } }

/* ---- the study tape (the real X posts, embedded in order) ---- */
.qz-tape { position: relative; z-index: 1; width: min(780px, calc(100vw - 24px)); margin: 34px auto 60px; }
.qz-tape h2 { margin: 0 0 6px; font: 400 18px/1 var(--px-font); color: var(--yellow); letter-spacing: 0.04em; }
.qz-tape-lead { margin: 0 0 14px; font: 400 20px/1.2 var(--mono); color: rgba(246, 247, 245, 0.8); }
.qz-tape-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.qz-tape-list li { background: rgba(5, 6, 8, 0.78); border: 2px solid #222a3e; border-radius: 10px; padding: 12px 14px 4px; }
.qz-tape-list .ch { font: 400 14px/1 var(--px-font); color: var(--yellow); margin: 0 0 8px; }
.qz-tape-list .ch span { color: rgba(246, 247, 245, 0.4); }
.qz-tape-list .twitter-tweet, .qz-tape-list iframe { margin: 0 auto 8px !important; }
.qz-tape-list .fallback { font: 400 20px/1.2 var(--mono); color: var(--cyan); }

/* ---- stacked (phones, tablets, narrow windows): the sign on top, Smoke and the contestants peeking over the top of the board
   (the board hides their podiums), the crowd at the end ---- */
.show.stacked .qz { padding-bottom: 0; }
.show.stacked .back { -webkit-mask-image: linear-gradient(#000 62%, transparent 98%); mask-image: linear-gradient(#000 62%, transparent 98%); }
.show.stacked .floor { left: 50%; right: auto; bottom: auto; top: calc(var(--board-top) - var(--peek)); width: min(640px, calc(100vw - 12px)); height: var(--peek);
  translate: -50% 0; }
.show.stacked .host-wrap { right: auto; left: 4px; bottom: auto; top: calc(var(--peek) - var(--host-h) * 0.47 + 4px); }
.show.stacked .cast { left: auto; right: 4px; bottom: auto; top: calc(var(--peek) - var(--seat) * 1.3); gap: 2px; }
.show.stacked .bubble { display: none; }   /* phones: no room between the sign and the board; the board says it all (the audit 27/10) */
.show.stacked .seat .bzz { bottom: calc(var(--seat) * 1.35); }
.show.stacked .crowd { position: relative; left: 0; right: 0; bottom: auto; margin-top: 18px; }
.show.stacked .beam { height: 46%; }
.show:not(.stacked) .cast { bottom: calc(var(--host-h) * 0.3); }
/* wide screens: the whole show on one screen, no scrolling (owner 27/10: "o púlpito dos gatinhos não aparece... eu não vou ficar
   rolando"): the show is the screen's height and the board shrinks a little (quiz.js fit) when its words would push it past the edge */
.show:not(.stacked) { height: 100vh; height: 100svh; }
.show:not(.stacked) .qz { padding-bottom: 0; }
.board { zoom: var(--fit, 1); }
.show:not(.stacked) .qz-foot { margin-top: 8px; }
.show:not(.stacked) .qz { z-index: 5; }   /* the board in front of the crowd, so its keys are never under a head */
/* a lower crowd band on wide screens: their heads in front of the podiums' feet, never over Smoke's logo or the plates */
.show:not(.stacked) .crowd .row { height: 14vh; height: 14svh; object-fit: cover; object-position: 50% 0; }
@media (max-width: 640px) {
  body { font-size: 20px; }
  .qz-keys { grid-template-columns: 1fr; padding: 6px 14px 0; }
  .qz-screen { padding: 12px 14px 4px; min-height: 110px; }
  .qz-screen .q { font-size: 15px; }
  .qz-key { font-size: 22px; min-height: 52px; }
  .qz-bar { font-size: 11px; padding: 10px 12px 8px; }
  .qz-back, .qz-sound { font-size: 11px; padding: 8px 9px; }
  .qz-logo img { height: 20px; }
  .stamp { right: -10px; top: -34px; width: 150px; }
  .qz-keys.duo { grid-template-columns: 1fr 1fr; }
  .qz-pic { width: 120px; height: 130px; }
  .trailer { margin: 10px 14px 2px; }
  .trailer-sound { font-size: 11px; padding: 8px 10px; }
  .confetti { --t1: 560px; --t2: 760px; }
}
@media (prefers-reduced-motion: reduce) {
  .back, .host, .beam, .show.party .crowd .row, .applause.on, .confetti.on i { animation: none !important; }
  .curtain { display: none; }
}
@media (prefers-reduced-motion: reduce) { .seat .plate.run { justify-content: center; } .seat .plate.run b { padding-left: 0; animation: none; } }
@media (max-width: 640px) { .qz-foot { font-size: 19px; } .qz-one { font-size: 16px; } }