/* ============================================================================
   SHUTOKO REVIVAL — DRIFT THEME · "TOUGE 01"
   Smoke + tungsten + ice headlights + door-circle racer.
   ========================================================================= */

/* ----- FONTS ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@500;600;700&family=Archivo:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ----- TOKENS ------------------------------------------------------------ */
:root{
  --asphalt-0: #06070a;
  --asphalt-1: #0c0d11;
  --asphalt-2: #14161c;
  --asphalt-3: #1d2027;
  --asphalt-4: #2a2e38;
  --smoke-1:   #3d4250;
  --smoke-2:   #4f5564;

  --ember:     #ff7d2b;
  --ember-hot: #ffaa3d;
  --tungsten:  #ffd089;
  --ice:       #aef3ff;
  --ice-hot:   #e8fbff;
  --rust:      #c2552a;
  --hazard:    #ffcb1f;
  --bone:      #f4eee2;

  --fg-1: #f4eee2;
  --fg-2: #c8c2b3;
  --fg-3: #8d8779;
  --fg-4: #5b5648;

  --rule:        rgba(244,238,226,0.08);
  --rule-lit:    rgba(244,238,226,0.18);
  --rule-ember:  rgba(255,125,43,0.45);
  --rule-ice:    rgba(174,243,255,0.40);
  --rule-hazard: rgba(255,203,31,0.55);

  --grad-smoke:     radial-gradient(60% 80% at 50% 100%, rgba(255,125,43,0.28), transparent 70%);
  --grad-ember:     linear-gradient(95deg, var(--rust) 0%, var(--ember) 50%, var(--ember-hot) 100%);
  --grad-headlight: radial-gradient(50% 80% at 50% 50%, var(--ice-hot) 0%, var(--ice) 35%, transparent 80%);

  --f-display: 'Bebas Neue', 'Oswald', 'Archivo Narrow', sans-serif;
  --f-sans:    'Archivo', 'Oswald', system-ui, sans-serif;
  --f-cond:    'Oswald', 'Archivo Narrow', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;

  --shadow-pan:   0 28px 60px -28px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.02);
  --shadow-ember: 0 0 0 1px rgba(255,125,43,0.6),    0 8px 30px -8px rgba(255,125,43,0.5);
  --shadow-ice:   0 0 0 1px rgba(174,243,255,0.5),    0 8px 24px -8px rgba(174,243,255,0.4);

  /* shared site-wide tokens — used by inline var(--t-*) refs in PHP pages */
  --t-accent:      var(--ember);
  --t-accent-a08:  rgba(255,125,43,0.08);
  --t-accent-a15:  rgba(255,125,43,0.15);
  --t-accent-a22:  rgba(255,125,43,0.22);
  --t-accent-a30:  rgba(255,125,43,0.30);
  --t-secondary:   var(--ice);
  --t-muted:       var(--fg-3);
  --t-dim:         var(--fg-4);
  --t-fg:          var(--fg-1);
  --t-fg-sub:      var(--fg-2);
  --t-bg-deep:     var(--asphalt-0);
  --t-crash:       #ff5544;
  --t-bar-grad:    linear-gradient(90deg, var(--ember) 0%, var(--ember-hot) 100%);
}

/* ----- RESET / BASE ------------------------------------------------------ */
*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
  background: var(--asphalt-0);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

body::before{
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(80% 60% at 80% 0%, rgba(255,125,43,0.10), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(174,243,255,0.05), transparent 70%);
  mix-blend-mode: screen;
}
body::after{
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.22;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
  mix-blend-mode: overlay;
}

.scanlines{ display: none; }

::selection{ background: var(--ember); color: var(--asphalt-0); }
img{ max-width: 100%; display: block; }

.container{ width: min(1320px, 92vw); margin: 0 auto; position: relative; z-index: 3; }

/* ----- BG LAYERS / GLOWS ------------------------------------------------- */
.bg-layer{ position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.bg-glow-cyan,
.bg-glow-pink,
.bg-glow-purple,
.bg-grid{ display: none; }

.bg-layer::before{
  content:"";
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 100% 0%, rgba(255,125,43,0.18), transparent 60%),
    radial-gradient(55% 70% at 0% 100%, rgba(50,60,80,0.5), transparent 65%),
    linear-gradient(180deg, var(--asphalt-0) 0%, var(--asphalt-1) 50%, var(--asphalt-0) 100%);
}
.bg-layer::after{
  content:"";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,0.012) 39px 40px);
}

