:root {
  --bg: #0b0f14;
  --panel: #111826;
  --panel2: #0f1623;
  --text: #e6eef8;
  --muted: #93a4bb;
  --accent: #7c5cff;
  --good: #1dd1a1;
  --bad: #ff6b6b;
  --warn: #feca57;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 700px at 10% 10%, #1a2350 0%, transparent 55%),
              radial-gradient(900px 600px at 90% 20%, #3a145c 0%, transparent 55%),
              var(--bg);
  color: var(--text);
}

/* Restore background on main race page (Bonus style.css sets body transparent) */
body:not(.obs) {
  background: radial-gradient(1200px 700px at 10% 10%, #1a2350 0%, transparent 55%),
              radial-gradient(900px 600px at 90% 20%, #3a145c 0%, transparent 55%),
              var(--bg) !important;
}

.app { height: 100vh; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(5,8,14,0.6);
  backdrop-filter: blur(10px);
}

.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124,92,255,0.35), rgba(29,209,161,0.15));
  border: 1px solid rgba(255,255,255,0.10);
}
.title { font-weight: 800; letter-spacing: 0.2px; }
.sub { color: var(--muted); font-size: 12px; }
.subLine { white-space: nowrap; }
.helpWord { color: #ff6600; font-weight: 800; text-shadow: 0 0 8px rgba(255,102,0,0.8); }

.controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.controls input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  outline: none;
}
.controls button {
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(135deg, rgba(124,92,255,0.35), rgba(124,92,255,0.15));
  color: var(--text);
  font-weight: 700;
}
.controls button.primary {
  background: linear-gradient(135deg, rgba(124,92,255,0.55), rgba(29,209,161,0.25));
}
.controls button:disabled { opacity: 0.55; cursor: not-allowed; }
.controls button:hover { filter: brightness(1.1); }

.connDot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:8px;
  background:#ff3b3b;
  box-shadow:0 0 6px rgba(255,60,60,.9);
  border:1px solid rgba(255,255,255,.35);
  vertical-align:middle;
}
.connDot.connected{
  background:#21ff5b;
  box-shadow:0 0 8px rgba(33,255,91,.95);
}

.main {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 14px;
  padding: 14px;
  flex: 1;
  min-height: 0;
  height: calc(100vh - 86px);
  overflow: visible;
}

.track {
  position: relative;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
  padding: 14px;
  height: 100%;
  min-height: 0;
}

/* Bonus overlay: Collect / Test Spin in top bar */
#btnBonusCollect:disabled {
  opacity: 0.55;
  filter: grayscale(0.35);
  cursor: not-allowed;
}
.hidden { display: none !important; }

.bonusMount {
  position: absolute;
  left: 50%;
  top: 48px;
  transform: translateX(-50%) scale(0.68);
  transform-origin: top center;
  width: 520px;
  min-height: 180px;
  z-index: 2147483647;
  pointer-events: none;
  overflow: visible;
}

/* Scale on parent so Bonus shake/near/win animations don't change size */
.bonusMount .stage {
  transform: none;
}

/* Raise Mario item boxes (4 question blocks) so they sit above the logo */
.bonusMount .arena {
  transform: translate(20px, -220px);
}
body.obs .bonusMount .arena {
  transform: translate(20px, -220px);
}

/* Player name (turnName) larger and readable */
.bonusMount .turnName {
  font-size: 44px !important;
  font-weight: 800;
  line-height: 1.2;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.trackHud {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 5;
  pointer-events: none;
}

.hudLeft { display: flex; align-items: center; gap: 12px; }

.hudCenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.raceTimer {
  pointer-events: none;
  font-weight: 950;
  letter-spacing: 1.5px;
  font-size: 22px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,0.34);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 14px 38px rgba(0,0,0,0.45);
  color: rgba(230,238,248,0.98);
  text-shadow:
    0 0 10px rgba(124,92,255,0.65),
    0 0 18px rgba(29,209,161,0.35),
    0 0 28px rgba(255,255,255,0.12);
}

.raceTimer.racing {
  text-shadow:
    0 0 10px rgba(255, 64, 129, 0.55),
    0 0 18px rgba(124,92,255,0.55),
    0 0 28px rgba(29,209,161,0.35);
}

.racePool {
  pointer-events: none;
  font-size: 12px;
  color: rgba(230,238,248,0.90);
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 7px 10px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

.racePool span {
  font-weight: 900;
  color: rgba(255,255,255,0.98);
  text-shadow: 0 0 10px rgba(29,209,161,0.35);
}
.chip {
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.8px;
  font-size: 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}
.hint {
  font-size: 14px;
  color: rgba(230,238,248,0.85);
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 8px 12px;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

.hudRight { display: flex; align-items: center; gap: 10px; }
.mini {
  font-size: 12px;
  color: rgba(230,238,248,0.85);
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 8px 12px;
  border-radius: 999px;
  pointer-events: none;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.06);
}
.dot.live {
  background: var(--good);
  box-shadow: 0 0 0 6px rgba(29,209,161,0.12), 0 0 18px rgba(29,209,161,0.55);
}

.laneLabels {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  z-index: 5;
  max-height: 100px;
}

.laneLabelRow {
  flex: 1;
  min-width: 0;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
}

.laneAvatars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  row-gap: 6px;
  max-width: 100%;
  max-height: 70px;
  overflow-x: auto;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: none;
}
.laneAvatars::-webkit-scrollbar { display: none; }
.laneAvatars .avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.25);
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  object-fit: cover;
}

.laneNum {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 900;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.2);
  flex-shrink: 0;
}

.avatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.2);
  object-fit: cover;
}

canvas#game {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 14px;
}

.countdown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 1000;
  font-size: 128px;
  letter-spacing: 2px;
  text-shadow: 0 20px 40px rgba(0,0,0,0.55), 0 0 40px rgba(124,92,255,0.35);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
