:root {
  --bg: #070b16;
  --accent: #6366f1;         /* Slot P8 / Cube 9 Akzent (Indigo-Familie) */
  --text: #e8ecf6;

  /* Die sechs Würfelfarben. Stehen hier, weil die Wortmarke aus denselben
     Stickern besteht wie der Würfel — dieselben Werte wie COLORS in config.js. */
  --c-white:  #f2f4f8;
  --c-yellow: #ffd21f;
  --c-green:  #16c47f;
  --c-blue:   #2b6ef2;
  --c-red:    #ff3b47;
  --c-orange: #ff8a1e;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

#cube {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  z-index: 1;
}

/* Farbschein hinter dem Würfel. Bewusst schwach: er soll orientieren, nicht
   mit den Stickern konkurrieren — bei voller Sättigung fräße er besonders
   Weiß und Gelb auf. Die Farbe setzt main.js nach jedem Zug. */
.glow {
  position: fixed; z-index: 0;
  left: 50%; top: 44%;
  width: 150vmin; height: 150vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.26;
  pointer-events: none;
  transition: background 0.28s ease;
}

/* ── HUD ───────────────────────────────────────────────── */
.hud {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: max(env(safe-area-inset-top), 14px) 18px 0;
  pointer-events: none;
  z-index: 5;
}
.hud-block { display: flex; flex-direction: column; align-items: flex-start; }
.hud-mid { align-items: center; }
.hud-right { align-items: flex-end; }
.hud-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.5;
}
.hud-value {
  font-size: 1.6rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.hud.hidden { display: none; }

/* ── Ansichts-Zone-Hinweis ─────────────────────────────── */
.viewhint {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 17vh;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  border-top: 1px dashed rgba(255,255,255,0.08);
  background: linear-gradient(to top, rgba(99,102,241,0.10), transparent);
  pointer-events: none;
  z-index: 4;
}
.viewhint.hidden { display: none; }

/* ── Kopfzeile zwischen Vollbild- und Menü-Knopf ────────
   Beide Knöpfe sind 44 px breit und werden von fullscreen.js / menu.js als
   position:fixed eingehängt. Dazwischen war Platz, den niemand genutzt hat —
   64 px Abstand je Seite (44 Knopf + 10 Rand + 10 Luft). */
.topline {
  position: fixed; z-index: 6;
  top: calc(env(safe-area-inset-top, 0px) + var(--ng-menu-top, 10px));
  left: calc(env(safe-area-inset-left, 0px) + 64px);
  right: calc(env(safe-area-inset-right, 0px) + 64px);
  height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232,236,246,0.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.topline b { color: rgba(232,236,246,0.86); font-weight: 700; }
.topline.hidden { display: none; }

/* ── Screens (Titel / Gelöst) ──────────────────────────── */
.screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: radial-gradient(120% 90% at 50% 20%, rgba(99,102,241,0.14), rgba(7,11,22,0.94) 70%);
  backdrop-filter: blur(2px);
  z-index: 10;
}
.screen.hidden { display: none; }
.card {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
}

/* ── Titelscreen ────────────────────────────────────────
   Kein Schleier über dem ganzen Bild: die Mitte bleibt frei, damit der echte
   Würfel dahinter unverfälscht sichtbar ist.

   Der Schatten hängt deshalb an den TEXTBLÖCKEN, nicht am Bildschirm. Erste
   Fassung setzte ein durchsichtiges Fenster in Prozent, zweite in Pixeln —
   beide verrutschten, weil der Würfel nicht proportional zur Bildschirmhöhe
   wächst (auf 375×812 reicht er von 233 bis 525, auf 375×667 von 172 bis 465).
   Ein Verlauf, der am Textblock klebt, verdunkelt dagegen immer genau das,
   was hinter Text liegt, und nie mehr — auf jedem Format, ohne Nachmessen. */
.screen--title {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 58px) 0
           calc(env(safe-area-inset-bottom, 0px) + 22px);
  background: none;
  backdrop-filter: none;   /* würde den Würfel weichzeichnen */
}
.screen--title .title-top {
  padding: 0 24px 30px;
  background: linear-gradient(180deg,
    rgba(7,11,22,0.93) 0%, rgba(7,11,22,0.70) 52%, rgba(7,11,22,0.00) 100%);
}
.screen--title .title-bottom {
  padding: 34px 24px 0;
  background: linear-gradient(0deg,
    rgba(7,11,22,0.95) 0%, rgba(7,11,22,0.74) 48%, rgba(7,11,22,0.00) 100%);
}
/* Rückfall für sehr kurze Bildschirme, auf denen der Würfel doch hinter den
   Text ragt: lesbar bleibt er auch auf einer hellen Sticker-Fläche. */