#streakCanvas{ display: none !important; }

/* ============================================================================
   HEADER / HERO
   ========================================================================= */
.site-header{
  position: relative;
  padding: 0;
  border-bottom: 1px solid var(--rule);
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, var(--asphalt-1) 0%, var(--asphalt-0) 100%);
}
.site-header::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(70% 70% at 75% 90%, rgba(255,125,43,0.30) 0%, transparent 60%),
    radial-gradient(50% 80% at 15% 50%, rgba(50,60,80,0.55) 0%, transparent 65%);
  z-index: 0;
}
.site-header::after{
  content:"";
  position:absolute; left:0; right:0; bottom: 0; height: 6px;
  background-image: repeating-linear-gradient(135deg,
    var(--hazard) 0 14px,
    var(--asphalt-0) 14px 28px);
  opacity: 0.85;
  filter: saturate(0.85);
}
.site-header > .container{ padding: 28px 0 56px; }

.jp-accent{
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ember);
  text-shadow: 0 0 12px rgba(255,125,43,0.55);
  padding: 4px 10px 4px 12px;
  border-left: 2px solid var(--ember);
  margin-bottom: 18px;
}

.header-hero{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  position: relative;
}

.server-branding{ position: relative; min-width: 0; }

.server-name{
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(72px, 13vw, 188px);
  line-height: 0.84;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--bone);
  text-shadow:
    0 2px 0 rgba(0,0,0,0.4),
    0 0 22px rgba(255,125,43,0.30),
    0 0 60px rgba(255,125,43,0.18);
  transform: skewX(-6deg);
  display: inline-block;
  position: relative;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.6));
}
.server-name span{
  background: var(--grad-ember);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 0 18px rgba(255,125,43,0.55))
    drop-shadow(0 0 4px rgba(255,170,60,0.4));
  margin-left: 0.18em;
}
.server-name::after{
  content:"";
  position: absolute;
  left: 2%; right: -4%;
  bottom: -6px;
  height: 6px;
  background: linear-gradient(90deg, transparent, var(--ember) 18%, var(--bone) 50%, var(--ember) 82%, transparent);
  opacity: 0.55;
  filter: blur(0.8px);
  transform: skewX(6deg);
}

.server-branding::before{
  content: "01";
  position: absolute;
  top: -8px;
  right: clamp(12px, 4vw, 64px);
  width: 92px; height: 92px;
  border: 3px solid var(--bone);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 56px;
  color: var(--bone);
  background: var(--asphalt-0);
  box-shadow:
    0 0 0 4px var(--asphalt-0),
    0 0 0 5px rgba(244,238,226,0.4),
    0 12px 40px rgba(0,0,0,0.6);
  letter-spacing: 0.05em;
  z-index: 2;
  transform: rotate(-5deg);
  pointer-events: none;
}
@media (max-width: 720px){
  .server-branding::before{ width: 64px; height: 64px; font-size: 36px; right: 6px; top: -4px; border-width: 2px; }
}

.server-subtitle{
  display:inline-block;
  margin-top: 18px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 4px 0;
  border-top: 1px solid var(--rule-lit);
  border-bottom: 1px solid var(--rule-lit);
}
.server-tagline{
  display: block;
  margin-top: 14px;
  font-family: var(--f-cond);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--tungsten);
  text-shadow: 0 0 14px rgba(255,208,137,0.4);
}

.header-right{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.server-status{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--asphalt-2);
  border: 1px solid var(--rule-lit);
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-1);
  position: relative;
}
.server-status.online{
  border-color: rgba(120,240,140,0.45);
  color: #cdfdd6;
}
.server-status.offline{
  border-color: rgba(255,125,43,0.45);
  color: #ffd4b3;
}
.status-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ee06a;
  box-shadow: 0 0 10px rgba(78,224,106,0.9), 0 0 18px rgba(78,224,106,0.5);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