.countdown.show { opacity: 1; }

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 999;
}
.modal.open { display: flex; }
.modalCard {
  width: min(560px, 100%);
  border-radius: 22px;
  background: rgba(17,24,38,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  padding: 16px;
}
.modalTitle { font-weight: 900; font-size: 18px; }
.modalSub { color: var(--muted); margin-top: 6px; font-size: 13px; line-height: 1.4; }
.modalForm { margin-top: 14px; display: grid; gap: 12px; }
.modalForm label { display: grid; gap: 6px; font-size: 12px; color: rgba(230,238,248,0.85); }
.modalForm input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  padding: 12px 12px;
  border-radius: 14px;
  outline: none;
}
.modalActions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.modalActions button {
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-weight: 800;
}
.modalActions button.primary {
  background: linear-gradient(135deg, rgba(124,92,255,0.65), rgba(29,209,161,0.25));
}
.modalFoot { margin-top: 10px; font-size: 12px; color: rgba(230,238,248,0.75); min-height: 16px; }

/* Keep the sidebar on the right so it can scroll to the simulator controls */
@media (max-width: 1100px) {
  .main { grid-template-columns: 1fr 360px; }  /* keep 2 columns */
  .side { height: calc(100vh - 86px); overflow-y: auto; } /* scroll container */
  .laneLabels { width: 200px; }
}

/* Race-only (obs_race.html): full viewport, no scrollbars */
.obsRaceOnly .main { grid-template-columns: 1fr !important; padding: 0 !important; }
.obsRaceOnly .track { height: 100vh !important; border-radius: 0 !important; min-height: 0 !important; overflow: hidden !important; }

/* Controls-only (controls.html): no canvas, single column, taller log */
.controlsOnly .main { grid-template-columns: 1fr !important; }
.controlsOnly .track { display: none !important; }
.controlsOnly .side { width: min(520px, 100vw); margin: 0 auto; }
.controlsOnly .side .log { min-height: 280px !important; max-height: 50vh; }

.finish {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.9) 0,
    rgba(255,255,255,0.9) 8px,
    rgba(0,0,0,0.9) 8px,
    rgba(0,0,0,0.9) 16px
  );
  opacity: 0.25;
}

.lane {
  position: relative;
  height: calc((100% - 7*10px) / 8);
  margin-bottom: 10px;
  border-radius: 14px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
}

.lane:last-child { margin-bottom: 0; }

.laneLabel {
  position: absolute;
  left: 10px;
  top: 8px;
  font-size: 12px;
  color: var(--muted);
  z-index: 3;
}

.cart {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 120px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  gap: 10px;
  background: linear-gradient(135deg, rgba(124,92,255,0.35), rgba(29,209,161,0.10));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
  z-index: 2;
}

.cart .num {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  font-weight: 800;
}

.cart .stats {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.cart .stats .spd { font-size: 12px; color: var(--muted); }

.badge {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.2);
}

.badge.freeze { color: var(--warn); }
.badge.ko { color: var(--bad); }
.badge.boost { color: var(--good); }

.side{
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: calc(100vh - 86px);
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  background: var(--panel);
  border-radius: 18px;
  padding: 14px;
}

.side::-webkit-scrollbar{ width: 12px; }
.side::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.18);
  border-radius: 12px;
  border: 3px solid rgba(0,0,0,0.35);
}
.side::-webkit-scrollbar-track{ background: rgba(0,0,0,0.15); }

/* Live Log smaller so entire sidebar scrolls to reach Simulator */
.side .log{
  height: 140px;
  max-height: 140px;
  overflow: auto;
}

.card {
  border-radius: 18px;
  background: rgba(17,24,38,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 12px;
}

.cardTitle {
  font-weight: 800;
  margin-bottom: 10px;
}

.kv {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
}
.kv:last-child { border-bottom: none; }
.kv span:first-child { color: var(--muted); }

.last { color: var(--muted); font-size: 12px; white-space: pre-wrap; }

.log {
  height: 140px;
  min-height: 100px;
  overflow: auto;
  font-size: 12px;
  color: var(--muted);
  white-space: pre-wrap;
}

.sim .row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.sim input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  outline: none;
}
.sim button {
  flex: 0 0 auto;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(124,92,255,0.20);
  color: var(--text);
  font-weight: 700;
}

@media (max-width: 1100px) {
  .main { grid-template-columns: 1fr 360px; min-height: 0; }
  .track { height: 100%; min-height: 0; }
  .side { height: calc(100vh - 86px); min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
}

.podiumOverlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72)}
.podiumWrap{width:900px;max-width:92vw;padding:26px;border-radius:22px;background:rgba(20,2,30,.78);box-shadow:0 0 28px rgba(255,0,180,.22),0 0 0 1px rgba(255,255,255,.08) inset;text-align:center}
.podiumTitle{font-size:44px;font-weight:1000;color:#fff;text-shadow:0 0 18px rgba(255,0,180,.55)}
.podiumPoolLine{margin-top:8px;font-size:28px;font-weight:1000;color:#77ffff;text-shadow:0 0 12px rgba(0,255,255,.5)}
.podiumGrid{margin-top:18px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:end}
.podiumCard{position:relative;border-radius:20px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12);padding:14px;overflow:hidden}
.podNum{font-size:48px;font-weight:1000;opacity:.9}
.podAvatar{width:86px;height:86px;border-radius:999px;border:2px solid rgba(255,255,255,.22);object-fit:cover;box-shadow:0 0 18px rgba(124,92,255,.35)}
.podName{margin-top:10px;font-weight:1000;font-size:18px}
.podKart{margin-top:10px;width:100%;max-height:120px;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.5))}
.podiumFoot{margin-top:14px;opacity:.85;font-weight:800}
#podiumContinue{margin-left:10px;padding:10px 14px;border-radius:14px;border:0;cursor:pointer;font-weight:1000;background:rgba(0,255,255,.18);color:white;box-shadow:0 0 16px rgba(0,255,255,.25)}

.audioPrompt{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.65);
  z-index: 9999;
}
.audioPrompt.hidden{display:none;}
#audioPrompt button{
  font-family: inherit;
  font-weight: 800;
  font-size: 18px;
  padding: 14px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(10,10,18,.85);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
}

