/* Grundlagen: Farben und Schriften, Grundstil, Buttons und Hauptaktion */

/* Safe Areas des iPhones (Statusleiste, Notch bzw. Dynamic Island, Home-Balken): Abstände der Elemente am Rand.
   Als Web-App auf dem Homescreen zeichnet die Seite bis ganz oben (Statusleiste durchsichtig darüber); unten nur so
   weit eingerückt, dass Tafel und Buttons nicht unter dem Home-Balken liegen (er darf ein Stück über den Abstand ragen) */
:root { --sat: env(safe-area-inset-top, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --sab: max(0px, calc(env(safe-area-inset-bottom, 0px) - 12px)); }
/* Farben und Schriften: warme, dunkle Flächen, Amber als Akzent; Titel und Buttons in schmaler, kursiver
   Versalschrift (Barlow Condensed), Text in Inter */
:root { --fg: #f4f1ec; --muted: rgba(244, 241, 236, 0.62); --panel: rgba(24, 22, 27, 0.78);
  --btn: rgba(255, 255, 255, 0.06); --btn-hover: rgba(255, 255, 255, 0.12); --line: rgba(255, 255, 255, 0.12);
  --accent: #ffb547; --accent-hover: #ffc46a; --accent-ink: #1a1208; --blur: blur(16px) saturate(1.2);
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --radius: 10px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a1714; color: var(--fg); font: 500 14px/1.45 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
/* Als Web-App vom Homescreen mit durchsichtiger Statusleiste meldet iOS die Fensterhöhe ohne die Statusleiste
   (Seite beginnt oben am Rand, unten bliebe ein Streifen frei, Elemente am unteren Rand säßen zu hoch). Mit der
   vollen Höhe am Dokument rechnet iOS das Fenster richtig. Nur im Web-App-Modus (Klasse standalone, gesetzt in
   index.html): im Browser fahren die Leisten ein und aus, dort bleibt es bei 100 % */
html.standalone { height: 100vh; }
/* Schmale, kursive Versalien für Titel und Buttons */
.modal h1, .modal h2, .brand h1, .mode-title, .seg button, #start, .btns button, #btnShoot, #letsGo,
.player .score, #celebrate h2, #foulFlash { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.seg button, .btns button, #btnShoot, #letsGo { letter-spacing: .06em; }
/* Kein Markieren von Text und kein Kontextmenü beim langen Tippen (stört vor allem auf Mobilgeräten) */
/* Wischen mit zwei Fingern blättert nie selbst im Browser zurück (im Spiel verschiebt es den Tisch oder den
   Treffpunkt); in den Menüs erkennt src/ui/backnav.js die Geste und geht selbst zurück */
html, body { overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* Kein Doppeltipp-Zoom */
html, body, button { touch-action: manipulation; }
input, textarea { -webkit-user-select: text; user-select: text; }
#app canvas { display: block; touch-action: none; cursor: crosshair; }
.hidden { display: none !important; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
/* Vereinfachte Grafik (Einstellungen, body.simple-gfx): ohne Unschärfe hinter Fenstern und Buttons – die müsste über
   dem bewegten 3D-Bild in jedem Bild neu berechnet werden; dafür deckt der Hintergrund etwas mehr */
body.simple-gfx { --blur: none; --panel: rgba(24, 22, 27, 0.92); }
button { font: inherit; color: var(--fg); background: var(--btn); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s; }
button:hover:not(:disabled) { background: var(--btn-hover); border-color: rgba(255, 255, 255, 0.28); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: default; }
/* Hauptaktion: Amber, dunkle Schrift */
.primary, #btnShoot, #letsGo, #start { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.primary:hover:not(:disabled), #btnShoot:hover:not(:disabled), #letsGo:hover, #start:hover { background: var(--accent-hover); border-color: transparent; }