/* geschichtsduell/gameshow.css
   DIE SHOW-OPTIK des Geschichtsduells.

   Warum eine eigene Datei: styles.css beschreibt das Grundgerüst der Bühne
   (Raster, Karten, Pult-Layout, Handy-Umbruch). Diese Datei legt darüber die
   Gameshow-Ausstattung: Glühbirnen-Rahmen (Marquee), Chrom-Leisten, LED-
   Anzeigen, Scheinwerferlicht und die Pixel-Kandidaten. Getrennt, weil man
   sonst beim Suchen nach einem Layout-Wert in lauter Deko-Regeln landet.

   Reihenfolge in index.html: styles.css -> gameshow.css. Alles hier darf
   deshalb Dinge aus styles.css überschreiben, aber nie umgekehrt.

   Grundsätze:
   - Keine Bilder, keine Fremdquellen (alles Verläufe/radial-gradients).
   - Für Kinder lesbar bleiben: Show-Deko ja, aber Frage und Antworten sind
     immer die ruhigsten Flächen im Bild.
   - Beide Themes: die Show ist ein dunkler Saal, die Papiere bleiben hell.
   - Bewegte Deko (Lampen, Glühen) schaltet prefers-reduced-motion ab. */

/* ============================================================ Show-Farben */
.gd_body {
  --gd-bulb: #ffe08f;               /* Glühbirne hell */
  --gd-bulb-kern: #fffbe8;          /* heißer Kern */
  --gd-bulb-glow: rgba(255, 215, 106, 0.55);
  --gd-chrom-1: #f2f5fa;            /* Chrom hell */
  --gd-chrom-2: #9aa8bd;
  --gd-chrom-3: #47546a;            /* Chrom dunkel */
  --gd-led: #ffcf5c;                /* LED-Ziffern (Bernstein) */
  --gd-led-schatten: rgba(255, 207, 92, 0.55);
  --gd-saal: #050b16;               /* Saal hinter allem */
}

/* ============================================================ Marquee:
   Der Glühbirnen-Rahmen. Markup ist ein leerer Span in einem Element, das
   position:relative hat:

     <span class="gd_bulbs" aria-hidden="true"></span>

   ::before zeichnet die Birnen an Ober- und Unterkante, ::after die an den
   Seitenkanten. Zwei Pseudo-Elemente, weil sich so die Kanten getrennt
   wiederholen können (repeat-x / repeat-y) - ein Element kann nur eine Achse
   sinnvoll kacheln.

   Wichtig: Die Kachel ist 26x26 px groß und trägt den Punkt in der Mitte.
   Bei `inset: 11px` liegt die Punktreihe also exakt 11 px innerhalb der
   Karte - eine Birnenreihe, kein Streifen. (Erster Versuch: nur repeat-x mit
   der Punktmitte auf der Oberkante - die Birnen lagen halb außerhalb und
   lasen sich als gelbe Linie.)

   Der Rahmen ist Deko: pointer-events aus, damit kein Klick auf dem Rand
   hängen bleibt.

   Bewusst OHNE Animation: eine Opacity-Animation auf einer Fläche mit vier
   gekachelten Radialverläufen zwingt den Browser zum Neuzeichnen der ganzen
   Karte (im Prüfbrowser wurde die Seite dadurch so träge, dass Screenshots
   ausliefen). Birnen stehen still; nur das ON-AIR-Pünktchen blinkt. */
.gd_bulbs {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  opacity: 0.92;
}

.gd_bulbs::before,
.gd_bulbs::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Ober- und Unterkante. Die 26-px-Kachel trägt den Punkt in der Mitte; mit
   -6 px Versatz sitzt die Punktmitte 7 px innerhalb der Karte - also IM Rand,
   nicht auf dem Text (die Karte hat mindestens 14 px Innenabstand).
   Der dunkle Ring zwischen Glas und Hof ist die Fassung: ohne ihn
   verschwinden die Birnen auf dem cremefarbenen Papier der Startkarte. */
