/* Palette aus der Titelgrafik (assets/images/startscreen.png) abgeleitet
   — per Pixel-Sampling aus dem Bild: --bg = dunkler Nachthimmel unterm Logo,
   --pink = Flammen-Orange von "TRAIL RUSH", --green = Gold vom Holzschild-
   Schriftzug "EIGENTLICH ZU GEFÄHRLICH!", --text = warmes Steinbeige der
   "Hobr"-Schrift, --muted = deren Schattenton. Variablennamen (--pink/
   --green) bewusst beibehalten, obwohl die Farben jetzt Orange/Gold statt
   Pink/Neongrün sind — sonst müssten alle Verwendungsstellen im ganzen
   restlichen CSS mit umbenannt werden, ohne dass sich an der jeweiligen
   Bedeutung (Akzent 1/Akzent 2) etwas ändert. */
:root{
  --bg: #12222F;
  --surface: #1B3040;
  --surface-2: #24404F;
  --border: #2D4356;
  --text: #F3ECDD;
  --muted: #B39872;
  --pink: #F2811A;
  --green: #F5C94B;

  /* Handjet als einheitliche Standardschrift überall (Pixel-Look passt zum
     restlichen Spiel) — alle drei Variablen zeigen bewusst auf dieselbe
     Schrift, nur der Verwendungszweck (Display/Body/Mono) bleibt über die
     Variablennamen im restlichen CSS unterschieden. */
  --font-display: 'Handjet', monospace;
  --font-body: 'Handjet', monospace;
  --font-mono: 'Handjet', monospace;
}

*{ box-sizing: border-box; }

/* Handjet wirkt bei gleicher nomineller Größe deutlich kleiner/dünner als
   die vorige Schrift — alle Textgrößen im CSS sind in rem angegeben (auch
   innerhalb von clamp()), daher genügt diese eine Stelle, um wirklich JEDEN
   Text im Spiel und im Admin-Panel proportional größer zu machen. */
html{ font-size:125%; }

html, body{
  margin:0;
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  overscroll-behavior:none;
}

/* Mobile-Hochformat ist der Hauptfall: das Spielfeld füllt die Bildschirmhöhe
   und bleibt schmal (max. 480px), auch am Desktop, damit sich das Layout
   dort genauso verhält wie später auf dem Handy. */
#stage{
  position:relative;
  width:100%;
  max-width:480px;
  height:100dvh;
  max-height:960px;
  margin:0 auto;
  background:var(--bg);
  overflow:hidden;
  touch-action:none;
  user-select:none;
}

/* Ausnahme: breite, flache Fenster (Desktop-Browser, wenig Höhe) —
   dann lieber eine klassische Breitbild-Kachel statt eines schmalen Streifens. */
@media (min-aspect-ratio: 4/3) and (max-height: 620px){
  #stage{
    max-width:800px;
    height:auto;
    aspect-ratio:16/9;
    margin-top:max(0px, calc((100vh - 450px) / 2));
  }
  /* In diesem Modus ist #stage fest auf 16:9 begrenzt (oben, z. B. 800×450px)
     statt die volle Fensterhöhe zu füllen — die sonst vh-basierten Abstände
     beziehen sich aber auf die FENSTER-Höhe, nicht auf die viel kleinere
     #stage-Höhe, und würden hier zu groß bleiben. Deshalb hier zusätzlich
     gezielt kompakter, inklusive kleinerer Fahrer-Grafiken (sonst dominant
     größter Posten), damit alles ohne Scrollen sichtbar bleibt. */
  #menu-screen,
  #highscore-screen{
    padding-top:0.3rem;
    padding-bottom:2.1rem;
  }
  #menu-screen.screen,
  #highscore-screen.screen{ gap:0.15rem; }
  #riders{ margin:0.15rem 0; }
  /* #menu-screen davor, damit diese kompaktere Deckelung die (in der Datei
     später stehende, gleich spezifische) Basisregel .rider-card .portrait
     sicher überstimmt. */
  #menu-screen .rider-card .portrait{ max-height:6rem; }
  #menu-screen .rider-viewport{ max-width:170px; }
  #rider-select-title{ font-size:clamp(0.8rem, 3.5vw, 1rem); }
  /* Kleineres Höhen-Budget (6vh statt 9vh) als Breite ausgedrückt, siehe
     Erklärung bei .btn-panel weiter oben. */
  .btn-panel{ width:min(7rem, 40vw, calc(5vh * 289 / 107)); }
}

