/* ui.css — Startmenü, HUD und Ergebnis-Screens (GOAL.md §9.4).
 *
 * Bewusst eine eigene Datei statt eines per JavaScript erzeugten <style>: Die
 * Desktop-App liefert eine CSP mit Nonce aus, und sobald ein Nonce gesetzt ist,
 * ignorieren Browser 'unsafe-inline'. Ein dynamisch eingefügtes Stylesheet würde
 * dort blockiert — mitsamt `pointer-events`, wodurch das Menü unbedienbar wäre.
 */

:root {
  --tinte: #1b2f47;
  --tinte-weich: #5b6f88;
  --linie: rgba(27, 47, 71, 0.14);
  --flaeche: rgba(255, 255, 255, 0.82);
}

#ui { font-family: "Inter", system-ui, sans-serif; color: var(--tinte); }

/* Sichtbarkeit läuft über Klassen statt element.style — inline-Style-Attribute
   sind unter einer Nonce-CSP nicht verlässlich. */
#ui .overlay { display: none; }
#ui .panel { display: none; }
#ui .panel.sichtbar { display: block; }

#ui .overlay.sichtbar {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 40px;
  background: linear-gradient(160deg, rgba(238, 246, 255, 0.86), rgba(213, 231, 251, 0.9));
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  pointer-events: auto; padding: 5vh 4vw; overflow-y: auto;
  box-sizing: border-box;
}

#ui .kopf { text-align: center; }

#ui .titel {
  font-family: "Fraunces", Georgia, serif; font-weight: 600;
  font-size: clamp(46px, 7vw, 88px); letter-spacing: -0.02em; line-height: 0.95;
  margin: 0;
}

#ui .unterzeile {
  margin-top: 12px; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tinte-weich);
}

#ui .karten {
  display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
  max-width: 1000px; width: 100%;
}

#ui .karte {
  flex: 1 1 250px; max-width: 300px; min-height: 210px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 3px;
  padding: 26px 24px 22px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  font: inherit; color: inherit; box-sizing: border-box;
}

#ui .karte:hover, #ui .karte:focus-visible {
  transform: translateY(-4px); border-color: rgba(27, 47, 71, 0.35);
  box-shadow: 0 14px 34px rgba(27, 47, 71, 0.13); outline: none;
}

#ui .karte h2 {
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 28px; margin: 0;
}

#ui .karte .rubrik {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinte-weich);
}

#ui .karte p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--tinte-weich); }

#ui .karte .best {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linie);
  font-size: 13px; font-variant-numeric: tabular-nums;
}

#ui .steuerung {
  display: flex; gap: 26px; flex-wrap: wrap; justify-content: center;
  font-size: 13px; color: var(--tinte-weich);
}

#ui .steuerung > div { display: flex; align-items: center; }

#ui .steuerung b {
  font-weight: 600; color: var(--tinte); background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--linie); border-radius: 3px; padding: 2px 8px; margin-right: 7px;
}

#ui .hud { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }

#ui .tempo { position: absolute; left: 28px; bottom: 24px; }

#ui .tempo .wert {
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 44px; line-height: 1;
  font-variant-numeric: tabular-nums;
}

#ui .tempo .einheit {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tinte-weich); margin-top: 4px;
}

#ui .panel.sichtbar {
  position: absolute; right: 28px; top: 24px; text-align: right;
  background: rgba(255, 255, 255, 0.62); border: 1px solid var(--linie); border-radius: 3px;
  padding: 14px 18px; min-width: 150px;
}

#ui .panel .gross {
  font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 32px; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

#ui .panel .klein {
  font-size: 12px; color: var(--tinte-weich); margin-top: 5px; font-variant-numeric: tabular-nums;
}

#ui .meldung {
  position: absolute; left: 50%; top: 16%; transform: translateX(-50%);
  font-family: "Fraunces", Georgia, serif; font-size: 30px; font-weight: 600;
  opacity: 0; transition: opacity .2s ease; white-space: nowrap;
}

#ui .meldung.strafe { color: #c0392b; }
#ui .meldung.sichtbar { opacity: 1; }

#ui .ergebnis { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }

#ui .ergebnis .zeit {
  font-family: "Fraunces", Georgia, serif; font-size: clamp(54px, 9vw, 96px); font-weight: 600;
  line-height: 1; font-variant-numeric: tabular-nums;
}

#ui .ergebnis .details { font-size: 14px; color: var(--tinte-weich); line-height: 1.7; }

#ui .bestmarke {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  background: #1b2f47; color: #fff; padding: 5px 12px; border-radius: 2px;
}

#ui .knopfreihe { display: flex; gap: 12px; margin-top: 8px; }

#ui button.aktion {
  font: inherit; font-size: 14px; padding: 11px 22px; cursor: pointer;
  background: var(--tinte); color: #fff; border: 1px solid var(--tinte); border-radius: 3px;
  transition: opacity .15s ease;
}

#ui button.aktion.leise { background: transparent; color: var(--tinte); }
#ui button.aktion:hover { opacity: 0.82; }