.gd_bulbs::before {
  background-image:
    radial-gradient(circle at 50% 50%,
      var(--gd-bulb-kern) 0 1.5px, var(--gd-bulb) 1.5px 3px,
      #8a6410 3px 4.4px, var(--gd-bulb-glow) 4.4px 5.6px, transparent 5.9px),
    radial-gradient(circle at 50% 50%,
      var(--gd-bulb-kern) 0 1.5px, var(--gd-bulb) 1.5px 3px,
      #8a6410 3px 4.4px, var(--gd-bulb-glow) 4.4px 5.6px, transparent 5.9px);
  background-size: 26px 26px, 26px 26px;
  background-position: -6px -6px, -6px calc(100% + 6px);
  background-repeat: repeat-x, repeat-x;
}

/* Seitenkanten */
.gd_bulbs::after {
  background-image:
    radial-gradient(circle at 50% 50%,
      var(--gd-bulb-kern) 0 1.5px, var(--gd-bulb) 1.5px 3px,
      #8a6410 3px 4.4px, var(--gd-bulb-glow) 4.4px 5.6px, transparent 5.9px),
    radial-gradient(circle at 50% 50%,
      var(--gd-bulb-kern) 0 1.5px, var(--gd-bulb) 1.5px 3px,
      #8a6410 3px 4.4px, var(--gd-bulb-glow) 4.4px 5.6px, transparent 5.9px);
  background-size: 26px 26px, 26px 26px;
  background-position: -6px -6px, calc(100% + 6px) -6px;
  background-repeat: repeat-y, repeat-y;
}

/* Die Birnen stehen still (siehe oben). Der Keyframe bleibt nur als Andenken an
   den ersten Entwurf nicht stehen - entfernt, damit niemand ihn für aktiv hält. */

/* ============================================================ Pixel-Figuren
   Die SVGs aus figuren.js. `image-rendering: pixelated` glättet die
   Vergrößerung NICHT - sonst verwischen die 16x16-Kanten zu einem Brei. */
.gd_figur_svg {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}

/* Leuchtkasten hinter einer Figur: das Studio-Portrait am Pult. */
.gd_figur_box {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 0.7rem;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 215, 106, 0.30), transparent 68%),
    linear-gradient(180deg, #12325e, #0a1a33);
  border: 2px solid rgba(255, 215, 106, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 14px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.gd_figur_box::after {
  /* Standlinie unter der Figur, damit sie nicht schwebt */
  content: "";
  position: absolute;
  inset: auto 12% 0 12%;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0, rgba(0, 0, 0, 0.55), transparent 72%);
}

/* ============================================================ Leiste
   Die Studiokonsole bekommt ein ON-AIR-Schild und eine laufende
   Chrom-Kante - das Erkennungszeichen einer laufenden Sendung. */
header.gd_leiste::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 215, 106, 0.75) 0 16px,
      rgba(255, 215, 106, 0.10) 16px 32px);
  opacity: 0.85;
}

.gd_air {
  position: absolute;
  top: 50%;
  right: calc(100% + 0.55rem);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.14rem 0.42rem 0.14rem 0.36rem;
  border-radius: 0.3rem;
  background: linear-gradient(180deg, #2b0a0a, #170404);
  border: 1px solid #e53935;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1;
  color: #ff9b95;
  white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 0 12px rgba(229, 57, 53, 0.45);
}

.gd_air::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff4b45;
  box-shadow: 0 0 7px #ff4b45;
  animation: gd-air-blinkt 1.8s steps(1, end) infinite;
}

@keyframes gd-air-blinkt {
  0%, 55%  { opacity: 1; }
  56%, 100% { opacity: 0.25; }
}

/* Bildschirmschoner der Show: ein sehr langsamer Lichtzug über die Bühne.
   Bewusst als transform-Animation (nicht background-position): transform
   läuft im Compositor, ein Verlaufsverschieben würde die ganze Bühne in jedem
   Bild neu malen - und das Spiel soll auf Schulgeräten flüssig bleiben. */
.gd_show::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255, 240, 200, 0.05) 45%,
    rgba(255, 240, 200, 0.10) 50%,
    rgba(255, 240, 200, 0.05) 55%,
    transparent 70%);
  animation: gd-lichtzug 14s linear infinite;
  z-index: 0;
  will-change: transform;
}

@keyframes gd-lichtzug {
  0%   { transform: translateX(-70%); }
  100% { transform: translateX(240%); }
}