canvas{
  display:block;
  width:100%;
  height:100%;
}

/* ---- HUD ----
   Distanz/Punkte jetzt zweizeilig (kleines Label über großer Zahl) statt
   nebeneinander auf einer Zeile — dadurch kann die Zahl selbst deutlich
   größer werden, ohne dass Label+Wert um denselben schmalen Streifen
   konkurrieren. Punkte bewusst noch etwas größer als Distanz (die
   "Haupt"-Zahl, um die es geht). */
#hud{
  position:absolute;
  top:0; left:0; right:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:0.7rem 0.8rem;
  padding-top:max(0.7rem, env(safe-area-inset-top));
  font-family:var(--font-mono);
  background:linear-gradient(180deg, rgba(0,0,0,0.65), transparent);
  pointer-events:none;
}
.hud-stat{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.hud-stat-distance{ align-items:flex-start; }
.hud-stat-score{ align-items:flex-end; }
.hud-stat-label{
  font-size:0.62rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.hud-stat b{
  font-size:1.7rem;
  font-weight:700;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.hud-stat-score b{ color:var(--green); font-size:1.9rem; }
.hud-right-group{
  display:flex;
  align-items:center;
  gap:0.6rem;
}
/* Pixel-Button statt schlichtem rundem Rahmen — dieselbe "chunky bevel"-
   Technik wie ein klassischer 8-Bit-UI-Button: helle Kante oben/links,
   dunkle Kante unten/rechts, harte Ecken (kein border-radius), Schatten
   darunter. Beim Drücken kehrt sich die Fase um und der Button rutscht
   sichtbar nach unten — fühlt sich "gedrückt" an statt nur die Farbe zu
   wechseln. Holzton statt der blauen Admin-Palette, da der Button über
   der echten Trail-Szene sitzt, nicht im Admin-Panel. */
#mute-btn{
  pointer-events:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#6b4a2f;
  border:none;
  border-radius:0;
  width:2.4rem; height:2.4rem;
  cursor:pointer;
  box-shadow:
    inset 3px 3px 0 rgba(255,214,170,0.35),
    inset -3px -3px 0 rgba(0,0,0,0.5),
    0 3px 0 rgba(0,0,0,0.6);
}
/* Icon (assets/images/icon-sound-on/-off.png, siehe index.html) statt
   Emoji — CC0 von Kenney.nl, dieselbe Quelle wie die SFX-Dateien. Weiße
   Icon-Variante, da sie auf dem dunklen Holzton sonst kaum zu erkennen
   wäre. pointer-events:none, damit ein Klick immer den Button (nicht das
   Bild) trifft. */
#mute-icon{
  width:1.35rem;
  height:1.35rem;
  pointer-events:none;
}
#mute-btn:active{
  box-shadow:
    inset -2px -2px 0 rgba(255,214,170,0.2),
    inset 2px 2px 0 rgba(0,0,0,0.45);
  transform:translateY(3px);
}
.hidden{ display:none !important; }

/* ---- Screens ---- */
.screen{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.5rem;
  padding-top:max(1.5rem, env(safe-area-inset-top));
  padding-bottom:max(1.5rem, env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 50% 0%, rgba(242,129,26,0.12), transparent 60%),
    var(--bg);
  /* vh-basiert statt fest: auf niedrigen/kurzen Bildschirmen automatisch
     enger, damit der ganze Screen eher ohne Scrollen passt. */
  gap:clamp(0.3rem, 1.4vh, 0.6rem);
  overflow-y:auto;
}

