:root {
  --bg: #060a16;
  --bg-elevated: #0c1428;
  --glass: rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.075);
  --border: rgba(120, 170, 255, 0.16);
  --border-strong: rgba(120, 190, 255, 0.32);
  --text: #eaf2ff;
  --text-dim: #8296bd;
  --accent: #22d3ff;
  --accent-2: #3f7dff;
  --accent-glow: rgba(34, 211, 255, 0.45);
  --danger: #ff3b3b;
  --warn: #ffd400;
  --good: #22e07a;
  --purple: #a35bff;
  --radius: 18px;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-user-select: none; user-select: none;
}

body {
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(63, 125, 255, 0.16), transparent 60%),
    radial-gradient(900px 600px at 110% 10%, rgba(34, 211, 255, 0.10), transparent 55%),
    var(--bg);
}

/* faint scanline / circuit texture for the "control panel" feel */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}

/* ---------- splash ---------- */
#splash {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  background: var(--bg);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#splash.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#splashGlow {
  position: absolute; width: 60vmin; height: 60vmin; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  filter: blur(10px); animation: pulseGlow 2.6s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { transform: scale(0.92); opacity: 0.6; }
  50% { transform: scale(1.08); opacity: 1; }
}
#splashLogo { width: min(72vw, 420px); position: relative; filter: drop-shadow(0 0 24px var(--accent-glow)); }
#splashStatus {
  position: relative; font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600;
}
#splashStatus::after { content: ''; }

/* ---------- app shell ---------- */
#app {
  position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column;
}

#topBar {
  display: flex; align-items: center; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px 14px;
  background: linear-gradient(180deg, rgba(12,20,40,0.92), rgba(12,20,40,0.75));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
#brandMark { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; }
#flagPill {
  font-weight: 800; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; background: #444; color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset;
  flex: 0 0 auto;
}
#trackName { color: var(--text-dim); font-size: 12px; font-weight: 600; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#buildVersion { color: #4a5a7a; font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto; }
#connDot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--good); box-shadow: 0 0 8px 1px var(--good);
  transition: background 0.3s, box-shadow 0.3s;
}
#connDot.conn-down { background: var(--danger); box-shadow: 0 0 8px 1px var(--danger); animation: blinkDot 1s infinite; }
@keyframes blinkDot { 50% { opacity: 0.25; } }

#lbToggle {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--glass); color: var(--text-dim); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
#lbToggle[aria-pressed="true"] { background: var(--accent); color: #061018; border-color: var(--accent); }

/* ---------- swipeable pager ---------- */
#viewport { flex: 1 1 auto; overflow: hidden; position: relative; touch-action: pan-y; }
#pager {
  display: flex; height: 100%; width: 300%;
  will-change: transform;
}
.page { width: 33.3334%; height: 100%; overflow: hidden; }
.page-inner { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px calc(70px + env(safe-area-inset-bottom)) 14px; }
.map-inner { overflow: hidden; padding: 0; position: relative; }

