/* MarbleDerby overlay styles. The canvas draws the track + marbles;
   this file styles the DOM chrome around it (join panel, countdown
   banner, podium, standings ladder, status pill).

   The overlay renders on a transparent OBS browser source. #ui is
   positioned over the track column by overlay.js (left/width set to
   the column), so every panel centers over the track no matter which
   anchor the streamer picked. Themes only move accent + panel tint;
   the marble colors are per-viewer and never themed. */

:root {
  --md-accent: #7c5cff;
  --md-accent2: #2dd4bf;
  --md-panel: rgba(10, 11, 20, 0.82);
  --md-panel-edge: rgba(124, 92, 255, 0.5);
  --md-txt: #f5f6fb;
  --md-txt-dim: #aab0c4;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-theme="candy"] {
  --md-panel: rgba(30, 8, 24, 0.82);
  --md-panel-edge: rgba(255, 110, 199, 0.55);
}
html[data-theme="space"] {
  --md-panel: rgba(4, 8, 22, 0.85);
  --md-panel-edge: rgba(96, 165, 250, 0.55);
}
html[data-theme="slate"] {
  --md-panel: rgba(15, 17, 22, 0.88);
  --md-panel-edge: rgba(148, 163, 184, 0.4);
}

* { box-sizing: border-box; margin: 0; }
html, body { width: 100%; height: 100%; background: transparent; overflow: hidden; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--md-txt);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

#stage { position: fixed; inset: 0; }
#race, #confetti { position: absolute; inset: 0; width: 100%; height: 100%; }
#confetti { pointer-events: none; }

/* #ui gets left/width from overlay.js to sit exactly over the track. */
#ui {
  position: absolute; top: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}

/* ---- join window ---- */
#join-panel {
  margin-top: 6vh;
  width: min(86%, 460px);
  background: var(--md-panel);
  border: 1px solid var(--md-panel-edge);
  border-radius: 18px;
  padding: 18px 20px 16px;
  text-align: center;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45), 0 0 32px color-mix(in srgb, var(--md-accent) 22%, transparent);
  animation: md-pop 0.45s var(--ease);
}
.jp-title {
  font-family: 'Bungee', 'Inter', sans-serif;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: 0.06em;
  background: linear-gradient(90deg, var(--md-accent), var(--md-accent2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px color-mix(in srgb, var(--md-accent) 45%, transparent));
}
.jp-count { margin-top: 6px; font-size: 15px; color: var(--md-txt-dim); font-weight: 600; }
.jp-count b { color: var(--md-txt); font-size: 19px; font-variant-numeric: tabular-nums; }
.jp-names {
  margin-top: 8px; min-height: 22px;
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.jp-names span {
  padding: 2px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  animation: md-pop 0.3s var(--ease);
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jp-timer {
  margin-top: 12px; height: 7px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); overflow: hidden;
}
#jp-timer-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--md-accent), var(--md-accent2));
  border-radius: 999px;
  transition: width 0.25s linear;
}
.jp-hint { margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--md-txt-dim); }
.jp-hint code {
  font-family: inherit; color: var(--md-txt);
  background: color-mix(in srgb, var(--md-accent) 26%, transparent);
  border: 1px solid var(--md-panel-edge);
  padding: 1px 8px; border-radius: 7px;
}

/* ---- countdown / winner banner ---- */
#banner {
  position: absolute; top: 34%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bungee', 'Inter', sans-serif;
  font-size: clamp(44px, 6vw, 92px);
  letter-spacing: 0.04em;
  text-align: center;
  color: #fff;
  text-shadow:
    0 0 24px color-mix(in srgb, var(--md-accent) 75%, transparent),
    0 4px 0 rgba(0, 0, 0, 0.35);
  animation: md-slam 0.4s var(--ease);
  white-space: nowrap;
}
#banner.winner {
  font-size: clamp(26px, 3.4vw, 52px);
  white-space: normal;
  line-height: 1.15;
}
#banner.winner small {
  display: block; font-family: 'Inter', sans-serif;
  font-size: 0.42em; font-weight: 800; letter-spacing: 0.18em;
  color: var(--md-txt-dim); margin-bottom: 6px;
}

/* The in-race command hint, named once just after GO.
   #banner defaults to clamp(44px, 6vw, 92px) with white-space: nowrap,
   which is right for "GO!" and three times too wide for a line of
   command words in a 400px column - it ran off both edges reading
   "oost · !bump watchin". Small and wrapping, like the winner variant
   above and for the same reason. */
#banner.hint {
  font-family: 'Inter', sans-serif;
  font-size: clamp(15px, 1.9vw, 24px);
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: normal;
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
#banner.hint small {
  display: block;
  font-size: 0.62em; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--md-txt-dim);
  margin-top: 6px;
}
#banner.hint small:first-child { margin-top: 0; }