/* Start-Screen: durchgängiger Vollbild-Hintergrund. Das Bild ist auf eine
   Handy-Hochformat-Proportion ausgelegt (Himmel/Berge oben, bewusst leere
   Mitte für die UI, Szene unten) — passt bei echten Portrait-Screens fast
   unbeschnitten. Anders als zuvor steckt der Titel-Schriftzug NICHT mehr im
   Bild selbst (siehe #menu-screen h1 unten) — dadurch kann das UI-Layout
   nicht mehr versehentlich den Titel überlagern, unabhängig davon, wie viel
   Platz Regler/Buttons gerade brauchen. Ein dezenter Verlauf verstärkt den
   Kontrast im mittleren Bereich zusätzlich. Dieselbe Hintergrundgrafik auch
   auf #highscore-screen — beide sind über den Bestenliste-Button verbunden,
   sollen sich also wie derselbe Bildschirm anfühlen statt wie ein Bruch. */
#menu-screen,
#highscore-screen{
  background-image:
    linear-gradient(180deg, rgba(13,28,44,0) 0%, rgba(13,28,44,0) 27%, rgba(13,28,44,0.6) 34%, rgba(13,28,44,0.6) 68%, rgba(13,28,44,0.1) 100%),
    url('../assets/images/startscreen.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Menü UND Bestenliste teilen sich denselben Aufbau (nicht nur die
   Hintergrundgrafik oben) — sie sind über den Bestenliste-Button verbunden
   und sollen sich wie derselbe Bildschirm anfühlen, inklusive identisch
   sitzender Titelgrafik. Nicht zentrieren: der Content-Block ist oft höher
   als die freie Mitte im Bild, zentriert würde er zu weit nach oben Richtung
   Himmel/Berge rutschen. Stattdessen fest oben einhängen — das Logo ist das
   erste Flex-Kind (siehe h1 unten) und schiebt den Rest automatisch nach
   unten, Überlagerung ist strukturell ausgeschlossen.
   padding-bottom: reserviert Platz für die im Menü fest unten angedockte
   .controls-hint-Box (position:absolute, zählt nicht im Fluss mit). Auf dem
   Bestenliste-Screen ist die Box ausgeblendet — die Reserve schadet dort
   nicht und hält beide Screens deckungsgleich. */
#menu-screen,
#highscore-screen{
  justify-content:flex-start;
  padding-top: clamp(0.6rem, 3vh, 1.6rem);
  padding-bottom: clamp(2.75rem, 9vh, 4.5rem);
}
/* Titel-Schriftzug: eigene, freigestellte Grafik (siehe index.html) statt
   Text-im-Hintergrundbild — echtes Flex-Kind im normalen Fluss, kann daher
   strukturell nicht mehr von anderen Elementen überlagert werden. Gleiche
   Skalierungstechnik wie .btn-panel (siehe PROJECT_NOTES.md "Responsive-
   Layout-Technik"): width als min() aus Rem-/Vw-/Vh-Deckel ausgedrückt,
   damit Breite UND Höhe gleichzeitig begrenzt sind, ohne das Seitenverhältnis
   der Grafik zu verzerren. */
/* Gilt für den Logo-Titel im Menü UND auf dem Bestenliste-Screen (dort das
   erste <h1>, das die .title-logo-Grafik enthält — NICHT der Text-Titel
   "TOP FAHRER:INNEN" daneben) — die Grafik soll auf beiden Screens exakt
   gleich aussehen. */
#menu-screen h1,
#highscore-screen h1:has(.title-logo){
  margin:0;
  /* Eigener Abstand zum Inhalt darunter, zusätzlich zum generischen
     .screen-gap (der gilt gleichmäßig zwischen ALLEN Flex-Kindern) — der
     Titel soll sichtbar mehr Luft nach unten bekommen als z. B. zwischen
     Fahrerauswahl und Buttons. clamp() aus demselben Grund wie beim
     ehemaligen padding-top: auf kurzen/breiten Viewports automatisch enger. */
  margin-bottom: clamp(0.5rem, 3vh, 1.8rem);
  line-height:0; /* verhindert zusätzlichen Leerraum unter dem Inline-Bild */
}
.title-logo{
  display:block;
  width:min(15rem, 78vw, calc(24vh * 1448 / 1086));
  height:auto;
  aspect-ratio:1448/1086;
  margin:0 auto;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.7rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--pink);
}