.server-status.offline .status-dot{
  background: var(--ember);
  box-shadow: 0 0 10px rgba(255,125,43,0.85), 0 0 18px rgba(255,125,43,0.45);
}
@keyframes pulse-dot{
  0%,100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: 0.55; transform: scale(0.85); }
}

.btn-join{
  display:inline-flex;
  align-items:center;
  gap: 9px;
  padding: 12px 22px;
  background: var(--bone);
  color: var(--asphalt-0);
  border: 2px solid var(--bone);
  border-radius: var(--r-sm);
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
  box-shadow: 0 6px 0 0 var(--asphalt-0), 0 6px 20px rgba(255,125,43,0.25);
  position: relative;
  overflow: hidden;
}
.btn-join::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.5) 50%, transparent 60%);
  transform: translateX(-110%);
  transition: transform 480ms ease;
}
.btn-join:hover::after{ transform: translateX(110%); }
.btn-join:hover{
  background: var(--ember);
  border-color: var(--ember);
  color: var(--asphalt-0);
  transform: translateY(-2px);
  box-shadow: 0 8px 0 0 var(--asphalt-0), 0 10px 32px rgba(255,125,43,0.55);
}
.btn-join svg{ width: 14px; height: 14px; }

.stats-bar{
  margin-top: 36px;
  display: grid;
  grid-template-columns: 2fr 1fr 1.6fr;
  gap: 0;
  background: linear-gradient(180deg, var(--asphalt-2), var(--asphalt-1));
  border: 1px solid var(--rule-lit);
  border-radius: var(--r-sm);
  position: relative;
  box-shadow: var(--shadow-pan);
}
.stats-bar::before{
  content:"";
  position:absolute; left: -1px; right: -1px; top: -1px; height: 3px;
  background: var(--ember);
  box-shadow: 0 0 18px rgba(255,125,43,0.6);
}
.stat-item{
  padding: 16px 22px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-item:last-child{ border-right: 0; }
.stat-label{
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.stat-value{
  font-family: var(--f-display);
  font-size: 26px;
  letter-spacing: 0.04em;
  color: var(--fg-1);
  line-height: 1;
}
/* Strapline-style value (e.g. ASPHALT · SMOKE · ANGLE) — smaller + single line */
.stat-value.tagline{
  font-size: 18px;
  white-space: nowrap;
  letter-spacing: 0.05em;
}
.stat-value.accent{
  color: var(--ember);
  text-shadow: 0 0 14px rgba(255,125,43,0.55);
}

/* ============================================================================
   MAIN
   ========================================================================= */
.site-main{
  position: relative;
  z-index: 3;
  padding: 40px 0 80px;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(255,125,43,0.06), transparent 70%),
    var(--asphalt-0);
}

.connect-section{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
  margin-bottom: 36px;
  padding: 22px 26px;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,125,43,0.04) 0 14px,
      transparent 14px 28px),
    var(--asphalt-2);
  border: 1px solid var(--rule-lit);
  border-left: 3px solid var(--ember);
  border-radius: var(--r-sm);
  position: relative;
  box-shadow: var(--shadow-pan);
}
.connect-label{
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.connect-value{
  font-family: var(--f-mono);
  font-size: 19px;
  font-weight: 600;
  color: var(--ice-hot);
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px rgba(174,243,255,0.4);
  white-space: nowrap;
}
.connect-actions{
  display:flex;
  gap: 10px;
  flex-wrap: nowrap;
}
.btn-cm{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r-sm);
  font-family: var(--f-display);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid;
  cursor: pointer;
  transition: all 120ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-cm-primary{
  background: var(--ember);
  color: var(--asphalt-0);
  border-color: var(--ember);
  box-shadow: 0 4px 0 0 #7a3a14, 0 6px 20px rgba(255,125,43,0.5);
}
.btn-cm-primary:hover{
  background: var(--ember-hot);
  border-color: var(--ember-hot);
  transform: translateY(-1px);
}
.btn-cm-secondary{
  background: transparent;
  color: var(--fg-1);
  border-color: var(--rule-lit);
}
.btn-cm-secondary:hover{
  border-color: var(--ember);
  color: var(--ember);
  background: rgba(255,125,43,0.05);
}

/* ============================================================================
   GLASS / LIVE CARDS
   ========================================================================= */
.live-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}
.glass-card{
  background: linear-gradient(180deg, var(--asphalt-2) 0%, var(--asphalt-1) 100%);
  border: 1px solid var(--rule-lit);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-pan);
}
.glass-card::before{
  content:"";
  position:absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--ember);
  opacity: 0.7;
}
.glass-card-off{ opacity: 0.85; }
.gc-header{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.gc-title{
  font-family: var(--f-display);
  font-size: 18px;
  letter-spacing: 0.18em;
  color: var(--fg-1);
}
.gc-badge{
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 3px 10px;
  border-radius: 50px;
  border: 1px solid var(--rule-lit);
  color: var(--fg-2);
}
.gc-badge-on{
  background: rgba(78,224,106,0.12);
  border-color: rgba(78,224,106,0.55);
  color: #cdfdd6;
}
.gc-badge-off{
  background: rgba(120,120,120,0.12);
  border-color: var(--rule-lit);
  color: var(--fg-3);
}
.gc-link{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
  text-decoration: none;
  transition: color 120ms ease;
}
.gc-link:hover{ color: var(--ember-hot); text-shadow: 0 0 8px rgba(255,170,61,0.6); }
.gc-divider{
  height: 1px;
  background: var(--rule-lit);
  margin: 12px 0 14px;
}
.gc-empty{
  margin: 8px 0;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
}
.gc-empty-off{ color: var(--fg-4); }
.gc-footer{
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-4);
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}
.gc-lb-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gc-lb-row{
  display:flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid transparent;
  border-radius: var(--r-sm);
  font-size: 13px;
  transition: all 120ms ease;
}
.gc-lb-row:hover{
  background: rgba(255,125,43,0.08);
  border-left-color: var(--ember);
}
.gc-medal{ font-size: 16px; line-height: 1; filter: drop-shadow(0 0 4px rgba(255,125,43,0.4)); }
.gc-lb-name{ flex: 1; color: var(--fg-1); font-weight: 500; }
.gc-lb-link{ color: var(--fg-1); text-decoration: none; }
.gc-lb-link:hover{ color: var(--ember); }
.gc-lb-miles{
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ice);
  letter-spacing: 0.08em;
  text-shadow: 0 0 6px rgba(174,243,255,0.35);
}
.gc-player-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gc-player-row{
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid transparent;
  border-radius: var(--r-sm);
  font-size: 13px;
}
.gc-player-row:hover{ background: rgba(255,125,43,0.08); border-left-color: var(--ember); }
.gc-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ee06a;
  box-shadow: 0 0 8px rgba(78,224,106,0.7);
  flex-shrink: 0;
}
.gc-player-name{ flex: 1; color: var(--fg-1); font-weight: 500; }
.gc-player-car{
  font-family: var(--f-mono); font-size: 11px;
  color: var(--ice); letter-spacing: 0.06em;
}

