/* ==========================================================================
   ATOM VELOCITY — theme layer
   Loaded LAST (after style.css and menus.css). Additive overrides only: it
   re-skins the UI chrome from the old red broadcast accent to the ATOM
   VELOCITY electric-cyan / violet identity, tightens spacing, and refines
   type — while deliberately leaving every SEMANTIC racing colour untouched
   (tyre compounds, brake, start lights, DNF, boost, fastest-lap purple,
   personal-best green, flag colours). Nothing here changes game logic.
   ========================================================================== */

:root {
  /* ---- ATOM VELOCITY brand tokens ---- */
  --brand:        #22d3ee;   /* electric cyan   */
  --brand-2:      #8b7cff;   /* violet          */
  --brand-3:      #38bdf8;   /* sky             */
  --brand-ink:    #04121a;   /* text on brand   */
  --brand-glow:   rgba(34, 211, 238, 0.42);
  --brand-soft:   rgba(34, 211, 238, 0.14);
  --brand-line:   rgba(34, 211, 238, 0.55);
  --brand-grad:   linear-gradient(100deg, #22d3ee 0%, #38bdf8 45%, #8b7cff 100%);

  /* ---- refined neutrals ---- */
  --bg:           #05060b;
  --bg2:          #0a0c14;
  --panel:        rgba(15, 18, 28, 0.90);
  --panel-light:  rgba(30, 35, 50, 0.86);
  --text:         #eef2f8;
  --text-dim:     #97a0b4;
  --hair:         rgba(255, 255, 255, 0.09);

  --radius:       10px;
  --radius-sm:    6px;
  --shadow-soft:  0 10px 34px rgba(0, 0, 0, 0.42);
  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);

  --font-display: 'Inter', 'Inter var', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* ===== Base ============================================================= */
html, body { background: var(--bg); }
body {
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--brand-soft); color: #fff; }
:focus-visible { outline-color: var(--brand); }

/* ===== Boot screen ===================================================== */
#screen-boot {
  position: relative;
  background:
    radial-gradient(ellipse 70% 55% at 50% 32%, rgba(34, 211, 238, 0.14), transparent 62%),
    radial-gradient(ellipse 60% 50% at 78% 78%, rgba(139, 124, 255, 0.12), transparent 60%),
    radial-gradient(ellipse at 50% 40%, #0c1120 0%, #05060b 72%);
  overflow: hidden;
}
.boot-inner { position: relative; z-index: 2; }

/* animated atom mark behind the wordmark */
.boot-atom {
  position: absolute; top: 40%; left: 50%; width: 420px; height: 420px;
  transform: translate(-50%, -50%); z-index: 0; opacity: 0.5; pointer-events: none;
}
.boot-atom .nucleus {
  position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, #c7f9ff, var(--brand-2));
  box-shadow: 0 0 42px 10px var(--brand-glow);
}
.boot-atom .orbit {
  position: absolute; inset: 0; margin: auto; width: 100%; height: 42%;
  border: 1.5px solid var(--brand-line); border-radius: 50%;
}
.boot-atom .orbit.o1 { animation: atom-spin 14s linear infinite; }
.boot-atom .orbit.o2 { transform: rotate(60deg); animation: atom-spin-2 18s linear infinite; }
.boot-atom .orbit.o3 { transform: rotate(120deg); animation: atom-spin-3 22s linear infinite; }
@keyframes atom-spin   { to { transform: rotate(360deg); } }
@keyframes atom-spin-2 { to { transform: rotate(420deg); } }
@keyframes atom-spin-3 { to { transform: rotate(480deg); } }

.boot-logo {
  font-size: 74px; letter-spacing: -1.5px; font-weight: 900; font-style: italic;
  color: #fff; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.5);
}
.boot-logo span { color: var(--brand); margin-left: 12px; }
.boot-year {
  font-size: 128px; line-height: 0.88;
  background: linear-gradient(180deg, #ffffff 26%, var(--brand) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.boot-sub { letter-spacing: 0.46em; font-size: 12.5px; color: var(--text-dim); }
.boot-bar { width: 380px; max-width: 78vw; height: 5px; background: rgba(255, 255, 255, 0.08); border-radius: 999px; }
#boot-progress {
  background: var(--brand-grad);
  box-shadow: 0 0 16px var(--brand-glow);
  transition: width 0.25s var(--ease);
}
#boot-status { letter-spacing: 0.24em; }

/* ===== Menu chrome ===================================================== */
.menu-screen {
  background:
    radial-gradient(ellipse 60% 50% at 12% 8%, rgba(34, 211, 238, 0.10), transparent 58%),
    radial-gradient(ellipse 55% 50% at 92% 92%, rgba(139, 124, 255, 0.10), transparent 58%),
    linear-gradient(120deg, rgba(5, 6, 11, 0.97) 0%, rgba(10, 12, 20, 0.94) 62%, rgba(12, 10, 26, 0.94) 100%);
}
.menu-header { border-bottom-color: var(--hair); }
.menu-header::after {
  background: linear-gradient(90deg, var(--brand), var(--brand-2) 42%, transparent 78%);
}
.menu-header .brand { letter-spacing: -0.5px; }
.menu-header .brand em { color: var(--brand); }
.menu-header .title small { color: var(--brand); }
.menu-footer { border-top-color: var(--hair); color: var(--text-dim); }
.key-hint b { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); border-radius: var(--radius-sm); }

/* ===== Main menu nav =================================================== */
.main-nav .nav-item {
  border-left-color: var(--brand);
  border-radius: var(--radius);
  background: var(--panel);
  transition: transform 0.16s var(--ease), background 0.16s var(--ease), box-shadow 0.16s var(--ease), border-color 0.16s var(--ease);
}
.main-nav .nav-item:hover,
.main-nav .nav-item.focused,
.main-nav .nav-item:focus-visible {
  background: var(--brand-grad);
  border-color: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 10px 34px var(--brand-glow);
}
.main-nav .nav-item:hover h3,
.main-nav .nav-item.focused h3,
.main-nav .nav-item:focus-visible h3 { color: var(--brand-ink); }
.main-nav .nav-item:hover p,
.main-nav .nav-item.focused p,
.main-nav .nav-item:focus-visible p { color: rgba(4, 18, 26, 0.78); }
.main-nav .nav-item:hover .nav-arrow { opacity: 1; }

/* ===== Cards =========================================================== */
.select-card { border-radius: var(--radius); border-color: var(--hair); background: var(--panel); }
.select-card:hover { border-color: rgba(255, 255, 255, 0.26); box-shadow: var(--shadow-soft); }
.select-card.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand), 0 12px 34px var(--brand-glow); }
.select-card .drv { border-radius: var(--radius-sm); }
.select-card .drv.selected { background: var(--brand); color: var(--brand-ink); }
.select-card .drv.selected .code { color: rgba(4, 18, 26, 0.7); }
.track-card .round-badge { background: var(--brand-grad); color: var(--brand-ink); border-radius: var(--radius-sm); }