/* ---- podium ---- */
#podium {
  margin-top: auto; margin-bottom: 7vh;
  width: min(86%, 440px);
  background: var(--md-panel);
  border: 1px solid var(--md-panel-edge);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
  animation: md-pop 0.5s var(--ease);
}
.pd-title {
  font-family: 'Bungee', 'Inter', sans-serif;
  font-size: 15px; letter-spacing: 0.22em; text-align: center;
  color: var(--md-txt-dim); margin-bottom: 10px;
}
#pd-list { list-style: none; padding: 0; display: grid; gap: 7px; }
#pd-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 800;
  padding: 8px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: md-pop 0.4s var(--ease) backwards;
}
#pd-list li:nth-child(2) { animation-delay: 0.12s; }
#pd-list li:nth-child(3) { animation-delay: 0.24s; }
#pd-list li:nth-child(n+4) { animation-delay: 0.36s; font-size: 13px; font-weight: 700; opacity: 0.85; }
#pd-list li:first-child {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--md-accent) 30%, transparent),
    color-mix(in srgb, var(--md-accent2) 24%, transparent));
  border-color: var(--md-panel-edge);
  font-size: 17px;
}
#pd-list .medal { font-size: 1.15em; width: 1.5em; text-align: center; }
#pd-list .dot { width: 13px; height: 13px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
#pd-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pd-list .time { margin-left: auto; color: var(--md-txt-dim); font-weight: 700; font-size: 0.85em; font-variant-numeric: tabular-nums; }

/* ---- standings ladder (beside the track, side set by overlay.js) ---- */
#ladder {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 210px;
  background: var(--md-panel);
  border: 1px solid var(--md-panel-edge);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.ld-head {
  font-family: 'Bungee', 'Inter', sans-serif;
  font-size: 11px; letter-spacing: 0.2em; color: var(--md-txt-dim);
  margin-bottom: 7px; text-align: center;
}
#ld-list { list-style: none; padding: 0; display: grid; gap: 4px; }
#ld-list li {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700;
  padding: 3px 6px; border-radius: 8px;
  transition: background 0.3s;
}
#ld-list li.finished { background: rgba(255, 255, 255, 0.07); }
#ld-list .pos { color: var(--md-txt-dim); width: 16px; text-align: right; font-variant-numeric: tabular-nums; }
#ld-list .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
#ld-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ld-list .flag { margin-left: auto; }

/* ---- the ladder, as a footer ----------------------------------------
   Clay, 2026-08-19: "Put the standings below the derby."

   Beside the track is the right place on a wide source and the wrong
   one at 400px, where a 210px panel lands ON the track and the marbles
   behind it vanish. Below it, the standings are a strip: same five
   places, same colours, laid out across instead of down.

   THE RACE GIVES UP THE HEIGHT rather than being covered. #stage is a
   flex column in embed mode and #race-wrap takes what is left, so the
   canvas is genuinely shorter and layout() measures the shorter box.
   An overlay strip would have hidden the bottom of the track, which is
   where a race finishes.

   Only in an embed. A standalone derby keeps the side panel. */
body[data-embed] #stage {
  display: flex;
  flex-direction: column;
}
body[data-embed] #race-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
body[data-embed] #ladder {
  position: static;
  transform: none;
  width: auto;
  flex: none;
  margin: 0 6px 6px;
  padding: 6px 8px;
  border-radius: 12px;
}
body[data-embed] .ld-head { display: none; }
body[data-embed] #ld-list {
  /* Across, not down, and every column the same width so the names do
     not jitter sideways as places swap. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 5px;
}
body[data-embed] #ld-list li {
  /* Stacked: the place and the marble on top, the name under it. Side
     by side there is not room for five names across 400px without
     ellipsising all of them to three characters. */
  flex-direction: column;
  gap: 2px;
  padding: 3px 2px;
  font-size: 10.5px;
  text-align: center;
  min-width: 0;
}
body[data-embed] #ld-list .pos { width: auto; text-align: center; }
body[data-embed] #ld-list .name { max-width: 100%; }
body[data-embed] #ld-list .flag { margin-left: 0; }

/* ---- status pill (only shown when nothing is connected) ---- */
#status-pill {
  position: absolute; left: 14px; bottom: 12px;
  font-size: 11.5px; font-weight: 600; color: var(--md-txt-dim);
  background: var(--md-panel);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px; padding: 5px 12px;
}
#status-pill::before {
  content: ''; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: #ffc270; margin-right: 7px;
  box-shadow: 0 0 8px #ffc270;
}

@keyframes md-pop {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes md-slam {
  from { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #join-panel, #banner, #podium, #pd-list li, .jp-names span { animation: none; }
}