/* Das Logo in der Leiste steht im Goldring wie ein Studio-Portrait. */
.gd_marke img {
  background: radial-gradient(circle at 50% 30%, #1d4a86, #0a1c38);
}

/* Das ON-AIR-Schild sitzt HINTER dem Logo im Markenblock, nicht außerhalb der
   Leiste. Die Marke bekommt dafür etwas Luft nach links. */
.gd_marke {
  position: relative;
  padding-left: 4.3rem;
}

/* Am Handy ist die Leiste zweizeilig (Marke in eigener Zeile) und sehr
   schmal - dort würde das ON-AIR-Schild auf dem Logo sitzen. Es entfällt; der
   Glühbirnen-Rahmen der Karten trägt die Show-Optik allein. */
@media (max-width: 800px) {
  .gd_air { display: none; }
}

/* Der Show-Untertitel wird zur Sendungszeile. */
.gd_marke_text h1 {
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 18px rgba(255, 215, 106, 0.22);
}

/* ============================================================ Startkarte
   Das Ticket bekommt einen Marquee-Rahmen - es ist der Einlass zur Show. */
.gd_start_karte {
  border-radius: 1.05rem;
  border: 2px solid #d8b46a;
  box-shadow:
    0 0 0 6px rgba(8, 20, 40, 0.85),
    0 0 0 8px rgba(240, 178, 58, 0.45),
    0 24px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 #fff;
  padding: clamp(1.1rem, 2.6vw, 2rem);
}

.gd_start_karte::before {
  /* statt der alten Strichellinie ein goldener Doppelrahmen innen */
  border: 1px solid rgba(122, 90, 18, 0.28);
  border-radius: 0.72rem;
}

/* Sendungszeile "Live aus dem Studio" */
.gd_show_marke {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a33a2f;
}

.gd_show_marke_punkt {
  flex: 1 1 auto;
  height: 2px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg,
    rgba(163, 58, 47, 0.5) 0 10px,
    transparent 10px 16px);
}

.gd_start_kopf {
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.08;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.75);
}

.gd_start_lernsatz {
  border-left: 4px solid var(--gd-gold);
  padding: 0.2rem 0 0.2rem 0.7rem;
  background: linear-gradient(90deg, rgba(240, 178, 58, 0.14), transparent 70%);
  border-radius: 0 0.4rem 0.4rem 0;
  font-size: 0.94rem;
}

