/* Design tokens shared by every broadcast screen.
 *
 * live.html / post-race.html / tournament.html each own their layout, but they
 * must read as one production: same palette, same type, same panel treatment.
 * Anything a second screen would want to reuse belongs here.
 */

:root {
  --bg: #05070b;
  --panel: #0b1017;
  --panel-2: #10161f;
  --panel-3: #151d28;
  --line: #1f2937;
  --line-soft: #161e28;
  --accent: #e8323c;
  --accent-deep: #7d0e15;
  --text: #ffffff;
  --dim: #8996a8;
  --dimmer: #5a6675;

  /* Grid slots. Team colours come from the data, never from CSS, so the
     operator dashboard and the broadcast graphic cannot disagree. */
  --slot-1: #60a5fa;
  --slot-2: #facc15;
  --slot-3: #22c55e;
  --slot-4: #f43f5e;
  --slot-none: #5a6675;

  --ok: #22c55e;
  --warn: #facc15;

  --display: "Liberation Sans Narrow", "DejaVu Sans Condensed", "Noto Sans CJK JP",
    sans-serif;
  --body: "Noto Sans CJK JP", "Liberation Sans", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: transparent;
  font-family: var(--body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Opt-in opaque background for designing without OBS behind the page. */
body.solid {
  background: var(--bg);
}

#stage {
  position: relative;
  width: 1920px;
  height: 1080px;
}

/* Panels are opaque; anything left transparent is a window onto OBS video. */
.chrome {
  position: absolute;
  background: var(--bg);
}

/* --- shared components ------------------------------------------------------ */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.panel > h2,
.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 0 12px;
  height: 34px;
  background: var(--panel-3);
  border-bottom: 1px solid var(--line);
}

.panel.hot > h2,
.panel-head.hot {
  background: linear-gradient(90deg, #a3141d 0%, var(--accent-deep) 100%);
}

/* A red parallelogram tab, the recurring accent across the mockups. */
.tab {
  display: flex;
  align-items: center;
  padding: 0 26px 0 18px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.1em;
  background: linear-gradient(90deg, #b8161f 0%, var(--accent-deep) 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}

.live-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 1.6s steps(1, end) infinite;
}

.live-dot.off {
  background: var(--dimmer);
  animation: none;
}

@keyframes blink {
  0%,
  60% {
    opacity: 1;
  }
  61%,
  100% {
    opacity: 0.25;
  }
}

/* Position badge: filled with the team colour, set from data. */
.pos {
  font-family: var(--display);
  font-weight: 700;
  text-align: center;
  border-radius: 2px;
  color: #fff;
}

.num {
  font-family: var(--display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Sponsors are branding, not live data — they stay on screen when a feed dies.
   The artwork is mostly white-background logos, so each sits on a white chip. */
.sponsor-row {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 10px;
  padding: 0 20px;
  border-top: 1px solid var(--line);
}

.sponsor {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 0;
  height: 64px;
  box-sizing: border-box;
  padding: 5px 12px;
  border-radius: 4px;
  background: #ffffff;
  overflow: hidden;
}

/* Logos supplied as white artwork need the chip inverted. */
.sponsor.on-dark {
  background: #10161f;
  border: 1px solid #263141;
}

.sponsor img {
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* TIER IV artwork has no white padding at all, while the four platinum PNGs
   devote roughly half their 160px canvas height to padding. Normalize the
   visible mark, but keep its white chip exactly the same size as every other
   sponsor. */
.sponsor.tier-gold img {
  max-height: 28px !important;
}

/* No artwork: stay on the dark bar so a missing logo is obvious. */
.sponsor.textual {
  background: transparent;
  flex-direction: column;
  gap: 2px;
}

.sponsor.textual .name {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #c9d2dd;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sponsor.textual .accent {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--dimmer);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Debug readout, hidden on air. */
#conn {
  display: none;
  position: absolute;
  right: 8px;
  bottom: 4px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #4a5563;
}

body.debug #conn {
  display: block;
}

#conn.stale {
  color: var(--accent);
}