/* trivia.show public big screen - arcade neon. Tweak the look with the variables below. */
:root {
  --bg: #070018;
  --panel: #12062c;
  --panel-done: #0e0522;
  --text: #f4f7fb;
  --muted: rgba(255, 255, 255, 0.72);      /* losers, TBD, waiting text (review: light grey/white ~70%) */
  --border: #7a4cff;                      /* bright purple, not thin dark purple */
  --border-w: 3px;
  --line: #8a5cff;                        /* bracket connector lines */
  --line-win: #00f0ff;
  --win: #00f0ff;                         /* cyan winner */
  --win-bg: #04323a;
  --live: #b8ff00;                        /* lime live match */
  --live-bg: #1d3000;
  --q: #ff3fd8;                           /* magenta question (no red anywhere, avoids pink/red blur) */
  --q-bg: #3a0a33;
  --pass: #ffd000;                        /* yellow free pass */
  --pass-bg: #2e2400;
  --soon: #a77bff;                        /* up next */
  --gold: #ffd000;
  --font-ui: "Exo 2", "Rajdhani", "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Orbitron", "Russo One", "Arial Black", "Segoe UI", sans-serif;
  --banner-name: 64px;                    /* NOW PLAYING names (~3x the mockup) */
  --banner-score: 68px;
  --badge-size: 17px;                     /* board badges: LIVE / QUESTION / FREE PASS / UP NEXT */
  --done-opacity: 0.5;                    /* finished early rounds are dimmed */
  --pulse-speed: 2.4s;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font-ui); }