.audioHud{
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 9998;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 12px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
}
.audioHud button{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(20,20,30,.7);
  color:#fff;
  cursor:pointer;
}

.versionTag{
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 9997;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #fff;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.15);
}
.audioLog{
  position: fixed;
  left: 12px;
  bottom: 48px;
  z-index: 9997;
  width: 280px;
  max-height: 180px;
  overflow: auto;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: #fff;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.15);
}
.audioLog .row{opacity:.95; margin: 2px 0;}



/* Stream header: title + live user badge */
.cardTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 8px;
}
.streamBadge{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.10);
  font-weight: 800;
}
.streamBadge .at{ opacity:0.75; }
.streamBadge #hudUser{ font-weight: 900; }

/* Pool coin HUD (top-right over track) */
.poolWidget{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
.poolCoin{
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45));
}
.poolWidget #poolAmount{
  font-weight: 900;
  font-size: clamp(18px, 2.8vw, 28px);
  letter-spacing: 0.5px;
  color: #f5c53b;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.55),
    0 0 10px rgba(0,0,0,0.35);
}

/* Mario-ish timer look */
.raceTimer{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  font-weight: 1000;
  letter-spacing: 1px;
  font-size: 64px;
  color: #f6c43c;
  -webkit-text-stroke: 6px rgba(255,255,255,0.95);
  text-shadow:
    0 8px 0 rgba(0,0,0,0.55),
    0 0 18px rgba(0,0,0,0.35);
}

/* Don't show the old pool pill */
.racePool{ display:none !important; }