h1{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(2.1rem, 11vw, 3rem);
  line-height:0.92;
  margin:0;
  letter-spacing:0.005em;
}
h1 .accent{ color:var(--green); }

.sub{
  font-family:var(--font-body);
  color:var(--muted);
  max-width:38ch;
  font-size:0.9rem;
  margin:0 0 0.3rem;
}

/* ---- Rider select (Karussell) ----
   Statt vier kleiner Kacheln nebeneinander jetzt genau EIN Fahrer groß und
   zentriert; per Pfeil-Buttons, Wischen (Touch) oder ← → (Tastatur, nur auf
   dem Startbildschirm) wird geblättert. Aufbau in game.js:
   #riders > .rider-carousel-row (Pfeil · .rider-viewport > .rider-track > .rider-card … · Pfeil)
           > .rider-dots (Positionsanzeige, ebenfalls klickbar). */
#rider-select-title{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(0.9rem, 4.5vw, 1.3rem);
  letter-spacing:0.04em;
  color:var(--text);
  margin:0;
}
/* Name des aktuell zentrierten Fahrers, in der Akzentfarbe abgesetzt. */
#rider-select-name{
  color:var(--green);
}
#riders{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(0.4rem, 1.6vh, 0.8rem);
  width:100%;
  max-width:400px;
  margin:clamp(0.3rem, 1.5vh, 0.9rem) 0;
}
.rider-carousel-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(0.3rem, 2vw, 0.8rem);
  width:100%;
}
.rider-viewport{
  position:relative;
  flex:1 1 auto;
  max-width:220px;
  overflow:hidden;
}
.rider-track{
  display:flex;
  transition:transform 0.25s ease;
}
.rider-card{
  position:relative;
  flex:0 0 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.rider-card .portrait{
  display:block;
  width:auto;
  max-width:100%;
  max-height:clamp(9rem, 32vh, 15rem);
  margin:0 auto;
}
/* Pfeil-Buttons links/rechts — dieselbe "chunky bevel"-Technik wie #mute-btn
   (helle Kante oben/links, dunkle unten/rechts, harte Ecken, Schatten;
   beim Drücken kehrt sich die Fase um und der Button rutscht nach unten). */
.rider-nav{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:2.4rem;
  height:2.4rem;
  padding:0;
  background:#6b4a2f;
  border:none;
  border-radius:0;
  cursor:pointer;
  color:var(--text);
  font-family:var(--font-display);
  font-size:1.7rem;
  line-height:1;
  box-shadow:
    inset 3px 3px 0 rgba(255,214,170,0.35),
    inset -3px -3px 0 rgba(0,0,0,0.5),
    0 3px 0 rgba(0,0,0,0.6);
  transition:transform 0.08s ease;
}
.rider-nav span{ transform:translateY(-0.1em); pointer-events:none; }
.rider-nav:active{
  box-shadow:
    inset -2px -2px 0 rgba(255,214,170,0.2),
    inset 2px 2px 0 rgba(0,0,0,0.45);
  transform:translateY(3px);
}
/* Positionsanzeige: ein Punkt pro Fahrer, der aktive in der Akzentfarbe.
   Ebenfalls klickbar (springt direkt zu diesem Fahrer). */
.rider-dots{
  display:flex;
  gap:0.4rem;
  align-items:center;
}
.rider-dot{
  width:0.55rem;
  height:0.55rem;
  padding:0;
  border:none;
  border-radius:0;
  background:rgba(255,255,255,0.28);
  cursor:pointer;
  transition:background 0.15s ease, transform 0.15s ease;
}
.rider-dot.active{
  background:var(--pink);
  transform:scale(1.25);
}

/* Pixel-Button-Bevel — dieselbe Technik wie #mute-btn: helle Kante oben/
   links, dunkle Kante unten/rechts, harte Ecken (kein border-radius),
   Schatten darunter; beim Drücken kehrt sich die Fase um und der Button
   rutscht sichtbar nach unten statt nur die Farbe zu wechseln. Ersetzt die
   frühere Bild-Grafik (button_3/4.png) — jetzt reine CSS-Fläche, pro
   Button-Art nur mit anderer Füllfarbe. */
.btn-primary, .btn-secondary{
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  padding:0.7rem 1.8rem;
  border-radius:0;
  cursor:pointer;
  border:none;
  transition:transform 0.08s ease;
}
.btn-primary{
  background:var(--pink);
  color:var(--bg);
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,0.35),
    inset -3px -3px 0 rgba(0,0,0,0.35),
    0 3px 0 rgba(0,0,0,0.5);
}
.btn-primary:active:not(:disabled){
  box-shadow:
    inset -2px -2px 0 rgba(255,255,255,0.22),
    inset 2px 2px 0 rgba(0,0,0,0.3);
  transform:translateY(3px);
}
.btn-primary:disabled{
  background:var(--border);
  color:var(--muted);
  cursor:not-allowed;
  box-shadow:none;
}
.btn-secondary{
  background:var(--surface);
  color:var(--text);
  margin-top:0.2rem;
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,0.12),
    inset -3px -3px 0 rgba(0,0,0,0.45),
    0 3px 0 rgba(0,0,0,0.5);
}
.btn-secondary:active:not(:disabled){
  box-shadow:
    inset -2px -2px 0 rgba(255,255,255,0.08),
    inset 2px 2px 0 rgba(0,0,0,0.4);
  transform:translateY(3px);
}

