:root {
  --fg: #e8e6e1;
  --panel: rgba(18, 20, 24, 0.68);
  --border: rgba(255, 255, 255, 0.14);
  /* 'GT Walsheim' zuerst: so greifen im Lab-Deploy die _shared-Webfonts;
     lokal fällt es auf die installierte Pro-Familie zurück. */
  --ui-font: 'GT Walsheim', 'GT Walsheim Pro', -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 22%, #23282f 0%, #14171b 45%, #0b0d10 100%);
  color: var(--fg);
  font: 400 13px/1.45 var(--ui-font);
  -webkit-font-smoothing: antialiased;

  /* Grundlinie gegen den Doppeltipp-Zoom. `manipulation` schaltet nur ihn
     und die 300-ms-Klickverzögerung ab und lässt Scrollen und Aufziehen
     zu — bewusst: die Bedienflächen unten sperren zusätzlich, was sie
     sperren müssen, aber irgendwo muss ein Rückweg bleiben, falls doch
     einmal gezoomt wird. Genau der fehlte vorher. */
  touch-action: manipulation;

  /* Langer Druck auf Touch-Geräten: iOS markiert sonst Beschriftungen blau
     und blendet das Kontextmenü ein. Beides ist hier nie gewollt — es gibt
     keinen Fließtext, nur Bedienelemente. */
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* Eingabefelder ausgenommen: der Werte-Auszug muss markierbar bleiben,
   „Werte kopieren“ fällt ohne Zwischenablage-Rechte auf dump.select()
   zurück. */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

#app {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;   /* wir behandeln Gesten selbst */
  /* Langes Auflegen ist hier eine Geste (pannen) — das iOS-Menue und die
     Textlupe duerfen nicht dazwischenkommen. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}
#app:active { cursor: grabbing; }

/* ------------------------------------------------------------------ */
/* HUD                                                                 */
/* ------------------------------------------------------------------ */

/* Feste Bedienleisten scrollen und zoomen nie — hier darf der Browser gar
   keine Geste für sich beanspruchen. Ohne das zoomte ein Doppeltipp auf die
   Blätterpfeile die ganze Seite. */
#topbar, #hud, #tuneToggle, #hint, #drop {
  touch-action: none;
}

/* Das Parameterpanel scrollt senkrecht — und nur das. */
#tuning {
  touch-action: pan-y;
}

#topbar {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 5;
}

#hud {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 5;
}

#hud button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
#hud button:hover { background: rgba(255, 255, 255, 0.1); }
#hud button:disabled { opacity: 0.28; cursor: default; background: transparent; }

#counter {
  min-width: 96px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  opacity: 0.85;
}

.btn {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--fg);
  font: inherit;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  user-select: none;
}
.btn:hover { background: rgba(38, 42, 48, 0.85); }

#status { opacity: 0.5; }

#hint {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 12px;
  max-width: 24vw;
  opacity: 0.4;
  pointer-events: none;
  z-index: 4;
}

#drop {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(10, 12, 15, 0.82);
  border: 2px dashed rgba(255, 255, 255, 0.35);
  font-size: 18px;
  letter-spacing: 0.03em;
  pointer-events: none;
  z-index: 20;
}
body.dragging #drop { display: grid; }

/* ------------------------------------------------------------------ */
/* Parameter-Panel                                                     */
/* ------------------------------------------------------------------ */

#tuneToggle {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--fg);
  font: inherit;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  opacity: 0.55;
  z-index: 12;
}
#tuneToggle:hover { opacity: 1; }
body.tuning-open #tuneToggle { opacity: 1; background: rgba(48, 54, 62, 0.9); }

#tuning {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 92vw;
  height: 100%;
  padding: max(58px, calc(env(safe-area-inset-top) + 58px)) 12px
           max(16px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(14, 16, 19, 0.9);
  border-left: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}
body.tuning-open #tuning { transform: none; }

#guiHost .lil-gui.root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#dumpBox { display: flex; flex-direction: column; gap: 7px; }
#dumpBox label { opacity: 0.5; letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; }

#dump {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--fg);
  font: 400 12px/1.5 ui-monospace, 'SF Mono', Menlo, monospace;
  resize: vertical;
  tab-size: 2;
}
#dump:focus { outline: 1px solid rgba(255, 255, 255, 0.3); }

#dumpButtons { display: flex; flex-wrap: wrap; gap: 6px; }
#dumpButtons .btn { padding: 7px 12px; font-size: 12px; backdrop-filter: none; }