/* ---------- Finish Screen (cinematic fullscreen) ---------- */
.finishScreenOverlay{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  pointer-events:auto;
  overflow:auto;
}
.finishScreenBg{
  position:absolute; inset:0;
  background: linear-gradient(165deg, #050814 0%, #0d1220 25%, #0f1629 50%, #0a0e1c 100%);
  box-shadow: inset 0 0 120px rgba(255,215,0,0.06);

  background-image: url('/assets/ui/RaceFinishedTemplate.png');
  background-size: cover;
  background-position: center;
}
.finishScreenBg::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 50% at 50% 35%, rgba(255,215,0,0.08) 0%, transparent 55%);
  pointer-events:none;
}
.finishConfetti{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1;
}
.finishScreenCard{
  position:relative; z-index:2;
  width:min(1100px, 96vw);
  min-height:min(700px, 85vh);
  display:grid;
  grid-template-areas:
    "banner banner banner"
    "left center right"
    "left center champ"
    "continue continue continue";
  grid-template-columns: minmax(200px, 1fr) minmax(280px, 1.4fr) minmax(200px, 1fr);
  grid-template-rows: auto 1fr auto auto;
  gap:18px 22px;
  padding:24px 28px 28px;
  background: linear-gradient(180deg, rgba(12,14,28,0.94) 0%, rgba(8,10,20,0.97) 100%);
  border: 2px solid rgba(255,215,0,0.4);
  border-radius: 22px;
  box-shadow: 0 0 80px rgba(255,215,0,0.15), 0 0 0 1px rgba(255,255,255,0.06) inset, 0 28px 90px rgba(0,0,0,0.65);
}
.finishBanner{
  grid-area: banner;
  font-weight: 900;
  font-size: clamp(26px, 4.5vw, 36px);
  letter-spacing: 6px;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(180deg, #ffe066 0%, #ffd700 45%, #c9a227 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 28px rgba(255,215,0,0.5);
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.8));
  margin-bottom: 4px;
  animation: finishBannerPulse 2.5s ease-in-out infinite;
}
@keyframes finishBannerPulse{ 0%,100%{ opacity:1 } 50%{ opacity:0.92 } }
.finishCenter{ grid-area: center; display:flex; align-items:center; justify-content:center; }
.finishPodium{
  position:relative;
  display:flex; 
  flex-direction:column; 
  align-items:center;
  padding:28px 38px 32px;
  background: linear-gradient(180deg, rgba(45,50,75,0.92) 0%, rgba(18,22,38,0.98) 100%);
  border: 2px solid rgba(255,215,0,0.55);
  border-radius: 20px;
  box-shadow: 0 0 50px rgba(255,215,0,0.18), 0 0 0 1px rgba(255,255,255,0.12) inset, 0 8px 32px rgba(0,0,0,0.5);
}
.finishTrophyIcon{
  font-size: 56px;
  margin-bottom: 10px;
  filter: drop-shadow(0 6px 16px rgba(255,215,0,0.6));
  animation: trophyPulse 2s ease-in-out infinite;
}
@keyframes trophyPulse{ 
  0%,100%{ transform: scale(1); filter: drop-shadow(0 6px 16px rgba(255,215,0,0.6)); } 
  50%{ transform: scale(1.05); filter: drop-shadow(0 8px 20px rgba(255,215,0,0.8)); } 
}
.finishPlaceBadge{
  position:absolute; 
  top:-12px; 
  left:50%; 
  transform:translateX(-50%);
  font-weight:900; 
  font-size:14px; 
  color:#fff;
  background: linear-gradient(135deg, #f4d03f, #c9a227, #8b6914);
  padding:6px 20px; 
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.4);
  box-shadow: 0 3px 14px rgba(0,0,0,0.5), 0 0 20px rgba(255,215,0,0.3);
  letter-spacing: 0.8px;
}
.finishWinnerKart{
  width: 180px; 
  height: auto; 
  max-height: 145px;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.6));
  margin: 12px 0 14px;
}
.finishWinnerName{
  font-weight: 900; 
  font-size: 20px; 
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 0 12px rgba(255,215,0,0.2);
}
.finishPlaceNum{
  font-weight: 900; 
  font-size: 32px; 
  color: #ffd700;
  margin-top: 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 18px rgba(255,215,0,0.5);
}
.finishLeftPanel{
  grid-area: left;
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(18,22,38,0.95) 0%, rgba(12,15,28,0.98) 100%);
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 16px;
  box-shadow: 0 0 28px rgba(255,215,0,0.08), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.finishRightPanel{
  grid-area: right;
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(18,22,38,0.95) 0%, rgba(12,15,28,0.98) 100%);
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 16px;
  box-shadow: 0 0 28px rgba(255,215,0,0.08), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.finishPanelTitle{
  font-weight: 900; 
  font-size: 14px; 
  letter-spacing: 1px;
  color: #ffd700; 
  margin-bottom: 10px;
  text-shadow: 0 0 14px rgba(255,215,0,0.35);
  text-transform: uppercase;
}
.finishPanelSub{ 
  font-size: 11px; 
  color: rgba(255,255,255,0.65); 
  margin-bottom: 10px; 
  text-transform: uppercase; 
  letter-spacing: 0.8px; 
  font-weight: 700;
}
.finishPoolRow{ 
  font-weight: 900; 
  font-size: 28px; 
  color: #fff; 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  margin-bottom: 16px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.finishCoin{ 
  font-size: 24px; 
  filter: drop-shadow(0 2px 6px rgba(255,215,0,0.4));
}
.finishTopContrib{ 
  margin-top: 14px; 
  font-size: 13px; 
  color: rgba(255,255,255,0.92); 
}
.finishTopContrib .row{ display: flex; justify-content: space-between; align-items: center; margin: 6px 0; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.finishLbList{ max-height: 280px; overflow-y: auto; font-size: 13px; }
.finishLbList .row{ display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.finishChampionBox{
  grid-area: champ;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(18,22,38,0.95) 0%, rgba(12,15,28,0.98) 100%);
  border: 1px solid rgba(255,215,0,0.35);
  border-radius: 16px;
  display: flex; 
  flex-wrap: wrap; 
  align-items: center; 
  gap: 12px;
  box-shadow: 0 0 28px rgba(255,215,0,0.08), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.finishChampionTrophy{ 
  font-size: 28px; 
  filter: drop-shadow(0 2px 8px rgba(255,215,0,0.5));
}
.finishChampionTotal{ 
  font-weight: 900; 
  font-size: 28px; 
  color: #ffd700; 
  text-shadow: 0 0 18px rgba(255,215,0,0.5), 0 2px 6px rgba(0,0,0,0.6);
}
.finishContinue{
  grid-area: continue;
  margin-top: 16px;
  padding: 18px 40px;
  font-size: 18px; font-weight: 900;
  background: linear-gradient(135deg, #e8c547 0%, #c9a227 50%, #8b6914 100%);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.45);
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(201,162,39,0.45), 0 0 0 1px rgba(0,0,0,0.2) inset;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.finishContinue:hover{ filter: brightness(1.12); }
.finishContinue:active{ transform: scale(0.98); }

/* Finish screen contributor rows */
.finishContribRow{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  margin: 4px 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.finishContribName{
  font-weight: 800;
  color: rgba(255,255,255,0.95);
  flex: 1;
}
.finishContribPct{
  font-weight: 900;
  color: rgba(255,215,0,0.8);
  min-width: 45px;
  text-align: right;
}
.finishContribPay{
  font-weight: 900;
  color: #ffd700;
  min-width: 60px;
  text-align: right;
}

/* Finish screen leaderboard rows */
.finishLbRow{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  margin: 4px 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.finishLbName{
  font-weight: 800;
  color: rgba(255,255,255,0.95);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.finishLbCoins{
  font-weight: 900;
  color: #ffd700;
  min-width: 70px;
  text-align: right;
}
.finishPayout{ font-weight: 900; color: #ffd700; }
.finishLbPlace{ font-weight: 900; color: rgba(255,255,255,0.7); min-width: 28px; }
.finishLbScore{ font-weight: 900; color: #ffd700; }

/* OBS / fullscreen: large type, readable from distance */
.finishOverlay .finishWinnerName{ font-size: clamp(18px, 2.5vw, 26px); }
.finishOverlay .finishPanelTitle{ font-size: clamp(13px, 1.8vw, 18px); }
.finishOverlay .finishPoolRow{ font-size: clamp(22px, 3vw, 32px); }
.finishOverlay .finishChampionTotal{ font-size: clamp(24px, 3.2vw, 34px); }
.finishOverlay .finishTopContrib{ font-size: clamp(12px, 1.6vw, 16px); }
.finishOverlay .finishLbList{ font-size: clamp(12px, 1.6vw, 16px); }


/* ---------- Results Overlay (true fullscreen for OBS / TikTok) ---------- */
#resultsOverlay.resultsOverlay,
.resultsOverlay{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  display:flex; align-items:flex-start; justify-content:flex-start;
  padding:20px;
  box-sizing:border-box;
  background:rgba(0,0,0,0.85);
  z-index:2147483647;
  overflow:auto;
}
.resultsCard{
  width:min(98vw, 1700px);
  height:min(97vh, 1050px);
  max-height:97vh;
  background:rgba(12,12,18,0.92);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,0.55);
  padding:22px 26px 18px 26px;
  display:flex; flex-direction:column;
  box-sizing:border-box;
  overflow:hidden;
}
.resultsTop{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,0.10);
  flex-shrink:0;
}
.resultsTabs{
  display:flex; gap:8px;
}
.resultsTab{
  padding:10px 18px;
  font-size:clamp(14px, 1.8vw, 18px);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  color:rgba(255,255,255,0.7);
  cursor:pointer;
  transition:all 0.2s;
}
.resultsTab:hover{
  background:rgba(255,255,255,0.1);
  color:#fff;
}
.resultsTab.active{
  background:rgba(245,197,59,0.2);
  border-color:rgba(245,197,59,0.5);
  color:#f5c53b;
}
.resultsTitle{
  font-weight:900;
  letter-spacing:2px;
  font-size:clamp(42px, 6vw, 72px);
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,0.6), 0 0 24px rgba(255,215,0,0.25);
}
.resultsPool{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  font-size:clamp(28px, 4vw, 48px);
  color:#f5c53b;
  opacity:1;
}
.resultsPoolCoin{
  width:clamp(28px, 4vw, 44px);
  height:clamp(28px, 4vw, 44px);
  object-fit:contain;
  vertical-align:middle;
}
.resultsPool #resultsPool{
  font-weight:900;
  font-size:clamp(28px, 4vw, 48px);
  color:#f5c53b;
  text-shadow:0 0 12px rgba(245,197,59,0.5), 0 2px 6px rgba(0,0,0,0.5);
}
.resultsBody{ padding:18px 8px 14px 8px; flex:1; min-height:0; overflow:hidden; }

/* SailGP-style Monthly Leaderboard (broadcast style) */
.sailgpMonthlyLb{ padding:0; height:100%; min-height:0; display:flex; flex-direction:column; }

/* Board container fills modal content area */
.lbBoard{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 14px 18px;
  box-sizing: border-box;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10,10,14,0.92) 0%, rgba(6,6,10,0.92) 100%);
  border: 1px solid rgba(255, 215, 90, 0.22);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
}

/* Top section fixed */
.lbTop{
  flex: 0 0 auto;
}

.lbTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.lbTitle{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

.lbMonthPill{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

/* Pool row (big, broadcast style) */
.lbPoolRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255, 215, 90, 0.18);
  margin-bottom: 14px;
}

.lbPoolLabel{
  font-size: 22px;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
}

.lbPoolValue{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 30px;
  font-weight: 900;
  color: #f7c84b;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

.lbCoinIcon{
  width: 24px;
  height: 24px;
  opacity: 0.95;
}

/* Column headers */
.lbHeaderRow{
  display:grid;
  grid-template-columns: 70px 60px 1fr 140px 140px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 10px;
}

.lbColPos, .lbColRacer, .lbColTrack, .lbColScore{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.lbColAvatar{}

/* Scroll list (only this scrolls) — ONE row per player, vertical flex, NO grid/columns */
#sailgpLbList,
#sailgpLbList.lbList,
.lbList#sailgpLbList{
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  width: 100% !important;
  grid-template-columns: unset !important;
  column-count: 1 !important;
  flex: 1 1 auto;
  overflow: auto;
  padding-right: 6px;
  min-height: 0;
}

/* Row bar — full width, grid for columns POS|AVATAR|RACER|TRACK|SCORE */
.lbBoard .lbRow{
  display: grid !important;
  grid-template-columns: 70px 60px 1fr 140px 140px !important;
  align-items: center !important;
  height: 62px !important;
  padding: 0 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 55%, rgba(0,0,0,0.10) 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  flex-shrink: 0;
}

/* Rank accents — colored backgrounds + borders */
.lbBoard .lbRank1{
  background: linear-gradient(90deg, rgba(247,200,75,0.18) 0%, rgba(255,255,255,0.03) 55%, rgba(0,0,0,0.10) 100%) !important;
  border-color: rgba(247,200,75,0.35);
  box-shadow: 0 6px 22px rgba(247,200,75,0.12), 0 6px 18px rgba(0,0,0,0.45);
}
.lbBoard .lbRank2{
  background: linear-gradient(90deg, rgba(210,210,220,0.14) 0%, rgba(255,255,255,0.03) 55%, rgba(0,0,0,0.10) 100%) !important;
  border-color: rgba(210,210,220,0.30);
  box-shadow: 0 6px 22px rgba(210,210,220,0.10), 0 6px 18px rgba(0,0,0,0.45);
}
.lbBoard .lbRank3{
  background: linear-gradient(90deg, rgba(205,127,50,0.16) 0%, rgba(255,255,255,0.03) 55%, rgba(0,0,0,0.10) 100%) !important;
  border-color: rgba(205,127,50,0.35);
  box-shadow: 0 6px 22px rgba(205,127,50,0.10), 0 6px 18px rgba(0,0,0,0.45);
}

/* POS badge */
.lbPos{
  display:flex;
  align-items:center;
}

.lbPosBadge{
  width: 46px;
  height: 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,0.95);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
}

.lbRank1 .lbPosBadge{
  background: rgba(247,200,75,0.18);
  border-color: rgba(247,200,75,0.35);
  color: #f7c84b;
}
.lbRank2 .lbPosBadge{
  background: rgba(210,210,220,0.14);
  border-color: rgba(210,210,220,0.25);
  color: rgba(235,235,245,0.95);
}
.lbRank3 .lbPosBadge{
  background: rgba(205,127,50,0.16);
  border-color: rgba(205,127,50,0.28);
  color: rgba(255,210,160,0.95);
}

/* Avatar — ensure non-zero size, visible */
.lbAvatarWrap{
  position: relative !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  border-radius: 999px;
  overflow: hidden !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  flex-shrink: 0;
}

.lbRank1 .lbAvatarWrap{ border-color: rgba(247,200,75,0.40); }
.lbRank2 .lbAvatarWrap{ border-color: rgba(210,210,220,0.30); }
.lbRank3 .lbAvatarWrap{ border-color: rgba(205,127,50,0.34); }

.lbAvatar{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.lbAvatarFallback{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px;
  font-weight: 900;
  color: rgba(255,255,255,0.9);
}

/* Racer text */
.lbRacer{
  display:flex;
  flex-direction:column;
  gap: 4px;
  min-width: 0;
}

.lbName{
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,0.95);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.lbSub{
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.58);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* Track pill */
.lbTrack{
  display:flex;
  justify-content:flex-start;
}

.lbTrackPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 30px;
  min-width: 70px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.90);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}

/* Score */
.lbBoard .lbScore{
  text-align:right;
  font-size: 22px;
  font-weight: 900;
  color: rgba(255,255,255,0.92);
}

.lbRank1 .lbScore{ color: #f7c84b; }
.lbRank2 .lbScore{ color: rgba(235,235,245,0.95); }
.lbRank3 .lbScore{ color: rgba(255,210,160,0.95); }

/* Scrollbar */
#sailgpLbList.lbList::-webkit-scrollbar{ width: 10px; }
#sailgpLbList.lbList::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0.35);
}
#sailgpLbList.lbList::-webkit-scrollbar-track{ background: rgba(0,0,0,0.15); }

/* Mobile Monthly Leaderboard: 1 row per player, names always visible */
@media (max-width: 560px) {
  .lbBoard { padding: 12px 12px 10px 12px; }

  .lbHeaderRow {
    grid-template-columns: 48px 52px 1fr 90px !important;
  }
  .lbColTrack { display: none !important; }
  .lbColRacer { grid-column: 3; }
  .lbColScore { grid-column: 4; }

  .lbBoard .lbRow {
    grid-template-columns: 48px 52px 1fr 90px !important;
    height: 66px !important;
    padding: 0 10px !important;
  }

  .lbTrack { display: none !important; }

  .lbRacer { min-width: 80px !important; }
  .lbName  { font-size: 16px !important; line-height: 18px !important; display: block !important; visibility: visible !important; }
  .lbSub   { font-size: 11px !important; line-height: 13px !important; display: block !important; visibility: visible !important; }

  .lbName, .lbSub { color: rgba(255,255,255,0.95) !important; }

  .lbBoard .lbScore { font-size: 18px !important; }

  .lbPosBadge { width: 34px !important; height: 32px !important; font-size: 15px !important; }

  .lbAvatarWrap { width: 42px !important; height: 42px !important; }
}

.sailgpEmpty{ text-align:center; padding:24px; opacity:0.8; color:rgba(255,255,255,0.7); }

.resultsFoot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,0.10);
  flex-shrink:0;
}
.resultsHint{ opacity:0.75; font-size:clamp(14px, 1.8vw, 18px); }
#resultsContinue{
  font-size:clamp(16px, 2.2vw, 22px);
  font-weight:900;
  padding:14px 24px;
}

