/* --- Calendar modal polish (v27.4.5) --- */
.calModal{
  position: relative;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.22);
  overflow: hidden;
}
.calModal::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(180deg, rgba(11,20,48,.92), rgba(11,20,48,.70)),
    var(--calbg, none);
  background-size: cover;
  background-position: center;
  opacity: .95;
  z-index: 0;
}
.calModal > *{ position: relative; z-index: 1; }

.calRegList{
  max-height: 44vh;
  overflow:auto;
  padding-right: 4px;
}
@media (max-width: 520px){
  .calRegList{ max-height: 38vh; }
  .regRow{
    grid-template-columns: 32px 1fr;
    grid-template-rows: auto auto;
    align-items:start;
  }
  .regRow__tag{
    grid-column: 1 / -1;
    justify-self: flex-start;
  }
}

.calModalActions{
  position: sticky;
  bottom: -14px;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap:wrap;
  padding-top: 12px;
  padding-bottom: 6px;
  margin-top: 10px;
  background: linear-gradient(180deg, rgba(15,27,63,0), rgba(15,27,63,.92) 34%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* tiny spinner used in calendar loading */
.spinner{
  display:inline-block;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.22);
  border-top-color: rgba(107,215,255,.90);
  animation: spin .8s linear infinite;
  vertical-align: -2px;
  margin-right: 8px;
}
@keyframes spin{
  to{ transform: rotate(360deg); }
}


/* ==========================================================
   EstSportz Rally HUB — Modern Redesign (Blue Neon)
   - Keep existing class names (no functionality removed)
   - Clean tokens + consistent components + better responsive UI
   ========================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* Core palette (keep the “blue esports” vibe) */
  --bg0:#050816;
  --bg1:#070c1f;
  --panel:rgba(9,14,34,.88);
  --panel2:rgba(10,18,44,.82);

  --text:#eaf1ff;
  --muted:rgba(234,241,255,.72);
  --muted2:rgba(234,241,255,.58);

  --border:rgba(255,255,255,.10);
  --border2:rgba(107,215,255,.22);

  --blue:#3aa0ff;
  --cyan:#6bd7ff;

  /* Compatibility (older rules / inline usage) */
  --accent:var(--blue);
  --accent2:var(--cyan);
  --accentWarm:#ff6a2a;

  --danger:#ff4d5c;
  --success:#28d17c;
  --warn:#ffbe78;

  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;

  --shadow: 0 18px 55px rgba(0,0,0,.48);
  --shadow-soft: 0 10px 26px rgba(0,0,0,.34);

  --ring: 0 0 0 3px rgba(107,215,255,.20);

  --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --content-max: 1320px;

  /* Safe-area insets (iOS notch devices) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* ---------- Base / reset ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ color-scheme: dark; }
body{
  margin:0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.45;
  background:
    radial-gradient(1200px 620px at 18% -10%, rgba(58,160,255,.22), transparent 60%),
    radial-gradient(900px 540px at 84% 0%, rgba(107,215,255,.16), transparent 55%),
    radial-gradient(760px 560px at 70% 110%, rgba(58,160,255,.14), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity:.22;
  mix-blend-mode: overlay;
}

/* Aurora / broadcast glow (V12) */
body::after{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(700px 480px at 18% 15%, rgba(58,160,255,.28), transparent 60%),
    radial-gradient(760px 540px at 78% 8%, rgba(107,215,255,.22), transparent 62%),
    radial-gradient(760px 560px at 62% 88%, rgba(255,106,42,.14), transparent 62%),
    conic-gradient(from 120deg, rgba(58,160,255,.10), rgba(107,215,255,.10), rgba(255,106,42,.08), rgba(58,160,255,.10));
  mix-blend-mode: screen;
  opacity:.55;
  filter: blur(46px) saturate(1.15);
  animation: auroraV12 18s ease-in-out infinite alternate;
}

@keyframes auroraV12{
  0%{ transform: translate3d(-2%, -1%, 0) rotate(-2deg) scale(1.05); opacity:.48; }
  50%{ transform: translate3d(2%, 1%, 0) rotate(1.5deg) scale(1.10); opacity:.58; }
  100%{ transform: translate3d(4%, -1%, 0) rotate(3deg) scale(1.12); opacity:.52; }
}

/* Mobile background calm (less noise) */
@media (max-width: 520px){
  body::before{ opacity:.14; background-size: 52px 52px; }
  body::after{ opacity:.42; filter: blur(56px) saturate(1.10); }
}

/* Keep focus visible and pretty */
:focus-visible{
  outline:none;
  box-shadow: var(--ring);
  border-color: rgba(107,215,255,.40) !important;
}

/* Skip link (accessibility) */
.skiplink{
  position:absolute;
  left:-9999px;
  top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(107,215,255,.22);
  background: rgba(7,12,31,.92);
  color: rgba(234,241,255,.95);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  z-index: 999;
}
.skiplink:focus{ left: 12px; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; }
.mono{ font-family: var(--font-mono); }

/* ---------- Layout ---------- */
.app{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 18px 18px 40px;
}
@media (max-width: 520px){
  .app{ padding: 14px 12px 34px; }
}
.pref-compact .app{ padding-bottom: 28px; }

/* Compact mode should be clearly visible */
.pref-compact .topbar__inner{ padding: 10px 14px; }
.pref-compact .nav__link{ padding: 8px 10px; }
.pref-compact .btn{ padding: 8px 12px; }
.pref-compact .btn--sm{ padding: 6px 10px; }
.pref-compact .dock{ padding: 10px; gap: 8px; }
.pref-compact .rallyCard{ padding: 8px; min-width: 240px; }
.pref-compact .stageChip{ padding: 8px 10px; min-width: 110px; }
.pref-compact .surface__body{ padding: 12px; }
.pref-compact .pageHead__inner{ padding: 16px 14px 10px; }
.pref-compact .eventCard__body{ padding: 12px 12px; }

/* Subtle route transitions */
.app.view--fade{ animation: viewFade .32s ease both; }
@keyframes viewFade{
  from{ opacity: 0; transform: translateY(6px); filter: blur(3px); }
  to{ opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Motion off */
.pref-motion-off *{ animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ---------- Top bar ---------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  padding: calc(10px + var(--safe-top)) 0 10px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background: transparent;
}

.topbar::before,
.topbar::after{ display:none; }

.topbar__inner{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: nowrap; /* keep single-row header; use hamburger/scroll instead of wrapping */

  border-radius: calc(var(--radius-lg) + 4px);
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(10,16,40,.86), rgba(8,12,30,.78));
  box-shadow: 0 18px 60px rgba(0,0,0,.52);
}
@media (max-width: 520px){
  .topbar__inner{ padding: 10px 12px; }
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
  flex: 0 1 auto;
}
.brand__logo{
  object-fit: cover;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(107,215,255,.35), rgba(58,160,255,.12) 45%, rgba(0,0,0,.25));
  border: 1px solid rgba(107,215,255,.22);
  box-shadow: 0 0 0 1px rgba(58,160,255,.18), 0 14px 30px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.brand__text{ line-height:1.05; min-width:0; }
.brand__title{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand__subtitle{
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nav (desktop: centered, mobile: scrollable rail) */
.nav{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  overflow: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar{ display:none; }
@media (max-width: 880px){
  .nav{ justify-content:flex-start; }
}
.nav__link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  color: rgba(234,241,255,.88);
  border: 1px solid transparent;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  white-space: nowrap;
}
.nav__link:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  transform: translateY(-1px);
}
.nav__link.is-active{
  background: linear-gradient(180deg, rgba(58,160,255,.18), rgba(58,160,255,.08));
  border-color: rgba(107,215,255,.20);
  box-shadow: 0 0 0 1px rgba(107,215,255,.12), 0 0 26px rgba(58,160,255,.22);
}
.nav__link.is-active::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: 0 0 18px rgba(58,160,255,.35);
}

/* Right side controls */
.topbar__right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

/* Admin button (topbar only) */
.adminBtn{
  display:none; /* JS toggles visibility for admin/owner */
  align-items:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,16,32,.44);
  color: rgba(234,241,255,.92);
  cursor:pointer;
  font-weight: 900;
  letter-spacing: .2px;
  white-space: nowrap;
  transition: background .14s ease, transform .14s ease, border-color .14s ease;
}
.adminBtn:hover{
  transform: translateY(-1px);
  background: rgba(10,16,32,.62);
  border-color: rgba(255,215,0,.22);
}
.adminBtn__icon{ font-size: 14px; }
.adminBtn__text{ font-size: 12px; }

/* Compact admin button label on narrower layouts (prevents topbar overflow) */
@media (max-width: 980px){
  .adminBtn__text{ display:none; }
  .adminBtn{ width:40px; height:40px; padding:0; justify-content:center; border-radius: 14px; }
}

/* ==========================================================
   Event (Live timing) page — phone-first cleanup
   - Rally selector becomes a horizontal rail (instead of a tall column)
   - Header meta chips scroll horizontally (keeps hero compact)
   - Controls row wraps cleanly (no sideways overflow)
   ========================================================== */

@media (max-width: 760px){
  /* Compact hero chips: one-line scroll instead of a very tall wrap */
  .eventHeroV16__chips{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .eventHeroV16__chips::-webkit-scrollbar{ display:none; }
  .eventHeroV16__chips .metaChip{ white-space: nowrap; flex: 0 0 auto; }

  /* Make rally list usable on phones */
  .rallyStackV16{
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    scrollbar-width: none;
  }
  .rallyStackV16::-webkit-scrollbar{ display:none; }
  .rallyTileV16{
    flex: 0 0 auto;
    min-width: 260px;
    scroll-snap-align: start;
  }
}

@media (max-width: 520px){
  /* Remove full-bleed negative margin on the hero to avoid rare iOS overflow glitches */
  .eventHeroV16{ margin: 0; }

  /* Controls row: stack + full-width toggle */
  .controlsTopV16{ flex-wrap: wrap; align-items:flex-start; }
  .controlsTopV16__right{ width: 100%; justify-content:flex-start; }
  .eventPage .segmented{ width: 100%; }
  .eventPage .segBtn{ flex: 1 1 0; text-align:center; }

  /* More breathing room for the stage rail */
  .stageRail--v16{ padding-left: 12px; padding-right: 12px; }

  /* Leaderboard "card rows" spacing a touch tighter */
  .leaderTable tbody tr.leaderRow{ padding: 11px 11px; }
}

/* When the topbar is about to overflow, auto-collapse non-critical parts (JS adds .is-collapsed) */
.topbar__inner.is-collapsed .brand__text{ display:none; }
.topbar__inner.is-collapsed .userchip{ display:none; }
.topbar__inner.is-collapsed .adminBtn__text{ display:none; }
.topbar__inner.is-collapsed .adminBtn{ width:40px; height:40px; padding:0; justify-content:center; }
.topbar__inner.is-collapsed .nav__link{ padding: 8px 9px; font-size: 11px; border-radius: 12px; }

/* Language dropdown + icon buttons */
.langDD{ position:relative; display:flex; align-items:center; gap:10px; }
.langBtn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,16,32,.44);
  color: rgba(234,241,255,.92);
  cursor:pointer;
  transition: background .14s ease, transform .14s ease, border-color .14s ease;
}
.langBtn:hover{
  transform: translateY(-1px);
  background: rgba(10,16,32,.62);
  border-color: rgba(107,215,255,.20);
}
.langBtn .label{ display:flex; align-items:center; gap:8px; font-weight: 700; }
.langBtn .caret{ opacity:.85; font-size:12px; }

.langMenu{
  position:absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 170px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(15,27,63,.92), rgba(11,20,48,.90));
  box-shadow: var(--shadow);
  display:none;
}
.langDD.open .langMenu{ display:block; }
.langItem{
  width:100%;
  text-align:left;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(234,241,255,.86);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.langItem:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
.langItem.active{
  background: linear-gradient(90deg, rgba(58,160,255,.20), rgba(107,215,255,.12));
  border-color: rgba(107,215,255,.22);
}

.iconBtn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,16,32,.44);
  color: rgba(234,241,255,.92);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: background .14s ease, transform .14s ease, border-color .14s ease;
}
.iconBtn:hover{
  transform: translateY(-1px);
  background: rgba(10,16,32,.62);
  border-color: rgba(107,215,255,.20);
}

/* User chip (nav area, shown when JS fills it) */
.userchip{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,16,32,.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: 260px;
}


/* Mobile menu toggle (hamburger)
   We auto-collapse the header when nav links don't fit (JS toggles .is-collapsed).
   Fallback: force collapsed on small widths.
*/
/* Always show the hamburger so extra pages (Shop / My Account / Users / Admin) are reachable.
   The main nav (3 buttons) stays visible on all widths.
*/
.navToggle{ display:inline-flex; }

/* Compact topbar on smaller widths (keep the 3 buttons visible) */
@media (max-width: 980px){
  .brand__subtitle{ display:none; }
  .nav__link{ padding: 9px 10px; font-size: 12px; border-radius: 12px; }
  .userchip{ max-width: 180px; }
}
.userchip__name{
  font-weight: 800;
  font-size: 12px;
  color: rgba(234,241,255,.92);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.userchip__check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left: 8px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  color: rgba(210,255,225,.95);
  background: rgba(46, 204, 113, .14);
  border: 1px solid rgba(46, 204, 113, .28);
  box-shadow: 0 0 18px rgba(46, 204, 113, .18);
}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.40);
  color: rgba(234,241,255,.90);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
}
.badge--soft{ background: rgba(255,255,255,.04); }
.badge--guest{ background: rgba(255,255,255,.03); }
.badge--member{ border-color: rgba(107,215,255,.22); background: rgba(58,160,255,.12); }
.badge--admin{ border-color: rgba(255,190,120,.22); background: rgba(255,106,42,.14); }
.badge--owner{ border-color: rgba(255,215,0,.22); background: rgba(255,215,0,.10); }

/* Pass badges (Shop / Users / Register) */
.passBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .35px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.passBadge--single{
  border-color: rgba(46, 204, 113, .48);
  background: rgba(46, 204, 113, .12);
  color: rgba(225,255,240,.95);
  box-shadow: 0 0 18px rgba(46, 204, 113, .18);
}
.passBadge--annual{
  border-color: rgba(0, 224, 255, .55);
  background: linear-gradient(180deg, rgba(0, 224, 255, .16), rgba(0, 120, 255, .10));
  color: rgba(225,249,255,.95);
  box-shadow: 0 0 22px rgba(0, 224, 255, .18);
}


/* Compact pass badge for leaderboards */
.passMini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .35px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  margin-left: 8px;
  transform: translateY(-1px);
}
.passMini--single{
  border-color: rgba(46, 204, 113, .48);
  background: rgba(46, 204, 113, .12);
  color: rgba(225,255,240,.95);
}
.passMini--annual{
  border-color: rgba(0, 224, 255, .55);
  background: linear-gradient(180deg, rgba(0, 224, 255, .16), rgba(0, 120, 255, .10));
  color: rgba(225,249,255,.95);
}

/* Online count pill (home hero) */
.badge--online{
  background: rgba(4, 14, 38, .68);
  border-color: rgba(58,160,255,.28);
  box-shadow: 0 0 22px rgba(58,160,255,.16);
}
.badge--online .onlineIcon{ opacity:.92; filter: drop-shadow(0 0 8px rgba(107,215,255,.22)); }
.badge--online .onlineCount{ font-variant-numeric: tabular-nums; letter-spacing: .2px; }

/* UserBadge inner pills (syncAuthUI) */
#userBadge{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ub-name{
  font-weight: 900;
  letter-spacing: .2px;
}
.ub-badges{ display:flex; gap:6px; flex-wrap:wrap; }
.ub-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  font-size: 12px;
  font-weight: 800;
}
.ub-pill--member{ border-color: rgba(107,215,255,.20); }
.ub-pill--unverified{ border-color: rgba(255,190,120,.22); }
.ub-pill--owner{ border-color: rgba(255,215,0,.25); }
.ub-pill--staff{ border-color: rgba(107,215,255,.22); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(58,160,255,.18), rgba(58,160,255,.08));
  color: var(--text);
  font-weight: 800;
  cursor:pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
  box-shadow: var(--shadow-soft);
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(107,215,255,.22);
  background: linear-gradient(180deg, rgba(58,160,255,.22), rgba(58,160,255,.10));
}
.btn:active{ transform: translateY(0); }
.btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
  filter: saturate(.85);
}
.btn:disabled:hover{ transform:none; }
.btn--ghost{
  background: rgba(255,255,255,.03);
  box-shadow: none;
}
.btn--ghost:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}
.btn--danger{
  background: linear-gradient(180deg, rgba(255,77,92,.22), rgba(255,77,92,.10));
  border-color: rgba(255,77,92,.28);
}
.btn--danger:hover{ border-color: rgba(255,77,92,.40); }

.btn--green{
  background: linear-gradient(180deg, rgba(56,255,160,.22), rgba(56,255,160,.10));
  border-color: rgba(56,255,160,.30);
}
.btn--green:hover{
  border-color: rgba(56,255,160,.46);
  background: linear-gradient(180deg, rgba(56,255,160,.28), rgba(56,255,160,.12));
}

.clubCta{ width: 100%; margin-top: 4px; }
.btn--sm{
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 12px;
}
.linkBtn{
  border: 0;
  background: transparent;
  color: var(--cyan);
  font-weight: 800;
  cursor:pointer;
  padding: 0;
}
.linkBtn:hover{ text-decoration: underline; }

