/* The game screens in the Squib look, to match the menu and the casino lobby: near-black glass,
   Inter type, gold kicker labels, warm gold neon script for the headlines and one hot pink.
   (The lobby itself lives in /shared/lobby.css; Pib and his bubble in host.css.) */

:root {
  --gx-gold: #ffd98a;
  --gx-gold-deep: #e0b04a;
  --gx-pink: #ff4f9a;
  --gx-pink-soft: #ff8cc4;
  --gx-ivory: #f6efe0;
  --gx-glass: linear-gradient(180deg, rgba(26,18,28,.9), rgba(11,8,15,.92));
  --gx-line: rgba(224,176,74,.32);
  --gx-hair: rgba(255,255,255,.1);
  --gx-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1.6vw 3.4vw -1vw rgba(0,0,0,.8);
  --gx-sans: "Quicksand", var(--body);
}

/* ---------- shared pieces ---------- */
.gx-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* between rounds: the next game's icon over its name */
.nx-logo { display: block; width: 9vw; height: 9vw; margin-bottom: 1.2vw; stroke-width: 2.2; }
.screen.active .nx-logo { animation: nx-pop .7s cubic-bezier(.2,1.4,.4,1) backwards; }
@keyframes nx-pop { from { opacity: 0; transform: scale(.6); } }
.gx-kicker { font-family: var(--gx-sans); font-size: .95vw; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--gx-gold); }
.gx-kicker + .gx-neon { margin-top: .7vw !important; }
.gx-sub { display: flex; align-items: center; gap: 1.1vw; margin-top: .4vw; font-family: var(--gx-sans); font-size: 1.25vw; font-weight: 500; color: rgba(255,255,255,.66); }
.gx-sub i { width: .32vw; height: .32vw; border-radius: 50%; background: var(--gx-pink); box-shadow: 0 0 .6vw var(--gx-pink); }

/* the neon script, the same tubes as the Squib sign */
.gx-neon { font-family: "Sacramento", cursive; font-size: 8vw; line-height: 1.15; font-weight: 400; color: #fff6dc; -webkit-text-stroke: .05vw #fff6dc;
  text-shadow: 0 0 1px #fff, 0 0 .25vw #ffe3a0, 0 0 .6vw #ffc35a, 0 0 1.3vw #ffa53a, 0 0 2.6vw rgba(255,150,50,.5);
  animation: gx-hum 5s ease-in-out infinite; padding: 0 .3em; }
.gx-neon.pink { color: #ffe6f1; -webkit-text-stroke-color: #ffe6f1;
  text-shadow: 0 0 1px #fff, 0 0 .25vw #ffb3d6, 0 0 .6vw #ff6fae, 0 0 1.3vw #ff4f9a, 0 0 2.6vw rgba(255,79,154,.55); }
@keyframes gx-hum { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.1); } }
/* tubes catching: a couple of stutters, then full */
.screen.active .gx-on, .gx-on.go { animation: gx-catch 1.1s steps(1, end) both, gx-hum 5s ease-in-out 1.1s infinite; }
@keyframes gx-catch {
  0% { opacity: 0; } 8% { opacity: .75; } 12% { opacity: .1; } 20% { opacity: .9; } 24% { opacity: .25; } 34%, 100% { opacity: 1; }
}

/* ---------- top bar: the round pill and the vote timer ---------- */
#topbar .pill { display: flex; align-items: center; gap: .9vw; height: 2.7vw; box-sizing: border-box; padding: 0 1.3vw; line-height: 1; border-radius: 999px;
  background: rgba(16,11,18,.72); border: 1px solid var(--gx-line); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 .8vw 1.8vw -.8vw rgba(0,0,0,.8);
  font-family: var(--gx-sans); font-size: .9vw; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--gx-gold); }
#round-pill b { font-weight: 700; color: #fff; letter-spacing: .12em; }
#round-pill .mult { padding-left: .9vw; border-left: 1px solid var(--gx-hair); color: var(--gx-pink-soft); letter-spacing: .08em; }
#topbar .pill.timer { min-width: 0; gap: .6vw; letter-spacing: .2em; }
#topbar .pill.timer::before { content: ""; width: .45vw; height: .45vw; border-radius: 50%; background: var(--gx-gold); box-shadow: 0 0 .6vw var(--gx-gold); }
#timer-num { font-size: 1.35vw; font-weight: 300; letter-spacing: 0; color: #fff; font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: center; }
#topbar .pill.timer.urgent { border-color: rgba(255,79,154,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 1.6vw -.2vw rgba(255,79,154,.6); }
#topbar .pill.timer.urgent::before { background: var(--gx-pink); box-shadow: 0 0 .7vw var(--gx-pink); animation: gx-blink .5s steps(1) infinite; }
#topbar .pill.timer.urgent #timer-num { color: var(--gx-pink-soft); }
@keyframes gx-blink { 50% { opacity: .2; } }
/* the tone toggle reads as glass outside the lobby too */
#topbar .icon-btn { font-family: var(--gx-sans); font-weight: 600; font-size: .8vw; letter-spacing: .14em; color: rgba(255,255,255,.82);
  background: rgba(16,11,18,.6); border-color: rgba(255,255,255,.14); }