/* Comment Rush: "TYPE:" stays white; only the dynamic word is neon green */
#commentRushPhrase{ color:#fff; }
.commentRushWord{
  color:#39ff14;
  text-shadow:0 0 10px rgba(57,255,20,0.95), 0 0 24px rgba(57,255,20,0.6), 0 0 4px rgba(0,0,0,0.8);
}

.podiumGridPro{
  display:grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap:14px;
  align-items:end;
}
.podSlot{
  position:relative;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;
  padding:10px;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  overflow:hidden;
  min-height:180px;
}
.podSlot.pod1{ transform:translateY(-12px); min-height:200px; }
.podPlace{
  position:absolute; top:10px; left:10px;
  font-weight:900; font-size:clamp(18px, 2.5vw, 24px);
  width:clamp(32px, 4vw, 44px); height:clamp(32px, 4vw, 44px); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.14);
}
.podKartImg{
  width:100%;
  max-height:140px;
  object-fit:contain;
  display:block;
  margin-top:12px;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,0.55));
}

/* Give each podium place a more "prize" feel */
.podSlot.pod1{
  border-color: rgba(246,196,60,0.55);
  box-shadow: 0 0 22px rgba(246,196,60,0.18);
}
.podSlot.pod2{
  border-color: rgba(200,220,255,0.35);
  box-shadow: 0 0 18px rgba(200,220,255,0.12);
}
.podSlot.pod3{
  border-color: rgba(255,170,120,0.30);
  box-shadow: 0 0 18px rgba(255,170,120,0.10);
}
.podName{
  margin-top:10px;
  font-weight:900;
  font-size:clamp(22px, 3vw, 36px);
  text-align:center;
}
.podSlot.pod1 .podName{
  font-size:clamp(26px, 3.5vw, 40px);
  font-weight:900;
}
.podScore{
  margin-top:8px;
  font-weight:900;
  font-size:clamp(26px, 3.5vw, 44px);
  text-align:center;
  opacity:0.95;
}
.podSlot.pod1 .podScore{
  font-size:clamp(28px, 4vw, 48px);
}
.lbTitle{
  font-weight:900;
  font-size:clamp(18px, 2.5vw, 24px);
  letter-spacing:0.8px;
  text-transform:uppercase;
  margin-bottom:12px;
  opacity:0.95;
}
.monthlyChampionPoolLine{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  font-weight:900;
  font-size:clamp(28px, 4vw, 48px);
  color:#f5c53b;
  text-shadow:0 0 12px rgba(245,197,59,0.4), 0 2px 6px rgba(0,0,0,0.5);
}
.resultsChampCoin{
  width:clamp(24px, 3vw, 36px);
  height:clamp(24px, 3vw, 36px);
  object-fit:contain;
  vertical-align:middle;
}
#monthlyLbSection .lbTitle{
  font-size:clamp(18px, 2.5vw, 24px);
}
#winnerContribBox .contribCoinVal{
  font-size:clamp(20px, 2.8vw, 32px);
  font-weight:800;
  color:#f5c53b;
  text-shadow:0 0 12px rgba(245,197,59,0.5), 0 2px 6px rgba(0,0,0,0.5);
}
#winnerContribBox .contribCoinIcon{
  width:clamp(24px, 3vw, 32px);
  height:clamp(24px, 3vw, 32px);
  object-fit:contain;
  vertical-align:middle;
  margin-right:6px;
}
#winnerContribBox .contribGrid{
  display:grid;
  grid-template-columns: 1fr minmax(72px, auto) minmax(64px, auto);
  gap:12px 20px;
  align-items:center;
  margin:8px 0;
  min-width:0;
}
#winnerContribBox .contribGridHeader{ font-weight:800; font-size:clamp(14px, 1.8vw, 18px); color:rgba(255,255,255,0.9); margin-bottom:4px; }
#winnerContribBox .contribColMember{ text-align:left; font-weight:800; font-size:clamp(16px, 2.2vw, 24px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#winnerContribBox .contribColCoins{ display:flex; align-items:center; gap:6px; justify-self:start; min-width:72px; }
#winnerContribBox .contribColPayout{ text-align:right; font-weight:800; color:gold; font-size:clamp(18px, 2.5vw, 28px); text-shadow:0 0 10px rgba(255,215,0,0.4); justify-self:end; min-width:64px; }
#winnerContribBox .contribRow{ }
#winnerContribBox .contribName{ font-weight:800; font-size:clamp(18px, 2.5vw, 28px); }
#winnerContribBox .contribCoins{ display:flex; align-items:center; gap:8px; }
#winnerContribBox .contribPayout{ font-weight:800; color:gold; font-size:clamp(20px, 2.8vw, 32px); text-shadow:0 0 10px rgba(255,215,0,0.4); }
#monthlyLbSection{ margin-top:14px; }
#monthlyLbSection .lbTitle{ margin-bottom:10px; }