/* ============================================================================
   CONTROLS / SEARCH / FILTERS
   ========================================================================= */
.controls-bar{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 28px;
  padding: 14px 18px;
  background: var(--asphalt-2);
  border: 1px solid var(--rule-lit);
  border-radius: var(--r-sm);
  position: relative;
}
.search-wrapper{ position: relative; }
.search-icon{
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--fg-3);
  pointer-events: none;
}
.search-input{
  width: 100%;
  padding: 10px 14px 10px 38px;
  background: var(--asphalt-1);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--fg-1);
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  outline: none;
  transition: all 120ms ease;
}
.search-input:focus{
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(255,125,43,0.15);
}
.search-input::placeholder{ color: var(--fg-4); }

.filter-tabs{ display: flex; gap: 0; }
.filter-tab{
  padding: 9px 16px;
  background: var(--asphalt-1);
  border: 1px solid var(--rule);
  border-right: 0;
  color: var(--fg-3);
  font-family: var(--f-display);
  font-size: 14px;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: all 120ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.filter-tab:first-child{ border-top-left-radius: var(--r-sm); border-bottom-left-radius: var(--r-sm); }
.filter-tab:last-child{ border-right: 1px solid var(--rule); border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); }
.filter-tab:hover{ color: var(--fg-1); background: var(--asphalt-3); }
.filter-tab.active{
  background: var(--ember);
  border-color: var(--ember);
  color: var(--asphalt-0);
  font-weight: 600;
  box-shadow: 0 0 18px rgba(255,125,43,0.4);
}
.filter-tab.active .tab-count{ color: var(--asphalt-0); opacity: 0.75; }
.tab-count{
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--fg-4);
  background: rgba(255,255,255,0.04);
  padding: 1px 6px;
  border-radius: 50px;
  letter-spacing: 0.05em;
}

