/* Look nach dontlookup.app: Papier und Tinte, Display-Schrift für Zahlen und Buttons, Nunito für Text, harte
   Versatz-Schatten ohne Weichzeichner, leicht ungleiche Ecken. Marsipan (die Original-Schrift der Referenz) ist
   kostenpflichtig; Luckiest Guy ist ihr Fallback und liegt in fonts/. Die Schilder im Schnee (render.js) nutzen
   dieselbe Display-Schrift. */
@font-face {
  font-family: 'Luckiest Guy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/LuckiestGuy-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('./fonts/Nunito-Variable.woff2') format('woff2');
}

:root {
  --bg: #F5F9FD;      /* Schnee, wie SNOW in render.js */
  --paper: #F4F3EF;   /* Karten, Overlays */
  --ink: #14140F;
  --slow: #C0342A;    /* Super-G: Torfehler und Zwischenzeit langsamer, wie GATE_RED in constants.js */
  --fast: #2E7D46;    /* Zwischenzeit schneller */
  --mark: #F8E08A;    /* gewählte Kachel, Hinweise */
  --display: 'Luckiest Guy', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --body: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --font: var(--body);
  /* Ecken sind absichtlich ungleich, das wirkt wie von Hand gezeichnet */
  --r-card: 22px 27px 20px 25px / 27px 20px 25px 22px;
  --r-btn: 24px 30px 22px 28px / 30px 22px 28px 24px;
  --r-tile: 14px 17px 12px 16px / 17px 12px 16px 14px;
  --press: 130ms ease-out;
  /* Safe-Areas als Variablen, damit render.js sie für Schilder am Bildrand lesen kann */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  overflow: hidden;
}

html, body, canvas {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  font-family: var(--body);
  font-weight: 700;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
}

canvas#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

button {
  font-family: var(--display);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  touch-action: manipulation;
}

/* Display-Schrift: Zahlen und Titel, leicht gesperrt wie in der Referenz */
.dsp, #hud, #hud-note, #dead-dist, .ov-title, #ov-count, .board-rank, .board-m, .stats-rank, .stats-num, #btn-fresh,
.mode-name, .tune-title {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.02em;
}

#hud {
  position: fixed;
  right: 20px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  text-align: right;
  line-height: 1.05;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px var(--bg), 0 0 12px var(--bg);
}
#hud-speed { font-size: 17px; opacity: 0.75; }
#hud-dist { font-size: 32px; }
#hud-time { font-size: 32px; display: none; }
body[data-mode="superg"] #hud-time, body[data-mode="slalom"] #hud-time, body[data-mode="duel"] #hud-time { display: block; }
body[data-mode="superg"] #hud-dist, body[data-mode="slalom"] #hud-dist, body[data-mode="duel"] #hud-dist { font-size: 17px; opacity: 0.75; }
/* Duell: Zeile für den Gegner (Abstand, Vorgabe), rot wenn er vorn liegt, grün wenn er zurückliegt */
#hud-opp { font-size: 17px; opacity: 0.75; }
#hud-opp:empty { display: none; }
#hud-opp.slow { color: var(--slow); opacity: 1; }
#hud-opp.fast { color: var(--fast); opacity: 1; }
/* Piste: die freien Stürze als Punkte unter den Metern, verbrauchte sind nur noch ein Ring */
#hud-lives { display: none; justify-content: flex-end; gap: 6px; margin-top: 7px; }
body[data-mode="piste"] #hud-lives { display: flex; }
#hud-lives i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--ink);
  box-shadow: 0 0 6px var(--bg);
}
#hud-lives i.used { background: transparent; opacity: 0.45; }
/* Piste im Flutlicht: über der dunklen Piste wird das HUD hell */
body[data-night="1"] #hud, body[data-night="1"] #hud-note { color: var(--paper); text-shadow: 0 0 6px var(--ink), 0 0 12px var(--ink); }
body[data-night="1"] #hud-lives i { border-color: var(--paper); background: var(--paper); box-shadow: none; }
body[data-night="1"] #hud-lives i.used { background: transparent; }
body[data-night="1"][data-overlay="1"] #hud { color: var(--ink); }
/* HUD weg auf der Fresh-Seite; im Duell und auf der Piste bleibt es in der Sturzpause (dead ohne Overlay) stehen */
body[data-state="dead"]:not([data-mode="duel"]):not([data-mode="piste"]) #hud, body[data-state="dead"][data-overlay="1"] #hud,
body[data-state="finished"][data-overlay="1"] #hud, body[data-state="ready"][data-overlay="1"] #hud { display: none; }

