/* Apex Club Live: the laptiming screen for a TV or projector at the track.
   Same dark racing theme as the app and the landing page. Everything is sized in rem,
   and the root font follows the screen, so the layout looks the same on any 16:9 display
   (16 px at 1920 × 1080). */

:root {
  --bg: #0b0b0c;
  --surface: #161618;
  --surface-raised: #222225;
  --line: #2c2c30;
  --text: #ffffff;
  --text-muted: #a1a1a6;
  --signal: #db2828;
  --good: #2fbf71;
  --tile: #edf1f3;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: min(1.48vh, 0.833vw); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body.hide-cursor { cursor: none; }

[hidden] { display: none !important; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.kicker {
  margin: 0;
  font: 600 1rem var(--display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
}
.kicker--muted { color: var(--text-muted); }

.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Partner logos on light tiles (most logos are dark on white) ---------- */

.logo-tile {
  display: flex; align-items: center; justify-content: center;
  background: var(--tile); border-radius: 0.75rem; overflow: hidden;
}
.logo-tile img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
/* Without a logo the partner's name is set in the display face. */
.logo-tile span {
  font: 800 1.6rem var(--display); text-transform: uppercase; letter-spacing: 0.04em;
  color: #111; text-align: center; line-height: 1; padding: 0 0.4em;
}
.logo-tile--wide { width: 13rem; height: 4.2rem; padding: 0.6rem 1rem; }
.logo-tile--spotlight { width: 100%; height: 9rem; padding: 1.4rem 2.2rem; }
.logo-tile--spotlight span { font-size: 2.6rem; }
.logo-tile--takeover { width: 46rem; height: 19rem; padding: 3rem 4.5rem; border-radius: 1.5rem; }
.logo-tile--takeover span { font-size: 5.5rem; }
.logo-tile--ribbon { width: 13rem; height: 4.6rem; padding: 0.6rem 1.1rem; }
.logo-tile--ribbon span { font-size: 1.3rem; }
.logo-tile--ribbon-small { width: 10.5rem; height: 4.6rem; padding: 0.6rem 0.9rem; }
.logo-tile--ribbon-small span { font-size: 1rem; }
.logo-tile.is-square { padding: 0.15rem; }

/* ---------- Event picker ---------- */

.picker {
  max-width: 64rem; margin: 0 auto; padding: 5rem 2rem;
  min-height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
body:has(.picker:not([hidden])) { overflow: auto; }
.picker__logo { width: 9rem; height: auto; margin-bottom: 2.5rem; }
.picker h1 { font-size: 5rem; margin: 0.6rem 0 2.5rem; }
.picker__list { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 0.75rem; }
.picker__list a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
  padding: 1.4rem 1.8rem; border-radius: 1rem; background: var(--surface);
  color: inherit; text-decoration: none; text-align: left;
  border: 1px solid transparent; transition: border-color 0.15s, background 0.15s;
}
.picker__list a:hover, .picker__list a:focus-visible { border-color: var(--signal); background: var(--surface-raised); outline: none; }
.picker__title { font: 800 2rem var(--display); text-transform: uppercase; }
.picker__meta { color: var(--text-muted); font-size: 1.1rem; }
.picker__badge {
  font: 600 1rem var(--display); letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.35rem 0.8rem; border-radius: 99rem; background: var(--surface-raised); color: var(--text-muted);
}
.picker__badge--today { background: var(--signal); color: #fff; }
.picker__section {
  margin: 1.6rem 0 0.2rem; text-align: left;
  font: 600 1rem var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted);
}
.picker__hint { margin-top: 2.5rem; color: var(--text-muted); font-size: 1.1rem; }
kbd {
  font: 600 0.95rem var(--body); padding: 0.1rem 0.45rem; border-radius: 0.3rem;
  background: var(--surface-raised); border: 1px solid var(--line);
}

/* ---------- Live screen ---------- */

.screen {
  height: 100vh;
  padding: 1.8rem 2.4rem 1.6rem;
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top top" "board side" "ribbon ribbon";
  gap: 1.4rem 1.6rem;
}

.top { grid-area: top; display: flex; align-items: center; gap: 2rem; }
.top__logo { width: 6.2rem; height: auto; }
.top__event { flex: 1; min-width: 0; }
.top__event h1 { font-size: 3.6rem; margin: 0.2rem 0 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top__meta { margin: 0; color: var(--text-muted); font-size: 1.25rem; }
.top__presenting { display: flex; flex-direction: column; align-items: flex-end; gap: 0.45rem; }
.top__clock {
  font: 800 3.6rem var(--display); font-variant-numeric: tabular-nums;
  padding-left: 2rem; border-left: 1px solid var(--line);
}

.live-dot {
  display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.6rem; border-radius: 50%;
  background: var(--signal); vertical-align: 0.05rem; animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.25; } }

/* Leaderboard */
.board {
  grid-area: board; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: 1.25rem; padding: 1.6rem 1.8rem 1.4rem;
}
.board__head { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 1.1rem; }
.board__head h2 { font-size: 2.4rem; }
.board__sponsor { margin: 0; color: var(--text-muted); font-size: 1.15rem; }
.board__sponsor strong { color: var(--text); font-weight: 600; }
.board__page { margin: 0 0 0 auto; color: var(--text-muted); font: 600 1.1rem var(--display); letter-spacing: 0.15em; }

.board__cols, .row {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1.3fr) minmax(0, 1.25fr) 4.5rem 7.5rem 11rem;
  align-items: center; gap: 1rem;
}
.board__cols {
  padding: 0 1.1rem 0.6rem; border-bottom: 1px solid var(--line);
  font: 600 0.95rem var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted);
}

/* Ten equal rows per page, whatever the screen height. */
.board__rows {
  list-style: none; margin: 0.5rem 0 0; padding: 0; flex: 1; min-height: 0;
  display: grid; grid-template-rows: repeat(10, minmax(0, 1fr)); gap: 0.35rem;
}
.row {
  padding: 0 1.1rem; border-radius: 0.7rem; background: var(--bg);
  font-size: 1.45rem; min-height: 0;
}
.row__pos { font: 800 2.1rem var(--display); color: var(--text-muted); }
.row:nth-child(-n+3) .row__pos { color: var(--text); }
.row.is-p1 .row__pos { color: var(--signal); }
.row__driver { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__car { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__laps { color: var(--text-muted); }
.row__gap { color: var(--text-muted); font-size: 1.3rem; }
.row__best { font: 800 2.3rem var(--display); }
.row.is-p1 { box-shadow: inset 0.3rem 0 0 var(--signal); }
.row.is-new { animation: newtime 6s ease-out; }
.row.is-new .row__driver::after {
  content: "Ny tid"; margin-left: 0.7rem; padding: 0.15rem 0.55rem; border-radius: 0.35rem; vertical-align: 0.15rem;
  font: 600 0.85rem var(--display); letter-spacing: 0.15em; text-transform: uppercase;
  background: var(--signal); color: #fff;
}
@keyframes newtime { 0%, 30% { background: #4a1515; } 100% { background: var(--bg); } }

.board__empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: 0; text-align: center; font: 800 2.6rem var(--display); text-transform: uppercase;
}
.board__empty span { margin-top: 0.8rem; font: 400 1.3rem var(--body); text-transform: none; color: var(--text-muted); }

/* Right column */
.side { grid-area: side; min-height: 0; display: flex; flex-direction: column; gap: 1.4rem; }

.recent {
  flex: 1; min-height: 0; overflow: hidden;
  background: var(--surface); border-radius: 1.25rem; padding: 1.6rem 1.6rem 1rem;
}
.recent h2 { font-size: 1.9rem; margin-bottom: 0.9rem; }
.recent { display: flex; flex-direction: column; }
/* Older laps fade out at the bottom instead of being cut off. */
.recent__list {
  list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 0.5rem;
  flex: 1; min-height: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 5rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 5rem), transparent);
}
.recent__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: center;
  padding: 0.6rem 0.9rem; border-radius: 0.6rem; background: var(--bg);
  animation: slidein 0.5s ease-out;
}
.recent__driver { font-weight: 600; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent__meta { grid-column: 1; color: var(--text-muted); font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent__time { grid-row: 1 / span 2; grid-column: 2; font: 800 1.9rem var(--display); font-variant-numeric: tabular-nums; }
.recent__item.is-pb .recent__time { color: var(--good); }
.recent__item.is-invalid .recent__time { color: var(--text-muted); text-decoration: line-through; }
.recent__empty { color: var(--text-muted); }
@keyframes slidein { from { opacity: 0; transform: translateY(-0.6rem); } }

.spotlight {
  background: var(--surface); border-radius: 1.25rem; padding: 1.5rem 1.6rem 1.6rem;
  display: flex; flex-direction: column; gap: 0.8rem;
  animation: fadein 0.8s ease-out;
}
.spotlight h3 { font-size: 2rem; margin-top: 0.2rem; }
.spotlight__text {
  margin: 0; color: var(--text-muted); font-size: 1.1rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@keyframes fadein { from { opacity: 0; } }

/* Partner ribbon along the bottom */
.ribbon {
  grid-area: ribbon; display: flex; align-items: center; gap: 3rem;
  padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.ribbon__group { display: flex; align-items: center; gap: 1.4rem; }
.ribbon__logos { display: flex; gap: 0.9rem; }
#ribbon-event { margin-left: auto; }

/* Full-screen partner break */
.takeover {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
  text-align: center; padding: 4rem;
  background: radial-gradient(ellipse at 50% 30%, #1d1d20 0%, var(--bg) 70%);
  animation: fadein 0.8s ease-out;
}
.takeover h2 { font-size: 6rem; margin-top: 1rem; }
.takeover__text { margin: 0; max-width: 62rem; font-size: 1.8rem; color: var(--text-muted); }
.takeover__url { margin: 0; font: 600 1.5rem var(--display); letter-spacing: 0.15em; text-transform: uppercase; }
.takeover__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 0.35rem; background: var(--surface-raised); }
.takeover__bar span { display: block; height: 100%; width: 0; background: var(--signal); }
.takeover__bar span.is-running { width: 100%; transition: width linear var(--duration, 12s); }

/* New fastest lap of the day */
.flash {
  position: fixed; left: 50%; top: 50%; z-index: 30; transform: translate(-50%, -50%);
  padding: 2.6rem 5rem; border-radius: 1.5rem; text-align: center;
  background: var(--signal); box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.6);
  animation: pop 0.45s cubic-bezier(.2, 1.4, .4, 1);
}
.flash .kicker { color: #fff; opacity: 0.85; font-size: 1.4rem; }
.flash__time { margin: 0.4rem 0 0; font: 800 9rem var(--display); line-height: 1; font-variant-numeric: tabular-nums; }
.flash__driver { margin: 0.6rem 0 0; font-size: 2rem; font-weight: 600; }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } }

.fullscreen-button {
  position: fixed; right: 2.4rem; bottom: 7.6rem; z-index: 50;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.9rem 1.4rem; border: 1px solid var(--line); border-radius: 99rem;
  background: rgba(34, 34, 37, 0.92); color: var(--text); cursor: pointer;
  font: 600 1.2rem var(--display); letter-spacing: 0.15em; text-transform: uppercase;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s, background 0.15s;
}
.fullscreen-button:hover, .fullscreen-button:focus-visible { background: var(--signal); border-color: var(--signal); outline: none; }
.fullscreen-button svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Fades out together with the mouse pointer when nobody touches the screen. */
body.hide-cursor .fullscreen-button { opacity: 0; pointer-events: none; }

.offline {
  position: fixed; left: 1.2rem; bottom: 1.2rem; z-index: 40; margin: 0;
  padding: 0.5rem 0.9rem; border-radius: 0.5rem; background: var(--surface-raised);
  color: var(--text-muted); font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}