/* ---------- Inputs ---------- */
.input, select, .select, textarea, .textarea{
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(5,8,22,.36);
  color: var(--text);
  outline:none;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.input:focus, select:focus, textarea:focus{
  border-color: rgba(107,215,255,.32);
  background: rgba(5,8,22,.46);
  box-shadow: var(--ring);
}
textarea{ min-height: 120px; resize: vertical; }

.label, label{
  display:block;
  font-weight: 800;
  color: rgba(234,241,255,.88);
  font-size: 12px;
  margin-bottom: 6px;
}
.hint, .small{
  color: var(--muted);
  font-size: 12px;
}
.small{ line-height: 1.45; }

/* Checkbox toggle style (settings) */
.switch{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  color: rgba(234,241,255,.88);
}
.switch input{
  appearance:none;
  -webkit-appearance:none;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  position: relative;
  cursor:pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  transition: background .14s ease, border-color .14s ease;
}
.switch input::after{
  content:"";
  position:absolute;
  left: 4px;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(234,241,255,.86);
  box-shadow: 0 10px 20px rgba(0,0,0,.35);
  transition: transform .14s ease, background .14s ease;
}
.switch input:checked{
  background: linear-gradient(90deg, rgba(58,160,255,.45), rgba(107,215,255,.30));
  border-color: rgba(107,215,255,.28);
}
.switch input:checked::after{
  transform: translateX(18px);
  background: #fff;
}

/* ---------- Utility ---------- */
.row{ display:flex; gap: 10px; align-items:center; }
.row--between{ justify-content: space-between; }
.center{ text-align:center; }
.hr{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 12px 0;
}
.grid{ display:grid; gap: 12px; }
.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px){
  .grid--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .grid--2, .grid--3{ grid-template-columns: 1fr; }
}

.formRow{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px){ .formRow{ grid-template-columns: 1fr; } }

.field{ margin: 10px 0; }
.fieldRow{ display:flex; gap: 18px; flex-wrap:wrap; }

/* ---------- Cards ---------- */
.card{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card__body{
  padding: 14px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.card__title{
  font-weight: 950;
  margin: 0 0 8px;
  letter-spacing: .2px;
}
.card__meta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

/* ---------- Hero blocks ---------- */
.hero{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(15,27,63,.78), rgba(11,20,48,.72));
  box-shadow: var(--shadow);
  padding: 18px 18px;
}
.hero--compact{ padding: 16px 16px; }
.h1{
  font-size: 24px;
  font-weight: 950;
  margin: 0;
  letter-spacing: .2px;
}
.h2{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
@media (max-width: 520px){
  .h1{ font-size: 20px; }
}

/* Banner hero (event view) */
.hero--banner{
  position: relative;
  overflow:hidden;
}
.hero__shade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 460px at 20% 35%, rgba(58,160,255,.20), transparent 55%),
    linear-gradient(180deg, rgba(5,8,22,.20), rgba(5,8,22,.82));
  pointer-events:none;
}
.hero__content{ position:relative; z-index: 1; }

/* Pills */
.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.52);
  color: rgba(234,241,255,.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 800;
}
.pill--accent{
  background: rgba(58,160,255,.14);
  border-color: rgba(107,215,255,.22);
}
.pill--warn{
  background: rgba(255,77,92,.10);
  border-color: rgba(255,77,92,.24);
}

/* ---------- Home hero ---------- */
.homeHero{
  position:relative;
  border-radius: 24px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
}
.homeHero__img{
  position:absolute; inset:0;
  background-position:center;
  background-size: cover;
  filter: saturate(1.02);
}
.homeHero__shade{
  position:absolute; inset:0;
  background:
    radial-gradient(760px 420px at 20% 35%, rgba(58,160,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(5,8,22,.18), rgba(5,8,22,.90));
}
.homeHero__body{
  position:relative;
  z-index: 1;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 14px;
  padding: 18px 18px;
}
@media (max-width: 920px){
  .homeHero__body{ grid-template-columns: 1fr; }
}
.homeHero__title{
  margin: 0;
  font-size: 28px;
  font-weight: 980;
  letter-spacing: .2px;
  text-shadow: 0 12px 32px rgba(0,0,0,.55);
}
.homeHero__sub{
  margin: 10px 0 0;
  color: rgba(234,241,255,.82);
  max-width: 60ch;
  line-height: 1.55;
}
@media (max-width: 520px){
  .homeHero__title{ font-size: 22px; }
}

/* Feature box (home right column) */
.featureBox{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(11,20,48,.62), rgba(11,20,48,.48));
  box-shadow: var(--shadow-soft);
  padding: 14px 14px;
}
.featureBox--live{
  border-color: rgba(107,215,255,.38);
  box-shadow: 0 0 0 1px rgba(107,215,255,.20), 0 18px 60px rgba(0,0,0,.45);
}

.kv{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,.10);
}
.kv:last-child{ border-bottom:0; }
.kv > span{ color: var(--muted); font-size: 12px; }
.kv > b{ font-weight: 950; }

.highlightList{ display:flex; flex-direction:column; gap: 8px; }
.highlightList .item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(5,8,22,.30);
}
.highlightList .name{ display:flex; align-items:center; gap: 8px; min-width:0; overflow:hidden; }
.highlightList .name .linkBtn{ white-space: normal; line-height: 1.15; }
.highlightList .val{ font-weight: 900; flex: 0 0 auto; white-space: nowrap; }

.trophy{ filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }

/* Live badge */
.liveBadge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(107,215,255,.42);
  background: linear-gradient(180deg, rgba(107,215,255,.28), rgba(58,160,255,.10));
  box-shadow: 0 0 0 1px rgba(107,215,255,.10), 0 0 18px rgba(58,160,255,.28);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.liveDot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(107,215,255,.85);
  animation: livePulse 1.25s ease-in-out infinite;
}
.pref-motion-off .liveDot{ animation: none; }

@keyframes livePulse{
  0%{ transform: scale(.95); opacity:.75; box-shadow: 0 0 10px rgba(107,215,255,.55); }
  50%{ transform: scale(1.45); opacity: 1; box-shadow: 0 0 20px rgba(107,215,255,.95); }
  100%{ transform: scale(.95); opacity:.75; box-shadow: 0 0 10px rgba(107,215,255,.55); }
}

/* ---------- Sections ---------- */
.sectionTitle{
  margin: 16px 0 10px;
}
.sectionTitle h3{
  margin: 0;
  font-weight: 950;
  letter-spacing: .2px;
}

/* ---------- Event cards ---------- */
.eventCards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .eventCards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 660px){
  .eventCards{ grid-template-columns: 1fr; }
}
.eventCard{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-soft);
  cursor:pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.eventCard:hover{
  transform: translateY(-2px);
  border-color: rgba(107,215,255,.20);
  box-shadow: 0 0 0 1px rgba(107,215,255,.10), var(--shadow);
}
.eventCard.is-active{
  border-color: rgba(107,215,255,.40);
  box-shadow: 0 0 0 1px rgba(107,215,255,.20), var(--shadow);
}
.eventCard__img{
  position:absolute; inset:0;
  background-position:center;
  background-size: cover;
  filter: saturate(1.02);
}
.eventCard__shade{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,8,22,.18), rgba(5,8,22,.92));
}
.eventCard__body{
  position:relative;
  z-index: 1;
  padding: 14px 14px;
}
.eventCard__name{
  font-weight: 950;
  letter-spacing:.2px;
}
.eventCard__meta{
  margin-top: 6px;
  display:flex;
  flex-direction:column;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}
.eventCard__cta{
  margin-top: 10px;
  display:flex;
  gap: 8px;
}

/* ---------- Rally thumb (home) ---------- */
.rallyThumb{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.20);
  box-shadow: var(--shadow-soft);
  cursor:pointer;
  min-height: 130px;
  transition: transform .16s ease, border-color .16s ease;
}
.rallyThumb:hover{
  transform: translateY(-2px);
  border-color: rgba(107,215,255,.22);
}

/* Active/ongoing rally: neon blue border */
.rallyThumb.is-active{
  border-color: rgba(0,220,255,.90);
  box-shadow:
    0 0 0 2px rgba(0,220,255,.30),
    0 0 34px rgba(0,220,255,.22),
    var(--shadow-soft);
}
.rallyThumb.is-active:hover{
  border-color: rgba(0,220,255,.88);
}
.rallyThumb__img{
  position:absolute; inset:0;
  background-position:center;
  background-size: cover;
}
.rallyThumb__shade{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,8,22,.16), rgba(5,8,22,.88));
}
.rallyThumb__top{
  position:relative;
  z-index: 1;
  padding: 12px 12px 0;
  display:flex;
  justify-content: space-between;
  gap: 10px;
}
.rallyThumb__name{
  font-weight: 950;
}
.rallyThumb__flag{
  opacity: .98;
  font-size: 12px;
  font-weight: 950;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(9,14,34,.55);
  color: rgba(234,241,255,.86);
  white-space: nowrap;
}
.rallyThumb__meta{
  position:relative;
  z-index: 1;
  margin-top: 8px;
  padding: 0 12px 12px;
  display:flex;
  flex-direction:column;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

/* ---------- Rally rail / tiles (event view) ---------- */
.rallyRail{
  display:flex;
  gap: 10px;
  overflow:auto;
  padding-bottom: 6px;
  scrollbar-width:none;
}
.rallyRail::-webkit-scrollbar{ display:none; }
.rallyTileNet{
  position:relative;
  min-width: 240px;
  border-radius: 20px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.22);
  cursor:pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.rallyTileNet:hover{ transform: translateY(-2px); border-color: rgba(107,215,255,.20); }
.rallyTileNet.is-active{
  border-color: rgba(107,215,255,.35);
  box-shadow: 0 0 0 1px rgba(107,215,255,.14);
}
.rallyTileNet__img{
  position:absolute; inset:0;
  background-position:center;
  background-size: cover;
  opacity:.95;
}
.rallyTileNet__body{
  position:relative;
  z-index: 1;
  padding: 12px 12px;
  background: linear-gradient(180deg, rgba(5,8,22,.10), rgba(5,8,22,.82));
}
.rallyTileNet__name{
  font-weight: 950;
  letter-spacing:.2px;
}
.rallyTileNet__meta{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

/* ---------- Tabs ---------- */
.tabs{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}
.tabs--scroll{
  overflow:auto;
  flex-wrap:nowrap;
  scrollbar-width:none;
}
.tabs--scroll::-webkit-scrollbar{ display:none; }
.tab{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(234,241,255,.84);
  border-radius: 999px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 900;
  font-size: 12px;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
  white-space: nowrap;
}
.tab:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); }
.tab.active{
  background: linear-gradient(90deg, rgba(58,160,255,.22), rgba(107,215,255,.14));
  border-color: rgba(107,215,255,.22);
  color: var(--text);
}

/* Segmented tabs (legal editor) */
.segTabs{
  display:flex;
  gap:8px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding:4px;
  border-radius: 999px;
}
.segTab{
  border:0;
  padding:8px 12px;
  border-radius: 999px;
  background: transparent;
  color: rgba(234,241,255,.78);
  cursor:pointer;
  font-weight: 900;
}
.segTab.active{
  background: linear-gradient(90deg, rgba(58,160,255,.26), rgba(107,215,255,.18));
  color: var(--text);
  border: 1px solid rgba(107,215,255,.22);
}

/* ---------- Table ---------- */
.tableWrap{
  border-radius: 18px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.20);
}
table{ width:100%; border-collapse: collapse; }
thead th{
  text-align:left;
  font-size: 12px;
  font-weight: 950;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(7,12,31,.90), rgba(7,12,31,.72));
  color: rgba(234,241,255,.86);
}
tbody td{
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
  color: rgba(234,241,255,.90);
}
tbody tr:hover{ background: rgba(255,255,255,.04); }
.pref-compact thead th{ padding: 8px 10px; }
.pref-compact tbody td{ padding: 8px 10px; font-size: 12px; }

.colTime, .colDiff1st, .colPenalty{ white-space: nowrap; }
.colPenalty{ text-align: right; }

.penHammer,.penClear{
  border:0;
  background: transparent;
  cursor:pointer;
  margin-left:6px;
  font-size: 13px;
  opacity:.85;
}
.penHammer:hover,.penClear:hover{ opacity:1; transform: translateY(-1px); }

/* Admin: exclude drivers from timing */
.drvExclude{
  border:0;
  background: rgba(255,255,255,.08);
  color: rgba(234,241,255,.95);
  cursor:pointer;
  margin-left:8px;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  opacity:.9;
}
.drvExclude:hover{ opacity:1; transform: translateY(-1px); }

.exList{ display:flex; flex-direction:column; gap:8px; }
.exRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.35);
}
.exRow__name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Points stack */
.ptsStack{
  margin-top: 6px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ptsLine{
  font-size: 12px;
  color: rgba(234,241,255,.78);
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.35);
  width: fit-content;
}

/* ---------- Modals ---------- */
.modalOverlay{
  position:fixed;
  inset:0;
  z-index: 100;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
}
.modal{
  width: min(860px, 100%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(15,27,63,.96), rgba(11,20,48,.94));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal__head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.modal__title{
  font-weight: 950;
  letter-spacing: .2px;
}
.modal__body{
  padding: 14px 14px;
  max-height: min(72vh, 780px);
  overflow:auto;
}

/* Larger modal for heavy admin panels (event management) */
.modal--xl{
  width: min(1440px, 100%);
}
.modal--xl .modal__body{
  max-height: min(90vh, 1120px);
}
@media (max-width: 720px){
  .modal--xl{ width: 100%; }
  .modal--xl .modal__body{ max-height: 92vh; }
}

/* ---------- Hamburger menu panel ---------- */
.menuPanel{ display:flex; flex-direction:column; gap: 14px; }
.menuUser{
  display:flex;
  flex-direction:column;
  gap: 4px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.22);
}
.menuUser__name{ font-weight: 950; letter-spacing:.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menuUser__meta{ font-size: 12px; color: rgba(234,241,255,.70); }

.menuGroup{ display:flex; flex-direction:column; gap: 8px; }
.menuGroup__title{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(234,241,255,.62);
  padding-left: 4px;
}
.menuList{ display:flex; flex-direction:column; gap: 8px; }

.menuItem{
  width:100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(234,241,255,.92);
  cursor:pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.menuItem:hover{ transform: translateY(-1px); background: rgba(255,255,255,.05); border-color: rgba(107,215,255,.18); }
.menuItem:active{ transform: translateY(0); }
.menuItem__icon{ width: 22px; display:grid; place-items:center; opacity:.95; }
.menuItem__label{ flex:1 1 auto; text-align:left; font-weight: 850; }
.menuItem__chev{ opacity:.55; font-size: 18px; line-height: 1; }

.menuFooter{ display:flex; gap: 10px; flex-wrap:wrap; justify-content:flex-end; }
kbd{
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(5,8,22,.35);
  color: rgba(234,241,255,.88);
}

/* ---------- Toast / Notifications (modern, stacked) ---------- */
.toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  width: min(420px, calc(100vw - 36px));
  display:flex;
  flex-direction: column;
  gap: 10px;
  pointer-events:none;
}

.toastItem{
  pointer-events:auto;
  display:grid;
  grid-template-columns: 42px 1fr 32px;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(15,27,63,.96), rgba(11,20,48,.92));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow:hidden;
  animation: toastIn .28s cubic-bezier(.2,.9,.2,1) both;
}
.toastItem.is-leaving{ animation: toastOut .22s ease both; }

.toastItem[data-kind="success"]{ border-color: rgba(78, 214, 140, .35); box-shadow: 0 0 0 1px rgba(78,214,140,.10), var(--shadow); }
.toastItem[data-kind="error"]{ border-color: rgba(255, 96, 96, .38); box-shadow: 0 0 0 1px rgba(255,96,96,.10), var(--shadow); }
.toastItem[data-kind="warning"]{ border-color: rgba(255, 186, 73, .38); box-shadow: 0 0 0 1px rgba(255,186,73,.10), var(--shadow); }
.toastItem[data-kind="info"]{ border-color: rgba(107,215,255,.28); box-shadow: 0 0 0 1px rgba(107,215,255,.10), var(--shadow); }

.toastItem__icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.30);
  font-size: 18px;
}
.toastItem__title{ font-weight: 950; letter-spacing:.2px; }
.toastItem__msg{ color: rgba(234,241,255,.70); font-size: 12px; line-height: 1.45; margin-top: 2px; }
.toastItem__action{
  margin-top: 8px;
  width: fit-content;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(58,160,255,.10);
  color: rgba(234,241,255,.92);
  font-weight: 900;
  border-radius: 12px;
  padding: 7px 10px;
  cursor:pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.toastItem__action:hover{ transform: translateY(-1px); background: rgba(58,160,255,.16); border-color: rgba(107,215,255,.20); }

.toastItem__close{
  border: 0;
  background: transparent;
  color: rgba(234,241,255,.72);
  cursor:pointer;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  transition: background .14s ease, transform .14s ease;
}
.toastItem__close:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); }

.toastItem__bar{
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transform-origin: left;
  animation: toastBar var(--ttl, 4200ms) linear both;
  opacity: .75;
}
.toastItem[data-kind="success"] .toastItem__bar{ background: linear-gradient(90deg, rgba(78,214,140,1), rgba(107,215,255,1)); }
.toastItem[data-kind="error"] .toastItem__bar{ background: linear-gradient(90deg, rgba(255,96,96,1), rgba(255,186,73,1)); }
.toastItem[data-kind="warning"] .toastItem__bar{ background: linear-gradient(90deg, rgba(255,186,73,1), rgba(107,215,255,1)); }

@keyframes toastIn{
  from{ opacity:0; transform: translateY(10px) scale(.98); filter: blur(3px); }
  to{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes toastOut{
  to{ opacity:0; transform: translateY(6px) scale(.98); filter: blur(2px); }
}
@keyframes toastBar{
  from{ transform: scaleX(1); }
  to{ transform: scaleX(0); }
}

/* ---------- Upload / admin tiles ---------- */
.drop{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.26);
  padding: 12px 12px;
}
.drop label{ margin-bottom: 6px; }
.uploadStatus{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.drop--loading{
  outline: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}
.drop--loading .uploadStatus{ color: rgba(234,241,255,.60); }
.drop--pulse{
  box-shadow: 0 0 0 1px rgba(110,220,255,.35), 0 0 16px rgba(110,220,255,.20);
  animation: uploadPulse 900ms ease-out 1;
}
@keyframes uploadPulse{
  0%{ transform: translateY(0); box-shadow: 0 0 0 1px rgba(110,220,255,.0), 0 0 0 rgba(110,220,255,.0); }
  40%{ transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(110,220,255,.55), 0 0 22px rgba(110,220,255,.35); }
  100%{ transform: translateY(0); box-shadow: 0 0 0 1px rgba(110,220,255,.35), 0 0 16px rgba(110,220,255,.20); }
}

/* ---------- Image previews ---------- */
.imgPreview{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.22);
  box-shadow: var(--shadow-soft);
}
.imgPreview__img{
  position:absolute; inset:0;
  background-position:center;
  background-size: cover;
}
.imgPreview__shade{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(5,8,22,.10), rgba(5,8,22,.85));
}
.imgPreview__label{
  position:relative;
  z-index: 1;
  padding: 12px 12px;
  font-weight: 950;
  color: rgba(234,241,255,.90);
}