/* Super-G: Hinweis unter dem Fahrer (Torfehler, Zwischenzeit), blendet über die Klasse ein */
#hud-note {
  position: fixed;
  left: 0;
  right: 0;
  top: 46%;
  text-align: center;
  font-size: 28px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  text-shadow: 0 0 6px var(--bg), 0 0 12px var(--bg);
}
#hud-note.miss, #hud-note.slow { color: var(--slow); opacity: 1; }
#hud-note.fast { color: var(--fast); opacity: 1; }
#hud-note.split { opacity: 0.8; }

#hint {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
  text-align: center;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
body[data-state="ready"][data-intro="1"] #hint { opacity: 0.6; }
/* Intro beim ersten Spielen (intro.js): ohne Anzeige, es zählt noch nichts */
body[data-state="tutorial"] #hud { display: none; }

.overlay {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#ov-pause { background: rgba(244, 243, 239, 0.7); }
body[data-state="paused"] #ov-pause { display: flex; }
.ov-title { font-size: 44px; }
.ov-sub { font-size: 14px; opacity: 0.7; margin-top: 8px; }

/* Super-G: Countdown 3 · 2 · 1 in der Mitte, dann kurz „Go“; Tipps gehen durch auf den Canvas */
#ov-count { font-size: 120px; line-height: 1; pointer-events: none; text-shadow: 0 0 8px var(--bg), 0 0 16px var(--bg); }
#ov-count.go { font-size: 80px; }
body[data-state="count"] #ov-count, #ov-count.go { display: flex; }

/* Fresh-Seite: Papier-Schleier über dem Spielfeld, darauf eine weiße Karte mit allem drin */
#ov-dead { background: rgba(244, 243, 239, 0.62); padding: 0 16px; box-sizing: border-box; }
body[data-state="dead"][data-overlay="1"] #ov-dead, body[data-state="finished"][data-overlay="1"] #ov-dead,
body[data-state="ready"][data-overlay="1"] #ov-dead { display: flex; } /* ready: Duell-Lobby über dem wartenden Startbild */
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 340px;
  box-sizing: border-box;
  padding: 18px 12px 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 3px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: 5px 6px 0 var(--ink);
  transform: rotate(-0.6deg);
}
#dead-dist { font-size: 56px; line-height: 1; }
#dead-time { font-size: 14px; margin-top: 8px; }
#dead-best { font-size: 14px; opacity: 0.7; margin-top: 2px; }
/* Piste: Tricks, Torstrecken und Tempomessung des Laufs, darunter der Pistenplan mit dem gefahrenen Weg */
#dead-extra { font-size: 13px; opacity: 0.7; margin-top: 2px; }
#dead-extra:empty { display: none; }
#piste-plan { display: block; width: 100%; height: 64px; margin-top: 8px; }
#piste-plan[hidden] { display: none; }
/* kleine iPhones: Plan ohne Profil, keine Zusatzzeile; die Liste zeigt dort nur drei Zeilen (hud.js, SHORT_PX) */
@media (max-height: 719px) {
  #dead-extra { display: none; }
  #piste-plan { height: 40px; margin-top: 4px; }
}

/* Bestenliste (board.js, hud.js): Rang | Name | Meter, andere Zeilen leicht zurückgenommen, die eigene deckend.
   Die eigene Zeile trägt das Namensfeld; ohne Namen steht nur das Feld da, zentriert. 16 px, damit iOS beim Fokus
   nicht zoomt; user-select text, weil body none setzt (sonst bekommt das Feld auf iOS keinen Fokus). */