.screen--title .tagline,
.screen--title .hint { text-shadow: 0 1px 10px rgba(4,7,14,0.9); }
.title-top,
.title-bottom {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; text-align: center;
}
.title-top { gap: 12px; }
.title-bottom { gap: 14px; }

/* ── Wortmarke: der Schriftzug besteht aus Würfel-Stickern ──
   Raster und Farben kommen aus js/wordmark.js, hier nur die Geometrie.
   3 Spalten × 5 Zeilen je Zeichen — 3×3 (eine Würfelfläche) reicht für ein
   eindeutiges B und eine eindeutige 9 nicht aus. */
.wordmark {
  --wm-px: clamp(8px, 2.7vw, 11px);
  --wm-gap: 2px;
  display: flex;
  gap: calc(var(--wm-px) * 0.8);
  /* Höhe reservieren, damit der Screen beim Aufbau der Marke nicht springt. */
  min-height: calc(var(--wm-px) * 5 + var(--wm-gap) * 4);
}
.wm-glyph {
  display: grid;
  grid-template-columns: repeat(3, var(--wm-px));
  grid-auto-rows: var(--wm-px);
  gap: var(--wm-gap);
}
.wm-px { border-radius: 18%; display: block; }
.wm-off { background: rgba(255,255,255,0.06); }

.tagline { font-size: 1.02rem; font-weight: 600; opacity: 0.66; letter-spacing: 0.01em; }
.hint { font-size: 0.8rem; opacity: 0.42; line-height: 1.5; }
.hint.hidden { display: none; }

/* ── Skin-Wahl ──────────────────────────────────────────
   Drei Kacheln in Korpusfarbe mit einem Sticker darauf — die Wahl zeigt,
   worum es geht, ohne ein Wort. */