/* ---------- Driver card modal ---------- */
.driverCard .box{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.20);
  padding: 12px 12px;
}

/* Medal colors */
.medal{ font-weight: 950; }
.gold{ color: #ffd76b; }
.silver{ color: #cfe1ff; }
.bronze{ color: #f2b68a; }

/* ---------- Legal pages ---------- */
.legalCard{
  max-width: 980px;
  margin: 18px auto 40px;
}
.legalBody h1{
  font-size: 26px;
  margin: 6px 0 12px;
}
.legalBody h2{
  font-size: 18px;
  margin: 16px 0 8px;
  color: rgba(234,241,255,.92);
}
.legalBody p{
  margin: 8px 0;
  color: rgba(234,241,255,.82);
  line-height: 1.55;
}
.legalBody ul{
  margin: 8px 0 10px 18px;
  color: rgba(234,241,255,.82);
}
.legalBody a{ color: var(--cyan); }
.legalEditor{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 900px){
  .legalEditor{ grid-template-columns: 1fr; }
}
.legalPreview{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 12px 12px;
  background: rgba(5,8,22,.25);
  overflow:auto;
  max-height: 55vh;
}

/* ---------- Footer ---------- */
.footer{
  border-top: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(7,12,31,.65), rgba(7,12,31,.88));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.footer__inner{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.footerLinks{ color: rgba(234,241,255,.70); margin-left: 8px; }
.footerLink{ color: rgba(234,241,255,.80); text-decoration:none; }
.footerLink:hover{ color: var(--cyan); text-decoration: underline; }

/* Responsive tweaks for header buttons on narrow screens */
@media (max-width: 520px){
  .brand{ min-width: 0; }
  #userBadge{ display:none; } /* avoid cramped header; userchip still shows name+role */
  .langBtn{ padding: 8px 9px; }
  .iconBtn{ width: 38px; height: 38px; }
}

@media (max-width: 480px){
  /* Extra-tight header on very small phones */
  .userchip{ max-width: 160px; padding: 7px 9px; }
  .userchip__name{ display:none; }
  .badge{ font-size: 11px; padding: 5px 9px; }
  .nav__link{ padding: 8px 9px; }
}

/* Make sure toast is not hidden behind safe area */
@supports (padding: max(0px)){
  .toast{ right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); }
  .modalOverlay{ padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  /* safe-area layout padding */
  .topbar{ padding-top: max(10px, env(safe-area-inset-top)); }
  .app{
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
  @media (max-width: 520px){
    .app{
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
    }
  }
  .footer__inner{
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}

.footer__left, .footer__right{ display:flex; align-items:center; gap:10px; }

.userName{ color: rgba(234,241,255,.68); font-weight: 850; font-size: 12px; max-width: 140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.kpi{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 10px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: rgba(5,8,22,.28); color: rgba(234,241,255,.88); }
.kpi > span{ color: var(--muted); font-size: 12px; }
.kpi > b{ font-weight: 950; }

/* ---------- Site stats (admin) ---------- */
.statsRows{ display:flex; flex-direction:column; gap:10px; }
.statRow{
  display:grid;
  grid-template-columns: 86px 1fr auto;
  gap: 10px;
  align-items:center;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(5,8,22,.22);
}
.statRow__m{ font-size: 12px; color: rgba(234,241,255,.82); }
.statRow__n{ font-weight: 1000; }
.statBar{ height: 10px; border-radius: 999px; overflow:hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.06); }
.statBar__fill{ height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(58,160,255,.65), rgba(107,215,255,.38)); }
@media (max-width: 520px){
  .statRow{ grid-template-columns: 78px 1fr auto; padding: 9px 9px; }
  .statRow__m{ font-size: 11px; }
}

/* ---------- Tiny helpers missing from legacy ---------- */
.brand__lang{ margin-top: 8px; }

.cal{ color: var(--muted); font-size: 12px; display:inline-flex; gap: 8px; align-items:center; }

.right{ text-align: right; }

.sectionTitle.ralliesHeader{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Table row entrance animation (uses --d delay) */
.rowEnter{
  animation: rowEnter .34s ease both;
  animation-delay: calc(var(--d, 0) * 12ms);
}
@keyframes rowEnter{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}
/* podium rows */
.top1{ background: rgba(255,215,0,.06); }
.top2{ background: rgba(207,225,255,.06); }
.top3{ background: rgba(242,182,138,.06); }



/* ==========================================================
   V5 — FULL PAGE REDESIGN (Broadcast Dock + Podium)
   - Big layout change for Event + Standings pages
   - Keeps all existing IDs/data-attributes for functionality
   ========================================================== */

/* Slightly “sharper” look (less pills) */
:root{
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
}

/* Global component sharpening (slightly more squared) */
.btn{ border-radius: 9px; padding: 10px 14px; }
.btn--sm{ border-radius: 8px; }
.nav__link{ border-radius: 12px; }
.langBtn{ border-radius: 12px; }
.input, select, textarea, .select, .textarea{ border-radius: 10px; }
.pill{ border-radius: 10px; }
.tab{ border-radius: 10px; }

.hideSm{ }
@media (max-width: 760px){
  .hideSm{ display:none !important; }
}

/* Page shell */
.page{ padding: 0; }

/* New header */
.pageHead{
  position: relative;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(11,20,48,.82), rgba(11,20,48,.62));
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.pageHead--event, .pageHead--standings{
  background-size: cover;
  background-position: center;
}
.pageHead__shade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 18% -10%, rgba(107,215,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(5,8,22,.40), rgba(5,8,22,.92)),
    linear-gradient(0deg, rgba(0,0,0,.26), transparent 55%);
  pointer-events:none;
}
.pageHead__inner{
  position: relative;
  padding: 18px 18px 16px;
}
@media (max-width: 520px){
  .pageHead__inner{ padding: 14px 12px 12px; }
}
.pageHead__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.pageHead__titleBlock{ min-width: 260px; }
.pageHead__actions{ display:flex; gap:10px; align-items:center; flex-wrap: wrap; }

.kicker{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 950;
  letter-spacing: .22em;
  font-size: 11px;
  text-transform: uppercase;
  color: rgba(234,241,255,.72);
}
.metaLine{
  color: rgba(234,241,255,.70);
  font-size: 13px;
  margin-top: 6px;
}

/* Surface (main content card) */
.surface{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(12,20,46,.78), rgba(10,16,34,.60));
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}
.surface--page{ margin-top: 14px; }
.surface__body{ padding: 16px; }
.surface__head{
  padding: 16px 16px 12px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.surface__title .h3{ margin:0; }
.surface__headRight{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Dock */
.dock{
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.44);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.dock--tight{ padding: 10px; }
.dock__row{
  display:flex;
  align-items:center;
  gap: 10px;
}
.dock__row--controls{
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
}
.dockLabel{
  min-width: 64px;
  font-weight: 900;
  color: rgba(234,241,255,.82);
  font-size: 12px;
}

/* Segmented (mode toggle) */
.segmented{
  display:flex;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.30);
  overflow:hidden;
}
.segBtn{
  border: 0;
  background: transparent;
  color: rgba(234,241,255,.78);
  padding: 10px 12px;
  font-weight: 900;
  cursor:pointer;
  transition: background .14s ease, color .14s ease;
}
.segBtn:hover{ background: rgba(255,255,255,.05); }
.segBtn.is-active{
  background: linear-gradient(180deg, rgba(58,160,255,.24), rgba(58,160,255,.10));
  color: rgba(234,241,255,.98);
}

/* Dock chips */
.dockStats{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items:center;
  flex: 1;
}
.statChip{
  display:inline-flex;
  align-items:baseline;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.26);
  white-space: nowrap;
}
.statChip__k{ color: rgba(234,241,255,.60); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.statChip__v{ font-weight: 950; font-size: 12px; color: rgba(234,241,255,.92); }

.dockSearch{ min-width: 260px; flex: 0 0 auto; }
@media (max-width: 620px){
  .dockSearch{ min-width: 100%; }
}
.input--dock{ background: rgba(5,8,22,.52); }

/* Rally picker */
.rallyPicker{
  display:flex;
  gap: 10px;
  overflow:auto;
  padding: 2px;
  scrollbar-width: none;
  flex: 1;
}
.rallyPicker::-webkit-scrollbar{ display:none; }

.rallyCard{
  display:flex;
  gap: 10px;
  align-items:center;
  min-width: 260px;
  max-width: 320px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.38);
  cursor:pointer;
  padding: 10px;
  color: inherit;
  text-align:left;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.rallyCard:hover{
  transform: translateY(-1px);
  border-color: rgba(107,215,255,.20);
  background: rgba(5,8,22,.30);
}
.rallyCard.is-active{
  border-color: rgba(107,215,255,.28);
  background: linear-gradient(180deg, rgba(58,160,255,.16), rgba(5,8,22,.26));
  box-shadow: 0 0 0 1px rgba(107,215,255,.12);
}
.rallyCard__img{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
}
.rallyCard__body{ display:flex; flex-direction:column; gap: 4px; min-width: 0; }
.rallyCard__name{ font-weight: 950; letter-spacing:.2px; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }
.rallyCard__meta{ font-size: 12px; color: rgba(234,241,255,.64); white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Stage rail */
.stageRail{
  display:flex;
  flex-wrap: nowrap;
  gap: 8px;
  flex: 1;
  overflow:auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.stageRail::-webkit-scrollbar{ display:none; }
.stageChip{
  display:flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.36);
  cursor:pointer;
  color: inherit;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
  min-width: 120px;
  scroll-snap-align: start;
}
.stageChip:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.16); background: rgba(5,8,22,.30); }
.stageChip.is-active{
  border-color: rgba(107,215,255,.28);
  background: linear-gradient(180deg, rgba(58,160,255,.16), rgba(5,8,22,.26));
  box-shadow: 0 0 0 1px rgba(107,215,255,.10);
}
.stageChip__top{ font-weight: 950; letter-spacing: .2px; }
.stageChip__sub{ font-size: 12px; color: rgba(234,241,255,.64); }

/* Mini podium (Event page) */
.podiumMini{
  padding: 14px 16px 8px;
  display:grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 10px;
}
@media (max-width: 820px){
  .podiumMini{
    grid-template-columns: 1fr;
    padding: 14px 12px 8px;
  }
}
.podiumMini__slot{ display:flex; flex-direction:column; gap: 8px; }
.podiumMini__card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.24);
  padding: 12px;
  min-height: 96px;
}
.podiumMini__slot--1 .podiumMini__card{
  background: linear-gradient(180deg, rgba(255,215,0,.14), rgba(5,8,22,.24));
  border-color: rgba(255,215,0,.18);
}
.podiumMini__slot--2 .podiumMini__card{
  background: linear-gradient(180deg, rgba(180,210,255,.12), rgba(5,8,22,.24));
  border-color: rgba(180,210,255,.18);
}
.podiumMini__slot--3 .podiumMini__card{
  background: linear-gradient(180deg, rgba(255,160,110,.12), rgba(5,8,22,.24));
  border-color: rgba(255,160,110,.18);
}
.podiumMini__place{ font-weight: 950; color: rgba(234,241,255,.92); font-size: 12px; }
.podiumMini__name{ margin-top: 6px; font-size: 14px; }
.podiumMini__meta{ margin-top: 2px; font-size: 12px; color: rgba(234,241,255,.62); }
.podiumMini__line{ margin-top: 10px; display:flex; gap: 8px; align-items:center; flex-wrap: wrap; }

.podiumMini__base{
  height: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

/* Table refresh */
.tableWrap--leaderboard{ padding: 10px 16px 16px; }
@media (max-width: 520px){
  .tableWrap--leaderboard{ padding: 10px 12px 12px; }
}
.leaderTable{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
}
.leaderTable thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(5,8,22,.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(234,241,255,.62);
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 12px 10px;
}
.leaderTable tbody td{
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: middle;
}
.leaderTable tbody tr:hover{
  background: rgba(255,255,255,.03);
}
.posPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 34px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  font-weight: 950;
}
.cellStack{ display:flex; flex-direction: column; gap: 2px; }
.cellStack--right{ align-items:flex-end; }
.cellLabel{ font-size: 11px; color: rgba(234,241,255,.56); text-transform: uppercase; letter-spacing: .06em; }
.cellValue{ font-weight: 950; }
.penTime{ color: var(--danger); font-weight: 950; }
.penTools{ margin-top: 6px; display:flex; gap:6px; justify-content:flex-end; }
.diffBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 10px;
  border-radius: 12px;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(90deg, rgba(255,77,92,.24), rgba(255,190,120,.18));
  color: rgba(255,235,230,.95);
}
.timeBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(107,215,255,.16);
  background: rgba(58,160,255,.10);
}
.ptsBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.psBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,190,120,.16);
  background: rgba(255,190,120,.08);
}

/* Standings podium */
.podium{
  padding: 16px;
  display:grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 900px){
  .podium{ grid-template-columns: 1fr; padding: 14px 12px; }
}
.podiumSlot{ display:flex; flex-direction:column; gap: 10px; }
.podiumCard{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.24);
  padding: 14px;
}
.podiumCard--first{
  background: linear-gradient(180deg, rgba(255,215,0,.16), rgba(5,8,22,.24));
  border-color: rgba(255,215,0,.22);
}
.podiumCard--second{
  background: linear-gradient(180deg, rgba(180,210,255,.14), rgba(5,8,22,.24));
  border-color: rgba(180,210,255,.20);
}
.podiumCard--third{
  background: linear-gradient(180deg, rgba(255,160,110,.14), rgba(5,8,22,.24));
  border-color: rgba(255,160,110,.20);
}
.podiumCard__top{ display:flex; align-items:center; justify-content:space-between; }
.podiumCard__place{ font-weight: 950; letter-spacing:.2px; }
.podiumCard__champ{ font-size: 18px; }
.podiumCard__name{ margin-top: 10px; font-size: 16px; }
.podiumCard__stats{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
}
.miniStat{
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.miniStat span{ color: rgba(234,241,255,.62); font-size: 12px; font-weight: 850; }
.miniStat b{ font-weight: 950; }

/* Rank list (4+) */
.rankSection{ padding: 14px 16px 16px; }
@media (max-width: 520px){
  .rankSection{ padding: 12px; }
}
.rankSection__head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; flex-wrap:wrap; margin-bottom: 10px; }

.rankList{ display:flex; flex-direction: column; gap: 10px; }
.rankItem{
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.22);
}
.rankItem:hover{ background: rgba(5,8,22,.28); border-color: rgba(255,255,255,.14); }
.rankItem__pos{ flex: 0 0 auto; }
.rankItem__main{ min-width: 0; flex: 1; }
.rankItem__name{ display:flex; align-items:center; gap: 8px; flex-wrap: wrap; }
.rankItem__meta{ margin-top: 8px; display:flex; gap: 8px; flex-wrap: wrap; }
.miniPill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  font-size: 12px;
}
.miniPill--pts{
  border-color: rgba(107,215,255,.18);
  background: rgba(58,160,255,.10);
}
.rankItem__breakdown{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,.10);
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.breakLine{
  color: rgba(234,241,255,.68);
  font-size: 12px;
}

/* ==========================================================
   Standings WOW redesign (V6)
   - Hero podium with neon/glow + aurora background
   - Keeps existing functionality (driver links, breakdown)
   ========================================================== */

.standingsWow{
  position:relative;
  padding: 16px;
  overflow:hidden;
}
@media (max-width: 520px){
  .standingsWow{ padding: 12px; }
}
.standingsWow__bg{
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(480px 260px at 18% 10%, rgba(107,215,255,.18), transparent 60%),
    radial-gradient(520px 320px at 78% 18%, rgba(58,160,255,.16), transparent 62%),
    radial-gradient(460px 240px at 50% 85%, rgba(255,186,73,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.22));
  filter: blur(8px) saturate(1.1);
  opacity: .95;
  pointer-events:none;
  transform: translateZ(0);
  animation: auroraMove 14s ease-in-out infinite alternate;
}
.pref-motion-off .standingsWow__bg{ animation: none; }
.standingsWow__header{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}

.podiumWow{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1.22fr 1fr;
  gap: 12px;
  padding: 6px 2px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 900px){
  .podiumWow{ grid-template-columns: 1fr; }
}

.pCard{
  position:relative;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(15,27,63,.72), rgba(11,20,48,.60));
  box-shadow: var(--shadow-soft);
  padding: 14px;
  overflow:hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pCard:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.18); }

/* Make 1st place pop */
.podiumWow .pCard:nth-child(2){
  transform: translateY(-8px);
  box-shadow: 0 0 0 1px rgba(255,215,0,.18), 0 22px 70px rgba(0,0,0,.55);
}
@media (max-width: 900px){
  .podiumWow .pCard:nth-child(2){ transform:none; }
}

.pCard__shine{
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18), transparent 70%);
  transform: translateX(-60%) rotate(0.001deg);
  opacity: .0;
  pointer-events:none;
}
.pCard:hover .pCard__shine{ opacity:.75; animation: shineSweep 900ms ease-out 1; }
.pref-motion-off .pCard__shine{ display:none; }

@keyframes auroraMove{
  from{ transform: translate3d(-6px,-4px,0) scale(1); }
  to{ transform: translate3d(8px,6px,0) scale(1.02); }
}
@keyframes shineSweep{
  from{ transform: translateX(-65%); }
  to{ transform: translateX(65%); }
}