#board { width: 250px; margin-top: 12px; font-size: 14px; cursor: pointer; }
.board-row {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: baseline;
  line-height: 1.5;
  opacity: 0.7;
}
.board-own { opacity: 1; align-items: center; margin-top: 4px; }
.board-rank, .board-m { text-align: right; font-variant-numeric: tabular-nums; font-size: 15px; }
.board-name { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#board-more { line-height: 1; opacity: 0.7; }
#board-name, .field {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 6px 10px;
  box-sizing: border-box;
  font: 700 16px var(--body);
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 11px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  touch-action: manipulation;
  transition: box-shadow var(--press), transform var(--press);
}
#board-name::placeholder, .field::placeholder { color: var(--ink); opacity: 0.45; }
#board-name:focus, .field:focus { box-shadow: 3px 4px 0 var(--ink); transform: translate(-1px, -1px); }
#board[data-named=""] .board-own { grid-template-columns: 1fr; width: 170px; margin: 6px auto 0; }
#board[data-named=""] .board-rank, #board[data-named=""] .board-m { display: none; }
#board[data-named=""] #board-name { text-align: center; }
#board-note { margin: 8px -40px 0; font-size: 12px; opacity: 0.65; } /* breiter als die Liste, damit der Hinweis in einer Zeile bleibt */

/* Haupt-Button: schwarz mit Papier-Rand, harter Schatten, sinkt beim Druck auf seinen Schatten (auch Los, Bereit,
   Revanche in der Duell-Kachel) */
#btn-fresh, .btn-main {
  margin-top: 22px;
  height: 44px;
  padding: 0 28px;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: #000;
  border: 3px solid var(--paper);
  border-radius: var(--r-btn);
  box-shadow: 5px 6px 0 var(--ink);
  transform: rotate(0.7deg);
  transition: transform var(--press), box-shadow var(--press);
}
#btn-fresh:active, .btn-main:active { transform: rotate(0.7deg) translate(5px, 6px); box-shadow: 0 0 0 var(--ink); }
.btn-main[disabled] { opacity: 0.4; cursor: default; }
.btn-main[disabled]:active { transform: rotate(0.7deg); box-shadow: 5px 6px 0 var(--ink); }

/* Modus-Kärtchen: weiße Kärtchen, die gewählte ist gelb. Unter Fresh stehen drei hochkant (Classic und die zwei
   zuletzt gespielten), mehr passen nicht in die 313 px der Karte auf dem 375-px-iPhone; alle Modi zeigt die Kachel
   „Modus“ als Zeilen (.mode-row) samt Bestwert. Die Fahrerwahl nutzt die Kärtchen ebenfalls hochkant.
   Vorschau-Canvas 104x58 wird unter Fresh auf 82 px skaliert, in den Zeilen auf 72 px. */
#modes {
  display: flex;
  gap: 8px;
  margin-top: 22px;
  align-items: flex-start;
}
.mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 4px 4px 5px;
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--r-tile);
  box-shadow: 3px 4px 0 var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--press), box-shadow var(--press), background 0.15s;
}
.mode-card:active { transform: translate(3px, 4px); box-shadow: 0 0 0 var(--ink); }
.mode-card.active { background: var(--mark); }
.mode-card.soon { opacity: 0.4; cursor: default; }
/* Beta-Modus (modes.js beta): Aufkleber an der oberen rechten Ecke, damit Name und Vorschau stehen bleiben */
.mode-card { position: relative; }
.mode-beta {
  position: absolute;
  top: -8px;
  right: -6px;
  padding: 2px 5px 1px;
  font-family: var(--display);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--slow);
  border: 2px solid var(--ink);
  border-radius: 6px;
  transform: rotate(6deg);
  pointer-events: none;
}
.mode-beta[hidden], .mode-row[hidden] { display: none; }
.mode-preview {
  display: block;
  width: 72px;
  height: 40px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-sizing: border-box;
}
.mode-name { font-size: 12px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; }
#modes .mode-preview { width: 82px; height: 46px; }
#modes .mode-card[hidden] { display: none; }
.mode-cta {
  font-family: var(--body);
  font-size: 11px;
  line-height: 1;
  opacity: 0.65;
  visibility: hidden;
  text-transform: none;
  letter-spacing: 0;
}
.mode-card.active .mode-cta { visibility: visible; }
.mode-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 10px 5px 5px;
  text-align: left;
}
.mode-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mode-desc { font-family: var(--body); font-size: 12px; line-height: 1.2; opacity: 0.7; }
.mode-best { font-family: var(--display); font-size: 13px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; opacity: 0.8; white-space: nowrap; }
#btn-modes { margin-top: 16px; }
#modes-list { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; width: 100%; }
#btn-modes-back { margin-top: 18px; }

