@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/rubik-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/rubik-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/rubik-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/rubik-500-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rubik-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rubik-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rubik-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rubik-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/rubik-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/rubik-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/rubik-900-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/rubik-900-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b0b0f;
  font-family: 'Rubik', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', system-ui, sans-serif;
  color: #fff;
}

#stage {
  position: fixed;
  inset: 0;
  z-index: 0;
}

#hud {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

/* ---------- top bar ---------- */
#hud-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
}

.pill {
  background: linear-gradient(180deg, rgba(38, 34, 48, 0.72), rgba(14, 12, 20, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px) saturate(1.2);
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 4px 14px rgba(0, 0, 0, 0.4);
}

#round-badge {
  background: linear-gradient(140deg, #ff4a8d, #e01f63);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 18px rgba(255, 45, 120, 0.45);
}

#round-timer {
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease, border-color 0.2s ease;
}
#round-timer.round-timer-low {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, 0.5);
  animation: pulse 0.6s infinite alternate;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: auto;
}
.dot.online { background: #02c39a; box-shadow: 0 0 8px #02c39a; }
.dot.offline { background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; }

#mock-badge {
  display: none;
  background: #ffd166;
  color: #1a1a1a;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 6px;
}

/* ---------- phase banner ---------- */
#phase-banner-wrap {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.phase-banner {
  font-size: clamp(20px, 4vw, 34px);
  font-weight: 900;
  letter-spacing: 0.03em;
  padding: 10px 28px;
  border-radius: 14px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  /* a dark, near-opaque backdrop of its own so the text pops regardless of
     the sky/wash color behind it — the color washes below only tint it,
     they never carry the contrast on their own */
  background: rgba(8, 8, 12, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.55);
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.phase-banner.phase-lobby { color: #ff9ec4; border-color: rgba(255, 158, 196, 0.3); }
.phase-banner.phase-countdown { color: #ffd166; border-color: rgba(255, 209, 102, 0.35); animation: pulse 0.5s infinite alternate; }
.phase-banner.phase-green { color: #3cffc9; text-shadow: 0 0 18px rgba(2, 195, 154, 0.9); border-color: rgba(2, 195, 154, 0.5); background: rgba(4, 26, 21, 0.8); }
.phase-banner.phase-red { color: #ff5c5c; text-shadow: 0 0 22px rgba(255, 59, 59, 1); border-color: rgba(255, 59, 59, 0.55); background: rgba(28, 6, 6, 0.8); animation: shake 0.4s; }
.phase-banner.phase-results { color: #ffd166; border-color: rgba(255, 209, 102, 0.35); }

@keyframes pulse { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ---------- timer bar ---------- */
#timer-track {
  height: 6px;
  margin: 10px 60px 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}
.timer-fill {
  height: 100%;
  width: 100%;
  transition: width 0.1s linear;
}
.timer-fill.phase-lobby, .timer-fill.phase-countdown { background: #ffd166; }
.timer-fill.phase-green { background: #02c39a; }
.timer-fill.phase-red { background: #ff3b3b; }
.timer-fill.phase-results { background: #ffd166; }

/* ---------- join hint (flows naturally right below the timer bar) ---------- */
/* One-line call to action, sitting in the clear strip under the timer bar —
   the side rails own the detail, this just has to be read at a glance. */
#join-hint {
  margin: 12px auto 0;
  width: fit-content;
  max-width: 92vw;
  text-align: center;
  padding: 7px 18px;
  border-radius: 999px;
  font-size: clamp(13px, 2.7vw, 17px);
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, rgba(28, 22, 38, 0.8), rgba(14, 12, 20, 0.68));
  border: 1px solid rgba(255, 209, 102, 0.45);
  backdrop-filter: blur(8px);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  animation: bob 2.4s ease-in-out infinite;
}
#join-hint b { font-weight: 900; color: #ffd166; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ---------- gift legend (left rail) ---------- */
#legend {
  position: fixed;
  left: 12px;
  bottom: 21vh;
  width: min(196px, 33vw);
  background: linear-gradient(180deg, rgba(24, 20, 32, 0.8), rgba(14, 12, 20, 0.66));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 9px 10px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.lg-title {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #ffd166;
  margin-bottom: 6px;
}
.lg-title + .lg-rules + .lg-title { margin-top: 9px; }
.lg-rules div {
  font-size: 11px;
  line-height: 1.45;
  color: #d6dde7;
  margin-bottom: 2px;
}
.lg-rules b { color: #fff; font-weight: 800; }
.lg-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
  line-height: 1.25;
}
.lg-gift { font-size: 11.5px; font-weight: 700; }
.lg-eff { font-size: 10.5px; color: #b9c2d0; }

/* Narrow/portrait phones: the legend was tall enough to eat into the
   track and overlap the crowd massed at the start line. Shrink it and
   pin it higher so it clears the runners. */
@media (max-width: 480px) {
  #legend {
    bottom: 27vh;
    width: min(150px, 38vw);
    padding: 7px 8px;
  }
  .lg-title { font-size: 9px; margin-bottom: 4px; }
  .lg-title + .lg-rules + .lg-title { margin-top: 6px; }
  .lg-rules div { font-size: 9.5px; line-height: 1.3; margin-bottom: 1px; }
  .lg-row { margin-bottom: 2px; }
  .lg-gift { font-size: 10px; }
  .lg-eff { font-size: 9px; }
}

/* ---------- persistent standings ---------- */
#standings {
  display: none;
  position: fixed;
  left: 12px;
  top: 176px;
  width: min(186px, 32vw);
  background: linear-gradient(180deg, rgba(24, 20, 32, 0.8), rgba(14, 12, 20, 0.66));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px 10px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.st-title {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #7ee8fa;
  margin-bottom: 5px;
}
.st-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
}
.st-rank { color: #ffd166; font-weight: 900; min-width: 12px; }
.st-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-score { color: #ffd166; }

/* ---------- ticker feed ---------- */
#ticker-wrap {
  position: fixed;
  right: 12px;
  /* sits higher than the crowd's widest point (near the start line) so it
     hangs over the narrower, sparser part of the track instead of right on
     top of players standing at the right edge */
  bottom: 34vh;
  width: min(190px, 28vw);
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  max-height: 15vh;
  overflow: hidden;
  mask-image: linear-gradient(to top, black 70%, transparent 100%);
}
.tick-item {
  background: linear-gradient(90deg, rgba(22, 19, 30, 0.78), rgba(16, 14, 22, 0.5));
  border-left: 3px solid rgba(255, 209, 102, 0.7);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 500;
  backdrop-filter: blur(6px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  animation: slidein 0.25s ease;
}
@keyframes slidein {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- results podium ---------- */
#results-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: radial-gradient(ellipse at 50% 40%, rgba(30, 24, 40, 0.88), rgba(6, 6, 10, 0.9));
  backdrop-filter: blur(4px);
  text-align: center;
  /* up to 10 winners plus gifters/all-time lists can run taller than a
     short viewport — scroll instead of overflowing off-screen */
  overflow-y: auto;
  padding: 24px 12px;
}
#results-panel h2 {
  font-size: clamp(28px, 6vw, 48px);
  margin: 0 0 10px;
  color: #ffd166;
  text-shadow: 0 0 24px rgba(255, 209, 102, 0.6);
}
#results-panel h3 {
  margin: 18px 0 4px;
  font-size: 16px;
  color: #7ee8fa;
}
.podium-row {
  font-size: clamp(16px, 3vw, 22px);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 22px;
}
.podium-row .rank { color: #ff2d78; min-width: 2.2em; }
.gifter-row { font-size: 14px; color: #cbd5e1; }