/* Nebeneinander statt untereinander — spart deutlich Höhe gegenüber zwei
   gestapelten Buttons, wichtig fürs Ohne-Scrollen-Passen des Startscreens. */
.btn-row{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:0.6rem;
  width:100%;
}

/* Größter Panel-Button (ZUM TRAIL/BESTENLISTE) — dieselbe Pixel-Bevel-
   Technik wie .btn-primary/.btn-secondary oben, nur mit eigener Breite
   (statt auto), da ein Flex-Item sich mit width:auto sonst nur auf seinen
   Textinhalt schrumpfen würde. Breite als min()-Deckel aus Rem/Vw/Vh
   ausgedrückt (Vh-Anteil × 289/107 rein als Skalierungsformel, keine
   echte Bild-Abhängigkeit mehr), damit sie auf kurzen Screens automatisch
   enger wird, ohne eine feste Höhe (Bild-Aspect-Ratio) mehr zu brauchen —
   die Höhe kommt jetzt einfach aus dem Padding wie bei den übrigen
   Buttons. */
.btn-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  height:auto;
  width:min(8rem, 42vw, calc(7vh * 289 / 107));
  padding:0.65rem 0.6rem;
  background:#6b4a2f;
  border:none;
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.82rem;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--text);
  text-shadow:0 2px 3px rgba(0,0,0,0.7);
  box-shadow:
    inset 3px 3px 0 rgba(255,214,170,0.35),
    inset -3px -3px 0 rgba(0,0,0,0.5),
    0 3px 0 rgba(0,0,0,0.6);
  transition:transform 0.08s ease, opacity 0.12s ease;
}
.btn-panel:active:not(:disabled){
  box-shadow:
    inset -2px -2px 0 rgba(255,214,170,0.2),
    inset 2px 2px 0 rgba(0,0,0,0.45);
  transform:translateY(3px);
}
.btn-panel-label{ transform:translateY(-0.08em); }
.btn-panel:disabled{
  cursor:not-allowed;
  opacity:0.45;
}
/* Start-Button ("LOS!") in der Akzentfarbe statt Holzbraun — orientiert
   am Flammen-Orange aus dem Titelbild (var(--pink), siehe Farbpalette-
   Kommentar oben), hebt ihn als die eine wirklich wichtige Aktion auf dem
   Startbildschirm von der eher neutralen BESTENLISTE ab. Dunkler Text
   statt heller (wie sonst bei .btn-panel) für genug Kontrast auf dem
   hellen Orange — derselbe Ansatz wie bei .btn-primary. */
