/* Spieleabend UI-Baukasten.
   Hier stehen nur Form und Aufbau. Alle Farben, Schriften und Effekte kommen
   aus den Tokens eines Themes (themes/<id>/theme.css). Spiele benutzen
   ausschließlich diese Klassen und Tokens, damit jedes Theme überall greift. */

:root {
  /* Struktur-Tokens: Themes dürfen sie überschreiben, müssen aber nicht. */
  --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px; --gap-5: 24px; --gap-6: 36px;
  --radius-s: 8px; --radius-m: 14px; --radius-l: 22px;
  --font-ui: system-ui, 'Segoe UI', sans-serif;
  --font-display: var(--font-ui);
  --display-weight: 800; --display-stretch: normal; --display-case: none;
  --cut: 0px;            /* schräge Kante an Menübalken und Hauptknöpfen */
  --bg-blocks: 0;        /* Deckkraft der fallenden Hintergrund-Blöcke */
  --font-mono: ui-monospace, Consolas, monospace;
  --speed: 160ms;

  /* Farb-Tokens mit neutralen Werten, falls ein Theme etwas vergisst. */
  --bg: #111; --bg-art: none; --surface: #1c1c1c; --surface-2: #262626; --line: #333;
  --text: #eee; --text-dim: #999; --accent: #7af; --accent-text: #000; --danger: #f55; --ok: #5d5;
  --glow: none; --panel-blur: 0px; --shadow: 0 8px 30px rgba(0,0,0,.4);

  /* Spielfarben: jedes Spiel greift auf diese acht zurück. */
  --c-red: #f44; --c-orange: #f93; --c-yellow: #fd3; --c-green: #4d6;
  --c-cyan: #3de; --c-blue: #48f; --c-purple: #a6f; --c-pink: #f6c;

  /* Spielfeld-Tokens. */
  --board-bg: #0a0a0a; --board-grid: rgba(255,255,255,.05); --board-line: var(--line);
  --block-radius: 2; --block-shine: .25; --block-edge: .35; --ghost-alpha: .22;
  --wood: #d6a364;      /* Holz für Wackelturm und andere Brettspiele */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); background-image: var(--bg-art); background-attachment: fixed; background-size: cover;
  color: var(--text); font-family: var(--font-ui); font-size: 15px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-text); }

/* ---- Bausteine ---- */

.ui-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: var(--shadow); backdrop-filter: blur(var(--panel-blur)); padding: var(--gap-5);
}
.ui-panel.tight { padding: var(--gap-4); border-radius: var(--radius-m); }

.ui-title { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: var(--display-case); letter-spacing: .01em; margin: 0; line-height: 1.05; }
.ui-title.xl { font-size: clamp(34px, 6vw, 60px); line-height: 1; text-shadow: var(--glow); }
.ui-title.l { font-size: 24px; }
.ui-title.m { font-size: 17px; }
.ui-dim { color: var(--text-dim); }
.ui-label { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--text-dim); font-weight: 700; }
.ui-mono { font-family: var(--font-mono); }

.ui-row { display: flex; gap: var(--gap-3); align-items: center; flex-wrap: wrap; }
.ui-col { display: flex; flex-direction: column; gap: var(--gap-3); }
.ui-grow { flex: 1; min-width: 0; }

.ui-btn {
  appearance: none; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius-m);
  padding: 10px 18px; font-weight: 700; cursor: pointer; transition: transform var(--speed), background var(--speed), box-shadow var(--speed);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-2); white-space: nowrap;
}
.ui-btn:hover { transform: translateY(-1px); }
.ui-btn:active { transform: translateY(1px); }
.ui-btn:disabled { opacity: .45; cursor: default; transform: none; }
.ui-btn.primary { background: var(--accent); color: var(--accent-text); border-color: transparent; box-shadow: var(--glow); }
.ui-btn.primary, .ui-btn.big { clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut) * .6) 100%, 0 100%); padding-right: calc(18px + var(--cut) * .6); }
.ui-btn.big { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch); text-transform: var(--display-case); letter-spacing: .03em; }
.ui-btn.ghost { background: transparent; }
.ui-btn.danger { color: var(--danger); }
.ui-btn.big { padding: 14px 26px; font-size: 17px; border-radius: var(--radius-l); }
.ui-btn.small { padding: 6px 12px; font-size: 13px; border-radius: var(--radius-s); }

.ui-input {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 10px 14px; outline: none; min-width: 0; transition: border-color var(--speed);
}
.ui-input:focus { border-color: var(--accent); }

.ui-chip {
  display: inline-flex; align-items: center; gap: var(--gap-2); padding: 5px 12px 5px 6px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; font-weight: 600; font-size: 14px;
}
.ui-chip .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--chip, var(--accent)); box-shadow: 0 0 10px var(--chip, transparent); }
.ui-chip.off { opacity: .45; }
.ui-chip.active { border-color: var(--chip, var(--accent)); box-shadow: 0 0 0 2px var(--chip, var(--accent)) inset; }
.ui-chip .tag { font-size: 11px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

.ui-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--text-dim); }

/* Overlay über dem Spiel: Countdown, Ergebnis, Hinweise. */
.ui-overlay {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 20;
  background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(4px);
  animation: ui-fade var(--speed) ease;
}
.ui-overlay.clear { background: transparent; backdrop-filter: none; pointer-events: none; }
.ui-count { font-family: var(--font-display); font-size: 120px; font-weight: 900; text-shadow: var(--glow); animation: ui-pop .9s ease both; }
@keyframes ui-fade { from { opacity: 0; } }
@keyframes ui-pop { 0% { transform: scale(1.6); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { opacity: .2; } }

.ui-toast-wrap { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 100; pointer-events: none; }
.ui-toast { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 10px 18px; box-shadow: var(--shadow); font-weight: 600; animation: ui-fade var(--speed) ease; }
.ui-toast.err { border-color: var(--danger); }

/* Tabelle für Ergebnisse und Punkte. */
.ui-list { display: flex; flex-direction: column; gap: 6px; }
.ui-list .item { display: flex; align-items: center; gap: var(--gap-3); padding: 8px 12px; background: var(--surface-2); border-radius: var(--radius-s); }
.ui-list .item .rank { font-family: var(--font-display); font-weight: 900; width: 28px; color: var(--text-dim); }
.ui-list .item.win .rank { color: var(--accent); }

/* Spielbühne: jedes Spiel bekommt dieses Element als Wurzel. */
.ui-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ui-hint { font-size: 12px; color: var(--text-dim); }
.ui-hint kbd { font-family: var(--font-mono); background: var(--surface-2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; font-size: 11px; }