/* Fahrerwahl (riders.js): Icon oben links auf der Fresh-Seite, ein Tipp tauscht die Karte gegen die Auswahl.
   Das Icon sitzt fest im Bildschirmeck, nicht in der Karte, damit es lange Meterzahlen nicht verdrängt. */
#btn-rider {
  position: fixed;
  left: 16px;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  padding: 3px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--r-tile);
  box-shadow: 3px 4px 0 var(--ink);
  transform: rotate(-2deg);
  transition: transform var(--press), box-shadow var(--press);
}
#btn-rider:active { transform: rotate(-2deg) translate(3px, 4px); box-shadow: 0 0 0 var(--ink); }
/* Ton an/aus: Gegenstück zum Fahrer-Icon im rechten Eck, gleiche Größe, andersherum gekippt. Aus: Kreuz statt Wellen. */
#btn-sound {
  position: fixed;
  right: 16px;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  padding: 3px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--r-tile);
  box-shadow: 3px 4px 0 var(--ink);
  transform: rotate(2deg);
  transition: transform var(--press), box-shadow var(--press);
}
#btn-sound:active { transform: rotate(2deg) translate(3px, 4px); box-shadow: 0 0 0 var(--ink); }
.sound-icon { display: block; width: 40px; height: 40px; }
.sound-icon .spk { fill: var(--ink); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.sound-icon .wave, .sound-icon .mute { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.sound-icon .mute, #btn-sound.off .wave { display: none; }
#btn-sound.off .mute { display: inline; }
body[data-panel="riders"] #btn-rider { background: var(--mark); }
/* Einstellungen: Zahnrad links neben dem Ton-Icon, gleiche Kachel, leicht andersherum gekippt als der Nachbar, damit
   die beiden nicht wie ein Block wirken. Offen: gelb wie das Fahrer-Icon bei offener Fahrerwahl. */
#btn-settings {
  position: fixed;
  right: calc(16px + 51px + 12px); /* Ton-Icon: 40 px Symbol + 2 × 3 px Rand innen + 2 × 2,5 px Linie */
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  padding: 3px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--r-tile);
  box-shadow: 3px 4px 0 var(--ink);
  transform: rotate(-1.5deg);
  transition: transform var(--press), box-shadow var(--press);
}
#btn-settings:active { transform: rotate(-1.5deg) translate(3px, 4px); box-shadow: 0 0 0 var(--ink); }
body[data-panel="settings"] #btn-settings { background: var(--mark); }
.gear-icon { display: block; width: 40px; height: 40px; }
.gear-icon .gear { fill: var(--ink); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
/* Neustart (Super-G, Duell gegen den Bot): oben rechts, solange gefahren wird (Countdown, Fahrt, Pause); dieselbe Kachel wie das Ton-Icon,
   das erst auf der Fresh-Seite an dieser Stelle steht. Ein Tipp bricht den Lauf ab, es geht mit dem Countdown von
   vorn los. */
#btn-restart {
  display: none;
  position: fixed;
  right: 16px;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  padding: 3px;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--r-tile);
  box-shadow: 3px 4px 0 var(--ink);
  transform: rotate(2deg);
  transition: transform var(--press), box-shadow var(--press);
}
#btn-restart:active { transform: rotate(2deg) translate(3px, 4px); box-shadow: 0 0 0 var(--ink); }
body[data-race="1"][data-state="count"] #btn-restart, body[data-race="1"][data-state="running"] #btn-restart,
body[data-race="1"][data-state="paused"] #btn-restart { display: block; }
.restart-icon { display: block; width: 40px; height: 40px; }
.restart-icon path { fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.rider-preview { display: block; width: 40px; height: 40px; border-radius: 9px; }
#rider-card, #stats-card, #modes-card, #duel-card, #settings-card { display: none; }
body[data-panel="riders"] #rider-card, body[data-panel="stats"] #stats-card, body[data-panel="modes"] #modes-card,
body[data-panel="duel"] #duel-card, body[data-panel="settings"] #settings-card { display: flex; }
body[data-panel="riders"] #dead-card, body[data-panel="stats"] #dead-card, body[data-panel="modes"] #dead-card,
body[data-panel="duel"] #dead-card, body[data-panel="settings"] #dead-card { display: none; }
.card-title { font-family: var(--display); font-size: 30px; line-height: 1; letter-spacing: 0.02em; }
#riders { display: flex; gap: 8px; margin-top: 18px; align-items: flex-start; }
#riders .mode-card { width: 94px; }
#riders .rider-preview { width: 82px; height: 82px; border: 2px solid var(--ink); border-radius: 8px; box-sizing: border-box; }
#btn-rider-back { margin-top: 18px; }

/* Einstellungen (settings.js): Einwilligung als großes Kästchen mit Text, Sprache als drei Kärtchen mit Flagge,
   Lautstärken als Zeilen Name | Regler | Prozent. Der Inhalt scrollt, wenn er nicht auf den Bildschirm passt
   (iPhone SE im Safari-Tab); Titel und Zurück bleiben stehen. */
/* Die Karte steht nicht mittig wie die anderen, sondern direkt unter den Icons: so bleibt für die Regler die volle
   Höhe bis unten (margin-bottom auto schluckt den Rest des Overlays) */
#settings-card { margin: calc(env(safe-area-inset-top, 0px) + 84px) 0 auto; }
#settings-body {
  width: 100%;
  /* Rest der Bildschirmhöhe: 84 px Icons oben, ~130 px Titel, Zurück und Rand der Karte, 24 px Luft unten */
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 240px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  margin-top: 14px;
  padding: 2px 4px 6px;
  box-sizing: border-box;
}
.set-check {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  width: calc(100% - 4px); /* Platz für den Schatten, #settings-body schneidet sonst ab */
  padding: 10px 10px 10px 8px;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--r-tile);
  box-shadow: 3px 4px 0 var(--ink);
  transition: transform var(--press), box-shadow var(--press), background 0.15s;
}
.set-check:active { transform: translate(3px, 4px); box-shadow: 0 0 0 var(--ink); }
.set-check[aria-checked="true"] { background: var(--mark); }
.set-box {
  display: block;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  box-sizing: border-box;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 7px 8px 6px 8px;
}
.set-box svg { display: block; width: 100%; height: 100%; visibility: hidden; }
.set-box path { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.set-check[aria-checked="true"] .set-box svg { visibility: visible; }
.set-check-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.set-check-title { font-family: var(--display); font-size: 14px; line-height: 1.1; letter-spacing: 0.02em; }
.set-check-sub { font-family: var(--body); font-size: 12px; line-height: 1.3; opacity: 0.7; }
.set-head { display: block; margin: 18px 0 8px; font-family: var(--display); font-size: 16px; letter-spacing: 0.04em; text-align: left; }
.set-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 18px 0 8px; }
.set-head-row .set-head { margin: 0; }
#set-snd-reset[disabled] { opacity: 0.35; }
/* Sprache: Zeile wie ein Eingabefeld (Flagge, Name, ▾), das unsichtbare select darüber fängt den Tipp und öffnet
   die Auswahl des iPhones. 16 px, damit iOS beim Öffnen nicht zoomt. */