/* ---------- mini leaderboard drawer (map page) ---------- */
#lbDrawer {
  position: absolute; top: 10px; right: -280px; bottom: 10px; width: 260px; z-index: 6;
  background: var(--glass-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 10px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  transition: right 0.3s cubic-bezier(.2,.7,.3,1);
  box-shadow: -8px 0 24px rgba(0,0,0,0.35);
}
#lbDrawer.open { right: 10px; }
#lbDrawerList { display: flex; flex-direction: column; gap: 6px; }
.lb-row {
  display: grid; grid-template-columns: 22px 34px 1fr auto; align-items: center; gap: 8px;
  background: var(--glass); border: 1px solid var(--border); border-radius: 10px;
  padding: 6px 8px;
}
.lb-row.lb-leader { border-color: var(--border-strong); background: linear-gradient(90deg, rgba(163,91,255,0.16), var(--glass) 60%); }
.lb-pos { font-size: 13px; font-weight: 800; color: var(--text-dim); text-align: center; }
.lb-leader .lb-pos { color: var(--purple); }
.lb-num {
  width: 32px; height: 22px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-weight: 900; font-style: italic; font-size: 11px; color: #0a0f1c;
  background: var(--accent);
  font-family: 'Arial Narrow', 'Oswald', 'Segoe UI Semibold', sans-serif;
}
.lb-mid { min-width: 0; }
.lb-driver { font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-gap { font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
#lbEmpty { text-align: center; color: var(--text-dim); font-size: 12px; margin-top: 30px; }

/* ---------- detailed timing table (Timing page) ---------- */
.page-inner.timing-inner { padding: 10px; }
#timingScroll { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; border: 1px solid var(--border); }
#timingTable { border-collapse: collapse; width: 100%; min-width: 900px; font-size: 15px; font-variant-numeric: tabular-nums; }
/* Vertical padding is a CSS var, not a fixed value - autoSizeTimingTable() in app.js shrinks/grows it
   so the whole field fits on screen with no scrolling, without shrinking the font itself. */
#timingTable thead th {
  position: sticky; top: 0; z-index: 2; background: #0c1626; color: var(--accent);
  text-align: center; font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px;
  padding: var(--tt-row-pad, 10px) 10px; border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
/* Centered to match the header above - keeps every column's label and data lined up together.
   .tt-num-col used to set its own text-align: right; removed below so nothing overrides this. */
#timingTable td { padding: var(--tt-row-pad, 8px) 10px; border-bottom: 1px solid rgba(255,255,255,0.05); white-space: nowrap; text-align: center; }
#timingTable tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
#timingTable tbody tr.tt-leader { background: linear-gradient(90deg, rgba(163,91,255,0.14), transparent 70%); }
.tt-chg { width: 20px; text-align: center; }
.tt-pos { font-weight: 800; font-size: 20px; }
.tt-num { font-weight: 900; font-style: italic; color: var(--accent); font-size: 19px; }
.tt-cat { color: var(--text-dim); font-size: 12px; text-transform: uppercase; }
.tt-driver { font-weight: 700; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.tt-num-col { color: var(--text-dim); }
/* Purple always identifies "this is the Fastest Lap column" - only goes bold while the LAST completed
   lap actually WAS the fastest (RowDto.IsFastestLap), dropping back to normal weight the moment a
   slower lap completes, so bold reads as "just happened", not a permanent label. */
.tt-fastcol { color: var(--purple); }
.tt-fastcol.tt-current-fastest { font-weight: 800; }
/* Highlights whichever sector/microsector cell this car most recently completed - see
   RacePositionData.LastCompletedSectorNum/LastCompletedMicrosectorLabel. Color depends on which
   group's background it sits on (see below) - the usual gold reads fine on the dark microsector
   background but needs a strong, dark color instead on the light sector background. Blue, not red -
   red reads as an alarm/warning, which a normal "just completed a sector" event isn't. */
.tt-recent-split { font-weight: 800; }
.tt-grp-sector.tt-recent-split { color: #0052cc; }
.tt-grp-micro.tt-recent-split { color: var(--warn); }
/* Placeholder for whichever sector immediately FOLLOWS the one just highlighted above - the car is now
   somewhere in the middle of that sector, so its cell would otherwise show last lap's stale value
   sitting there looking like current data. Small/italic/dim so it doesn't compete visually with real
   numbers - see sectorCellHtml() in app.js. */
.tt-in-sector { font-size: 11px; font-style: italic; color: #5a7a94; font-weight: 400; }
/* Column grouping - light/dark backgrounds plus a frame border tie related columns together
   visually: Sector 1-3 (+Last on the Sectors page), the microsector block, and the Gap block on the
   Timing page. --grp-border carries each group's own frame color; .tt-grp-first/.tt-grp-last close
   the left/right edges, the top/bottom edges come from the header row and the last body row (so the
   frame stays correct however many rows there are, with no JS needed to know the row count). */
.tt-grp-sector { --grp-border: #4f9fdb; background: #d6ecff; color: #063457; }
.tt-grp-micro { --grp-border: #4f9fdb; background: #1d3f66; color: #eaf6ff; }
.tt-grp-gap { --grp-border: #d99a3d; background: #ffe6b0; color: #4a2f00; }
#timingTable thead th[class*="tt-grp-"], #sectorsTable thead th[class*="tt-grp-"] { border-top: 2px solid var(--grp-border); }
#timingTable tbody tr:last-child td[class*="tt-grp-"], #sectorsTable tbody tr:last-child td[class*="tt-grp-"] { border-bottom: 2px solid var(--grp-border); }
.tt-grp-first { border-left: 2px solid var(--grp-border); }
.tt-grp-last { border-right: 2px solid var(--grp-border); }
.pc-arrow { display: inline-block; font-size: 11px; line-height: 1; }
.pc-up { color: var(--good); }
.pc-down { color: var(--danger); }
#timingEmpty { text-align: center; color: var(--text-dim); font-size: 13px; padding: 40px 0; }

/* ---------- sectors table (Sectors page) - same look/auto-sizing as the Timing table above, own ID
   so its own --tt-row-pad (set independently by autoSizeFieldTable in app.js) doesn't fight with the
   Timing table's ---------- */
#sectorsScroll { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; border: 1px solid var(--border); }
#sectorsTable { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; font-variant-numeric: tabular-nums; }
/* Tighter horizontal padding than Timing's (6px vs 10px) - this table can carry a lot of narrow
   numeric split columns (S1-3 plus every microsector) and needs to fit them without horizontal
   scrolling wherever possible. */
#sectorsTable thead th {
  position: sticky; top: 0; z-index: 2; background: #0c1626; color: var(--accent);
  text-align: center; font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px;
  padding: var(--tt-row-pad, 10px) 6px; border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
#sectorsTable td { padding: var(--tt-row-pad, 8px) 6px; border-bottom: 1px solid rgba(255,255,255,0.05); white-space: nowrap; text-align: center; }
#sectorsTable tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
#sectorsTable tbody tr.tt-leader { background: linear-gradient(90deg, rgba(163,91,255,0.14), transparent 70%); }
#sectorsEmpty { text-align: center; color: var(--text-dim); font-size: 13px; padding: 40px 0; }

/* ---------- map ---------- */
#mapSvg { width: 100%; height: 100%; display: block; }
#mapBgLayer { pointer-events: none; }
#mapPlaceholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 13px;
}

/* ---------- nav arrows + dots ---------- */
.nav-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--glass-strong); backdrop-filter: blur(6px); color: var(--text);
  font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s ease;
}
#app:hover .nav-arrow { opacity: 0.85; }
.nav-arrow:hover { background: var(--glass-strong); border-color: var(--border-strong); }
#navPrev { left: 12px; }
#navNext { right: 12px; }
@media (hover: none) { .nav-arrow { display: none; } }

#pageDots {
  position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 5; display: flex; gap: 8px; padding: 7px 10px; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--border); backdrop-filter: blur(8px);
}
.dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,0.25); padding: 0; cursor: pointer; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; }
.dot.active { background: var(--accent); box-shadow: 0 0 8px 1px var(--accent-glow); transform: scale(1.25); }

@media (max-width: 380px) {
  #trackName { display: none; }
  #buildVersion { display: none; }
}