/* ---------- screens ---------- */
.screen.active { animation: gx-in .6s cubic-bezier(.2,.8,.2,1); }
@keyframes gx-in { from { opacity: 0; transform: translateY(1vw); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* intro */
#s-intro .gx-neon { font-size: 10vw; margin: -.6vw 0 .2vw; }

/* answering: the round title and a thin gold clock */
#s-answering .gx-neon { font-size: 7.4vw; margin: -.4vw 0 0; }
.ring-wrap { position: relative; width: 13.5vw; height: 13.5vw; margin: 2.2vw auto 0; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-bg { fill: rgba(12,8,14,.6); stroke: rgba(255,255,255,.08); stroke-width: 2; }
.ring-fg { fill: none; stroke: var(--gx-gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke .4s; filter: drop-shadow(0 0 3px rgba(255,195,90,.8)); }
.ring-fg.urgent { stroke: var(--gx-pink); filter: drop-shadow(0 0 4px rgba(255,79,154,.9)); }
.ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--gx-sans); color: #fff; }
#ring-num { font-size: 4.6vw; font-weight: 200; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ans-progress { display: flex; gap: .55vw; margin-top: 1.6vw; min-height: 1.6vw; }
.ans-progress span { display: flex; align-items: center; gap: .45vw; padding: .32vw .8vw .32vw .55vw; border-radius: 999px; border: 1px solid var(--gx-hair);
  font-family: var(--gx-sans); font-size: .82vw; font-weight: 500; color: rgba(255,255,255,.5); transition: all .4s; }
.ans-progress span::before { content: ""; width: .45vw; height: .45vw; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); transition: all .4s; }
.ans-progress span.partial::before { border-color: var(--gx-gold); background: linear-gradient(90deg, var(--gx-gold) 50%, transparent 50%); }
.ans-progress span.done { color: #fff; border-color: var(--gx-line); }
.ans-progress span.done::before { border-color: var(--gx-gold); background: var(--gx-gold); box-shadow: 0 0 .6vw var(--gx-gold); }

/* ---------- showdown ---------- */
.stamp { font-size: 11vw; animation: gx-catch 1s steps(1, end) both, gx-hum 5s ease-in-out 1s infinite; }

/* the prompt and the answers sit in neon tubes: an SVG outline drawn round each box
   (index.html), lit in the "big beats" section below. The glass behind fills in once it's lit. */
.tube { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.tube rect { x: 1.5px; y: 1.5px; width: calc(100% - 3px); height: calc(100% - 3px); rx: 1.5vw; fill: none;
  stroke: var(--gx-gold); stroke-width: 2.5; stroke-dasharray: 100; stroke-dashoffset: 0; stroke-linecap: round;
  filter: drop-shadow(0 0 .3vw #ffb84d); transition: stroke .6s, stroke-width .6s, opacity .6s, filter .6s; }

.prompt-card { position: relative; max-width: 72vw; padding: 2.4vw 3.8vw 2.6vw; border-radius: 1.5vw; text-align: center; color: #fff;
  background-color: rgba(20,12,22,.86); box-shadow: 0 2vw 4vw -1vw rgba(0,0,0,.85), 0 0 6vw -1.4vw rgba(255,180,80,.22);
  transition: padding .6s cubic-bezier(.2,.8,.2,1), max-width .6s, margin .6s; }
.prompt-k { display: flex; align-items: center; justify-content: center; gap: .8vw; margin-bottom: .9vw;
  font-family: var(--gx-sans); font-size: .8vw; font-weight: 700; letter-spacing: .36em; text-transform: uppercase; color: var(--gx-pink-soft);
  text-shadow: 0 0 .6vw rgba(255,79,154,.6); transition: font-size .6s, margin .6s; }
.prompt-text { font-family: var(--gx-sans); font-size: 3vw; font-weight: 700; line-height: 1.18; letter-spacing: -.02em; text-wrap: balance; transition: font-size .6s cubic-bezier(.2,.8,.2,1); }
.prompt-card.small { padding: 1.1vw 2.4vw 1.3vw; margin-bottom: 2.4vw; max-width: 64vw; }
.prompt-card.small .tube rect { rx: 1.1vw; }
.prompt-card.small .prompt-k { margin-bottom: .45vw; font-size: .66vw; }
.prompt-card.small .prompt-text { font-size: 1.7vw; }

/* the two answers: dark glass in gold tubes, fed by one pink tube across the top */
.answers { position: relative; display: flex; align-items: stretch; gap: 2.4vw; width: 86vw; justify-content: center; }
.ans-rail { position: absolute; left: 28%; right: 28%; top: -1.3vw; height: 2px; border-radius: 2px; background: var(--gx-pink-soft);
  box-shadow: 0 0 .6vw var(--gx-pink); transform: scaleX(1); }
.answer-card { flex: 1; max-width: 37vw; min-height: 21vh; position: relative; display: flex; flex-direction: column; justify-content: center;
  padding: 2vw 2.2vw 1.4vw; border-radius: 1.5vw; background-color: rgba(20,12,22,.86); box-shadow: var(--gx-shadow); color: #fff;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s, filter .6s, box-shadow .6s; }
#ans-a .tube { transform: scaleX(-1); } /* so both tubes start drawing from the middle and run outward */
.answer-text { flex: 1; display: flex; align-items: center; justify-content: center; font-family: var(--gx-sans); font-size: 2.3vw; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; text-align: center; overflow-wrap: anywhere; text-wrap: balance; }
.answer-text.empty { color: rgba(255,255,255,.35); font-weight: 500; font-style: italic; }
.answer-meta { display: flex; justify-content: space-between; align-items: center; gap: 1vw; margin-top: 1.6vw; padding-top: 1vw; border-top: 1px solid var(--gx-hair); min-height: 2.6vw;
  font-family: var(--gx-sans); }
.answer-card:not(.revealed) .answer-meta { display: none; }
.answer-name { display: flex; align-items: center; gap: .55vw; font-size: 1.15vw; font-weight: 600; color: #fff; opacity: 0; transform: translateY(.5vw); transition: all .5s .1s; }
.answer-name .guy-mini { width: 2.8vw; height: 2.8vw; margin: -.6vw 0; flex: none; }
.answer-name .guy-mini svg { width: 100%; height: 100%; display: block; overflow: visible; }
.answer-votes { font-size: .8vw; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.55); opacity: 0; transition: opacity .5s .35s; }
.answer-card.revealed .answer-name, .answer-card.revealed .answer-votes { opacity: 1; transform: none; }
.answer-card.winner { transform: translateY(-.5vw) scale(1.03); box-shadow: 0 1.6vw 3.4vw -1vw rgba(0,0,0,.8), 0 0 4vw -.6vw rgba(255,180,60,.55); }
.answer-card.winner .tube rect { stroke: #ffe6a8; stroke-width: 3.5; filter: drop-shadow(0 0 .4vw #ffb84d) drop-shadow(0 0 1.2vw rgba(255,170,60,.7)); }
.answer-card.loser .tube rect { opacity: .35; filter: none; }
.answer-card.tie .tube rect { stroke: var(--gx-pink-soft); filter: drop-shadow(0 0 .5vw var(--gx-pink)); }
.answer-card.winner .answer-votes { color: var(--gx-gold); }
.answer-card.loser { opacity: .5; filter: saturate(.4); transform: scale(.97); }
.answer-card.tie { box-shadow: var(--gx-shadow), 0 0 3vw -.6vw rgba(255,79,154,.55); }
.vs { align-self: center; font-family: "Sacramento", cursive; font-size: 4.4vw; color: #ffe6f1;
  text-shadow: 0 0 1px #fff, 0 0 .5vw #ff6fae, 0 0 1.4vw #ff4f9a; animation: gx-catch .9s steps(1, end) .4s both, gx-hum 4.4s ease-in-out 1.3s infinite; }

/* voting: a glass pill with one bulb per voter */
.vote-status { display: flex; align-items: center; gap: 1.1vw; margin-top: 1.8vw; padding: .65vw 1.4vw; border-radius: 999px;
  background: rgba(16,11,18,.72); border: 1px solid var(--gx-line); font-family: var(--gx-sans); }
.vote-k { font-size: .82vw; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gx-gold); }
.vote-dots { display: flex; gap: .4vw; }
.vote-dots i { width: .6vw; height: .6vw; border-radius: 50%; background: rgba(255,255,255,.12); transition: background .3s, box-shadow .3s; }
.vote-dots i.on { background: var(--gx-gold); box-shadow: 0 0 .7vw var(--gx-gold); }
.vote-n { font-size: .95vw; font-weight: 500; color: rgba(255,255,255,.6); }
.vote-n b { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* under the answers, one fixed-height slot: the vote pill while voting, LANDSLIDE on a sweep */
.sd-foot { position: relative; height: 8.4vw; width: 100%; display: flex; justify-content: center; align-items: flex-start; }
.landslide { position: absolute; top: .4vw; display: flex; flex-direction: column; align-items: center; z-index: 5; pointer-events: none; }
.landslide .gx-neon { font-size: 5vw; line-height: 1; animation: neon-write 1.1s cubic-bezier(.45,0,.35,1) both, gx-hum 4s ease-in-out 1.1s infinite; }

/* ---------- the standings heading (the piles themselves are further down) ---------- */
.sb-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 1vh; }
.sb-head .gx-neon { font-size: 5.6vw; line-height: 1.05; }
@keyframes sb-tag { from { opacity: 0; transform: translateY(.4em) scale(.8); } to { opacity: 1; transform: none; } }

/* ---------- final ---------- */
.winner-card { display: flex; align-items: center; gap: 2.4vw; animation: gx-in .9s cubic-bezier(.2,.8,.2,1) both; }
.winner-guy { width: 7.5vw; height: 7.5vw; position: relative; filter: drop-shadow(0 0 2vw rgba(255,180,60,.35)); animation: gx-float 3.2s ease-in-out infinite alternate; }
.winner-guy svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
@keyframes gx-float { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-.8vw) rotate(2deg); } }
.winner-text { display: flex; flex-direction: column; align-items: flex-start; }
.winner-label { font-size: 3.4vw; line-height: 1; padding: 0; margin-left: -.1em; }
.winner-name { font-family: var(--gx-sans); font-size: 4.4vw; font-weight: 800; line-height: 1.02; letter-spacing: -.04em; padding-bottom: .06em;
  background: linear-gradient(180deg, #fffaf0 0%, #ffe6a8 55%, #e0b04a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 1.4vw rgba(255,180,60,.4)); max-width: 44vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.final-hint { margin-top: 1.6vh; font-family: var(--gx-sans); font-size: 1vw; font-weight: 500; color: rgba(255,255,255,.6); min-height: 1.4em; }
/* gold and champagne ribbons and a few pink ones, falling slow and catching the light */
.confetti { position: absolute; inset: -12vh 0 -22vh; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -3vh; width: .35vw; height: 1.3vw; border-radius: 1px; opacity: .9; animation: gx-fall linear infinite; }
.confetti i.glint { width: .5vw; height: .5vw; border-radius: 50%; filter: blur(.5px); box-shadow: 0 0 .8vw currentColor; }
@keyframes gx-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0) rotateY(0); }
  100% { transform: translate3d(var(--drift, 2vw), 120vh, 0) rotate(540deg) rotateY(900deg); }
}


/* ================= the big beats: animations built for each moment ================= */

/* a full-screen wash: pink when time runs out, gold on a landslide */
.flash { position: fixed; inset: 0; z-index: 25; pointer-events: none; opacity: 0; }
.flash.pink { background: radial-gradient(70% 60% at 50% 42%, rgba(255,79,154,.32), rgba(255,79,154,.08) 55%, transparent 80%); animation: gx-flash 1.2s ease-out; }
.flash.gold { background: radial-gradient(70% 60% at 50% 42%, rgba(255,200,110,.3), rgba(255,180,60,.07) 55%, transparent 80%); animation: gx-flash 1.4s ease-out; }
@keyframes gx-flash { 0% { opacity: 0; } 8% { opacity: 1; } 16% { opacity: .35; } 24% { opacity: .9; } 100% { opacity: 0; } }

/* the round pill: the new round rises into the pill as it glows */
.pill-in { display: flex; align-items: center; gap: .9vw; }
#round-pill.swap { animation: pill-glow 1.4s ease-out; }
#round-pill.swap .pill-in { animation: pill-in .7s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes pill-in { from { opacity: 0; transform: translateY(80%); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pill-glow { 0% { box-shadow: 0 0 0 0 rgba(255,217,138,0); border-color: var(--gx-line); } 25% { box-shadow: 0 0 2vw -.2vw rgba(255,195,90,.65); border-color: rgba(255,217,138,.9); } 100% { box-shadow: 0 0 0 0 rgba(255,217,138,0); } }

/* title cards: the kicker tracks in tight, the subtitle arrives a piece at a time */
.screen.active .gx-card > .gx-kicker, .screen.active .sb-head > .gx-kicker { animation: kick-in 1.1s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes kick-in { from { opacity: 0; letter-spacing: 1em; filter: blur(4px); } to { opacity: 1; filter: none; } }
.screen.active .gx-sub > * { animation: sub-in .7s cubic-bezier(.2,.8,.2,1) backwards; }
.screen.active .gx-sub > :nth-child(1) { animation-delay: .9s; }
.screen.active .gx-sub > :nth-child(2) { animation-delay: 1.15s; }
.screen.active .gx-sub > :nth-child(3) { animation-delay: 1.3s; }
.screen.active .gx-sub > :nth-child(4) { animation-delay: 1.55s; }
.screen.active .gx-sub > :nth-child(5) { animation-delay: 1.7s; }
@keyframes sub-in { from { opacity: 0; transform: translateY(.5vw); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

/* answering: the clock draws itself in, ticks with a halo in the last ten seconds,
   and each player's chip pops gold with a ring when they finish */
.screen.active .ring-fg { animation: ring-draw 1.4s cubic-bezier(.4,0,.2,1) .3s backwards; }
@keyframes ring-draw { from { stroke-dashoffset: 326.7; } }
.ring-wrap::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gx-pink); opacity: 0; pointer-events: none; }
.ring-wrap.tick::after { animation: halo .9s ease-out; }
@keyframes halo { from { opacity: .7; transform: scale(.96); } to { opacity: 0; transform: scale(1.28); } }
#ring-num.tick { animation: num-tick .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes num-tick { from { transform: scale(1.22); color: var(--gx-pink-soft); } to { transform: none; } }
.ans-progress span { position: relative; }
.ans-progress span.just { animation: chip-done .7s cubic-bezier(.2,1.5,.4,1); }
.ans-progress span.just::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--gx-gold); pointer-events: none; animation: chip-ring .8s ease-out forwards; }
@keyframes chip-done { 0% { transform: scale(1); } 35% { transform: scale(1.18); box-shadow: 0 0 1.6vw -.2vw rgba(255,195,90,.8); } 100% { transform: none; } }
@keyframes chip-ring { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.35, 1.9); } }

/* time's up: the sign stutters on and settles */
.stamp { animation: neon-write 1.2s cubic-bezier(.45,0,.35,1) both, gx-hum 5s ease-in-out 1.2s infinite; }

/* the prompt: a pink tube draws its frame, stutters like a sign striking and settles warm gold,
   the glass fills in behind it, then the words breathe in out of a blur */
.prompt-card.drawing:not(.small) { animation: pc-glass 1.7s ease-out both; }
.prompt-card.drawing:not(.small) .tube rect { animation: tube-strike 1.7s linear both; }
.prompt-card.drawing:not(.small) .prompt-k { animation: breathe .7s cubic-bezier(.2,.8,.2,1) 1.2s backwards; }
.prompt-card.drawing:not(.small) .prompt-text .w { animation: breathe .8s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(1.35s + var(--w) * .07s); }
.prompt-text .w { display: inline-block; }
@keyframes pc-glass { 0%, 62% { background-color: rgba(20,12,22,0); box-shadow: none; } 100% { background-color: rgba(20,12,22,.86); } }
@keyframes tube-strike {
  0% { stroke-dashoffset: 100; stroke: var(--gx-pink-soft); filter: drop-shadow(0 0 .4vw var(--gx-pink)); opacity: 1; }
  62% { stroke-dashoffset: 0; stroke: var(--gx-pink-soft); opacity: 1; }
  66% { opacity: .12; } 69% { opacity: 1; } 72% { opacity: .3; }
  78%, 100% { stroke-dashoffset: 0; stroke: var(--gx-gold); filter: drop-shadow(0 0 .3vw #ffb84d); opacity: 1; }
}
@keyframes breathe { from { opacity: 0; filter: blur(8px); transform: translateY(.3em); } to { opacity: 1; filter: none; transform: none; } }

/* the answers: the pink rail lights from the middle out, both frames draw outward from it,
   the glass fills, then each answer breathes in */
#answers.drawing .ans-rail { animation: rail .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rail { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#answers.drawing .answer-card { animation: pc-glass 1.4s ease-out both; }
#answers.drawing #ans-b { animation-delay: .12s; }
#answers.drawing .tube rect { animation: tube-draw 1s cubic-bezier(.4,0,.2,1) .35s both; }
#answers.drawing #ans-b .tube rect { animation-delay: .47s; }
@keyframes tube-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
#answers.drawing .answer-text { animation: breathe .8s cubic-bezier(.2,.8,.2,1) 1.05s backwards; }
#answers.drawing #ans-b .answer-text { animation-delay: 1.2s; }
#answers.drawing .vs { animation: gx-catch .9s steps(1, end) .5s both, gx-hum 4.4s ease-in-out 1.4s infinite; }

/* votes: each bulb lights with a pop */
.vote-dots i.on { animation: dot-on .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes dot-on { from { transform: scale(2.2); background: #fff; box-shadow: 0 0 1.4vw #fff; } to { transform: none; } }

/* results: a light sweeps across the winning card; a tie pulses both pink;
   a landslide bursts gold sparks off the winner (sparks.js) */
.answer-card.winner::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,226,160,.14) 47%, rgba(255,255,255,.26) 50%, rgba(255,226,160,.14) 53%, transparent 62%);
  background-size: 260% 100%; background-repeat: no-repeat; animation: card-sweep 1.4s cubic-bezier(.3,.6,.3,1) .45s both; }
@keyframes card-sweep { from { background-position: 135% 0; } to { background-position: -35% 0; } }
#answers .answer-card.tie { animation: tie-pulse 1.1s ease-out 2; }
@keyframes tie-pulse { 0% { box-shadow: var(--gx-shadow), 0 0 0 0 rgba(255,79,154,.7); } 100% { box-shadow: var(--gx-shadow), 0 0 0 1.4vw rgba(255,79,154,0); } }
/* totals bump as they land; ranks roll over */
@keyframes rank-roll { from { opacity: 0; transform: translateY(-.55em) rotateX(70deg); } to { opacity: 1; transform: none; } }

/* the final: a spotlight swings in and finds the winner, who drops in; the name rises letter
   by letter, the score counts up, then the confetti and the board */
#s-final > * { position: relative; z-index: 1; }
#s-final > .spotlight, #s-final > .confetti { position: absolute; z-index: 0; }
.spotlight { left: 50%; top: -30vh; width: 56vw; height: 120vh; margin-left: -28vw; transform-origin: 50% 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(255,236,190,.26), rgba(255,226,170,.08) 55%, transparent 78%);
  clip-path: polygon(46% 0, 54% 0, 84% 100%, 16% 100%); filter: blur(1.4vw); }
#s-final.active .spotlight { animation: spot-sweep 2s cubic-bezier(.45,0,.2,1) .1s forwards, spot-breathe 4s ease-in-out 2.1s infinite alternate; }
@keyframes spot-sweep { 0% { opacity: 0; transform: rotate(38deg); } 15% { opacity: .9; } 60% { transform: rotate(-12deg); } 82% { transform: rotate(4deg); } 100% { opacity: 1; transform: rotate(0); } }
@keyframes spot-breathe { from { opacity: 1; } to { opacity: .8; } }
#s-final.active .winner-card { animation: none; }
#s-final.active .winner-label { animation-delay: 1.5s, 2.9s; }
#s-final.active .winner-guy { animation: guy-drop 1s cubic-bezier(.3,1.45,.5,1) 1.6s backwards, gx-float 3.2s ease-in-out 2.6s infinite alternate; }
@keyframes guy-drop { from { opacity: 0; transform: translateY(-46vh) rotate(-24deg) scale(.8); } 60% { opacity: 1; } to { transform: none; } }
.winner-name { background: none; color: transparent; } /* keeps its warm glow; each letter carries the gold */
.winner-name .l { display: inline-block; white-space: pre;
  background: linear-gradient(180deg, #fffaf0 0%, #ffe6a8 55%, #e0b04a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: letter-up .85s cubic-bezier(.2,1.25,.3,1) backwards; animation-delay: calc(2s + var(--l) * .06s); }
@keyframes letter-up { from { opacity: 0; transform: translateY(.55em) rotate(8deg) scale(.9); filter: blur(6px); } }


@media (prefers-reduced-motion: reduce) {
  .prompt-card, .tube rect, .answer-card, .answer-text, .prompt-text .w, .sparks, .flash, .spotlight, .winner-name .l, .winner-guy { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* ================= the floor show: chips, the pot, the room ================= */

/* The chips themselves are painted on canvas (chips.js): one canvas per pile, standing on the
   bottom-centre of its anchor element. */
.chip-canvas { position: absolute; pointer-events: none; }

/* 1. vote chips: a stack for every vote (1 to 7) in a row under each answer, every other
   stack set a little further back */
.vchips { --cw: 2.9vw; position: absolute; left: 50%; top: calc(100% + 5.4vw); width: 0; height: 0; z-index: 2; pointer-events: none; }
.answer-card.loser .vchips { opacity: 1; }

/* 4. the pot: chips stacked beside the clock, a stack more as the multiplier climbs */
.ring-row { display: flex; align-items: center; justify-content: center; gap: 3.4vw; margin-top: 2.2vw; }
.ring-row .ring-wrap { margin: 0; }
.pot { position: relative; width: 15vw; height: 7vw; isolation: isolate; }
.pot::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -.5vw; height: 1.4vw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,195,90,.18), transparent); }
.pot-mult { width: 15vw; display: flex; flex-direction: column; align-items: flex-start; font-family: var(--gx-sans); }
#pot-mult { font-size: 3.6vw; font-weight: 200; line-height: 1; letter-spacing: -.03em; color: var(--gx-gold); text-shadow: 0 0 1.2vw rgba(255,195,90,.45); font-variant-numeric: tabular-nums; }
#pot-mult.swap { animation: mult-in .9s cubic-bezier(.2,1.3,.3,1) .5s backwards; }
@keyframes mult-in { from { opacity: 0; transform: translateY(.6em) scale(.8); filter: blur(6px); } }

/* 5. the room's heartbeat: the edges of the screen throb pink with each of the last seconds */
.room-beat { position: fixed; inset: 0; z-index: 24; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 95% at 50% 45%, transparent 55%, rgba(255,79,154,.16) 78%, rgba(255,40,120,.34) 100%); }
.room-beat.beat { animation: room-beat .95s ease-out; }
@keyframes room-beat { 0% { opacity: 0; } 9% { opacity: 1; } 22% { opacity: .55; } 30% { opacity: .8; } 100% { opacity: 0; } }

/* 6. changing screen: the old one powers down like a sign switched off, while the new one's
   neon writes itself in (titles left to right, tubes round their frames) throwing sparks
   (sparks.js) */
.screen.leaving { display: flex; z-index: 1; pointer-events: none; animation: power-off .42s ease-out both; }
@keyframes power-off {
  0% { opacity: 1; filter: brightness(1); }
  18% { opacity: .35; filter: brightness(1.6); }
  30% { opacity: .9; filter: brightness(1.3); }
  100% { opacity: 0; filter: brightness(.4); transform: scale(.985); }
}
.sparks-canvas { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 28; pointer-events: none; }
/* a neon title writing itself: revealed left to right behind the spark, then a stutter as the
   tube strikes */
.screen.active .gx-write { animation: neon-write 1.4s cubic-bezier(.45,0,.35,1) both, gx-hum 5s ease-in-out 1.4s infinite; }
@keyframes neon-write {
  0% { clip-path: inset(-40% 100% -40% -10%); opacity: 1; }
  78% { clip-path: inset(-40% -10% -40% -10%); opacity: 1; }
  83% { opacity: .3; } 87% { opacity: 1; } 91% { opacity: .55; }
  100% { clip-path: inset(-40% -10% -40% -10%); opacity: 1; }
}

/* 7. a jolt through the room when Pib's words slam in */
#stage.jolt, .casino-room.jolt { animation: jolt .42s cubic-bezier(.3,.7,.4,1); }
@keyframes jolt { 0% { transform: none; } 15% { transform: translate(-.45vw, .3vw); } 35% { transform: translate(.38vw, -.22vw); } 55% { transform: translate(-.22vw, .14vw); } 75% { transform: translate(.1vw, -.06vw); } 100% { transform: none; } }

/* 8. the final: neon fireworks behind the winner, and their name in a chasing marquee */
.fireworks { position: absolute; inset: -14vh 0 -10vh; pointer-events: none; z-index: 0; }
#s-final > .fireworks { position: absolute; z-index: 0; }
.fw { position: absolute; width: 0; height: 0; animation: fw-fall 1.9s ease-in forwards; }
@keyframes fw-fall { 0% { transform: none; opacity: 1; } 65% { opacity: 1; } 100% { transform: translateY(6vh); opacity: 0; } }
.fw i { position: absolute; left: -.09vw; top: 0; width: .18vw; height: 1.3vw; border-radius: 1vw; transform-origin: 50% 0;
  background: linear-gradient(180deg, transparent, var(--c)); box-shadow: 0 0 .5vw var(--c), 0 0 1.2vw var(--c);
  animation: fw-burst 1.3s cubic-bezier(.05,.75,.3,1) forwards; }
@keyframes fw-burst { from { transform: rotate(var(--a)) translateY(0) scaleY(.15); } to { transform: rotate(var(--a)) translateY(var(--d)) scaleY(.55); } }
.fw b { position: absolute; left: -2.5vw; top: -2.5vw; width: 5vw; height: 5vw; border-radius: 50%;
  background: radial-gradient(closest-side, #fff, var(--c) 30%, transparent); animation: fw-flash .5s ease-out forwards; }
@keyframes fw-flash { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.marquee { position: relative; padding: .45vw 1.7vw .7vw; margin: .3vw 0 .2vw -.4vw; border-radius: 1vw; border: 1px solid rgba(224,176,74,.4);
  background: linear-gradient(180deg, rgba(28,18,25,.75), rgba(12,8,14,.75)); }
#s-final.active .marquee { animation: breathe .8s cubic-bezier(.2,.8,.2,1) 1.9s backwards; }
.marquee .mb { position: absolute; width: .5vw; height: .5vw; margin: -.25vw 0 0 -.25vw; border-radius: 50%; background: #3b2a1a;
  transition: background .2s, box-shadow .2s; transition-delay: var(--d); }
.marquee.lit .mb { background: #fff3cf; box-shadow: 0 0 .4vw #ffc35a, 0 0 1vw rgba(255,165,58,.7); animation: bulb-chase .9s steps(1) infinite; animation-delay: var(--c2); }
@keyframes bulb-chase { 0% { opacity: 1; } 33% { opacity: .45; } 66% { opacity: .8; } }

/* 9. a neon sign far in the back of the room, out of focus, that sputters now and then */
.back-sign { position: fixed; right: 3vw; top: 13vh; z-index: 0; pointer-events: none; transform: rotate(-5deg); filter: blur(2.6px); opacity: .26; }
.back-sign span { display: block; font-family: "Sacramento", cursive; font-size: 7.5vw; line-height: 1; color: #ffe6f1;
  text-shadow: 0 0 .3vw #ff8cc4, 0 0 1vw #ff4f9a, 0 0 2.4vw #ff4f9a; animation: sign-sputter 13s steps(1, end) infinite; }
@keyframes sign-sputter { 0%, 60% { opacity: 1; } 61% { opacity: .15; } 61.6% { opacity: .9; } 62.4% { opacity: .1; } 63.4%, 88% { opacity: 1; } 89% { opacity: .5; } 90%, 100% { opacity: 1; } }
body.lobby .back-sign, body.menu .back-sign { display: none; }

@media (prefers-reduced-motion: reduce) {
  .room-beat, #stage.jolt, .fw, .back-sign span, .screen.active .gx-write, .stamp, .landslide .gx-neon { animation: none !important; }
  .screen.leaving { display: none; }
}

/* ================= the chip towers: the standings as everyone's pile of chips ================= */
/* One pile per player, in rank order. Each round's winnings drop onto the piles, the piles slide
   into their new order, and the leader is lit gold. Sizes come from host.js (buildTowers):
   --slot (a pile's width), --i (its place), --top (its pile's height in chip widths). */
.towers { --slot: 9vw; --pcw: 2.4vw; --base: 8.8vw; position: relative; width: calc(var(--n, 1) * var(--slot)); height: min(46vh, 26vw); margin-top: .6vw; }
/* the felt rail the piles stand on: a gold tube that draws itself across */
.towers::after { content: ""; position: absolute; left: -2vw; right: -2vw; bottom: var(--base); height: 2px; border-radius: 2px;
  background: var(--gx-gold); box-shadow: 0 0 .5vw #ffb84d, 0 0 1.4vw rgba(255,165,60,.5); transform-origin: 0 50%; }
.screen.active .towers::after { animation: rail-draw .9s cubic-bezier(.45,0,.35,1) .15s both; }
@keyframes rail-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tw { position: absolute; top: 0; bottom: 0; left: calc(var(--i) * var(--slot)); width: var(--slot);
  transition: left .95s cubic-bezier(.65,0,.25,1); animation: breathe .6s cubic-bezier(.2,.8,.2,1) backwards; }
.tw.moving { z-index: 2; }
.tw.moving.up .pile { transform: translateY(-.6vw); }

/* a messy pile (host.js buildTowers, drawn by chips.js): stacks of one colour each, the rows
   further back standing a little higher */
.pile { position: absolute; left: 50%; bottom: calc(var(--base) + .3vw); width: 0; height: 0; isolation: isolate; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
/* a chip value: a little plaque with a casino chip on it (sea.css swaps the chip for a doubloon) */
.chip-val { display: inline-flex; align-items: center; gap: .45vw; padding: .22vw .7vw .22vw .3vw; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font-family: var(--gx-sans); font-size: 1vw; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--gx-gold);
  background: rgba(16,11,18,.86); border: 1px solid var(--gx-line); box-shadow: 0 .5vw 1vw -.5vw rgba(0,0,0,.8); }
.chip-val::before { content: ""; flex: none; width: 1vw; height: 1vw; border-radius: 50%;
  background: radial-gradient(circle, #e2b11d 0 34%, #fff0c0 36% 40%, transparent 42%), repeating-conic-gradient(#e2b11d 0 30deg, #f6efe0 30deg 45deg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.chip-val b { font-weight: 700; }
/* where they sit: under the pot, and under each answer's chips */
.pot .chip-val { position: absolute; left: 50%; bottom: -1.9vw; transform: translateX(-50%); }
.vchips .chip-val { position: absolute; left: 0; top: .5vw; transform: translateX(-50%); }
.vchips .chip-val::after { content: "won"; font-weight: 500; font-size: .75vw; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.tw.lead .chip-val { color: #2a1a08; background: linear-gradient(180deg, #fff0c0, #e0b04a); border-color: transparent; }
.ft-slot.win .chip-val { font-size: 1.4vw; }
/* over the pile, riding up as it grows: only the Leader tag. The score sits under the rail, over the guy. */
.tw-label { position: absolute; left: 0; right: 0; bottom: calc(var(--base) + var(--top, 0) * var(--pcw) + 1.2vw); display: flex; flex-direction: column; align-items: center; gap: .25vw;
  font-family: var(--gx-sans); transition: bottom .3s cubic-bezier(.2,.8,.2,1); }
.tw-base { position: absolute; left: 0; right: 0; bottom: 0; height: var(--base); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .2vw; padding-top: .7vw; font-family: var(--gx-sans); }
.tw-guy { width: 2.7vw; height: 2.7vw; position: relative; }
.tw-guy svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tw-name { max-width: 92%; font-size: .9vw; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-rank { font-size: .64vw; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.45); display: inline-block; }
.tw-rank.roll { animation: rank-roll .55s cubic-bezier(.2,.8,.2,1); }
.tw.gone { opacity: .45; }
/* the leader: a gold spot from above, gold numbers, and a tag */
.tw::before { content: ""; position: absolute; left: -30%; right: -30%; top: -12vh; bottom: calc(var(--base) - .5vw); pointer-events: none; opacity: 0;
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255,236,190,.2), rgba(255,226,170,.06) 70%, transparent); filter: blur(.8vw);
  transition: opacity .8s; }
.tw.lead::before { opacity: 1; }
.tw.lead .tw-name { color: var(--gx-gold); }
.tw.lead .tw-rank { color: var(--gx-gold); }
.tw.lead .tw-label::before { content: "Leader"; order: -1; padding: .12em .7em; border-radius: 999px; font-size: .6vw; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: #2a1a08; background: linear-gradient(180deg, #fff0c0, #e0b04a); animation: sb-tag .5s cubic-bezier(.2,1.4,.4,1) both; }

/* the final table: the champion's mountain of chips in the middle, everyone else's little piles
   either side, all on a gold rail */
.chip-table { --pcw: 1.9vw; --base: 6.8vw; position: relative; display: flex; align-items: stretch; justify-content: center; gap: .4vw; width: 88vw; height: min(40vh, 22vw); margin-top: .4vw; }
.chip-table::after { content: ""; position: absolute; left: 4vw; right: 4vw; bottom: var(--base); height: 2px; border-radius: 2px;
  background: var(--gx-gold); box-shadow: 0 0 .5vw #ffb84d, 0 0 1.4vw rgba(255,165,60,.5); transform-origin: 50% 50%; }
#s-final.active .chip-table::after { animation: rail-draw 1s cubic-bezier(.45,0,.35,1) 2.4s both; }
.ft-slot { position: relative; flex: none; width: 7.6vw; animation: breathe .6s cubic-bezier(.2,.8,.2,1) backwards; }
.ft-slot.win { --pcw: 3.1vw; width: 17vw; }
.ft-slot .tw-base { padding-top: .5vw; gap: .2vw; }
.ft-slot .tw-guy { width: 2.2vw; height: 2.2vw; }
.ft-slot.win .tw-name { color: var(--gx-gold); }

/* the next question: the old cards power down while their chip piles slide off the sides of the
   screen, then the new prompt draws (host.js renderShowdown) */
#answers.clearing .answer-card { animation: glass-off .4s ease-in forwards !important; }
#answers.clearing .answer-card.loser { opacity: 1; filter: none; }
@keyframes glass-off { to { background-color: rgba(20,12,22,0); box-shadow: none; } }
#answers.clearing .answer-card > :not(.vchips), #answers.clearing .vs, #answers.clearing .ans-rail { opacity: 0; transition: opacity .35s; }
#answers.clearing .vs { animation: none; } /* its own neon animation would otherwise hold it lit */
#answers.clearing #ans-a .vchips { transform: translateX(-75vw); transition: transform .75s cubic-bezier(.55,0,.75,.2); }
#answers.clearing #ans-b .vchips { transform: translateX(75vw); transition: transform .75s cubic-bezier(.55,0,.75,.2); }
.prompt-card.clearing { opacity: 0; transition: opacity .35s; }

/* a Squibslide: the X through the losing answer, the winner popping out, fireworks behind */
#s-showdown > .fireworks { position: absolute; inset: -10vh 0 -6vh; z-index: 0; }
#s-showdown > .prompt-card, #s-showdown > .answers, #s-showdown > .sd-foot { z-index: 1; }
.x-mark { position: absolute; z-index: 4; pointer-events: none; overflow: visible; transition: opacity .35s;
  animation: x-slam .35s cubic-bezier(.2,1.5,.4,1) both; }
.x-mark line { fill: none; stroke: #ff4f7a; stroke-width: 1.1vw; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 .5vw #ff2d6a) drop-shadow(0 0 1.4vw rgba(255,45,106,.6));
  animation: x-draw .26s cubic-bezier(.5,0,.75,0) forwards; }
.x-mark line:nth-child(2) { animation-delay: .18s; }
@keyframes x-draw { to { stroke-dashoffset: 0; } }
@keyframes x-slam { from { transform: scale(1.35); opacity: 0; } 30% { opacity: 1; } to { transform: none; } }
#answers.clearing .x-mark { opacity: 0; }
#answers .answer-card.loser.crossed { opacity: .8; filter: saturate(.35) brightness(.8); animation: x-shake .5s cubic-bezier(.3,.7,.4,1) .2s; }
@keyframes x-shake { 0%, 100% { transform: scale(.97); } 20% { transform: scale(.97) translateX(-1.2vw) rotate(-1.5deg); } 40% { transform: scale(.97) translateX(1vw) rotate(1.2deg); }
  60% { transform: scale(.97) translateX(-.6vw); } 80% { transform: scale(.97) translateX(.3vw); } }
#answers .answer-card.winner.champ { z-index: 3; transform: translateY(-1vw) scale(1.08); animation: champ-pop .9s cubic-bezier(.2,1.5,.4,1); }
@keyframes champ-pop {
  0% { transform: translateY(-.5vw) scale(1.03); box-shadow: 0 0 0 0 rgba(255,217,138,.9), 0 0 4vw -.6vw rgba(255,180,60,.55); }
  35% { transform: translateY(-1.6vw) scale(1.16); }
  100% { transform: translateY(-1vw) scale(1.08); box-shadow: 0 0 0 3vw rgba(255,217,138,0), 0 0 6vw .4vw rgba(255,180,60,.6); }
}

/* a stamp: a word slapped across a losing answer after a close vote (host.js stampAnswer) */
.ans-stamp { position: absolute; z-index: 6; pointer-events: none; padding: .5vw 1.4vw .3vw; border-radius: .8vw; white-space: nowrap;
  font: 400 3.2vw/1 "Quicksand", sans-serif; letter-spacing: .03em; color: #fff; text-shadow: 0 .06em 0 #1a0b24;
  background: rgba(10,4,18,.82); box-shadow: inset 0 0 0 .22vw rgba(255,255,255,.85), 0 .6vw 1.6vw rgba(0,0,0,.6);
  transform: translate(-50%, -50%) rotate(-9deg); animation: ans-stamp .42s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes ans-stamp { 0% { transform: translate(-50%, -50%) rotate(-24deg) scale(2.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(-9deg) scale(1); } }

/* ================= one-shots: a giant word slammed over the whole TV at a loser ================= */

.oneshot { position: fixed; inset: 0; z-index: 60; pointer-events: none; display: grid; place-content: center; justify-items: center;
  gap: 2vh; overflow: hidden; background: rgba(10, 4, 18, .82); animation: os-in .18s ease-out, os-out .35s ease-in 1.95s forwards; }
.os-rays { position: absolute; inset: -50%; opacity: .32; animation: os-spin 6s linear infinite;
  background: repeating-conic-gradient(#ff4f9a 0 7.5deg, #ffb020 7.5deg 15deg, #5ed64b 15deg 22.5deg, #35b8ff 22.5deg 30deg, #a98bff 30deg 37.5deg, transparent 37.5deg 45deg);
  -webkit-mask: radial-gradient(circle, transparent 12%, #000 55%); mask: radial-gradient(circle, transparent 12%, #000 55%); }
.os-word { position: relative; max-width: 92vw; text-align: center; line-height: .95; font-family: "Quicksand", "Quicksand", sans-serif;
  font-size: clamp(48px, 13vw, 220px); color: #fff; letter-spacing: .02em; text-shadow: 0 .06em 0 #1a0b24, 0 0 .3em rgba(255, 255, 255, .25);
  animation: os-punch .5s cubic-bezier(.2, 1.6, .4, 1); }
.os-word.long { font-size: clamp(36px, 8vw, 140px); }
.os-name { position: relative; font-family: "Quicksand", sans-serif; font-weight: 900; font-size: clamp(18px, 3.2vw, 52px); color: #fff;
  letter-spacing: .2em; text-transform: uppercase; opacity: 0; animation: os-name .3s ease-out .45s forwards; }
.os-name::before { content: "\2192  "; color: #ff4f9a; }
@keyframes os-in { from { opacity: 0; } }
@keyframes os-out { to { opacity: 0; transform: scale(1.06); } }
@keyframes os-spin { to { transform: rotate(360deg); } }
@keyframes os-punch { 0% { transform: scale(3.2) rotate(-6deg); opacity: 0; } 60% { transform: scale(.94) rotate(1deg); opacity: 1; } 100% { transform: none; } }
@keyframes os-name { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .os-rays { animation: none; }
  .os-word { animation-duration: .01s; }
}

/* ---------- Bad Art: the board, the guesses, the answer ---------- */
#s-draw { justify-content: flex-start; padding-top: 4.6vw; }
.dg-head { display: flex; flex-direction: column; align-items: center; }
.dg-title { font-size: 4.2vw; line-height: 1.05; white-space: nowrap; }
.dg-title.long { font-size: 3.4vw; }
.dg-stage { display: grid; grid-template-columns: 38vw 24vw; gap: 2.4vw; align-items: start; margin-top: .8vw; }
.dg-board { position: relative; border-radius: 1.4vw; padding: .22vw;
  background: linear-gradient(135deg, rgba(255,217,138,.95), rgba(224,176,74,.45) 40%, rgba(255,79,154,.5) 75%, rgba(255,217,138,.8));
  box-shadow: 0 0 2.6vw -.6vw rgba(255,180,60,.55), 0 1.6vw 3vw -1.4vw rgba(0,0,0,.9); transition: filter .8s, box-shadow .8s; }
/* the drawing goes on a cream card, like the face of a playing card (and like the pad on the
   phones), so every paint colour reads, the dark ink included */
#dg-canvas { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 1.2vw;
  background: radial-gradient(120% 90% at 50% 38%, #fffaf0, #f3e8d0 72%, #e6d7b6), #f3e8d0; box-shadow: inset 0 .3vw 1vw rgba(60,35,10,.25); }
#s-draw[data-sub="reveal"] .dg-board { box-shadow: 0 0 4vw -.6vw rgba(255,180,60,.75), 0 1.6vw 3vw -1.4vw rgba(0,0,0,.9); }
#s-draw.nobody .dg-board { filter: saturate(.55) brightness(.8); }

.dg-side { display: flex; flex-direction: column; gap: .7vw; font-family: var(--gx-sans); min-width: 0; }
.dg-label { display: flex; justify-content: space-between; font-size: .8vw; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--gx-gold);
  padding-bottom: .4vw; border-bottom: 1px solid rgba(224,176,74,.25); }
.dg-label span { letter-spacing: .1em; color: rgba(255,255,255,.55); }
.dg-label.wrong-label { margin-top: .8vw; }
.dg-got { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5vw; min-height: 2.8vw; }
.dg-got li, .dg-artist { display: flex; align-items: center; gap: .6vw; padding: .5vw .9vw .5vw .5vw; border-radius: 999px; color: #fff;
  background: linear-gradient(180deg, rgba(48,34,16,.95), rgba(22,15,9,.95)); box-shadow: inset 0 0 0 1px rgba(255,217,138,.7), 0 0 1.6vw -.5vw rgba(255,180,60,.7);
  animation: dg-in .55s cubic-bezier(.2,1.4,.4,1) both; }
.dg-place { flex: none; width: 1.7vw; height: 1.7vw; border-radius: 50%; display: grid; place-items: center; font-size: .9vw; font-weight: 800; color: #2a1a08;
  background: linear-gradient(180deg, #fff0c0, #e0b04a); }
.dg-got li:first-child .dg-place { box-shadow: 0 0 1vw rgba(255,217,138,.9); }
.dg-got .guy-mini, .dg-artist .guy-mini { width: 1.8vw; height: 1.8vw; flex: none; }
.dg-got .guy-mini svg, .dg-artist .guy-mini svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dg-name { flex: 1; min-width: 0; font-size: 1.15vw; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-name small { margin-left: .6vw; font-size: .66vw; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.dg-pts { font-size: 1vw; font-weight: 700; color: var(--gx-gold); font-variant-numeric: tabular-nums; opacity: 0; transform: translateX(-.4vw); transition: opacity .35s, transform .35s; }
.dg-got li.paid .dg-pts, .dg-artist .dg-pts { opacity: 1; transform: none; }
/* the artist: pink, under the people who got it, once the answer is out */
.dg-artist { display: none; margin-top: .2vw; background: linear-gradient(180deg, rgba(52,16,34,.95), rgba(24,9,17,.95));
  box-shadow: inset 0 0 0 1px rgba(255,111,174,.7), 0 0 1.6vw -.5vw rgba(255,79,154,.7); }
.dg-artist.on { display: flex; }
.dg-artist .dg-place { background: linear-gradient(180deg, #ffd3e6, #ff6fae); color: #3a0b20; font-size: 1vw; }
.dg-artist .dg-pts { color: #ffb3d6; }
.dg-wrong { display: flex; flex-direction: column; gap: .4vw; max-height: 13vw; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.dg-wrong div { display: flex; align-items: baseline; gap: .6vw; font-size: 1.05vw; color: rgba(255,255,255,.62); min-width: 0; }
.dg-wrong div.new { animation: dg-in .45s cubic-bezier(.2,1.4,.4,1) both; }
.dg-wrong b { flex: none; font-size: .72vw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.dg-wrong s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration-color: rgba(255,79,154,.85); text-decoration-thickness: .12vw; }
@keyframes dg-in { from { opacity: 0; transform: translateX(1.4vw) scale(.92); } }

/* ---------- Odd Duck: every drawing up by letter, the votes, and who it was ---------- */
/* Everything has to end above Pib's bubble (it starts about 41vw down when it runs to three lines), so
   the head sits high and the voters land on the drawings rather than taking a row of their own. */
#s-odd { justify-content: flex-start; padding-top: 2vw; }
.oo-head { display: flex; flex-direction: column; align-items: center; }
.oo-title { font-size: 3.6vw; line-height: 1.05; white-space: nowrap; }
.oo-title.long { font-size: 3.2vw; }
.oo-grid { --cols: 3; --w: 16vw; --guy: 2.4vw; --vw: 3.3vw; --vname: .68vw; display: grid; grid-template-columns: repeat(var(--cols), var(--w)); gap: .5vw 1.2vw; justify-content: center; margin-top: .7vw; }
.oo-grid[data-n="3"], .oo-grid[data-n="4"] { --guy: 3vw; --vw: 4.2vw; --vname: .86vw; }
.oo-grid[data-n="3"] { --w: 21vw; }
.oo-grid[data-n="4"] { --cols: 4; --w: 18vw; }
.oo-grid[data-n="7"], .oo-grid[data-n="8"] { --cols: 4; --w: 15.5vw; }
.oo-card { position: relative; min-width: 0; transition: transform .5s cubic-bezier(.2,1.4,.4,1), opacity .5s, filter .5s; animation: oo-in .5s cubic-bezier(.2,1.3,.4,1) both; }
.oo-card:nth-child(2) { animation-delay: .06s; } .oo-card:nth-child(3) { animation-delay: .12s; } .oo-card:nth-child(4) { animation-delay: .18s; }
.oo-card:nth-child(5) { animation-delay: .24s; } .oo-card:nth-child(6) { animation-delay: .3s; } .oo-card:nth-child(7) { animation-delay: .36s; } .oo-card:nth-child(8) { animation-delay: .42s; }
@keyframes oo-in { from { opacity: 0; transform: translateY(1.4vw) scale(.92); } }
.oo-board { position: relative; border-radius: 1vw; padding: .18vw;
  background: linear-gradient(135deg, rgba(255,217,138,.95), rgba(224,176,74,.45) 40%, rgba(255,79,154,.5) 75%, rgba(255,217,138,.8));
  box-shadow: 0 0 1.8vw -.6vw rgba(255,180,60,.5), 0 1vw 2vw -1vw rgba(0,0,0,.9); transition: box-shadow .5s; }
.oo-board canvas { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: .85vw;
  background: radial-gradient(120% 90% at 50% 38%, #fffaf0, #f3e8d0 72%, #e6d7b6), #f3e8d0; box-shadow: inset 0 .2vw .7vw rgba(60,35,10,.25); }
.oo-letter { position: absolute; left: .6vw; top: .6vw; width: 2vw; height: 2vw; border-radius: 50%; display: grid; place-items: center; font: 800 1.05vw var(--gx-sans); color: #2a1a08;
  background: linear-gradient(180deg, #fff0c0, #e0b04a); box-shadow: 0 .2vw .5vw rgba(0,0,0,.45); }
.oo-name { min-height: 1.5vw; padding-top: .35vw; text-align: center; font: 600 1.05vw var(--gx-sans); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oo-name b { font-weight: 700; color: #ffb3d6; }
/* the voters: a guy for each vote this drawing got, landed along its bottom edge */
.oo-voters { position: absolute; left: .3vw; right: .3vw; bottom: .3vw; display: flex; flex-wrap: wrap-reverse; justify-content: center; align-items: flex-end; gap: .1vw .25vw; }
.oo-voter { display: flex; flex-direction: column; align-items: center; width: var(--vw); font: 600 var(--vname) var(--gx-sans); color: rgba(255,255,255,.82); animation: oo-land .34s cubic-bezier(.2,1.5,.4,1) both; transform-origin: 50% 100%; }
.oo-voter > span:last-of-type { max-width: 100%; padding: .04vw .3vw; border-radius: 99px; color: #fff; background: rgba(10,6,12,.86); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oo-voter .guy-mini { width: var(--guy); height: var(--guy); }
.oo-voter .guy-mini svg { width: 100%; height: 100%; display: block; overflow: visible; }
.oo-voter b { padding: 0 .3vw; border-radius: 99px; font-size: .78vw; font-weight: 800; color: #2a1a08; background: linear-gradient(180deg, #fff0c0, #e0b04a); animation: dg-in .4s ease-out both; }
@keyframes oo-land { 0% { opacity: 0; transform: translateY(-2.2vw) scale(1.25, .7); } 60% { opacity: 1; transform: scale(.94, 1.08); } }
/* the reveal: the odd one lights up pink and lifts, the other drawings fall back (their voters don't) */
.oo-card.not-odd { transform: scale(.97); }
.oo-card.not-odd canvas, .oo-card.not-odd .oo-letter { filter: brightness(.5) saturate(.55); transition: filter .5s; }
.oo-card.not-odd .oo-name { color: rgba(255,255,255,.65); }
.oo-card.is-odd { transform: translateY(-.3vw) scale(1.05); z-index: 2; }
.oo-card.is-odd .oo-board { background: linear-gradient(135deg, #ffd3e6, #ff6fae 45%, #ffd98a); box-shadow: 0 0 3.4vw -.2vw rgba(255,79,154,.9), 0 1vw 2vw -1vw rgba(0,0,0,.9); }
/* the vote count and the summary sit to the right of Pib's bubble, clear of the cards and of him */
.oo-status { position: fixed; left: 60vw; bottom: 3.4vw; margin: 0; width: fit-content; max-width: 38vw; }
.oo-status:empty { visibility: hidden; }

/* ---------- Pop Squiz ---------- */
/* the category in neon, the question in its tube, then four answers in a 2x2 of glass tiles. At the
   reveal each player's guy sits on the tile they picked; the right one lights gold, the rest dim. */
#s-quiz { justify-content: flex-start; padding-top: 2.4vw; }
.qz-head { display: flex; flex-direction: column; align-items: center; }
.qz-title { font-size: 3.8vw; line-height: 1.05; white-space: nowrap; }
.qz-card { margin-top: 1.4vw; max-width: 70vw; padding: 1.8vw 3.4vw 2vw; }
.qz-card .prompt-text { font-size: 2.5vw; }
.qz-card.drawing .tube rect { animation: tube-strike 1.7s linear both; }
.qz-card.drawing { animation: pc-glass 1.7s ease-out both; }
.qz-grid { --guy: 2.6vw; --vw: 3.6vw; --vname: .72vw; display: grid; grid-template-columns: repeat(2, 34vw); gap: 1.1vw 1.6vw; justify-content: center; margin-top: 2vw; }
.qz-opt { position: relative; display: flex; align-items: center; gap: 1.1vw; min-height: 6.6vw; padding: 1vw 1.4vw 1vw 1.1vw; border-radius: 1.2vw;
  background: rgba(20,12,22,.86); border: 1px solid var(--gx-line); box-shadow: var(--gx-shadow); color: #fff;
  transition: transform .5s cubic-bezier(.2,1.4,.4,1), opacity .5s, filter .5s, box-shadow .5s, border-color .5s;
  animation: qz-in .5s cubic-bezier(.2,1.3,.4,1) both; }
.qz-opt:nth-child(2) { animation-delay: .08s; } .qz-opt:nth-child(3) { animation-delay: .16s; } .qz-opt:nth-child(4) { animation-delay: .24s; }
.qz-letter { flex: none; width: 2.6vw; height: 2.6vw; border-radius: 50%; display: grid; place-items: center; font: 800 1.3vw var(--gx-sans); color: #2a1a08;
  background: linear-gradient(180deg, #fff0c0, #e0b04a); box-shadow: 0 0 .8vw rgba(255,190,80,.45); }
.qz-text { flex: 1; min-width: 0; font: 600 1.8vw/1.2 var(--gx-sans); letter-spacing: -.01em; text-wrap: balance; overflow-wrap: anywhere; }
.qz-opt .oo-voters { left: auto; right: .6vw; bottom: auto; top: 50%; transform: translateY(-50%); max-width: 46%; justify-content: flex-end; flex-wrap: wrap; }
.qz-opt.is-right { transform: scale(1.04); z-index: 2; border-color: #ffe6a8;
  background: linear-gradient(180deg, rgba(64,44,14,.94), rgba(30,20,10,.94)); box-shadow: 0 0 3.4vw -.2vw rgba(255,190,70,.8), 0 1vw 2vw -1vw rgba(0,0,0,.9); }
.qz-opt.is-right .qz-letter { background: linear-gradient(180deg, #d7ffe6, #3ed886); box-shadow: 0 0 1.2vw rgba(62,216,134,.8); }
.qz-opt.is-wrong { opacity: .5; filter: saturate(.4); transform: scale(.97); }
.qz-status { position: fixed; left: 60vw; bottom: 3.4vw; margin: 0; width: fit-content; max-width: 38vw; }
.qz-status:empty { visibility: hidden; }
#s-quiz[data-sub="question"] .qz-opt { opacity: .55; }
#s-quiz[data-sub="intro"] .qz-card { visibility: hidden; }
@keyframes qz-in { from { opacity: 0; transform: translateY(1.2vw) scale(.94); } }

/* ---------- Gloop ---------- */
/* a chain in a row, joined up with drips of green goop: text links on dark glass, drawings on the board */
#s-gloop { justify-content: flex-start; padding-top: 2vw; }
.gl-head { display: flex; flex-direction: column; align-items: center; }
.gl-title { font-size: 3.8vw; line-height: 1.05; white-space: nowrap; }
.gl-title.long { font-size: 3.2vw; }
.gl-row { --w: 16.6vw; --guy: 2.2vw; --vw: 3vw; --vname: .62vw; display: flex; justify-content: center; align-items: flex-start; gap: 1.5vw; margin-top: 4vw; }
.gl-row[data-n="4"] { --w: 20vw; --guy: 2.6vw; --vw: 3.5vw; --vname: .7vw; }
.gl-row[data-n="3"] { --w: 24vw; --guy: 3vw; --vw: 4vw; --vname: .8vw; }
.gl-card { position: relative; width: var(--w); flex: none; opacity: 0; transform: translateY(1.4vw) scale(.86); transition: opacity .3s, transform .45s cubic-bezier(.2,1.5,.4,1), filter .5s; }
.gl-card.on { opacity: 1; transform: none; }
/* the goop running from each link to the next */
.gl-card:not(:first-child)::before { content: ""; position: absolute; left: -1.75vw; top: calc(var(--w) * .375 - .55vw); width: 2vw; height: 1.1vw; border-radius: 99px; z-index: 1;
  background: linear-gradient(180deg, #e2ff7a, #8fc21a); box-shadow: 0 0 1vw rgba(190,240,70,.65); }
.gl-card:not(:first-child)::after { content: ""; position: absolute; left: -1.2vw; top: calc(var(--w) * .375 + .2vw); width: .75vw; height: 1.5vw; border-radius: 0 0 99px 99px; background: linear-gradient(180deg, #8fc21a, #c8f04a); }
.gl-face { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 1vw; box-sizing: border-box; display: grid; place-items: center; overflow: hidden; }
.gl-face.is-draw { padding: .18vw; background: linear-gradient(135deg, #f3d68a, #b88a35 50%, #fbe7a8); box-shadow: 0 1vw 2vw -1vw rgba(0,0,0,.9); }
.gl-face.is-draw canvas { display: block; width: 100%; height: 100%; border-radius: .85vw; background: radial-gradient(120% 90% at 50% 40%, #fdf8ea, #efe2c4); }
.gl-face.is-text { padding: 1vw; background: rgba(20,12,22,.9); border: 2px solid var(--gx-line); box-shadow: var(--gx-shadow); }
.gl-words { font: 700 1.5vw/1.22 var(--gx-sans); color: #fff; text-align: center; text-wrap: balance; overflow-wrap: anywhere; letter-spacing: -.01em; }
.gl-row[data-n="3"] .gl-words { font-size: 2vw; }
.gl-row[data-n="4"] .gl-words { font-size: 1.7vw; }
.gl-face.blank .gl-words { font-weight: 500; font-style: italic; color: rgba(255,255,255,.4); }
.gl-letter { opacity: 0; transition: opacity .3s; }
.gl-row.voting .gl-letter { opacity: 1; }
.gl-nailed { position: absolute; right: .5vw; top: .5vw; padding: .15vw .55vw; border-radius: 99px; font: 800 .72vw var(--gx-sans); letter-spacing: .04em; color: #1c2a04; background: linear-gradient(180deg, #e2ff7a, #a6d926); box-shadow: 0 0 .9vw rgba(190,240,70,.7); }
.gl-by { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .35vw; min-height: 2.3vw; padding-top: .4vw; font: 600 1vw var(--gx-sans); color: #fff; }
.gl-by .guy-mini { width: 1.9vw; height: 1.9vw; flex: none; }
.gl-by .guy-mini svg { width: 100%; height: 100%; display: block; overflow: visible; }
.gl-by b { padding: 0 .4vw; border-radius: 99px; font-size: .8vw; font-weight: 800; color: #2a1a08; background: linear-gradient(180deg, #fff0c0, #e0b04a); }
.gl-card.is-best { transform: translateY(-.4vw) scale(1.05); z-index: 2; }
.gl-card.is-best .gl-face { box-shadow: 0 0 3vw -.1vw rgba(255,190,70,.9), 0 1vw 2vw -1vw rgba(0,0,0,.9); }
.gl-card.not-best { filter: brightness(.62) saturate(.7); }
.gl-status { position: fixed; left: 60vw; bottom: 3.4vw; margin: 0; width: fit-content; max-width: 38vw; }
.gl-status:empty { visibility: hidden; }