.btn-panel-accent{
  background:var(--pink);
  color:var(--bg);
  text-shadow:none;
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,0.4),
    inset -3px -3px 0 rgba(0,0,0,0.3),
    0 3px 0 rgba(0,0,0,0.5);
}
.btn-panel-accent:active:not(:disabled){
  box-shadow:
    inset -2px -2px 0 rgba(255,255,255,0.25),
    inset 2px 2px 0 rgba(0,0,0,0.25);
}

/* Losgelöst aus dem zentrierten Content-Fluss von #menu-screen (dessen
   nächster positionierter Vorfahre — position:absolute; inset:0 — dient
   hier als Bezugsrahmen) und stattdessen fest unten angedockt, in einer
   leicht transparenten schwarzen Box statt als einfacher Fließtext. */
.controls-hint{
  position:absolute;
  left:0.9rem;
  right:0.9rem;
  bottom:max(0.9rem, env(safe-area-inset-bottom));
  margin:0;
  padding:0.6rem 0.9rem;
  background:rgba(0,0,0,0.55);
  border-radius:10px;
  font-family:var(--font-body);
  color:var(--muted);
  font-size:0.7rem;
  max-width:none;
  text-align:center;
}

/* Ganz unten mittig, unterhalb der .controls-hint-Box — dezent, nicht mit
   ihr in einer Box kombiniert, damit sie als eigener kleiner Hinweis lesbar
   bleibt statt wie ein Teil der Steuerungserklärung zu wirken. */
.version-label{
  position:absolute;
  left:0;
  right:0;
  bottom:max(0.2rem, env(safe-area-inset-bottom));
  margin:0;
  text-align:center;
  font-family:var(--font-mono);
  font-size:0.6rem;
  color:var(--muted);
  opacity:0.6;
  pointer-events:none;
}

/* ---- Game over ---- */
/* Hintergrund bleibt die Landschaft (assets/images/landscape.png, dieselbe
   wie im laufenden Spiel) statt der opaken --bg-Fläche der .screen-Basis —
   der Game-Over-Screen soll sich als Teil des Trails anfühlen, nicht als
   harter Bruch. Dunkler Verlauf darüber für Lesbarkeit von Text/Liste. */
#gameover-screen{
  background-image:
    linear-gradient(180deg, rgba(13,28,44,0.55) 0%, rgba(13,28,44,0.84) 42%, rgba(13,28,44,0.93) 100%),
    url('../assets/images/landscape.png');
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
}

/* Item-Icon, das den Game Over ausgelöst hat — klein, direkt über der Meldung. */
.go-reason-icon{
  width:3rem;
  height:3rem;
  object-fit:contain;
  image-rendering:pixelated;
  margin-bottom:0.15rem;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,0.6));
}

/* Punkte als große Hauptzahl, Distanz klein als Zusatzinfo darunter. */
.result{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.05rem;
  margin:0.3rem 0 0.7rem;
}
.result #go-score{
  font-family:var(--font-mono);
  font-size:3.2rem;
  line-height:1;
  color:var(--green);
  font-variant-numeric:tabular-nums;
}
.result #go-distance{
  font-family:var(--font-mono);
  font-size:0.9rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ---- Bestenliste (Game Over) ---- */
#highscore-list{
  width:100%;
  max-width:20rem;
  margin:0.3rem 0;
}
/* Zeitraum- (Gesamt/Woche) und Sortier-Umschalter (Punkte/Distanz): zwei
   Segment-Schieber nebeneinander in EINER Zeile. Der aktive Eintrag wird von
   einem gleitenden Pill hinterlegt (.hs-seg::after) — per data-active am
   Container-Element von game.js zwischen 0 und 1 umgeschaltet. */
.hs-toggles{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:0.35rem;
  margin-bottom:0.5rem;
}
.hs-seg{
  position:relative;
  display:flex;
  padding:2px;
  background:var(--surface);
  border-radius:999px;
  box-shadow:
    inset 2px 2px 0 rgba(0,0,0,0.35),
    inset -2px -2px 0 rgba(255,255,255,0.05);
}
/* Gleitendes Pill hinter der aktiven Option. Breite = genau eine der beiden
   (per flex:1 gleich breiten) Optionen, siehe .hs-seg > button. */
