/* Show-Look wie die Präsi "Schlag den Schmal": Bühnenlicht als Hintergrund, Gold-Rahmen wie die
   Marquee-Ovale, 3D-Goldschrift, Plaketten in Logo-Gelb mit schwarzer Schrift, rote Buzzer.
   Rolf = Buzzer-Rot, Herausforderer = Cyan. Bewusst nur ein dunkles Theme: läuft am TV. */
:root {
  color-scheme: dark;
  --felt: #0c1d6e;        /* Bühnenblau */
  --felt-deep: #040a2c;   /* Hintergrund unten */
  --felt-line: #2b4fd1;   /* Linien */
  --glass: #07124acc;     /* Panel-Glas */
  --brass: #ffc629;       /* Show-Gold */
  --brass-dim: #b8770c;
  --gold-hi: #fff4b0;
  --gold-deep: #7a3a00;
  --plaque: #ffd43b;      /* Logo-Gelb */
  --ink: #0b0b0b;         /* schwarze Logo-Schrift */
  --ivory: #ffffff;
  --muted: #b3c2f5;
  --rolf: #ff3b30;
  --rolf-deep: #8f0d07;
  --rolf-soft: #ff3b3030;
  --chal: #22d3ee;
  --chal-deep: #05607a;
  --chal-soft: #22d3ee2a;
  --win: #5ef08a;
  --lose: #ff7a70;
  --gold-border: linear-gradient(135deg, #fff4b0 0%, #ffc629 22%, #a8650a 48%, #ffe27a 70%, #b8770c 100%);
  --font-display: "Lilita One", "Arial Black", Impact, sans-serif;
  --font-plaque: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-body: "Barlow", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--felt-deep);
  color: var(--ivory);
  font-family: var(--font-body);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Bühnenlicht aus Folie 1, weichgezeichnet, plus dunkelblaue Vignette */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; }
body::before {
  background: url("/assets/stage.jpg") center / cover no-repeat;
  filter: blur(2.5vmin) saturate(1.25);
  transform: scale(1.12);
}
body::after {
  background:
    radial-gradient(70% 60% at 50% 35%, #0a1d7a33 0%, #050c3399 60%, #020618f0 100%),
    linear-gradient(180deg, #00000000 55%, #020618cc 100%);
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; text-wrap: balance; margin: 0; letter-spacing: 0.01em; }
.label { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.pos { color: var(--win); }
.neg { color: var(--lose); }
.rolf { color: var(--rolf); }
.chal { color: var(--chal); }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }

/* Einfache Goldschrift (kleinere Überschriften) */
.gold {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--brass) 50%, #f08c00 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0.05em 0 #3a1500) drop-shadow(0 0 0.3em #ffb30044);
}

/* 3D-Goldschrift wie die Spieltitel der Präsi: Verlauf vorne, Extrusion + Kontur als Pseudo-Element dahinter */
.title3d {
  position: relative; display: inline-block; isolation: isolate;
  font-family: var(--font-display); line-height: 1;
  transform: skewX(-6deg);
  color: transparent;
}
.title3d::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #fff4b0 0%, #ffe066 30%, #ffd43b 52%, #ff9800 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.title3d::before {
  content: attr(data-text);
  position: absolute; inset: 0; z-index: -1;
  color: var(--gold-deep);
  -webkit-text-stroke: 0.1em #1a0800;
  text-shadow:
    0 0.02em 0 #b04a0a, 0 0.04em 0 #9a3e06, 0 0.06em 0 #7d3103, 0 0.08em 0 #5e2400,
    0 0.1em 0 #3f1700, 0 0.16em 0.18em #000c, 0 0 0.6em #ffb30055;
}

/* Gold-Rahmen wie die Marquee-Ovale: Verlauf als Rand, eigener Innenhintergrund über --inner */
.goldframe {
  --bw: 0.2em;
  --inner: var(--glass);
  border: var(--bw) solid transparent;
  background: linear-gradient(var(--inner), var(--inner)) padding-box, var(--gold-border) border-box;
  box-shadow: 0 0 1.4em #2f63ff40, 0 0.5em 1.4em #0008, inset 0 0 1.2em #ffc6291a;
}

/* Plakette in Logo-Gelb mit schwarzer Schrift */
.plaque {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-plaque); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink);
  padding: 0.18em 0.85em 0.14em; border-radius: 999px;
  background: radial-gradient(120% 140% at 50% 20%, #fff7b8 0%, var(--plaque) 45%, #f0a500 100%);
  box-shadow: 0 0 0 0.1em #6b3a00, 0 0 0 0.18em #ffe27a, 0 0.25em 0.6em #0009, inset 0 -0.15em 0.3em #c97a0055;
  white-space: nowrap;
}

/* Glänzender Buzzer als Seitenmarke */
.chip {
  display: inline-block; flex: none;
  width: 1.05em; height: 1.05em; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffffffd9 0 10%, #ffffff00 32%), radial-gradient(circle at 50% 60%, currentColor 0 55%, color-mix(in srgb, currentColor 45%, #000) 100%);
  box-shadow: 0 0.1em 0 #0009, 0 0 0.5em color-mix(in srgb, currentColor 60%, transparent);
  vertical-align: -0.16em;
}

/* Status-Oval mit Glühbirnen (nur hier, wie auf den Spielfolien) */
.bulbs { position: relative; }
.bulbs::before {
  content: ""; position: absolute; inset: -0.5em; border-radius: 999px; padding: 0.42em; pointer-events: none;
  background:
    radial-gradient(circle, #fffde8 0 16%, #ffd54a 30%, #ffb30000 50%) 0 50% / 0.9em 0.9em,
    linear-gradient(180deg, #c98a12, #6b3a00);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  box-shadow: 0 0 1em #ffc62966;
  animation: bulbs 1.2s steps(2) infinite;
}
@keyframes bulbs { 50% { filter: brightness(0.7); } }

.conn {
  position: fixed; right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px));
  font-size: 0.8rem; padding: 4px 10px; border-radius: 999px;
  background: #00000080; color: var(--muted); z-index: 5;
}
.conn[data-ok="false"] { color: var(--lose); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}