.lang-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 12px;
  box-sizing: border-box;
  font: 700 16px var(--body);
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 11px;
}
.lang-flag {
  display: block;
  flex: none;
  width: 26px;
  height: 18px;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  box-sizing: border-box;
}
.lang-flag svg { display: block; width: 100%; height: 100%; }
.lang-name { flex: 1; text-align: left; }
.lang-chev { font-size: 14px; opacity: 0.6; }
.lang-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}
.lang-row:focus-within { box-shadow: 3px 4px 0 var(--ink); }
.set-slider {
  display: grid;
  grid-template-columns: 7.4em minmax(0, 1fr) 3em;
  column-gap: 8px;
  align-items: center;
  min-height: 34px;
  font-size: 13px;
}
.set-slider-name { text-align: left; line-height: 1.15; overflow-wrap: anywhere; } /* lange Namen brechen um statt abzuschneiden */
.set-slider-val { text-align: right; font-variant-numeric: tabular-nums; opacity: 0.75; }
.set-slider input { width: 100%; margin: 0; accent-color: var(--ink); }
#set-board[hidden] { display: none; }
#set-board .set-head { margin-top: 18px; }
#set-name { text-align: center; }
.set-note { min-height: 1.3em; margin: 5px 0 12px; font-size: 12px; opacity: 0.65; }
#btn-settings-back { margin-top: 14px; }