/* ============================================================================
   SECTIONS / CARS GRID
   ========================================================================= */
.section-title{
  font-family: var(--f-display);
  font-size: 30px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-lit);
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.section-title::before{
  content: "";
  width: 28px;
  height: 4px;
  background: var(--ember);
  display: inline-block;
  align-self: center;
  box-shadow: 0 0 12px rgba(255,125,43,0.6);
}
.section-title::after{
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 80px; height: 1px;
  background: var(--ember);
}

.cars-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
  /* default grid stretch keeps every card the same row height */
}

/* CAR CARD */
.car-card{
  background: var(--asphalt-2);
  border: 1px solid var(--rule-lit);
  border-radius: var(--r-sm);
  overflow: hidden;
  position: relative;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  box-shadow: var(--shadow-pan);
}
.car-card.hidden{ display: none; }
.car-card::before{
  content: "";
  position:absolute;
  top: 0; right: 0;
  width: 14px; height: 14px;
  background: linear-gradient(225deg, var(--asphalt-0) 50%, transparent 50%);
  z-index: 3;
}
.car-card:hover{
  transform: translateY(-3px);
  border-color: var(--ember);
  box-shadow: 0 12px 40px -12px rgba(255,125,43,0.5), 0 0 0 1px var(--ember);
}
.car-card:hover .car-preview img{ transform: scale(1.04); filter: brightness(1.05) contrast(1.05); }

.no-results{ display: none; font-family: var(--f-mono); color: var(--fg-3); padding: 30px; text-align: center; }
.no-results.visible{ display: block; }

/* preview */
.car-preview{
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--asphalt-1);
  overflow: hidden;
}
.car-preview img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms ease, filter 320ms ease;
}
.car-preview-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}
.car-preview-placeholder{
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, var(--asphalt-2), var(--asphalt-2) 12px, var(--asphalt-3) 12px, var(--asphalt-3) 24px);
}
.placeholder-initials{
  font-family: var(--f-display);
  font-size: 38px;
  letter-spacing: 0.08em;
  color: var(--fg-4);
}

/* badge over preview */
.car-badge{
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
  padding: 4px 10px;
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--ember);
  background: rgba(6,7,10,0.85);
  backdrop-filter: blur(4px);
  color: var(--ember);
  text-shadow: 0 0 8px rgba(255,125,43,0.6);
}
.badge-player{ color: var(--ember); border-color: var(--ember); }
.badge-traffic{
  color: var(--ice);
  border-color: var(--ice);
  text-shadow: 0 0 8px rgba(174,243,255,0.6);
}

/* info block */
.car-info{
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.car-name{
  margin: 0;
  font-family: var(--f-cond);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--fg-1);
}
.car-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.car-brand{
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
  display: flex;
  align-items: center;
  gap: 6px;
}
.car-badge-img{
  width: 18px; height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255,125,43,0.4));
}
.car-class{
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--rule-lit);
  border-radius: var(--r-sm);
  color: var(--fg-2);
}
.car-class.class-street{ color: var(--ice); border-color: var(--rule-ice); }
.car-class.class-drift,
.car-class.class-DRIFT{
  background: var(--hazard);
  color: var(--asphalt-0);
  border-color: var(--hazard);
  font-weight: 700;
}

/* spec chips — single row */
.car-specs{
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
}
.spec-chip{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--asphalt-1);
  border: 1px solid var(--rule);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-2);
  letter-spacing: 0.04em;
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  white-space: nowrap;
}
.spec-chip svg{ width: 11px; height: 11px; color: var(--ember); flex-shrink: 0; }
.spec-val{ color: var(--fg-1); }