.hs-seg::after{
  content:"";
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  width:calc(50% - 2px);
  background:var(--green);
  border-radius:999px;
  transition:transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events:none;
}
.hs-seg[data-active="1"]::after{ transform:translateX(100%); }
.hs-seg > button{
  position:relative;
  z-index:1;
  flex:1 1 0;
  white-space:nowrap;
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--muted);
  background:none;
  border:none;
  border-radius:999px;
  padding:0.34rem 0.62rem;
  cursor:pointer;
  transition:color 0.18s ease;
}
.hs-seg > button.active{ color:var(--bg); }
@media (prefers-reduced-motion: reduce){
  .hs-seg::after{ transition:none; }
}
/* Gesamtzahl gespielter Runs unter dem Titel + KW-Label über der Liste —
   dezente Zusatzinfos, klein und gedämpft. */
.hs-plays-count{
  margin:0.1rem 0 0.6rem;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.04em;
  color:var(--muted);
}
.hs-plays-count:empty{ display:none; }
.hs-week-label{
  margin:0 0 0.4rem;
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--green);
}
.highscore-items{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  max-height:11rem;
  overflow-y:auto;
}
.highscore-items li{
  display:flex;
  align-items:center;
  gap:0.6rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  padding:0.35rem 0.7rem;
  font-family:var(--font-mono);
  font-size:0.78rem;
}
.highscore-items .hs-rank{
  color:var(--muted);
  width:1.6rem;
  flex:0 0 auto;
}
.highscore-items .hs-name{
  flex:1 1 auto;
  text-align:left;
  letter-spacing:0.06em;
  color:var(--text);
}
.highscore-items .hs-score,
.highscore-items .hs-distance{
  font-variant-numeric:tabular-nums;
  flex:0 0 auto;
  text-align:right;
  min-width:3.4rem;
}
.highscore-items .hs-score{ color:var(--green); }
.highscore-items .hs-distance{ color:var(--muted); font-size:0.7rem; }
/* Kleines Fahrer-Bildchen, mit dem der Score erzielt wurde — ganz rechts,
   nach der Distanz. */
.highscore-items .hs-rider-thumb{
  flex:0 0 auto;
  width:1.3rem;
  height:1.3rem;
  object-fit:cover;
  object-position:top center;
  border-radius:50%;
  background:var(--surface);
}
.highscore-items .hs-empty{
  justify-content:center;
  color:var(--muted);
  font-family:var(--font-body);
}

/* Game-Over-Bestenliste: das Umfeld der eigenen Platzierung wird komplett
   angezeigt (max. 7 Zeilen), daher hier kein Scroll-Deckel nötig. */
#highscore-list .highscore-items{ max-height:none; }

/* "Deine" Zeile — hervorgehoben, enthält das Namens-Eingabefeld direkt inline. */
.highscore-items li.hs-you{
  border-color:var(--pink);
  background:var(--surface-2);
}
.highscore-items .hs-name-input{
  flex:1 1 auto;
  min-width:5rem;
  width:100%;
  background:var(--bg);
  border:1px solid var(--pink);
  color:var(--text);
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:0.8rem;
  padding:0.18rem 0.4rem;
  border-radius:4px;
}
.highscore-items .hs-name-input:disabled{ opacity:0.7; }
.highscore-items .hs-enter-btn{
  flex:0 0 auto;
  font-family:var(--font-display);
  font-size:0.66rem;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  padding:0.28rem 0.55rem;
  border:none;
  border-radius:0;
  cursor:pointer;
  color:var(--bg);
  background:var(--pink);
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.35),
    inset -2px -2px 0 rgba(0,0,0,0.35),
    0 2px 0 rgba(0,0,0,0.5);
}
.highscore-items .hs-enter-btn:active{
  box-shadow:
    inset -2px -2px 0 rgba(255,255,255,0.2),
    inset 2px 2px 0 rgba(0,0,0,0.3);
  transform:translateY(2px);
}
.highscore-items .hs-enter-btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