/* Verification box container (stream-readable) */
.resultsVerificationBox,
#winnerContribBox{
  margin-top:10px;
  max-height:none;
  overflow:visible;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,215,0,0.22);
}

/* Verification section: stream-readable, grid layout, large numbers */
.verificationSection{
  margin-top:10px;
  padding:10px 12px;
  background:rgba(0,0,0,0.4);
  border:1px solid rgba(255,215,0,0.25);
  border-radius:14px;
}
.verificationTitle{
  font-weight:900;
  font-size:clamp(18px, 2.5vw, 24px);
  letter-spacing:0.8px;
  text-transform:uppercase;
  margin-bottom:12px;
  color:#ffd700;
  text-shadow:0 0 12px rgba(255,215,0,0.35);
}
.verificationGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:12px 20px;
  margin-top:12px;
}
.verificationRow{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  background:rgba(255,255,255,0.04);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
}
.verificationLabel{
  font-size:clamp(14px, 1.8vw, 18px);
  font-weight:700;
  color:rgba(255,255,255,0.85);
}
.verificationNum{
  font-size:clamp(20px, 2.8vw, 32px);
  font-weight:800;
  color:#fff;
  text-shadow:0 0 12px rgba(255,215,0,0.4), 0 2px 6px rgba(0,0,0,0.6);
}
.verificationNum.accent{
  color:#f5c53b;
  text-shadow:0 0 14px rgba(245,197,59,0.55), 0 2px 8px rgba(0,0,0,0.6);
}
.verificationBreakdownLine{
  font-size:clamp(16px, 2.2vw, 22px);
  font-weight:800;
  color:rgba(255,255,255,0.92);
  margin:6px 0;
  line-height:1.4;
}
.verificationBreakdownLine .num{
  color:#f5c53b;
  font-weight:800;
  text-shadow:0 0 10px rgba(245,197,59,0.4);
}
.verificationNote{
  font-size:clamp(14px, 1.8vw, 18px);
  color:#f1c40f;
  margin-top:8px;
  font-weight:700;
}
.verificationBanner{
  padding:10px 14px;
  border-radius:10px;
  margin:8px 0;
  font-size:clamp(16px, 2.2vw, 22px);
  font-weight:800;
}
.verificationBanner.critical{
  background:rgba(231,76,60,0.25);
  border:1px solid rgba(231,76,60,0.6);
  color:#e74c3c;
}
.verificationBanner.warning{
  background:rgba(241,196,15,0.2);
  border:1px solid rgba(241,196,15,0.5);
  color:#f1c40f;
}
.verificationBanner.pass{
  color:#2ecc71;
  font-size:clamp(16px, 2.2vw, 22px);
}
.verificationContribLabel{
  font-size:clamp(14px, 1.8vw, 18px);
  font-weight:700;
  margin-top:8px;
  margin-bottom:6px;
}
.verificationContribHeader{
  font-size:clamp(16px, 2.2vw, 22px);
  font-weight:800;
  margin-bottom:8px;
  display:flex;
  gap:16px;
}
.lbName{
  font-weight:900;
  font-size:clamp(16px, 2.2vw, 22px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Two-column grid only for Overall Top 12 and Monthly Top 10 — NOT for SailGP list */
#lbList.lbList,
#monthlyLbList.lbList{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:6px 12px;
}
/* Generic row — .lbBoard .lbRow overrides for SailGP broadcast style */
.lbRow{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:12px;
  background:rgba(255,255,255,0.03);
}
.lbLeft{ display:flex; align-items:center; gap:8px; min-width:0; }
.lbRank{
  font-weight:900;
  width:clamp(28px, 3.5vw, 38px);
  font-size:clamp(16px, 2.2vw, 22px);
  opacity:0.95;
}
.lbKart{
  width:46px; height:30px; object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,0.55));
}
.lbScore{ font-weight:900; font-size:clamp(18px, 2.5vw, 28px); opacity:0.95; }