.rating-line,
.car-rating{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ice);
  text-shadow: 0 0 6px rgba(174,243,255,0.3);
}
.car-description,
.car-desc{
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* download / stats action row */
.car-action-row{
  display:flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}
.btn-download,
.btn-carstat{
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid;
  cursor: pointer;
  transition: all 120ms ease;
}
.btn-download{
  background: var(--ember);
  color: var(--asphalt-0);
  border-color: var(--ember);
  box-shadow: 0 3px 0 0 #7a3a14;
}
.btn-download:hover{ background: var(--ember-hot); border-color: var(--ember-hot); transform: translateY(-1px); }
.btn-download .file-size{
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  opacity: 0.75;
  letter-spacing: 0.05em;
}
.btn-carstat{
  background: transparent;
  color: var(--fg-2);
  border-color: var(--rule-lit);
}
.btn-carstat:hover{
  border-color: var(--ice);
  color: var(--ice);
  background: rgba(174,243,255,0.04);
}

/* ============================================================================
   MODAL — CAR DETAILS
   ========================================================================= */
.modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(6,7,10,0.85);
  backdrop-filter: blur(6px);
  z-index: 999;
  display: none;
  opacity: 0;
  align-items: center;
  justify-content: center;
  padding: 30px;
  transition: opacity 180ms ease;
}
.modal-backdrop.open{ display: flex; opacity: 1; }
.modal{
  width: min(900px, 100%);
  max-height: 90vh;
  overflow: hidden;
  background: linear-gradient(180deg, var(--asphalt-2), var(--asphalt-1));
  border: 1px solid var(--rule-lit);
  border-radius: var(--r-md);
  position: relative;
  box-shadow: var(--shadow-pan);
}
.modal::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height: 3px;
  background: var(--ember);
  box-shadow: 0 0 16px rgba(255,125,43,0.6);
}
.modal-scroll{
  overflow-y: auto;
  max-height: 90vh;
}
.modal-close{
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  background: var(--asphalt-3);
  border: 1px solid var(--rule-lit);
  border-radius: 50%;
  color: var(--fg-2);
  cursor: pointer;
  z-index: 5;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover{ color: var(--ember); border-color: var(--ember); }

.modal-preview{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--asphalt-1);
  overflow: hidden;
}
.modal-preview img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-preview-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}
.modal-preview-placeholder{
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, var(--asphalt-2), var(--asphalt-2) 14px, var(--asphalt-3) 14px, var(--asphalt-3) 28px);
}

.modal-body{ padding: 24px 28px 28px; }
.modal-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.modal-title-group{ min-width: 0; }
.modal-car-name{
  font-family: var(--f-display);
  font-size: 32px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-1);
  line-height: 1.05;
}
.modal-car-brand{
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
  margin-top: 6px;
}
.modal-badges{ display: flex; gap: 6px; flex-wrap: wrap; }
.modal-badge-img{ height: 48px; width: auto; object-fit: contain; }
.modal-stats{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin: 12px 0 16px;
  padding: 12px;
  background: var(--asphalt-1);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}
.modal-stats .stat{ display: flex; flex-direction: column; gap: 2px; }
.modal-stats .stat-label{
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-4);
}
.modal-stats .stat-value{
  font-family: var(--f-display); font-size: 20px; color: var(--fg-1); line-height: 1;
}
.modal-description{
  font-size: 13px; color: var(--fg-2); line-height: 1.6;
  padding: 12px 14px; background: var(--asphalt-1); border: 1px solid var(--rule);
  border-radius: var(--r-sm); margin-bottom: 14px;
}
.modal-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.modal-tags .tag{
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ice);
  padding: 3px 8px; border: 1px solid var(--rule-ice); border-radius: 50px;
}
.modal-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}
.modal-id{
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.18em; color: var(--fg-4);
  word-break: break-all;
}
.btn-download-modal{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--ember); color: var(--asphalt-0);
  border: 1px solid var(--ember);
  border-radius: var(--r-sm);
  font-family: var(--f-display);
  font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 3px 0 0 #7a3a14;
  transition: all 120ms ease;
}
.btn-download-modal:hover{ background: var(--ember-hot); border-color: var(--ember-hot); transform: translateY(-1px); }
.btn-download-modal .file-size{
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  opacity: 0.8; letter-spacing: 0.05em;
}

/* ============================================================================
   SITE NOTICES
   ========================================================================= */
