/* 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; }
/* HUD weg auf der Fresh-Seite; im Duell bleibt es in der Sturzpause (dead ohne Overlay) stehen */
body[data-state="dead"]:not([data-mode="duel"]) #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; }

.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; }

/* 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; }
.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); }
.rider-preview { display: block; width: 40px; height: 40px; border-radius: 9px; }
#rider-card, #stats-card, #modes-card, #duel-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 { 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 { 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; }

/* 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; }

/* kleine flache Knöpfe: Modus auswählen, Zurück, Tuning-Aktionen */
.btn-flat, .tune-actions button {
  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-actions button: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;
  padding: 12px 14px 12px;
  box-sizing: border-box;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(255, 255, 255, 0.97);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 7px 8px 0 rgba(20, 20, 15, 0.1);
  color: var(--ink);
  touch-action: pan-y;
}
#tune[hidden] { display: none; }
.tune-title { font-size: 16px; margin-bottom: 8px; }
.tune-rows { display: flex; flex-direction: column; gap: 6px; }
.tune-heading { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; margin: 8px 0 0; }
.tune-heading:first-child { margin-top: 0; }
.tune-row { display: grid; grid-template-columns: 1fr auto; row-gap: 2px; font-size: 13px; }
.tune-label { opacity: 0.85; }
.tune-value { font-variant-numeric: tabular-nums; text-align: right; }
.tune-row input[type="range"] { grid-column: 1 / -1; width: 100%; margin: 0; accent-color: var(--ink); touch-action: pan-x; }
.tune-actions { display: flex; justify-content: space-between; margin-top: 12px; }

#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; }