.pCard__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.pCard__medal{ font-size: 20px; filter: drop-shadow(0 12px 22px rgba(0,0,0,.45)); }
.pCard__pos{
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(234,241,255,.72);
}
.pCard__champ{ font-size: 18px; }
.pCard__name{ margin-top: 10px; font-size: 17px; }
.pCard__points{
  margin-top: 10px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.pCard__points span{ color: rgba(234,241,255,.62); font-size: 12px; font-weight: 900; letter-spacing:.08em; }
.pCard__points b{ font-size: 18px; font-weight: 950; }
.pCard__stats{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pStat{
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.pStat span{ color: rgba(234,241,255,.62); font-size: 12px; font-weight: 850; }
.pStat b{ font-weight: 950; }

/* Medal variants */
.pCard--gold{ border-color: rgba(255,215,0,.22); box-shadow: 0 0 0 1px rgba(255,215,0,.10), var(--shadow-soft); }
.pCard--gold::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(420px 220px at 25% 10%, rgba(255,215,0,.18), transparent 60%);
  pointer-events:none;
}
.pCard--silver{ border-color: rgba(180,210,255,.22); box-shadow: 0 0 0 1px rgba(180,210,255,.10), var(--shadow-soft); }
.pCard--silver::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(420px 220px at 25% 10%, rgba(180,210,255,.16), transparent 60%);
  pointer-events:none;
}
.pCard--bronze{ border-color: rgba(255,160,110,.22); box-shadow: 0 0 0 1px rgba(255,160,110,.10), var(--shadow-soft); }
.pCard--bronze::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(420px 220px at 25% 10%, rgba(255,160,110,.16), transparent 60%);
  pointer-events:none;
}

.rankPanel{ position:relative; padding-top: 14px; }
.rankPanel__head{ display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; flex-wrap:wrap; margin-bottom: 10px; }
.rankList--wow{ gap: 12px; }
.rankItem--wow{
  border-radius: 18px;
  background: rgba(5,8,22,.26);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rankItem--wow:hover{ background: rgba(5,8,22,.32); border-color: rgba(107,215,255,.18); }

/* Optional soft badge style (header champion chip) */
.badge--soft{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}

/* Empty state */
.emptyState{
  padding: 26px 16px 30px;
  text-align:center;
}
.emptyState__icon{ font-size: 34px; }
.emptyState__title{ margin-top: 10px; font-weight: 950; font-size: 16px; }
.emptyState__sub{ margin-top: 6px; color: rgba(234,241,255,.66); font-size: 13px; }

/* Top-3 row highlights still supported (table) */
.leaderTable tbody tr.top1{ background: rgba(255,215,0,.06); }
.leaderTable tbody tr.top2{ background: rgba(207,225,255,.05); }
.leaderTable tbody tr.top3{ background: rgba(242,182,138,.05); }

/* ==========================================================
   V7 — Requested refinements
   - Active event neon border animation
   - Stage standings time/diff as clean text
   - New Driver modal (driverSheet)
   - New Overall Standings layout (standingsNeo)
   - Home LIVE FEED panel
   ========================================================== */

/* Active events: subtle neon border sweep */
.eventCard.is-active{ position: relative; }
.eventCard.is-active::before,
.eventCard.is-active::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
}
.eventCard.is-active::before{
  padding:2px;
  background: conic-gradient(from var(--spin, 0deg), rgba(107,215,255,0) 0%, rgba(107,215,255,.55) 14%, rgba(58,160,255,.22) 32%, rgba(170,99,255,.38) 52%, rgba(107,215,255,.30) 74%, rgba(107,215,255,0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .55;
  animation: spinBorder 4.8s linear infinite;
}
.eventCard.is-active::after{
  inset:-10px;
  background: conic-gradient(from var(--spin, 0deg), rgba(107,215,255,0) 0%, rgba(107,215,255,.35) 18%, rgba(58,160,255,.16) 38%, rgba(170,99,255,.22) 60%, rgba(107,215,255,.22) 78%, rgba(107,215,255,0) 100%);
  filter: blur(18px);
  opacity: .22;
  animation: spinBorder 4.8s linear infinite;
}
@keyframes spinBorder{ from{ --spin: 0deg; } to{ --spin: 360deg; } }
.pref-motion-off .eventCard.is-active::before,
.pref-motion-off .eventCard.is-active::after{ animation:none; }

/* Stage standings: keep time/diff as clean readable text */
.timeText{ font-weight: 950; color: rgba(234,241,255,.94); letter-spacing:.2px; }
.diffText{ font-weight: 850; color: rgba(255,150,158,.85); }

/* Home — LIVE FEED */
.liveFeed{
  padding: 12px;

  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.22);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  position: relative;
}
.liveFeed::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: radial-gradient(520px 220px at 18% 0%, rgba(107,215,255,.12), transparent 60%),
              radial-gradient(520px 220px at 78% 20%, rgba(58,160,255,.10), transparent 62%);
  pointer-events:none;
  opacity:.85;
}
.liveFeed__inner{ position:relative; padding: 12px 12px 12px; }
.liveFeed__head{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.liveFeed__list{ margin-top: 10px; display:flex; flex-direction:column; gap: 10px; max-height: 240px; overflow:auto; padding-right: 6px; }
.liveItem{ border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.16); border-radius: 14px; padding: 10px 10px; }
.liveItem__top{ display:flex; align-items:center; justify-content:space-between; gap: 8px; }
.liveTag{ display:inline-flex; align-items:center; gap: 8px; font-size: 11px; letter-spacing:.06em; text-transform: uppercase; color: rgba(234,241,255,.72); }
.liveTag b{ font-weight: 950; color: rgba(234,241,255,.92); }
.liveWhen{ color: rgba(234,241,255,.55); font-size: 11px; }
.liveText{ margin-top: 6px; color: rgba(234,241,255,.88); line-height: 1.45; }
.liveDel{ border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); color: rgba(234,241,255,.85); width: 34px; height: 34px; border-radius: 10px; cursor:pointer; }
.liveDel:hover{ border-color: rgba(255,77,92,.30); color: rgba(255,220,225,.95); }

/* Driver modal — full redesign */
.driverSheet{ display:flex; flex-direction:column; gap: 12px; }
.driverSheet__hero{
  position:relative;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(15,27,63,.76), rgba(5,8,22,.32));
  overflow:hidden;
  padding: 14px;
}
.driverSheet__glow{
  position:absolute;
  inset:-40px;
  background: radial-gradient(520px 260px at 20% 10%, rgba(107,215,255,.20), transparent 60%),
              radial-gradient(520px 260px at 78% 20%, rgba(58,160,255,.16), transparent 62%),
              radial-gradient(420px 220px at 50% 88%, rgba(255,186,73,.10), transparent 60%);
  filter: blur(10px);
  opacity: .85;
}
.driverSheet__corner{
  position:absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display:flex;
  align-items:center;
  gap: 8px;
  pointer-events:none;
}
.driverPassTag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  color: rgba(234,241,255,.92);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .35px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 18px 55px rgba(0,0,0,.20);
}
.driverPassTag--loading{
  border-color: rgba(255,255,255,.16);
  background: rgba(0,0,0,.12);
  color: rgba(234,241,255,.78);
}
.driverPassTag--none{
  border-color: rgba(255, 77, 92, .55);
  background: rgba(255, 77, 92, .12);
  color: rgba(255,235,238,.95);
  box-shadow: 0 0 26px rgba(255, 77, 92, .14);
}
.driverPassTag--single{
  border-color: rgba(58, 160, 255, .55);
  background: rgba(58, 160, 255, .14);
  color: rgba(235,246,255,.96);
  box-shadow: 0 0 26px rgba(58, 160, 255, .14);
}
.driverPassTag--annual{
  border-color: rgba(255, 215, 0, .55);
  background: rgba(255, 215, 0, .12);
  color: rgba(255,246,210,.96);
  box-shadow: 0 0 26px rgba(255, 215, 0, .12);
}
.driverSheet__top{ position:relative; display:flex; align-items:center; gap: 12px; }
.driverAvatar{
  width: 48px; height: 48px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 950;
  color: rgba(234,241,255,.95);
  border: 1px solid rgba(107,215,255,.22);
  background: radial-gradient(120% 120% at 30% 20%, rgba(107,215,255,.30), rgba(58,160,255,.12) 45%, rgba(0,0,0,.25));
  box-shadow: 0 0 0 1px rgba(58,160,255,.18), 0 16px 34px rgba(0,0,0,.45);
}
.driverSheet__head{ position:relative; }
.driverSheet__name{ font-weight: 950; font-size: 18px; letter-spacing:.2px; }
.driverSheet__sub{ margin-top: 2px; font-size: 12px; color: rgba(234,241,255,.68); }
.driverBadges{ margin-top: 8px; display:flex; gap: 8px; flex-wrap:wrap; }
.driverKpis{ position:relative; margin-top: 12px; display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
@media (max-width: 760px){ .driverKpis{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.dKpi{ border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.16); padding: 10px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dKpi span{ color: rgba(234,241,255,.62); font-size: 12px; font-weight: 850; }
.dKpi b{ font-weight: 950; font-size: 16px; }

.driverSheet__grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 12px; }
@media (max-width: 900px){ .driverSheet__grid{ grid-template-columns: 1fr; } }
.driverPanel{ border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(5,8,22,.22); box-shadow: var(--shadow-soft); padding: 14px; }
.driverPanel__title{ font-weight: 950; letter-spacing:.2px; }
.driverPanel__sub{ margin-top: 6px; color: rgba(234,241,255,.66); font-size: 12px; line-height: 1.45; }
.driverPanel__big{ margin-top: 10px; font-size: 22px; font-weight: 950; letter-spacing:.2px; }
.driverPanel__meta{ margin-top: 10px; display:flex; gap: 8px; flex-wrap: wrap; }
.driverPanel__list{ margin-top: 12px; border-top: 1px dashed rgba(255,255,255,.10); padding-top: 10px; display:flex; flex-direction:column; gap: 8px; }

/* Driver card V12 (cleaner, less confusing) */
.driverCardV12{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(10,16,40,.78), rgba(8,12,30,.62));
  box-shadow: 0 18px 55px rgba(0,0,0,.40);
  padding: 14px;
  position: relative;
  overflow:hidden;
}
.driverCardV12::before{
  content:"";
  position:absolute;
  inset:-120px -80px auto;
  height: 220px;
  background: radial-gradient(closest-side, rgba(107,215,255,.18), transparent 70%);
  opacity: .9;
  transform: rotate(12deg);
  pointer-events:none;
}
.driverCardV12__head{ position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; }
.driverCardV12__big{ position:relative; margin-top: 10px; font-size: 28px; font-weight: 950; letter-spacing: .2px; }
.driverMiniGrid{ position:relative; margin-top: 12px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
@media (max-width: 650px){ .driverMiniGrid{ grid-template-columns: 1fr; } }
.miniKpi{ border: 1px solid rgba(255,255,255,.10); border-radius: 16px; background: rgba(0,0,0,.12); padding: 10px; }
.miniKpi span{ display:block; font-size: 11px; color: rgba(234,241,255,.70); }
.miniKpi b{ display:block; margin-top: 4px; font-weight: 950; }

/* Driver: surface mix (admin-defined per rally) */
.miniPill--surface{
  border: 1px solid rgba(107,215,255,.22);
  background: rgba(0,0,0,.16);
}
.driverSurfaceBox{ position:relative; margin-top: 12px; border: 1px solid rgba(255,255,255,.10); border-radius: 16px; background: rgba(0,0,0,.10); padding: 12px; }
.driverSurfaceBar{ height: 10px; border-radius: 999px; overflow:hidden; display:flex; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.surfSeg{ height: 100%; }
.surfSeg--gravel{ background: linear-gradient(90deg, rgba(255,186,73,.20), rgba(255,186,73,.55)); }
.surfSeg--asphalt{ background: linear-gradient(90deg, rgba(107,215,255,.18), rgba(58,160,255,.58)); }
.surfSeg--snow{ background: linear-gradient(90deg, rgba(210,230,255,.18), rgba(210,230,255,.62)); }
.driverSurfaceRows{ margin-top: 10px; display:flex; flex-direction:column; gap: 6px; }
.surfRow{ display:flex; align-items:center; justify-content:space-between; gap: 10px; font-size: 12px; color: rgba(234,241,255,.74); }
.surfRow b{ color: rgba(234,241,255,.92); }
.driverDetails{ margin-top: 12px; position:relative; }
.driverDetails summary{ cursor:pointer; list-style:none; font-weight: 850; color: rgba(234,241,255,.86); }
.driverDetails summary::-webkit-details-marker{ display:none; }
.driverDetails summary::after{ content:"▾"; float:right; opacity:.7; }
.driverDetails[open] summary::after{ content:"▴"; }
.dLine{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.dLine__left{ color: rgba(234,241,255,.74); font-size: 12px; }
.dLine__right{ color: rgba(234,241,255,.92); font-weight: 950; }

/* Overall standings — new layout */
.standingsNeo{ position:relative; padding: 14px; overflow:hidden; }
.standingsNeo__bg{
  position:absolute; inset:-40px;
  background: radial-gradient(520px 260px at 18% 10%, rgba(107,215,255,.18), transparent 60%),
              radial-gradient(520px 280px at 78% 18%, rgba(58,160,255,.15), transparent 62%),
              radial-gradient(520px 280px at 50% 92%, rgba(255,186,73,.09), transparent 60%);
  filter: blur(10px);
  opacity: .95;
  pointer-events:none;
}
.standingsNeo__head{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

.podiumNeo{ position:relative; display:grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 12px; padding: 4px 2px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
@media (max-width: 900px){ .podiumNeo{ grid-template-columns: 1fr; } }
.podNeo{ position:relative; border-radius: 20px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(15,27,63,.70), rgba(11,20,48,.54)); box-shadow: var(--shadow-soft); padding: 14px; overflow:hidden; }
.podNeo__border{ position:absolute; inset:-2px; border-radius: inherit; padding:2px; background: conic-gradient(from var(--spin, 0deg), rgba(107,215,255,0), rgba(107,215,255,.45), rgba(170,99,255,.26), rgba(255,186,73,.18), rgba(107,215,255,0)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.55; animation: spinBorder 6.2s linear infinite; }
.pref-motion-off .podNeo__border{ animation:none; }
.podNeo--one{ transform: translateY(-8px); box-shadow: 0 0 0 1px rgba(255,215,0,.14), 0 28px 80px rgba(0,0,0,.55); }
@media (max-width: 900px){ .podNeo--one{ transform:none; } }
.podNeo__top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; position:relative; }
.podNeo__medal{ font-size: 22px; filter: drop-shadow(0 14px 26px rgba(0,0,0,.50)); }
.podNeo__pos{ font-weight: 950; letter-spacing:.14em; text-transform: uppercase; color: rgba(234,241,255,.70); font-size: 12px; }
.podNeo__crown{ filter: drop-shadow(0 12px 22px rgba(0,0,0,.55)); }
.podNeo__name{ margin-top: 10px; font-size: 16px; position:relative; }
.podNeo__points{ margin-top: 10px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.16); padding: 10px 12px; display:flex; align-items:baseline; justify-content:space-between; }
.podNeo__ptsVal{ font-size: 22px; font-weight: 950; letter-spacing:.2px; }
.podNeo__ptsLab{ font-size: 12px; font-weight: 900; color: rgba(234,241,255,.62); letter-spacing:.08em; }
.podNeo__stats{ margin-top: 10px; display:flex; gap: 8px; flex-wrap: wrap; }

.standingsNeo__list{ position:relative; margin-top: 14px; }
.standingsNeo__listHead{ display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.neoList{ display:flex; flex-direction:column; gap: 10px; }
.neoRow{ border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(5,8,22,.22); box-shadow: var(--shadow-soft); overflow:hidden; }
.neoRow__main{ display:grid; grid-template-columns: 58px 1fr 120px 38px; gap: 10px; align-items:center; padding: 12px 12px; }
@media (max-width: 760px){ .neoRow__main{ grid-template-columns: 54px 1fr 98px 38px; } }
.neoRow__who{ min-width: 0; }
.neoRow__name{ display:flex; align-items:center; gap: 8px; }
.trophy{ opacity:.95; }
.neoRow__meta{ margin-top: 4px; display:flex; gap: 8px; flex-wrap: wrap; }
.neoRow__pts{ text-align:right; }
.neoRow__ptsNum{ font-weight: 950; font-size: 18px; letter-spacing:.2px; }
.neoRow__ptsLab{ color: rgba(234,241,255,.62); font-size: 12px; font-weight: 900; letter-spacing:.08em; }
.neoRow__exp{ width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); color: rgba(234,241,255,.84); cursor:pointer; }
.neoRow__exp:hover{ border-color: rgba(107,215,255,.20); }
.neoRow__break{ padding: 10px 12px 12px; border-top: 1px dashed rgba(255,255,255,.10); display:flex; flex-direction:column; gap: 6px; }


/* Home LIVE FEED — class mapping (HTML) */
.feedList{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  max-height: 240px;
  overflow:auto;
  padding-right: 6px;
  position:relative;
}
.feedItem{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
  border-radius: 14px;
  padding: 10px 10px;
}
.feedItem__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  flex-wrap:wrap;
}
.feedStage{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(107,215,255,.18);
  background: rgba(58,160,255,.10);
  color: rgba(234,241,255,.92);
  font-weight: 950;
  font-size: 11px;
  letter-spacing: .06em;
}
.feedTypeTag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(234,241,255,.90);
  font-weight: 950;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}

.feedTypeTag__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
  font-size: 12px;
  transform: translateY(-.5px);
}

.feedTypeTag__txt{
  display:inline-flex;
  align-items:center;
  line-height: 1;
  position: relative;
  top: -0.5px;
}
.feedPath{
  color: rgba(234,241,255,.72);
  font-size: 11px;
  letter-spacing:.04em;
  flex: 1 1 auto;
  min-width: 160px;
}
.feedRally{
  color: rgba(234,241,255,.70);
  font-size: 11px;
  letter-spacing:.04em;
}
.feedTime{
  color: rgba(234,241,255,.55);
  font-size: 11px;
}
.feedDel{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(234,241,255,.85);
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor:pointer;
}
.feedDel:hover{
  border-color: rgba(255,77,92,.30);
  color: rgba(255,220,225,.95);
}
.feedItem__body{
  margin-top: 6px;
}
.feedDriver{
  color: rgba(234,241,255,.92);
  font-size: 12px;
}
.feedText{
  margin-top: 4px;
  color: rgba(234,241,255,.86);
  line-height: 1.45;
}

/* ==========================================================
   V10 — “E‑SPORTS CENTER” polish pack
   - bigger wow, clearer standings, more motion (no functionality removed)
   ========================================================== */

@keyframes v10Aurora {
  0%{ transform: translate3d(-4%, -2%, 0) rotate(0deg); filter: blur(60px); }
  50%{ transform: translate3d(4%, 2%, 0) rotate(4deg); filter: blur(72px); }
  100%{ transform: translate3d(-4%, -2%, 0) rotate(0deg); filter: blur(60px); }
}
@keyframes v10Spin {
  from{ --a:0deg; }
  to{ --a:360deg; }
}
@keyframes v10Scan {
  0%{ transform: translateY(-120%); opacity:.0; }
  15%{ opacity:.35; }
  55%{ opacity:.18; }
  100%{ transform: translateY(140%); opacity:0; }
}

/* Slightly tighter corners on buttons (user request) */
.btn, .segBtn, .stageChip, .rallyCard, .eventCard, .pill, .statChip{
  border-radius: var(--radius-md);
}
.btn.btn--sm{ border-radius: var(--radius-sm); }

/* Extra “broadcast” glow for LIVE badges */
.liveBadge{
  position: relative;
  box-shadow: 0 0 18px rgba(58,160,255,.22), 0 0 46px rgba(107,215,255,.10);
}
.liveBadge::after{
  content:"";
  position:absolute;
  inset:-10px -14px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(107,215,255,.18), transparent 60%);
  filter: blur(6px);
  opacity:.75;
  pointer-events:none;
}

