/* ─────────────────────────── Variables ─────────────────────────── */
:root {
  /* Black / red / gold / white — understated, closer to a fine timepiece than
     to a dashboard. The accent names below are kept ON PURPOSE even though
     nothing is blue any more: ~2100 lines of rules reference them, so remapping
     the values restyles the whole site coherently and leaves nothing behind.
     If you add a rule, keep using var(--gold) / var(--red), not raw hex. */
  --bg:          #07070A;
  --surface:     #0F0F13;
  --surface-2:   #16161B;
  --surface-3:   #1F1F26;
  --card-bg:     #0F0F13;

  --gold:        #C9A227;
  --gold-soft:   #E3C766;

  /* Former accent slots, now all gold — see the note above. */
  --blue:        #C9A227;
  --blue-dim:    rgba(201,162,39,0.14);
  --blue-glow:   rgba(201,162,39,0.30);
  --purple:      #B8912A;
  --orange:      #D8B34A;
  --green:       #E8E2D2;
  --red:         #A3182A;

  --text:        #F6F4EF;
  --text-2:      #9A948A;
  --text-muted:  #9A948A;
  --text-3:      #4A473F;
  /* Hairlines carry a trace of gold — that is what reads as "fine", not more
     colour elsewhere. */
  --border:      rgba(201,162,39,0.13);
  --border-2:    rgba(201,162,39,0.24);
  --radius:      12px;
  --radius-lg:   20px;
  --shadow:      0 4px 24px rgba(0,0,0,0.4);
  /* ── Type: one Japanese hand for everything, a mono for the instruments.
     Zen Kaku Gothic New is a kaku gothic — the species of face used on Tokyo
     station and expressway signage: low stroke contrast, flat terminals, open
     counters. It carries Latin, German diacritics AND kana/kanji in one
     family, so "Fahrzeugverwaltung" and 夜景 come out of the same voice with
     no mid-line fallback swap.
     The fallbacks are Latin-first ON PURPOSE: this page is almost entirely
     German and English, so the swap window must not land in a Japanese system
     face with weak half-width Latin. JP system faces live in --font-jp only.
     Weights available: 400 / 500 / 700 / 900. There is NO 600 and NO 800. */
  --font:        'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', system-ui, 'Noto Sans', sans-serif;
  --font-display: var(--font);
  /* Numerals only — times, splits, km, prices. True fixed-pitch, so lap times
     and leaderboards align without fighting the gothic's proportional digits. */
  --font-mono:   'M PLUS 1 Code', ui-monospace, 'Cascadia Mono', 'SF Mono',
                 Consolas, monospace;
  /* The only stack allowed to lead with a Japanese system face. */
  --font-jp:     'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN',
                 'Yu Gothic UI', 'Yu Gothic', Meiryo, sans-serif;
  --nav-h:       60px;
}

/* ─────────────────────────── Reset ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select { font-family: inherit; }

/* ─────────────────────────── Layout ────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section    { padding: 80px 24px; max-width: 1200px; margin: 0 auto; }

/* ─────────────────────────── Navbar ────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.navbar.scrolled {
  background: rgba(10,10,18,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: var(--border);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; padding: 0 24px; gap: 32px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 17px; letter-spacing: -0.3px;
  color: var(--text); white-space: nowrap;
}
.nav-logo svg { width: 24px; height: 24px; color: var(--blue); }
.nav-links {
  display: flex; list-style: none; gap: 4px; flex: 1;
}
.nav-link {
  padding: 6px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--text-2);
  transition: color 0.2s, background 0.2s;
}
.nav-link:hover, .nav-link.active {
  color: var(--text);
  background: var(--surface-2);
}

/* ── Drop-down navigation (user 2026-08-06) ──────────────────────────────
   Four headings instead of eleven flat links, which did not fit the 1200 px
   bar. Opens on hover AND on focus-within, so it works from the keyboard;
   `.nav-item` keeps a padding-bottom bridge so the pointer can cross the gap
   into the menu without it closing. */
.nav-item { position: relative; }
.nav-top {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; line-height: inherit;
}
.nav-top::after {
  content: ''; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .55; transition: transform .18s, opacity .18s;
}
.nav-item:hover > .nav-top::after,
.nav-item:focus-within > .nav-top::after { opacity: 1; transform: rotate(225deg) translate(-2px,-2px); }

.nav-menu {
  position: absolute; top: 100%; left: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 210px; margin: 0; padding: 8px;
  list-style: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
/* The 10 px bridge: without it the pointer leaves .nav-item crossing the gap
   and the menu shuts before it can be reached. */
.nav-item::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.nav-item:hover > .nav-menu,
.nav-item:focus-within > .nav-menu {
  opacity: 1; visibility: visible; transform: translateY(6px);
}
.nav-menu .nav-link { display: block; white-space: nowrap; }

/* A gated destination stays IN the menu and says so, rather than vanishing. */
.nav-link.nav-locked { opacity: .72; }
.nav-link.nav-locked::after {
  content: '\1F512'; font-size: 10px; margin-left: 7px; opacity: .8;
}
.mobile-nav-head {
  padding: 14px 0 4px; font-size: 11px; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-3);
}
.nav-actions { display: flex; gap: 8px; }