/* Detail-Kachel der Bestenliste (hud.js): Rang | Name | Wert | Fahrzeit | Ø km/h, Kopfzeile klein und blass. Die
   Liste scrollt, wenn sie nicht auf den Bildschirm passt; Platz für Titel, Kopf, Hinweis und Zurück bleibt frei. */
#stats-mode { font-size: 13px; opacity: 0.65; margin-top: 4px; }
#stats-card .stats-row {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr) 3.9em 4.4em 3.4em;
  column-gap: 7px;
  align-items: baseline;
  width: 100%;
  line-height: 1.6;
  font-size: 14px;
}
/* Kopf: die Zeile behält 14 px, nur die Texte sind klein. Die Spaltenbreiten stehen in em, bei kleinerer Schrift der
   Zeile wären die Spalten schmaler und die Überschriften rutschten gegen die Werte nach rechts. */
#stats-head { margin-top: 14px; opacity: 0.55; border-bottom: 2px solid var(--ink); }
#stats-head span { font-family: var(--body); font-size: 11px; letter-spacing: 0; }
#stats-list {
  width: 100%;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 260px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
#stats-list .stats-row { opacity: 0.75; }
#stats-list .stats-row.own { opacity: 1; background: var(--mark); border-radius: 6px; }
.stats-rank, .stats-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats-name { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stats-note { margin-top: 10px; font-size: 12px; opacity: 0.65; }
#stats-note:empty { display: none; }
#btn-stats-back { margin-top: 14px; }

/* Duell-Kachel (duel-card.js): Beitritt (Name, neuer Raum, Code), Lobby mit Raum-Code, Startnummern (.bib) und
   Zielschild (.duel-sign), Ergebnis. Was zur Ansicht nicht gehört, bekommt hidden. */
#duel-card [hidden] { display: none !important; }
#duel-note { margin-top: 6px; font-size: 13px; opacity: 0.7; text-align: center; }
#duel-note:empty { display: none; }
.duel-field-row { width: 200px; margin-top: 14px; }
#btn-duel-create { margin-top: 18px; }
.duel-join-row { display: flex; gap: 8px; align-items: center; margin-top: 18px; }
.duel-join-row .field { width: 104px; text-align: center; font-family: var(--display); font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; }
.duel-code-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.duel-code { font-family: var(--display); font-size: 40px; line-height: 1; letter-spacing: 0.14em; padding-left: 0.14em; }
.duel-bibs { display: flex; gap: 12px; margin-top: 16px; align-items: stretch; }
.bib {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 120px;
  padding: 8px 6px;
  box-sizing: border-box;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--r-tile);
  box-shadow: 3px 4px 0 var(--ink);
}
.bib.me { background: var(--mark); }
.bib.empty { border-style: dashed; box-shadow: none; opacity: 0.55; justify-content: center; font-size: 13px; }
.bib-num { font-family: var(--display); font-size: 30px; line-height: 1; }
.bib .rider-preview { border: 2px solid var(--ink); border-radius: 8px; box-sizing: border-box; }
.bib-name { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bib-state { font-size: 11px; opacity: 0.65; }
.bib.ready .bib-state { color: var(--fast); opacity: 1; }
.bib.warn .bib-state { color: var(--slow); opacity: 1; }
.duel-sign {
  width: 100%;
  margin-top: 16px;
  padding: 8px 12px 6px;
  box-sizing: border-box;
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: var(--r-tile);
  box-shadow: 3px 4px 0 var(--ink);
  transform: rotate(-0.8deg);
}
.duel-sign-row { display: flex; justify-content: space-between; align-items: baseline; }
.duel-sign-label { font-family: var(--display); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.duel-sign-val { font-family: var(--display); font-size: 22px; font-variant-numeric: tabular-nums; }
.duel-sign input[type="range"] { display: block; width: 100%; margin: 4px 0 0; accent-color: var(--ink); touch-action: pan-x; }
.duel-sign input[type="range"]:disabled { opacity: 0.5; }
#btn-duel-go { margin-top: 18px; }
#duel-verdict { margin-top: 10px; font-family: var(--display); font-size: 44px; line-height: 1; text-align: center; letter-spacing: 0.02em; }
#duel-verdict .sub { display: block; font-family: var(--body); font-size: 13px; opacity: 0.7; margin-top: 6px; letter-spacing: 0; }
#duel-lines { margin-top: 12px; width: 100%; font-size: 14px; }
.duel-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 12px; align-items: baseline; line-height: 1.7; padding: 0 8px; }
.duel-line.me { background: var(--mark); border-radius: 6px; }
.duel-line .num { font-family: var(--display); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.duel-line .sub { font-size: 12px; opacity: 0.7; white-space: nowrap; }
.duel-tally { margin-top: 8px; font-size: 12px; opacity: 0.7; text-align: center; }
#btn-duel-again { margin-top: 16px; }
#duel-error { margin-top: 10px; font-size: 12px; color: var(--slow); text-align: center; }
#duel-error:empty { display: none; }
#btn-duel-leave { margin-top: 14px; }
/* Duell gegen den Bot: sechs Stufen-Knöpfe unter den Startnummern, die gewählte gelb wie die eigene Startnummer */
.duel-levels { display: flex; gap: 6px; margin-top: 14px; }
.duel-level {
  width: 38px;
  height: 38px;
  padding: 0;
  font-family: var(--display);
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  background: #fff;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  box-shadow: 2px 3px 0 var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.duel-level.active { background: var(--mark); transform: translate(2px, 3px); box-shadow: 0 0 0 var(--ink); }
#btn-duel-bot, #btn-duel-human { margin-top: 14px; }

/* kleine flache Knöpfe: Modus auswählen, Zurück, Tuning-Aktionen */
.btn-flat, .tune-reset, .tune-copy {
  padding: 6px 12px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px;
  transition: background 0.14s, color 0.14s;
}
.btn-flat:active, .tune-reset:active, .tune-copy:active { background: var(--ink); color: var(--paper); }

#version {
  position: fixed;
  left: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  padding: 14px 10px 6px 10px;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.4;
  touch-action: none;
}
#version.tuned::after { content: ' · tuned'; }
#version.update::after { content: ' · Update bereit, Fresh lädt neu'; }

#tune {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 10;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 40px);
  overflow: hidden;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: 7px 8px 0 rgba(20, 20, 15, 0.14);
  color: var(--ink);
}
#tune[hidden] { display: none; }

/* Kopf bleibt stehen, damit X und Standard ohne Scrollen erreichbar sind */
.tune-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 10px 14px;
  border-bottom: 3px solid var(--ink);
  background: var(--mark);
}
/* Titel gibt auf schmalen iPhones (SE) nach, damit Kopieren, Standard und X immer ganz sichtbar bleiben */
.tune-title { font-size: clamp(14px, 4.6vw, 18px); line-height: 1; flex: 1; min-width: 0; padding-top: 3px; overflow: hidden; }
.tune-reset:disabled { opacity: 0.35; }
.tune-copy, .tune-reset { flex: none; padding: 6px 8px; letter-spacing: 0.02em; white-space: nowrap; }
.tune-close {
  width: 38px;
  height: 38px;
  flex: none;
  padding: 0;
  font-family: var(--body);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 12px 14px 11px 13px / 14px 11px 13px 12px;
  box-shadow: 2px 3px 0 rgba(20, 20, 15, 0.18);
  transition: transform var(--press);
}
.tune-close:active { transform: translate(2px, 2px); box-shadow: none; }