/* Die Wahl-Chips werden zu Studioknöpfen mit Chrom-Kante. */
.gd_wahl_knopf {
  border: 2px solid #c2a263;
  background: linear-gradient(180deg, #fffdf6, #f2e6c8);
  box-shadow: 0 2px 0 rgba(150, 120, 52, 0.45), inset 0 1px 0 #fff;
  letter-spacing: 0.01em;
}

.gd_wahl_knopf.ist-aktiv {
  background: linear-gradient(180deg, #ffe9a8, var(--gd-gold) 62%, #d99a20);
  border-color: #a87c14;
  color: #241800;
  box-shadow:
    0 2px 0 #a87c14,
    0 0 0 2px rgba(240, 178, 58, 0.28),
    0 6px 16px rgba(240, 178, 58, 0.38),
    inset 0 1px 0 #fff6cf;
}

.gd_auswahl {
  border: 2px solid #c2a263;
  background: linear-gradient(180deg, #fffdf6, #f7efdc);
  box-shadow: inset 0 2px 4px rgba(120, 95, 40, 0.12);
}

.gd_startbtn {
  position: relative;
  border-radius: 0.7rem;
  border: 2px solid #a87c14;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 1rem;
  box-shadow:
    0 4px 0 #8a6410,
    0 0 0 3px rgba(240, 178, 58, 0.22),
    0 14px 28px rgba(240, 178, 58, 0.42),
    inset 0 1px 0 #fff6cf;
}

.gd_startbtn::after {
  /* Glanzstreifen wie auf einem Studio-Knopf */
  content: "";
  position: absolute;
  inset: 3px 3px auto 3px;
  height: 38%;
  border-radius: 0.5rem 0.5rem 40% 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
  pointer-events: none;
}

/* ---- Kandidaten-Vorstellung als Porträt-Karten ---- */
.gd_gegner {
  gap: 0.6rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(122, 90, 18, 0.35);
}

.gd_gegner_karte {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem 0.6rem;
  border-radius: 0.8rem;
  border: 2px solid #d8b46a;
  background: linear-gradient(180deg, #fffdf6, #f7edd6);
  box-shadow: 0 3px 0 rgba(170, 138, 74, 0.35);
}

.gd_gegner_figur {
  /* display:block ist PFLICHT: der Kasten ist ein <span>, und ein Inline-Element
     gibt dem SVG keine Höhe - die Figur schrumpfte auf Daumennagelgröße (im
     Browser gesehen). */
  display: block;
  width: 62px;
  height: 62px;
  flex: none;
  border-radius: 0.55rem;
  border: 2px solid var(--gd-farbe, #c2a263);
  background: radial-gradient(circle at 50% 28%, #24467a, #0d1f3c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 3px 8px rgba(0, 0, 0, 0.3);
  padding: 3px;
  box-sizing: border-box;
}

.gd_gegner_text { min-width: 0; }

.gd_gegner_name {
  display: block;
  margin-bottom: 0.16rem;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gd-farbe, #7a5a12);
}

.gd_gegner_karte p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.42;
  color: #4a3d20;
}

/* ============================================================ Bühne
   Die Bühne wird zum Studio-Set: außen ein Marquee-Rahmen mit Chrom-Kante,
   innen die gewohnten Flächen. */
.gd_show {
  border-radius: 1.05rem;
  border: 2px solid rgba(240, 178, 58, 0.55);
  box-shadow:
    0 0 0 5px rgba(6, 16, 32, 0.9),
    0 0 0 7px rgba(240, 178, 58, 0.28),
    0 24px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: clamp(1.1rem, 1.6vw, 1.35rem);
}

/* Scheinwerfer: der bisherige ::before wird zu drei warmen Kegeln, die
   bis auf die Frage fallen. */
.gd_show::before {
  inset: -10% -8% auto -8%;
  height: 74%;
  background:
    radial-gradient(closest-side, rgba(255, 235, 180, 0.30), transparent 74%) 16% 0/30% 100% no-repeat,
    radial-gradient(closest-side, rgba(255, 235, 180, 0.24), transparent 74%) 50% 0/42% 100% no-repeat,
    radial-gradient(closest-side, rgba(255, 235, 180, 0.30), transparent 74%) 84% 0/30% 100% no-repeat;
  filter: blur(0.4px);
}

/* ---- Kopfzeile der Show ---- */
.gd_show_kopf {
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(240, 178, 58, 0.22);
}

.gd_runde,
.gd_thema,
.gd_stufe_merk {
  position: relative;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 215, 106, 0.45);
  background: linear-gradient(180deg, rgba(12, 28, 54, 0.95), rgba(6, 15, 30, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

.gd_runde {
  color: #ffe9a8;
  background:
    linear-gradient(180deg, rgba(240, 178, 58, 0.28), rgba(0, 0, 0, 0.3)),
    linear-gradient(180deg, #12325e, #081a33);
}

.gd_thema {
  color: var(--gd-gold-hell);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gd_stufe_merk {
  color: var(--gd-text-leise);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

/* Die runden Werkzeugknöpfe werden zu Chrom-Tastern. */
.gd_klein {
  border: 2px solid rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.30), transparent 58%),
    linear-gradient(180deg, #24406b, #0c1b32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 3px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s, box-shadow 0.12s, filter 0.12s;
}

.gd_klein:hover {
  filter: brightness(1.18);
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.38), transparent 58%),
    linear-gradient(180deg, #2d5083, #10233f);
}

.gd_klein:active { transform: translateY(1px); }

/* ---- Moderator mit Sprechblase ---- */
.gd_mod {
  gap: 0.7rem;
  padding: 0.15rem 0;
}

.gd_mod_figur {
  flex: none;
  width: 46px;
  height: 46px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 0.55rem;
  border: 2px solid rgba(240, 178, 58, 0.7);
  background: radial-gradient(circle at 50% 26%, #2a4d84, #0a1a33);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.gd_mod_text {
  position: relative;
  border-radius: 0.7rem;
  border: 2px solid #d8b46a;
  padding: 0.5rem 0.85rem;
  font-size: 0.98rem;
  line-height: 1.36;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38), inset 0 1px 0 #fff;
}

.gd_mod_text::before {
  left: -0.5rem;
  border-width: 0.5rem;
  border-right-color: #d8b46a;
}

.gd_mod_text::after {
  /* zweite Spitze innen - sonst sitzt der Pfeil auf der Goldkante */
  content: "";
  position: absolute;
  left: -0.32rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0.4rem solid transparent;
  border-right-color: var(--gd-karte);
}

/* ---- Die Fragekarte ist das große Show-Schild ---- */
.gd_frage_karte {
  border: 3px solid #c9a35c;
  border-radius: 0.9rem;
  box-shadow:
    0 0 0 3px rgba(10, 22, 42, 0.85),
    0 0 0 5px rgba(240, 178, 58, 0.35),
    0 18px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 #fff;
}

.gd_frage_art {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.16rem 0.55rem;
  border-radius: 0.3rem;
  background: linear-gradient(180deg, #12325e, #081a33);
  color: var(--gd-gold-hell);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Leer heißt: keine Plakette zeigen (sonst steht ein leerer Kasten da). */
.gd_frage_art:empty { display: none; }

.gd_frage_text {
  margin: 0 0 0.85rem;
  font-weight: 800;
  line-height: 1.26;
  letter-spacing: -0.005em;
  color: #0e2445;
}

/* ---- Antwortplatten: Show-Karten mit Chrom-Buchstabentafel ---- */
.gd_optionen { gap: 0.55rem; }

.gd_option {
  position: relative;
  border: 2px solid #b99b60;
  border-radius: 0.6rem;
  background: linear-gradient(180deg, #fffdf7, #f4ead4);
  box-shadow:
    0 3px 0 #c8b085,
    0 6px 14px rgba(90, 70, 30, 0.16),
    inset 0 1px 0 #fff;
  transition: transform 0.1s, box-shadow 0.12s, background 0.15s, border-color 0.15s;
}

.gd_option:hover:not([disabled]) {
  background: linear-gradient(180deg, #fffdf0, #fff3d2);
  border-color: #94702c;
  box-shadow:
    0 3px 0 #b9975a,
    0 10px 20px rgba(90, 70, 30, 0.22),
    inset 0 1px 0 #fff;
  transform: translateY(-1px);
}

.gd_option:active:not([disabled]) { transform: translateY(1px); }

.gd_option_buchstabe {
  width: 36px;
  height: 36px;
  border-radius: 0.35rem;
  background:
    linear-gradient(180deg, #2b4b7a 0%, #14304f 55%, #0a1d33 100%);
  border: 1px solid rgba(255, 215, 106, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 5px rgba(0, 0, 0, 0.35);
  color: #ffe9a8;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.gd_option.gd_richtig {
  background: linear-gradient(180deg, #e9f9ea, #c9edd0);
  border-color: #2e7d32;
  box-shadow: 0 3px 0 #8cc194, 0 0 0 3px rgba(67, 160, 71, 0.25), inset 0 1px 0 #fff;
}

.gd_option.gd_richtig .gd_option_buchstabe {
  background: linear-gradient(180deg, #4caf50, #1b6d20);
  border-color: #a5e2ab;
  color: #fff;
}

.gd_option.gd_falsch {
  background: linear-gradient(180deg, #fdeceb, #f8d3d1);
  border-color: #c62828;
  box-shadow: 0 3px 0 #dda09e, 0 0 0 3px rgba(229, 57, 53, 0.22), inset 0 1px 0 #fff;
}

.gd_option.gd_falsch .gd_option_buchstabe {
  background: linear-gradient(180deg, #ef5350, #a31714);
  border-color: #ffb3af;
  color: #fff;
}

/* ---- Freitext: Eingabefeld wie ein Antwortstreifen ---- */
.gd_freitext input {
  border: 2px solid #b99b60;
  border-radius: 0.6rem;
  background: #fffdf7;
  box-shadow: inset 0 2px 5px rgba(120, 95, 40, 0.14);
}

.gd_freitext input:focus {
  outline: none;
  border-color: #a87c14;
  box-shadow: inset 0 2px 5px rgba(120, 95, 40, 0.14), 0 0 0 3px rgba(240, 178, 58, 0.45);
}

/* ---- Auflösung: Aufklapper mit Goldband ---- */
.gd_aufloesung {
  border-top: none;
  margin-top: 0.9rem;
  padding: 0.8rem 0.85rem 0.85rem;
  border-radius: 0.6rem;
  background:
    linear-gradient(90deg, rgba(240, 178, 58, 0.16), transparent 65%),
    #fff8e6;
  border: 1px dashed #c9a35c;
}

.gd_aufloesung_zeile {
  font-size: 1.05rem;
  letter-spacing: 0.005em;
}

/* ============================================================ Countdown
   Die runde Uhr sitzt in einem Chrom-Ring wie ein Studio-Timer. */
.gd_timer::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background:
    conic-gradient(from 200deg,
      #f6f9ff, #98a7bc 18%, #f6f9ff 32%, #7d8ba1 52%,
      #f6f9ff 68%, #98a7bc 84%, #f6f9ff 100%);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  z-index: -1;
}

.gd_timer::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #0d1c30 0 62%, transparent 63%);
  z-index: -1;
}

.gd_timer svg { z-index: 1; }

.gd_timer_spur {
  fill: #0a1526;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 9;
}

.gd_timer_ring {
  filter: drop-shadow(0 0 6px currentColor);
}

.gd_timer_zahl {
  z-index: 2;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 14px rgba(120, 220, 255, 0.45), 0 2px 0 rgba(0, 0, 0, 0.6);
}

.gd_timer_label {
  z-index: 2;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
}

/* ============================================================ Buzzer
   Der Buzzer ist das Herz der Show: schwerer Sockel, Chrom-Kranz,
   rote Kuppel mit Glanz und ein Glühen, das zum Drücken ruft. */
.gd_buzzer {
  position: relative;
  min-height: 86px;
  border-radius: 0.85rem;
  border: 2px solid rgba(255, 215, 106, 0.4);
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 215, 106, 0.18), transparent 60%),
    linear-gradient(180deg, #24384f 0%, #101c2c 55%, #060c15 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -6px 12px rgba(0, 0, 0, 0.55),
    0 10px 24px rgba(0, 0, 0, 0.5);
  padding: 0.55rem 0.5rem 0.45rem;
  gap: 0.35rem;
}

.gd_buzzer::before {
  /* Chrom-Kranz um den Sockel */
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.gd_buzzer_kuppel {
  position: relative;
  width: 78%;
  height: 40px;
  border-radius: 50% 50% 44% 44% / 74% 74% 26% 26%;
  background:
    radial-gradient(circle at 32% 24%, #ffd2cc 0 6%, #ff8a80 18%, #d32f2f 58%, #8e0000 100%);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.55),
    inset 0 3px 6px rgba(255, 255, 255, 0.55),
    inset 0 -6px 10px rgba(90, 0, 0, 0.5),
    0 0 0 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.08s, box-shadow 0.12s;
}

.gd_buzzer_kuppel::after {
  /* Glanzpunkt sitzt schief oben links - so wirkt die Kuppel rund */
  content: "";
  position: absolute;
  left: 16%;
  top: 12%;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85), transparent 70%);
}

.gd_buzzer_text {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffe9a8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.gd_buzzer.gd-buzz-aktiv {
  border-color: var(--gd-gold-hell);
  box-shadow:
    0 0 0 3px rgba(240, 178, 58, 0.5),
    0 0 34px rgba(255, 120, 90, 0.45),
    0 12px 30px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.gd_buzzer.gd-buzz-aktiv .gd_buzzer_kuppel {
  background:
    radial-gradient(circle at 32% 24%, #fff0ee 0 6%, #ff9d94 18%, #e53935 58%, #a30000 100%);
  box-shadow:
    0 8px 20px rgba(255, 70, 50, 0.75),
    0 0 0 4px rgba(255, 90, 70, 0.35),
    inset 0 3px 8px rgba(255, 255, 255, 0.65),
    inset 0 -6px 10px rgba(90, 0, 0, 0.5);
}

.gd_buzzer[aria-disabled="true"] {
  opacity: 1;              /* nicht ausgrauen - nur die Kuppel ruht */
}

.gd_buzzer[aria-disabled="true"] .gd_buzzer_kuppel {
  filter: saturate(0.55) brightness(0.72);
}

.gd_buzzer[aria-disabled="true"] .gd_buzzer_text { color: #93a4bb; }

/* ============================================================ Pulte
   Aufbau wie im Studio-Pult: Portrait links, Namensplakette und LED-Anzeige
   rechts daneben, darunter die Lampe und (wenn jemand geantwortet hat) die
   Antwort. Das bleibt flach - ein hohes Pult mit großem Portrait schiebt die
   Punktestände unter den Bildrand (im Browser gemessen: 236 px je Pult). */
.gd_pulte {
  gap: clamp(0.4rem, 1vw, 0.75rem);
}

.gd_pult {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas:
    "figur kopf"
    "figur score"
    "lampe lampe"
    "antwort antwort";
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.18rem;
  padding: 0.5rem 0.55rem 0.5rem;
  border-radius: 0.7rem 0.7rem 0.4rem 0.4rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background:
    linear-gradient(180deg, #2a5290 0%, #1a3c6d 46%, #102a4f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -10px 18px rgba(0, 0, 0, 0.35),
    0 12px 24px rgba(0, 0, 0, 0.4);
}

.gd_pult_figur {
  grid-area: figur;
  width: 52px;
  height: 52px;
  padding: 2px;
  box-sizing: border-box;
  border-radius: 0.4rem;
  border: 2px solid var(--gd-pfarbe, rgba(255, 215, 106, 0.6));
  background: radial-gradient(circle at 50% 26%, #24467a, #07162c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 10px rgba(0, 0, 0, 0.35);
}

.gd_pult.gd-pult-aktiv .gd_pult_figur {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 0 3px rgba(240, 178, 58, 0.45),
    0 0 20px rgba(255, 215, 106, 0.45);
}

.gd_pult_kopf {
  grid-area: kopf;
  justify-content: flex-start;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  min-width: 0;
}

.gd_pult_name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gd_pult_punkt {
  width: 22px;
  height: 22px;
  border-radius: 0.3rem;
  font-size: 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* LED-Punkteanzeige: dunkles Glas, bernsteinfarbene Ziffern. */
.gd_pult_score {
  grid-area: score;
  display: inline-block;
  justify-self: start;
  max-width: 100%;
  padding: 0.08rem 0.4rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(255, 215, 106, 0.35);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 45%),
    #05101f;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.8),
    0 0 14px rgba(255, 207, 92, 0.14);
  color: var(--gd-led);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: clamp(1rem, 2.1vw, 1.22rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-shadow: 0 0 8px var(--gd-led-schatten);
  overflow-wrap: anywhere;
}

.gd_pult_lampe {
  grid-area: lampe;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-align: center;
}

.gd_pult_antwort {
  grid-area: antwort;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.45);
}

/* Wer gebuzzert hat, bekommt einen Lichtstreifen unter dem Pult. */
.gd_pult.gd-pult-aktiv::after {
  content: "";
  position: absolute;
  inset: auto 12% -6px 12%;
  height: 6px;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 0, rgba(255, 215, 106, 0.85), transparent 72%);
  pointer-events: none;
}

.gd_pult { position: relative; }

.gd_pult.gd-pult-du {
  border-color: #7ddc85;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -10px 18px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(125, 220, 133, 0.35),
    0 12px 24px rgba(0, 0, 0, 0.4);
}

.gd_pult.gd-pult-gesperrt { opacity: 0.5; filter: grayscale(0.75); }

/* Punkteflug: große Show-Zahl mit Goldkante. */
.gd_flug {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 22px currentColor;
}

/* ============================================================ Ergebnis
   Die Urkunde bleibt Papier, bekommt aber einen Marquee-Rahmen und eine
   Sieger-Zone mit Figuren. */
.gd_ergebnis_karte {
  border: 2px solid #c9a35c;
  border-radius: 1rem;
  box-shadow:
    0 0 0 6px rgba(8, 20, 40, 0.85),
    0 0 0 8px rgba(240, 178, 58, 0.45),
    0 24px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 #fff;
  padding: clamp(1rem, 2.2vw, 1.6rem);
}

.gd_ergebnis_karte h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.gd_ergebnis_satz {
  font-size: 1.08rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, rgba(240, 178, 58, 0.24), transparent 75%);
  border-left: 4px solid var(--gd-gold);
}

.gd_rang_zeile {
  grid-template-columns: 2.6rem auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: 2px solid #cbb589;
  box-shadow: 0 2px 0 rgba(170, 138, 74, 0.3);
}

.gd_rang_zeile.gd-rang-sieger {
  background: linear-gradient(90deg, rgba(240, 178, 58, 0.35), #fffdf6 72%);
  border-color: #c99a22;
  box-shadow: 0 2px 0 rgba(170, 138, 74, 0.3), 0 0 0 3px rgba(240, 178, 58, 0.25);
}

.gd_rang_figur {
  width: 40px;
  height: 40px;
  padding: 2px;
  box-sizing: border-box;
  border-radius: 0.4rem;
  border: 2px solid var(--gd-farbe, #c2a263);
  background: radial-gradient(circle at 50% 26%, #24467a, #0d1f3c);
  flex: none;
}

.gd_rang_platz {
  font-size: 1.05rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.gd_rang_punkte {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
  background: #05101f;
  color: var(--gd-led);
  text-shadow: 0 0 8px var(--gd-led-schatten);
}

/* Auf dem Siegerpodest darf es funkeln (nur Deko, kein Klickziel). */
.gd_ergebnis_karte::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(240, 178, 58, 0.5) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 14%, rgba(240, 178, 58, 0.42) 0 2px, transparent 3px),
    radial-gradient(circle at 6% 82%, rgba(240, 178, 58, 0.35) 0 2px, transparent 3px),
    radial-gradient(circle at 94% 88%, rgba(240, 178, 58, 0.45) 0 2px, transparent 3px);
  opacity: 0.8;
}

/* Der Lösungs-Aufklapper ist ein Rollfach im Bühnenmaterial. */
.gd_loesungen {
  background: #fff8e6;
  border: 1px dashed #c9a35c;
}

.gd_loesungen summary {
  color: #7a5a12;
  letter-spacing: 0.02em;
}

/* ============================================================ Pause + Dialoge */
.gd_pause {
  background:
    radial-gradient(circle at 50% 40%, rgba(20, 50, 92, 0.55), transparent 60%),
    rgba(4, 10, 20, 0.86);
}

.gd_pause_karte {
  border: 2px solid #c9a35c;
  box-shadow: 0 0 0 5px rgba(240, 178, 58, 0.22), 0 20px 50px rgba(0, 0, 0, 0.55);
}

.gd_dialog {
  border: 2px solid #c9a35c;
  box-shadow: 0 0 0 5px rgba(240, 178, 58, 0.18), 0 24px 60px rgba(0, 0, 0, 0.6);
}

.gd_dialog::backdrop {
  background: rgba(3, 8, 18, 0.78);
  backdrop-filter: blur(2px);
}

.gd_dialog h2 {
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* ============================================================ Goldene Bühnenkante
   Über der Fußzeile liegt der Abschluss der Show: eine schmale Goldlinie. */
.gd_main::after {
  content: "";
  display: block;
  height: 4px;
  margin: 0.4rem auto 0;
  width: min(52rem, 92%);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(240, 178, 58, 0.65), transparent);
}

/* ============================================================ Schmale Bildschirme
   Auf dem Handy zählt jede Zeile: die Pulte werden zu flachen Namensschildern
   mit kleinem Portrait links, die Deko (Marquee, Chrom) bleibt. */
@media (max-width: 760px) {
  .gd_start_karte {
    box-shadow:
      0 0 0 4px rgba(8, 20, 40, 0.85),
      0 0 0 6px rgba(240, 178, 58, 0.4),
      0 16px 40px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 #fff;
    padding: 1rem 0.9rem 1.1rem;
  }

  .gd_show {
    box-shadow:
      0 0 0 3px rgba(6, 16, 32, 0.9),
      0 0 0 5px rgba(240, 178, 58, 0.26),
      0 12px 30px rgba(0, 0, 0, 0.5);
    padding: 0.85rem 0.7rem 0.9rem;
  }

  .gd_mod_figur { width: 38px; height: 38px; }
  .gd_mod_text { padding: 0.4rem 0.6rem; font-size: 0.9rem; }

  /* Pult: Portrait links, Name und LED rechts - zwei Zeilen statt fünf. */
  .gd_pult {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 0.35rem 0.4rem;
    column-gap: 0.4rem;
    row-gap: 0.14rem;
  }

  .gd_pult_figur {
    width: 40px;
    height: 40px;
  }

  .gd_pult_kopf { font-size: 0.8rem; }
  .gd_pult_score { font-size: 0.9rem; }
  .gd_pult_lampe { font-size: 0.64rem; min-height: 0.9rem; }
  .gd_pult_antwort { font-size: 0.74rem; text-align: left; }

  .gd_timer::before { inset: -6px; }
  .gd_timer::after { inset: -1px; }
  .gd_buzzer { min-height: 70px; }
  .gd_buzzer_kuppel { height: 32px; }

  .gd_gegner_figur { width: 48px; height: 48px; }
  .gd_gegner_karte { padding: 0.4rem 0.5rem 0.5rem; }

  .gd_rang_zeile {
    grid-template-columns: 2rem 34px minmax(0, 1fr) auto;
    gap: 0.35rem;
  }
  .gd_rang_figur { width: 34px; height: 34px; }
  .gd_rang_punkte { font-size: 0.9rem; }

  .gd_main::after { margin-top: 0.25rem; }
}

@media (max-width: 420px) {
  .gd_pult_figur { width: 34px; height: 34px; }
  .gd_pult { grid-template-columns: 34px minmax(0, 1fr); }
  .gd_rang_zeile { grid-template-columns: 1.7rem 30px minmax(0, 1fr) auto; }
  .gd_rang_figur { width: 30px; height: 30px; }
}

/* ============================================================ Bewegung aus */
@media (prefers-reduced-motion: reduce) {
  .gd_air::before { animation: none; }
  .gd_show::after { display: none; }
  .gd_option:hover:not([disabled]) { transform: none; }
  .gd_klein:active,
  .gd_option:active:not([disabled]) { transform: none; }
}