/* HIDE_AUDIO_TEST_HUD: keep audio prompt, hide debug HUD/log for launch */
.audioHud, .audioLog{ display:none !important; }


/* ==============================
   CINEMATIC BILLBOARD (OPTION B)
   In-world prop – off-track right
   ============================== */
.billboardWorld{
  position:absolute;
  right: 40px;
  top: 50px;
  width: 420px;
  height: 200px;
  z-index: 4; /* above canvas render, below countdown */
  pointer-events:none;
  transform: perspective(1100px) rotateY(-10deg) rotateX(2deg) translateZ(0) scale(0.92);
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.55));
  opacity: 0.98;
}

/* Timer positioned under the in-world billboard (right side) — main race view (index) */
.track .billboardTimer{
  position: absolute;
  right: 145px;   /* slightly left vs OBS */
  top: 275px;     /* slightly higher for index/race view */
  z-index: 7;
  pointer-events: none;
}

body.obs .track .billboardTimer{
  right: 120px !important;
  top: 385px !important;
}
.bbPole{
  position:absolute;
  right: 40px;
  top: 100px;
  width: 22px;
  height: 220px;
  background: linear-gradient(180deg, rgba(60,60,60,.9), rgba(12,12,12,.95));
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
}
.bbHead{
  position:absolute;
  right: 0;
  top: 0;
  width: 390px;
  height: 220px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(28,28,34,.98), rgba(10,10,12,.98));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.06),
    inset 0 0 30px rgba(0,0,0,.55);
  overflow:hidden;
}
.bbHeader{
  position:absolute;
  left: 16px;
  top: 12px;
  right: 16px;
  height: 52px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 2px;
}
.bbTitle{
  font-weight: 1000;
  letter-spacing: 1px;
  font-size: 20px;
  color: rgba(255,220,140,0.98);
  text-shadow: 0 2px 18px rgba(255,190,80,.25);
}
.bbSub{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.72);
  text-transform: uppercase;
}
.bbScreen{
  position:absolute;
  left: 16px;
  right: 16px;
  top: 80px;
  bottom: 28px;
  border-radius: 12px;
  background: radial-gradient(circle at 40% 35%, rgba(40,40,50,.9), rgba(0,0,0,.98));
  overflow:hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    inset 0 0 40px rgba(0,0,0,.6);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
}
.bbScreen::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
  opacity: .18; /* subtle LED scanlines */
  pointer-events:none;
}
.bbScreen img, .bbScreen video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
}
.bbFooter{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.bbBrand{
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.75);
}
.bbTag{
  font-weight: 1000;
  font-size: 11px;
  letter-spacing: 2px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,200,90,.12);
  color: rgba(255,220,130,.92);
  box-shadow: inset 0 0 0 1px rgba(255,220,130,.18);
}
.bbLed{
  position:absolute;
  left:0; right:0; top:0; bottom:0;
  box-shadow: inset 0 0 0 2px rgba(255,220,130,.10);
  border-radius: 18px;
  pointer-events:none;
}
.bbShadow{
  position:absolute;
  right: 0;
  bottom: -10px;
  width: 380px;
  height: 38px;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,0));
  filter: blur(1px);
  transform: skewX(-12deg);
  opacity: .7;
}