#screen {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0;
  display: flex; flex-direction: column; padding: 12px 20px 8px;
  background: radial-gradient(ellipse at 18% 0%, rgba(255, 43, 214, 0.16), transparent 42%), radial-gradient(ellipse at 82% 0%, rgba(0, 240, 255, 0.15), transparent 42%), var(--bg);
}
header { display: grid; grid-template-columns: 420px 1fr 520px; align-items: center; height: 76px; flex: 0 0 76px; border-bottom: var(--border-w) solid #3a1a70; }
.brand { display: flex; align-items: center; gap: 14px; }
.icons { display: flex; gap: 8px; font-size: 40px; line-height: 1; }
.logo { font-family: var(--font-display); font-weight: 800; font-size: 38px; letter-spacing: 1px; color: #fff; text-shadow: 0 0 10px var(--win); }
.logo span { color: var(--win); }
.titles { text-align: center; }
.titles h1 { font-family: var(--font-display); font-weight: 800; font-size: 34px; letter-spacing: 3px; color: #fff; text-shadow: 0 0 8px var(--q); line-height: 1.1; }
.titles p { margin-top: 4px; font-size: 18px; font-weight: 700; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.livebar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 6px; padding: 8px 14px; font-weight: 800; font-size: 20px; letter-spacing: 1px; text-transform: uppercase; border: var(--border-w) solid var(--border); color: #fff; background: #1a0840; white-space: nowrap; }
.pill.live { border-color: var(--live); color: var(--live); background: #122000; }
.pill.warn { border-color: var(--pass); color: var(--pass); background: var(--pass-bg); }
.dot { width: 12px; height: 12px; border-radius: 50%; background: currentColor; }

/* ---------- NOW PLAYING banner ---------- */
#banner { flex: 0 0 auto; display: grid; gap: 10px; padding: 12px 0 10px; }
.brow { display: grid; grid-template-columns: 190px 230px 1fr auto 1fr; align-items: center; gap: 18px; min-height: 100px; padding: 6px 22px; background: var(--panel); border: var(--border-w) solid var(--border); border-radius: 10px; }
.brow.live { border-color: var(--live); animation: pulse var(--pulse-speed) ease-in-out infinite; }
.brow.question, .brow.steal { border-color: var(--q); animation: pulseq var(--pulse-speed) ease-in-out infinite; }
.brow.next { border-style: dashed; border-color: var(--soon); }
.brow.done { border-color: var(--win); }
.brow .stagechip { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: 2px; color: #fff; text-transform: uppercase; }
.brow .state { justify-self: start; font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: 1.5px; padding: 8px 12px; border-radius: 6px; text-transform: uppercase; text-align: center; line-height: 1.15; }
.state.live { background: var(--live); color: #0d1a00; }
.state.question, .state.steal { background: var(--q); color: #fff; }
.state.next { background: var(--soon); color: #fff; }
.state.done { background: var(--win); color: #001a1e; }
.brow .bn { font-size: var(--banner-name); font-weight: 900; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.5px; }
.brow .bn.a { text-align: right; }
.brow .bn.b { text-align: left; }
.brow .bn.ans { color: var(--q); text-shadow: 0 0 14px rgba(255, 63, 216, 0.6); }
.brow .bn.ans::after { content: " ?"; }
.brow .bn.ans.a::after { content: ""; }
.brow .bn.ans.a::before { content: "? "; }
.brow .bscore { font-family: var(--font-display); font-weight: 900; font-size: var(--banner-score); color: var(--live); text-shadow: 0 0 12px rgba(184, 255, 0, 0.55); white-space: nowrap; padding: 0 10px; }
.brow.next .bn { font-size: calc(var(--banner-name) * 0.72); color: #fff; }
.brow.next .bscore { font-size: calc(var(--banner-score) * 0.6); color: var(--soon); text-shadow: none; }
.brow .sub { grid-column: 3 / 6; text-align: center; font-size: 22px; font-weight: 800; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-top: -4px; }
#banner .bsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.brow.c { grid-template-columns: 120px 150px 1fr auto 1fr; min-height: 76px; gap: 12px; padding: 4px 14px; }
.brow.c .bn { font-size: calc(var(--banner-name) * 0.62); }
.brow.c .bscore { font-size: calc(var(--banner-score) * 0.6); }
.brow.c .stagechip { font-size: 20px; }
.brow.c .state { font-size: 16px; padding: 6px 8px; }
.champ { text-align: center; padding: 14px; border: 4px solid var(--gold); border-radius: 12px; background: #1c1600; box-shadow: 0 0 40px rgba(255, 208, 0, 0.45); animation: pulseg 2.4s ease-in-out infinite; }
.champ .lbl { font-family: var(--font-display); font-size: 34px; letter-spacing: 6px; color: var(--gold); font-weight: 800; }
.champ .who { font-size: 110px; font-weight: 900; line-height: 1.05; color: #fff; text-shadow: 0 0 22px rgba(255, 208, 0, 0.8); }
.hero { text-align: center; padding: 18px; border: var(--border-w) dashed var(--border); border-radius: 12px; background: var(--panel); }
.hero .big { font-family: var(--font-display); font-size: 54px; font-weight: 800; letter-spacing: 3px; }
.hero .small { font-size: 28px; font-weight: 700; color: var(--muted); margin-top: 6px; }

@keyframes pulse { 0%, 100% { box-shadow: 0 0 10px rgba(184, 255, 0, 0.35); } 50% { box-shadow: 0 0 34px rgba(184, 255, 0, 0.85); } }
@keyframes pulseq { 0%, 100% { box-shadow: 0 0 10px rgba(255, 63, 216, 0.35); } 50% { box-shadow: 0 0 34px rgba(255, 63, 216, 0.85); } }
@keyframes pulseg { 0%, 100% { box-shadow: 0 0 18px rgba(255, 208, 0, 0.35); } 50% { box-shadow: 0 0 46px rgba(255, 208, 0, 0.8); } }
@media (prefers-reduced-motion: reduce) { .brow, .mbox, .champ { animation: none !important; } }

/* ---------- bracket board ---------- */
#board { flex: 1; position: relative; min-height: 0; }
.panel { position: absolute; }
.panel-title { position: absolute; left: 0; right: 0; top: 0; height: 34px; font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; white-space: nowrap; }
.panel-title.a, .panel-title.ltr { color: var(--win); text-shadow: 0 0 8px var(--win); }
.panel-title.rtl { color: var(--q); text-shadow: 0 0 8px var(--q); text-align: right; }
.panel-title .meta { font-family: var(--font-ui); font-size: 18px; color: var(--muted); letter-spacing: 1px; margin-left: 12px; text-shadow: none; }
.colhead { position: absolute; font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
svg.lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
svg.lines path { fill: none; stroke: var(--line); stroke-width: 3; opacity: 0.75; }
svg.lines path.won { stroke: var(--line-win); opacity: 0.9; }
.mbox { position: absolute; display: flex; flex-direction: column; justify-content: center; background: var(--panel); border: var(--border-w) solid var(--border); border-radius: 6px; }
.mbox .pl { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 10px; font-weight: 800; line-height: 1.05; color: #fff; min-height: 0; overflow: hidden; }
.mbox .pl + .pl { border-top: 2px solid #3d1f78; }
.mbox .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbox .sc { flex: 0 0 auto; font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 800; color: var(--muted); }
.mbox .pl.win { background: var(--win-bg); }
.mbox .pl.win .sc { color: var(--win); }
.mbox .pl.lose { color: var(--muted); }
.mbox .pl.lose .nm { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgba(255, 255, 255, 0.55); }
.mbox .pl.lead { background: var(--live-bg); }
.mbox .pl.lead .sc { color: var(--live); }
.mbox .pl.ans { background: var(--q-bg); }
.mbox .pl.ans .sc { color: var(--q); }
.mbox .pl.tbd { color: var(--muted); font-style: italic; font-weight: 700; }
.mbox.done { background: var(--panel-done); }
.mbox.live { border-color: var(--live); animation: pulse var(--pulse-speed) ease-in-out infinite; z-index: 2; }
.mbox.question, .mbox.steal { border-color: var(--q); animation: pulseq var(--pulse-speed) ease-in-out infinite; z-index: 2; }
.mbox.next { border-color: var(--soon); border-style: solid; }
.mbox.tbd { background: transparent; border-style: dashed; border-color: rgba(167, 123, 255, 0.8); }
.mbox.bye { background: var(--pass-bg); border-color: var(--pass); }
.mbox.seed { border-color: var(--win); }
.mbox.champion { border-color: var(--gold); background: #1c1600; box-shadow: 0 0 22px rgba(255, 208, 0, 0.5); }
.col-done { opacity: var(--done-opacity); }
.col-done.mbox { animation: none; }
.mbox.fin { opacity: 0.78; }
.badge { position: absolute; top: -0.85em; right: 8px; font-family: var(--font-display); font-size: var(--badge-size); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; line-height: 1.2; z-index: 3; white-space: nowrap; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; }
.badge.live { background: var(--live); color: #0d1a00; }
.badge.question, .badge.steal { background: var(--q); color: #fff; }
.badge.next { background: var(--soon); color: #fff; }
.badge.pass { background: var(--pass); color: #2a2100; max-width: none; overflow: visible; right: auto; left: 6px; }
.badge.seedb { background: var(--win); color: #001a1e; }
.badge.gold { background: var(--gold); color: #2a2100; }
.badge.ns { background: #fff; color: #222; }
.rtl .badge { right: auto; left: 8px; }
.tag { display: inline-block; margin-left: 8px; font-family: var(--font-display); font-size: 0.6em; font-weight: 800; padding: 2px 6px; border-radius: 3px; background: var(--pass); color: #2a2100; vertical-align: middle; }
.tag.seed { background: var(--win); color: #001a1e; }

/* centre finals column (2 groups) */
.finals { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.finals .rps-row { display: flex; justify-content: center; gap: 20px; font-size: 44px; line-height: 1; }
.finals h2 { text-align: center; font-family: var(--font-display); font-size: 20px; letter-spacing: 2px; color: var(--gold); font-weight: 800; }
.fslot { position: relative; }
.fslot .lbl { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #fff; margin-bottom: 6px; text-align: center; }
.fslot .lbl small { display: block; font-family: var(--font-ui); font-size: 16px; color: var(--muted); letter-spacing: 0.5px; text-transform: none; margin-top: 2px; }
.fslot.final .lbl { color: var(--gold); font-size: 20px; }
.fslot .mbox { position: relative; height: 118px; }
.fslot.final .mbox { height: 136px; border-color: var(--gold); }
.fslot.final .mbox.live, .fslot.final .mbox.question, .fslot.final .mbox.steal { border-color: var(--live); }

/* waiting / roster views */
.roster { position: absolute; inset: 0; display: grid; gap: 10px 16px; align-content: start; padding: 10px 4px; }
.roster div { background: var(--panel); border: var(--border-w) solid var(--border); border-radius: 6px; padding: 8px 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

footer { flex: 0 0 38px; display: flex; justify-content: space-between; align-items: center; font-size: 18px; color: var(--muted); padding: 4px 4px 0; font-weight: 700; }
#views { display: flex; gap: 6px; }
#views button { font: 800 16px var(--font-display); letter-spacing: 1px; color: #fff; background: #1a0840; border: 2px solid var(--border); border-radius: 5px; padding: 4px 12px; cursor: pointer; }
#views button.on { background: var(--win); color: #001a1e; border-color: var(--win); }

.brow.c.next .bn { font-size: calc(var(--banner-name) * 0.5); }

/* ---------- online match overlay (big screen) ---------- */
.hidden { display: none !important; }
.brow .onl { font-size: 14px; letter-spacing: 1px; color: var(--live); }
#online { position: absolute; left: 20px; right: 20px; top: 96px; bottom: 46px; z-index: 20; display: grid; gap: 18px; background: rgba(7, 0, 24, 0.9); border-radius: 14px; padding: 18px; }
#online.one { grid-template-columns: 1fr; --hand: 300px; --oname: 76px; }
#online.two { grid-template-columns: 1fr 1fr; --hand: 190px; --oname: 50px; }
.opanel { display: flex; flex-direction: column; border: 4px solid var(--border); border-radius: 14px; background: var(--panel); padding: 18px 24px; min-width: 0; overflow: hidden; }
.opanel.live { border-color: var(--live); animation: pulse var(--pulse-speed) ease-in-out infinite; }
.opanel.q { border-color: var(--q); animation: pulseq var(--pulse-speed) ease-in-out infinite; }
.opanel.done { border-color: var(--gold); animation: pulseg 2.4s ease-in-out infinite; }
.ohead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.ostage { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: 2px; color: var(--live); }
.oscore { font-size: 34px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oscore i { font-style: normal; font-family: var(--font-display); color: var(--live); padding: 0 10px; }
.oarena { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; min-height: 0; }
.oside { text-align: center; min-width: 0; }
.ohand { font-size: var(--hand); line-height: 1.05; display: inline-block; filter: drop-shadow(0 0 22px rgba(167, 123, 255, 0.7)); }
.ohand.mirror { transform: scaleX(-1); }
.ohand.pump { animation: pump 0.9s ease-in-out infinite; }
.ohand.mirror.pump { animation: pumpm 0.9s ease-in-out infinite; }
.ohand.pop { animation: pop 0.7s cubic-bezier(.2, 1.6, .4, 1) both; }
.ohand.mirror.pop { animation: popm 0.7s cubic-bezier(.2, 1.6, .4, 1) both; }
.ohand.win { filter: drop-shadow(0 0 30px var(--live)) drop-shadow(0 0 60px rgba(184, 255, 0, 0.6)); }
.ohand.lose { opacity: 0.45; filter: grayscale(0.6); }
@keyframes pump { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(46px) rotate(-8deg); } }
@keyframes pumpm { 0%, 100% { transform: scaleX(-1) translateY(0) rotate(0); } 50% { transform: scaleX(-1) translateY(46px) rotate(-8deg); } }
@keyframes pop { 0% { transform: scale(0.2) rotate(-25deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes popm { 0% { transform: scaleX(-1) scale(0.2) rotate(-25deg); opacity: 0; } 100% { transform: scaleX(-1) scale(1) rotate(0); opacity: 1; } }
.oname { font-size: var(--oname); font-weight: 900; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olock { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: 1px; color: var(--muted); margin-top: 6px; min-height: 30px; }
.olock .locked { color: var(--win); text-shadow: 0 0 10px var(--win); }
.omid { text-align: center; min-width: 200px; }
.oword { font-family: var(--font-display); font-size: 64px; font-weight: 900; letter-spacing: 3px; color: var(--live); text-shadow: 0 0 18px rgba(184, 255, 0, 0.7); }
#online.two .oword { font-size: 40px; }
.oword.choose { color: #fff; text-shadow: 0 0 22px var(--q); font-size: 84px; }
.oword.vs { color: #fff; font-size: 56px; }
.otimer { font-family: var(--font-display); font-size: 56px; font-weight: 900; color: #fff; min-height: 30px; }
.opanel .otimer { font-size: 32px; text-align: center; color: var(--muted); }
.omid .otimer { font-size: 72px; color: #fff; }
.obar { height: 14px; background: #2a1050; border-radius: 7px; overflow: hidden; margin-top: 8px; }
.obar i { display: block; height: 100%; background: var(--live); transition: width 0.12s linear; }
.omsg { text-align: center; font-family: var(--font-display); font-size: 44px; font-weight: 900; letter-spacing: 2px; color: #fff; margin-top: 6px; }
#online.two .omsg { font-size: 28px; }
.omsg.w { color: var(--live); text-shadow: 0 0 16px rgba(184, 255, 0, 0.7); }
.obig { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.otop { font-family: var(--font-display); font-size: 52px; font-weight: 900; letter-spacing: 3px; color: var(--q); text-shadow: 0 0 18px rgba(255, 63, 216, 0.7); }
#online.two .otop { font-size: 32px; }
.ocall { font-size: 140px; font-weight: 900; line-height: 1; color: #fff; text-shadow: 0 0 26px rgba(255, 255, 255, 0.4); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#online.two .ocall { font-size: 84px; }
.osub { font-family: var(--font-display); font-size: 44px; font-weight: 800; letter-spacing: 3px; color: var(--live); }
#online.two .osub { font-size: 28px; }
.olast { font-size: 80px; opacity: 0.8; }
.onext { font-size: 36px; font-weight: 800; color: var(--muted); }

/* ---------- phones / small screens ---------- */
#mobile { display: none; }
body.mobile { overflow: auto; height: auto; }
body.mobile #screen { display: none; }
body.mobile #mobile { display: block; padding: 12px 12px 30px; max-width: 640px; margin: 0 auto; font-size: 18px; }
.mhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mhead .logo { font-size: 26px; }
.mhead .pill { font-size: 14px; padding: 5px 10px; }
.msum { color: var(--muted); font-weight: 700; margin-bottom: 10px; }
.mcard { background: var(--panel); border: 3px solid var(--border); border-radius: 12px; padding: 12px; margin: 10px 0; }
.mcard.gold { border-color: var(--gold); text-align: center; }
.mcard.me { border-color: var(--win); }
.ml { font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: 1.5px; color: var(--muted); }
.mbig { font-size: 40px; font-weight: 900; }
.mbtn { display: block; text-align: center; margin-top: 10px; padding: 14px; border-radius: 10px; background: var(--win); color: #001a1e; font-weight: 900; text-decoration: none; font-size: 19px; }
.msec { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: 2px; color: var(--win); margin: 18px 0 6px; text-transform: uppercase; }
.mstage { font-size: 14px; font-weight: 800; color: var(--muted); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: 1px; }
.mrow { background: var(--panel); border: 3px solid #4a2a90; border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.mrow.live { border-color: var(--live); }
.mrow.done { opacity: 0.8; }
.mrow.bye { border-color: var(--pass); background: var(--pass-bg); }
.mtop { display: flex; gap: 6px; min-height: 0; }
.mtop:empty { display: none; }
.mb { font-family: var(--font-display); font-size: 12px; font-weight: 800; letter-spacing: 1px; padding: 3px 7px; border-radius: 4px; margin-bottom: 4px; }
.mb.live { background: var(--live); color: #0d1a00; } .mb.q { background: var(--q); color: #fff; } .mb.next { background: var(--soon); color: #fff; } .mb.onl { border: 2px solid var(--live); color: var(--live); }
.mline { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; font-size: 21px; font-weight: 800; }
.mline span:last-child { text-align: right; }
.mline b { font-family: var(--font-display); color: var(--live); font-size: 20px; }
.mline .w { color: var(--win); }
.mline .l { color: var(--muted); text-decoration: line-through; }
.mline .fp { background: var(--pass); color: #2a2100; border-radius: 4px; padding: 2px 6px; font-size: 12px; }
.mtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 4px; }
.mtabs button { font: 800 16px var(--font-ui); color: #fff; background: #1a0840; border: 3px solid var(--border); border-radius: 8px; padding: 10px 14px; min-height: 48px; }
.mtabs button.on { background: var(--win); color: #001a1e; border-color: var(--win); }
.mnames { display: flex; flex-wrap: wrap; gap: 6px; } .mnames span { background: var(--panel); border: 2px solid var(--border); border-radius: 6px; padding: 6px 10px; font-weight: 700; }
.mfoot { margin-top: 24px; text-align: center; color: var(--muted); } .mfoot a { color: var(--win); }

/* ================= friendly fun layer ================= */
.brand .icons { display: flex; gap: 2px; align-items: flex-end; }
.brand .icons .hchar { width: 54px; height: 60px; filter: drop-shadow(0 0 8px rgba(43, 231, 255, .45)); }
.hchar.bob { animation: bob 2.4s ease-in-out infinite; }
.hchar.bob.d1 { animation-delay: .3s; } .hchar.bob.d2 { animation-delay: .6s; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
footer .tip { color: #fff; font-size: 19px; }
footer .tip.fade { animation: tipIn .6s ease-out; }
@keyframes tipIn { from { opacity: 0; transform: translateY(8px); } }
.mbox.fresh { animation: freshGlow 1s ease-in-out 4; z-index: 5; }
@keyframes freshGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 216, 74, 0); } 50% { box-shadow: 0 0 0 6px #ffd84a, 0 0 40px 10px rgba(255, 216, 74, .7); } }

/* spotlight */
#spot.hidden { display: none; }
#spot { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
#spot .sp-dim { position: absolute; inset: 0; background: radial-gradient(ellipse 900px 620px at 50% 52%, rgba(122, 76, 255, .35), rgba(4, 0, 14, .94) 70%); opacity: 0; transition: opacity .55s ease; }
#spot.in .sp-dim { opacity: 1; }
#spot.out .sp-dim { opacity: 0; transition-duration: .6s; }
#spot .sp-card { position: absolute; left: 300px; top: 150px; width: 1320px; height: 800px; transform-origin: 0 0; transition: transform .6s cubic-bezier(.2, .9, .25, 1.05), opacity .6s; border: 5px solid var(--live); border-radius: 36px; background: linear-gradient(160deg, #1b0a44, #0b0326 60%); box-shadow: 0 0 60px rgba(184, 255, 0, .45), inset 0 0 80px rgba(122, 76, 255, .35); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; overflow: hidden; text-align: center; }
#spot.out .sp-card { transition: transform .6s cubic-bezier(.6, 0, .8, .4), opacity .6s ease-in; opacity: .2; }
#spot.win .sp-card, #spot.champ .sp-card { border-color: var(--gold); box-shadow: 0 0 80px rgba(255, 208, 0, .55), inset 0 0 80px rgba(255, 208, 0, .18); }
#spot.wrong .sp-card { border-color: var(--q); box-shadow: 0 0 70px rgba(255, 63, 216, .5); }
#spot.bye .sp-card { border-color: var(--pass); }
#spot.shake .sp-card { border-color: var(--win); box-shadow: 0 0 70px rgba(0, 240, 255, .5); }
.sp-head { font: 800 34px var(--font-display); letter-spacing: .12em; color: var(--live); text-transform: uppercase; }
.sp-pair { display: grid; grid-template-columns: 1fr 260px 1fr; align-items: center; width: 100%; padding: 0 40px; }
.sp-p { display: flex; flex-direction: column; align-items: center; gap: 4px; transition: filter .4s; }
.sp-p .hchar { width: 270px; height: 297px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); }
.sp-p.won .hchar { filter: drop-shadow(0 0 30px rgba(255, 216, 74, .85)); }
.sp-p.lost .hchar { transform: scale(.86); }
.sp-p.out { filter: grayscale(.7) brightness(.8); }
.sp-name { font-size: 52px; font-weight: 900; color: #fff; text-shadow: 0 0 18px rgba(255, 255, 255, .35); max-width: 520px; line-height: 1.05; }
.sp-p.won .sp-name { color: var(--gold); }
.sp-mid { font-size: 64px; font-weight: 900; color: #fff; }
.sp-score { font-size: 120px; font-weight: 900; color: var(--live); text-shadow: 0 0 30px rgba(184, 255, 0, .6); }
.sp-score span { display: inline-block; animation: pop .5s .55s both; }
.sp-beats { font-size: 46px; color: #fff; font-weight: 700; animation: pop .45s .5s both; }
.sp-beats b { color: var(--win); font-weight: 900; letter-spacing: .04em; }
.sp-big { font-family: var(--font-display); font-size: 62px; font-weight: 900; color: #fff; line-height: 1.1; padding: 0 30px; animation: pop .5s .7s both; text-shadow: 0 0 24px rgba(122, 76, 255, .8); }
.sp-big .gold, .sp-big.gold { color: var(--gold); }
.sp-sub { font-size: 34px; color: rgba(255, 255, 255, .85); font-weight: 700; animation: rise .5s .9s both; }
.sp-q { font-size: 40px; font-weight: 800; color: #fff; background: rgba(255, 63, 216, .25); border: 3px solid var(--q); border-radius: 18px; padding: 10px 26px; animation: rise .5s .9s both; }
.sp-q b { color: var(--q); }
.sp-x { color: var(--q); font-size: 140px; animation: pop .4s .4s both; display: inline-block; }
.sp-emoji { font-size: 130px; display: inline-block; }
.sp-tag { margin-top: 6px; font-size: 32px; font-weight: 900; border-radius: 12px; padding: 4px 16px; animation: rise .5s 1s both; }
.sp-tag.up { background: var(--gold); color: #1a0b3a; }
.sp-tag.bye { background: rgba(255, 255, 255, .14); color: #fff; }
.sp-solo { position: relative; }
.sp-solo .hchar { width: 320px; height: 352px; }
.sp-star, .sp-crown { position: absolute; top: -40px; right: -50px; font-size: 120px; animation: spin 2.5s linear infinite; }
.sp-crown { right: auto; left: 50%; margin-left: -60px; top: -90px; animation: bob 1.6s ease-in-out infinite; }
.hchar.flip { transform: scaleX(-1); }
.hchar.win-pop { animation: winPop .9s .4s both; }
.hchar.lose-shake { animation: loseShake .8s .45s both; }
.hchar.lose-shake.flip { animation-name: loseShakeF; }
.hchar.jump { animation: jump .7s .5s ease-in-out 5; }
.hchar.jump.flip { animation-name: jumpF; }
.hchar.bounce { animation: jump .9s ease-in-out infinite; }
.hchar.bounce.flip { animation-name: jumpF; }
.hchar.wave-off { animation: waveOff 3.6s .8s ease-in-out both; }
.hchar.wave-off.flip { animation-name: waveOffF; }
.hchar.lean-r { animation: leanR 1s .2s ease-in-out both; }
.hchar.lean-l.flip { animation: leanL 1s .2s ease-in-out both; }
.wiggle { animation: wiggle .5s .6s ease-in-out 4; }
.hi5 { animation: hi5 .8s .5s both; }
.spin { animation: spin 1.6s linear infinite; }
@keyframes pop { from { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } to { transform: scale(1); } }
@keyframes rise { from { transform: translateY(30px); opacity: 0; } }
@keyframes winPop { 0% { transform: scale(.4) rotate(-20deg); } 60% { transform: scale(1.18) rotate(6deg); } 100% { transform: scale(1.05); } }
@keyframes loseShake { 0% { transform: scale(.4); } 40% { transform: scale(.9); } 55% { transform: scale(.86) rotate(-8deg); } 70% { transform: scale(.86) rotate(8deg); } 100% { transform: scale(.82) translateY(14px) rotate(-4deg); } }
@keyframes loseShakeF { 0% { transform: scaleX(-1) scale(.4); } 40% { transform: scaleX(-1) scale(.9); } 55% { transform: scaleX(-1) scale(.86) rotate(-8deg); } 70% { transform: scaleX(-1) scale(.86) rotate(8deg); } 100% { transform: scaleX(-1) scale(.82) translateY(14px) rotate(-4deg); } }
@keyframes jump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-40px) rotate(4deg); } }
@keyframes jumpF { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-40px) rotate(4deg); } }
@keyframes waveOff { 0% { transform: rotate(0); } 10% { transform: rotate(-14deg); } 20% { transform: rotate(10deg); } 30% { transform: rotate(-14deg); } 40% { transform: rotate(8deg); } 60% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(70px) scale(.75) rotate(-6deg); opacity: .55; } }
@keyframes waveOffF { 0% { transform: scaleX(-1); } 10% { transform: scaleX(-1) rotate(-14deg); } 20% { transform: scaleX(-1) rotate(10deg); } 30% { transform: scaleX(-1) rotate(-14deg); } 40% { transform: scaleX(-1) rotate(8deg); } 60% { transform: scaleX(-1) translateY(0) scale(1); opacity: 1; } 100% { transform: scaleX(-1) translateY(70px) scale(.75) rotate(-6deg); opacity: .55; } }
@keyframes leanR { 50% { transform: translateX(60px) rotate(10deg); } }
@keyframes leanL { 50% { transform: scaleX(-1) translateX(60px) rotate(10deg); } 0%, 100% { transform: scaleX(-1); } }
@keyframes wiggle { 50% { transform: rotate(-18deg) scale(1.15); } }
@keyframes hi5 { 0% { transform: scale(.2) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.3) rotate(10deg); opacity: 1; } 100% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -30px; left: var(--x); width: 16px; height: 26px; opacity: 0; animation: fall var(--t) var(--d) cubic-bezier(.3, .6, .6, 1) forwards; }
@keyframes fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: .9; transform: translate(var(--dx), 860px) rotate(var(--r)); } }

/* rules video */
#intro.hidden { display: none; }
#intro { position: fixed; inset: 0; z-index: 1000; background: #000; display: flex; align-items: center; justify-content: center; }
#intro video { width: 100vw; height: 100vh; object-fit: contain; background: #000; }
#introMsg { position: absolute; top: 4vh; left: 0; right: 0; text-align: center; color: #fff; font: 900 4vh var(--font-ui); text-shadow: 0 0 16px #7a4cff; pointer-events: none; }
#unmute { position: absolute; right: 3vw; top: 3vh; font: 900 4.5vh var(--font-ui); padding: 2vh 4vh; border-radius: 3vh; border: 5px solid var(--live); background: rgba(7, 0, 24, .85); color: #fff; cursor: pointer; box-shadow: 0 0 40px rgba(184, 255, 0, .6); animation: bob 1.6s ease-in-out infinite; }
#unmute.hidden { display: none; }
#soundGate.hidden { display: none; }
#soundGate { position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 900; display: flex; gap: 12px; align-items: center; background: rgba(18, 6, 44, .96); border: 3px solid var(--border); border-radius: 18px; padding: 12px 18px; color: #fff; font: 700 18px var(--font-ui); box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
#soundGate button { font: 800 17px var(--font-ui); padding: 10px 16px; border-radius: 12px; border: 3px solid var(--win); background: transparent; color: #fff; cursor: pointer; }
#soundGate #sgNo { border-color: rgba(255, 255, 255, .3); padding: 10px 12px; }

/* names up to 12 characters: shrink long ones, wrap rather than cut on phones and in the big cards */
.mbox .nm.long { font-size: 0.84em; letter-spacing: 0; }
.oname, .ocall, .sp-name, .champ .who { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.ocall { font-size: 110px; } #online.two .ocall { font-size: 72px; }
.sp-name { font-size: 46px; }
.mline span { overflow-wrap: anywhere; line-height: 1.15; }
@media (max-width: 420px) { .mline { font-size: 18px; } .mnames span { font-size: 16px; } }