/* Eigenständiger Bestenliste-Screen (vom Startbildschirm aus erreichbar) —
   mehr Platz als die kompakte Liste im Game-Over-Kontext. */
#highscore-screen .hs-screen-title{
  font-size:clamp(1.6rem, 9vw, 2.2rem);
}
#highscore-screen .highscore-items{
  width:100%;
  max-width:20rem;
  max-height:min(50vh, 26rem);
  margin:0.3rem 0 0.8rem;
}

#highscore-form{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.4rem;
  margin-bottom:0.5rem;
}
#highscore-form label{
  font-family:var(--font-body);
  font-size:0.68rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
#nickname{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  font-family:var(--font-mono);
  text-transform:uppercase;
  text-align:center;
  font-size:1rem;
  letter-spacing:0.15em;
  padding:0.5rem;
  border-radius:6px;
  width:9rem;
}
.note{
  font-family:var(--font-body);
  font-size:0.68rem;
  color:var(--muted);
  max-width:34ch;
  margin:0.2rem 0 0;
}

/* ---- Admin-Regler: von der separaten Admin-Seite genutzt (admin/index.html
   verlinkt dieses Stylesheet mit), hier drin, damit Fonts/Farb-Token und
   Regler-Optik an einer Stelle gepflegt werden. Auf der Spielseite selbst
   kommt keine dieser Klassen mehr vor. ---- */
.admin-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.7rem 0.9rem;
  padding-top:max(0.7rem, env(safe-area-inset-top));
  border-bottom:1px solid var(--border);
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  color:var(--pink);
  flex-shrink:0;
}
.admin-header button{
  background:none;
  border:1px solid var(--border);
  color:var(--text);
  border-radius:6px;
  width:1.6rem;
  height:1.6rem;
  cursor:pointer;
}
#admin-body{
  flex:1;
  overflow-y:auto;
  padding:0.8rem 0.9rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.admin-group-title{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--green);
  margin:0 0 0.4rem;
}
.admin-row{
  display:flex;
  align-items:center;
  gap:0.6rem;
  padding:0.3rem 0;
  border-bottom:1px solid var(--border);
}
.admin-row label{
  flex:1;
  font-size:0.78rem;
  color:var(--text);
}
.admin-row input[type="range"]{
  flex:1;
  accent-color:var(--pink);
}
.admin-row output{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--muted);
  min-width:3.6rem;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.admin-row input[type="checkbox"]{
  width:1.1rem;
  height:1.1rem;
  accent-color:var(--pink);
}
.admin-footer{
  display:flex;
  gap:0.6rem;
  padding:0.7rem 0.9rem;
  padding-bottom:max(0.7rem, env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  flex-shrink:0;
}
.admin-footer .btn-secondary{
  flex:1;
  font-size:0.75rem;
  padding:0.55rem 0.8rem;
}

/* ---- Countdown ---- */
#countdown-overlay{
  position:absolute;
  inset:0;
  z-index:15;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:max(3.5rem, env(safe-area-inset-top) + 2.5rem);
  pointer-events:none;
}
#countdown-number{
  font-family:var(--font-display);
  font-weight:800;
  font-size:8rem;
  line-height:1;
  color:var(--text);
  text-shadow:0 0 24px rgba(0,0,0,0.6), 0 4px 0 rgba(0,0,0,0.4);
  animation:countdown-pulse 1s ease-out;
}
@keyframes countdown-pulse{
  0%{ transform:scale(0.4); opacity:0; }
  30%{ transform:scale(1.15); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  #countdown-number{ animation:none; }
}

/* ---- Drop-Editor (Admin): Kurvendiagramm entfernt (siehe CHANGELOG) —
   die Auffahrt beginnt jetzt immer bei der ersten Berührung (nicht mehr
   einstellbar) — .drop-editor-caption bleibt, wird für den Hinweistext
   dazu weiterverwendet. ---- */
.drop-editor-caption{
  font-family:var(--font-body);
  font-size:0.72rem;
  color:var(--muted);
  display:block;
  margin-bottom:0.6rem;
}