/* Card tilt support (JS sets --rx/--ry) */
[data-tilt]{
  transform: translateZ(0);
  will-change: transform;
}
/* Tilt/hover animation removed (requested). We keep the attribute so markup doesn't change. */
@media (hover:hover){
  [data-tilt]:hover{ transform: none; }
}

/* ----------------------------------------------------------
   V10 Overall Standings layout
   ---------------------------------------------------------- */

.standingsPage--v10 .surface--page{ padding-top: 18px; }

.standV10{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.standV10__bg{
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(500px 420px at 18% 20%, rgba(107,215,255,.18), transparent 60%),
    radial-gradient(520px 420px at 70% 10%, rgba(58,160,255,.16), transparent 60%),
    radial-gradient(640px 520px at 40% 80%, rgba(255,106,42,.10), transparent 65%);
  animation: v10Aurora 12s ease-in-out infinite;
  opacity:.9;
}
.standV10__grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
}
@media (max-width: 980px){
  .standV10__grid{ grid-template-columns: 1fr; }
}
.standV10__side{ display:flex; flex-direction:column; gap: 14px; }
.standV10__main{ display:flex; flex-direction:column; gap: 14px; }

.glassCard{
  position:relative;
  background: linear-gradient(180deg, rgba(10,18,45,.80), rgba(6,10,22,.66));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.glassCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    conic-gradient(from var(--a, 0deg),
      rgba(107,215,255,.55),
      rgba(58,160,255,.28),
      rgba(255,255,255,.10),
      rgba(107,215,255,.55));
  opacity:.35;
  animation: v10Spin 7s linear infinite;
}
.glassCard::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius: calc(var(--radius-lg) - 2px);
  background: linear-gradient(180deg, rgba(12,20,52,.92), rgba(6,10,22,.68));
}
.glassCard > *{ position:relative; z-index:1; }
.glassCard--pad{ padding: 14px; }

.glassCard__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.glassCard__head--table{ align-items:center; }

.statGrid{
  display:grid;
  gap: 10px;
}
.statGrid--3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 520px){
  .statGrid--3{ grid-template-columns: 1fr; }
}
.statBox{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 10px 12px;
}
.statBox__k{
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(234,241,255,.62);
}
.statBox__v{
  margin-top: 6px;
  font-weight: 950;
  font-size: 18px;
  color: rgba(234,241,255,.95);
}

/* Podium cards */
.podiumV10{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  align-items:end;
}
@media (max-width: 520px){
  .podiumV10{ grid-template-columns: 1fr; }
}

.podV10{
  position:relative;
  border-radius: 18px;
  padding: 12px 12px 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.12);
  overflow:hidden;
  min-height: 132px;
}
.podV10__glow{
  position:absolute;
  inset:-40px;
  background: radial-gradient(circle at 30% 20%, rgba(107,215,255,.24), transparent 58%),
              radial-gradient(circle at 80% 80%, rgba(58,160,255,.16), transparent 60%);
  filter: blur(22px);
  opacity:.65;
}
.podV10__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.podV10__medal{ font-size: 18px; }
.podV10__pos{
  font-weight: 950;
  letter-spacing: .06em;
  color: rgba(234,241,255,.82);
  margin-left:auto;
}
.podV10__crown{
  margin-left: 8px;
  filter: drop-shadow(0 0 10px rgba(255,196,0,.20));
}
.podV10__name{
  font-size: 13px;
  color: rgba(234,241,255,.96);
  margin-bottom: 10px;
  line-height: 1.2;
}
.podV10__pts{
  display:flex;
  align-items:baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.podV10__ptsNum{
  font-weight: 950;
  font-size: 22px;
  color: rgba(234,241,255,.96);
}
.podV10__ptsLab{
  font-size: 11px;
  color: rgba(234,241,255,.64);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.podV10__meta{ display:flex; gap: 6px; flex-wrap: wrap; }

.podV10--one{
  transform: translateY(-6px);
  border-color: rgba(107,215,255,.26);
  box-shadow: 0 18px 55px rgba(0,0,0,.35), 0 0 30px rgba(107,215,255,.10);
}
.podV10--one .podV10__medal{
  filter: drop-shadow(0 0 14px rgba(255,210,90,.20));
}
.podV10--two{ opacity:.96; }
.podV10--three{ opacity:.92; }

.podV10__shine{
  content:"";
  position:absolute;
  inset:-30px;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.18) 45%, transparent 65%);
  transform: translateX(-120%) rotate(8deg);
  animation: v10Scan 4.6s ease-in-out infinite;
  pointer-events:none;
}

/* Standings table */
.standTableWrap{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow:auto;
  background: rgba(0,0,0,.10);
}
.standTable{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px;
}
@media (max-width: 900px){
  .standTable{ min-width: 680px; }
}
@media (max-width: 650px){
  .standTable{ min-width: 620px; }
}
.standTable th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(4,8,18,.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 12px 12px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(234,241,255,.70);
}
.standTable td{
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 12px 12px;
  vertical-align: middle;
}
.standRow:hover td{
  background: rgba(107,215,255,.06);
}
.standDriver{ display:flex; align-items:center; gap:8px; }
.standMeta{ margin-top: 6px; display:flex; gap:6px; flex-wrap:wrap; }
.ptsBig{ font-size: 18px; font-weight: 950; }
.gapPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(234,241,255,.84);
  font-weight: 850;
}
.rowExp{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(234,241,255,.88);
  width: 36px;
  height: 36px;
  border-radius: 12px;
  cursor: pointer;
}
.rowExp:hover{
  border-color: rgba(107,215,255,.32);
  background: rgba(58,160,255,.14);
}

.standBreak td{
  padding: 0 12px 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.breakBox{
  margin-top: 6px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 10px 12px;
}
.breakLine{
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255,255,255,.10);
  color: rgba(234,241,255,.86);
}
.breakLine:last-child{ border-bottom:none; }

/* Top3 highlight rows only in Overall standings (ok) */
.standRow.is-top1 td:first-child{ box-shadow: inset 3px 0 0 rgba(255, 210, 90, .30); }
.standRow.is-top2 td:first-child{ box-shadow: inset 3px 0 0 rgba(210, 230, 255, .30); }
.standRow.is-top3 td:first-child{ box-shadow: inset 3px 0 0 rgba(232, 170, 120, .28); }

/* Reuse hideSm already present (safety) */

/* ==========================================================
   V12 ARENA — Full page redesign layer
   (New landing hero, panels, clearer standings, stronger esports vibe)
   ========================================================== */

.landingV12{ display:block; }

/* Full-bleed hero */
.heroV12{
  position: relative;
  margin: 0 calc(50% - 50vw);
  padding: 26px 0 20px;
  overflow:hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.heroV12__bg{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 420px at 18% 20%, rgba(58,160,255,.32), transparent 60%),
    radial-gradient(760px 480px at 82% 18%, rgba(107,215,255,.22), transparent 60%),
    radial-gradient(760px 540px at 66% 92%, rgba(255,106,42,.14), transparent 62%),
    linear-gradient(180deg, rgba(7,12,31,.30), rgba(7,12,31,.80));
  filter: saturate(1.2);
  transform: translateZ(0);
}
.heroV12__bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--hero);
  background-size: cover;
  background-position: center;
  opacity: .36;
  filter: blur(0px) saturate(1.05) contrast(1.05);
  transform: scale(1.06);
}
.heroV12__shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(5,8,22,.92) 0%, rgba(5,8,22,.56) 54%, rgba(5,8,22,.86) 100%),
    radial-gradient(900px 420px at 50% -10%, rgba(107,215,255,.10), transparent 60%);
}
.heroV12__inner{
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 18px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
}
@media (max-width: 980px){
  .heroV12__inner{ grid-template-columns: 1fr; }
}

.heroV12__kickers{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.heroV12__title{
  margin: 12px 0 6px;
  font-size: 40px;
  line-height: 1.03;
  font-weight: 950;
  letter-spacing: .2px;
  text-shadow: 0 12px 40px rgba(0,0,0,.55);
}
@media (max-width: 520px){ .heroV12__title{ font-size: 30px; } }
.heroV12__sub{ margin: 0; color: rgba(234,241,255,.78); max-width: 64ch; }

.heroV12__cta{ margin-top: 12px; display:flex; gap:10px; flex-wrap:wrap; }
.heroV12__meta{ margin-top: 12px; display:flex; gap:8px; flex-wrap:wrap; }
.metaChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(9,14,34,.58);
  color: rgba(234,241,255,.86);
}
.metaChip b{ font-weight: 900; }

.heroV12__progress{ margin-top: 12px; max-width: 520px; }
.progressLine{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
.progressLine span{
  display:block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(58,160,255,.85), rgba(107,215,255,.75), rgba(255,106,42,.38));
  box-shadow: 0 0 24px rgba(58,160,255,.38);
  border-radius: 999px;
  transition: width .35s ease;
}

/* Panels */
.panelV12{
  position: relative;
  border-radius: calc(var(--radius-lg) + 2px);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(10,16,40,.82), rgba(8,12,30,.72));
  box-shadow: 0 18px 55px rgba(0,0,0,.48);
  overflow:hidden;
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform .15s ease, border-color .2s ease;
}
.panelV12::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(400px 160px at 20% 0%, rgba(107,215,255,.16), transparent 60%);
  opacity: .9;
  pointer-events:none;
}
.panelV12__head{
  position: relative;
  padding: 14px 14px 10px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
}
.panelV12__title{ font-weight: 950; letter-spacing: .2px; }
.panelV12__body{ position: relative; padding: 10px 14px 14px; }
.panelV12--feed::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: conic-gradient(from 180deg, rgba(58,160,255,.18), rgba(107,215,255,.18), rgba(255,106,42,.10), rgba(58,160,255,.18));
  opacity:.28;
  filter: blur(18px);
  pointer-events:none;
}

/* Home: feed sits under Event Progress, keep it compact on desktop/mobile */
.panelV12--inlineFeed{ margin-top: 12px; max-width: 520px; }
.feedList--inline{ max-height: 240px; }


.emptyHint{ color: rgba(234,241,255,.72); padding: 10px 0; }

.feedList--v12{ display:flex; flex-direction:column; gap:10px; max-height: 320px; overflow:auto; padding-right: 4px; }
.feedItem--v12{ border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,.10); background: rgba(6,10,24,.45); }
.feedItem--v12 .feedItem__top{ padding: 10px 10px 6px; }
.feedItem--v12 .feedItem__body{ padding: 0 10px 10px; }


.feedItem--v12{ transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.feedItem--v12.feedItem--pinned{ box-shadow: 0 0 0 1px rgba(107,215,255,.18), 0 18px 60px rgba(0,0,0,.45); }
.feedItem--v12.feedItem--update{ background: rgba(6,10,24,.45); }
.feedItem--v12.feedItem--info{ background: linear-gradient(180deg, rgba(58,160,255,.14), rgba(6,10,24,.42)); border-color: rgba(107,215,255,.16); }
.feedItem--v12.feedItem--quote{ background: linear-gradient(180deg, rgba(170,99,255,.14), rgba(6,10,24,.42)); border-color: rgba(170,99,255,.18); }
.feedItem--v12.feedItem--incident{ background: linear-gradient(180deg, rgba(255,90,90,.16), rgba(6,10,24,.42)); border-color: rgba(255,120,120,.20); }
.feedItem--v12.feedItem--incident .feedStage{ color: rgba(255,190,190,.92); }

/* Compact LIVE FEED cards (less wide / less clunky) */
.panelV12--inlineFeed{ max-width: 620px; }
@media (max-width: 980px){
  .panelV12--inlineFeed{ max-width: 100%; }
}

/* Home: Rally Live (YouTube embed) */
.panelV12--inlineFrame{ margin-top: 12px; max-width: 620px; }
@media (max-width: 980px){
  .panelV12--inlineFrame{ max-width: 100%; }
}
.liveFrame{
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  aspect-ratio: 16/9;
}
.liveFrame__iframe{
  width: 100%;
  height: 100%;
  display:block;
  border:0;
}
.liveFrame__twitch{ background: #000; }
.liveFrame__twitch iframe{ width:100% !important; height:100% !important; display:block; border:0; }
.liveFrame__placeholder{
  height: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 18px;
  text-align:center;
  color: rgba(234,241,255,.86);
}
.liveFrame__placeholder.hasPoster{
  position: relative;
  background-size: cover;
  background-position: center;
}
.liveFrame__placeholder.hasPoster::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.75));
}
.liveFrame__placeholder.hasPoster > *{
  position: relative;
}
.liveFrame__phIcon{ font-size: 28px; }
.liveFrame__phTitle{ font-weight: 950; letter-spacing: .2px; }
.liveFrame__actions{ display:flex; gap: 10px; margin-top: 10px; flex-wrap:wrap; }

/* Home: Curated highlights list inside the right panel */
.liveHLList--v12{ display:flex; flex-direction:column; gap:10px; }
.liveHLItem{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(6,10,24,.45);
}
.liveHLIcon{
  width: 32px;
  height: 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  flex: 0 0 auto;
}
.liveHLMain{ min-width: 0; }
.liveHLTitle{ font-weight: 950; line-height: 1.15; }
.liveHLText{ opacity: .86; }
.liveHLLink{
  display:inline-flex;
  margin-top: 6px;
  font-weight: 900;
  color: rgba(107,215,255,.92);
  text-decoration:none;
}
.liveHLLink:hover{ text-decoration: underline; }

/* Admin: Live Highlights editor */
.liveHLAdmin{ margin-top: 10px; display:flex; flex-direction:column; gap: 10px; }
.liveHLAdminRow{
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 10px;
}

.feedItem--compact .feedItem__top{
  flex-wrap: nowrap;
  gap: 8px;
}
.feedItem--compact .feedTypeTag{ padding: 5px 10px; font-size: 10px; line-height: 1; }
.feedItem--compact .feedTypeTag__icon{ font-size: 11px; }
.feedItem--compact .feedPath{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.feedItem--compact .feedTime{ white-space: nowrap; }
.feedItem--compact .feedItem__top{ padding: 8px 10px 6px; }
.feedItem--compact .feedItem__body{ padding: 0 10px 10px; }
.feedItem--compact .feedLine{
  display:flex;
  gap: 8px;
  align-items: baseline;
}
.feedItem--compact .feedLine__driver{ color: rgba(234,241,255,.95); font-weight: 950; }
.feedItem--compact .feedSep{ color: rgba(234,241,255,.55); }
.feedItem--compact .feedMsg{
  color: rgba(234,241,255,.86);
  line-height: 1.35;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* Phones: allow the feed header row to wrap so nothing forces a wider layout */
@media (max-width: 520px){
  .feedItem--compact .feedItem__top{ flex-wrap: wrap; }
  .feedItem--compact .feedPath{ white-space: normal; }
}

.highlightList--v12 .item{ border-radius: var(--radius-md); }
.rankTag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(9,14,34,.60);
  color: rgba(234,241,255,.86);
  font-size: 12px;
  margin-right: 8px;
}

/* Home: Featured event Overall Top 3 — medal colored names */
.highlightList--v12 .item.medal{ border: 1px solid rgba(255,255,255,.10); }
.highlightList--v12 .item.medal--1{ box-shadow: 0 0 0 1px rgba(255,213,94,.20), 0 16px 40px rgba(0,0,0,.35); }
.highlightList--v12 .item.medal--2{ box-shadow: 0 0 0 1px rgba(208,216,235,.16), 0 16px 40px rgba(0,0,0,.35); }
.highlightList--v12 .item.medal--3{ box-shadow: 0 0 0 1px rgba(214,160,107,.18), 0 16px 40px rgba(0,0,0,.35); }
.highlightList--v12 .item.medal--1 .linkBtn{ color: rgba(255,219,120,.98); }
.highlightList--v12 .item.medal--2 .linkBtn{ color: rgba(220,229,246,.98); }
.highlightList--v12 .item.medal--3 .linkBtn{ color: rgba(230,186,140,.98); }
.highlightList--v12 .item.medal--1 .rankTag{ border-color: rgba(255,213,94,.28); }
.highlightList--v12 .item.medal--2 .rankTag{ border-color: rgba(208,216,235,.22); }
.highlightList--v12 .item.medal--3 .rankTag{ border-color: rgba(214,160,107,.26); }

.sectionTitle--v12{ margin-top: 18px; }
.eventCards--v12{ gap: 14px; }

/* Active event — subtle neon border sweep */
.eventCard.is-active{
  position: relative;
}
.eventCard.is-active::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: conic-gradient(from 90deg, rgba(58,160,255,.0), rgba(107,215,255,.45), rgba(58,160,255,.0), rgba(255,106,42,.22), rgba(58,160,255,.0));
  animation: neonSweep 5.5s linear infinite;
  filter: blur(.0px);
  opacity: .95;
  z-index: 0;
}
.eventCard.is-active::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0,0,0,.14);
  z-index: 0;
}
.eventCard > *{ position: relative; z-index: 1; }
@keyframes neonSweep{ to{ transform: rotate(360deg); } }

/* Rally thumbs */
.rallyThumb--v12{ border-radius: calc(var(--radius-lg) + 2px); }

/* Bigger CTA buttons */
.btn--xl{ padding: 12px 16px; border-radius: var(--radius-md); font-weight: 900; }
.btn--xl.btn--ghost{ background: rgba(255,255,255,.06); }