/* ===== Settings ======================================================== */
.setting-row { border-radius: var(--radius); border-color: var(--hair); background: var(--panel); }
.seg button { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); border-radius: var(--radius-sm) !important; }
.seg button.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

/* ===== Buttons ========================================================= */
.f1-btn {
  background: var(--brand-grad); color: var(--brand-ink);
  border-radius: var(--radius-sm);
  transition: transform 0.13s var(--ease), box-shadow 0.13s var(--ease), filter 0.13s var(--ease);
}
.f1-btn:hover { filter: brightness(1.06); box-shadow: 0 8px 28px var(--brand-glow); }
.f1-btn.ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.24); color: var(--text); }
.f1-btn.ghost:hover { border-color: var(--brand); color: #fff; box-shadow: none; }

/* ===== Loading screen ================================================== */
#screen-loading {
  background:
    radial-gradient(ellipse 60% 55% at 50% 30%, rgba(34, 211, 238, 0.10), transparent 60%),
    var(--bg);
}
.load-spinner { border-color: rgba(255, 255, 255, 0.10); border-top-color: var(--brand); }
.load-map::before, .load-map::after { border-color: var(--brand); }

/* ===== HUD chrome (semantic colours preserved) ========================= */
#tower { border-left-color: var(--brand-line); }
#tower .tower-head { background: rgba(255, 255, 255, 0.05); }
.tw-row.player { background: var(--brand-soft); }
#dash { border-top-color: var(--brand-line); }
#carstat { border-left-color: var(--brand-line); }
#minimap { border-radius: var(--radius-sm); }
.msg-pill { border-radius: var(--radius-sm); border-left-color: var(--brand); }
#pit-overlay { border-radius: var(--radius); border-color: var(--hair); }
.tyre-btn { border-radius: var(--radius-sm); }

/* ===== Results / standings ============================================ */
.results-table tr.player-row { background: var(--brand-soft); }
.podium-card { border-radius: var(--radius); border-top-color: var(--brand); }
.stand-head::before { background: var(--brand); }
.pb-row.me .pb-name { color: var(--brand); }
.pb-row.me .pb-track { box-shadow: 0 0 0 1px var(--brand-line); }
.season-strip .ss-round { border-left-color: var(--brand); }

/* ===== Onboarding / session gate ====================================== */
.onboarding-card {
  border-radius: var(--radius);
  border-left-color: var(--brand);
  background: linear-gradient(155deg, #131826, #080a12);
}
.onboarding-card .eyebrow { color: var(--brand); }
#onboarding-go { background: var(--brand-grad); color: var(--brand-ink); border-radius: var(--radius-sm); }
#session-ready .session-ready-card { border-left-color: var(--brand); border-radius: var(--radius); }
#session-ready-go { background: var(--brand-grad); color: var(--brand-ink); border-radius: var(--radius-sm); }

/* ===== Focus (keyboard) =============================================== */
.kb-focus { outline-color: var(--brand) !important; }
.nav-item.kb-focus { background: var(--brand-grad); color: var(--brand-ink); }
.nav-item.kb-focus h3 { color: var(--brand-ink); }
.nav-item.kb-focus p { color: rgba(4, 18, 26, 0.78); }

/* ===== Pause ========================================================== */
#screen-pause { background: rgba(4, 6, 12, 0.84); }
.pause-title::before { background: var(--brand); }

/* ===== Scrollbars ===================================================== */
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand-line); }

/* ===== Menu ambient background: recolour the old red tints ============= */
.menu-bg .bg-carbon {
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.5) 0 2px, transparent 2px 6px),
    radial-gradient(ellipse at 78% 12%, rgba(34, 211, 238, 0.16), transparent 55%);
}
.menu-bg .bg-vignette {
  background:
    radial-gradient(ellipse at 22% 78%, rgba(139, 124, 255, 0.14), transparent 45%),
    radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(5, 6, 11, 0.82) 100%);
}

/* ===== Remaining chrome accents ======================================== */
.set-group-head h3::before { background: var(--brand); }
.results-table tr.player-row { box-shadow: inset 3px 0 0 var(--brand); }

/* ===== Reduced motion ================================================= */
@media (prefers-reduced-motion: reduce) {
  .boot-atom .orbit { animation: none !important; }
}