/* 🏆 Live events (js/live.js, 2026-09-03): the sidebar widget every player
   sees, the event screen (rules, waiting room, bracket), the showroom. The
   menu's own palette: chrome, not a place in the world. */

/* ------------------------------------------------------------ the widget */
.live-widget {
  width: 250px; box-sizing: border-box; text-align: left;
  background: linear-gradient(180deg, rgba(255, 215, 94, .12), rgba(255, 215, 94, .04));
  border: 2px solid rgba(255, 215, 94, .45); border-radius: 14px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: #eee;
}
#vienna-live.live-widget, #vienna-tourney.live-widget, #vienna-recital.live-widget { width: auto; padding: 10px 12px; background: rgba(20, 16, 10, .94); border-color: #8a6a2c; font-size: 12.5px; }
/* the head is the FOLD handle (js/fold.js): every block on a sidebar shuts to
   its own name bar and the state sticks per browser (Lionel, 2026-09-04) */
.lw-head {
  position: relative; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; width: 100%;
  padding: 0 16px 0 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.lw-head b { flex: 1 1 auto; min-width: 0; font-size: 15px; color: var(--gold, #ffd75e); }
.lw-head:hover b { text-decoration: underline; }
/* the caret rides the head's top right corner, so a title that wraps to two
   lines never pushes it onto a line of its own */
.lw-car { position: absolute; top: 3px; right: 0; font-size: 11px; color: #b9a76a; }
.lw-car::before { content: "\25BE"; }
/* shut, the block IS its name bar: one line, the caret beside it */
.live-widget.shut { gap: 0; padding-top: 8px; padding-bottom: 8px; }
.live-widget.shut > *:not(.lw-head) { display: none; }
.live-widget.shut .lw-kind { display: none; }
.live-widget.shut .lw-head { align-items: center; flex-wrap: nowrap; }
.live-widget.shut .lw-head b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-widget.shut .lw-car::before { content: "\25B8"; }
/* on the world's rail a folded widget is an edge TAB, so the name goes with
   the body and the trophy speaks for it (the block's title says which) */
#vienna-rail > .live-widget .lw-car::before { content: "\25B8"; }
#vienna-rail > .live-widget.shut { padding: 7px 8px 7px 10px; }
#vienna-rail > .live-widget.shut .lw-head { padding: 0; align-items: center; justify-content: space-between; }
#vienna-rail > .live-widget.shut .lw-head b { display: none; }
#vienna-rail > .live-widget.shut .lw-car { position: static; }
#vienna-rail > .live-widget.shut .lw-car::before { content: "\25C2"; }
.lw-ic { font-size: 17px; }
.lw-kind { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #b9a76a; width: 100%; }
.lw-line { color: #d8d8d8; line-height: 1.35; }
.lw-live { color: #ffb3a7; font-weight: 700; }
.lw-you { color: #ffe9a8; }
.lw-piece { color: #c9b98a; font-size: 12.5px; margin-top: -4px; }
.lw-shut { color: #c9b98a; }
.lw-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff5a4a; margin-right: 6px; animation: lw-pulse 1.2s infinite; vertical-align: middle; }
@keyframes lw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.lw-btn {
  font: inherit; font-weight: 800; font-size: 12.5px; color: #eee; cursor: pointer;
  padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .2); width: 100%;
}
.lw-btn:hover { border-color: var(--gold, #ffd75e); color: var(--gold, #ffd75e); }
/* the tournament signup link (tourney.js promoHtml) is an <a>, not a <button>:
   width:100% alone leaves an inline box, so it needs the block layout and the
   centring a button gets for free. */
a.lw-btn { display: block; box-sizing: border-box; text-align: center; text-decoration: none; }
.lw-btn.big { font-size: 15px; padding: 12px 10px; letter-spacing: .06em; background: linear-gradient(180deg, #ffd75e, #e0a020); color: #2a1d05; border-color: #ffd75e; }
.lw-btn.big:hover { filter: brightness(1.08); color: #2a1d05; }
.lw-btn.on { border-color: rgba(120, 220, 140, .6); color: #b4f0c0; }
/* THE DOOR INTO THE VENUE (2026-09-13). On the widget it wears the gold rim
   without the gold fill: the tournament's one gold button is JOIN, and two of
   them argue about which is the point. */
.lw-btn.lw-hall { border-color: rgba(255, 215, 94, .45); color: #ffe9a8; }
.lw-btn.lw-hall.big { color: #2a1d05; }

/* ------------------------------------------------------------ the screen */
#live-screen .panel, #live-showroom .panel { max-width: 1100px; width: min(96vw, 1100px); text-align: left; }
/* Back floats (style.css .back-bar / .float-back, sticky in the overlay's
   scroll): it takes its own row, because the event's title sits flush left
   where a zero-height bar would put the button on top of it */
#live-screen .lv-back-bar { height: auto; top: 10px; margin: -6px 0 10px -4px; }
#live-screen .lv-back-bar .float-back { top: 0; }
.lv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.lv-head h2 { margin: 0; font-size: 26px; color: var(--gold, #ffd75e); }
.lv-sub { color: #b6bcc6; font-size: 13px; margin-top: 4px; }
.lv-prize { text-align: right; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.lv-prize b { font-size: 22px; color: var(--gold, #ffd75e); }
.lv-prize small { color: #9aa0aa; font-size: 12px; }
.lv-rules { font-size: 13.5px; line-height: 1.5; color: #d0d4dc; margin: 12px 0; }
/* ...and on the screen it LEADS, above the rules. It used to be a dim mode-btn
   under ten lines of them, which on a phone is at or below the fold — so an
   entrant looking for the way in found only "✓ You are entered". Not gold, for
   the reason above; full width, because it is the one thing on this page that
   goes somewhere. */
.lv-hall {
  display: block; width: 100%; box-sizing: border-box; margin: 14px 0 6px;
  font: inherit; font-weight: 800; font-size: 16px; letter-spacing: .02em; cursor: pointer;
  padding: 14px 16px; border-radius: 12px; color: #ffe9a8; text-align: center;
  background: linear-gradient(180deg, rgba(255, 215, 94, .17), rgba(255, 215, 94, .06));
  border: 1px solid rgba(255, 215, 94, .5);
}
.lv-hall:hover { border-color: var(--gold, #ffd75e); color: var(--gold, #ffd75e); filter: brightness(1.08); }
.lv-hall-hint { margin: 0 0 10px; font-size: 12.5px; color: #9aa0aa; }
.lv-you {
  background: rgba(255, 215, 94, .08); border: 1px solid rgba(255, 215, 94, .35); border-radius: 12px;
  padding: 14px 16px; margin: 10px 0; font-size: 14px; line-height: 1.45;
}
.lv-you .big-btn { margin: 0 0 6px; }
.lv-wait-h { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #ffe9a8; }
.lv-wait-h b { text-transform: none; letter-spacing: 0; font-size: 15px; }
.lv-wait-piece { margin-top: 4px; color: #d8d8d8; }
.lv-count { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 8px; }
.lv-count span { font-size: 52px; font-weight: 900; letter-spacing: .04em; color: var(--gold, #ffd75e); font-variant-numeric: tabular-nums; line-height: 1; }
.lv-count small { color: #b6bcc6; font-size: 13px; max-width: 320px; }
.lv-wait-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
/* a match run left playing (main.js parkLiveRun): the way back in. Red, not
   gold — it is a clock running down, not an invitation */
.lw-btn.lv-rejoin, .mode-btn.lv-rejoin { background: linear-gradient(180deg, #ff8a5c, #d84b2a); color: #2a0f05; border-color: #ff8a5c; }
.lw-btn.lv-rejoin:hover, .mode-btn.lv-rejoin:hover { filter: brightness(1.08); color: #2a0f05; }
.lv-rejoin small { display: block; font-size: 10px; letter-spacing: .04em; opacity: .8; font-weight: 600; text-transform: none; }
.lv-away .lv-wait-h { color: #ffc2a8; }
.lv-now { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: rgba(255, 90, 74, .1); border: 1px solid rgba(255, 90, 74, .4); margin: 8px 0; font-size: 14px; }
.lv-rounds { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.lv-round { font-size: 12px; color: #c9ccd4; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 100px; padding: 4px 10px; }
.lv-round b { color: #ffe9a8; margin-right: 4px; }
.lv-h { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #c9a227; margin: 12px 0 8px; }
.lv-entrants { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-ent { font-size: 13px; background: rgba(255, 255, 255, .06); border-radius: 8px; padding: 4px 9px; }
.lv-ent.bot { color: #9aa0aa; }

/* the bracket: one column per round, matches in playing order */
.lb-wrap { overflow-x: auto; padding-bottom: 8px; }
.lb { display: flex; gap: 14px; align-items: flex-start; min-width: max-content; }
.lb-col { display: flex; flex-direction: column; gap: 8px; width: 220px; }
.lb-colh { font-size: 13px; font-weight: 800; color: #ffe9a8; display: flex; flex-direction: column; }
.lb-colh small { font-weight: 400; color: #9aa0aa; font-size: 11px; }
.lb-match { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 9px; padding: 7px 9px; font-size: 12.5px; }
.lb-match.live { border-color: rgba(255, 90, 74, .6); background: rgba(255, 90, 74, .08); }
.lb-match.writing, .lb-match.showroom { border-color: rgba(120, 170, 255, .55); background: rgba(120, 170, 255, .08); }
.lb-match.done { opacity: .8; }
.lb-when { display: flex; justify-content: space-between; color: #9aa0aa; font-size: 11px; margin-bottom: 4px; }
.lb-st { color: #ffd75e; font-weight: 700; }
.lb-seat { display: flex; justify-content: space-between; gap: 6px; padding: 2px 0; }
.lb-seat.win .lb-name { color: #8ee6a0; font-weight: 800; }
.lb-seat.me .lb-name { color: #ffe9a8; }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { color: #d8d8d8; font-variant-numeric: tabular-nums; }
.lb-acts { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.lb-acts .small-btn { margin: 0; padding: 3px 7px; font-size: 11px; }

/* ---------------------------------------------------------- the showroom */
.ls-head h2 { margin: 0; color: var(--gold, #ffd75e); }
.ls-order { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.ls-seg { font-size: 12.5px; padding: 5px 10px; border-radius: 100px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: #b6bcc6; }
.ls-seg.on { border-color: var(--gold, #ffd75e); color: var(--gold, #ffd75e); font-weight: 800; }
.ls-seg.past { opacity: .5; }
.ls-stage { background: rgba(0, 0, 0, .35); border-radius: 14px; padding: 18px; text-align: center; }
.ls-big { font-size: 22px; margin-bottom: 10px; }
.ls-bar { height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: 6px auto; max-width: 600px; }
.ls-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd75e, #e0a020); transition: width .4s linear; }
#ls-keys { width: 100%; max-width: 880px; height: 70px; margin-top: 12px; border-radius: 6px; }
.ls-vote { display: flex; gap: 12px; justify-content: center; margin: 16px 0 6px; }
.ls-vbtn {
  font: inherit; font-weight: 800; font-size: 16px; padding: 12px 22px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .07); border: 2px solid rgba(255, 255, 255, .2); color: #eee;
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 180px;
}
.ls-vbtn small { font-weight: 400; font-size: 12px; color: #b6bcc6; }
.ls-vbtn:hover:not(:disabled) { border-color: var(--gold, #ffd75e); }
.ls-vbtn.on { border-color: #8ee6a0; background: rgba(120, 220, 140, .12); }
.ls-vbtn:disabled { opacity: .55; cursor: default; }

/* several events on the board at once: the sidebar lists the others, the screen tabs them */
.lw-others { display: flex; flex-direction: column; gap: 4px; border-top: 1px dashed rgba(255, 215, 94, .3); padding-top: 7px; margin-top: 2px; }
.lw-other { text-align: left; font-weight: 600; font-size: 12px; padding: 6px 8px; }
.lw-other small { color: #b9a76a; margin-left: 4px; }
.lv-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.lv-tab { font: inherit; font-size: 13px; font-weight: 700; color: #ccc; cursor: pointer; padding: 6px 12px; border-radius: 100px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); }
.lv-tab.on { color: var(--gold, #ffd75e); border-color: var(--gold, #ffd75e); background: rgba(255, 215, 94, .12); }
.lv-tab small { font-weight: 400; color: #9aa0aa; margin-left: 4px; }

/* 🕘 past tournaments (2026-09-11): the list, and the bar over a finished bracket */
.lv-tab.past { border-style: dashed; }
.lv-past { display: flex; flex-direction: column; gap: 8px; }
.lv-prow {
  font: inherit; color: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
}
.lv-prow:hover { border-color: var(--gold, #ffd75e); background: rgba(255, 215, 94, .07); }
.lv-pk { font-size: 22px; text-align: center; }
.lv-pm, .lv-pw { display: flex; flex-direction: column; min-width: 0; }
.lv-pm b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-pm small, .lv-pw small { color: #9aa0aa; font-size: 12px; }
.lv-pw { text-align: right; color: #8ee6a0; font-weight: 700; }
.lv-pgo { color: var(--gold, #ffd75e); font-weight: 800; font-size: 13px; white-space: nowrap; }
.lv-badge { display: inline-block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 100px; margin-left: 6px; vertical-align: 2px; border: 1px solid rgba(255, 255, 255, .25); color: #c9ccd4; }
.lv-badge.you { border-color: rgba(255, 215, 94, .6); color: #ffe9a8; }
.lv-pastbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; margin-bottom: 10px; background: rgba(120, 170, 255, .08); border: 1px solid rgba(120, 170, 255, .35); font-size: 13.5px; color: #d8dce4; }
.lv-pastbar .small-btn { margin: 0 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) {
  .lv-prow { grid-template-columns: 28px 1fr; }
  .lv-pm b { white-space: normal; }
  .lv-pw { grid-column: 2; text-align: left; }
  .lv-pgo { grid-column: 2; }
}

/* spectating: the pane you hear, or neither, and ✕ Stop spectating
   (main.js setSpecAudio / stopSpectating). It sits UNDER the top pane's HUD
   strip (score, combo, accuracy end at ~60px), over the far end of the
   falling notes, so the wider bar never covers the combo. */
#spec-audio { position: fixed; top: 66px; left: 50%; transform: translateX(-50%); z-index: 7; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 5px 8px; border-radius: 100px; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .2); font-size: 12px; color: #ddd; }
#spec-audio button { font: inherit; font-size: 12px; font-weight: 700; color: #ccc; cursor: pointer; padding: 3px 10px; border-radius: 100px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#spec-audio button.on { color: #2a1d05; background: var(--gold, #ffd75e); border-color: var(--gold, #ffd75e); }
#spec-audio .spec-mute { margin-left: 4px; }
/* the heard pianist's own level (setSpecVolume), dimmed while both are muted */
#spec-audio .spec-vol { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; cursor: pointer; }
#spec-audio .spec-vol input { width: 96px; margin: 0; accent-color: var(--gold, #ffd75e); cursor: pointer; }
#spec-audio .spec-vol b { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; color: #eee; }
#spec-audio .spec-vol.off { opacity: .4; }
#spec-audio .spec-stop { margin-left: 8px; max-width: none; font-size: 13px; padding: 6px 16px; color: #fff; background: #b3262e; border-color: #e0525a; }
#spec-audio .spec-stop:hover { background: #d0313a; }
/* a phone: ONE row, a fingertip tall. The two names, the mute and the way
   out, as icons. The boards themselves say which one sounds and how to hear
   the other (main.js drawSpecHeard), so the bar needs neither the words nor
   the room they took: it used to be a 180 by 164 px block over the top
   board. The volume is the phone's own buttons. */
@media (max-width: 640px) {
  #spec-audio { border-radius: 14px; top: 58px; gap: 6px; padding: 6px; width: calc(100vw - 16px); flex-wrap: nowrap; }
  #spec-audio .spec-lbl, #spec-audio .spec-vol, #spec-audio .w { display: none; }
  #spec-audio button { min-height: 40px; font-size: 13px; }
  #spec-audio button[data-side="0"], #spec-audio button[data-side="1"] { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #spec-audio button.on[data-side="0"]::before, #spec-audio button.on[data-side="1"]::before { content: "🔊 "; }
  #spec-audio .spec-mute, #spec-audio .spec-stop { flex: none; min-width: 44px; margin-left: 0; padding: 6px 10px; }
}

/* ------------------------------------------- the tournament seat (tourney.js) */
#tourney-screen .panel { max-width: 640px; text-align: left; }
.tv-lead { font-size: 14.5px; line-height: 1.5; color: #d8dce4; margin: 4px 0 12px; }
.tv-device { font-size: 13px; color: #ffb3a7; padding: 8px 12px; border-radius: 10px; background: rgba(255, 90, 74, .08); border: 1px solid rgba(255, 90, 74, .3); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tv-device.on { color: #b4f0c0; background: rgba(120, 220, 140, .08); border-color: rgba(120, 220, 140, .35); }
.tv-inline { width: auto; padding: 5px 10px; font-size: 12px; }
.tv-how, .tv-hint { font-size: 13px; color: #b6bcc6; line-height: 1.45; margin: 12px 0 8px; }
.tv-btn { display: block; margin: 14px auto 4px; }
.tv-btn:disabled { opacity: .45; cursor: default; transform: none; }
.tv-prompt { text-align: center; padding: 26px 16px; margin: 14px 0; border-radius: 14px; background: rgba(255, 215, 94, .08); border: 2px solid rgba(255, 215, 94, .5); animation: lw-pulse 1.6s infinite; }
.tv-step { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #ffe9a8; }
.tv-ask { font-size: 26px; font-weight: 900; color: var(--gold, #ffd75e); margin: 6px 0 2px; }
.tv-sub { font-size: 13px; color: #b6bcc6; }
.tv-got { font-size: 14px; color: #b4f0c0; margin: 12px 0 0; }
.tv-result { font-size: 14.5px; line-height: 1.5; padding: 14px 16px; border-radius: 12px; margin: 14px 0 6px; }
.tv-result.ok { color: #d9ffe2; background: rgba(120, 220, 140, .1); border: 1px solid rgba(120, 220, 140, .45); }
.tv-result.bad { color: #ffd6d0; background: rgba(255, 90, 74, .1); border: 1px solid rgba(255, 90, 74, .45); }

/* ------------------------------------------------- ⏱ the match call (2026-09-10)
   One minute before a match of yours (js/live.js showCall), over everything:
   a run in progress, the world, a mini-game, the menu. z-index 70 outranks
   every overlay (10), the mail screen (40) and the dialogs (60). "I'm ready"
   folds the card to a pill at the top; the clock keeps counting on both. */
.live-call { position: fixed; inset: 0; z-index: 70; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.live-call.hidden { display: none; }
.lc-card {
  pointer-events: auto; width: min(560px, 92vw); box-sizing: border-box; text-align: center; padding: 26px 28px 22px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(40, 30, 8, .97), rgba(14, 10, 4, .98)); border: 3px solid var(--gold, #ffd75e);
  box-shadow: 0 0 0 6px rgba(255, 215, 94, .18), 0 30px 80px rgba(0, 0, 0, .7); color: #fff; animation: lc-in .35s ease-out;
}
@keyframes lc-in { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.lc-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #b9a76a; }
.lc-title { font-size: 30px; font-weight: 900; letter-spacing: .06em; color: var(--gold, #ffd75e); margin-top: 4px; }
.lc-count { font-size: 84px; font-weight: 900; line-height: 1; margin: 8px 0 6px; font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(255, 215, 94, .5); }
.live-call.soon .lc-count, .live-call.soon .lc-pill b { color: #ff8c7a; animation: lc-pulse .8s infinite; }
@keyframes lc-pulse { 50% { opacity: .55; } }
.lc-what { font-size: 20px; font-weight: 800; }
.lc-piece { font-size: 15px; color: #ffe9a8; margin-top: 3px; }
.lc-note { font-size: 13px; color: #cfc7b0; margin: 12px auto 0; max-width: 440px; line-height: 1.4; }
.lc-acts { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.lc-btn { font: inherit; font-weight: 800; font-size: 14px; padding: 10px 18px; border-radius: 12px; cursor: pointer; color: #eee; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25); }
.lc-btn.big { background: linear-gradient(180deg, #ffd75e, #e0a020); color: #2a1d05; border-color: #ffd75e; font-size: 16px; padding: 12px 22px; }
.lc-btn:hover { filter: brightness(1.1); }
.lc-pill {
  display: none; pointer-events: auto; position: fixed; top: 10px; left: 50%; transform: translateX(-50%); align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; font: inherit; color: #2a1d05; background: linear-gradient(180deg, #ffd75e, #e0a020);
  border: 2px solid #fff3c4; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); cursor: pointer;
}
.lc-pill b { font-size: 18px; font-variant-numeric: tabular-nums; }
.lc-pill small { font-weight: 700; font-size: 12px; max-width: 40vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-call.mini .lc-card { display: none; }
.live-call.mini .lc-pill { display: flex; }
@media (max-width: 600px) { .lc-count { font-size: 64px; } .lc-title { font-size: 22px; } .lc-what { font-size: 17px; } }

/* ---------------------------------------- 📊 the match result card (js/live.js resultHtml)
   Both seats head to head, the verdict, the run's figures with the better
   side lit, the all-time record between the two. In the results panel, the
   bracket's pop-up and the live screen's "Last result" line. */
.live-result { max-width: 640px; margin: 10px auto 6px; text-align: left; }
.lr-card { background: rgba(255, 215, 94, .06); border: 1px solid rgba(255, 215, 94, .38); border-radius: 14px; padding: 14px 16px; color: #eee; }
.lr-h { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #c9a227; text-align: center; }
.lr-h b { color: #ffe9a8; }
.lr-duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; margin: 10px 0 6px; }
.lr-side { text-align: center; padding: 8px 6px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); min-width: 0; }
.lr-side.win { border-color: rgba(142, 230, 160, .7); background: rgba(120, 220, 140, .1); }
.lr-name { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-name small { font-weight: 700; color: #ffe9a8; font-size: 11px; }
.lr-side.win .lr-name { color: #8ee6a0; }
.lr-lv { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em;
         color: #ffe9a8; background: rgba(255, 215, 94, .12); border: 1px solid rgba(255, 215, 94, .35); }
.lr-score { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; margin-top: 2px; }
.lr-sub { font-size: 12.5px; color: #b6bcc6; }
.lr-wait { font-size: 15px; color: var(--gold, #ffd75e); animation: lw-pulse 1.2s infinite; }
.lr-vs { font-weight: 900; font-style: italic; color: #ff3b5c; }
.lr-verdict { text-align: center; font-size: 15px; font-weight: 800; margin: 6px 0 8px; }
.lr-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.lr-table th, .lr-table td { padding: 4px 8px; border-top: 1px solid rgba(255, 255, 255, .07); text-align: center; }
.lr-table thead th { border-top: 0; font-size: 11px; color: #9aa0aa; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.lr-table td { width: 38%; color: #d8d8d8; }
.lr-table tbody th { font-weight: 600; color: #9aa0aa; font-size: 12px; white-space: nowrap; }
.lr-table td.best { color: #8ee6a0; font-weight: 800; }
.lr-h2h { text-align: center; margin-top: 10px; font-size: 13.5px; color: #ffe9a8; }
.lr-note { text-align: center; font-size: 11.5px; color: #8a909a; margin-top: 6px; }
.lr-acts { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.lr-acts .small-btn { margin: 0; }
#live-result-pop .panel { max-width: 680px; width: min(94vw, 680px); }
.lv-last { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: rgba(120, 220, 140, .06); border: 1px solid rgba(120, 220, 140, .3); margin: 8px 0; font-size: 14px; }
.lv-last .small-btn { margin: 0; padding: 4px 10px; font-size: 12px; }
.lv-last-win { color: #8ee6a0; font-weight: 800; }
@media (max-width: 520px) { .lr-score { font-size: 20px; } .lr-duel { gap: 6px; } .lr-table th, .lr-table td { padding: 3px 4px; } }

/* ---- the artistry tournament (2026-09-13): no score on screen for a
   performance played or watched; the room's states; the vote on a card */
body.artistry-run #score-box, body.artistry-run #mult-box, body.artistry-run #combo-wrap, body.artistry-run #acc-box { visibility: hidden; }
.lb-match.voting { border-color: rgba(255, 215, 94, .55); background: rgba(255, 215, 94, .08); }
.lr-card .ls-vote { margin: 12px 0 4px; }
.lr-card .ls-vbtn { font-size: 14px; padding: 10px 14px; }
.lr-card .ls-vbtn small { display: block; }
.ls-coin { font-size: 15px; color: #ffe9a8; margin: 8px 0; }
.ls-stage .big-btn { margin: 10px auto 0; }