/* Make stage mode time/diff plain (no badge feel) */
.timeText{ color: rgba(234,241,255,.96); font-weight: 900; }
.diffText{ color: rgba(255,140,140,.78); font-weight: 800; }

/* Reduce overall “pill” roundness globally */
.btn, .badge, .pill, .posPill, .metaChip{ border-radius: var(--radius-md); }

/* Standings V12 */
.standingsPage--v12 .surface--page{ margin-top: -16px; }
.standHeroV12{
  position: relative;
  margin: 0 calc(50% - 50vw);
  padding: 22px 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.standHeroV12__bg{
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 420px at 18% 20%, rgba(58,160,255,.28), transparent 60%),
    radial-gradient(760px 480px at 82% 18%, rgba(107,215,255,.20), transparent 60%),
    linear-gradient(180deg, rgba(7,12,31,.26), rgba(7,12,31,.86));
}
.standHeroV12__bg::before{ content:""; position:absolute; inset:0; background-image: var(--hero); background-size: cover; background-position: center; opacity:.28; transform: scale(1.05); }
.standHeroV12__shade{ position:absolute; inset:0; background: linear-gradient(90deg, rgba(5,8,22,.92) 0%, rgba(5,8,22,.54) 55%, rgba(5,8,22,.86) 100%); }
.standHeroV12__inner{
  position:relative;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 18px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}
.standHeroV12__title{ font-size: 34px; font-weight: 950; margin: 6px 0 0; }
.standHeroV12__sub{ color: rgba(234,241,255,.74); margin: 6px 0 0; }

.standGridV12{ display:grid; grid-template-columns: 1fr; gap: 12px; }

.podiumV12{
  position: relative;
  display:grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 12px;
  align-items:end;
  padding: 12px;
}
.podiumV12::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--radius-lg) + 2px);
  background: conic-gradient(from 180deg, rgba(107,215,255,.22), rgba(58,160,255,.18), rgba(255,106,42,.12), rgba(107,215,255,.22));
  opacity: .55;
  filter: blur(10px);
  pointer-events:none;
}
.podiumV12__slot{ position: relative; z-index: 1; }
.podiumV12__slot--1{ grid-column: 2; }
.podiumV12__slot--2{ grid-column: 1; }
.podiumV12__slot--3{ grid-column: 3; }
.podiumV12__base{
  grid-column: 1 / -1;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(107,215,255,.0), rgba(107,215,255,.28), rgba(58,160,255,.18), rgba(255,106,42,.12), rgba(107,215,255,.0));
  box-shadow: 0 0 26px rgba(58,160,255,.28), 0 0 40px rgba(107,215,255,.18);
  opacity: .9;
}
.podiumCardV12{
  position: relative;
  border-radius: calc(var(--radius-lg) + 2px);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(10,16,40,.84), rgba(8,12,30,.72));
  overflow:hidden;
  padding: 14px;
  box-shadow: 0 18px 55px rgba(0,0,0,.48);
}

/* Podium place borders (static neon, no spinning) */
.podiumCardV12--1{ border-color: rgba(255,215,0,.58); box-shadow: 0 0 0 1px rgba(255,215,0,.24), 0 0 0 3px rgba(255,215,0,.08), 0 0 44px rgba(255,215,0,.22), 0 18px 55px rgba(0,0,0,.48); }
.podiumCardV12--2{ border-color: rgba(210,230,255,.52); box-shadow: 0 0 0 1px rgba(210,230,255,.22), 0 0 0 3px rgba(210,230,255,.07), 0 0 40px rgba(210,230,255,.18), 0 18px 55px rgba(0,0,0,.48); }
.podiumCardV12--3{ border-color: rgba(255,180,130,.48); box-shadow: 0 0 0 1px rgba(255,180,130,.20), 0 0 0 3px rgba(255,180,130,.06), 0 0 38px rgba(255,180,130,.16), 0 18px 55px rgba(0,0,0,.48); }
.podiumCardV12--1::after{ background: radial-gradient(closest-side, rgba(255,215,0,.18), transparent 70%); }
.podiumCardV12--2::after{ background: radial-gradient(closest-side, rgba(210,230,255,.16), transparent 70%); }
.podiumCardV12--3::after{ background: radial-gradient(closest-side, rgba(255,180,130,.16), transparent 70%); }
.podiumCardV12::after{
  content:"";
  position:absolute;
  inset:-120px -80px auto;
  height: 200px;
  background: radial-gradient(closest-side, rgba(107,215,255,.22), transparent 70%);
  opacity: .9;
  transform: rotate(18deg);
  pointer-events:none;
}
.podiumCardV12__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.podiumCardV12__badge{ display:flex; gap:8px; align-items:center; }
.podiumCardV12__pos{ font-weight: 950; letter-spacing: .2px; }
.podiumCardV12__medal{ filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.podiumCardV12__name{ margin-top: 10px; font-size: 16px; }
.podiumCardV12__pts{ margin-top: 10px; display:flex; align-items:baseline; gap:10px; }
.podiumCardV12__ptsNum{ font-weight: 950; font-size: 28px; }
.podiumCardV12__ptsLab{ color: rgba(234,241,255,.70); font-size: 12px; letter-spacing: .2px; }
.podiumCardV12__meta{ margin-top: 10px; display:flex; gap:8px; flex-wrap:wrap; }

.podiumV12__slot--1 .podiumCardV12{ transform: translateY(-8px); }

/* Mobile readability for standings */
@media (max-width: 560px){
  .standHeroV12{ padding: 16px 0 12px; }
  .standHeroV12__inner{ padding: 0 12px; }
  .standHeroV12__title{ font-size: 24px; line-height: 1.1; }
  .standHeroV12__sub{ font-size: 12px; }
  .standHeroV12__controls{ width:100%; }
  .standHeroV12__controls .row{ flex-direction: column; align-items: stretch; }
  .standHeroV12__controls .btn{ width:100%; justify-content:center; }

  .podiumV12{ grid-template-columns: 1fr; }
  .podiumV12__slot--1,
  .podiumV12__slot--2,
  .podiumV12__slot--3{ grid-column: auto; }
  .podiumV12__slot--1 .podiumCardV12{ transform: none; }
  .podiumCardV12__ptsNum{ font-size: 24px; }
}

/* Auth modal V12 */
.authV12{ display:grid; grid-template-columns: 1fr 1.2fr; gap: 12px; }
.authV12__brand{
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(58,160,255,.16), rgba(0,0,0,.12));
  border: 1px solid rgba(255,255,255,.10);
  position: relative;
  overflow:hidden;
}
.authV12__brand::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(650px 260px at 20% 25%, rgba(107,215,255,.26), transparent 60%),
              radial-gradient(520px 240px at 80% 20%, rgba(255,106,42,.14), transparent 60%);
  filter: blur(16px);
  opacity: .9;
  pointer-events:none;
}
.authV12__brandInner{ position: relative; z-index: 1; }
.authV12__logo{ width: 44px; height: 44px; border-radius: 14px; display:grid; place-items:center; font-weight: 950; letter-spacing:.3px;
  background: linear-gradient(135deg, rgba(107,215,255,.25), rgba(58,160,255,.10));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}
.authV12__title{ margin-top: 10px; font-size: 18px; font-weight: 950; }
.authV12__sub{ margin-top: 6px; color: rgba(234,241,255,.76); font-size: 12px; line-height: 1.4; }
.authV12__perks{ margin: 12px 0 0; padding: 0; list-style: none; display:grid; gap: 8px; }
.authV12__perks li{ display:flex; gap:8px; align-items:flex-start; color: rgba(234,241,255,.82); font-size: 12px; }
.authV12__perks li .dot{ width: 10px; height: 10px; border-radius: 999px; margin-top: 4px;
  background: radial-gradient(circle at 30% 30%, rgba(107,215,255,.95), rgba(58,160,255,.15));
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 0 18px rgba(107,215,255,.22);
}

.authV12__form{
  border-radius: 18px;
  padding: 14px;
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.10);
}
.authV12__tabs{ display:flex; gap: 8px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.authV12__tab{ flex:1; border-radius: 12px; padding: 10px 12px; font-weight: 850; font-size: 12px; letter-spacing:.2px;
  background: transparent; color: rgba(234,241,255,.80); border: none; cursor: pointer;
}
.authV12__tab.is-active{ background: rgba(58,160,255,.18); color: rgba(255,255,255,.96); box-shadow: inset 0 0 0 1px rgba(107,215,255,.16), 0 10px 26px rgba(0,0,0,.25); }

.authV12__fields{ margin-top: 12px; display:grid; gap: 10px; }
.authV12__fields label{ font-size: 11px; color: rgba(234,241,255,.70); display:block; margin-bottom: 6px; }
.authV12__actions{ margin-top: 12px; display:flex; justify-content:space-between; align-items:center; gap: 10px; flex-wrap:wrap; }
.authV12__hint{ margin-top: 12px; font-size: 11px; color: rgba(234,241,255,.70); }

@media (max-width: 720px){
  .authV12{ grid-template-columns: 1fr; }
}

/* Standings list */
.standCardV12{
  border-radius: calc(var(--radius-lg) + 2px);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(10,16,40,.80), rgba(8,12,30,.70));
  box-shadow: 0 18px 55px rgba(0,0,0,.46);
  overflow:hidden;
}
.standCardV12__head{ padding: 14px; display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.standLegend{ display:flex; gap:8px; flex-wrap:wrap; }
.legendPill{ padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(9,14,34,.55); color: rgba(234,241,255,.80); font-size: 12px; }

/* Make tables feel like a broadcast list */
.standTableWrap{ border-top: 1px solid rgba(255,255,255,.08); }
.standTable thead th{ position: sticky; top: 0; background: rgba(8,12,30,.88); backdrop-filter: blur(10px); }

/* Live badge extra pop */
.liveBadge--big{ font-size: 12px; padding: 8px 12px; border-radius: 999px; }


/* -------- Event view V12 overrides -------- */
.eventPage .pageHead--event{ margin: 0 calc(50% - 50vw); }
.eventPage .pageHead__inner{ max-width: var(--content-max); margin: 0 auto; }

.eventPage .dock{
  background: linear-gradient(180deg, rgba(4,7,18,.82), rgba(4,7,18,.56));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.eventPage .dock__row{ border-color: rgba(255,255,255,.08); }

.eventPage .segmented{ border-radius: var(--radius-md); background: rgba(255,255,255,.03); }
.eventPage .segBtn{ border-radius: calc(var(--radius-md) - 4px); }

.eventPage .rallyCard{
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}
.eventPage .rallyCard:hover{ border-color: rgba(107,215,255,.28); }

.eventPage .stageChip{
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .16s ease, border-color .18s ease, background .18s ease;
}
.eventPage .stageChip:hover{ transform: translateY(-1px); border-color: rgba(107,215,255,.30); background: rgba(107,215,255,.06); }
.eventPage .stageChip.is-active{ border-color: rgba(107,215,255,.46); background: rgba(58,160,255,.10); box-shadow: 0 0 0 1px rgba(58,160,255,.20), 0 18px 44px rgba(0,0,0,.45); }

/* Stage standings: keep neutral, but make diff readable */
.timeText{ color: rgba(234,241,255,.95); font-weight: 900; }
.diffText{ color: rgba(255,146,104,.92); font-weight: 800; }

/* Penalty emphasis */
.penTime{ color: rgba(255,77,92,.95) !important; font-weight: 950; }

/* Make LIVE badge stand out even more */
.liveBadge{ box-shadow: 0 0 18px rgba(58,160,255,.28), 0 0 52px rgba(107,215,255,.14); }



/* Admin LIVE feed composer list */
.feedAdminList{ margin-top: 8px; display:flex; flex-direction:column; gap: 10px; max-height: 240px; overflow:auto; padding-right: 6px; }
.feedAdminRow{ border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.16); padding: 10px 10px; }
.feedAdminRow__main{ display:flex; align-items:center; gap: 8px; flex-wrap: wrap; }
.feedAdminRow__body{ margin-top: 8px; display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; }
.feedAdminRow__body .btn{ flex: 0 0 auto; }


/* -------- Event view V16 (two-column esports layout) -------- */
.eventPage--v16 .pageHead--event{ display:none; } /* legacy header hidden */
.eventHeroV16{
  margin: 0 calc(50% - 50vw);
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background-size: cover;
  background-position: center;
}
.eventHeroV16__shade{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(5,8,18,.86) 0%, rgba(5,8,18,.60) 55%, rgba(5,8,18,.40) 100%);
}
.eventHeroV16__inner{
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 22px 16px 18px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
}
.eventHeroV16__title .h1{ margin: 4px 0 2px; }
.eventHeroV16__chips{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  max-width: 860px;
  margin-top: 10px;
}
.eventHeroV16__actions{
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  align-self: start;
}
.eventGridV16{
  max-width: var(--content-max);
  margin: 16px auto 24px;
  padding: 0 16px;
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 14px;
}
.surface--card{
  background: linear-gradient(180deg, rgba(6,10,24,.74), rgba(6,10,24,.52));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: calc(var(--radius-lg) + 2px);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}

.rallyStackV16{ display:flex; flex-direction:column; gap: 10px; padding: 0 14px 14px; }
.rallyTileV16{
  position: relative;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  text-align:left;
  cursor:pointer;
  padding: 0;
  min-height: 78px;
}
.rallyTileV16__img{
  position:absolute; inset:0;
  background-size: cover;
  background-position:center;
  filter: saturate(1.05) contrast(1.05);
  opacity:.55;
}
.rallyTileV16__shade{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(5,8,18,.78), rgba(5,8,18,.26));
}
.rallyTileV16__body{
  position: relative;
  padding: 12px 12px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
}
.rallyTileV16__name{
  font-weight: 950;
  letter-spacing: .2px;
}
.rallyTileV16__meta{ display:flex; gap: 8px; flex-wrap:wrap; justify-content:flex-end; }
.rallyTileV16.is-active{
  border-color: rgba(107,215,255,.38);
  box-shadow: 0 0 0 1px rgba(58,160,255,.16), 0 18px 55px rgba(0,0,0,.45);
}