.skins { display: flex; gap: 12px; justify-content: center; align-items: center; }
.skin-dot {
  width: 30px; height: 30px; padding: 0;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 9px;
  position: relative; cursor: pointer;
  transition: outline-color 0.14s;
  outline: 2px solid transparent; outline-offset: 2px;
}
.skin-dot i { position: absolute; inset: 6px; border-radius: 3px; display: block; }
.skin-dot[aria-pressed="true"] { outline-color: #f2f5fb; }

/* ── Modus-Wahl: zwei gleichwertige Hälften, kein Vorgabe-Glanz ── */
.modes {
  width: 100%; max-width: 320px; height: 46px;
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 12px;
  overflow: hidden;
}
.mode {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.03em;
  color: rgba(232,236,246,0.55);
  transition: background 0.14s, color 0.14s;
}
.mode span {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.6; margin-top: -1px;
}
.mode[aria-pressed="true"] { background: rgba(255,255,255,0.11); color: #fff; }

/* Der Hauptknopf: weiße Pille auf Fast-Schwarz. Keine Leuchtkante, kein
   Verlauf — Cube 9 wirbt nicht, es stellt bereit. */
.play-btn {
  width: 100%; max-width: 320px; height: 58px;
  border: none; border-radius: 15px;
  background: #f2f5fb; color: #0a0f18;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.12rem; font-weight: 700; letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 0.08s;
}
.play-btn:active { transform: scale(0.97); }

/* ── Tageswertung (Ao5) ─────────────────────────────────
   Fünf Felder, gefüllte sind gelaufen. Der durchgestrichene beste und
   schlechteste Lauf zeigt die WCA-Regel, ohne sie erklären zu müssen. */
.ao5 { width: 100%; max-width: 320px; }
.ao5.hidden { display: none; }
.ao5-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 7px;
}
.ao5-head b {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(232,236,246,0.55);
}
.ao5-head i {
  font-style: normal; font-family: 'Space Grotesk', sans-serif;
  font-size: 0.92rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ao5-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ao5-slot {
  height: 40px; border: 1px solid rgba(255,255,255,0.13); border-radius: 9px;
  display: grid; place-items: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: rgba(232,236,246,0.45);
}
.ao5-slot.done {
  background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.24);
  color: var(--text);
}
/* Bester und schlechtester Lauf zählen nicht — sichtbar, nicht erklärt. */
.ao5-slot.drop { color: rgba(232,236,246,0.3); text-decoration: line-through; }
.ao5-slot.next { border-color: rgba(255,255,255,0.55); color: #fff; }

.daily-btn {
  width: 100%; margin-top: 9px; padding: 11px 18px;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 12px;
  background: transparent; color: rgba(232,236,246,0.82);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.94rem; font-weight: 700; letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.14s;
}
.daily-btn:active { transform: scale(0.98); }
.daily-btn:disabled { opacity: 0.42; cursor: default; }

/* ── Ergebnis-Screen ────────────────────────────────────
   Gleicher Aufbau wie der Titel: Textblöcke tragen ihren eigenen Schatten,
   die Mitte bleibt frei für den gelösten Würfel. */
.screen--over {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 58px) 0
           calc(env(safe-area-inset-bottom, 0px) + 22px);
  background: none;
  backdrop-filter: none;
}
.go-top, .go-bottom {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; text-align: center;
}
.go-top { gap: 10px; padding: 0 24px 30px;
  background: linear-gradient(180deg,
    rgba(7,11,22,0.94) 0%, rgba(7,11,22,0.72) 58%, rgba(7,11,22,0.00) 100%); }
.go-bottom { gap: 14px; padding: 34px 24px 0;
  background: linear-gradient(0deg,
    rgba(7,11,22,0.95) 0%, rgba(7,11,22,0.76) 48%, rgba(7,11,22,0.00) 100%); }
/* Die Mitte hält den einen Call-to-Action. Sie darf leer sein — dann steht
   dort der Würfel. */
.go-mid { width: 100%; padding: 0 24px; display: flex; justify-content: center; }

.go-score {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 3.6rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 16px rgba(4,7,14,0.8);
}
/* Kein Leuchten, kein Konfetti: der Bestwert wird durch die Farbe des Deltas
   darunter gemeldet, nicht durch die Zahl selbst. */
.go-delta { font-size: 0.9rem; font-weight: 600; opacity: 0.6; min-height: 1.35em; }
.go-delta.better { color: #16c47f; opacity: 1; }

.go-quiet { display: flex; gap: 26px; justify-content: center; }

/* ── Zugprotokoll ───────────────────────────────────────
   Monospace aus dem System — die Notation muss in Spalten stehen, aber ein
   eigener Font dafür wäre Zero-Load-Budget für eine zugeklappte Zeile. */
.notation {
  width: 100%; max-width: 320px;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
  background: rgba(255,255,255,0.025);
  overflow: hidden;
}
.notation.hidden { display: none; }
.notation-head {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px; border: 0; background: transparent; cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: rgba(232,236,246,0.45);
}
.notation-head b { color: var(--text); font-size: 0.8rem; letter-spacing: 0; }
.notation-caret { transition: transform 0.16s; }
.notation-head[aria-expanded="true"] .notation-caret { transform: rotate(180deg); }
.notation-body {
  padding: 0 12px 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem; line-height: 1.7; letter-spacing: 0.02em;
  color: rgba(232,236,246,0.72);
  word-break: break-word;
  max-height: 148px; overflow-y: auto;
}
.notation-body.hidden { display: none; }

/* Kennzahlen des Laufs. Alle drei fallen ohnehin an — TPS und Denkanteil
   kosten nur einen Zeitstempel je Zug, sagen aber mehr über Verbesserung
   als die Endzeit allein. */
.go-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; width: 100%; max-width: 320px;
}
.go-stat {
  border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
  padding: 10px 4px 11px; text-align: center;
}
.go-stat b {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.go-stat span {
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; opacity: 0.45;
}

.text-btn {
  background: none; border: none;
  color: var(--text); opacity: 0.6;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.03em;
  cursor: pointer; padding: 6px;
}
.text-btn:active { opacity: 1; }

/* ── Reg-Panel (Akzentfarbe Indigo) ────────────────────── */
.reg-panel {
  width: 100%; margin-top: 6px;
  padding: 14px; border-radius: 14px;
  background: rgba(99,102,241,0.10);
  border: 1px solid rgba(99,102,241,0.28);
}
.reg-panel.hidden { display: none; }
.reg-panel form { display: flex; flex-direction: column; gap: 0.55rem; }
.reg-hint { font-size: 0.9rem; font-weight: 700; opacity: 0.7; }
.reg-input {
  padding: 11px 13px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.25); color: var(--text);
  font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 600;
}
.reg-input::placeholder { opacity: 0.4; }
.reg-input:focus { outline: none; border-color: rgba(99,102,241,0.6); }
.reg-error { font-size: 0.82rem; font-weight: 700; color: #ff4d6d; }
.reg-error.hidden { display: none; }
.reg-btns { display: flex; gap: 0.55rem; }
.reg-submit-btn {
  flex: 1; padding: 11px; border: none; border-radius: 10px;
  background: var(--accent); color: #fff;
  font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.reg-skip-btn {
  padding: 11px 16px; border: none; border-radius: 10px;
  background: rgba(255,255,255,0.08); color: var(--text);
  font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer;
}