.tune-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  min-height: 0;
}

/* Gruppenfarben: dieselbe Palette wie das Spiel, Rot und Grün aus dem Super-G, Gelb aus --mark */
.tune-group { --tone: var(--ink); --tone-soft: rgba(20, 20, 15, 0.06); --tone-ink: #fff; }
.tune-group[data-tone="blue"] { --tone: #2F6DB5; --tone-soft: #E3EDF9; }
.tune-group[data-tone="red"] { --tone: var(--slow); --tone-soft: #F8E3E0; }
.tune-group[data-tone="green"] { --tone: var(--fast); --tone-soft: #E0F0E4; }
.tune-group[data-tone="orange"] { --tone: #D9661F; --tone-soft: #FBE7D8; }
.tune-group[data-tone="teal"] { --tone: #1F8A8A; --tone-soft: #DDF0F0; }
.tune-group[data-tone="yellow"] { --tone: #D9A514; --tone-soft: #FBF1CC; --tone-ink: var(--ink); }
.tune-group[data-tone="violet"] { --tone: #6B4BB8; --tone-soft: #ECE6F7; }

.tune-group {
  flex: none;
  border: 2px solid var(--ink);
  border-radius: var(--r-tile);
  background: #fff;
  overflow: hidden;
}
.tune-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-left: 10px solid var(--tone);
  padding: 9px 12px 8px 10px;
}
.tune-group.open .tune-bar { background: var(--tone); color: var(--tone-ink); }
.tune-bar-name { flex: 1; padding-top: 2px; }
.tune-badge {
  min-width: 20px;
  padding: 3px 6px 1px;
  box-sizing: border-box;
  font-size: 11px;
  text-align: center;
  color: var(--ink);
  background: var(--mark);
  border: 2px solid var(--ink);
  border-radius: 10px;
}
.tune-badge[hidden] { display: none; }
.tune-chev { font-family: var(--body); font-size: 22px; line-height: 1; transition: transform 0.18s ease-out; }
.tune-group.open .tune-chev { transform: rotate(90deg); }

.tune-list { display: none; flex-direction: column; gap: 4px; padding: 8px 12px 12px; background: var(--tone-soft); border-top: 2px solid var(--ink); }
.tune-group.open .tune-list { display: flex; }
.tune-row { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 2px; column-gap: 8px; padding: 4px 0; font-size: 13px; }
.tune-label { opacity: 0.85; }
.tune-value {
  padding: 2px 7px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  border: 2px solid transparent;
  border-radius: 8px;
}
/* abweichend vom Standard: Wert eingerahmt in Gruppenfarbe, damit man getunte Regler sofort findet */
.tune-row.changed .tune-label { opacity: 1; }
.tune-row.changed .tune-value { color: var(--tone-ink); background: var(--tone); border-color: var(--ink); }
.tune-switch { grid-template-columns: 1fr auto auto; }
.tune-switch input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--tone); }
.tune-row input[type="range"] { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--tone); touch-action: pan-x; }

#debug {
  position: fixed;
  left: 8px;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  margin: 0;
  padding: 4px 6px;
  font: 11px/1.3 ui-monospace, Menlo, monospace;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
  white-space: pre;
  pointer-events: none;
}
#debug[hidden] { display: none; }