/* Battle Trivia - TV. Everything is laid out on a fixed 1920x1080 stage that is scaled to fit the
   screen, so it looks the same on a 40" TV, a projector, or a laptop. Stage lights over deep navy,
   one thing to read at a time, faces for everyone. */
body.tv { overflow: hidden; background-color: #000; cursor: none; }
body.tv.mouse { cursor: default; }
#stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  transform-origin: center center; transform: translate(-50%, -50%); overflow: hidden;
  background: var(--stage); color: var(--text); isolation: isolate;
}
/* a right answer floods the stage green; nobody right, red */
#stage::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .6s; pointer-events: none; }
#stage.good::before { background: var(--stage-good); opacity: 1; }
#stage.bad::before { background: var(--stage-bad); opacity: 1; }
#stage.good #beams, #stage.bad #beams { opacity: 0; }
#screen { position: absolute; inset: 0; z-index: 2; }

/* ---------- stage lights ---------- */
#beams { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; transition: opacity .6s; }
#beams i { position: absolute; display: block; }
#beams .b1, #beams .b2 { top: -8%; width: 1000px; height: 1500px; margin-left: -500px; transform-origin: 50% 0; }
#beams .b1 { left: 4%; background: conic-gradient(from 166deg at 50% 0%, rgba(70,150,255,0) 0deg, rgba(70,150,255,.24) 14deg, rgba(70,150,255,0) 28deg); animation: tv-sweepA 13s ease-in-out infinite alternate; }
#beams .b2 { left: 96%; background: conic-gradient(from 166deg at 50% 0%, rgba(185,90,255,0) 0deg, rgba(185,90,255,.24) 14deg, rgba(185,90,255,0) 28deg); animation: tv-sweepB 16s ease-in-out infinite alternate; }
#beams .b3 { left: 38%; top: -6%; width: 700px; height: 1400px; margin-left: -350px; transform-origin: 50% 0; background: conic-gradient(from 170deg at 50% 0%, rgba(120,170,255,0) 0deg, rgba(150,190,255,.12) 10deg, rgba(120,170,255,0) 20deg); animation: tv-sweepC 19s ease-in-out infinite alternate; }
#beams .g1, #beams .g2 { top: -40%; width: 1100px; height: 800px; border-radius: 50%; }
#beams .g1 { left: -10%; background: radial-gradient(circle, rgba(47,123,255,.32), rgba(47,123,255,0) 68%); animation: tv-driftA 24s ease-in-out infinite alternate; }
#beams .g2 { right: -10%; background: radial-gradient(circle, rgba(170,60,255,.3), rgba(170,60,255,0) 68%); animation: tv-driftB 27s ease-in-out infinite alternate; }
@keyframes tv-sweepA { from { transform: rotate(-22deg); } to { transform: rotate(14deg); } }
@keyframes tv-sweepB { from { transform: rotate(20deg); } to { transform: rotate(-16deg); } }
@keyframes tv-sweepC { from { transform: rotate(-12deg); } to { transform: rotate(18deg); } }
@keyframes tv-driftA { from { transform: translate(-80px, 0); } to { transform: translate(320px, 90px); } }
@keyframes tv-driftB { from { transform: translate(80px, 40px); } to { transform: translate(-300px, 0); } }
@keyframes tv-conf { 0% { transform: translateY(-60px) rotate(0); } 100% { transform: translateY(1220px) rotate(640deg); } }
@keyframes tv-rise { from { transform: scaleY(0); } }
@keyframes tv-fadein { from { opacity: 0; } }
@keyframes tv-blink { 50% { opacity: 0; } }
@keyframes tv-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes tv-up { 0% { transform: translateY(40px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes tv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes tv-swap { 0% { opacity: 0; transform: scale(.96); } 100% { opacity: 1; transform: none; } }
.pop { animation: tv-pop .5s ease-out both; }
.up { animation: tv-up .5s ease-out both; }

/* ---------- the parts every screen uses ---------- */
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; color: var(--text); animation: tv-swap .35s ease-out both; }
.scr.center { align-items: center; justify-content: center; text-align: center; }
.hd { display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 130px; }
.hd .lab { font-weight: 700; font-size: 34px; color: var(--lav); display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.hd .got { font-stretch: 125%; font-weight: 800; font-size: 44px; line-height: 1; }
.tag-x2 { padding: 10px 22px; border-radius: 999px; background: var(--hot); color: #fff; font-stretch: 125%; font-weight: 800; font-size: 22px; letter-spacing: .08em; }
.tag-fin { padding: 10px 22px; border-radius: 999px; background: linear-gradient(180deg, #ffd56a 0%, #f7b52c 100%); color: #3a2400; font-stretch: 125%; font-weight: 800; font-size: 22px; letter-spacing: .08em; }
/* the countdown: a ring of light with the seconds inside */
.clock { width: 130px; height: 130px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--bg);
  box-shadow: inset 0 0 0 8px var(--cyan); font-stretch: 125%; font-weight: 800; font-size: 60px; line-height: 1; transition: box-shadow .3s, color .3s; }
.clock.violet { box-shadow: inset 0 0 0 8px var(--violet); }
.clock.m4 { font-size: 36px; } .clock.m5 { font-size: 29px; }
.clock.low { box-shadow: inset 0 0 0 8px var(--bad), 0 0 40px rgba(240,68,82,.5); color: #ff9aa3; animation: tv-pulse-bad .5s ease-in-out infinite alternate; }
.clock.off { visibility: hidden; }
@keyframes tv-pulse-bad { to { transform: scale(1.06); } }
.qbig { font-stretch: 125%; font-weight: 800; line-height: 1.1; max-width: 1560px; text-wrap: balance; text-align: center; }
.sub { font-weight: 600; font-size: 42px; line-height: 1.3; color: var(--lav); }
.sub b, .sub .c { color: var(--cyan); font-weight: 700; }
.pill-bug { display: flex; padding: 10px; border-radius: 999px; background: rgba(11,7,36,.55); box-shadow: inset 0 0 0 2px rgba(175,210,255,.35), 0 0 50px rgba(123,77,255,.25); }
.pill-bug span { padding: 18px 90px; border-radius: 999px; background: linear-gradient(180deg, #9b55ff 0%, #6a2be0 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 0 30px rgba(138,61,255,.55); font-stretch: 125%; font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: .12em; white-space: nowrap; }
.pill-bug.fin span { background: linear-gradient(180deg, #ffd56a 0%, #f7a92c 100%); color: #3a2400; box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 0 30px rgba(247,181,44,.55); }
.kind { padding: 18px 40px; border-radius: 999px; font-stretch: 125%; font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: .1em; white-space: nowrap;
  background: linear-gradient(180deg, #6fe0ff 0%, #27a9e6 100%); color: #06213d; box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 0 30px rgba(69,208,255,.5); }
.kind.write { background: linear-gradient(180deg, #6aa8ff 0%, #2f7bff 100%); color: #fff; box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 0 30px rgba(47,123,255,.5); }
.kind.x2 { background: linear-gradient(180deg, #6aa8ff 0%, #2f7bff 100%); color: #fff; }
.card2 { background: var(--card); border-radius: 28px; }
.who { display: flex; flex: none; }
.who .face { margin-left: -14px; }
.who .more { margin-left: 10px; align-self: center; font-weight: 800; font-size: 30px; }

/* ---------- lobby ---------- */
.lobby { flex-direction: row; align-items: center; gap: 90px; padding: 90px 110px; }
.lobby .l { flex: 1; display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.lobby .logo { text-align: left; font-size: 120px; }
.lobby .go { font-weight: 600; font-size: 40px; line-height: 1.3; color: var(--lav); }
.lobby .go span { color: var(--cyan); }
.codes { display: flex; gap: 20px; align-items: center; }
.codes .ch { width: 170px; height: 200px; border-radius: 32px; display: grid; place-items: center; background: var(--card);
  box-shadow: inset 0 0 0 3px rgba(175,210,255,.4), 0 0 50px rgba(123,77,255,.35); font-stretch: 125%; font-weight: 800; font-size: 120px; line-height: 1; }
.codes .qr { width: 200px; height: 200px; margin-left: 20px; padding: 14px; border-radius: 28px; background: #fff; flex: none; }
.codes .qr svg { display: block; width: 100%; height: 100%; }
.lobby .mod { font-size: 24px; line-height: 1.5; color: var(--lav-2); }
.lobby .mod b { color: var(--lav); letter-spacing: .06em; }
.lobby .mod .ok { color: var(--good); font-weight: 700; }
.lobby .mod .warn { color: #ff7b86; font-weight: 700; }
.lobby .r { width: 720px; display: flex; flex-direction: column; gap: 26px; }
.lobby .count { font-stretch: 125%; font-weight: 800; font-size: 48px; line-height: 1; }
.lobby .tonight { margin-bottom: -12px; font-weight: 600; font-size: 26px; color: var(--lav); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lobby .tonight b { color: var(--cyan); font-weight: 800; }
.seats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px 10px; }
.seat { display: flex; flex-direction: column; align-items: center; gap: 12px; height: 122px; }
.seat .nm { max-width: 110px; font-weight: 700; font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat.on .face { animation: tv-float 3s ease-in-out infinite; }
.seat.fresh { animation: tv-pop .5s cubic-bezier(.2,.9,.3,1.3) both; }
.seat.empty i { width: 84px; height: 84px; border-radius: 50%; border: 2px dashed rgba(175,210,255,.22); display: block; }
.lobby .wait { font-weight: 600; font-size: 30px; color: var(--lav-2); }
.lobby .wait.rm { font-stretch: 125%; font-weight: 800; font-size: 40px; color: var(--cyan); }
/* the TV's own controls: only while a mouse is moving (settings live on the Moderator's phone) */
.tvctl { position: absolute; left: 110px; right: 110px; bottom: 26px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  opacity: 0; pointer-events: none; transition: opacity .25s; }
body.mouse .tvctl { opacity: 1; pointer-events: auto; }
.tvctl .opt { height: 48px; padding: 0 18px; border-radius: 14px; font-weight: 700; font-size: 19px; color: var(--lav); background: rgba(38,25,111,.6); box-shadow: inset 0 0 0 2px var(--line); }
.tvctl .opt.on { color: var(--text); box-shadow: inset 0 0 0 2px var(--cyan); }
.tvctl .start { height: 48px; font-size: 19px; border-radius: 14px; padding: 0 24px; margin-left: auto; }
.tvctl .keys { width: 100%; font-size: 17px; color: var(--lav-2); }

/* ---------- round intro / next up ---------- */
.nextup { gap: 40px; padding: 0 120px; }
.nextup .cat { font-stretch: 125%; font-weight: 800; font-size: 170px; line-height: 1; max-width: 1700px; text-wrap: balance; }
.nextup .cat.long { font-size: 120px; }
.nextup .meta { display: flex; gap: 18px; align-items: center; }
.nextup .faces { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; max-width: 1600px; }
.nextup .faces .face { animation: tv-pop .5s cubic-bezier(.2,.9,.3,1.3) both; }

/* ---------- question ---------- */
.q { padding: 70px 100px 60px; }
.q .mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; min-height: 0; }
.ans4 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; width: 100%; text-align: left; }
.ans { position: relative; height: 160px; border-radius: 32px; display: flex; align-items: center; gap: 32px; padding: 0 28px;
  background: var(--glass); box-shadow: inset 0 0 0 2px rgba(175,210,255,.5), inset 0 2px 0 rgba(255,255,255,.6), 0 14px 40px rgba(0,0,0,.35);
  transition: opacity .5s, background .5s, box-shadow .5s, transform .5s; animation: tv-up .45s ease-out both; }
.ans .L { width: 108px; height: 108px; flex: none; border-radius: 24px; display: grid; place-items: center; background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 2px rgba(200,225,255,.55); font-stretch: 125%; font-weight: 800; font-size: 60px; line-height: 1; }
.ans .t { flex: 1; font-weight: 700; font-size: 50px; line-height: 1.15; min-width: 0; }
.ans .t.long { font-size: 40px; }
.ans.right { background: linear-gradient(180deg, #5ff0ae 0%, #2fd68f 55%, #1fae8a 100%); color: #00301f;
  box-shadow: 0 0 0 4px rgba(47,214,143,.35), 0 0 80px rgba(47,214,143,.55); transform: scale(1.02); }
.ans.right .L { background: rgba(255,255,255,.16); box-shadow: none; }
.ans.dim { opacity: .45; box-shadow: inset 0 0 0 2px rgba(175,210,255,.4); }
.rev .ans { height: 180px; }
/* a full room: shorter answers, closer faces */
.q.crowd .mid { gap: 30px; }
.q.crowd .ans { height: 136px; }
.q.crowd .ans .L { width: 92px; height: 92px; font-size: 52px; }
.q.crowd .locks { margin-top: 18px; gap: 12px 14px; }
/* the mystery box window */
.boxbar { display: flex; align-items: center; gap: 26px; padding: 16px 18px; transition: opacity .6s; }   /* no pill round it (owner 2026-10-16) */
.boxbar .bx { width: 76px; height: 76px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(69,208,255,.35), rgba(69,208,255,0) 70%); }
.boxbar .bx img { width: 74px; height: 74px; animation: tv-float 1.6s ease-in-out infinite; }
.boxbar .msg { font-weight: 700; font-size: 34px; white-space: nowrap; }
.boxbar .msg b { color: var(--cyan); }
.scr.keep { animation: none; }   /* the question carrying on from its staged look: no screen swap */
.ans4.still .ans { animation: none; }
.boxbar.gone { opacity: .35; }
.boxbar.gone .bx img { animation: none; filter: grayscale(1); }
/* who has locked in */
.locks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; margin-top: 28px; max-width: 1600px; align-self: center; }
.locks .face { transition: opacity .3s, box-shadow .3s; }
.locks .face.in { animation: tv-pop .4s cubic-bezier(.2,.9,.3,1.4) both; }
.locks .n { font-weight: 700; font-size: 34px; color: var(--lav); margin-left: 14px; white-space: nowrap; }
.timesup { font-stretch: 125%; font-weight: 800; font-size: 44px; color: var(--lav); }
/* write-in */
.typebox { display: flex; align-items: center; gap: 22px; padding: 22px 40px; border-radius: 999px; font-weight: 700; font-size: 40px;
  background: linear-gradient(180deg, rgba(130,180,255,.26) 0%, rgba(70,110,255,.12) 100%); box-shadow: inset 0 0 0 2px rgba(175,210,255,.45); }
.typebox i { width: 4px; height: 44px; border-radius: 2px; background: var(--cyan); animation: tv-blink 1s steps(1) infinite; }
.typers { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 40px; max-width: 1600px; }
.typer { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.typer .nm { font-weight: 700; font-size: 28px; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.typer .st { height: 30px; font-weight: 700; font-size: 24px; color: var(--lav-2); }
.typer.tp .st { color: var(--cyan); }
.typer.in .st { color: var(--pink-violet); }
.typer.idle .face { opacity: .4; }
.typers.small { gap: 18px 24px; }
.typers.small .nm { font-size: 22px; max-width: 110px; }
.typers.small .st { font-size: 19px; height: 24px; }
.foot { text-align: center; font-weight: 700; font-size: 32px; color: var(--lav); }

/* ---------- reveal ---------- */
.fastest { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 40px; min-height: 76px; font-weight: 700; font-size: 36px; }
.fastest .c { color: var(--cyan); }
.fastest > * { animation: tv-up .5s ease-out both; }
.wrev { padding: 90px 140px; }
.wrev .qsmall { font-weight: 700; font-size: 40px; color: var(--lav); max-width: 1500px; }
.wrev .big { font-stretch: 125%; font-weight: 800; font-size: 170px; line-height: 1.3; margin-top: 10px; padding: 0 20px .12em;
  background: linear-gradient(180deg, #e6fff5 0%, #6ff5bd 48%, #2fd6c5 100%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: tv-pop .5s ease-out both; }
.wrev .big.long { font-size: 110px; }
.wrev.nobody .big { background: linear-gradient(180deg, #fff 0%, #ffb3ba 60%, #f04452 100%); -webkit-background-clip: text; background-clip: text; }
.piles { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; width: 100%; margin-top: 60px; }
.pile { display: flex; align-items: center; gap: 22px; padding: 24px 30px; border-radius: 28px; background: var(--card); box-shadow: inset 0 0 0 3px var(--bd); text-align: left; animation: tv-up .5s ease-out both; }
.pile .t { flex: 1; font-weight: 700; font-size: 44px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pile .pts { font-stretch: 125%; font-weight: 800; font-size: 30px; line-height: 1; color: var(--bd); min-width: 120px; text-align: right; }
.piles .more { grid-column: 1 / -1; font-weight: 700; font-size: 30px; color: var(--lav); }
.voided .big { font-stretch: 125%; font-weight: 800; font-size: 120px; color: #ff7b86; }

/* ---------- standings ---------- */
.board { padding: 80px 300px; }
.board h1, .bigtitle { margin: 0; font-stretch: 125%; font-weight: 800; font-size: 80px; line-height: 1; text-align: center; }
.rows { position: relative; display: flex; flex-direction: column; gap: 16px; margin-top: 50px; }
.brow { height: 118px; display: grid; grid-template-columns: 70px 92px 1fr auto 220px; gap: 28px; align-items: center; padding: 0 36px; border-radius: 28px; background: var(--card); }
.brow.first { background: linear-gradient(90deg, #8a3dff 0%, #5a1fd1 100%); box-shadow: 0 0 50px rgba(150,70,255,.5); }
.brow .pl { font-stretch: 125%; font-weight: 800; font-size: 48px; line-height: 1; color: var(--lav); }
.brow.first .pl { color: #e8dcff; }
.brow .nm { font-weight: 700; font-size: 48px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow .d { font-weight: 700; font-size: 32px; color: var(--good); }
.brow .d.neg { color: #ff7b86; }
.brow.first .d { color: #9dffd0; }
.brow.first .d.neg { color: #ffc2c8; }
.brow .sc { font-stretch: 125%; font-weight: 800; font-size: 50px; line-height: 1; text-align: right; }
.board .rest { margin-top: 26px; text-align: center; font-weight: 600; font-size: 30px; color: var(--lav-2); }
.board .call { margin-top: 30px; display: flex; justify-content: center; }
.callout { display: inline-flex; align-items: center; gap: 18px; padding: 14px 34px 14px 16px; border-radius: 999px; background: rgba(11,7,36,.6);
  box-shadow: inset 0 0 0 2px rgba(175,210,255,.35); font-weight: 700; font-size: 34px; animation: tv-pop .5s ease-out both; }
.callout em { font-style: normal; color: var(--cyan); }

/* ---------- item time / wager: a room of faces ---------- */
.room { padding: 90px 140px; align-items: center; text-align: center; }
.room .title { display: flex; align-items: center; gap: 40px; }
.room .title .x { font-size: 110px; line-height: 1; }
.room .grid { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 40px 34px; max-width: 1640px; }
.mate { display: flex; flex-direction: column; align-items: center; gap: 18px; transition: opacity .4s; }
.mate .nm { font-weight: 700; font-size: 38px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mate .st { font-weight: 700; font-size: 28px; color: var(--lav-2); }
.mate.lit .st { color: var(--pink-violet); }
.mate.idle { opacity: .45; }
.mate.lit .face { animation: tv-pop .5s ease-out both; }
.room .grid.small { gap: 26px 26px; }
.room .grid.small .nm { font-size: 26px; max-width: 150px; }
.room .grid.small .st { font-size: 21px; }
.room .tally { font-stretch: 125%; font-weight: 800; font-size: 44px; line-height: 1; color: var(--pink-violet); }
.room .tally.c { font-stretch: 100%; font-weight: 700; font-size: 40px; color: var(--cyan); }

/* ---------- final reveal ---------- */
.finrev { padding: 80px 260px; }
.finrev h1 { margin: 0; font-stretch: 125%; font-weight: 800; font-size: 72px; line-height: 1; text-align: center; }
.finrev .view { position: relative; flex: 1; margin-top: 50px; overflow: hidden; }
.finrev .list { display: flex; flex-direction: column; gap: 16px; transition: transform .6s cubic-bezier(.3,.8,.3,1); }
.frow { height: 116px; flex: none; display: grid; grid-template-columns: 92px 1fr 280px 90px 240px; gap: 26px; align-items: center; padding: 0 34px; border-radius: 28px;
  background: var(--card); box-shadow: inset 0 0 0 3px var(--bd); animation: tv-up .5s ease-out both; }
.frow .nm { font-weight: 700; font-size: 46px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow .bet { font-weight: 700; font-size: 34px; color: var(--lav); white-space: nowrap; }
.frow .mk { font-stretch: 125%; font-weight: 800; font-size: 44px; line-height: 1; color: var(--bd); text-align: center; }
.frow .tot { font-stretch: 125%; font-weight: 800; font-size: 50px; line-height: 1; text-align: right; }

/* ---------- podium ---------- */
.podium { align-items: center; padding: 56px 100px 0; overflow: hidden; }
.podium .spot { position: absolute; left: 50%; top: -60px; width: 1500px; height: 1300px; margin-left: -750px; z-index: -1; pointer-events: none;
  background: conic-gradient(from 164deg at 50% 0%, rgba(255,255,255,0) 0deg, rgba(200,240,255,.28) 16deg, rgba(255,255,255,0) 32deg); animation: tv-fadein 1s .9s ease-out both; }
.podium .floor { position: absolute; left: 50%; bottom: -170px; width: 1700px; height: 340px; margin-left: -850px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(123,77,255,.5), rgba(123,77,255,0) 70%); }
.podium .conf { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.podium .conf i { position: absolute; top: -40px; border-radius: 3px; animation: tv-conf linear infinite both; }
.podium .win { position: relative; font-stretch: 125%; font-weight: 800; font-size: 112px; line-height: 1; padding-bottom: .12em; text-align: center; max-width: 1700px;
  background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 34px rgba(123,77,255,.65)); animation: tv-pop .6s 1.3s ease-out both; }
.podium .win.long { font-size: 84px; }
.podium .steps { position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 26px; width: 100%; }
.step { display: flex; flex-direction: column; align-items: center; }
.step .nm { font-weight: 700; font-size: 46px; margin-top: 24px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step .sc { font-stretch: 125%; font-weight: 800; font-size: 36px; line-height: 1; margin: 10px 0 28px; color: var(--lav); }
.step.p1 .sc { color: var(--cyan-2); }
.step .blk { width: 100%; border-radius: 26px 26px 0 0; display: flex; justify-content: center; padding-top: 16px; transform-origin: bottom;
  box-shadow: inset 0 4px 0 rgba(255,255,255,.65), inset 0 -60px 80px rgba(0,0,0,.28), 0 -12px 70px rgba(0,0,0,.35); }
.step .blk span { font-stretch: 125%; font-weight: 800; font-size: 190px; line-height: 1; color: rgba(255,255,255,.6); text-shadow: 0 8px 36px rgba(0,0,0,.25); }
.step.p1 .blk { background: linear-gradient(180deg, #5fd2ff 0%, #8a3dff 62%, #5a1fd1 100%); box-shadow: inset 0 4px 0 rgba(255,255,255,.65), inset 0 -60px 80px rgba(0,0,0,.28), 0 -12px 70px rgba(95,210,255,.55); }
.step.p2 .blk { background: linear-gradient(180deg, #e4e6fb 0%, #a3a8dc 100%); }
.step.p3 .blk { background: linear-gradient(180deg, #ffbd8a 0%, #e0702a 100%); }
/* solo: you against this TV's best */
.solo .score { font-stretch: 125%; font-weight: 800; font-size: 220px; line-height: 1; background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .1em; animation: tv-pop .6s .3s ease-out both; }
.solo .best { margin-top: 10px; }

/* ---------- badges ---------- */
.badges { gap: 64px; padding: 80px 90px; }
.badges .x { font-size: 100px; line-height: 1; }
.badges .row { display: flex; gap: 24px; justify-content: center; }
.badge { width: 330px; padding: 36px 22px 32px; border-radius: 32px; background: var(--card); box-shadow: inset 0 0 0 2px rgba(175,210,255,.22);
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; animation: tv-up .5s ease-out both; }
.badge .face { box-shadow: 0 0 0 6px var(--bg), 0 0 50px rgba(123,77,255,.4); }
.badge .t { font-stretch: 125%; font-weight: 800; font-size: 26px; line-height: 1.1; color: var(--cyan); white-space: nowrap; }
.badge .nm { font-weight: 700; font-size: 38px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge .det { font-weight: 600; font-size: 26px; line-height: 1.3; color: var(--lav); }

/* ---------- after the game: everyone's place, and who's in for another ---------- */
.after { flex-direction: row; gap: 80px; padding: 80px 110px; }
.after .l { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.after .l .x { font-size: 64px; line-height: 1; }
.final-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(10, 74px); gap: 10px 22px; margin-top: 36px; }
.frow2 { display: grid; grid-template-columns: 56px 60px 1fr auto; gap: 18px; align-items: center; padding: 0 22px; border-radius: 20px; background: var(--card); }
.frow2.first { background: linear-gradient(90deg, #8a3dff 0%, #5a1fd1 100%); }
.frow2 .pl { font-stretch: 125%; font-weight: 800; font-size: 30px; color: var(--lav); }
.frow2 .nm { font-weight: 700; font-size: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow2 .sc { font-stretch: 125%; font-weight: 800; font-size: 30px; }
.final-list.cols3 { grid-template-rows: repeat(10, 64px); }
.final-list.cols3 .frow2 { grid-template-columns: 44px 48px 1fr auto; gap: 12px; padding: 0 16px; }
.final-list.cols3 .frow2 .nm, .final-list.cols3 .frow2 .sc, .final-list.cols3 .frow2 .pl { font-size: 24px; }
.after .r { width: 620px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; text-align: center;
  padding: 50px 40px; border-radius: 40px; background: rgba(11,7,36,.45); box-shadow: inset 0 0 0 2px rgba(175,210,255,.25); }
.after .r .x { font-size: 96px; line-height: 1; background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .1em; }
.after .ins { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; min-height: 84px; }
.after .ins .face { animation: tv-pop .45s cubic-bezier(.2,.9,.3,1.4) both; }
.after .hint { font-weight: 600; font-size: 26px; color: var(--lav-2); }

/* ---------- room closed ---------- */
.closed .x { font-size: 130px; line-height: 1; }

/* ---------- reactions from phones ---------- */
#reacts { position: absolute; inset: 0; pointer-events: none; z-index: 25; overflow: hidden; }
.rx { position: absolute; bottom: -20px; display: flex; flex-direction: column; align-items: center; animation: floatUp 3.3s cubic-bezier(.2,.6,.4,1) forwards; }
.rx .emo { font-size: 110px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.rx .by { font-weight: 700; font-size: 24px; background: rgba(11,7,36,.85); padding: 3px 16px; border-radius: 20px; margin-top: -4px; white-space: nowrap; }
.rx.taunt { flex-direction: row; gap: 12px; }
.rx .bubble { background: var(--text); color: #140b40; font-weight: 800; font-size: 34px; padding: 12px 24px; border-radius: 26px 26px 26px 6px; white-space: nowrap; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
@keyframes floatUp { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { transform: translateY(-80px) scale(1.1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-820px) scale(1); opacity: 0; } }

/* ---------- notices: someone left, someone's on fire ---------- */
#feed { position: absolute; left: 0; right: 0; bottom: 40px; display: flex; justify-content: center; pointer-events: none; z-index: 20; }
.ban { display: flex; align-items: center; gap: 18px; padding: 14px 36px 14px 16px; border-radius: 999px; background: rgba(11,7,36,.92);
  box-shadow: inset 0 0 0 2px rgba(175,210,255,.35), 0 20px 60px rgba(0,0,0,.5); font-weight: 700; font-size: 32px; animation: tv-up .4s ease-out both; }
.ban em { font-style: normal; color: var(--cyan); }
.ban.fire { box-shadow: inset 0 0 0 3px #ff9f1c, 0 0 60px rgba(255,140,30,.45); }
.ban.leave { box-shadow: inset 0 0 0 3px rgba(240,68,82,.7), 0 20px 60px rgba(0,0,0,.5); }
.ban.out { animation: tv-ban-out .3s ease-in forwards; }
@keyframes tv-ban-out { to { transform: translateY(30px); opacity: 0; } }
.ban .item-ico { font-size: 44px; }

#vignette { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#vignette.on { animation: vig 1s ease-in-out infinite; }
@keyframes vig { 0%, 100% { box-shadow: inset 0 0 120px 20px rgba(240,68,82,.22); } 50% { box-shadow: inset 0 0 200px 50px rgba(240,68,82,.4); } }

#pause { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: rgba(6,4,26,.84); }
#pause .x { font-size: 180px; line-height: 1; background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .1em; }
#pause .sub { font-size: 40px; }
#toast { position: absolute; bottom: 30px; right: 40px; font-size: 22px; color: var(--lav); z-index: 40; }

/* close button: only while the mouse is moving */
/* just the X, no circle (owner 2026-10-25) */
#closeX { position: absolute; top: 24px; right: 24px; z-index: 60; width: 84px; height: 84px; background: none;
  color: var(--text); font-size: 60px; line-height: 1; display: grid; place-items: center; padding: 0 0 6px; text-shadow: 0 2px 12px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .15s, color .15s; }
body.mouse #closeX { opacity: 1; pointer-events: auto; }
#closeX:hover { color: var(--bad); transform: scale(1.12); }
#closeAsk { position: absolute; inset: 0; z-index: 70; background: rgba(6,4,26,.84); display: flex; align-items: center; justify-content: center; }
#closeAsk .box { background: var(--card); box-shadow: inset 0 0 0 2px var(--line), 0 40px 120px rgba(0,0,0,.6); border-radius: 40px; padding: 56px 80px; text-align: center; animation: tv-pop .3s both; }
#closeAsk .x { font-size: 72px; }
#closeAsk .sub { font-size: 30px; margin: 16px 0 36px; }
#closeAsk .row2 { display: flex; gap: 24px; justify-content: center; }
#closeAsk .btn { font-size: 30px; height: 84px; padding: 0 46px; border-radius: 24px; }

/* a redraw of the same screen (grading, the reveal) shouldn't replay the entrance */
.scr.still, .still .ans { animation: none; }

/* Mini-games */
.mini .how { margin: 0; padding: 0; list-style: none; counter-reset: h; display: flex; flex-direction: column; gap: 14px; }
.mini .how li { counter-increment: h; font-weight: 700; font-size: 46px; line-height: 1.2; text-align: left; }
.mini .how li::before { content: counter(h); display: inline-grid; place-items: center; width: 64px; height: 64px; margin-right: 24px; border-radius: 50%; background: var(--violet); font-stretch: 125%; font-weight: 800; font-size: 34px; vertical-align: middle; }
.mini .mclock { font-weight: 700; font-size: 40px; color: var(--cyan); }
.mini .big321 { font-stretch: 125%; font-weight: 800; font-size: 420px; line-height: 1; color: var(--cyan); text-shadow: 0 0 80px rgba(69,208,255,.6); animation: tv-pop .5s cubic-bezier(.2,.9,.3,1.3) both; }
.mini .mtop { display: flex; align-items: center; justify-content: center; gap: 40px; }
.mini .brow.lit:not(.first) { box-shadow: inset 0 0 0 4px rgba(69,208,255,.55); }
.mini .rest.gold { color: #ffd56a; font-weight: 700; font-size: 38px; text-align: center; margin-top: 30px; }
.mini .rest { text-align: center; margin-top: 20px; font-size: 30px; color: var(--lav); }
.mini .goldico { display: inline-block; vertical-align: middle; margin-right: 10px; filter: sepia(1) saturate(5) hue-rotate(-5deg) brightness(1.15); }

/* Rules + a gameplay clip in a phone frame */
.mrules { flex-direction: row; align-items: center; justify-content: center; gap: 90px; padding: 0 110px; }
.mrules .mcol { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 34px; }
.mrules .cat { font-stretch: 125%; font-weight: 800; font-size: 120px; line-height: 1; }
.mrules .sub { text-align: left; font-size: 36px; }
.mrules .faces { display: flex; gap: 14px; flex-wrap: wrap; }
.mdemo { flex: none; width: 450px; height: 900px; padding: 16px; border-radius: 64px; background: #0b0724; box-shadow: inset 0 0 0 4px rgba(175,210,255,.35), 0 30px 90px rgba(0,0,0,.55), 0 0 80px rgba(123,77,255,.35); }
.mdemo video { width: 100%; height: 100%; object-fit: cover; border-radius: 48px; background: #120c3a; display: block; }
.mdemo.none { display: none; }
.mini .how li { display: flex; align-items: center; gap: 24px; }
.mini .how li::before { flex: none; margin-right: 0; }

/* all-day mode: on the podium, when the next game starts and how to get in */
.looppill { position: absolute; z-index: 40; left: 50%; bottom: 34px; transform: translateX(-50%); padding: 16px 34px; border-radius: 999px; white-space: nowrap;
  background: rgba(11,7,36,.88); box-shadow: inset 0 0 0 3px var(--cyan), 0 0 40px rgba(69,208,255,.35); font-weight: 600; font-size: 30px; color: var(--lav); font-variant-numeric: tabular-nums; }
.looppill b { color: var(--cyan); font-stretch: 125%; font-weight: 800; }

/* after every question: join this game (the standings leave the sides free) */
.board .joincard { position: absolute; right: 44px; bottom: 44px; width: 232px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 16px 16px; border-radius: 26px; background: rgba(11,7,36,.82); box-shadow: inset 0 0 0 3px rgba(69,208,255,.55); text-align: center; }
.joincard .jqr { width: 168px; height: 168px; padding: 12px; border-radius: 18px; background: #fff; }
.joincard .jqr svg { display: block; width: 100%; height: 100%; }
.joincard .jt { margin-top: 6px; font-stretch: 125%; font-weight: 800; font-size: 25px; line-height: 1.05; color: var(--text); }
.joincard .ju { font-weight: 600; font-size: 17px; color: var(--cyan); overflow-wrap: anywhere; }
.joincard .jc { font-weight: 600; font-size: 19px; color: var(--lav); }
.joincard .jc b { font-stretch: 125%; font-weight: 800; color: var(--text); letter-spacing: .06em; }

/* Casual (players, no limit): the lobby says how many have joined; the question screen shows just the numbers */
.lobby .casual { display: flex; align-items: center; justify-content: center; min-height: 520px; }
.lobby .joined { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lobby .joined b { font-stretch: 125%; font-weight: 800; font-size: 220px; line-height: .9; background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lobby .joined span { font-stretch: 125%; font-weight: 800; font-size: 56px; color: var(--text); }
.locks .n.solo { margin-left: 0; font-stretch: 125%; font-weight: 800; font-size: 44px; color: var(--text); }
.typers .tcount { font-stretch: 125%; font-weight: 800; font-size: 52px; color: var(--text); text-align: center; }
.typers .tcount b { color: var(--cyan); }
.board .rest b { color: var(--text); font-stretch: 125%; font-weight: 800; }

/* the standings count down to the next question */
.board .nextq { position: absolute; top: 56px; right: 70px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.board .nextq.off { visibility: hidden; }
.board .nextq .lbl { font-stretch: 125%; font-weight: 800; font-size: 20px; letter-spacing: .04em; color: var(--lav); text-transform: uppercase; }

/* promotional banners between games: full screen, the join code kept up underneath */
.promo { position: absolute; inset: 0; z-index: 45; overflow: hidden; background: #000; transition: opacity .8s ease; }
.promo.poff { opacity: 0; pointer-events: none; }
.promo .pslide { position: absolute; inset: 0; animation: promo-fade .8s ease both; }
@keyframes promo-fade { from { opacity: 0; } }
.promo .pbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); filter: blur(48px) brightness(.55) saturate(1.2); }
.promo .pimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.promo .pbar { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); padding: 14px 32px; border-radius: 999px; white-space: nowrap;
  background: rgba(11,7,36,.88); box-shadow: inset 0 0 0 3px var(--cyan); font-weight: 600; font-size: 28px; color: var(--lav); font-variant-numeric: tabular-nums; }
.promo .pbar b { color: var(--cyan); font-stretch: 125%; font-weight: 800; }