/* lil-gui an die Oberfläche anpassen */
.lil-gui {
  --font-family: var(--ui-font);
  --font-family-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --font-size: 12px;
  --input-font-size: 12px;
  --name-width: 46%;
  --background-color: rgba(0, 0, 0, 0.25);
  --widget-color: rgba(255, 255, 255, 0.1);
  --hover-color: rgba(255, 255, 255, 0.16);
  --focus-color: rgba(255, 255, 255, 0.22);
  --text-color: var(--fg);
  --number-color: #8fd3ff;
  --string-color: #a7e0a0;
  border-radius: 10px;
  overflow: hidden;
}
.lil-gui.root > .title { background: rgba(255, 255, 255, 0.07); }

@media (pointer: coarse) {
  .lil-gui {
    --widget-height: 26px;
    --spacing: 6px;
    --font-size: 13px;
    /* 16px ist keine Geschmacksfrage: iOS zoomt die Seite selbsttätig
       heran, sobald ein fokussiertes Eingabefeld kleiner gesetzt ist.
       Solange maximum-scale=1 im Viewport stand, war das unterdrückt —
       zusammen mit dem Rückweg aus dem Zoom. Jetzt trägt die Schriftgröße
       diese Aufgabe, und zwar an der richtigen Stelle. */
    --input-font-size: 16px;
  }

  /* Aus demselben Grund: der Werte-Auszug ist ein Textfeld. */
  #dump { font-size: 16px; }
}

@media (max-width: 760px) {
  #hint { display: none; }
  #status { display: none; }
  #tuning { width: 100%; }
}

/* Ring am Finger, solange ein lang aufgelegter Finger die Ansicht schiebt.
   Groesser als die Fingerkuppe, sonst sieht man ihn nicht. */
#panRing {
  position: fixed;
  left: -40px;
  top: -40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 5;
}
#panRing[hidden] { display: none; }

/* Erzwungenes Querformat (HEFT_UI.querformat, siehe main.js): auf dem hochkant
   gehaltenen Geraet rollt die Kamera um 90 Grad im Uhrzeigersinn. Die
   Bedienelemente ziehen mit an den Ort, den sie im Querbild haetten:
   Querbild-oben ist der rechte, -unten der linke, -links der obere und
   -rechts der untere Bildschirmrand. Tippen trifft gedrehte Elemente
   richtig. Das Parameterpanel bleibt aufrecht — die Regler von lil-gui
   rechnen mit ungedrehten Rechtecken und liessen sich sonst nicht ziehen. */
.gerollt #hud {
  bottom: auto;
  top: 50%;
  left: max(16px, env(safe-area-inset-left));
  transform: translate(-50%, -50%) rotate(90deg) translateY(-50%);
}
.gerollt #topbar {
  left: auto;
  right: max(12px, env(safe-area-inset-right));
  transform-origin: top right;
  transform: rotate(90deg) translateX(100%);
}
.gerollt #tuneToggle {
  top: auto;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform-origin: bottom right;
  transform: rotate(90deg) translateY(100%);
}
.gerollt #hint {
  bottom: auto;
  top: max(12px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  max-width: 24vh;
  transform-origin: top left;
  transform: rotate(90deg) translateY(-100%);
}

/* Leisten wegwischen (Safari am iPhone, siehe main.js): die Seite wird um
   --wisch-weg hoeher als das Fenster, damit der Nutzer sie scrollen kann und
   Safari seine Leisten einklappt. Der Canvas steht fest davor und fuellt das
   jeweils sichtbare Fenster (dvh waechst mit, wenn die Leisten gehen). */
html.leisten-wisch,
html.leisten-wisch body {
  height: auto;
  overflow: visible;
  overscroll-behavior: none;
}
html.leisten-wisch body { min-height: calc(100lvh + var(--wisch-weg, 160px)); }
html.leisten-wisch #app {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100dvh;
}

/* Oberflaeche je Heft (window.HEFT_UI): die Klassen setzt ein Inline-Skript im
   Kopf, sobald die heft.config.js gelaufen ist — gegen das Aufblitzen der
   Knoepfe, solange das Modul noch laedt. */
.ohne-pdfwahl #topbar label.btn,
.ohne-parameterknopf #tuneToggle { display: none; }

/* texte: false — Statuszeile, Bedienhinweis und Seitenzaehler.
   blaetterKnoepfe: false — die zwei Pfeile. Geblaettert wird dann per
   Klick/Tipp, Ziehen und Pfeiltasten. Sind beide aus, bleibt von der Leiste
   unten nur eine leere Pille uebrig — die verschwindet dann ganz, ebenso die
   obere Leiste, wenn auch der PDF-Knopf fehlt. */
.ohne-texte #status,
.ohne-texte #hint,
.ohne-texte #counter,
.ohne-blaetterknoepfe #prev,
.ohne-blaetterknoepfe #next,
.ohne-texte.ohne-blaetterknoepfe #hud,
.ohne-texte.ohne-pdfwahl #topbar { display: none; }