/* ============================================================================
   Quiz engine - projector stage.
   Built for a dark room and a 3m screen: heavy type, high contrast, slow motion.
   ========================================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

body.display { cursor: none; }
body.display.pointer { cursor: default; }

/* --------------------------------------------------------------- backdrop */

.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden;
      background:
        radial-gradient(120% 80% at 50% 0%,  #221a3a 0%, #150f26 55%, var(--ink) 100%); }

.blob {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: .55; will-change: transform;
}
.b1 { width: 60vw; height: 60vw; left: -14vw; top: -18vw;
      background: radial-gradient(circle, #3f63e0 0%, rgba(63,99,224,0) 70%);
      animation: drift1 44s var(--ease) infinite alternate; }
.b2 { width: 52vw; height: 52vw; right: -12vw; top: 6vh;
      background: radial-gradient(circle, #c02fa8 0%, rgba(192,47,168,0) 70%);
      animation: drift2 57s var(--ease) infinite alternate; }
.b3 { width: 46vw; height: 46vw; left: 26vw; bottom: -20vw;
      background: radial-gradient(circle, #6a2fb8 0%, rgba(106,47,184,0) 70%);
      animation: drift3 63s var(--ease) infinite alternate; }

@keyframes drift1 { to { transform: translate3d(12vw, 10vh, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(-14vw, 14vh, 0) scale(1.2); } }
@keyframes drift3 { to { transform: translate3d(8vw, -12vh, 0) scale(1.1); } }

.grain {
  position: absolute; inset: -50%; opacity: .05; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.6'/></svg>");
}
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(110% 90% at 50% 45%, transparent 45%, rgba(0,0,0,.62) 100%);
}

.fx { position: fixed; inset: 0; z-index: 40; pointer-events: none; }

/* Red wash when the clock dies. */
.flash {
  position: fixed; inset: 0; z-index: 35; pointer-events: none; opacity: 0;
  background: radial-gradient(90% 70% at 50% 50%, rgba(251,84,115,0) 40%, rgba(244,40,90,.55) 100%);
}
.flash.on { animation: flashPulse 1.6s ease-out 1; }
@keyframes flashPulse {
  0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; }
}

/* ------------------------------------------------------------------ stage */

.stage {
  position: relative; z-index: 10;
  height: 100%; width: 100%;
  padding: var(--pad);
  display: flex; flex-direction: column;
}

.scene { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.scene.in { animation: sceneIn .62s var(--ease) both; }
@keyframes sceneIn {
  from { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ------------------------------------------------------------------- bits */

.chip {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .5em 1.05em; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line);
  font-size: clamp(13px, 1.25vw, 22px); font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase; color: var(--muted);
  backdrop-filter: blur(8px);
}
.chip .dot { width: .5em; height: .5em; border-radius: 50%; background: var(--accent); }
.chip.gold { color: #180a19; background: linear-gradient(135deg, var(--accent), var(--accent-deep));
             border-color: transparent; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex: 0 0 auto; margin-bottom: clamp(12px, 2vh, 32px);
}
.topbar .right { display: flex; align-items: center; gap: .8rem; }

.pips { display: flex; gap: .42em; align-items: center; }
.pip {
  width: clamp(9px, .85vw, 16px); height: clamp(9px, .85vw, 16px);
  border-radius: 50%; background: rgba(255,255,255,.16);
  transition: background .3s, transform .3s, box-shadow .3s;
}
.pip.done { background: rgba(255,255,255,.42); }
.pip.now  { background: var(--accent); transform: scale(1.45);
            box-shadow: 0 0 18px rgba(231,84,200,.75); }

/* ------------------------------------------------------------- title scene */

.hero { flex: 1 1 auto; display: flex; flex-direction: column;
        align-items: center; justify-content: center; text-align: center; gap: 1.2rem; }

.kicker {
  font-size: clamp(14px, 1.5vw, 26px); letter-spacing: .42em;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
  animation: fadeUp .8s var(--ease) both .1s;
}
.hero h1 {
  margin: 0; font-weight: 800; line-height: .96; letter-spacing: -.025em;
  font-size: clamp(44px, 9.5vw, 190px);
  background: linear-gradient(175deg, #ffffff 20%, #c9bce8 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
  animation: fadeUp .9s var(--ease) both .18s;
}
.hero .sub { color: var(--muted); font-size: clamp(15px, 1.7vw, 30px);
             animation: fadeUp .9s var(--ease) both .3s; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

.teamwrap { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center;
            max-width: 90%; margin-top: 1.4rem; }
.teamchip {
  padding: .55em 1.1em; border-radius: 999px; font-size: clamp(14px, 1.4vw, 26px);
  font-weight: 600; background: var(--glass); border: 1px solid var(--line);
  animation: popIn .5s var(--ease) both;
}
@keyframes popIn { from { opacity: 0; transform: scale(.85) translateY(10px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- round intro */

.roundwrap { flex: 1 1 auto; display: flex; flex-direction: column;
             align-items: center; justify-content: center; text-align: center; }
.roundnum {
  font-size: clamp(120px, 30vw, 460px); font-weight: 800; line-height: .8;
  letter-spacing: -.05em;
  background: linear-gradient(160deg, var(--accent) 0%, #ffd9f4 45%, var(--accent-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 20px 60px rgba(231,84,200,.28));
  animation: numIn 1s var(--ease) both;
}
@keyframes numIn {
  from { opacity: 0; transform: scale(.6) rotate(-6deg); filter: blur(24px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.roundlabel { font-size: clamp(16px, 1.8vw, 32px); letter-spacing: .5em;
              text-transform: uppercase; color: var(--muted); margin-top: .4em;
              animation: fadeUp .8s var(--ease) both .35s; }
.roundtitle {
  margin: .35em 0 0; font-size: clamp(30px, 6vw, 110px); font-weight: 800;
  letter-spacing: -.02em; text-wrap: balance;
  animation: fadeUp .9s var(--ease) both .5s;
}
.roundsub { color: var(--muted); font-size: clamp(15px, 1.8vw, 30px); margin-top: .6em;
            animation: fadeUp .9s var(--ease) both .66s; }

/* ---------------------------------------------------------------- question */

.qbody {
  flex: 1 1 auto; min-height: 0; display: grid; gap: clamp(18px, 2.6vw, 48px);
  grid-template-columns: minmax(0, 1fr); align-items: stretch;
}
.qbody.with-img { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
@media (max-aspect-ratio: 1/1) {
  .qbody.with-img { grid-template-columns: minmax(0, 1fr);
                    grid-template-rows: minmax(0, 1fr) minmax(0, 1.3fr); }
}

/* The cell has a definite height, which is what the text fitter measures. */
.qcell { min-height: 0; overflow: hidden; display: flex; align-items: center; }

.qtext {
  font-weight: 700; line-height: 1.14; letter-spacing: -.02em;
  text-wrap: balance; font-size: 5vw;         /* JS fits this */
  animation: fadeUp .7s var(--ease) both .08s;
}
.qtext .qnum {
  display: inline-block; margin-right: .45em; color: var(--accent);
  font-weight: 800; opacity: .9;
}

.qimg {
  min-height: 0; height: 100%; display: flex; align-items: center; justify-content: center;
  animation: imgIn .8s var(--ease) both .16s;
}
.qimg img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 20px; border: 1px solid var(--line);
  box-shadow: var(--shadow); background: #000;
}
@keyframes imgIn { from { opacity: 0; transform: scale(.94) translateY(14px); } to { opacity: 1; transform: none; } }

/* clock ------------------------------------------------------------------ */

.clockrow { flex: 0 0 auto; display: flex; align-items: flex-end;
            justify-content: space-between; gap: 1.4rem; margin-top: clamp(10px, 2vh, 26px); }

.ring { position: relative; width: clamp(96px, 12vw, 200px); height: clamp(96px, 12vw, 200px); flex: 0 0 auto; }
/* display:block or the inline SVG's baseline adds ~4px under the ring */
.ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .track { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 7; }
.ring .prog  { fill: none; stroke: var(--green); stroke-width: 7; stroke-linecap: round;
               transition: stroke .5s linear; }
.ring .num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: clamp(34px, 4.6vw, 78px); font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.ring.warn .prog { stroke: var(--accent); }
.ring.crit .prog { stroke: var(--rose); }
.ring.crit .num  { color: var(--rose); animation: pump .5s ease-in-out infinite; }
.ring.done .prog { stroke: var(--rose); }
.ring.paused { opacity: .55; }
@keyframes pump { 0%,100% { transform: scale(1); } 50% { transform: scale(1.13); } }

.meter { flex: 1 1 auto; height: clamp(8px, .9vh, 14px); border-radius: 999px;
         background: rgba(255,255,255,.09); overflow: hidden; }
.meter i { display: block; height: 100%; width: 100%; border-radius: 999px;
           background: linear-gradient(90deg, var(--green), var(--accent-2));
           transform-origin: left center; }
.meter.warn i { background: linear-gradient(90deg, var(--accent), #ffc9f0); }
.meter.crit i { background: linear-gradient(90deg, var(--rose), #ff9fae); }

.pointschip { color: var(--muted); font-size: clamp(13px, 1.2vw, 22px); font-weight: 600; }

/* pens down -------------------------------------------------------------- */

.pensdown {
  position: fixed; inset: 0; z-index: 30; display: flex;
  align-items: center; justify-content: center; pointer-events: none;
  background: rgba(16,13,24,.58); backdrop-filter: blur(3px);
  animation: fadeIn .35s ease both;
}
.pensdown span {
  font-size: clamp(38px, 10vw, 190px); font-weight: 800; letter-spacing: .04em;
  color: var(--rose); text-shadow: 0 0 60px rgba(251,84,115,.5);
  animation: slam .55s cubic-bezier(.2,1.5,.3,1) both;
}
@keyframes slam { from { opacity: 0; transform: scale(2.4) rotate(-3deg); filter: blur(16px); }
                  to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ reveal */

.revealbody { flex: 1 1 auto; min-height: 0; display: grid; gap: clamp(16px, 2.4vw, 40px);
              grid-template-rows: auto 1fr; align-content: center; }

.rq {
  font-size: clamp(18px, 2.6vw, 46px); font-weight: 600; color: #d5cdec;
  line-height: 1.24; text-wrap: balance; opacity: .92;
}
.rq .qnum { color: var(--accent); font-weight: 800; margin-right: .4em; }

.rrow { display: grid; gap: clamp(14px, 2vw, 34px); min-height: 0;
        grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: stretch; }
@media (max-aspect-ratio: 1/1) {
  .rrow { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
}
.rimg { min-height: 0; display: flex; align-items: center; justify-content: center; }
.rimg img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 18px;
            border: 1px solid var(--line); box-shadow: var(--shadow); background: #000; }

.acard {
  position: relative; overflow: hidden;
  display: grid; place-items: center; gap: clamp(10px, 1.6vw, 26px);
  padding: clamp(20px, 3.4vw, 60px);
  border-radius: 28px; border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
  box-shadow: var(--shadow); backdrop-filter: blur(14px);
  min-height: 0;
}
.acard.hidden-state .ahide { display: flex; }
.acard .ahide {
  display: none; gap: .5em; align-items: center; justify-content: center;
  font-size: clamp(40px, 7vw, 120px); color: rgba(255,255,255,.22); letter-spacing: .2em;
}
.acard .ahide b { animation: bob 1.4s ease-in-out infinite; display: inline-block; }
.acard .ahide b:nth-child(2) { animation-delay: .18s; }
.acard .ahide b:nth-child(3) { animation-delay: .36s; }
@keyframes bob { 0%,100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-.18em); opacity: .9; } }

.alabel {
  font-size: clamp(12px, 1.2vw, 22px); letter-spacing: .42em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
.atext {
  font-size: clamp(30px, 6.4vw, 128px); font-weight: 800; line-height: 1.06;
  letter-spacing: -.025em; text-align: center; text-wrap: balance;
  background: linear-gradient(170deg, #ffffff 25%, #f4a6e4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.atext .w { display: inline-block; animation: wordIn .55s var(--ease) both; }
@keyframes wordIn {
  from { opacity: 0; transform: translateY(.5em) scale(.92); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.anote { color: var(--muted); font-size: clamp(14px, 1.5vw, 26px); text-align: center;
         animation: fadeUp .7s var(--ease) both .5s; max-width: 70ch; }

.aimg { display: flex; align-items: center; justify-content: center; min-height: 0; max-height: 46vh; }
.aimg img { max-width: 100%; max-height: 46vh; object-fit: contain; border-radius: 18px;
            border: 1px solid var(--line); box-shadow: var(--shadow); }
.aimg.veiled img { filter: blur(34px) saturate(.4); transform: scale(1.04); }
.aimg img { transition: filter .9s var(--ease), transform .9s var(--ease); }

/* the sweep of light across a freshly revealed answer */
.acard .sweep {
  position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform: translateX(-140%); pointer-events: none;
}
.acard.revealed .sweep { animation: sweep 1.1s var(--ease) 1; }
@keyframes sweep { to { transform: translateX(320%); } }

.acard.revealed { animation: cardPop .5s var(--ease) both; }
@keyframes cardPop {
  0% { transform: scale(.985); } 55% { transform: scale(1.015); } 100% { transform: scale(1); }
}

/* ------------------------------------------------------------- leaderboard */

.boardwrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
             justify-content: center; gap: clamp(8px, 1.1vh, 16px); }
.boardhead { text-align: center; margin-bottom: clamp(8px, 2vh, 26px); }
.boardhead h2 { margin: 0; font-size: clamp(26px, 4.6vw, 86px); font-weight: 800; letter-spacing: -.02em; }
.boardhead .sub { color: var(--muted); font-size: clamp(13px, 1.4vw, 24px);
                  letter-spacing: .3em; text-transform: uppercase; margin-top: .4em; }

.rows { display: flex; flex-direction: column; gap: clamp(6px, .9vh, 14px);
        overflow: hidden; }
.row {
  position: relative; display: grid; align-items: center;
  grid-template-columns: clamp(42px,4vw,74px) 1fr auto;
  gap: clamp(10px, 1.4vw, 22px);
  padding: clamp(8px, 1.1vh, 16px) clamp(12px, 1.4vw, 24px);
  border-radius: 16px; border: 1px solid var(--line); background: var(--glass);
  overflow: hidden; will-change: transform;
}
.row .bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, rgba(91,140,255,.20), rgba(139,92,246,.13));
  transition: width 1.1s var(--ease); border-right: 1px solid rgba(255,255,255,.10);
}
.row > * { position: relative; }
.row .rank { font-size: clamp(18px, 2.2vw, 40px); font-weight: 800; color: var(--muted);
             font-variant-numeric: tabular-nums; }
.row .name { font-size: clamp(17px, 2.3vw, 44px); font-weight: 700; letter-spacing: -.01em;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .tot  { font-size: clamp(19px, 2.5vw, 48px); font-weight: 800;
             font-variant-numeric: tabular-nums; }
.row .delta { font-size: clamp(12px,1.2vw,22px); color: var(--green); font-weight: 700;
              margin-left: .5em; opacity: 0; }
.row .delta.on { animation: deltaIn 1.6s var(--ease) both; }
@keyframes deltaIn { 0% { opacity: 0; transform: translateY(.6em); } 25% { opacity: 1; transform: none; }
                     80% { opacity: 1; } 100% { opacity: .0; } }
.row.r1 { border-color: rgba(231,84,200,.55); background: rgba(231,84,200,.09); }
.row.r1 .rank, .row.r1 .tot { color: var(--accent); }
.row.r2 { border-color: rgba(214,206,240,.35); }
.row.r3 { border-color: rgba(198,120,170,.35); }
.row.moving { z-index: 2; }

/* ------------------------------------------------------------------- final */

.podium { flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center;
          gap: clamp(10px, 2vw, 40px); padding-bottom: 2vh; }
.pod { display: flex; flex-direction: column; align-items: center; gap: .8rem;
       width: clamp(120px, 20vw, 340px); }
.pod .pname { font-size: clamp(16px, 2.1vw, 40px); font-weight: 800; text-align: center;
              text-wrap: balance; }
.pod .pscore { color: var(--muted); font-size: clamp(13px, 1.4vw, 26px); font-weight: 700; }
.pod .block {
  width: 100%; border-radius: 18px 18px 0 0; border: 1px solid var(--line); border-bottom: none;
  display: flex; align-items: flex-start; justify-content: center; padding-top: .6rem;
  font-size: clamp(24px, 4vw, 70px); font-weight: 800; color: rgba(255,255,255,.5);
  transform-origin: bottom center; animation: rise 1s var(--ease) both;
}
.pod.p1 .block { height: clamp(140px, 30vh, 340px);
  background: linear-gradient(180deg, rgba(231,84,200,.42), rgba(231,84,200,.06));
  border-color: rgba(231,84,200,.6); color: var(--accent); animation-delay: .5s; }
.pod.p2 .block { height: clamp(100px, 22vh, 250px);
  background: linear-gradient(180deg, rgba(214,206,240,.28), rgba(214,206,240,.04)); animation-delay: .25s; }
.pod.p3 .block { height: clamp(76px, 17vh, 195px);
  background: linear-gradient(180deg, rgba(198,120,170,.28), rgba(198,120,170,.04)); animation-delay: 0s; }
@keyframes rise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

.crown { font-size: clamp(26px, 3.4vw, 60px); animation: floaty 3s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-.22em) } }

.restlist { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
            margin-top: 1.2rem; }
.restlist span { padding: .4em .9em; border-radius: 999px; background: var(--glass);
                 border: 1px solid var(--line); font-size: clamp(12px,1.2vw,22px); color: var(--muted); }

/* -------------------------------------------------------- swap / scores / idle */

.midtitle { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center;
            justify-content: center; text-align: center; gap: 1rem; }
.midtitle h2 { margin: 0; font-size: clamp(34px, 7.5vw, 150px); font-weight: 800;
               letter-spacing: -.025em; text-wrap: balance;
               animation: fadeUp .8s var(--ease) both; }
.midtitle p { margin: 0; color: var(--muted); font-size: clamp(15px, 1.9vw, 34px);
              animation: fadeUp .8s var(--ease) both .18s; }

.dots3 { display: flex; gap: .6rem; margin-top: 1rem; }
.dots3 i { width: clamp(9px,1vw,16px); height: clamp(9px,1vw,16px); border-radius: 50%;
           background: var(--accent); opacity: .3; animation: bob2 1.3s ease-in-out infinite; }
.dots3 i:nth-child(2) { animation-delay: .18s; }
.dots3 i:nth-child(3) { animation-delay: .36s; }
@keyframes bob2 { 0%,100% { opacity: .25; transform: translateY(0); }
                  50% { opacity: 1; transform: translateY(-.5em); } }

.papers { display: flex; gap: clamp(10px,2vw,34px); margin-top: 2rem; }
.paper {
  width: clamp(52px,7vw,120px); height: clamp(68px,9vw,155px); border-radius: 8px;
  background: linear-gradient(160deg, #f6f7ff, #cfc7e6); box-shadow: var(--shadow);
  transform-origin: bottom center; animation: swapDance 2.6s var(--ease) infinite;
}
.paper:nth-child(2) { animation-delay: .32s; }
.paper:nth-child(3) { animation-delay: .64s; }
@keyframes swapDance {
  0%,100% { transform: rotate(-5deg) translateY(0); }
  35% { transform: rotate(6deg) translateY(-14px); }
  70% { transform: rotate(-3deg) translateY(4px); }
}

/* ----------------------------------------------------------------- corner */

.corner {
  position: fixed; right: 16px; bottom: 14px; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  opacity: 0; transition: opacity .35s ease;
}
.corner.show { opacity: 1; }
.cbtn {
  display: inline-flex; align-items: center; gap: .5em; cursor: pointer;
  padding: .5em .9em; border-radius: 999px; color: var(--muted);
  background: rgba(16,13,24,.72); border: 1px solid var(--line);
  font: inherit; font-size: 13px; backdrop-filter: blur(8px);
}
.cbtn:hover { color: var(--paper); border-color: rgba(255,255,255,.25); }
.cbtn.armed { color: var(--accent); border-color: rgba(231,84,200,.5); }
.conn { width: 9px; height: 9px; border-radius: 50%; background: var(--green);
        box-shadow: 0 0 10px rgba(53,214,155,.8); }
.conn.off { background: var(--rose); box-shadow: 0 0 10px rgba(251,84,115,.8);
            animation: pump .9s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------- audio */

.eqwrap { display: flex; flex-direction: column; align-items: center; justify-content: center;
          gap: clamp(14px, 2vh, 28px); width: 100%; height: 100%; }
.eq { display: flex; align-items: flex-end; gap: clamp(6px, .9vw, 14px);
      height: clamp(90px, 22vh, 240px); }
.eq i {
  display: block; width: clamp(10px, 1.5vw, 26px); border-radius: 999px;
  height: 18%; transform-origin: bottom center;
  background: linear-gradient(180deg, var(--accent-2), var(--accent-3));
  opacity: .35; transition: opacity .4s;
}
.eq.playing i { opacity: 1; animation: bounce 1s ease-in-out infinite; }
.eq.playing i:nth-child(1) { animation-duration: .82s; animation-delay: -.10s; }
.eq.playing i:nth-child(2) { animation-duration: 1.14s; animation-delay: -.35s; }
.eq.playing i:nth-child(3) { animation-duration: .68s; animation-delay: -.55s; }
.eq.playing i:nth-child(4) { animation-duration: 1.32s; animation-delay: -.20s; }
.eq.playing i:nth-child(5) { animation-duration: .92s; animation-delay: -.72s; }
.eq.playing i:nth-child(6) { animation-duration: 1.06s; animation-delay: -.05s; }
.eq.playing i:nth-child(7) { animation-duration: .76s; animation-delay: -.44s; }
.eq.playing i:nth-child(8) { animation-duration: 1.22s; animation-delay: -.62s; }
.eq.playing i:nth-child(9) { animation-duration: .88s; animation-delay: -.28s; }
@keyframes bounce { 0%, 100% { height: 16%; } 50% { height: 100%; } }

.eqlabel { font-size: clamp(13px, 1.5vw, 26px); letter-spacing: .4em; text-transform: uppercase;
           color: var(--muted); font-weight: 700; }

.gesture {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 70;
  padding: .7em 1.4em; border-radius: 999px; cursor: pointer; font-weight: 700;
  background: var(--accent); color: #180a19; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  animation: pump 1.6s ease-in-out infinite;
}

/* ------------------------------------------------------------- tiebreak */

.qtext .unit, .tbnum .unit { color: var(--muted); font-weight: 600; }

.tbwrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
          align-items: center; justify-content: center; gap: clamp(12px, 2.4vh, 30px); }
.tbwrap .tbq { font-size: clamp(16px, 2.3vw, 40px); font-weight: 600; color: #d5cdec;
               text-align: center; text-wrap: balance; max-width: 80%; }
.tbanswer { text-align: center; animation: cardPop .6s var(--ease) both .35s; }
.tbnum {
  font-size: clamp(42px, 9vw, 170px); font-weight: 800; line-height: 1; letter-spacing: -.03em;
  background: linear-gradient(170deg, #ffffff 25%, #f4a6e4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 16px 44px rgba(231,84,200,.25));
}

.tbrows { display: flex; flex-direction: column; gap: clamp(6px, 1vh, 14px);
          width: min(880px, 84%); }
.tbrow {
  position: relative; display: grid; align-items: center;
  grid-template-columns: 1fr auto auto; gap: clamp(10px, 1.6vw, 28px);
  padding: clamp(8px, 1.2vh, 16px) clamp(14px, 1.8vw, 28px);
  border-radius: 16px; border: 1px solid var(--line); background: var(--glass);
  animation: tbIn .6s var(--ease) both;
}
@keyframes tbIn { from { opacity: 0; transform: translateY(18px) scale(.97); filter: blur(6px); }
                  to { opacity: 1; transform: none; filter: blur(0); } }
.tbrow .tbname { font-size: clamp(16px, 2vw, 36px); font-weight: 700;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbrow .tbguess { font-size: clamp(17px, 2.2vw, 40px); font-weight: 800;
                  font-variant-numeric: tabular-nums; }
.tbrow .tbdist { font-size: clamp(13px, 1.4vw, 26px); font-weight: 700; color: var(--muted);
                 font-variant-numeric: tabular-nums; min-width: 5ch; text-align: right; }
.tbrow.win { border-color: rgba(231,84,200,.6); background: rgba(231,84,200,.11); }
.tbrow.win .tbname, .tbrow.win .tbguess { color: var(--accent); }
.tbrow .tbcrown { position: absolute; right: -.2em; top: -.7em;
                  font-size: clamp(18px, 2vw, 34px); animation: floaty 3s ease-in-out infinite; }

/* ---------------------------------------------------------------- recap
   Every answer of the round on one screen, while the papers come back. */

.recap {
  flex: 1 1 auto; min-height: 0; display: grid; gap: clamp(7px, 1vw, 16px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Rows share the height that is actually there. Without minmax(0,1fr) a
     round where every card carries a thumbnail pushes past the stage. */
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch; overflow: hidden;
}
@media (max-aspect-ratio: 1/1) { .recap { grid-template-columns: minmax(0, 1fr); } }

.rcard {
  min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: clamp(8px, 1vw, 18px);
  padding: clamp(7px, 1vh, 15px) clamp(11px, 1.2vw, 22px);
  border-radius: 14px; border: 1px solid var(--line); background: var(--glass);
  animation: rcardIn .5s var(--ease) both;
}
.recap.withimg .rcard { grid-template-columns: auto auto 1fr; }
@keyframes rcardIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.rcard .rnum {
  font-size: clamp(15px, 1.7vw, 30px); font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: right; opacity: .85;
}
.rcard .rthumb { width: clamp(44px, 5vw, 88px); height: 100%; max-height: clamp(34px, 3.6vw, 62px);
                 flex: 0 0 auto; }
.rcard .rthumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px;
                     border: 1px solid var(--line); background: #000; display: block; }

.rcard .rtxt { min-width: 0; display: flex; flex-direction: column; gap: .1em; }
.rcard .rquestion {
  font-size: clamp(11px, 1.15vw, 21px); color: var(--muted); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rcard .ranswer {
  font-size: clamp(15px, 1.85vw, 34px); font-weight: 800; line-height: 1.15;
  letter-spacing: -.01em;
  background: linear-gradient(170deg, #ffffff 30%, #f4a6e4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rcard .rnote { font-size: clamp(10px, 1vw, 18px); color: var(--muted); opacity: .8;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* a long round packs tighter rather than spilling off the bottom */
.recap.dense .rcard { padding: clamp(5px, .75vh, 11px) clamp(9px, 1vw, 18px); border-radius: 11px; }
.recap.dense .rcard .ranswer { font-size: clamp(13px, 1.55vw, 28px); }
.recap.dense .rcard .rquestion { font-size: clamp(10px, 1vw, 18px); }
.recap.dense .rcard .rthumb { width: clamp(38px, 4.2vw, 72px); height: clamp(28px, 3vw, 50px); }

/* ----------------------------------------------------- music round
   Nothing to read: the track number tells the room which line to write
   on, the bars tell them it is playing. */

.qbody.music { grid-template-columns: minmax(0, 1fr); }
.musicq {
  min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: clamp(6px, 1.4vh, 20px);
}
.mqlabel {
  font-size: clamp(13px, 1.5vw, 26px); letter-spacing: .46em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.mqnum {
  /* bounded on BOTH axes - a width-only clamp overflows a short 16:9 stage */
  font-size: clamp(64px, min(20vw, 30vh), 300px); font-weight: 800; line-height: .85;
  letter-spacing: -.05em;
  background: var(--beam); -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 18px 50px rgba(231, 84, 200, .25));
  animation: numIn .9s var(--ease) both;
}
.musicq .eqwrap { height: auto; gap: clamp(8px, 1.4vh, 18px); }
.musicq .eq { height: clamp(40px, min(11vh, 8vw), 150px); }

.rcard .rclip { color: var(--accent-2); margin-right: .4em; }