.site-notice{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; margin: 0 0 18px;
  background: var(--asphalt-2);
  border: 1px solid var(--rule-lit);
  border-left: 3px solid var(--ember);
  border-radius: var(--r-sm);
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: 0.04em; color: var(--fg-2);
}
.site-notice-maintenance{ border-left-color: var(--hazard); color: var(--hazard); }
.site-notice-info{ border-left-color: var(--ice); color: var(--ice); }

/* ============================================================================
   FOOTER
   ========================================================================= */
.site-footer{
  margin-top: 60px;
  padding: 36px 0 28px;
  border-top: 1px solid var(--rule-lit);
  background: var(--asphalt-1);
  position: relative;
  z-index: 3;
}
.site-footer::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height: 2px;
  background: repeating-linear-gradient(90deg,
    var(--ember) 0 24px,
    var(--asphalt-0) 24px 32px);
  opacity: 0.7;
}
.footer-row,
.footer-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.footer-brand{
  font-family: var(--f-display);
  font-size: 18px;
  letter-spacing: 0.18em;
  color: var(--fg-1);
}
.footer-brand span{ color: var(--ember); }
.footer-jp{ color: var(--fg-4); }
.footer-admin-link{
  color: var(--fg-4); text-decoration: none; font-size: 16px;
  transition: color 120ms ease;
}
.footer-admin-link:hover{ color: var(--ember); }

/* ============================================================================
   MISC / RESPONSIVE
   ========================================================================= */
.accent{
  color: var(--ember);
  text-shadow: 0 0 12px rgba(255,125,43,0.5);
}

@media (max-width: 980px){
  .header-hero{ grid-template-columns: 1fr; align-items: flex-start; }
  .header-right{ align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .stats-bar{ grid-template-columns: 1fr 1fr; }
  .stats-bar .stat-item:first-child{ grid-column: 1 / -1; border-bottom: 1px solid var(--rule); border-right: 0; }
  .live-cards{ grid-template-columns: 1fr; }
  .connect-section{ grid-template-columns: 1fr; }
  .controls-bar{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  .server-name{ font-size: clamp(56px, 18vw, 96px); }
  .filter-tabs{ width: 100%; flex-wrap: wrap; }
  .filter-tab{ flex: 1; min-width: 90px; }
  .stats-bar{ grid-template-columns: 1fr; }
  .stats-bar .stat-item{ border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* ── Achievements grid (driver profile) ─────────────────────────────── */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.achievement-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  background: var(--t-bg-deep, rgba(0,0,0,0.35));
  border: 1px solid var(--t-accent-a15, rgba(0,190,255,0.15));
  border-radius: 6px;
  padding: 10px 12px;
  position: relative;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.achievement-card.unlocked {
  border-color: var(--t-accent-a30, rgba(0,190,255,0.30));
  box-shadow: 0 0 14px var(--t-accent-a15, rgba(0,190,255,0.10));
}
.achievement-card.unlocked:hover { transform: translateY(-1px); }
.achievement-card.locked { opacity: 0.62; }
.achievement-card .ach-icon {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.achievement-card .ach-icon img {
  width: 100%; height: 100%; object-fit: contain;
  transition: filter .15s;
}
.achievement-card.locked .ach-icon img { filter: grayscale(1) brightness(0.55); }
.achievement-card .ach-icon-placeholder {
  color: var(--t-dim, #777);
  font-size: 1.6rem;
}
.achievement-card .ach-body { min-width: 0; }
.achievement-card .ach-title {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--t-fg, #d8e6f0);
  margin-bottom: 2px;
}
.achievement-card.unlocked .ach-title { color: var(--t-accent); }
.achievement-card .ach-desc {
  font-size: 0.74rem;
  color: var(--t-fg-sub, #999);
  line-height: 1.35;
  margin-bottom: 4px;
}
.achievement-card .ach-meta {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.achievement-card .ach-meta-unlocked { color: var(--t-accent); }
.achievement-card .ach-meta-locked   { color: var(--t-dim, #666); }
.achievement-card.rarity-rare      { border-color: var(--t-secondary, #ff5599); }
.achievement-card.rarity-epic      { border-color: #b366ff; }
.achievement-card.rarity-legendary { border-color: #ffaa00; }