.controlsCardV16{ padding-bottom: 6px; }
.controlsTopV16{
  padding: 14px 14px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.controlsTopV16__right{ display:flex; align-items:center; gap: 10px; }
.pill--km{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(9,14,34,.55);
  border-radius: 999px;
  padding: 6px 10px;
  color: rgba(234,241,255,.86);
  font-weight: 900;
}
.stageRail--v16{ padding: 10px 14px 0; overflow:auto; }

.controlsSubV16{
  padding: 10px 14px 0;
  display:flex;
  justify-content:flex-end;
}
.switch--lite{
  font-weight: 800;
  font-size: 12px;
  color: rgba(234,241,255,.78);
}
.switch--lite input{
  width: 40px;
  height: 22px;
}
.switch--lite input::after{
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
}
.switch--lite input:checked::after{
  transform: translateX(16px);
}

.tableCardV16--after{
  margin-top: 12px;
}
.tableCardV16--after .surface__head{
  padding-bottom: 8px;
}

.searchRowV16{
  padding: 12px 14px 14px;
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 12px;
  align-items:end;
}
.hintBoxV16{
  color: rgba(234,241,255,.70);
  border: 1px dashed rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  border-radius: var(--radius-lg);
  padding: 12px;
}
.tableCardV16 .surface__head{ padding: 14px 14px 10px; }
.tableCardV16 .tableWrap{ margin: 0 14px 14px; }

@media (max-width: 980px){
  .eventGridV16{ grid-template-columns: 1fr; }
  .searchRowV16{ grid-template-columns: 1fr; }
  .eventHeroV16__inner{ grid-template-columns: 1fr; }
  .eventHeroV16__actions{ justify-content:flex-start; }
}
/* ==========================================================
   Mobile usability patch (Feb 2026)
   - Header stacks nicely and avoids horizontal overflow
   - Leaderboard tables stay readable (scroll instead of squeeze)
   - Lighter background effects on phones for smoother scrolling
   ========================================================== */

html, body{ overflow-x:hidden; }

@supports (padding: max(0px)){
  .topbar{ padding-top: max(10px, env(safe-area-inset-top)); }
}

@media (max-width: 760px){
  /* Keep header on one row; navigation + auth are available behind ☰ on small widths. */
  .topbar__inner{ flex-wrap: nowrap; }
  .brand{ min-width: 0; flex: 1 1 auto; }
  .topbar__right{ flex-wrap: nowrap; justify-content: flex-end; }
}

@media (max-width: 520px){
  /* Remove the heavy aurora layer on phones (performance + contrast) */
  body::after{ content:none; }
  body::before{ opacity:.14; }

  .brand__subtitle{ display:none; }
  #langCurrent{ display:none; }
  .userchip{ max-width: 180px; padding: 7px 9px; }
  .nav__link{ padding: 9px 10px; }

}

@media (max-width: 360px){
  .userchip{ display:none; }
}

/* ==========================================================
   Mobile layout + table fit (Feb 2026, rev2)
   - Mobile-first density: smaller paddings, tighter cards
   - Tables: hide extra columns on phones; show key info inline
   ========================================================== */

.hideXs{ }
.showXs{ display:none; }

.leaderMetaLine, .standMeta2{ display:none; }

/* Stage-time mobile helper: show diff under time ONLY on phones.
   (Without this, desktop would show the diff twice: in Diff 1st column + under Time.) */
.timeStack{ display:inline-flex; flex-direction:column; align-items:flex-end; gap: 4px; }
.timeStack .diffSub{ display:none; }

@media (max-width: 520px){
  .hideXs{ display:none !important; }
  .showXs{ display:flex !important; }

  /* Slightly tighter type to avoid “needs 50% zoom” feeling */
  body{ font-size: 14px; }

  /* Density */
  .app{ padding: 12px 10px 30px; }

  .topbar{ padding: 8px 0; }
  .topbar__inner{
    padding: 10px 10px;
    border-radius: 16px;
    gap: 10px;
  }
  .brand{ gap: 10px; }
  .brand__logo{ width: 34px; height: 34px; border-radius: 12px; }
  .brand__title{ font-size: 13px; }
  .nav__link{ padding: 8px 10px; }

  .btn{ padding: 8px 10px; font-size: 12px; }
  .btn--sm{ padding: 7px 9px; }
  .iconBtn{ width: 38px; height: 38px; }
  .langBtn{ padding: 8px 9px; }

  .input, select, textarea, .select, .textarea{ padding: 9px 10px; }

  .surface{ border-radius: 16px; }
  .surface__head{ padding: 12px 12px 10px; gap: 10px; }
  .surface__body{ padding: 12px; }

  .dock{ padding: 10px; border-radius: 14px; }
  .segBtn{ padding: 8px 10px; font-size: 12px; }

  .metaChip{ padding: 6px 9px; font-size: 12px; }

  .eventHeroV16__inner{ padding: 14px 12px 12px; gap: 10px; }
  .eventHeroV16__chips{ gap: 6px; }
  .eventGridV16{ padding: 0 12px; margin: 12px auto 20px; gap: 12px; }
  .rallyStackV16{ padding: 0 12px 12px; gap: 8px; }
  .rallyTileV16__body{ padding: 10px 10px; }
  .controlsTopV16{ padding: 12px 12px 0; }
  .searchRowV16{ padding: 10px 12px 12px; gap: 10px; }
  .hintBoxV16{ padding: 10px; }
  .tableCardV16 .tableWrap{ margin: 0 12px 12px; }

  /* Rallies: horizontal rail on phones (saves vertical space) */
  .rallyStackV16{
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .rallyStackV16::-webkit-scrollbar{ display:none; }
  .rallyTileV16{ min-width: 260px; scroll-snap-align: start; }
  .rallyTileV16__body{ flex-direction: column; align-items:flex-start; }
  .rallyTileV16__meta{ justify-content:flex-start; }

  /* Stage selector: 2-row grid that scrolls horizontally if needed */
  .stageRail.stageRail--v16{
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: 96px;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 12px 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .stageRail.stageRail--v16::-webkit-scrollbar{ display:none; }
  .stageChip{
    min-width: 0;
    width: 96px;
    padding: 8px 10px;
    text-align: center;
  }
  .stageChip__sub{ font-size: 11px; }

  /* Tables */
  .tableWrap.tableWrap--leaderboard{
    overflow-x: visible; /* card mode -> no sideways scroll */
    border-radius: 16px;
  }
  .leaderTable{
    min-width: 0 !important;
    width: 100%;
  }
  .leaderTable th, .leaderTable td{
    padding: 10px 10px;
    font-size: 12px;
  }
  .leaderTable .posPill{
    padding: 6px 8px;
    min-width: 30px;
  }
  .leaderTable td .small{ font-size: 11px; }

  /* Inline meta chips inside Player cell */
  .leaderMetaLine{
    display:flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
  }
  .leaderMetaLine .miniPill{ padding: 5px 8px; font-size: 11px; }

  /* Overall standings table (Standings page) */
  .standTableWrap{
    overflow-x: auto; /* scroll if needed */
    border-radius: 16px;
  }
  .standTable{
    min-width: 0 !important;
    width: 100%;
  }
  .standTable th, .standTable td{ padding: 10px 10px; }

  .standMeta{ margin-top: 6px; }
  .standMeta2{
    display:flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
  }
  .standMeta2 .miniPill{ padding: 5px 8px; font-size: 11px; }

  /* Let long usernames wrap on mobile */
  .standDriver .linkBtn,
  .leaderTable td .linkBtn{
    white-space: normal;
    line-height: 1.15;
  }
}

/* Extra-small phones */
@media (max-width: 360px){
  .nav__link{ padding: 8px 9px; }
  .btn{ padding: 7px 9px; }
  .stageRail.stageRail--v16{ grid-auto-columns: 90px; }
  .stageChip{ width: 90px; }
}

/* ==============================
   Shop / Register / Users pages
   ============================== */

/* Admin: Racenet ↔ account linking list */
.linkRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-wrap:wrap;
}
.linkRow:last-child{ border-bottom:none; }
.linkRow__main{ min-width: 220px; flex: 1 1 240px; }
.linkRow__tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 8px;
  flex-wrap:wrap;
  flex: 1 1 420px;
}
.linkRow__tools .select,
.linkRow__tools .input{ min-width: 200px; }
@media (max-width: 520px){
  .linkRow__tools{ justify-content:flex-start; }
  .linkRow__tools .select,
  .linkRow__tools .input{ width:100%; min-width:0; }
}


.passSummary__badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.passSummary__rows{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }



/* New Shop (v21+) */
.shopNotice{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(10,16,38,.55), rgba(6,10,26,.35));
  box-shadow: 0 0 0 1px rgba(107,215,255,.08), 0 18px 40px rgba(0,0,0,.22);
}
.shopNotice__icon{
  width: 40px; height: 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  background: rgba(107,215,255,.10);
  border: 1px solid rgba(107,215,255,.18);
  box-shadow: 0 0 0 1px rgba(0,224,255,.08), 0 10px 26px rgba(0,0,0,.25);
  flex: 0 0 auto;
}
.shopNotice__title{ font-weight: 950; letter-spacing: .2px; }
.shopNotice__sub{ opacity: .9; font-size: 13px; line-height: 1.35; margin-top: 2px; }

.shopLayout{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items:start;
}
.shopSide{ display:flex; flex-direction:column; gap: 14px; }

.shopCards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.shopCard{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow:hidden;
  background: rgba(5,8,22,.35);
  box-shadow: var(--shadow-soft);
  display:flex;
  flex-direction:column;
}
.shopCard__media{
  position:relative;
  aspect-ratio: 3 / 2;
  background: rgba(0,0,0,.18);
}
.shopCard__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.shopCard__body{ padding: 12px 14px 14px; }
.shopCard__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.shopCard__name{ font-weight: 950; letter-spacing: .2px; }
.shopCard__price{ font-weight: 950; font-variant-numeric: tabular-nums; }
.shopCard__actions{ margin-top: 12px; display:flex; gap: 10px; flex-wrap:wrap; }

.shopCard--single{ box-shadow: 0 0 0 1px rgba(46,204,113,.16), 0 16px 40px rgba(0,0,0,.22); }
.shopCard--annual{ box-shadow: 0 0 0 1px rgba(0,224,255,.16), 0 16px 40px rgba(0,0,0,.22); }

@media (min-width: 860px){
  .shopCards{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px){
  .shopLayout{ grid-template-columns: 1.15fr .85fr; }
}
@media (max-width: 520px){
  .shopNotice{ padding: 10px 12px; }
  .shopNotice__icon{ width: 36px; height: 36px; border-radius: 12px; }
  .shopCard__body{ padding: 12px; }
}
.shopGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.shopPass{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 14px;
  background: rgba(5,8,22,.35);
  box-shadow: var(--shadow-soft);
}
.shopPass__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.shopPass__name{ font-weight: 950; letter-spacing: .2px; }
.shopPass__price{ font-weight: 950; font-variant-numeric: tabular-nums; }
.shopPass--single{ box-shadow: 0 0 0 1px rgba(46,204,113,.18), 0 0 32px rgba(46,204,113,.10); }
.shopPass--annual{ box-shadow: 0 0 0 1px rgba(0,224,255,.18), 0 0 34px rgba(0,224,255,.10); }

.reqRow{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.reqRow:last-child{ border-bottom: none; }
.reqRow__right{ display:flex; align-items:center; gap:10px; }

.statusPill{
  display:inline-flex;
  align-items:center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  font-size: 11px;
  font-weight: 900;
  margin-left: 8px;
}
.status--wait{ border-color: rgba(255,190,120,.25); background: rgba(255,190,120,.10); }
.status--ok{ border-color: rgba(46,204,113,.30); background: rgba(46,204,113,.10); }
.status--bad{ border-color: rgba(255,80,80,.30); background: rgba(255,80,80,.10); }

.calList{ display:flex; flex-direction:column; gap: 10px; }
.calItem{
  display:grid;
  grid-template-columns: 96px 1fr auto;
  gap: 12px;
  align-items:center;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.35);
}
.calItem--past{ opacity: .72; }
.calItem__left{ display:flex; flex-direction:column; gap:4px; }
.calItem__date{ font-weight: 950; }
.calItem__time{ opacity: .85; }
.calItem__title{ font-weight: 950; letter-spacing: .2px; }
.calItem__right{ display:flex; gap: 8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

.userList{ display:flex; flex-direction:column; gap: 8px; }
.userRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.32);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.userRow:hover{
  transform: translateY(-1px);
  border-color: rgba(107,215,255,.18);
  box-shadow: 0 0 0 1px rgba(107,215,255,.10), 0 10px 28px rgba(0,0,0,.25);
}
.userRow__name{ display:flex; align-items:center; gap: 10px; flex-wrap:wrap; }
.userRow__dot{ width: 10px; height: 10px; border-radius: 999px; background: rgba(107,215,255,.65); box-shadow: 0 0 14px rgba(107,215,255,.18); }
.userRow__badges{ display:flex; gap: 8px; flex-wrap:wrap; }
.userRow__chev{ opacity: .75; font-size: 18px; }

.userProfile__head{ display:flex; gap: 12px; align-items:center; }

@media (min-width: 860px){
  .shopGrid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px){
  .calItem{ grid-template-columns: 78px 1fr; }
  .calItem__right{ grid-column: 1 / -1; justify-content:flex-start; }
}




/* ---------- Calendar (WRC-style slots + registration modal) ---------- */

.pill--blue{
  background: rgba(58,160,255,.14);
  border-color: rgba(107,215,255,.22);
}
.pill--ok{
  background: rgba(46,204,113,.10);
  border-color: rgba(46,204,113,.26);
}

.calGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 760px){
  .calGrid{ grid-template-columns: 1fr; }
}

.calSlot{
  display:grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items:stretch;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  position: relative;
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(5,8,22,.72), rgba(5,8,22,.36)),
    var(--calbg, none);
  background-size: cover;
  background-position: center;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.calSlot:hover{
  transform: translateY(-1px);
  border-color: rgba(107,215,255,.18);
  box-shadow: 0 0 0 1px rgba(107,215,255,.10), 0 12px 30px rgba(0,0,0,.28);
}
.calSlot--past{ opacity: .74; }
.calSlot__idx{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0;
  border-radius: 14px;
  font-weight: 1000;
  letter-spacing: .6px;
  font-size: 18px;
  color: rgba(255,255,255,.95);
  background: linear-gradient(180deg, rgba(255,140,72,.92), rgba(255,90,48,.72));
  border: 1px solid rgba(255,170,120,.28);
}

.calSlot__idxNum{ line-height: 1; }
.calSlot__flag{
  width: 30px;
  height: 20px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

.flagPreview{
  width: 38px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.25);
  display:flex;
  align-items:center;
  justify-content:center;
}
.flagIcon{
  width: 32px;
  height: 22px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.14);
}
.flagIcon--empty{
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.14);
}