/* ─────────────────────────── Buttons ───────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 10px;
  font-size: 14px; font-weight: 700;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--blue); color: #fff;
}
.btn-primary:hover { background: #2a96ff; transform: translateY(-1px); box-shadow: 0 4px 16px var(--blue-glow); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border-2);
}
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }
.btn-lg { padding: 12px 28px; font-size: 15px; border-radius: 12px; }

/* ─────────────────────────── Hero ──────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding: var(--nav-h) 24px 0;
  position: relative; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
.hero-glow {
  position: absolute; border-radius: 50%;
  filter: blur(100px); pointer-events: none;
}
.hero-glow-1 {
  width: 600px; height: 600px;
  top: -150px; left: -100px;
  background: rgba(10,132,255,0.12);
}
.hero-glow-2 {
  width: 500px; height: 500px;
  bottom: -100px; right: -50px;
  background: rgba(94,92,230,0.10);
}
.hero-content {
  position: relative; z-index: 1;
  max-width: 560px;
}
.hero-badge {
  display: inline-block; margin-bottom: 20px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  color: var(--blue);
  background: var(--blue-dim);
  border: 1px solid rgba(10,132,255,0.25);
}
.hero-title {
  /* ONE line, both words side by side (user 2026-08-12). The cap is 58px and
     not 84px for a measured reason: .hero-content is 560px wide, and at
     weight 900 with -2px tracking "Midnight Compass" needs about
     16 x (0.6 x font-size - 2) px — 84px overflows the column by ~250px,
     which is why the markup used to carry a hard <br>.
     nowrap keeps it honest: lengthen the words and it will visibly overflow
     rather than quietly fall back to two lines. */
  /* Bound by the VIEWPORT, not by .hero-content's 560px column: the h1 is
     centred and nowrap, so it overhangs the column symmetrically and stays
     centred on screen. 92px on a 1200px window is 841px of text against
     1152px of usable width, so .hero's overflow:hidden never bites. */
  font-size: clamp(32px, 7.6vw, 92px);
  white-space: nowrap;
  /* Centred on the PAGE, not in .hero-content's 560px column.
     text-align alone cannot do this: a nowrap line wider than its box
     starts at the content edge and overflows to the RIGHT only, so the
     title sat ~82px right of everything else. Full-bleed escape —
     viewport-wide, pulled back by half its own width — puts the line
     inside a box it fits, and the inherited text-align:center lands it
     dead centre. .hero already has overflow:hidden, so 100vw cannot
     produce a horizontal scrollbar. */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-weight: 900; line-height: 1.05;
  letter-spacing: -2px; margin-bottom: 20px;
}
.hero-accent { color: var(--blue); }
.hero-sub {
  font-size: 17px; color: var(--text-2); line-height: 1.6;
  margin-bottom: 36px; max-width: 460px;
}
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* Speedometer dial decoration */
.hero-dial {
  position: absolute; right: 6vw; top: 50%;
  transform: translateY(-50%);
  width: min(380px, 40vw); height: min(380px, 40vw);
  display: flex; align-items: center; justify-content: center;
}
.dial-ring {
  position: absolute; border-radius: 50%; border: 1px solid;
  animation: dial-spin linear infinite;
}
.dial-ring-1 {
  inset: 0; border-color: rgba(10,132,255,0.2);
  animation-duration: 20s;
}
.dial-ring-2 {
  inset: 20px; border-color: rgba(94,92,230,0.15);
  animation-duration: 35s; animation-direction: reverse;
}
.dial-ring-3 {
  inset: 46px; border-color: rgba(255,255,255,0.05);
  animation-duration: 60s;
}
.dial-ring-1::after, .dial-ring-2::after {
  content: ''; position: absolute;
  width: 8px; height: 8px; border-radius: 50%;
  top: -4px; left: 50%; transform: translateX(-50%);
}
.dial-ring-1::after { background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.dial-ring-2::after { background: var(--purple); box-shadow: 0 0 10px var(--purple); }
@keyframes dial-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.dial-center {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.dial-center span {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 900; font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  color: var(--blue);
  text-shadow: 0 0 30px var(--blue-glow);
}
.dial-center small {
  font-size: 12px; color: var(--text-2); letter-spacing: 1px; text-transform: uppercase;
}

/* ─────────────────────────── Stats strip ───────────────────────── */
.section-stats {
  padding: 0;
  background: linear-gradient(180deg, transparent 0%, var(--surface) 20%, var(--surface) 80%, transparent 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stats-grid {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.stat-card {
  padding: 36px 24px; text-align: center;
  border-right: 1px solid var(--border);
  transition: background 0.2s;
}
.stat-card:last-child { border-right: none; }
.stat-card:hover { background: var(--surface-2); }
.stat-icon { font-size: 24px; margin-bottom: 12px; }
.stat-value {
  font-size: 42px; font-weight: 900;
  font-family: var(--font-mono);
  color: var(--text); letter-spacing: -1px;
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
}
.stat-value small { font-size: 16px; color: var(--text-2); font-weight: 500; }
.stat-label { font-size: 13px; color: var(--text-2); margin-top: 6px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }

/* ─────────────────────────── Rankings ──────────────────────────── */
.rankings-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 4px;
}
.ranking-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  cursor: default;
}
.ranking-row:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
  transform: translateY(-1px);
}
.rank-badge {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; flex-shrink: 0;
  font-family: var(--font-mono);
}
.rank-badge.gold   { background: #FFD700; color: #1a1200; }
.rank-badge.silver { background: #C0C0C0; color: #1a1a1a; }
.rank-badge.bronze { background: rgba(205,127,50,0.85); color: #fff; }
.rank-badge.plain  {
  background: transparent; color: var(--text-3);
  border: 1px solid var(--border-2);
}
.ranking-info { flex: 1; min-width: 0; }
.ranking-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ranking-flag { font-size: 15px; flex-shrink: 0; }
.ranking-car {
  font-size: 12px; color: var(--text-2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ranking-speeds {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}
.ranking-top {
  font-size: 18px; font-weight: 900; font-family: var(--font-mono);
  color: var(--text); letter-spacing: 0; white-space: nowrap;
}
.ranking-top small { font-size: 11px; font-weight: 500; color: var(--text-2); margin-left: 2px; }
.ranking-sub {
  display: flex; gap: 10px; align-items: center;
}
.ranking-sub-item {
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 700; font-family: var(--font-mono);
  color: var(--text-2); white-space: nowrap;
}
.ranking-sub-item .icon-sun     { color: var(--orange); font-size: 10px; }
.ranking-sub-item .icon-month   { color: var(--blue);   font-size: 10px; }
.ranking-sub-item small { font-size: 10px; font-weight: 400; color: var(--text-3); }
.ranking-badges {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-end; margin-left: 8px;
}
/* Speed tier pill — solid fill */
.pill-speed {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 5px;
  border-radius: 6px; font-size: 11px; font-weight: 900;
  color: #fff; letter-spacing: 0.3px;
}
/* Performance class pill — tinted fill + colored border */
.pill-perf {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 5px;
  border-radius: 6px; font-size: 11px; font-weight: 900;
  color: #fff; letter-spacing: 0.3px;
  opacity: 0.85;
}
/* Class color variants */
.cls-S { background: #5E5CE6; }
.cls-A { background: #FF453A; }
.cls-B { background: #FF9F0A; }
.cls-C { background: #FFD60A; color: #1a1a00; }
.cls-D { background: #30D158; }
.cls-E { background: #0A84FF; }
.cls-F { background: #636366; }
.pill-perf.cls-S { background: rgba(94,92,230,0.25);  border: 1px solid #5E5CE6; color: #5E5CE6; opacity: 1; }
.pill-perf.cls-A { background: rgba(255,69,58,0.25);   border: 1px solid #FF453A; color: #FF453A; opacity: 1; }
.pill-perf.cls-B { background: rgba(255,159,10,0.25);  border: 1px solid #FF9F0A; color: #FF9F0A; opacity: 1; }
.pill-perf.cls-C { background: rgba(255,214,10,0.2);   border: 1px solid #FFD60A; color: #FFD60A; opacity: 1; }
.pill-perf.cls-D { background: rgba(48,209,88,0.2);    border: 1px solid #30D158; color: #30D158; opacity: 1; }
.pill-perf.cls-E { background: rgba(10,132,255,0.2);   border: 1px solid #0A84FF; color: #0A84FF; opacity: 1; }
.pill-perf.cls-F { background: rgba(99,99,102,0.2);    border: 1px solid #636366; color: #8E8E93; opacity: 1; }

/* Skeleton for rankings */
.ranking-skeleton {
  height: 460px; border-radius: 20px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite;
}
.ranking-tabs { display: flex; gap: 6px; }
.rankings-header-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.ranking-unit-toggle { display: flex; background: var(--surface-2); border-radius: 8px; padding: 2px; gap: 2px; }
.unit-btn { background: none; border: none; color: var(--text-muted); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 6px; cursor: pointer; letter-spacing: 0.5px; transition: background .15s, color .15s; }
.unit-btn.active { background: var(--accent); color: #fff; }
.recent-activity { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 16px; }
.recent-activity-title { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 10px; }
.recent-activity-list { display: flex; flex-direction: column; gap: 6px; }
.activity-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.activity-flag { font-size: 14px; flex-shrink: 0; }
.activity-name { font-weight: 700; color: var(--text-primary); flex-shrink: 0; }
.activity-car { color: var(--text-muted); flex-shrink: 0; }
.activity-speed { color: var(--blue); font-weight: 700; margin-left: auto; flex-shrink: 0; }
.activity-time { color: var(--text-muted); font-size: 11px; flex-shrink: 0; margin-left: 8px; }
.rankings-search-row { position: relative; margin-bottom: 16px; }
.rankings-search-row input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text-primary); font-size: 14px; padding: 9px 36px 9px 14px; outline: none; box-sizing: border-box; transition: border-color .15s; }
.rankings-search-row input:focus { border-color: var(--accent); }
.rankings-search-row input::placeholder { color: var(--text-muted); }
.rankings-search-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: flex; align-items: center; }
.rankings-more { text-align: center; margin-top: 24px; }

/* "JOIN BETA", swapping to "Register free" under the cursor. Both labels are
   stacked in the same box so the button never changes width mid-hover. */
.btn-beta {
  position: relative; display: inline-flex; align-items: center;
  justify-content: center; text-decoration: none;
  border-color: rgba(201,162,39,.45); color: var(--gold);
  letter-spacing: .6px;
}
.btn-beta:hover { background: rgba(201,162,39,.12); color: var(--gold-soft); }
.btn-beta .beta-hover {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; opacity: 0; font-size: 12px; letter-spacing: 0;
  transition: opacity .15s;
}
.btn-beta .beta-rest { transition: opacity .15s; }
.btn-beta:hover .beta-rest,
.btn-beta:focus-visible .beta-rest { opacity: 0; }
.btn-beta:hover .beta-hover,
.btn-beta:focus-visible .beta-hover { opacity: 1; }
/* Touch has no hover: there the button just keeps its own label. */
@media (hover: none) { .btn-beta .beta-hover { display: none; } }

#hazard-map { height: 380px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-1); }
.hazard-map-pin { width: 36px; height: 36px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.hazard-map-pin > * { transform: rotate(45deg); }
.hazard-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.hazard-legend-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); background: var(--surface-2); padding: 3px 8px; border-radius: 20px; }
.hazard-list-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 10px; }
.hazard-list-item { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.hazard-emoji { font-size: 22px; flex-shrink: 0; }
.hazard-list-type { color: var(--text-primary); font-size: 13px; font-weight: 500; }
.hazard-list-time { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.hazard-upvotes { margin-left: auto; font-size: 11px; color: var(--accent); font-weight: 700; }
.duel-result-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.duel-result-target { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--accent); text-transform: uppercase; margin-bottom: 10px; }
.duel-result-matchup { display: flex; align-items: center; gap: 12px; }
.duel-result-side { flex: 1; }
.duel-result-side.duel-winner .duel-result-name { color: #fff; font-weight: 700; }
.duel-result-side.duel-winner .duel-result-time { color: var(--accent); font-weight: 700; }
.duel-result-name { color: var(--text-secondary); font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duel-result-time { font-size: 22px; font-weight: 400; color: var(--text-primary); letter-spacing: -0.5px; margin-top: 2px; }
.duel-result-vs { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
.duel-result-ago { font-size: 11px; color: var(--text-muted); margin-top: 8px; text-align: right; }
.roads-search-row { position: relative; margin-bottom: 16px; }
.roads-search-input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text-primary); font-size: 14px; padding: 9px 36px 9px 14px; outline: none; box-sizing: border-box; transition: border-color .15s; }
.roads-search-input:focus { border-color: var(--accent); }
.roads-search-input::placeholder { color: var(--text-muted); }
.roads-search-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: flex; align-items: center; }

/* ─── Car cards grid ─────────────────────────────────────────────── */
/* No !important: this rule already comes after the earlier .rankings-list at
   equal specificity, so it wins on order alone. The !important was also what
   stopped the login gate closing the board — an inline display:none loses to
   it (2026-08-06). */
.rankings-list {
  display: grid;
  flex-direction: unset;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 4px;
}

.car-card {
  background: linear-gradient(145deg, #17171f 0%, #0d0d15 100%);
  border: 1.5px solid var(--cc-dim, rgba(255,255,255,0.08));
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px var(--cc-shadow, rgba(0,0,0,0.4));
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.car-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 48px var(--cc-shadow, rgba(0,0,0,0.5));
}

/* Photo area */
.car-card-photo {
  height: 200px; position: relative; overflow: hidden;
}
.car-card-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.car-card-photo-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, var(--cc-dim, rgba(94,92,230,0.2)) 0%, #17171f 100%);
  display: flex; align-items: center; justify-content: center;
}
.car-card-photo-placeholder svg {
  width: 72px; height: 72px; opacity: 0.25;
  color: var(--cc, var(--purple));
}

/* Gradient fade at bottom of photo into card body */
.car-card-fade {
  position: absolute; bottom: 0; left: 0; right: 0; height: 90px;
  background: linear-gradient(to bottom, transparent, #17171f);
  pointer-events: none;
}

/* Name + OVR overlaid at bottom of photo */
.car-card-photo-bottom {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 14px 10px;
}
.car-card-name {
  font-size: 16px; font-weight: 900; color: #fff; line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.car-card-origin {
  font-size: 9px; font-weight: 700; letter-spacing: 1.4px;
  color: rgba(255,255,255,0.55); margin-top: 3px; text-transform: uppercase;
}

/* OVR badge (bottom-right of photo) */
.car-card-ovr {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 4px; flex-shrink: 0;
}
.car-card-ovr-letter {
  width: 48px; height: 48px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 900; color: #fff;
  box-shadow: 0 4px 14px var(--cc-shadow, rgba(94,92,230,0.5));
  line-height: 1;
}
.car-card-ovr-label {
  font-size: 8px; font-weight: 700; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.4); text-transform: uppercase; margin-top: 3px;
}

/* Rank badge overlaid top-left on photo */
.car-card-rank-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; font-family: var(--font-mono);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.car-card-rank-badge.gold   { background: #FFD700; color: #1a1200; }
.car-card-rank-badge.silver { background: #C0C0C0; color: #1a1a1a; }
.car-card-rank-badge.bronze { background: rgba(205,127,50,0.9); color: #fff; }
.car-card-rank-badge.plain  { background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.2); }

/* Card stats body */
.car-card-body { padding: 4px 14px 14px; }

/* Driver strip */
.car-card-driver {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0 2px;
  font-size: 14px; font-weight: 700; color: var(--text);
}
.car-card-driver-flag { font-size: 15px; }
.you-badge { background: rgba(10,132,255,0.2); color: var(--blue); font-size: 9px; font-weight: 900; letter-spacing: 0.8px; padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(10,132,255,0.35); }
.car-card-me { outline: 2px solid rgba(10,132,255,0.4); outline-offset: -1px; }

/* Section divider (matches app: coloured bar + label + line) */
.car-card-divider {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 0 4px;
}
.car-card-divider-bar {
  width: 3px; height: 12px; border-radius: 2px;
  background: var(--cc, var(--purple)); flex-shrink: 0;
}
.car-card-divider-label {
  font-size: 9px; font-weight: 700; letter-spacing: 1.8px;
  color: var(--cc, var(--purple)); text-transform: uppercase;
}
.car-card-divider-line {
  flex: 1; height: 1px; background: rgba(255,255,255,0.06);
}

/* Stat rows */
.car-stat-row {
  display: flex; align-items: center; gap: 8px; padding: 2.5px 0;
}
.car-stat-label {
  flex: 1; font-size: 10px; font-weight: 500; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.45); text-transform: uppercase;
}
.car-stat-value {
  font-size: 13px; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; font-family: var(--font-mono);
  white-space: nowrap;
}
.car-stat-value.muted { color: rgba(255,255,255,0.25); font-weight: 400; }

/* Admin delete on card */
.car-card-delete {
  display: flex; justify-content: flex-end; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05);
}

/* ─────────────────────────── Section header ────────────────────── */
.section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 36px; gap: 16px; flex-wrap: wrap;
}
.section-title {
  font-size: 32px; font-weight: 900; letter-spacing: -0.5px;
}
.section-sub { font-size: 15px; color: var(--text-2); margin-top: 4px; }

/* ─────────────────────────── Cards ─────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 0;
}
.card-header h3 { font-size: 16px; font-weight: 700; }
.badge {
  background: var(--blue-dim); color: var(--blue);
  border: 1px solid rgba(10,132,255,0.2);
  border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 700;
}

/* ─────────────────────────── Calendar ──────────────────────────── */
.events-layout {
  display: grid; grid-template-columns: 360px 1fr; gap: 20px; align-items: start;
}
.calendar-card { padding: 20px; position: relative; }
.cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.cal-title { font-weight: 700; font-size: 15px; }
.cal-nav {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--surface-2); color: var(--text-2);
  font-size: 18px; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.cal-nav:hover { background: var(--surface-3); color: var(--text); }
.cal-weekdays {
  display: grid; grid-template-columns: repeat(7,1fr);
  margin-bottom: 8px;
}
.cal-weekdays span {
  text-align: center; font-size: 11px; font-weight: 700;
  color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px;
  padding: 4px 0;
}
.cal-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.cal-cell {
  aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: 8px; position: relative;
  font-size: 13px; color: var(--text-2);
  transition: background 0.15s;
  gap: 2px;
}
.cal-cell.empty { pointer-events: none; }
.cal-cell.today { background: var(--blue-dim); }
.cal-cell.today span { color: var(--blue); font-weight: 700; }
.cal-cell.has-event { cursor: pointer; color: var(--text); }
.cal-cell.has-event:hover { background: var(--surface-2); }
.cal-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--blue);
}

/* Day panel */
.day-panel {
  display: none; margin-top: 16px;
  background: var(--surface-2); border-radius: 12px;
  border: 1px solid var(--border);
}
.day-panel.visible { display: block; }
.day-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 13px;
}
.day-panel-list { padding: 12px; max-height: 280px; overflow-y: auto; }

/* Upcoming list */
.upcoming-card { padding: 0; }
.upcoming-list { padding: 0 20px 20px; overflow-y: auto; max-height: 500px; }
.event-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.event-row:last-child { border-bottom: none; }
.event-row-date {
  display: flex; flex-direction: column; align-items: center;
  min-width: 44px; padding: 8px 6px; border-radius: 10px;
  background: var(--blue-dim);
}
.event-row-date .month { font-size: 9px; font-weight: 700; color: var(--blue); letter-spacing: 0.5px; text-transform: uppercase; }
.event-row-date .day   { font-size: 22px; font-weight: 900; color: var(--text); font-family: var(--font-mono); line-height: 1; }
.event-row-info { flex: 1; min-width: 0; }
.event-row-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-row-loc  { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.event-row-count { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.event-row-count strong { color: var(--blue); }

/* Day panel event card */
.day-event-item {
  padding: 10px; border-radius: 8px;
  background: var(--surface-3); margin-bottom: 8px;
}
.day-event-item:last-child { margin-bottom: 0; }
.day-event-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.day-event-title { font-size: 13px; font-weight: 700; }
.day-event-meta  { font-size: 11px; color: var(--text-2); display: flex; gap: 10px; flex-wrap: wrap; }
.day-event-fee   { color: var(--orange); font-weight: 700; }
.day-event-count { color: var(--blue); }
.day-event-type  { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 5px; white-space: nowrap; flex-shrink: 0; }
.day-event-type--event   { background: rgba(10,132,255,.15); color: #0A84FF; }
.day-event-type--showoff { background: rgba(249,115,22,.15); color: #f97316; }

/* ─────────────────────────── Map section ───────────────────────── */
.section-map { padding: 0; }
.map-header {
  padding: 80px 24px 32px;
}
#events-map {
  height: 520px; width: 100%;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.map-popup { min-width: 160px; font-family: var(--font); }
.map-popup strong { display: block; font-size: 13px; margin-bottom: 4px; }
.map-popup div { font-size: 11px; color: #555; margin-top: 2px; }

/* custom map pin */
.map-marker-pin {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue);
  border: 2px solid white;
  box-shadow: 0 0 8px var(--blue-glow);
}

/* ─────────────────────────── Marketplace ───────────────────────── */
.market-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.filter-btn {
  padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 500;
  color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border);
  transition: all 0.15s;
}
.filter-btn:hover { background: var(--surface-2); color: var(--text); }
.filter-btn.active {
  background: var(--blue-dim); color: var(--blue);
  border-color: rgba(10,132,255,0.3);
}
.sprint-target-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.sprint-list { display: flex; flex-direction: column; gap: 6px; }
.sprint-row { display: flex; align-items: center; gap: 14px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; }
.sprint-rank { min-width: 32px; text-align: center; font-size: 18px; }
.sprint-info { flex: 1; min-width: 0; }
.sprint-name { color: var(--text-primary); font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sprint-car { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.sprint-time { color: var(--blue); font-size: 22px; font-weight: 400; letter-spacing: -0.5px; flex-shrink: 0; }
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.listing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.listing-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--border-2);
}
.listing-img {
  width: 100%; height: 180px; object-fit: cover;
  display: block;
  background: var(--surface-2);
}
.listing-img-placeholder {
  width: 100%; height: 180px;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: var(--text-3);
}
.listing-body { padding: 16px; }
.listing-category-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.listing-category {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--blue);
}
.listing-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.listing-car   { font-size: 12px; color: var(--text-2); margin-bottom: 10px; }
.listing-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.listing-price  { font-size: 16px; font-weight: 900; color: var(--blue); }
.listing-seller { font-size: 11px; color: var(--text-2); }
.market-more { text-align: center; margin-top: 32px; }

/* ─────────────────────────── Skeleton loaders ──────────────────── */
.skeleton, .skeleton-card {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}
.skeleton { height: 60px; margin-bottom: 10px; }
.skeleton-card { height: 300px; border-radius: var(--radius-lg); }
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-list { padding: 20px; }

/* ─────────────────────────── Empty state ───────────────────────── */
.empty-msg { color: var(--text-2); font-size: 14px; padding: 24px 0; text-align: center; }

/* ─────────────────────────── Modals ────────────────────────────── */
.modal {
  display: none; position: fixed; inset: 0; z-index: 200;
  align-items: center; justify-content: center;
}
.modal.open { display: flex; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal-box {
  position: relative; z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  width: min(640px, 94vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: modal-in 0.2s ease;
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 18px; font-weight: 700; }
.modal-close {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface-2); color: var(--text-2);
  font-size: 14px; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.modal-close:hover { background: var(--surface-3); color: var(--text); }
.modal-body   { padding: 20px 24px; overflow-y: auto; flex: 1; }
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
}
body.modal-open { overflow: hidden; }
.modal-title { font-size: 18px; font-weight: 700; }

/* ── Overlay-style modals (older pattern: modal-overlay > modal) ── */
.modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }
/* Reset inner .modal so it's a content box, not a fixed overlay */
.modal-overlay > .modal,
.modal-overlay > .modal-card {
  display: flex !important;
  position: relative !important;
  inset: unset !important;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  width: 100%;
  max-height: 88vh;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: modal-in 0.2s ease;
  overflow-y: auto;
}
.modal-card {
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

/* ─────────────────────────── Forms ─────────────────────────────── */
.form-row    { margin-bottom: 18px; }
.form-2col   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.form-3col   { display: grid; grid-template-columns: 1fr 1fr 80px; gap: 8px; }

/* Tire size selector */
.tire-presets {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
}
.tire-preset-btn {
  padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border-2);
  background: var(--surface-2); color: var(--text-2);
  font-size: 11px; font-weight: 700; cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.tire-preset-btn:hover { border-color: var(--blue); color: var(--blue); }
.tire-preset-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.tire-size-display {
  text-align: center; font-size: 20px; font-weight: 900;
  color: var(--blue); letter-spacing: 0.5px;
  padding: 8px 0 4px; font-variant-numeric: tabular-nums;
}
.form-label  { display: block; font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
.form-hint   { font-size: 11px; color: var(--text-3); font-weight: 400; }
.form-input  {
  width: 100%; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-2); border-radius: 10px;
  padding: 10px 14px; font-size: 14px;
  outline: none; transition: border-color 0.15s;
  appearance: none;
}
.form-input:focus { border-color: var(--blue); }
.form-input::placeholder { color: var(--text-3); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-select  { cursor: pointer; }
.form-error   { color: var(--red); font-size: 12px; margin-top: 8px; }

/* Location picker map */
#picker-map {
  height: 220px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border-2); margin-top: 4px;
}

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--border-2); border-radius: 10px;
  min-height: 100px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.upload-zone:hover { border-color: var(--blue); background: var(--blue-dim); }
#ev-upload-prompt, #ls-upload-prompt {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 16px; color: var(--text-2); font-size: 13px;
  pointer-events: none;
}
.upload-icon { font-size: 28px; }
.upload-preview-hidden { display: none; width: 100%; }
.upload-preview-hidden img {
  width: 100%; max-height: 200px; object-fit: cover;
  display: block; border-radius: 8px;
}

/* ─────────────────────────── Toast ─────────────────────────────── */
.toast {
  position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--border-2);
  padding: 12px 24px; border-radius: 30px;
  font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s;
  opacity: 0; pointer-events: none; z-index: 999; white-space: nowrap;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.toast.success { border-color: rgba(48,209,88,0.4); color: var(--green); }
.toast.error   { border-color: rgba(255,69,58,0.4);  color: var(--red); }

/* ─────────────────────────── Footer ────────────────────────────── */
.footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.footer-inner {
  max-width: 1200px; margin: 0 auto; padding: 32px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.footer-logo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px;
}
.footer-logo svg { width: 20px; height: 20px; color: var(--blue); }
.footer-copy { font-size: 13px; color: var(--text-2); }

/* ─────────────────────────── Leaflet overrides ──────────────────── */
.leaflet-container { background: #1a1a28; font-family: var(--font); }
.leaflet-tile-pane { filter: brightness(0.9) contrast(1.05); }
.leaflet-popup-content-wrapper {
  background: var(--surface-2); color: var(--text);
  border-radius: 10px; border: 1px solid var(--border-2);
  box-shadow: var(--shadow);
}
.leaflet-popup-tip { background: var(--surface-2); }
.leaflet-popup-content { margin: 12px 14px; }
.leaflet-control-zoom a {
  background: var(--surface-2) !important; color: var(--text) !important;
  border-color: var(--border-2) !important;
}
.leaflet-control-zoom a:hover { background: var(--surface-3) !important; }
.leaflet-bar { border: none !important; box-shadow: var(--shadow) !important; }

/* ─────────────────────────── Admin mode ────────────────────────── */
/* auth-only: hidden until user is signed in (set via JS on init) */
.auth-only { display: none; }

.admin-only { display: none !important; }
.admin-mode .admin-only { display: inline-flex !important; }

.user-badge {
  padding: 2px 10px; border-radius: 20px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: lowercase;
  color: var(--blue);
  background: rgba(10,132,255,0.12);
  border: 1px solid rgba(10,132,255,0.25);
  white-space: nowrap; max-width: 140px;
  overflow: hidden; text-overflow: ellipsis;
}

.admin-badge {
  display: none;
  padding: 2px 10px; border-radius: 20px;
  font-size: 10px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--orange);
  background: rgba(255,159,10,0.12);
  border: 1px solid rgba(255,159,10,0.25);
  white-space: nowrap;
}
.admin-mode .admin-badge { display: inline-flex; align-items: center; }

/* Lock icon button in navbar */
.btn-icon {
  width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; flex-shrink: 0;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border-2);
  transition: all 0.15s;
}
.btn-icon:hover { background: var(--surface-3); color: var(--text); }
.lang-toggle { display: flex; gap: 4px; align-items: center; }
.lang-btn {
  width: 32px; height: 32px; padding: 0; border-radius: 8px; border: 1px solid transparent;
  background: transparent; cursor: pointer; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.45; transition: all 0.15s;
}
.lang-btn:hover { opacity: 0.8; background: var(--surface-2); }
.lang-btn.lang-active { opacity: 1; background: var(--surface-2); border-color: var(--border-2); }
.admin-mode .btn-icon#admin-lock-btn {
  color: var(--orange);
  border-color: rgba(255,159,10,0.35);
  background: rgba(255,159,10,0.1);
}
.admin-mode .btn-icon#admin-lock-btn:hover { background: rgba(255,159,10,0.18); }

/* Delete button — shown inside cards/rows only in admin mode */
.delete-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px;
  background: rgba(255,69,58,0.1); color: var(--red);
  border: 1px solid rgba(255,69,58,0.2);
  font-size: 13px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.delete-btn:hover {
  background: rgba(255,69,58,0.22);
  border-color: rgba(255,69,58,0.45);
  transform: scale(1.08);
}

/* Smaller modal variant for login */
.modal-box-sm { max-width: 400px !important; }

/* Larger modal variant for topic detail */
.modal-box-lg { max-width: 760px !important; }

/* ─────────────────────────── Knowledge Base ─────────────────────── */
.kb-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.kb-search-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
@media (max-width: 600px) { .kb-search-row { grid-template-columns: 1fr; } }

.kb-search { padding: 8px 14px !important; font-size: 14px !important; }

.kb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

/* Topic card */
.topic-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.topic-card:hover {
  border-color: var(--blue-dim);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

.topic-card-photo {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
}
.topic-card-photo-placeholder {
  width: 100%;
  height: 160px;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--text-3);
}

.topic-card-body {
  padding: 14px 16px 16px;
}
.topic-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.topic-card-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #fff;
  background: var(--blue);
  padding: 2px 8px;
  border-radius: 20px;
}
.topic-card-vehicle {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topic-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.topic-card-excerpt {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.topic-card-footer {
  display: flex;
  align-items: center;
  gap: 14px;
}
.topic-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-2);
}
.topic-stat svg { width: 13px; height: 13px; }
.topic-stat.upvoted { color: var(--blue); }

/* Topic detail modal body */
.td-body { padding: 0 !important; }
.td-cover {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.td-content { padding: 20px 24px 24px; }
.td-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.td-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.9px;
  color: #fff;
  background: var(--blue);
  padding: 3px 10px;
  border-radius: 20px;
}
.td-vehicle {
  font-size: 13px;
  color: var(--text-2);
}
.td-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}
.td-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.td-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-2);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.td-action-btn:hover, .td-action-btn.active {
  color: var(--blue);
  border-color: var(--blue-dim);
  background: var(--blue-dim);
}
.td-body-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 20px;
  white-space: pre-wrap;
}
.td-media-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 20px;
  scrollbar-width: thin;
}
.td-media-item {
  flex: 0 0 180px;
  height: 130px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  position: relative;
}
.td-media-item img { width: 100%; height: 100%; object-fit: cover; }
.td-media-item.video-thumb { cursor: pointer; }
.td-media-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
}
.td-media-play svg { width: 44px; height: 44px; color: #fff; opacity: 0.9; }

.td-divider { border: none; border-top: 1px solid var(--border); margin: 0 0 20px; }
.td-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Comments */
.td-comments { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.td-comment {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.td-comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.td-comment-author {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.td-comment-own .td-comment-author { color: var(--blue); }
.td-comment-you {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #fff;
  background: var(--blue);
  padding: 1px 5px;
  border-radius: 4px;
}
.td-comment-date {
  font-size: 11px;
  color: var(--text-3);
  margin-left: auto;
}
.td-comment-body {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}

/* Add comment form */
.td-add-comment { display: flex; flex-direction: column; gap: 8px; }
.td-comment-row { display: flex; gap: 8px; align-items: flex-start; }
.td-comment-row textarea {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  color: var(--text);
  padding: 10px 14px;
  font-size: 14px;
  resize: none;
  min-height: 72px;
  outline: none;
  font-family: var(--font);
  transition: border-color 0.15s;
}
.td-comment-row textarea:focus { border-color: var(--blue); }
.td-comment-send {
  background: var(--blue);
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 15px;
  transition: opacity 0.15s;
  margin-top: 2px;
}
.td-comment-send:hover { opacity: 0.85; }
.td-comment-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Create topic media helpers */
.ct-photo-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ct-photo-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
}
.ct-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ct-photo-thumb button {
  position: absolute;
  top: 2px; right: 2px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border-radius: 50%;
  width: 18px; height: 18px;
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}
.ct-video-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ct-video-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
  background: var(--surface-2);
  border-radius: 8px;
  padding: 6px 10px;
}
.ct-video-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-video-item button { color: var(--red); font-size: 14px; }
.kb-video-add { display: flex; gap: 8px; margin-bottom: 6px; }
.kb-video-add input { flex: 1; }

/* ─────────────────────────── Responsive ────────────────────────── */
@media (max-width: 900px) {
  .events-layout { grid-template-columns: 1fr; }
  .hero-dial     { display: none; }
  .stats-grid    { grid-template-columns: repeat(2,1fr); }
  .stat-card:nth-child(2) { border-right: none; }
  /* Nav: switch to the hamburger EARLY so the 8 links never overflow the bar
     horizontally on tablets / large phones (was only at ≤600px → overflow). */
  .nav-links       { display: none; }
  .hamburger       { display: flex; }
  .nav-inner       { gap: 12px; padding: 0 16px; }
  /* Keep only Sign In/Out + the language toggle in the bar; rest via hamburger. */
  .nav-actions .btn:not([id="user-signin-btn"]):not([id="user-signout-btn"]) { display: none !important; }
}
/* ─── Hamburger button ─────────────────────────────── */
/* ⚠️ SCOPED TO >900px ON PURPOSE. As a bare `.hamburger{display:none}` this sat
   AFTER the @media (max-width:900px) block with the same specificity (0,1,0),
   so it WON there — and .nav-links is hidden from 900px down. The result:
   between 601 and 900px BOTH the links and the burger computed to display:none
   and the site had NO navigation at all. Measured live at 768px on 2026-08-06.
   That is every tablet in portrait (iPad 768, iPad Mini 744, Surface) and every
   phone turned sideways. Do not un-scope this rule. */
@media (min-width: 901px) {
  .hamburger { display: none; }
}

/* ─── Mobile nav dropdown ─────────────────────────── */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 8px 0 12px;
  /* The panel hangs off a position:fixed navbar, so anything past the fold was
     simply unreachable — on a 375x553 iPhone SE the list was cut off mid
     "Workshops" and would not scroll (measured 2026-08-06). */
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav.open { display: flex; }
.mobile-nav-link {
  padding: 12px 20px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.15s;
}
.mobile-nav-link:hover { color: var(--text); }
/* Admin entries in the burger. The two admin buttons in the bar (Accounts,
   + Event) are hidden below 900px by the .nav-actions rule, which left account
   approval and event creation impossible from a phone or tablet. */
.mobile-nav .admin-only { display: none !important; }
.admin-mode .mobile-nav .admin-only { display: block !important; }

/* Anchor jumps landed UNDER the fixed navbar on small screens: the desktop
   .section padding cleared it, the mobile override does not, and #features
   carries padding-top:0 so it landed at exactly y=0. */
:target,
section[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

@media (max-width: 600px) {
  /* ── Nav ── */
  .nav-links       { display: none; }
  .hamburger       { display: flex; }
  .navbar          { height: auto; }
  .nav-inner       { height: var(--nav-h); padding: 0 12px; gap: 8px; }
  /* Hide text action buttons on mobile — use hamburger instead */
  .nav-actions .btn:not([id="user-signin-btn"]):not([id="user-signout-btn"]) { display: none !important; }

  /* ⚠️ The HAMBURGER WAS OFF SCREEN (measured 2026-08-06 at 375 px: it began
     at x=376 on a 375 px viewport, so the only way into the menu on a phone
     was invisible — the body clips the overflow, so there was not even a
     scrollbar to hint at it).
     The row was logo-with-wordmark (195 px) + Sign in (97) + language toggle
     (68) + burger (36) = 396 plus padding. Dropping the wordmark to the mark
     alone gives back ~150 px and everything fits with room to spare. */
  .nav-logo span   { display: none; }
  .nav-logo        { flex: none; }
  .nav-actions     { gap: 6px; margin-left: auto; }
  #user-signin-btn, #user-signout-btn { padding: 7px 12px; font-size: 13px; }
  .lang-toggle     { flex: none; }
  .hamburger       { flex: none; }

  /* ── Layout ── */
  .section         { padding-block: 48px; padding-inline: 16px; }
  .container       { padding-inline: 16px; }
  .section.container { padding-block: 48px; padding-inline: 16px; }

  /* ── Section headers ── */
  .section-header  { flex-direction: column; align-items: flex-start; gap: 12px; }
  .section-title   { font-size: 26px; }

  /* ── Hero ── */
  /* 360px screen = ~328px of column; 7.4vw lands at 26.6px there, which
     keeps the two words on one line without shrinking them further. */
  .hero-title      { font-size: clamp(26px, 8.4vw, 44px); }
  .hero-sub        { font-size: 15px; }
  .hero            { padding-inline: 16px; }

  /* ── Stats ── */
  .stats-grid      { grid-template-columns: repeat(2,1fr); }
  .stat-card       { padding: 24px 16px; }
  .stat-value      { font-size: 32px; }

  /* ── Forms ── */
  .form-2col       { grid-template-columns: 1fr; }
  .form-3col       { grid-template-columns: 1fr 1fr; }

  /* ── Modals ── */
  .modal-overlay   { padding: 12px; align-items: flex-end; }
  .modal-overlay > .modal,
  .modal-overlay > .modal-card { max-height: 92vh; border-radius: 20px 20px 12px 12px; }
  .modal-box       { width: 100%; border-radius: 20px 20px 12px 12px; }

  /* ── Misc ── */
  .footer-inner    { flex-direction: column; text-align: center; }
  .market-grid     { grid-template-columns: 1fr; }
  .map-header.container { padding-inline: 16px; }
  /* Hide ranking sub-badges on very small screens to prevent overflow */
  .ranking-badges { display: none; }
}

/* ─────────────────────────── Rides ─────────────────────────────── */
.rides-filters { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.rides-list    { display: flex; flex-direction: column; gap: 12px; }
.ride-card {
  background: var(--card-bg);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ride-route { font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ride-arrow { color: var(--text-muted); font-size: 12px; }
.ride-meta  { font-size: 13px; color: var(--text-muted); }
.ride-notes { font-size: 13px; color: var(--text-2); font-style: italic; }
.ride-actions { display: flex; justify-content: flex-end; margin-top: 4px; }

/* ─────────────────────────── News ──────────────────────────────── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.news-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s;
}
.news-card:hover { border-color: var(--accent); }
.news-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.news-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.news-card-date  { font-size: 12px; color: var(--text-muted); }
.news-card-title { font-size: 16px; font-weight: 700; color: var(--text-1); line-height: 1.3; }
.news-card-body-text {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ──────────────────────── Showoff Battle ───────────────────────── */

/* Filter bar */
.showoff-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.showoff-filter {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.showoff-filter:hover { border-color: var(--blue); color: var(--text); }
.showoff-filter.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* Card grid */
.showoff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* Event card */
.showoff-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color .2s, transform .15s;
}
.showoff-card:hover { border-color: var(--blue); transform: translateY(-2px); }
.showoff-card--live { border-color: #22c55e; }
.showoff-card--finals { border-color: var(--orange); }

.showoff-card-header {
  height: 140px;
  background: linear-gradient(135deg, #1c1c28, #252535);
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 12px;
}
.showoff-card-header img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.showoff-card-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 60%);
}

.showoff-status-badge {
  position: relative;
  z-index: 1;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}
.showoff-status-badge .live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: pulse-dot 1.2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

.showoff-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.showoff-card-title { font-size: 16px; font-weight: 700; color: var(--text); }
.showoff-card-meta  { font-size: 12px; color: var(--text-2); display: flex; gap: 10px; }

/* Discipline chips */
.showoff-disc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.showoff-disc-chip {
  background: var(--surface-3);
  border-radius: 10px;
  padding: 3px 9px;
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
}

/* Slot / spots */
.showoff-spots {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}
.showoff-spots--full { color: var(--red); }

.showoff-progress-bar {
  height: 5px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden;
}
.showoff-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--blue);
  transition: width .4s ease;
}
.showoff-progress-fill--full  { background: var(--red); }
.showoff-progress-fill--near  { background: var(--orange); }

.showoff-card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 4px;
}

/* Performance class badge */
.perf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.perf-s  { background: #9333ea; color: #fff; }
.perf-a  { background: #ef4444; color: #fff; }
.perf-b  { background: #f97316; color: #fff; }
.perf-c  { background: #eab308; color: #000; }
.perf-d  { background: #22c55e; color: #000; }
.perf-e  { background: #3b82f6; color: #fff; }
.perf-f  { background: #6b7280; color: #fff; }

/* ── Event detail modal (showoff) ──────────────────────────────── */
.showoff-event-hero {
  height: 180px;
  background: linear-gradient(135deg, #1c1c28, #252535);
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.showoff-event-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.showoff-event-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8), transparent 60%);
}
.showoff-event-hero-title {
  position: relative; z-index: 1;
  font-size: 20px; font-weight: 900; color: #fff;
}

.showoff-event-sections { display: flex; flex-direction: column; gap: 20px; }

.showoff-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 10px;
}

/* Participant grid */
.showoff-pax-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}
.showoff-pax-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 10px;
  text-align: center;
  transition: border-color .15s;
}
.showoff-pax-card.eliminated { opacity: .45; }
.showoff-pax-card.finalist   { border-color: var(--orange); }
.showoff-pax-card.winner     { border-color: #22c55e; }

.showoff-pax-photo {
  width: 100%;
  height: 90px;
  object-fit: cover;
  background: var(--surface-3);
  display: block;
}
.showoff-pax-photo-placeholder {
  width: 100%;
  height: 90px;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.showoff-pax-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-top: 8px;
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.showoff-pax-car {
  font-size: 11px;
  color: var(--text-2);
  padding: 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.showoff-pax-score {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  margin-top: 4px;
}

/* Round / voting */
.showoff-round-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.showoff-round-title { font-size: 15px; font-weight: 700; }
.showoff-round-state {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--surface-3);
}
.showoff-round-state--open   { background: rgba(34,197,94,.2); color: #22c55e; }
.showoff-round-state--closed { background: var(--surface-3); color: var(--text-2); }

.showoff-vote-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.showoff-vote-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.showoff-vote-btn:hover  { border-color: var(--blue); color: var(--blue); }
.showoff-vote-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }

.showoff-avg-score {
  font-size: 22px;
  font-weight: 900;
  color: var(--blue);
  text-align: center;
  margin: 6px 0;
}

/* Visitor list */
.showoff-visitor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.showoff-visitor-row:last-child { border-bottom: none; }
.showoff-visitor-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  flex-shrink: 0;
}
.showoff-visitor-name { font-size: 13px; font-weight: 700; }

/* Podium / results */
.showoff-podium {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: flex-end;
  padding: 16px 0 8px;
}
.showoff-podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.showoff-podium-medal { font-size: 28px; line-height: 1; }
.showoff-podium-name  { font-size: 12px; font-weight: 700; text-align: center; }
.showoff-podium-pts   { font-size: 11px; color: var(--text-2); }
.showoff-podium-bar {
  width: 100%;
  border-radius: 6px 6px 0 0;
  background: var(--surface-3);
}
.showoff-podium-place--1 .showoff-podium-bar { height: 70px; background: #f59e0b; }
.showoff-podium-place--2 .showoff-podium-bar { height: 50px; background: #94a3b8; }
.showoff-podium-place--3 .showoff-podium-bar { height: 36px; background: #b45309; }

/* Empty state */
.showoff-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-2);
}
.showoff-empty-icon { font-size: 48px; margin-bottom: 12px; }
.showoff-empty-text { font-size: 15px; }

/* Responsive */
@media (max-width: 600px) {
  .showoff-grid { grid-template-columns: 1fr; }
  .showoff-pax-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   KNOWLEDGE BASE — Vehicle-first redesign
═══════════════════════════════════════════════════════════════ */

/* Vehicle type tabs */
.kb-type-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}
.kb-type-tab {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
}
.kb-type-tab.active, .kb-type-tab:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Vehicle row search */
.kb-vehicle-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.kb-vehicle-field { flex: 1; min-width: 140px; }
.kb-year-input    { width: 100px; flex: 0 0 100px; }
.kb-clear-btn     { flex: 0 0 auto; padding: 0 12px; height: 40px; }

/* Vehicle-type selector in modal */
.kb-vtype-btns {
  display: flex;
  gap: 10px;
  margin-bottom: 4px;
}
.kb-vtype-btn {
  flex: 1;
  padding: 8px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
}
.kb-vtype-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}

/* Steps badge on topic card */
.topic-steps-badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--accent);
  font-weight: 700;
}

/* ── Topic detail: steps ───────────────────────────────────── */
.td-steps { margin: 20px 0; }
.td-step {
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.td-step:last-child { border-bottom: none; margin-bottom: 0; }
.td-step-num {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  margin-top: 2px;
}
.td-step-content { flex: 1; min-width: 0; }
.td-step-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-1);
  margin-bottom: 6px;
}
.td-step-body {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 10px;
  white-space: pre-wrap;
}
.td-step-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.td-step-photos img {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  cursor: zoom-in;
  border: 1px solid var(--border);
}
.td-step-video {
  display: block;
  position: relative;
  width: 200px;
  height: 112px;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid var(--border);
}
.td-step-video img { width: 100%; height: 100%; object-fit: cover; }

/* ── Step editor in create modal ──────────────────────────── */
.ct-step {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.ct-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.ct-step-num {
  font-weight: 700;
  font-size: 13px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ct-step-media {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.ct-step-media-thumb {
  position: relative;
  width: 64px;
  height: 48px;
}
.ct-step-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.ct-step-media-thumb button {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--red, #ef4444);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ct-step-photo-btn, .ct-step-video-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  background: none;
  transition: border-color .15s;
}
.ct-step-photo-btn:hover, .ct-step-video-btn:hover { border-color: var(--accent); }

@media (max-width: 600px) {
  .kb-type-tabs { flex-wrap: wrap; }
  .kb-vehicle-row { flex-direction: column; }
  .kb-year-input { width: 100%; flex: 1; }
  .td-step-photos img { width: 90px; height: 68px; }
}


/* ─────────────────────── Compass mark (2026-08-04) ─────────────────────── */
/* The emblem is the APP ICON: white artwork on a SOLID BLACK square, not a
   transparent file. mix-blend-mode:screen is what drops that black against the
   equally black page — without it every mark renders as a black tile. Do not
   remove it unless the artwork itself gains an alpha channel. */
.hero-logo{
  display:block; margin:0 auto 18px; width:132px; height:132px;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 18px rgba(201,162,39,.30));
}
.btn-mark{
  width:20px; height:20px; vertical-align:-4px; margin-right:10px;
  mix-blend-mode:screen; opacity:.95;
}
/* The PATREON wordmark, set as text rather than shipped as an image
   (2026-08-08). The real logo is a plain uppercase grotesk with wide tracking,
   so type reproduces it exactly — and it inherits the button's colour, which a
   white PNG could not. `currentColor` is the whole point: the mark follows the
   ghost button through hover and any future palette change. */
.patreon-mark{
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:currentColor;
  /* The wordmark's trailing rule, at type scale. */
  padding-right:.5em;
  border-right:2px solid currentColor;
  margin-left:.15em;
}
.btn-patreon-text{ letter-spacing:0; }

/* Nav + footer use the same file at small sizes. */
.nav-mark{ width:24px; height:24px; display:block; mix-blend-mode:screen; }
.footer-mark{
  width:20px; height:20px; display:block;
  mix-blend-mode:screen; opacity:.9;
}
@media (max-width:640px){ .hero-logo{ width:96px; height:96px; } }

/* ══════════════════════════════════════════════════════════════════════
   THE APP'S BOX SHAPE (user 2026-08-06)

   `McPanel` in the app: the silhouette is sheared a few pixels so it leans
   like an italic, and two opposite corners are chamfered flat. Same geometry
   here, same numbers — lean 5 px, cut 12 px — so a card on the site and a card
   in the app are recognisably the same object.

   Colour is deliberately untouched: the site keeps its black/gold restraint.
   This changes the SHAPE, nothing else.

   How the outline works: clip-path clips a border away, so the line cannot be
   a border. The element paints the line colour and an inset ::after paints the
   fill on top, leaving 1 px of line following the silhouette exactly. ::before
   carries the app's second, offset outline.
   ══════════════════════════════════════════════════════════════════════ */
:root { --mc-lean: 5px; --mc-cut: 12px; }

.mc-shape,
.card, .listing-card, .ranking-row, .kb-card, .event-card, .login-gate,
.rg-card, .ws-panel, .ws-card {
  position: relative;
  border: none !important;
  border-radius: 0 !important;
  background: var(--border-2);
  clip-path: polygon(
    calc(var(--mc-lean) + var(--mc-cut)) 0,
    100% 0,
    calc(100% - var(--mc-cut)) var(--mc-cut),
    calc(100% - var(--mc-lean)) calc(100% - var(--mc-cut)),
    calc(100% - var(--mc-lean) - var(--mc-cut)) 100%,
    0 100%,
    var(--mc-cut) calc(100% - var(--mc-cut)),
    var(--mc-lean) var(--mc-cut)
  );
}
.mc-shape::after,
.card::after, .listing-card::after, .ranking-row::after, .kb-card::after,
.event-card::after, .login-gate::after, .rg-card::after, .ws-panel::after,
.ws-card::after {
  content: ''; position: absolute; inset: 1px; z-index: 0;
  background: var(--surface);
  clip-path: inherit;
  pointer-events: none;
}
/* Content has to sit above the fill layer. */
.mc-shape > *,
.card > *, .listing-card > *, .ranking-row > *, .kb-card > *,
.event-card > *, .login-gate > *, .rg-card > *, .ws-panel > *, .ws-card > * {
  position: relative; z-index: 1;
}
.ranking-row:hover::after, .listing-card:hover::after,
.card:hover::after, .ws-card:hover::after { background: var(--surface-2); }

/* The chevron the app's menu buttons wear (PillTabs). Same idea, one flat
   nose — used for the nav pills and the filter chips. */
.mc-chevron, .filter-btn, .unit-btn {
  clip-path: polygon(
    0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%,
    10px 50%
  );
  border-radius: 0 !important;
  padding-left: 22px !important; padding-right: 26px !important;
}

/* ── Buttons wear the shape too (user 2026-08-06) ──────────────────────
   Smaller numbers than a card: a 5 px lean on a 36 px-tall button reads as a
   mistake, 3 px reads as intent. The chamfer follows down to 8 px.
   Same two-layer trick — clip-path eats a border, so the element paints the
   line and ::after paints the fill on top. */
.btn, .filter-btn, .unit-btn, .modal-close, .lang-btn {
  --mc-b-lean: 3px; --mc-b-cut: 8px;
  position: relative;
  border: none !important;
  border-radius: 0 !important;
  clip-path: polygon(
    calc(var(--mc-b-lean) + var(--mc-b-cut)) 0,
    100% 0,
    calc(100% - var(--mc-b-cut)) var(--mc-b-cut),
    calc(100% - var(--mc-b-lean)) calc(100% - var(--mc-b-cut)),
    calc(100% - var(--mc-b-lean) - var(--mc-b-cut)) 100%,
    0 100%,
    var(--mc-b-cut) calc(100% - var(--mc-b-cut)),
    var(--mc-b-lean) var(--mc-b-cut)
  );
}
/* A solid button keeps its fill — the shape alone is the change. A ghost one
   gets the outline treatment so its edge still reads. */
.btn-ghost, .filter-btn, .unit-btn, .lang-btn {
  background: var(--border-2);
}
.btn-ghost::after, .filter-btn::after, .unit-btn::after, .lang-btn::after {
  content: ''; position: absolute; inset: 1px; z-index: 0;
  background: var(--surface-2);
  clip-path: inherit;
  pointer-events: none;
}
.btn-ghost > *, .filter-btn > *, .unit-btn > *, .lang-btn > * {
  position: relative; z-index: 1;
}
/* The label is a bare text node, so it needs lifting off the fill layer too. */
.btn-ghost, .filter-btn, .unit-btn, .lang-btn { isolation: isolate; }
.btn-ghost::after, .filter-btn::after, .unit-btn::after, .lang-btn::after { z-index: -1; }
.filter-btn.active::after, .unit-btn.active::after,
.lang-btn.lang-active::after { background: rgba(201,162,39,.16); }
.btn-ghost:hover::after { background: var(--surface-3); }

/* The BETA button is a ghost button — keep its gold edge above the fill. */
.btn-beta { background: rgba(201,162,39,.45); }
.btn-beta::after { background: var(--surface); }
.btn-beta:hover::after { background: rgba(201,162,39,.12); }

/* Small SQUARE icon buttons are excluded: a 3 px lean plus two 8 px chamfers
   on a 32 px box eats most of the face, and the flag emoji disappeared into
   it. The shape needs width to read as a shape. */
.lang-btn, .modal-close, .btn-icon, .hamburger {
  clip-path: none !important;
  border-radius: 10px !important;
  background: var(--surface-2) !important;
}
.lang-btn::after, .modal-close::after, .btn-icon::after { content: none !important; }
.lang-btn.lang-active { background: rgba(201,162,39,.18) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   Hero mittig — 11.08.2026
   ───────────────────────────────────────────────────────────────────────────
   Der Titelblock stand linksbündig, obwohl er wie auf mi-su.me mittig stehen
   sollte. Dass die Mitte gemeint war, sieht man an `.hero-logo`: es trug
   bereits `margin: 0 auto` und zentrierte sich über linksbündigem Text.

   `.hero` ist ein Flex-Container; `justify-content` rückt den Inhalt in die
   Mitte, `margin-inline: auto` fängt den Fall ab, dass jemand die Anzeigeart
   später ändert. Beides zusammen ist billiger als eine spätere Fehlersuche.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero { justify-content: center; }
.hero-content { text-align: center; margin-inline: auto; }
/* `.hero-sub` hat eine eigene, engere Höchstbreite. Ohne diese Zeile bliebe
   der Absatz im zentrierten Block links hängen. */
.hero-sub { margin-inline: auto; }
.hero-btns { justify-content: center; }
.download-hint { text-align: center; }

/* Die Tachoscheibe liegt absolut am rechten Rand und war auf einen
   LINKSBÜNDIGEN Text ausgelegt. Zentriert wandert der Text nach rechts und
   liefe darunter: bei 1200 px Fensterbreite überlappten Scheibe und Absatz um
   gut 80 px. Deshalb wird sie schmaler, rückt an den Rand und erscheint erst
   ab 1200 px statt ab 900 px. Bei 1135 px stand der Patreon-Knopf sonst noch
   5 px vor der Scheibe — gemessen mit einem Range um den Text, denn der Block
   ist immer 560 px breit und sagt darüber nichts.
   Die Regel steht NACH der alten `@media (max-width: 900px)`-Zeile und
   gewinnt damit über die Reihenfolge. */
@media (min-width: 901px) and (max-width: 1199px) {
  .hero-dial { display: none; }
}
@media (min-width: 1200px) {
  .hero-dial { width: min(320px, 24vw); height: min(320px, 24vw); right: 3vw; }
}