/* Billboard text slide (cinematic) */
.bbTextSlide{
  position:absolute; inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 16px 22px;
  font-weight: 1000;
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.94);
  text-shadow: 0 2px 22px rgba(0,0,0,.75), 0 0 22px rgba(124,92,255,.25);
}
.bbTextGradient{
  background: linear-gradient(90deg, rgba(124,92,255,.45), rgba(255,200,90,.35));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bbFadeIn{ animation: bbFadeIn .35s ease-out both; }
@keyframes bbFadeIn{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}


/* PATCH: billboard lowered */


/* === BILLBOARD TOP 3 STYLES === */
.bbTop {
  display:flex;
  align-items:center;
  gap:12px;
  animation: bbFade 0.5s ease;
}
.bbTop img {
  width:72px;height:72px;border-radius:50%;
}
.bb0 { border-left:4px solid gold; box-shadow:0 0 12px gold; }
.bb1 { border-left:4px solid silver; }
.bb2 { border-left:4px solid #cd7f32; }

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

/* Billboard: loading + empty states */
.bbLoading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:1px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
  background: radial-gradient(circle at 40% 35%, rgba(20,20,28,.25), rgba(0,0,0,0));
  pointer-events:none;
}
.bbEmpty{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:1px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}

/* ---------- OBS: show sidebar, two columns, scrollable sidebar ---------- */
/* OBS: show the right controls panel and make it scroll */
body.obs .side{
  display: flex !important;
  flex-direction: column;
  height: calc(100vh - 86px) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
body.obs .main{
  grid-template-columns: 1fr 360px !important;
  height: calc(100vh - 86px) !important;
  min-height: 0 !important;
}
body.obs .track{
  height: 100% !important;
  min-height: 0 !important;
}
/* Prevent Live Log from stealing entire height (Bonus CSS leak) */
body.obs .side .log{
  height: 220px !important;
  max-height: 220px !important;
  overflow: auto !important;
}

/* ---------- Sidebar + Live Log overrides (index.html UI) ---------- */
/* Live Log small so entire sidebar scrolls to reach Simulator */
.side .log{
  height: 140px !important;
  max-height: 140px !important;
  overflow: auto !important;
}
/* Entire right panel is the scroll container */
.side{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  height: calc(100vh - 86px) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
}
.main{
  display: grid !important;
  grid-template-columns: 1fr 360px !important;
  gap: 14px !important;
  padding: 14px !important;
  min-height: 0 !important;
}

/* Reusable fullscreen MP4 overlay (drone raid, meteor shower, etc.) */
.overlayVideoContainer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2147483647;
}
.overlayVideoContainer video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Fullscreen MP4 overlay for END OF WORLD gift tier (3001+) */
.endOfWorldVideoOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 2147483647;
  pointer-events: none;
}

/* Dashboard button style (not layout) — use for table buttons, actions */
.dash-btn {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
}
.dash-btn:hover {
  background: rgba(255,255,255,0.12);
}

/* Dashboard totals bars — visually distinct */
.dash-totals-bar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px 16px;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 14px;
}
.dash-totals-bar.all-visible {
  background: rgba(124,92,255,0.12);
  border: 1px solid rgba(124,92,255,0.25);
}
.dash-totals-bar.unpaid-due {
  background: rgba(254,202,87,0.15);
  border: 1px solid rgba(254,202,87,0.4);
}
.dash-totals-bar.selected {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}
.dash-totals-bar .k { color: var(--muted); }
.dash-totals-bar .amount-due { font-weight: 700; color: var(--warn, #feca57); }

/* Unpaid summary — big and obvious */
.dash-unpaid-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px 20px;
  padding: 16px 18px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: rgba(254, 202, 87, 0.18);
  border: 2px solid rgba(254, 202, 87, 0.5);
  font-size: 14px;
}
.dash-unpaid-summary .unpaid-due-hero {
  grid-column: 1 / -1;
  font-size: 28px;
  font-weight: 800;
  color: var(--warn, #feca57);
  letter-spacing: 0.5px;
}
.dash-unpaid-summary .k { color: var(--muted); }
.dash-unpaid-summary .amount-due { font-weight: 700; color: var(--warn, #feca57); }

/* Dashboard table numeric columns */
.dash-table .num { text-align: right; }
.dash-table td.amount-due { font-weight: 600; color: var(--warn, #feca57); }