.flagPicker{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 560px){
  .flagPicker{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.flagPick{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.28);
  cursor: pointer;
  text-align:left;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.flagPick:hover{
  transform: translateY(-1px);
  border-color: rgba(107,215,255,.18);
  box-shadow: 0 0 0 1px rgba(107,215,255,.10), 0 10px 22px rgba(0,0,0,.24);
}
.flagPick__img{
  width: 34px;
  height: 24px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.16);
}
.flagPick__name{
  font-weight: 950;
  font-size: 12px;
  opacity: .9;
  letter-spacing: .2px;
  min-width:0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calModal__flag{
  width: 46px;
  height: 32px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.calSlot__main{ display:flex; flex-direction:column; min-width:0; }
.calSlot__dateRow{ display:flex; align-items:center; gap:8px; }
.calSlot__dateIcon{ opacity:.88; }
.calSlot__dateTxt{ font-weight: 950; font-size: 12.5px; opacity: .92; letter-spacing: .2px; }
.calSlot__title{
  font-weight: 1000;
  letter-spacing: .2px;
  font-size: 16px;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.calSlot__meta{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 6px;
}
.calSlot__dates{ opacity: .85; font-size: 12px; }
.calSlot__country{ font-size: 12px; font-weight: 900; opacity: .78; letter-spacing: .2px; }
.calSlot__info{ margin-top: 8px; opacity: .78; }

.calSlot__right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 8px;
  justify-content:space-between;
  min-width: 96px;
}
.calSlot__regs{
  font-weight: 950;
  opacity: .92;
}
.calSlot__cta{
  font-size: 11px;
  font-weight: 900;
  opacity: .82;
  letter-spacing: .3px;
}
.calSlot__edit{
  padding: 6px 10px !important;
}

@media (max-width: 560px){
  .calSlot{
    grid-template-columns: 54px 1fr;
    grid-template-rows: auto auto;
  }
  .calSlot__right{
    grid-column: 1 / -1;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap: 10px;
    min-width: 0;
  }
}

/* Modal: capacity + registrations list */
.calCap{ margin-bottom: 10px; }
.calCap__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
}
.calCap__pill{
  display:inline-flex;
  gap: 6px;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.45);
  font-weight: 900;
}
.calBar{
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  overflow:hidden;
  margin-top: 10px;
}
.calBar__fill{
  height: 100%;
  background: linear-gradient(90deg, rgba(58,160,255,.85), rgba(107,215,255,.65));
  border-radius: 999px;
}

.regList{ display:flex; flex-direction:column; gap: 8px; }
.regRow{
  display:grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.30);
}
.regRow__idx{ opacity: .75; font-weight: 950; }
.regRow__name{ font-weight: 900; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.regRow__rn{ font-size: 12px; font-weight: 600; opacity: .65; }
.regRow__tag{
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(58,160,255,.10);
  opacity: .9;
}


/* ==========================================================
   Mobile-first UX pass (Feb 2026 - v27)
   - Bottom dock navigation (app-like feel on phones)
   - Modal becomes a bottom-sheet on iPhone (no awkward centered panel)
   - Tabs scroll horizontally instead of wrapping into chaos
   - Slightly denser cards on small screens (highlights/feed/tables)
   ========================================================== */

html{
  -webkit-text-size-adjust: 100%;
}

/* ---- Bottom dock (phones) ---- */
.mobileDock{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  gap: 6px;
  padding: 8px 10px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(7,12,31,0), rgba(7,12,31,.82) 26%, rgba(7,12,31,.92));
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dockLink{
  flex: 1 1 0;
  min-width: 0;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 6px;
  border-radius: 16px;
  border: 1px solid transparent;
  background: rgba(0,0,0,.10);
  color: rgba(234,241,255,.78);
}
.dockLink:hover{ color: rgba(234,241,255,.92); }
.dockLink:active{ transform: translateY(1px); }
.dockIcon{ font-size: 18px; line-height: 1; }
.dockTxt{ font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.dockLink.is-active{
  background: rgba(58,160,255,.16);
  border-color: rgba(107,215,255,.22);
  color: rgba(234,241,255,.96);
  box-shadow: 0 0 0 1px rgba(58,160,255,.10), 0 16px 44px rgba(0,0,0,.35);
}

@media (max-width: 760px){
  .mobileDock{ display:flex; }
  /* Make room so the dock never covers content */
  .app{ padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .footer__inner{ padding-bottom: calc(12px + 72px + env(safe-area-inset-bottom)); }

  /* On phones, keep the header clean: primary navigation lives in the dock + hamburger. */
  .nav--primary{ display:none; }
  .topbar__inner{ gap: 10px; }

  /* Prevent admin button from pushing/overlapping the Kalender link area */
  .adminBtn{ width: 40px; height: 40px; padding: 0; justify-content:center; }
  .adminBtn__text{ display:none; }
}

/* ---- Modal bottom-sheet on phones ---- */
@media (max-width: 520px){
  .modalOverlay{
    align-items: flex-end;
    justify-content: center;
    padding: 10px;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .modal{
    width: 100%;
    max-width: 620px;
    border-radius: 22px 22px 18px 18px;
  }
  .modal__head{ padding: 12px 12px; }
  .modal__head kbd{ display:none; }
  .modal__body{
    padding: 12px 12px;
    max-height: calc(100vh - 110px - env(safe-area-inset-top));
  }
  /* Menu modal: taller & stickier footer buttons */
  .modal--menu .modal__body{
    max-height: calc(100vh - 96px - env(safe-area-inset-top));
  }
  .menuPanel{ gap: 12px; }
  .menuUser{ border-radius: 16px; padding: 11px 11px; }
  .menuItem{ padding: 11px 11px; border-radius: 14px; }
  .menuFooter{
    position: sticky;
    bottom: 0;
    padding-top: 10px;
    padding-bottom: 6px;
    background: linear-gradient(180deg, rgba(15,27,63,0), rgba(15,27,63,.92) 38%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* ---- Tabs: scroll instead of wrapping into 2–3 lines ---- */
@media (max-width: 760px){
  .tabs{
    flex-wrap: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar{ display:none; }
}

/* ---- Denser hero & panels on very small phones ---- */
@media (max-width: 520px){
  .heroV12{ padding: 18px 0 12px; }
  .heroV12__inner{ padding: 0 12px; gap: 12px; }
  .heroV12__title{ font-size: 26px; }
  .heroV12__sub{ font-size: 13px; line-height: 1.45; }
  .heroV12__cta{ gap: 8px; }
  .btn.btn--xl{ padding: 10px 12px; font-size: 13px; }
  .panelV12{ border-radius: 18px; transform: none; }
  .panelV12__head{ padding: 12px 12px 8px; }
  .panelV12__body{ padding: 8px 12px 12px; }
  .feedList--v12{ gap: 8px; }
  .feedItem--v12 .feedItem__top{ padding: 8px 8px 6px; }
  .feedItem--v12 .feedItem__body{ padding: 0 8px 8px; }
  .highlightList .item{ padding: 9px 9px; }
  /* Avoid iOS input-zoom (keep 16px on form fields) */
  input, select, textarea{ font-size: 16px; }
}

/* ---- More compact leaderboard rows on phones ---- */
@media (max-width: 520px){
  .leaderTable thead th{ padding: 10px 8px; font-size: 11px; }
  .leaderTable tbody td{ padding: 10px 8px; }
  .posPill{ min-width: 32px; height: 28px; }
  .miniPill{ font-size: 11px; padding: 4px 8px; }

  /* Stage selector chips: smaller on phones */
  .stageChip{ min-width: 104px; padding: 9px 10px; }
  .stageChip__sub{ font-size: 11px; }
}

@media (max-width: 520px){
  .eventCard{ border-radius: 18px; }
  .eventCard__body{ padding: 12px 12px; }
  .rallyThumb{ border-radius: 18px; min-height: 118px; }
  .rallyThumb__body{ padding: 12px 12px; }
  .rallyTileV16__body{ padding: 11px 11px; }
}

/* ==========================================================
   Live timing mobile redesign
   - Turns the leaderboard table into readable cards on phones
   - Removes horizontal scrolling for timing pages
   - Uses a wider breakpoint so landscape phones + small tablets don't get a cramped table
   ========================================================== */

@media (max-width: 980px){
  /* Never require sideways scroll on live timing */
  .tableWrap.tableWrap--leaderboard{ overflow-x: visible; }

  .leaderTable{ display:block; width: 100%; }
  .leaderTable thead{ display:none; }
  .leaderTable tbody{ display:block; width: 100%; }

  .leaderTable tbody tr.leaderRow{
    display:grid;
    grid-template-columns: 46px 1fr auto;
    align-items:start;
    gap: 10px;
    padding: 12px 12px;
    margin: 0 0 10px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(5,8,22,.26);
  }

  /* Preserve Overall top-3 accents */
  .leaderTable tbody tr.leaderRow.top1{ background: linear-gradient(180deg, rgba(255,215,0,.10), rgba(5,8,22,.26)); border-color: rgba(255,215,0,.14); }
  .leaderTable tbody tr.leaderRow.top2{ background: linear-gradient(180deg, rgba(207,225,255,.08), rgba(5,8,22,.26)); border-color: rgba(207,225,255,.12); }
  .leaderTable tbody tr.leaderRow.top3{ background: linear-gradient(180deg, rgba(242,182,138,.08), rgba(5,8,22,.26)); border-color: rgba(242,182,138,.12); }

  .leaderTable tbody tr.leaderRow:hover{ background: rgba(5,8,22,.26); }

  .leaderTable tbody tr.leaderRow td{
    display:block;
    padding: 0;
    border: 0;
    min-width: 0;
  }

  /* Layout cells */
  .leaderTable tbody tr.leaderRow td:nth-child(1){ grid-column: 1; }
  .leaderTable tbody tr.leaderRow td:nth-child(2){ grid-column: 2; min-width:0; }
  .leaderTable tbody tr.leaderRow td.colTime{ grid-column: 3; justify-self: end; text-align:right; }

  /* Hide extra columns; values are shown as meta chips inside the Driver cell */
  .leaderTable tbody tr.leaderRow td.hideSm,
  .leaderTable tbody tr.leaderRow td.hideXs{ display:none !important; }

  .leaderTable tbody tr.leaderRow .posPill{ min-width: 40px; height: 32px; }
  .leaderTable tbody tr.leaderRow .linkBtn{ white-space: normal; line-height: 1.12; }
  .leaderTable tbody tr.leaderRow .small{ margin-top: 2px; }
  .leaderTable tbody tr.leaderRow .leaderMetaLine{ display:flex; gap: 6px; flex-wrap:wrap; margin-top: 6px; }

  /* Make time the hero on mobile */
  .timeStack{ display:flex; flex-direction:column; align-items:flex-end; gap: 4px; }
  .timeStack .diffSub{ display:block; font-size: 11px; color: rgba(234,241,255,.62); }

  .leaderTable tbody tr.leaderRow .timeBadge,
  .leaderTable tbody tr.leaderRow .timeText{ font-size: 14px; }
  .leaderTable tbody tr.leaderRow .timeBadge{ padding: 9px 11px; }
}


/* ==========================================================
   Mobile hotfix v27.3.5 — Event Live Timing (PHONE @100% zoom)
   Fixes:
   1) Stage/Overall toggle: ALWAYS show both buttons (grid, no hiding)
   2) Rally selector + Stage selector: true horizontal swipe (touch-action)
   3) After-stage overall ON/OFF: full-width label + easy tap
   4) Leaderboard pills: wrap safely, no clipping on small screens
   ========================================================== */

@media (max-width: 980px){
  /* Card-style leaderboards: do not clip long pills on the right */
  .tableWrap.tableWrap--leaderboard{
    overflow: visible !important;
    border: 0;
    background: transparent;
  }
}

/* Everything below targets the PHONE layout that kicks in at <=760px */
@media (max-width: 760px){
  /* Controls header: make the mode toggle impossible to "disappear" */
  .controlsTopV16{
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
  .controlsTopV16 .segmented{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
  }
  .controlsTopV16 .segBtn{
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .controlsTopV16__right{
    width: 100% !important;
    justify-content: flex-start !important;
  }

  /* Rally cards: true horizontal rail (swipe works on buttons) */
  .rallyStackV16{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity !important;
    scroll-padding: 12px;
    padding-bottom: 10px;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
  .rallyTileV16{
    flex: 0 0 auto !important;
    min-width: 260px;
    scroll-snap-align: start;
    touch-action: manipulation;
  }

  /* Stage selector: wrapped grid so ALL stages are visible without horizontal scrolling */
  .stageRail.stageRail--v16{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto;
    scroll-snap-type: none !important;
    touch-action: pan-y;
    overscroll-behavior: contain;
    padding: 10px 12px 4px;
  }
  .stageChip{
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    justify-content: center;
    text-align: center;
    touch-action: manipulation;
  }
  .stageChip__top{ font-size: 12px; white-space: normal; line-height: 1.05; }
  .stageChip__sub{ font-size: 11px; }

  /* After-stage overall toggle: show label + switch without needing zoom */
  .controlsSubV16{
    justify-content: flex-start !important;
    padding: 10px 12px 0 !important;
  }
  .controlsSubV16 .switch{
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }
  .controlsSubV16 .switch span{
    flex: 1;
    min-width: 0;
    white-space: normal;
    line-height: 1.25;
  }

  /* Safety: prevent meta pills from exceeding the row */
  .leaderMetaLine{ max-width: 100%; }
  .leaderMetaLine .miniPill{ max-width: 100%; }
}

/* Tiny phones: slightly smaller stage chip min-width so 3 fit comfortably */
@media (max-width: 420px){
  .stageRail.stageRail--v16{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stageChip{ padding: 9px 10px; }
}

/* =========================
   Users page + User modal V2
   ========================= */

.userBar{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.userBar__left{ display:flex; flex-direction:column; gap: 4px; }
.userBar__right{
  display:flex;
  gap: 12px;
  align-items:flex-end;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.userPills{ display:flex; gap: 8px; flex-wrap:wrap; justify-content:flex-end; }
.statPill{
  display:inline-flex;
  align-items:baseline;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.22);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
}
.statPill span{ color: rgba(234,241,255,.66); font-weight: 850; }
.statPill b{ color: rgba(234,241,255,.94); font-weight: 950; font-variant-numeric: tabular-nums; }
.statPill--ok{ border-color: rgba(46,204,113,.26); background: rgba(46,204,113,.08); }
.statPill--blue{ border-color: rgba(107,215,255,.22); background: rgba(107,215,255,.08); }
.statPill--muted{ border-color: rgba(255,255,255,.08); background: rgba(0,0,0,.12); opacity: .92; }

.inputIcon{ position:relative; }
.inputIcon__icon{
  position:absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .65;
  font-size: 13px;
  pointer-events:none;
}
.inputIcon__input{ padding-left: 30px !important; }

.userList{ gap: 10px; }
.userRow{
  display:grid !important;
  grid-template-columns: 44px 1fr auto;
  align-items:center;
  padding: 12px 14px !important;
}
.userRow:focus-visible{
  outline: 2px solid rgba(107,215,255,.35);
  outline-offset: 2px;
}
.userRow__avatar{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 950;
  color: rgba(234,241,255,.95);
  border: 1px solid rgba(107,215,255,.20);
  background: radial-gradient(120% 120% at 30% 20%, rgba(107,215,255,.30), rgba(58,160,255,.12) 45%, rgba(0,0,0,.25));
  box-shadow: 0 0 0 1px rgba(58,160,255,.14), 0 14px 30px rgba(0,0,0,.40);
}
.userRow__main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.userRow__line1{
  display:flex;
  align-items:baseline;
  gap: 10px;
  flex-wrap:wrap;
  min-width:0;
}
.userRow__nameTxt{
  font-weight: 950;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.userRow__racenet{
  font-size: 12px;
  color: rgba(234,241,255,.70);
}
.userRow__racenet--empty{
  color: rgba(234,241,255,.52);
  font-style: italic;
}
.userRow__line2{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  align-items:center;
}

@media (max-width: 560px){
  .userBar__right{ width:100%; justify-content:space-between; }
  .userSearch{ width: 100%; }
}

/* Modal micro-animation + profile kind */
.modalOverlay{ animation: overlayIn .12s ease-out; }
.modal{ animation: modalIn .16s ease-out; }
@keyframes overlayIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modalIn{
  from{ opacity:0; transform: translateY(10px) scale(.985); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.modal--profile{ width: min(720px, 100%); }
@media (max-width: 640px){
  .modalOverlay--profile{ align-items:flex-end; }
  .modal--profile{
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .modal--profile .modal__body{ max-height: min(78vh, 860px); }
}

/* User quick profile modal */
.userQuick{ display:flex; flex-direction:column; gap: 12px; }
.userQuick__hero{
  position:relative;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(15,27,63,.76), rgba(5,8,22,.32));
  overflow:hidden;
  padding: 14px;
}
.userQuick__glow{
  position:absolute;
  inset:-40px;
  background: radial-gradient(520px 260px at 20% 10%, rgba(107,215,255,.20), transparent 60%),
              radial-gradient(520px 260px at 78% 20%, rgba(58,160,255,.16), transparent 62%),
              radial-gradient(420px 220px at 50% 88%, rgba(255,186,73,.10), transparent 60%);
  filter: blur(10px);
  opacity: .85;
}
.userQuick__top{ position:relative; display:flex; align-items:center; gap: 12px; }
.userQuick__avatar{
  width: 54px; height: 54px;
  border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 950;
  color: rgba(234,241,255,.95);
  border: 1px solid rgba(107,215,255,.22);
  background: radial-gradient(120% 120% at 30% 20%, rgba(107,215,255,.30), rgba(58,160,255,.12) 45%, rgba(0,0,0,.25));
  box-shadow: 0 0 0 1px rgba(58,160,255,.18), 0 18px 40px rgba(0,0,0,.55);
}
.userQuick__name{ font-weight: 950; font-size: 18px; letter-spacing:.2px; }
.userQuick__meta{ margin-top: 2px; font-size: 12px; color: rgba(234,241,255,.68); }
.userQuick__badges{ margin-top: 10px; display:flex; gap: 8px; flex-wrap:wrap; }

.userQuick__panel{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(5,8,22,.22);
  box-shadow: var(--shadow-soft);
  padding: 14px;
}
.userQuick__kv{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.userQuick__kvLeft{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.userQuick__sectionTitle{
  font-weight: 950;
  letter-spacing: .2px;
}
.userQuick__adminRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 640px){
  .userQuick__adminRow{ grid-template-columns: 1fr; }
}

/* ==========================================================
   Publish-ready mobile fix (Feb 2026, rev3)
   Goal: Live Timing works at 100% zoom even if the browser forces "Desktop site"
   (media queries based on width may not trigger). We detect touch devices instead.
   ========================================================== */

/* Prevent full-bleed headers from creating a phantom horizontal viewport on phones */
@media (max-width: 520px){
  .eventPage .pageHead--event{ margin: 0 !important; }
}

/* Touch-first fallback: apply the phone layout even when layout viewport is wide (Desktop site / split-screen) */
@media (hover: none) and (pointer: coarse){
  /* Event grid: single column */
  .eventGridV16{ grid-template-columns: 1fr !important; }
  .searchRowV16{ grid-template-columns: 1fr !important; }

  /* Header actions should not push width */
  .eventHeroV16__inner{ grid-template-columns: 1fr !important; }
  .eventHeroV16__actions{ justify-content:flex-start !important; flex-wrap: wrap; }

  /* Mode toggle always visible */
  .controlsTopV16{
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
  .controlsTopV16 .segmented{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
  }
  .controlsTopV16 .segBtn{
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .controlsTopV16__right{
    width: 100% !important;
    justify-content: flex-start !important;
  }

  /* Rallies: swipe rail */
  .rallyStackV16{
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity !important;
    scroll-padding: 12px;
    padding-bottom: 10px;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
  .rallyTileV16{
    flex: 0 0 auto !important;
    min-width: 260px;
    scroll-snap-align: start;
    touch-action: manipulation;
  }

  /* Stages: wrapped grid (no horizontal scroll needed) */
  .stageRail.stageRail--v16{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding: 10px 12px 4px;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
  .stageChip{
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    justify-content: center;
    text-align: center;
    touch-action: manipulation;
  }

  /* After-stage overall toggle: full-width row */
  .controlsSubV16{ justify-content: flex-start !important; }
  .controlsSubV16 .switch{
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }
  .controlsSubV16 .switch span{
    flex: 1;
    min-width: 0;
    white-space: normal;
    line-height: 1.25;
  }
}

/* Tiny phones (touch): 2 columns for stages */
@media (hover: none) and (pointer: coarse) and (max-width: 420px){
  .stageRail.stageRail--v16{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Performance: mobile Safari blur/backdrop-filter can be expensive */
@media (max-width: 520px){
  .topbar{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .topbar__inner{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .standTable th{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}


/* =========================================================
   Admin Event Builder + Stage Editor (mobile-friendly)
   ========================================================= */
.evBuilder{ display:flex; flex-direction:column; gap: 12px; }
.evSection{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 12px;
}
.evSection__head{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.evSection__title{ font-weight: 950; letter-spacing: .2px; }
.evSection__sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }

.evAcc{ display:flex; flex-direction:column; gap: 10px; }
.evAccItem{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow:hidden;
  background: rgba(5,8,22,.18);
}
.evAccHead{
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(7,12,31,.86), rgba(5,8,22,.34));
}
.evAccHead__main{ min-width:0; flex: 1 1 auto; }
.evAccTitle{ font-weight: 950; margin-bottom: 4px; }
.evAccMeta{
  display:flex;
  flex-wrap:wrap;
  gap: 6px 10px;
  font-size: 12px;
  color: rgba(234,241,255,.78);
}
.evAccHead__actions{ display:flex; align-items:center; gap: 8px; flex: 0 0 auto; }
.evAccChevron{
  opacity: .85;
  transform: rotate(-90deg);
  transition: transform .18s ease;
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
}
.evAccItem.is-open .evAccChevron{ transform: rotate(0deg); }
.evAccBody{
  display:none;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(11,20,48,.24);
}
.evAccItem.is-open .evAccBody{ display:block; }

.stageEditor__hint{ margin-bottom: 12px; }
.stageEditor__list{ display:flex; flex-direction:column; gap: 10px; }
.stageRow{
  display:grid;
  grid-template-columns: 76px 1fr 150px auto;
  gap: 10px;
  align-items:center;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
}
.stageRow__lab{ font-size: 13px; }
.stageRow__actions{ display:flex; gap: 6px; justify-content:flex-end; flex-wrap:wrap; }

/* Mobile hardening */
html, body{ max-width:100%; overflow-x:hidden; }
@media (max-width: 620px){
  .grid--2{ grid-template-columns: 1fr; }
  .row{ flex-wrap:wrap; }
  .row > *{ min-width: 0; }
  .evSection{ padding: 10px; }
}
@media (max-width: 520px){
  .stageRow{
    grid-template-columns: 68px 1fr;
    grid-template-rows: auto auto auto;
    align-items:start;
  }
  .stageRow__meta{ grid-column: 1 / -1; }
  .stageRow__actions{ grid-column: 1 / -1; justify-content:flex-start; }
  .modal__body{ max-height: 78vh; }
}

@media (max-width: 980px){
  .grid--3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px){
  .grid--3{ grid-template-columns: 1fr; }
  .card__body{ padding: 12px 12px; }
  .hero{ padding-left: 0; padding-right: 0; }
}


/* =========================================================
   EA WRC Rally Generator (Admin)
   ========================================================= */

.rAddChooser .rAddCard{
  padding:16px;
  min-height:92px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  border-radius:18px;
}
.rAddCard__title{
  font-size:16px;
  font-weight:1000;
  letter-spacing:.2px;
}

.rGen{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.rGenHero{
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.rGenTitle{
  font-size:18px;
  font-weight:1100;
  letter-spacing:.2px;
}

.reelWindow{
  position:relative;
  height:150px;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background: radial-gradient(100% 120% at 50% 0%, rgba(70,110,255,.10), rgba(0,0,0,.0));
  box-shadow: 0 10px 30px rgba(0,0,0,.35) inset;
}
.reelWindow--sm{
  height:138px;
}
.reelLine{
  position:absolute;
  left:0; right:0;
  top:50%;
  transform: translateY(-50%);
  height:0;
  border-top: 2px solid rgba(255,255,255,.10);
  pointer-events:none;
}
.reelList{
  will-change: transform;
  transform: translateY(46px);
}
.reelItem{
  height:46px;
  padding:0 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:2px;
  text-align:center;
  user-select:none;
  opacity:.9;
}
.reelItem__main{
  font-weight:1100;
  letter-spacing:.2px;
}
.reelItem__sub{
  font-size:12px;
  opacity:.75;
}
.reelItem.is-win{
  opacity:1;
  background: rgba(255,255,255,.07);
  border-radius:14px;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

.rGenPick{
  margin-top:8px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.rGenPickList{
  margin-top:10px;
  max-height:260px;
  overflow:auto;
  display:grid;
  gap:8px;
}
.rGenPickBtn{
  width:100%;
  text-align:left;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  color: inherit;
}
.rGenPickBtn:hover{
  background: rgba(255,255,255,.06);
}
.rGenPickBtn__t{
  font-weight:1000;
}

.rGenOut{
  margin-top:10px;
}
.rGenOutList{
  display:grid;
  gap:8px;
}
.rGenOutRow{
  display:grid;
  grid-template-columns: 64px 1fr 76px;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.rGenOutRow__ss{
  font-weight:1000;
}
.rGenOutRow__km{
  text-align:right;
  font-variant-numeric: tabular-nums;
  opacity:.95;
}

@media (max-width: 520px){
  .rGenOutRow{
    grid-template-columns: 56px 1fr 70px;
  }
  .reelWindow{
    height:138px;
  }
  .reelWindow--sm{
    height:126px;
  }
}