/* =========================================================================
   Preis-Raten - Showbuehne
   -------------------------------------------------------------------------
   Die Oberflaeche ist eine Fernsehshow, keine App: Scheinwerfer von oben,
   der Artikel auf einem Podest im Lichtkegel, das Gebot auf einer
   Klappziffern-Tafel. Aufgeloest wird mit Trommelwirbel - Ziffer fuer Ziffer.

   Ein Bildschirm, eine Achse: alles liegt untereinander, auf dem Handy wie
   auf dem Desktop. Der Blick springt nie, die Dramaturgie ist ueberall gleich.

   Farben kommen als CSS-Variablen aus dem Backend (View::themeCss).
   ========================================================================= */

/* ---------------------------------------------------------------- Tokens */

:root {
  --bg: #0A0918;
  --surface: #17142B;
  --surface-2: #221C3D;
  --accent: #FFC53D;
  --accent-2: #E0457B;
  --good: #35D07F;
  --bad: #FF4D6D;
  --text: #FFF6E5;
  --muted: #9A93B8;
  --radius: 20px;
  --density: 1;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --on-accent: #0A0A0A;

  --r-sm: calc(var(--radius) * .4);
  --r-md: calc(var(--radius) * .65);
  --r-lg: var(--radius);
  --r-xl: calc(var(--radius) * 1.5);

  --s1: calc(4px * var(--density));
  --s2: calc(8px * var(--density));
  --s3: calc(12px * var(--density));
  --s4: calc(16px * var(--density));
  --s5: calc(24px * var(--density));
  --s6: calc(34px * var(--density));
  --s7: calc(52px * var(--density));

  --line: color-mix(in srgb, var(--text) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--accent) 45%, transparent);
  --sunk: color-mix(in srgb, #000 45%, var(--bg));

  --gold: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 100%, white 30%),
    var(--accent) 45%,
    color-mix(in srgb, var(--accent) 70%, black 30%));

  --shadow-1: 0 2px 4px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .7);
  --shadow-2: 0 4px 10px rgba(0, 0, 0, .35), 0 30px 70px -22px rgba(0, 0, 0, .85);
  --glow: 0 0 30px -6px color-mix(in srgb, var(--accent) 55%, transparent);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);

  --ease: cubic-bezier(.22, .8, .3, 1);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --dur: .22s;

  --stage: 720px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  --medal-bronze: #B06C3B;
  --medal-bronze-2: #D9955C;
  --medal-silver: #A8B0C0;
  --medal-silver-2: #C9D1E0;
}

/* ---------------------------------------------------------------- Reset */

*, *::before, *::after { box-sizing: border-box; }

/* Ohne diese Zeile ueberschreiben Layout-Regeln das hidden-Attribut und
   Overlays bleiben sichtbar. Sie gehoert an den Anfang, nicht ans Ende. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Die Buehne */

/* =========================================================================
   Das Studio
   -------------------------------------------------------------------------
   Damit Licht echt wirkt, braucht es drei Dinge, die eine einzelne Flaeche
   nicht leisten kann: eine sichtbare Quelle, Dunst, in dem der Strahl steht,
   und einen Lichtfleck, wo er auftrifft. Deshalb besteht jeder Scheinwerfer
   hier aus Gehaeuse, Kegel, Kern und Bodenfleck.
   ========================================================================= */

.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* ---- Traverse mit Lampengehaeusen ---- */

.stage-truss {
  position: absolute; top: 0; left: 0; right: 0; height: 26px;
  background:
    linear-gradient(180deg, #14111F 0 55%, #0B0914 55% 100%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 13px);
  box-shadow: 0 3px 12px rgba(0,0,0,.7);
}

.lamp {
  position: absolute; top: 16px; left: var(--x);
  width: 26px; height: 20px; margin-left: -13px;
  background: linear-gradient(180deg, #241E38, #100D1D);
  border-radius: 4px 4px 9px 9px;
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.8);
}
/* Die heisse Linse - der Punkt, aus dem der Strahl kommt. */
.lamp::after {
  content: "";
  position: absolute; left: 50%; bottom: -3px;
  width: 15px; height: 7px; margin-left: -7.5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 90%, white);
  box-shadow: 0 0 16px 5px color-mix(in srgb, var(--accent) 75%, transparent);
  animation: lamp-breathe 5s ease-in-out infinite alternate;
}
@keyframes lamp-breathe { 50% { opacity: .72; } }

/* ---- Die Lichtkegel ---- */

.stage-beams { position: absolute; inset: 0; }

.beam {
  position: absolute;
  top: 18px;
  left: var(--x);
  width: 54vw;
  height: 140vh;
  margin-left: -27vw;
  transform-origin: 50% 0;
  /* Das weiche Volumen des Strahls */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c) 62%, transparent) 0%,
    color-mix(in srgb, var(--c) 26%, transparent) 30%,
    color-mix(in srgb, var(--c) 9%, transparent) 62%,
    transparent 88%);
  clip-path: polygon(48.6% 0, 51.4% 0, 100% 100%, 0 100%);
  filter: blur(22px);
  opacity: .5;
  /* Der Schwenk verweilt an den Enden - so bewegen sich echte Moving Heads. */
  animation: swing var(--t, 14s) cubic-bezier(.45, 0, .55, 1) infinite alternate;
  animation-delay: var(--d, 0s);
  will-change: transform;
}

/* Der harte Kern im Strahl. Ohne ihn ist es Nebel, kein Licht. */
.beam::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c) 92%, white 30%) 0%,
    color-mix(in srgb, var(--c) 34%, transparent) 26%,
    transparent 58%);
  clip-path: polygon(49.5% 0, 50.5% 0, 66% 100%, 34% 100%);
  filter: blur(7px);
}

/* Der Lichtfleck am Boden. */
.beam::after {
  content: "";
  position: absolute; left: 50%; bottom: 6vh;
  width: 34vw; height: 9vh; margin-left: -17vw;
  border-radius: 50%;
  background: radial-gradient(50% 50%, color-mix(in srgb, var(--c) 45%, transparent), transparent 72%);
  filter: blur(16px);
}

@keyframes swing {
  from { transform: rotate(calc(var(--a, 14deg) * -1)); }
  to   { transform: rotate(var(--a, 14deg)); }
}

/* ---- Dunst in der Luft ---- */

/* Ein feines, langsam wanderndes Rauschen. Es bricht die glatten Verlaeufe
   und laesst die Strahlen durch etwas hindurchgehen statt daneben zu liegen. */
.stage-haze {
  position: absolute; inset: -20%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.05), transparent) 0 0/220px 220px,
    radial-gradient(closest-side, rgba(255,255,255,.04), transparent) 90px 140px/300px 300px,
    radial-gradient(closest-side, rgba(255,255,255,.03), transparent) 210px 60px/170px 170px;
  opacity: .5;
  animation: haze 40s linear infinite alternate;
}
@keyframes haze {
  from { transform: translate3d(-2%, 0, 0) scale(1.02); }
  to   { transform: translate3d(2%, -2%, 0) scale(1.08); }
}

/* ---- Buehnenboden ---- */

.stage-floor {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 34vh;
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent-2) 10%, #000) 75%),
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 7%, transparent) 0 1px, transparent 1px 62px);
  transform: perspective(38vh) rotateX(58deg);
  transform-origin: 50% 100%;
  opacity: .55;
}

/* ---- Vorhang ---- */

/* Samt mit Falten: die Streifen sind die Lichtkanten der Stoffbahnen. */
.curtain {
  position: absolute; top: 0; bottom: 0; width: 15vw; min-width: 90px;
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--accent-2) 34%, #000) 0 12px,
      color-mix(in srgb, var(--accent-2) 12%, #000) 12px 22px,
      color-mix(in srgb, var(--accent-2) 30%, #000) 22px 34px),
    linear-gradient(180deg, #000 0, transparent 30%);
  opacity: .62;
}
.curtain-l { left: 0;  mask-image: linear-gradient(90deg, #000 30%, transparent); }
.curtain-r { right: 0; mask-image: linear-gradient(270deg, #000 30%, transparent); }

/* Spalte statt Block: so wird der Inhalt gestreckt und der Fuss sitzt auch
   auf kurzen Seiten unten, statt mitten im Bild zu enden. */
.app {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.app > main { flex: 1 0 auto; }
.app > .seitenfuss { flex: none; }

.screen {
  width: 100%;
  max-width: var(--stage);
  margin: 0 auto;
  padding: var(--s4) var(--s4) calc(104px + var(--safe-b));
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  animation: rise .3s var(--ease);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Der Blinkschlag der laufenden Stelle - er treibt jetzt den
   Segmentbalken der Rundenleiste an. */
@keyframes lamp { 50% { opacity: .45; } }

/* ---------------------------------------------------------------- Ueberschriften */

.act {
  text-align: center;
  font-size: 11px; font-weight: 900;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
}
.act::before, .act::after { content: "— "; opacity: .5; }
.act::after { content: " —"; }

.screen-title {
  font-size: clamp(26px, 6.5vw, 40px);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.screen-lead { color: var(--muted); text-align: center; max-width: 52ch; margin: 0 auto; }
.section-title {
  font-size: 11px; font-weight: 900; letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted); text-align: center;
}

/* ---------------------------------------------------------------- Podest */

.podium-wrap { position: relative; padding-top: var(--s3); }

/* Der Lichtkegel liegt hinter dem Artikel und macht ihn zum einzigen
   Gegenstand, auf den es gerade ankommt. */
.podium-wrap::before {
  content: "";
  position: absolute;
  left: 50%; top: -8%;
  width: 150%; height: 120%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 30%,
    color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.showcase {
  position: relative;
  z-index: 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent),
    var(--shadow-2);
}

/* Das Foto ist der Star, darf die Eingabe aber nicht unter die Falz druecken.
   Hoehe und Bildeinbindung stehen weiter unten unter "Spiel" - dort, wo auch
   das Raster definiert wird, das ueber die Aufteilung entscheidet. */

/* Glanzkante wie auf einer Vitrine */
.showcase-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0, transparent 38%);
  pointer-events: none;
}

.item-blink { position: absolute; inset: 0; background: var(--surface-2); z-index: 2; }

.item-cat {
  position: absolute; left: 12px; top: 12px; z-index: 3;
  padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, #000 65%, transparent);
  backdrop-filter: blur(8px);
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}

/* Das Podest selbst: eine Trapezflaeche mit Goldkante und Bodenschein. */
.podium {
  position: relative;
  z-index: 1;
  width: 88%;
  height: 26px;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--bg) 60%, var(--surface)));
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  border-top: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
}
.podium::after {
  content: "";
  position: absolute; left: 50%; bottom: -22px;
  width: 78%; height: 30px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  pointer-events: none;
}

.showcase-info { padding: var(--s4); display: grid; gap: 7px; text-align: center; }
.item-title { font-size: clamp(19px, 4.6vw, 26px); font-weight: 900; }
.item-sub { color: var(--muted); font-size: 14.5px; }
.item-meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 3px; }
.item-meta span {
  padding: 4px 11px; border-radius: 999px;
  background: var(--sunk);
  font-size: 12px; color: var(--muted);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}
.item-desc { font-size: 14px; color: var(--muted); line-height: 1.55; }

.reference-card {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
}
.reference-card img { width: 60px; height: 60px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.reference-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.reference-title { font-weight: 700; font-size: 14.5px; }
.reference-price { color: var(--accent); font-weight: 900; font-variant-numeric: tabular-nums; font-size: 18px; }

/* ---------------------------------------------------------------- Zeit */

.timer { display: flex; align-items: center; gap: var(--s3); }
.timer-bar {
  flex: 1; height: 10px; border-radius: 6px;
  background: var(--sunk);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7);
  overflow: hidden;
}
.timer-bar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--good), var(--accent));
  transform-origin: left;
  transition: transform 1s linear, background .3s;
}
.timer.is-low .timer-bar i { background: var(--bad); }
.timer.is-low .timer-text { color: var(--bad); animation: pulse .7s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.timer-text {
  font-size: 15px; font-weight: 900; color: var(--muted);
  font-variant-numeric: tabular-nums; min-width: 3.5ch; text-align: right;
}

/* ---------------------------------------------------------------- Klappziffern */

/* Die Signatur der Show. Jede Ziffer ist ein eigenes Blatt mit Mittelfuge;
   beim Wechsel klappt sie von oben herein. */
.flapboard { display: grid; gap: var(--s2); justify-items: center; }

.flap-label {
  font-size: 10px; font-weight: 900; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted);
}

.flap-row { display: flex; align-items: center; gap: 4px; perspective: 500px; }

.flap {
  position: relative;
  min-width: clamp(30px, 8.5vw, 46px);
  height: clamp(46px, 13vw, 68px);
  display: grid; place-items: center;
  border-radius: 6px;
  background: linear-gradient(180deg, #2A2440 0 50%, #16122A 50% 100%);
  color: var(--text);
  font-size: clamp(26px, 7.5vw, 42px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .09),
    0 4px 10px -4px rgba(0, 0, 0, .9);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Die Fuge in der Blattmitte - ohne sie wirkt es wie ein Kasten, nicht wie ein Blatt. */
.flap::after {
  content: "";
  position: absolute; left: 3px; right: 3px; top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, .75);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05);
}

.flap.sep {
  min-width: auto; background: none; box-shadow: none;
  color: var(--muted); font-size: clamp(20px, 5vw, 30px);
}
.flap.sep::after { display: none; }

.flap.cur { min-width: auto; background: none; box-shadow: none; color: var(--accent); }
.flap.cur::after { display: none; }

.flap.turn { animation: flap-turn .34s var(--ease); }
@keyframes flap-turn {
  0%   { transform: rotateX(-88deg); filter: brightness(.35); }
  55%  { transform: rotateX(9deg); filter: brightness(1.12); }
  78%  { transform: rotateX(-4deg); }
  100% { transform: rotateX(0); filter: brightness(1); }
}

/* Beim Aufloesen leuchten die Blaetter golden auf. */
.flap.gold { background: var(--gold); color: var(--on-accent); box-shadow: 0 0 22px -4px var(--accent); }
.flap.miss { background: linear-gradient(180deg, #3A1A28 0 50%, #24101A 50% 100%); }

/* ---------------------------------------------------------------- Eingabe */

.bid-zone { display: grid; gap: var(--s3); }

.bid-panel {
  padding: var(--s4) var(--s3);
  border-radius: var(--r-lg);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    var(--shadow-1);
}

.guess-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 36px; background: transparent; margin: 0;
}
.guess-slider::-webkit-slider-runnable-track {
  height: 12px; border-radius: 7px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 0%), var(--sunk) var(--fill, 0%));
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7);
}
.guess-slider::-moz-range-track {
  height: 12px; border-radius: 7px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 0%), var(--sunk) var(--fill, 0%));
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7);
}
.guess-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 32px; height: 32px; margin-top: -10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 16px -2px var(--accent), 0 3px 8px rgba(0, 0, 0, .7);
  cursor: grab;
}
.guess-slider::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: var(--accent);
  box-shadow: 0 0 16px -2px var(--accent);
  cursor: grab;
}

.slider-scale {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted); margin-top: -4px;
  font-variant-numeric: tabular-nums;
}

/* Der Hinweis ersetzt die Tastatur dort, wo es eine echte gibt. */
.type-hint {
  display: none;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}
.type-hint b { color: var(--accent); }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.keypad button {
  padding: 15px 0;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 3px 0 color-mix(in srgb, #000 55%, var(--bg));
  font-size: 22px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  transition: transform .07s var(--ease), box-shadow .07s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.keypad button:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 rgba(0, 0, 0, 0);
}
.keypad .key-del { color: var(--bad); }

.hl-zone { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.btn-hl {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: var(--s6) var(--s3);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 0 color-mix(in srgb, #000 55%, var(--bg));
  font-weight: 900; font-size: 17px; text-transform: uppercase; letter-spacing: .08em;
  transition: transform .07s var(--ease);
}
.btn-hl span { font-size: 30px; line-height: 1; }
.btn-hl:active { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.btn-hl-up:hover { color: var(--good); }
.btn-hl-down:hover { color: var(--bad); }

.joker-row { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.joker {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 45%, transparent);
  font-size: 13px; font-weight: 800;
}
.joker:hover:not([disabled]) { box-shadow: inset 0 0 0 1px var(--accent-2), 0 0 16px -6px var(--accent-2); }
.joker[disabled] { opacity: .35; pointer-events: none; }
.joker.is-armed { background: color-mix(in srgb, var(--accent-2) 28%, var(--surface)); }
.joker .cost { color: var(--accent); font-weight: 900; }

.hint-box {
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent-2) 20%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 50%, transparent);
  font-size: 14.5px; text-align: center;
}

/* ---------------------------------------------------------------- Knoepfe */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 3px 0 color-mix(in srgb, #000 50%, var(--bg));
  color: var(--text);
  font-weight: 800; font-size: 15px;
  text-decoration: none;
  transition: transform .07s var(--ease), box-shadow .07s var(--ease), filter var(--dur);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* Der grosse Show-Knopf. Er ist absichtlich das lauteste Element der Seite. */
.btn-primary {
  background: var(--gold);
  color: var(--on-accent);
  text-transform: uppercase;
  letter-spacing: .1em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 4px 0 color-mix(in srgb, var(--accent) 45%, #000),
    0 0 30px -8px var(--accent);
}
.btn-primary:active {
  transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

.btn-lg { padding: 18px 26px; font-size: 17px; }
.btn-accent { background: var(--gold); color: var(--on-accent); }
.btn-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-outline:active { transform: none; }
.btn-ghost { background: none; box-shadow: none; color: var(--muted); font-weight: 700; }
.btn-ghost:hover { color: var(--text); }
.btn-ghost:active { transform: none; box-shadow: none; }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 15px; font-size: 13px; border-radius: var(--r-sm); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

.btn.is-loading { pointer-events: none; color: transparent; position: relative; }
.btn.is-loading::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .25);
  border-top-color: var(--on-accent);
  animation: spin .7s linear infinite;
}

/* ---------------------------------------------------------------- Startseite */

/* Die Startseite ist keine Liste von Kaesten, sondern eine Buehne:
   Leuchtschrift, davor das Podest, dahinter die Tuerenreihe. */
/* =========================================================================
   Die Startseite: eine Tafel statt fuenf Kaesten
   -------------------------------------------------------------------------
   Vorher hatte hier jedes Element seinen eigenen Rahmen: Leuchtschrift,
   Jackpot, Podest, sechs Tueren und der Gasthinweis - fuenf Flaechen mit
   fuenf Randfarben, die alle gleichzeitig "sieh mich an" gerufen haben. Der
   Blick fand keinen Anfang, und die Seite wirkte zusammengesetzt statt gebaut.

   Jetzt gibt es genau eine Tafel. Die Gluehbirnen umlaufen sie als Ganzes,
   innen trennen Haarlinien, und die Tueren bilden ein zusammenhaengendes
   Feld. Es ist nicht weniger Show - es ist dieselbe Show mit einem Rahmen.
   ========================================================================= */

/* Ohne Kopfzeile darf oben etwas mehr Luft sein - sonst klebt die Tafel
   am Rand des Fensters. */
.screen-home { gap: var(--s4); padding-top: var(--s5); }

.marquee {
  position: relative;
  display: grid;
  gap: var(--s4);
  padding: var(--s5) var(--s4);
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 55% at 50% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 42%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent),
    0 0 70px -34px color-mix(in srgb, var(--accent) 80%, transparent),
    var(--shadow-2);
}
.marquee > * { min-width: 0; }

/* ---- Gluehbirnen: jetzt um die ganze Tafel ---- */

/* Die Birnen liegen als Punktreihe auf dem Rahmen; eine zweite, hellere
   Reihe darueber wird von einem wandernden Fenster freigegeben - das ergibt
   das Umlaufen ohne ein einziges zusaetzliches Element. */
.sign-bulbs { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.sign-bulbs::before,
.sign-bulbs::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(90deg, var(--bulb) 0 3px, transparent 3px 20px) top    /100% 3px no-repeat,
    repeating-linear-gradient(90deg, var(--bulb) 0 3px, transparent 3px 20px) bottom /100% 3px no-repeat,
    repeating-linear-gradient(180deg, var(--bulb) 0 3px, transparent 3px 20px) left  /3px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--bulb) 0 3px, transparent 3px 20px) right /3px 100% no-repeat;
}
.sign-bulbs::before { --bulb: color-mix(in srgb, var(--accent) 30%, transparent); }
.sign-bulbs::after {
  --bulb: color-mix(in srgb, var(--accent) 100%, white 25%);
  filter: drop-shadow(0 0 6px var(--accent));
  /* Das wandernde Fenster, das jeweils ein paar Birnen aufleuchten laesst */
  -webkit-mask-image: linear-gradient(90deg, transparent 0 34%, #000 42% 58%, transparent 66% 100%);
  mask-image: linear-gradient(90deg, transparent 0 34%, #000 42% 58%, transparent 66% 100%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  animation: bulbs 3.4s linear infinite;
}
@keyframes bulbs {
  from { -webkit-mask-position: 130% 0; mask-position: 130% 0; }
  to   { -webkit-mask-position: -130% 0; mask-position: -130% 0; }
}

/* ---- Die Leuchtschrift: nur noch Text, kein eigener Kasten ---- */

.sign { position: relative; display: grid; gap: var(--s2); text-align: center; }
.sign-kicker {
  font-size: clamp(11px, 2.6vw, 14px);
  font-weight: 900; letter-spacing: .4em; text-transform: uppercase;
  color: var(--accent-2);
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent-2) 70%, transparent);
}
.sign-title {
  font-size: clamp(34px, 10vw, 68px);
  font-weight: 900; text-transform: uppercase; line-height: .94;
  background: linear-gradient(180deg, #FFFFFF, var(--accent) 52%, color-mix(in srgb, var(--accent) 55%, #8A4500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter:
    drop-shadow(0 3px 0 rgba(0, 0, 0, .6))
    drop-shadow(0 0 34px color-mix(in srgb, var(--accent) 55%, transparent));
}
.sign-claim { color: var(--muted); font-size: 14.5px; text-align: center; }

/* ---- Der Preistopf: eine Zeile in der Tafel ---- */

/*
 * Dieselben Klappziffern wie im Spiel, nur kleiner und in Geldgruen. Als
 * eigener Kasten hat der Betrag mit dem Podest darunter um die Aufmerksamkeit
 * gerungen; als Zeile gehoert er zur Tafel und stoert die Rangfolge nicht.
 */
.pot {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: var(--s2) var(--s3);
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pot-label {
  font-size: 10px; font-weight: 900; letter-spacing: .28em; text-transform: uppercase;
  color: color-mix(in srgb, var(--good) 85%, var(--text));
}
.pot-hint { font-size: 12px; color: var(--muted); }

.pot .flap {
  min-width: clamp(20px, 5vw, 28px);
  height: clamp(30px, 7.5vw, 40px);
  font-size: clamp(17px, 4.4vw, 24px);
  color: var(--good);
  background: linear-gradient(180deg, #1B2A24 0 50%, #101A16 50% 100%);
  text-shadow: 0 0 16px color-mix(in srgb, var(--good) 55%, transparent);
}
/*
 * Trennzeichen und Waehrungssymbol sind keine Klappblaetter.
 *
 * Diese Regel muss hier stehen und nicht oben bei .flap.sep: `.pot .flap`
 * ist genauso spezifisch und kommt spaeter - ohne die Wiederholung bekaeme
 * das Leerzeichen vor dem Euro-Zeichen eine eigene schwarze Kachel.
 */
.pot .flap.cur,
.pot .flap.sep {
  color: color-mix(in srgb, var(--good) 75%, transparent);
  background: none;
  box-shadow: none;
  min-width: auto;
}
.pot .flap.cur::after,
.pot .flap.sep::after { display: none; }

/* ---- Das Podest ---- */

.podest {
  position: relative;
  display: block;
  width: min(100%, 520px);
  margin: 0 auto;
  text-align: center;
  padding-bottom: 34px;
  transition: transform .12s var(--ease);
}
.podest:active { transform: translateY(3px); }

/* Der Lichtkegel, der auf dem Podest steht */
.podest::before {
  content: "";
  position: absolute; left: 50%; top: -14%;
  width: 150%; height: 128%;
  transform: translateX(-50%);
  background: radial-gradient(48% 46% at 50% 34%,
    color-mix(in srgb, var(--accent) 24%, transparent), transparent 72%);
  pointer-events: none;
}

/*
 * Die Platte traegt jetzt eine Haarlinie statt eines zwei Pixel breiten
 * Goldrahmens: Sie steht in der Tafel, nicht neben ihr. Der Lichtkegel und
 * der Sockel machen die Wirkung - der Rahmen hat sie nur wiederholt.
 */
.podest-plate {
  position: relative;
  display: grid; gap: 5px;
  padding: var(--s5) var(--s4) var(--s4);
  border-radius: var(--r-lg) var(--r-lg) 6px 6px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 26%, var(--surface-2)), var(--surface) 72%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 20px 46px -26px #000;
}
.podest-label {
  font-size: 10px; font-weight: 900; letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent);
}
.podest-main {
  font-size: clamp(20px, 4.6vw, 28px); font-weight: 900; text-transform: uppercase; line-height: 1.08;
}
.podest-sub { color: var(--muted); font-size: 13.5px; }
.podest-cta {
  justify-self: center;
  margin-top: var(--s3);
  padding: 11px 26px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--on-accent);
  font-weight: 900; font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 0 26px -6px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* Der Sockel: eine Trapezflaeche mit Bodenschein - das Podest steht damit
   im Raum, statt als Rechteck zu schweben. */
.podest-base {
  position: absolute; left: 50%; bottom: 12px;
  width: 84%; height: 24px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, #000 55%, var(--surface)));
  clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--accent) 45%, transparent);
}
.podest-base::after {
  content: "";
  position: absolute; left: 50%; bottom: -18px;
  width: 120%; height: 26px; transform: translateX(-50%);
  background: radial-gradient(50% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%);
}

.podest-foot {
  position: absolute; left: 0; right: 0; bottom: -6px;
  display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center;
  font-size: 12px; color: var(--muted);
}
.podest-foot b { color: var(--accent); }
/*
 * Die Restzeit sitzt in der Platte, nicht in ihrer Ecke: Absolut
 * positioniert lag sie ueber der Zeile "Heutige Show", sobald aus
 * "neu in 3 h" ein "neu in 2 h 11 min" wurde.
 */
.podest-timer {
  justify-self: end;
  margin-top: calc(var(--s3) * -1);
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.podest-timer:empty { display: none; }
.podest.is-done .podest-plate { filter: saturate(.55); }

/* ---- Die Trennzeile ---- */

/* Eine Ueberschrift, die keinen Kasten braucht: Text zwischen zwei Linien. */
.cut {
  display: flex; align-items: center; gap: var(--s3);
  font-size: 10px; font-weight: 900; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.cut::before, .cut::after {
  content: "";
  flex: 1; height: 1px;
  background: var(--line);
}

/* ---- Die Tuerenreihe ---- */

/*
 * Sechs Tueren, ein Feld: Der Abstand zwischen ihnen ist eine Haarlinie,
 * kein Zwischenraum. Dadurch liest sich die Reihe als ein Gegenstand - so
 * wie eine Tuerenwand im Studio auch eine Wand ist und nicht sechs Tueren,
 * die zufaellig nebeneinander stehen.
 */
.doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

/*
 * Kein Loch in der letzten Reihe.
 *
 * Wie viele Tueren offen sind, entscheidet das Backend - bei fuenf
 * eingeschalteten Modi bliebe in einem Dreierraster sonst eine leere Kachel
 * stehen, und die sieht nicht nach Absicht aus, sondern nach Fehler. Die
 * letzte Tuer nimmt sich deshalb den Rest der Zeile.
 */
.doors .door:last-child:nth-child(3n + 1) { grid-column: span 3; }
.doors .door:last-child:nth-child(3n + 2) { grid-column: span 2; }

.door {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: var(--s4) var(--s3);
  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
  transition: background .18s var(--ease), transform .1s var(--ease);
}
.door:hover { background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.door:active { transform: translateY(1px); }

.door .no {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
  font-size: 15px; font-weight: 900;
}
.door b { font-size: 12.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.door span { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.35; }

/* ---- Der Gasthinweis: eine Zeile, kein Banner ---- */

.guest-line {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: center;
  gap: 6px;
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted); text-align: center;
}
.line-btn {
  color: var(--accent);
  font-size: 13px; font-weight: 900;
  text-decoration: underline; text-underline-offset: 3px;
}
.line-btn:hover { color: color-mix(in srgb, var(--accent) 80%, white); }

@media (max-width: 699px) {
  .marquee { padding: var(--s4) var(--s3); gap: var(--s3); }
  .door { padding: var(--s3) var(--s2); }

  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doors .door:last-child:nth-child(3n + 1),
  .doors .door:last-child:nth-child(3n + 2) { grid-column: auto; }
  .doors .door:last-child:nth-child(2n + 1) { grid-column: span 2; }
}

/* ---- Modiliste und Kategorien ---- */

.mode-list { display: grid; gap: var(--s2); }
.mode-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  text-align: left;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.mode-row:hover { background: var(--surface-2); }
.mode-row .ico {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: var(--sunk); color: var(--accent); font-weight: 900;
}
.mode-row b { display: block; text-transform: uppercase; font-size: 14px; letter-spacing: .04em; }
.mode-row span { font-size: 12.5px; color: var(--muted); }
.mode-row .go { margin-left: auto; color: var(--accent); font-size: 20px; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--s2); }
.cat-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s3);
  text-align: left;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  border-left: 3px solid var(--cat, var(--accent));
}
.cat-tile:hover { background: var(--surface-2); }
.cat-tile b { font-size: 14px; }
.cat-tile span { font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- Aufloesung */

.reveal {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: var(--s3);
  background: color-mix(in srgb, #000 78%, transparent);
  backdrop-filter: blur(8px);
  animation: fade .2s var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.reveal-sheet {
  width: 100%; max-width: 480px;
  padding: var(--s5) var(--s4) var(--s4);
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent),
    0 0 0 7px color-mix(in srgb, var(--accent) 10%, transparent),
    var(--shadow-2);
  display: grid; gap: var(--s3); justify-items: center;
  animation: curtain .4s var(--bounce);
  max-height: 94dvh; overflow-y: auto;
}
@keyframes curtain {
  from { transform: scale(.9) translateY(20px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.reveal-band {
  font-size: 13px; font-weight: 900; letter-spacing: .3em; text-transform: uppercase;
  text-align: center;
}
.reveal-band.exact   { color: var(--accent); text-shadow: 0 0 20px var(--accent); }
.reveal-band.perfect,
.reveal-band.good    { color: var(--good); }
.reveal-band.close   { color: var(--accent); }
.reveal-band.miss    { color: var(--bad); }

.reveal-caption {
  font-size: 11px; font-weight: 900; letter-spacing: .28em; text-transform: uppercase;
  color: var(--muted); text-align: center;
}

.reveal-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); width: 100%; }
.reveal-cmp > div { display: grid; gap: 4px; justify-items: center; }
.reveal-cap { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.reveal-val { font-size: clamp(19px, 5.5vw, 25px); font-weight: 900; font-variant-numeric: tabular-nums; }
.reveal-val.true { color: var(--accent); }

.dev-gauge { width: 100%; height: 10px; border-radius: 6px; background: var(--sunk); overflow: hidden; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7); }
.dev-gauge i { display: block; height: 100%; border-radius: 6px; width: 0; transition: width .7s var(--ease); }

.reveal-dev { color: var(--muted); font-size: 14px; text-align: center; }

.reveal-points {
  font-size: clamp(38px, 11vw, 56px); font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: center; line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 60%, transparent);
}
.reveal-points small {
  display: block; font-size: 11px; font-weight: 900; color: var(--muted);
  letter-spacing: .28em; text-transform: uppercase; margin-top: 4px; text-shadow: none;
}
.reveal-points.zero { color: var(--muted); text-shadow: none; }
.reveal-extra { font-size: 13px; color: var(--muted); text-align: center; }
.reveal-extra b { color: var(--accent); }
.reveal-sheet .btn { width: 100%; }

/* ---------------------------------------------------------------- Ergebnis */

.result-head { text-align: center; display: grid; gap: 4px; justify-items: center; }
.result-score {
  font-size: clamp(58px, 18vw, 104px); font-weight: 900; line-height: .92;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #FFFFFF, var(--accent) 60%, color-mix(in srgb, var(--accent) 55%, #B25E00));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5)) drop-shadow(0 0 30px color-mix(in srgb, var(--accent) 45%, transparent));
}
.result-unit { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); font-weight: 900; }
.result-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s3); }
.result-facts span {
  padding: 7px 14px; border-radius: 999px;
  background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12.5px; color: var(--muted);
}
.result-facts b { color: var(--text); }

.share-card {
  display: grid; gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.share-bars { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; font-size: 26px; line-height: 1; }
.share-actions { display: flex; gap: var(--s2); }
.share-actions .btn { flex: 1; }
.share-note { font-size: 12px; color: var(--muted); text-align: center; }

.result-items { display: grid; gap: var(--s2); }
.result-item {
  display: grid; grid-template-columns: 54px 1fr auto;
  align-items: center; gap: var(--s3);
  padding: var(--s2);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.result-item img { width: 54px; height: 54px; border-radius: var(--r-sm); object-fit: cover; }
.result-item .ri-title { font-weight: 700; font-size: 14.5px; }
.result-item .ri-sub { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.result-item .ri-pts { font-weight: 900; font-variant-numeric: tabular-nums; text-align: right; color: var(--accent); }
.result-item .ri-pts.zero { color: var(--muted); }
.result-item .ri-buy { display: block; font-size: 11.5px; color: var(--accent); text-decoration: none; }

.result-buttons { display: grid; gap: var(--s2); }
.guest-upsell {
  padding: var(--s4); border-radius: var(--r-lg); text-align: center;
  background: color-mix(in srgb, var(--accent-2) 20%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 50%, transparent);
  display: grid; gap: var(--s3);
}

/* ---------------------------------------------------------------- Rangliste */

.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sunk); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6); }
.tab {
  flex: 1; padding: 10px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tab.is-active { background: var(--gold); color: var(--on-accent); }

.lb-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: 13px; color: var(--muted); justify-content: center; }
.lb-meta b { color: var(--accent); }

.lb-me {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
.lb-me .rk { font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--accent); }
.lb-me .txt { font-size: 13px; color: var(--muted); }
.lb-me .txt b { color: var(--text); }

.lb-list { display: grid; gap: 4px; }
.lb-row {
  display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: var(--s3);
  padding: 11px var(--s3);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.lb-row.me { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.lb-row.pending { opacity: .55; }
.lb-row .rk { font-weight: 900; color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }
.lb-row:nth-child(1) .rk { color: var(--accent); font-size: 19px; }
.lb-row:nth-child(2) .rk, .lb-row:nth-child(3) .rk { color: var(--text); }
.lb-row .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .sub { font-size: 12px; color: var(--muted); }
.lb-row .sc { font-weight: 900; font-variant-numeric: tabular-nums; color: var(--accent); }
.lb-note { font-size: 12px; color: var(--muted); text-align: center; }

/* ---------------------------------------------------------------- Duelle */

.join-row { display: flex; gap: var(--s2); }
.join-row input { flex: 1; }
.duel-list { display: grid; gap: var(--s2); }
.duel-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.duel-row .who { flex: 1; min-width: 0; }
.duel-row .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-row .who span { font-size: 12.5px; color: var(--muted); }
.duel-row .res { font-weight: 900; font-variant-numeric: tabular-nums; }
.duel-row .res.win { color: var(--good); }
.duel-row .res.loss { color: var(--bad); }
.duel-invite { display: grid; gap: var(--s2); padding: var(--s4); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.copy-field { display: flex; gap: var(--s2); }
.copy-field input { flex: 1; font-size: 13px; }

/* ---------------------------------------------------------------- Formulare */

.form-card { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
label { display: grid; gap: 6px; font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--r-md);
  background: var(--sunk);
  border: 0;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--line);
  color: var(--text);
  font-size: 16px; /* 16px verhindert den Zoom-Sprung auf iOS */
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
input:focus, select:focus, textarea:focus { outline: none; box-shadow: var(--ring), inset 0 2px 5px rgba(0, 0, 0, .6); }
.form-note { font-size: 12px; color: var(--muted); text-align: center; letter-spacing: normal; text-transform: none; font-weight: 400; }
.form-error { font-size: 13px; color: var(--bad); font-weight: 700; text-align: center; }
.form-ok { font-size: 13px; color: var(--good); font-weight: 700; text-align: center; }

.seg { display: flex; gap: 4px; padding: 4px; border-radius: var(--r-md); background: var(--sunk); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6); }
.seg-btn { flex: 1; padding: 10px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.seg-btn.is-active { background: var(--gold); color: var(--on-accent); }

.teaser-box {
  padding: var(--s4); border-radius: var(--r-lg); text-align: center;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
  font-size: 14.5px;
}

/* ---------------------------------------------------------------- Profil */

.profile-head { display: flex; align-items: center; gap: var(--s4); justify-content: center; }
.avatar {
  width: 66px; height: 66px; flex: none;
  display: grid; place-items: center;
  border-radius: 18px;
  background: var(--gold);
  color: var(--on-accent); font-size: 28px; font-weight: 900;
  box-shadow: 0 0 26px -6px var(--accent);
}
.profile-head .who b { display: block; font-size: 21px; font-weight: 900; }
.profile-head .who span { font-size: 12.5px; color: var(--muted); }

.level-bar { height: 9px; border-radius: 6px; background: var(--sunk); overflow: hidden; margin-top: 7px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6); }
.level-bar i { display: block; height: 100%; background: var(--gold); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: var(--s2); }
.stat {
  padding: var(--s3); border-radius: var(--r-md); text-align: center;
  background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line);
}
.stat b { display: block; font-size: 23px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--accent); }
.stat span { font-size: 11px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }

.season-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); }
.season-card { padding: var(--s4); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 4px; text-align: center; }
.season-card .kd { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); font-weight: 900; }
.season-card .rk { font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--accent); }
.season-card .need { font-size: 12px; color: var(--muted); }

.profile-actions { display: grid; gap: var(--s2); }

/* ---------------------------------------------------------------- Erfolge */

.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s2); }
.ach {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.ach.locked { opacity: .55; }
.ach .medal {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 17px; font-weight: 900;
  background: var(--sunk);
  color: var(--muted);
  box-shadow: inset 0 0 0 2px var(--line);
}
.ach.bronze .medal  { box-shadow: inset 0 0 0 2px var(--medal-bronze); color: var(--medal-bronze-2); }
.ach.silber .medal  { box-shadow: inset 0 0 0 2px var(--medal-silver); color: var(--medal-silver-2); }
.ach.gold .medal    { box-shadow: inset 0 0 0 2px var(--accent), 0 0 16px -4px var(--accent); color: var(--accent); }
.ach.platin .medal  { box-shadow: inset 0 0 0 2px var(--accent-2), 0 0 16px -4px var(--accent-2); color: var(--accent-2); }
.ach.locked .medal  { box-shadow: inset 0 0 0 2px var(--line); color: var(--muted); }
.ach .body { min-width: 0; flex: 1; }
.ach b { display: block; font-size: 14.5px; }
.ach p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ach .prog { height: 5px; border-radius: 4px; background: var(--sunk); margin-top: 8px; overflow: hidden; }
.ach .prog i { display: block; height: 100%; background: var(--accent); }
.ach .cnt { font-size: 11.5px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }

.ach-toast {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--accent);
  animation: curtain .5s var(--bounce);
}

/* ---------------------------------------------------------------- Streamer */

.feature-list { display: grid; gap: var(--s2); }
.feature { padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.feature b { display: block; font-size: 14.5px; }
.feature span { font-size: 12.5px; color: var(--muted); }
.lobby-created { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.lobby-code {
  font-size: clamp(38px, 14vw, 58px); font-weight: 900; letter-spacing: .18em;
  text-align: center; color: var(--accent);
  text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ---------------------------------------------------------------- Navigation */

/* Unten fest, wie die Tastenreihe eines Spielgeraets. */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 7px var(--s2) calc(7px + var(--safe-b));
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 60%, transparent), var(--bg) 40%);
  backdrop-filter: blur(16px);
  border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.tabbar button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px;
  border-radius: var(--r-sm);
  font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}
.tabbar button span { font-size: 17px; line-height: 1; }
.tabbar button.is-active { color: var(--accent); text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent); }

.sheet {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: flex-end; justify-content: center;
  background: color-mix(in srgb, #000 72%, transparent);
  backdrop-filter: blur(8px);
  animation: fade .2s var(--ease);
}
.sheet-inner {
  width: 100%; max-width: 440px;
  margin: var(--s3);
  margin-bottom: calc(var(--s3) + var(--safe-b));
  padding: var(--s3);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow-2);
  display: grid; gap: 2px;
  animation: curtain .32s var(--bounce);
}
.sheet-item {
  display: block; width: 100%;
  padding: 13px var(--s3);
  border-radius: var(--r-md);
  text-align: left; text-decoration: none;
  font-size: 15px; font-weight: 700;
}
.sheet-item:hover { background: var(--surface-2); }
.sheet-close { color: var(--muted); text-align: center; margin-top: 4px; }

/* ---------------------------------------------------------------- Werbung */

.ad-slot {
  min-height: 90px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
}
.ad-slot > * { max-width: 100%; }
.ad-label { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 5px; }

.rewarded-box { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: center; }
.rewarded-count { font-size: 44px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--accent); text-shadow: 0 0 26px color-mix(in srgb, var(--accent) 60%, transparent); }

/* ---------------------------------------------------------------- Seitenfuss */

/*
 * Klassischer Aufbau - Marke links, drei Spalten daneben, Rechtszeile unten.
 * Die Anbindung an die Buehne macht die Goldlinie oben und das Zeichen; sonst
 * bleibt hier alles gedeckt. Der Fuss soll ordnen, nicht auffallen.
 */
.seitenfuss {
  margin-top: var(--s7);
  padding-bottom: var(--s5);
  background: #05040C;
  border-top: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}

/* Nur in der Spieloberflaeche schwebt unten die Navigation - nur dort muss
   der Fuss Platz dafuer freihalten. */
.seitenfuss.hat-navigation { padding-bottom: calc(104px + var(--safe-b)); }

.fuss-inner {
  max-width: var(--stage);
  margin: 0 auto;
  padding: var(--s6) var(--s4) var(--s4);
}

/* ---- Raster ---- */

.fuss-raster {
  display: grid;
  gap: var(--s5);
  padding-bottom: var(--s5);
}

/* Die Marke bekommt mehr Platz als die Spalten - sie traegt den Absender. */
@media (min-width: 700px) {
  .fuss-raster {
    grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(120px, 1fr));
    gap: var(--s6) var(--s5);
  }
}

/* ---- Markenblock ---- */

.marke-kopf { display: flex; align-items: center; gap: var(--s3); }
.marke-logo { height: 34px; width: auto; flex: none; border-radius: 8px; }
.marke-zeichen {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
  font-size: 18px; font-weight: 900;
}
.marke-kopf b {
  display: block;
  font-size: 14.5px; font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text);
}
.marke-kopf span { font-size: 12.5px; color: var(--muted); }

.marke-text {
  margin-top: var(--s3);
  font-size: 13px; line-height: 1.65;
  color: var(--muted);
  max-width: 42ch;
}

/* ---- Verweisspalten ---- */

.fuss-spalte { display: grid; gap: 9px; align-content: start; justify-items: start; }
.fuss-spalte h2 {
  font-size: 10.5px; font-weight: 900;
  letter-spacing: .22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 85%, transparent);
  margin-bottom: 3px;
}
.fuss-spalte button,
.fuss-spalte a {
  padding: 0;
  font-size: 13.5px; font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  text-align: left;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fuss-spalte button:hover,
.fuss-spalte a:hover { color: var(--text); border-bottom-color: var(--accent); }

/* ---- Rechtszeile ---- */

.fuss-schluss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  font-size: 12px;
  color: color-mix(in srgb, var(--muted) 78%, transparent);
}

/* ---------------------------------------------------------------- Haeufige Fragen */

.faq-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s7);
  position: relative; z-index: 1;
}

.faq-kopf { margin: var(--s5) 0 var(--s6); }
.faq-kopf .screen-lead { margin-top: var(--s3); }
.faq-kopf a { color: var(--accent); }

.faq-block { margin-bottom: var(--s6); }
.faq-bereich {
  font-size: 11px; font-weight: 900;
  letter-spacing: .24em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 85%, transparent);
  padding-bottom: var(--s2);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  margin-bottom: var(--s2);
}

.faq-liste { display: grid; }

/*
 * Aufklappbare Eintraege statt einer langen Textwand: Wer eine bestimmte
 * Frage sucht, ueberblickt so alle Ueberschriften auf einmal.
 */
.faq-eintrag { border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }

.faq-eintrag summary {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px; font-weight: 700;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary:hover { color: var(--accent); }

/* Das Pluszeichen wird beim Aufklappen zum Minus - ohne zweites Symbol. */
.faq-eintrag summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 11px; height: 11px;
  background:
    linear-gradient(var(--accent), var(--accent)) center/100% 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center/1.5px 100% no-repeat;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  opacity: .75;
}
.faq-eintrag[open] summary::after {
  transform: rotate(90deg);
  background: linear-gradient(var(--accent), var(--accent)) center/100% 1.5px no-repeat;
  opacity: 1;
}

.faq-eintrag p {
  padding: 0 var(--s6) var(--s4) 0;
  font-size: 14px; line-height: 1.7;
  color: var(--muted);
  max-width: 66ch;
}

.faq-fuss {
  padding-top: var(--s4);
  border-top: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
  font-size: 13px; color: var(--muted); line-height: 1.8;
}
.faq-fuss a { color: var(--accent); text-decoration: none; }
.faq-fuss a:hover { text-decoration: underline; }

/* Waehrend einer Runde bleibt der Fuss weg - er wuerde die Seite laenger
   machen als der Bildschirm ist und damit das Scroll-Verbot brechen. */
body.in-game .seitenfuss { display: none; }

/* Beim Schaetzen scrollt die Seite selbst nicht. Passt der Inhalt bei sehr
   flachen Fenstern doch nicht, scrollt die Spielflaeche fuer sich. */
html.in-game, body.in-game { overflow: hidden; }

.big-code {
  font-size: clamp(80px, 22vw, 150px);
  font-weight: 900; line-height: .9;
  background: linear-gradient(180deg, #FFFFFF, var(--accent) 55%, color-mix(in srgb, var(--accent) 55%, #8A4500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55));
}

/* ---------------------------------------------------------------- Sonstiges */

.toast {
  position: fixed; left: 50%; bottom: calc(92px + var(--safe-b)); z-index: 100;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 12px 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-2);
  font-size: 14px; font-weight: 700;
  animation: toast-in .25s var(--bounce);
}
.toast.bad { box-shadow: 0 0 0 1px var(--bad), var(--shadow-2); color: var(--bad); }
.toast.good { box-shadow: 0 0 0 1px var(--good), var(--shadow-2); color: var(--good); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }

.confetti { position: fixed; inset: 0; z-index: 95; pointer-events: none; }

.loader { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: color-mix(in srgb, #000 55%, transparent); }
.loader i {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
  padding: var(--s4);
  padding-bottom: calc(var(--s4) + var(--safe-b));
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 -1px 0 var(--line-strong), var(--shadow-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
}
.consent p { flex: 1 1 240px; font-size: 13px; color: var(--muted); margin: 0; }
.consent-actions { display: flex; gap: var(--s2); margin-left: auto; }

.empty-state { padding: var(--s6) var(--s4); text-align: center; color: var(--muted); }
.empty-state b { display: block; color: var(--text); font-size: 16px; margin-bottom: 4px; }

.legal-page { max-width: 68ch; margin: 0 auto; padding: var(--s6) var(--s4) var(--s7); position: relative; z-index: 1; }
.legal-page h1 { margin-bottom: var(--s4); }
.legal-body { color: var(--muted); line-height: 1.7; }
.legal-body h2, .legal-body h3 { color: var(--text); margin: var(--s5) 0 var(--s2); font-size: 18px; }
.legal-body p, .legal-body li { margin-bottom: var(--s2); }
.legal-body ul { list-style: disc; padding-left: 20px; }

.center-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--s5); text-align: center; position: relative; z-index: 1; }
.center-page .big { font-size: 62px; margin-bottom: var(--s3); }

/* ---------------------------------------------------------------- Spiel: eine Bildflaeche, ein Bedienfeld */

/*
 * Der Spielbildschirm ist ein Raster mit genau einer beweglichen Zeile.
 *
 * Vorher war es eine Flex-Spalte, in der sich Foto, Titel und Tastenfeld um
 * dieselbe Hoehe gestritten haben. Auf dem Handy hat das Foto den Streit
 * immer verloren: es fiel auf seine Mindesthoehe zurueck, waehrend der Titel
 * darunter aus der Karte geschnitten wurde. Am Ende sah man vom Artikel
 * einen Streifen - und genau darum ging das Spiel.
 *
 * Jetzt gilt: Das Bedienfeld bekommt, was es braucht (auto), das Foto den
 * ganzen Rest (minmax(0, 1fr)). Passt beides zusammen nicht mehr auf den
 * Schirm, schrumpft das Foto bis zu seiner Untergrenze und danach scrollt
 * die Flaeche - aber abgeschnitten wird nichts mehr.
 */

.screen-game {
  display: grid;
  /*
   * Die mittlere Zeile darf schrumpfen - aber nicht unter das, was der
   * Artikel zum Erkennen braucht. Mit `minmax(0, 1fr)` gab die Zeile auf
   * einem 320x568-Geraet bis auf 45 Pixel nach: Die Karte war noch da, das
   * Foto darin aber weggeschnitten. `min-content` haelt die Untergrenze des
   * Bildes, und was dann nicht mehr passt, faengt der Notfall-Scroll ab.
   */
  grid-template-rows: auto minmax(min-content, 1fr) auto;
  gap: var(--s3);
  align-content: stretch;
}

/*
 * Die drei Zeilen werden ausdruecklich zugewiesen.
 *
 * Ohne das rutscht auf dem Desktop alles eine Zeile nach vorn: Dort ist die
 * Rundenleiste ausgeblendet, also faellt sie als Rasterkind weg - und das
 * Foto landet in der Zeile "auto" statt in der beweglichen. Es bleibt dann
 * so klein wie sein Inhalt, waehrend darunter der halbe Bildschirm leer ist.
 */
.screen-game .game-bar    { grid-row: 1; }
.screen-game .podium-wrap { grid-row: 2; }
.screen-game .game-dock   { grid-row: 3; }

/* Die Karte selbst: Bild oben flexibel, Text unten immer vollstaendig. */
.showcase {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

/*
 * Das Bild liegt absolut in seiner Flaeche.
 *
 * Mit height:100% am <img> haengt die Hoehe an der Elternhoehe - und die
 * kommt aus dem Raster. Safari loest solche Prozentangaben nicht zuverlaessig
 * auf und rendert das Bild dann gar nicht. Absolut positioniert braucht es
 * die Rechnung nicht: die vier Kanten stehen fest.
 */
.showcase-media {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  background: var(--surface-2);
  overflow: hidden;
}
.showcase-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Eine Untergrenze braucht es trotzdem: Steht das Raster in einem Container
 * ohne feste Hoehe - etwa auf einem sehr flachen Fenster, wo die Regel
 * weiter unten nicht greift - loest 1fr zu "auto" auf. Das absolut liegende
 * Bild haette dann gar keine Hoehe mehr.
 */
.showcase-media { min-height: clamp(180px, 34dvh, 340px); }

.podium-wrap {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

/* Der Titel darf umbrechen, aber nie unendlich wachsen. Zwei Zeilen sind
   die Grenze, danach kuerzt der Browser mit Auslassungspunkten. */
.item-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Das Bedienfeld gibt nicht nach. */
.game-dock {
  display: grid;
  gap: var(--s2);
  min-height: 0;
}

/* ---- Die Rundenleiste ---- */

/*
 * Seit die Kopfzeile weg ist, ist diese Leiste die gesamte Statusanzeige des
 * Spiels: Abbruch, Fortschritt, Serie, Punkte. Sie steht dort, wo hingeschaut
 * wird - direkt ueber dem Artikel - und gilt auf jeder Breite.
 *
 * Vorher war sie ein Handy-Ersatz fuer eine Anzeigetafel am oberen Rand. Auf
 * dem Desktop standen dieselben Zahlen dadurch zweimal auf dem Schirm, einmal
 * davon in einem Band, das sonst nichts zu sagen hatte.
 */
.game-bar { display: none; }

.screen-game .game-bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 2px 0 0;
}

.game-bar-x {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  font-size: 15px;
}
.game-bar-x:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* Der Rundenfortschritt als Segmentbalken - lesbarer als Lampen und
   er passt in jeder Rundenlaenge auf die Breite. */
.game-bar-steps { flex: 1; display: flex; gap: 3px; min-width: 0; }
.game-bar-steps i {
  flex: 1;
  height: 4px;
  border-radius: 3px;
  background: var(--sunk);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7);
  transition: background .3s var(--ease);
}
.game-bar-steps i.on  { background: var(--accent); }
.game-bar-steps i.now { background: var(--accent-2); animation: lamp 1.1s ease-in-out infinite; }

.game-bar-chip {
  display: inline-flex; align-items: baseline; gap: 4px; flex: none;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--sunk);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .6);
}
.game-bar-chip b { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.game-bar-chip i {
  font-style: normal; font-size: 9px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
#gameStreak b { color: var(--accent); text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent); }

@media (max-width: 699px) {
  /* Auf dem Handy verschwindet zusaetzlich die untere Navigation - das sind
     rund 70 Pixel, die das Artikelfoto bekommt. */
  body.in-game .tabbar { display: none; }
}

/*
 * Ab genug Hoehe passt alles ohne Scrollen. Darunter ist Scrollen das
 * kleinere Uebel gegenueber einem briefmarkengrossen Foto.
 */
@media (min-height: 560px) {
  #screen-game {
    height: 100dvh;
    padding-top: var(--s2);
    padding-bottom: calc(var(--s2) + var(--safe-b));
    gap: var(--s2);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Das Foto gibt als Erstes nach - aber nie unter die Groesse, bei der man
     den Artikel noch erkennt. */
  #screen-game .showcase-media { min-height: 130px; }

  /* Alles unterhalb des Fotos wird auf das Noetige eingedampft. */
  #screen-game .showcase-info { padding: var(--s2) var(--s3); gap: 2px; }
  #screen-game .item-desc,
  #screen-game .item-sub { display: none; }
  #screen-game .item-title { font-size: clamp(16px, 3.8vw, 21px); }
  #screen-game .podium { height: 14px; }
  #screen-game .flapboard { gap: 3px; }
  #screen-game .flap-label { font-size: 9px; }
  #screen-game .bid-panel { padding: var(--s2) var(--s3); }
  #screen-game .keypad button { padding: 11px 0; font-size: 19px; }
  #screen-game .joker { padding: 7px 12px; font-size: 12.5px; }
  #screen-game #btnQuit { display: none; }
}

/* Auf dem Handy bleibt die Bildschirmtastatur - dafuer wird ringsum gespart. */
@media (max-width: 699px) {
  #screen-game { padding-left: var(--s3); padding-right: var(--s3); }
  #screen-game .game-dock { gap: 6px; }
  #screen-game .keypad { gap: 6px; }
  #screen-game .keypad button { padding: 10px 0; font-size: 19px; border-radius: var(--r-sm); }
  #screen-game .flap { height: clamp(38px, 11vw, 50px); min-width: clamp(28px, 8vw, 42px); }
  #screen-game .guess-slider { height: 28px; }
  #screen-game .guess-slider::-webkit-slider-thumb { margin-top: -9px; }
  #screen-game .slider-scale { margin-top: -2px; font-size: 10.5px; }
  #screen-game .joker-row { gap: 6px; }
  #screen-game .btn-lg { padding: 13px 20px; font-size: 15.5px; }
}

/*
 * Ab Tabletbreite gibt es praktisch immer eine echte Tastatur - und die
 * Bildschirmtastatur ist der groesste Block der Seite. Ohne sie passt das
 * Foto in voller Groesse auf denselben Schirm.
 *
 * Der Umschaltpunkt haengt bewusst an der Breite und nicht an der
 * Zeiger-Erkennung: die melden Vorschaufenster und Hybridgeraete falsch.
 */
@media (min-width: 700px) and (min-height: 560px) {
  #screen-game .keypad { display: none; }
  #screen-game .type-hint { display: block; }
  /*
   * Auf dem Desktop bleibt die Navigation waehrend der Runde stehen - sie
   * schwebt dort als Pille am unteren Rand. Die Spielflaeche muss ihr
   * ausweichen, sonst liegt der Abgeben-Knopf darunter.
   *
   * Der Platz wird als Innenabstand reserviert, nicht von der Hoehe
   * abgezogen: So bleibt die Flaeche selbst so gross wie das Fenster und der
   * Notfall-Scroll faengt weiterhin alles ab, was nicht passt.
   */
  #screen-game {
    height: calc(100dvh - 78px);
    padding-bottom: 76px;
  }
}

/* Reichlich Hoehe: die Beschreibung passt wieder mit hinein. */
@media (min-height: 860px) {
  #screen-game { gap: var(--s3); }
  #screen-game .item-desc,
  #screen-game .item-sub { display: block; }
  #screen-game .showcase-info { padding: var(--s3) var(--s4); gap: 5px; }
  #screen-game #btnQuit { display: inline-flex; }
  #screen-game .keypad button { padding: 13px 0; }
}

/* ---------------------------------------------------------------- Breiter Schirm */

/* Bewusst kein zweispaltiges Layout: Die Buehne bleibt eine Achse, sie wird
   nur groesser. Damit ist die Dramaturgie auf jedem Geraet dieselbe. */
@media (min-width: 700px) {
  .screen { padding: var(--s5) var(--s4) var(--s7); gap: var(--s5); }
  .tabbar {
    left: 50%; right: auto; bottom: var(--s4);
    transform: translateX(-50%);
    width: min(var(--stage), calc(100% - var(--s5) * 2));
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    padding: 7px;
  }
  .tabbar button { flex-direction: row; gap: 8px; font-size: 12px; padding: 10px; border-radius: 999px; }
  .keypad button { padding: 17px 0; }
}


/* =========================================================================
   Nichts laeuft seitlich raus
   -------------------------------------------------------------------------
   Auf dem Handy ist waagerechtes Scrollen immer ein Fehler: Der Daumen
   wischt beim Blaettern versehentlich zur Seite, die Seite ruckelt, und ein
   fest positioniertes Element sitzt danach schief. Statt an zehn Stellen
   nachzubessern, steht die Regel hier einmal und gilt fuer alles.

   `overflow-x: clip` statt `hidden`: `hidden` erzeugt einen Scroll-Container
   und macht damit jedes `position: sticky` darin wirkungslos.
   ========================================================================= */

html {
  overflow-x: clip;
  max-width: 100%;
}
body {
  overflow-x: clip;
  max-width: 100%;
}

/* Raster- und Flex-Kinder duerfen nicht an ihrem Inhalt kleben bleiben.
   Ohne min-width:0 sprengt ein langer Artikelname jede Zeile. */
.screen > *,
.app > *,
.form-card > *,
.mode-row > *,
.lb-row > *,
.result-item > *,
.duel-row > * { min-width: 0; }

/* Lange Woerter, Codes und Adressen brechen um, statt zu schieben. */
.item-title, .item-sub, .item-desc,
.lb-row .nm, .duel-row .who b, .result-item .ri-title,
.reference-title, .share-host,
.legal-body, .faq-eintrag p { overflow-wrap: anywhere; }

/* Alles, was von aussen kommt, bleibt in seiner Spalte. */
img, video, canvas, svg, iframe, table { max-width: 100%; }
pre, code { overflow-x: auto; }

/* Eingabefelder haben eine eigene Standardbreite, die Raster ignorieren. */
input, select, textarea { max-width: 100%; min-width: 0; }

/* Die Kulisse darf ueberlaufen - sie liegt in ihrem eigenen, geschlossenen
   Kasten und wird dort abgeschnitten. Das ist bereits so, hier nur
   ausdruecklich, damit es beim Aufraeumen nicht verlorengeht. */
.stage { overflow: hidden; }


/* =========================================================================
   Handy: die Seite soll sich wie eine App anfuehlen
   -------------------------------------------------------------------------
   Drei Dinge trennen eine Webseite von einer App, und alle drei sind
   Kleinigkeiten: Ein Tippen darf nichts markieren und nicht blau aufblitzen,
   das Scrollen darf am Ende nicht die ganze Seite mitziehen, und die
   Bedienleisten muessen den Rundungen und Balken des Geraets ausweichen.
   ========================================================================= */

@media (max-width: 699px) {

  body {
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Text markieren ist auf einer Bedienflaeche nie gewollt - der Griff
     danebengetippt oeffnet sonst die Lupe. Fuer echten Text bleibt es an. */
  .tabbar, .keypad, .joker-row, .doors,
  .btn, .tab, .seg-btn, .game-bar, .podest-cta {
    -webkit-user-select: none;
    user-select: none;
  }

  .game-bar-chip { padding: 4px 8px; }
  .game-bar-chip b { font-size: 13px; }
  .game-bar-chip i { font-size: 8px; }

  .screen { padding-left: var(--s3); padding-right: var(--s3); }

  /* Die Leiste unten sitzt wie eine App-Navigation: durchgehend, mit
     Platz fuer die Wischleiste, und die aktive Taste bekommt eine Pille. */
  .tabbar {
    gap: 0;
    padding: 6px 6px calc(6px + var(--safe-b));
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
  }
  .tabbar button {
    position: relative;
    gap: 2px;
    padding: 8px 2px 6px;
    font-size: 9.5px;
    letter-spacing: .06em;
  }
  .tabbar button span { font-size: 19px; transition: transform .18s var(--bounce); }
  .tabbar button.is-active span { transform: translateY(-1px) scale(1.12); }
  /* Der Punkt ueber der aktiven Taste - das kleinste denkbare Zeichen dafuer,
     wo man gerade ist. */
  .tabbar button.is-active::after {
    content: "";
    position: absolute; top: 2px; left: 50%;
    width: 16px; height: 3px; margin-left: -8px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
  }

  /* Der Menue-Vorhang faehrt von unten hoch und bekommt einen Griff. */
  .sheet-inner { margin: 0; margin-top: auto; border-radius: var(--r-xl) var(--r-xl) 0 0; max-width: none; padding-bottom: calc(var(--s3) + var(--safe-b)); }
  .sheet-inner::before {
    content: "";
    display: block;
    width: 38px; height: 4px;
    margin: 2px auto 10px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--text) 22%, transparent);
  }
  .sheet-item { padding: 15px var(--s3); font-size: 16px; }

  /* Die Aufloesung nutzt die volle Breite und sitzt unten, wo der Daumen ist. */
  .reveal { align-items: flex-end; padding: 0; }
  .reveal-sheet {
    max-width: none;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: var(--s4) var(--s4) calc(var(--s4) + var(--safe-b));
    max-height: 92dvh;
  }

  /* Zwei Tueren nebeneinander - drei werden auf 360 px zu schmal. */
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; }
  .door { padding: var(--s4) var(--s2) var(--s3); }
  .door .no { width: 34px; height: 34px; font-size: 16px; }
  .door b { font-size: 12.5px; }
  .door span { font-size: 11px; }



  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ach-grid { grid-template-columns: 1fr; }
  .season-cards { grid-template-columns: 1fr; }

  /* Der Fuss ist auf dem Handy ein Anhang, kein zweites Menue. */
  .fuss-inner { padding: var(--s5) var(--s3) var(--s3); }
  .fuss-raster { gap: var(--s4); }
  .fuss-schluss { flex-direction: column; align-items: flex-start; }
}

/* Ganz schmale Geraete (320-360 px) */
@media (max-width: 360px) {
  .doors { gap: 1px; }
  .door { padding: var(--s3) 6px var(--s2); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabbar button { font-size: 9px; }
}

/*
 * Als installierte App (Startbildschirm) gibt es keine Browserleiste mehr.
 * Dann darf oben etwas mehr Luft sein, sonst klebt der Inhalt am Rand.
 */
@media (display-mode: standalone) {
  .screen { padding-top: calc(env(safe-area-inset-top, 0px) + var(--s4)); }
}


/* =========================================================================
   Rangliste: das Podest
   -------------------------------------------------------------------------
   Der Gewinn steht neben dem Namen, nicht in einer Fussnote. Er ist der
   Grund, warum jemand eine Woche lang jeden Tag spielt - also gehoert er
   dorthin, wo der Blick zuerst hinfaellt.
   ========================================================================= */

.lb-podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: end;
  gap: var(--s2);
}

.lb-place {
  position: relative;
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: var(--s4) var(--s2) var(--s3);
  border-radius: var(--r-md) var(--r-md) 6px 6px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px -20px #000;
  text-align: center;
  min-width: 0;
}
.lb-place .rank {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 14px; font-weight: 900;
  background: var(--sunk);
  color: var(--muted);
  box-shadow: inset 0 0 0 2px var(--line);
}
.lb-place .who {
  font-size: 13px; font-weight: 800;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-place .prize {
  font-size: 15px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--good);
}
.lb-place .pts { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Platz 1 steht hoeher und traegt Gold - wie auf einem echten Podest. */
.lb-place-1 {
  order: 2;
  padding-top: var(--s5);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--surface-2)), var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 30px -12px var(--accent), 0 16px 34px -20px #000;
}
.lb-place-1 .rank { background: var(--gold); color: var(--on-accent); box-shadow: 0 0 14px -2px var(--accent); }
.lb-place-1 .prize { color: var(--accent); text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 60%, transparent); }
.lb-place-2 { order: 1; }
.lb-place-2 .rank { box-shadow: inset 0 0 0 2px var(--medal-silver); color: var(--medal-silver-2); }
.lb-place-3 { order: 3; }
.lb-place-3 .rank { box-shadow: inset 0 0 0 2px var(--medal-bronze); color: var(--medal-bronze-2); }
.lb-place.me { box-shadow: inset 0 0 0 2px var(--accent), 0 16px 34px -20px #000; }

.lb-place .crown {
  position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  filter: drop-shadow(0 0 8px var(--accent));
}

/* Die Zeile in der Liste: Name links, Gewinn direkt daneben. */
.lb-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
.lb-row .nm-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.lb-row .nm-row .nm { min-width: 0; }
.lb-prize {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--good) 20%, transparent);
  color: var(--good);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 45%, transparent);
  white-space: nowrap;
}
.lb-row:first-child .lb-prize {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}

.lb-pool {
  display: grid; gap: 3px; justify-items: center; text-align: center;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--good) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 38%, transparent);
}
.lb-pool b { font-size: 22px; font-weight: 900; color: var(--good); font-variant-numeric: tabular-nums; }
.lb-pool span { font-size: 11.5px; color: var(--muted); }


/* =========================================================================
   Die Teilen-Karte
   -------------------------------------------------------------------------
   Sie ist kein Hinweiskasten, sondern das Plakat der Runde. Wer sie im Chat
   sieht, soll zwei Dinge sofort erkennen: dass hier jemand gespielt hat -
   und dass es dabei um etwas geht.
   ========================================================================= */

.share-card {
  position: relative;
  margin: 0;
  display: grid;
  gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 68%),
    linear-gradient(165deg, var(--surface-2), var(--surface) 70%);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent),
    0 0 0 6px color-mix(in srgb, var(--accent) 9%, transparent),
    var(--shadow-2);
}

/* Ein wandernder Lichtstreifen ueber der Karte - dieselbe Sprache wie die
   Scheinwerfer im Hintergrund, nur ganz leise. */
.share-glow {
  position: absolute; inset: -40% -10%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .10) 46%, transparent 62%);
  animation: share-sweep 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes share-sweep {
  0%, 100% { transform: translateX(-40%); opacity: 0; }
  40%      { opacity: 1; }
  70%      { transform: translateX(40%); opacity: 0; }
}

.share-head { display: flex; align-items: center; gap: var(--s3); position: relative; }
.share-mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: var(--gold);
  color: var(--on-accent);
  font-weight: 900; font-size: 17px;
  box-shadow: 0 0 16px -3px var(--accent);
}
.share-brand {
  display: block;
  font-size: 12.5px; font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase;
}
.share-when { font-size: 11.5px; color: var(--muted); }
.share-badge {
  margin-left: auto; flex: none;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase;
  background: color-mix(in srgb, var(--accent-2) 25%, transparent);
  color: var(--accent-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 55%, transparent);
}

.share-body { position: relative; display: grid; gap: var(--s3); justify-items: center; }

/* Die Balken sind keine Emoji-Zeile mehr, sondern gezeichnete Felder: Sie
   sitzen in einer Reihe, sind gleich gross und lassen sich einfaerben. */
.share-bars {
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
  font-size: inherit; line-height: 1;
}
.share-bars i {
  width: 22px; height: 30px;
  border-radius: 5px;
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  animation: bar-pop .32s var(--bounce) both;
}
@keyframes bar-pop {
  from { transform: scale(.4) translateY(8px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.share-bars i.exact   { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 100%, white 25%), var(--accent-2)); box-shadow: 0 0 14px -3px var(--accent-2); }
.share-bars i.perfect { background: linear-gradient(180deg, color-mix(in srgb, var(--good) 100%, white 25%), var(--good)); }
.share-bars i.good    { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 100%, white 25%), var(--accent)); }
.share-bars i.close   { background: linear-gradient(180deg, #FFB84D, #E08A1E); }
.share-bars i.miss    { background: linear-gradient(180deg, #3A3357, #262040); }

.share-score { display: grid; justify-items: center; gap: 2px; }
.share-score b {
  font-size: clamp(44px, 13vw, 62px); font-weight: 900; line-height: .9;
  background: linear-gradient(180deg, #FFFFFF, var(--accent) 58%, color-mix(in srgb, var(--accent) 55%, #B25E00));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)) drop-shadow(0 0 26px color-mix(in srgb, var(--accent) 45%, transparent));
}
.share-score span {
  font-size: 10px; font-weight: 900;
  letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
}

.share-facts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.share-facts span {
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, #000 35%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 11.5px; color: var(--muted);
}
.share-facts b { color: var(--text); font-variant-numeric: tabular-nums; }

.share-foot {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.share-line { font-size: 13px; font-weight: 800; color: var(--text); }
.share-host { font-size: 11.5px; color: var(--accent); font-weight: 700; }

.share-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.share-actions .btn { flex: 1 1 130px; }
.share-actions .btn-lg { flex-basis: 100%; }


/* =========================================================================
   Guthaben
   -------------------------------------------------------------------------
   Der einzige Teil des Spiels, in dem es um echtes Geld geht. Deshalb hier
   kein Show-Gold, sondern die ruhige Farbe: gruen fuer Guthaben, klare
   Betraege, keine Animation. Geld darf nicht blinken.
   ========================================================================= */

.wallet {
  display: grid;
  gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--good) 12%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--good) 40%, transparent), var(--shadow-1);
}

.wallet-head { display: flex; align-items: flex-start; gap: var(--s3); }
.wallet-label {
  font-size: 10px; font-weight: 900;
  letter-spacing: .28em; text-transform: uppercase; color: var(--muted);
}
.wallet-amount {
  font-size: clamp(30px, 9vw, 42px); font-weight: 900; line-height: 1.05;
  color: var(--good);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px color-mix(in srgb, var(--good) 40%, transparent);
}
.wallet-chip {
  margin-left: auto; flex: none;
  padding: 5px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--sunk); color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}
.wallet-chip.ready { background: color-mix(in srgb, var(--good) 20%, transparent); color: var(--good); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 50%, transparent); }
.wallet-chip.wait  { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.wallet-chip.bad   { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 45%, transparent); }

/* Der Balken bis zur Auszahlungsgrenze. Er beantwortet die einzige Frage,
   die ein Spieler mit 4,20 Euro hat: wie weit ist es noch? */
.wallet-meter {
  height: 8px; border-radius: 5px;
  background: var(--sunk);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6);
  overflow: hidden;
}
.wallet-meter i {
  display: block; height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--good) 70%, var(--accent)), var(--good));
  transition: width .6s var(--ease);
}
.wallet-hint { font-size: 13px; color: var(--muted); }
.wallet-actions { display: grid; gap: var(--s2); }
.wallet-form { display: grid; gap: var(--s3); padding-top: var(--s2); }
.wallet-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }

.wallet-log { display: grid; gap: 2px; }
.wallet-log li {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px 2px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.wallet-log li:first-child { border-top: 0; }
.wallet-log .what { flex: 1; min-width: 0; }
.wallet-log .what b { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-log .what span { font-size: 11.5px; color: var(--muted); }
.wallet-log .amt { font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wallet-log .amt.plus { color: var(--good); }
.wallet-log .amt.minus { color: var(--muted); }


/* =========================================================================
   Anleitung in Schritten (Streamer)
   ========================================================================= */

.steps { display: grid; gap: var(--s2); counter-reset: step; }
.step {
  display: flex; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.step-no {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sunk);
  color: var(--accent);
  font-size: 13px; font-weight: 900;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}
/*
 * Nur die Ueberschrift des Schritts ist ein Block. Vorher galt die Regel
 * fuer jedes <b> im Schritt - eine Hervorhebung mitten im Satz warf den
 * halben Satz auf eine neue Zeile, und das Komma dahinter stand allein.
 */
.step > div > b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.step p b { color: var(--text); font-weight: 800; }
.step p { font-size: 13px; color: var(--muted); line-height: 1.6; }
.step p + p { margin-top: 6px; }
.step em { font-style: normal; color: var(--text); font-weight: 600; }
.step .step-note {
  font-size: 12px;
  padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
/* Im Schritt ist <b> ein Block - in einem Hinweis wuerde das jede
   Hervorhebung auf eine eigene Zeile werfen. Dafuer ist <em> da. */
.step .note-name { color: var(--accent); font-weight: 900; }

.feature { display: flex; gap: var(--s3); align-items: flex-start; }
.feature-ico {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--sunk);
  font-size: 15px;
}
.feature b { display: block; font-size: 14px; }
.feature span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.form-title {
  font-size: 11px; font-weight: 900;
  letter-spacing: .24em; text-transform: uppercase; color: var(--accent);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }


/* =========================================================================
   Video-Werbung (VAST)
   -------------------------------------------------------------------------
   Der Abspieler gehoert zur Seite, nicht zum Werbenetz: Die Datei laeuft in
   einem eigenen <video>, die Bedienung ist unsere. Dadurch bleibt der
   Ueberspringen-Knopf da, wo der Daumen ihn erwartet, statt irgendwo im
   fremden Markup.
   ========================================================================= */

.advideo {
  position: fixed; inset: 0; z-index: 115;
  display: grid; place-items: center; align-content: center;
  gap: var(--s3);
  padding: var(--s4);
  background: color-mix(in srgb, #000 90%, transparent);
  animation: fade .2s var(--ease);
}
.advideo-stage {
  position: relative;
  width: 100%; max-width: 720px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-2);
}
.advideo-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }

.advideo-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .65), transparent);
  pointer-events: none;
}
.advideo-tag {
  padding: 3px 9px; border-radius: 4px;
  background: rgba(0, 0, 0, .55);
  font-size: 10px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: #fff;
}
.advideo-left { font-size: 12px; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #000; }

.advideo-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .18); }
.advideo-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s linear; }

.advideo-actions {
  position: absolute; right: 10px; bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.advideo-mute {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff; font-size: 15px;
}
.advideo-skip {
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  color: #fff;
  font-size: 13px; font-weight: 700;
  animation: curtain .28s var(--bounce);
}
.advideo-skip:hover { background: rgba(0, 0, 0, .82); }

/* Die Klickflaeche liegt ueber dem Bild, aber unter den Bedienelementen -
   sonst schiesst jeder Griff zum Ueberspringen die Werbeseite auf. */
.advideo-click { position: absolute; inset: 0; z-index: 1; }
.advideo-actions, .advideo-top { z-index: 2; }
.advideo-note { font-size: 12px; color: var(--muted); text-align: center; }

@media (max-width: 699px) {
  .advideo { padding: var(--s3); }
  .advideo-stage { aspect-ratio: auto; height: min(62dvh, 420px); }
}


/* =========================================================================
   Streamer-Lobby: Mitspielen, Host-Konsole, Overlay
   -------------------------------------------------------------------------
   Diese drei Seiten haben bisher zwar app.css geladen, aber keine einzige
   Regel gefunden, die auf ihre Klassen passt - sie liefen komplett ohne
   Gestaltung. Das faellt nicht auf, solange man sie nie oeffnet, und sofort,
   sobald ein Streamer sie im Bild hat.
   ========================================================================= */

/* ---- Der Zuschauer-Client ---- */

.page-lobby { padding-bottom: calc(var(--s5) + var(--safe-b)); }

.lobby {
  position: relative; z-index: 1;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: var(--s4) var(--s3) var(--s6);
  display: grid;
  gap: var(--s3);
  align-content: start;
  min-height: 100dvh;
}

.lobby-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 10px var(--s3);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow-1);
}
.lobby-brand {
  font-size: 12px; font-weight: 900;
  letter-spacing: .18em; text-transform: uppercase;
}
.lobby-top .lobby-code {
  font-size: 18px; font-weight: 900;
  letter-spacing: .22em; color: var(--accent);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
}

.lobby-card {
  display: grid; gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  text-align: center;
}
.lobby-card h1, .lobby-card h2 { font-size: clamp(21px, 5.5vw, 27px); text-transform: uppercase; }
.lobby-card label { text-align: left; }
.lobby-lead { color: var(--muted); font-size: 14px; }
.lobby-players { font-size: 14px; color: var(--muted); }
.lobby-players b { color: var(--accent); font-size: 20px; font-weight: 900; }

/* Der Warteraum atmet, damit sichtbar ist, dass die Verbindung steht. */
.wait-pulse {
  width: 54px; height: 54px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
  animation: wait 1.8s ease-in-out infinite;
}
@keyframes wait {
  0%, 100% { transform: scale(.86); opacity: .6; }
  50%      { transform: scale(1.04); opacity: 1; }
}

.lobby-progress {
  font-size: 10.5px; font-weight: 900;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--muted); text-align: center;
}

/* Die Artikelkarte teilen sich Lobby und Host-Konsole. */
.item-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow-2);
}
.item-media {
  position: relative;
  width: 100%;
  height: clamp(160px, 32dvh, 320px);
  background: var(--surface-2);
  overflow: hidden;
}
.item-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.item-info { padding: var(--s3) var(--s4); display: grid; gap: 5px; text-align: center; }
.item-card-lobby .item-media { height: clamp(140px, 26dvh, 260px); }

.guess-zone { display: grid; gap: var(--s2); }
.guess-display {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  padding: var(--s3);
  border-radius: var(--r-md);
  background: var(--sunk);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7);
}
.guess-value {
  font-size: clamp(30px, 9vw, 44px); font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.guess-cur { font-size: 18px; font-weight: 900; color: var(--muted); }

.lobby-reveal {
  display: grid; gap: 4px; justify-items: center;
  padding: var(--s4);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), var(--shadow-2);
}
.reveal-true {
  font-size: clamp(30px, 9vw, 44px); font-weight: 900;
  font-variant-numeric: tabular-nums; color: var(--accent);
  text-shadow: 0 0 26px color-mix(in srgb, var(--accent) 55%, transparent);
}

.lobby-me {
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
  font-size: 14px;
}
.lobby-me b { color: var(--accent); font-weight: 900; font-variant-numeric: tabular-nums; }

.lobby-rank { display: grid; gap: 3px; }
.lobby-rank li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center; gap: var(--s3);
  padding: 9px var(--s3);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 14px;
}
.lobby-rank li .rk { font-weight: 900; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.lobby-rank li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-rank li b { font-variant-numeric: tabular-nums; color: var(--accent); }
.lobby-rank li.me { box-shadow: inset 0 0 0 2px var(--accent); }

/* Solange der Host nicht aufgeloest hat, steht hier ein Schloss statt einer
   Zahl - der Spoiler-Schutz ist auch sichtbar, nicht nur wirksam. */
.lb-locked { display: grid; gap: 4px; justify-items: center; padding: var(--s4); text-align: center; }
.lb-locked-cap { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.lb-locked-val { font-size: 30px; color: var(--muted); }

/* ---- Die Host-Konsole ---- */

.page-host { padding: 0; }

.host {
  position: relative; z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s4) var(--s4) var(--s6);
  display: grid;
  gap: var(--s3);
}

.host-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow-1);
}
.host-label {
  display: block;
  font-size: 10px; font-weight: 900;
  letter-spacing: .28em; text-transform: uppercase; color: var(--muted);
}
.host-code {
  font-size: clamp(28px, 6vw, 40px); font-weight: 900;
  letter-spacing: .2em; color: var(--accent);
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 55%, transparent);
}
.host-links { display: flex; gap: var(--s2); flex-wrap: wrap; }
.host-hint { font-size: 13px; color: var(--muted); }
.host-hint b { color: var(--accent); }

.host-grid { display: grid; gap: var(--s3); }
@media (min-width: 900px) {
  .host-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}

.host-main { display: grid; gap: var(--s3); min-width: 0; }
.host-status {
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
  font-weight: 800; font-size: 14.5px; text-align: center;
}

.host-spoiler {
  display: flex; gap: var(--s3); align-items: center;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.host-spoiler .lock { font-size: 22px; flex: none; }
.host-spoiler p { font-size: 13px; color: var(--muted); line-height: 1.55; }

.host-reveal {
  display: grid; gap: var(--s2); justify-items: center;
  padding: var(--s4);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent);
}
.host-top-guesses { display: grid; gap: 3px; width: 100%; max-width: 420px; }
.host-top-guesses li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s3); align-items: center;
  padding: 7px var(--s3);
  border-radius: var(--r-sm);
  background: var(--sunk);
  font-size: 13.5px;
}
.host-top-guesses li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.host-top-guesses li b { font-variant-numeric: tabular-nums; }
.host-top-guesses li i { font-style: normal; color: var(--good); font-weight: 900; }

.host-controls { display: flex; gap: var(--s2); flex-wrap: wrap; }
.host-controls .btn { flex: 1 1 160px; }

.host-counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.host-counters > div {
  padding: var(--s3);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: center;
}
.host-counters b { display: block; font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--accent); }
.host-counters span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.host-side {
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  min-width: 0;
}
.host-side h3 {
  font-size: 11px; font-weight: 900;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s3);
}
.host-side .lb-list li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: var(--s2); align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--sunk);
  font-size: 13.5px;
}
.host-side .lb-list li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.host-side .lb-list li b { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Bewegung */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

html[data-motion="off"] *, html[data-motion="off"] *::before {
  animation: none !important;
  transition: none !important;
}

/* =========================================================================
   Nachtrag: Platz fuer das Foto
   -------------------------------------------------------------------------
   Auf einem 375x812-Geraet nahm das Bedienfeld 63 % der Hoehe ein und liess
   dem Artikel 141 Pixel. Die folgenden Regeln holen rund 60 Pixel zurueck -
   ohne dass eine Bedienung kleiner wird als der Daumen, der sie trifft.
   ========================================================================= */

/* Platzhalter sind Grafiken mit Text - beschnitten fehlt davon die Haelfte. */
.showcase-media img.is-placeholder { object-fit: contain; }

/* Joker als Kachelreihe statt als Pillen, die umbrechen. */
.joker-ico { font-size: 15px; line-height: 1; }
.joker-txt { white-space: nowrap; }

@media (max-width: 699px) {
  .joker-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 5px;
  }
  .joker {
    flex-direction: column;
    gap: 2px;
    padding: 6px 2px;
    border-radius: 12px;
    font-size: 10.5px;
    font-weight: 800;
    min-width: 0;
  }
  .joker .cost { display: none; }
  .joker-txt { font-size: 10px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* Der Weg zu neuen Jokern steht allein - er ist kein vierter Joker. */
  .joker-earn { grid-column: 1 / -1; flex-direction: row; gap: 7px; padding: 9px; font-size: 12.5px; }

  /* Der Regler wird flacher und die Skala rueckt an ihn heran. */
  #screen-game .bid-panel { padding: 6px var(--s3) 4px; }
  #screen-game .guess-slider { height: 24px; }
  #screen-game .guess-slider::-webkit-slider-runnable-track { height: 10px; }
  #screen-game .guess-slider::-moz-range-track { height: 10px; }
  #screen-game .guess-slider::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -8px; }
  #screen-game .guess-slider::-moz-range-thumb { width: 24px; height: 24px; }
  #screen-game .slider-scale { margin-top: -3px; font-size: 10px; }

  /* Das Tastenfeld bleibt gut treffbar: 40 px sind auf dem Handy die
     Untergrenze, unter der Fehleingaben spuerbar zunehmen. */
  #screen-game .keypad button { padding: 8px 0; font-size: 18px; min-height: 40px; }

  #screen-game .flap-label { letter-spacing: .22em; }
}

/* Wenig Hoehe (z. B. iPhone SE): das Foto bekommt Vorrang vor der Beschreibung. */
@media (max-width: 699px) and (max-height: 700px) {
  #screen-game .showcase-media { min-height: 120px; }
  #screen-game .item-meta { display: none; }
  #screen-game .showcase-info { padding: 6px var(--s3); }
  #screen-game .keypad button { padding: 7px 0; min-height: 38px; }
  #screen-game .btn-lg { padding: 11px 18px; font-size: 15px; }
}

/* Waehrend ein Werbevideo laeuft, scrollt dahinter nichts. */
body.ad-open { overflow: hidden; }

/* =========================================================================
   Nachtrag: Kein Text laeuft aus seiner Spalte
   -------------------------------------------------------------------------
   Raster- und Flex-Kinder bekommen von sich aus `min-width: auto` - sie
   werden also nie schmaler als ihr laengstes Wort. In einer Anleitung mit
   Begriffen wie "Quelle hinzufuegen" reicht das, um die halbe Zeile aus dem
   Bild zu schieben. Sichtbar wird es erst auf schmalen Geraeten, weil dort
   der Rest fehlt statt nur eng zu werden.
   ========================================================================= */

.steps > *,
.step > *,
.feature > *,
.feature > div > *,
.wallet-log li > *,
.wallet-head > *,
.share-head > *,
.share-foot > *,
.lb-podium > *,
.lb-place > *,
.host-top > *,
.host-spoiler > *,
.host-counters > *,
.lobby-top > *,
.lobby-rank li > *,
.host-top-guesses li > *,
.result-item > *,
.reveal-cmp > *,
.mode-row > span,
.ach > * { min-width: 0; }

.step p, .step b, .feature span, .feature b { overflow-wrap: anywhere; }


/*
 * Sehr flache Geraete (iPhone SE der ersten Generation und aehnlich):
 * Der Regler weicht, seine Skala bleibt. Sie sagt, in welcher Groessenordnung
 * der Artikel liegt - das ist die Information; der Regler selbst ist nur eine
 * zweite Eingabe neben dem Tastenfeld.
 */
@media (max-width: 699px) and (max-height: 620px) {
  #screen-game .guess-slider { display: none; }
  #screen-game .bid-panel { padding: 5px var(--s3); }
  #screen-game .slider-scale { margin-top: 0; }
  #screen-game .keypad button { padding: 6px 0; min-height: 34px; font-size: 17px; }
  #screen-game .flap { height: clamp(34px, 10vw, 42px); }
  #screen-game .joker { padding: 5px 2px; }
  #screen-game .joker-ico { font-size: 13px; }
  #screen-game .btn-lg { padding: 10px 16px; font-size: 14.5px; }
  #screen-game .showcase-info { padding: 5px var(--s3); }
}


/* =========================================================================
   Publikum, Kacheln, Leiter, Gold
   -------------------------------------------------------------------------
   Was hier dazukommt, folgt derselben Regel wie der Rest: Die Show macht das
   CSS, das Skript loest sie nur aus. Deshalb sind es vor allem Klassen am
   body und an drei Behaeltern - und keine Zeile, die Werte hin- und
   herrechnet.
   ========================================================================= */

/* ---------------------------------------------------------------- Licht an der Uhr */

/*
 * Die letzten drei Sekunden.
 *
 * Die Buehne steht ohnehin da und tut bisher nichts, waehrend unten die
 * Sekunden weglaufen. Jetzt schwenken die Kegel zur Mitte und werden rot -
 * dieselbe Bewegung, die ein Regisseur ansagen wuerde.
 *
 * Zwei Kleinigkeiten machen das moeglich: `--c` steht als Inline-Stil am
 * Element, also braucht der Wechsel !important; und `--xn` ist dieselbe
 * Position wie `--x`, nur ohne Einheit - damit laesst sich der Winkel zur
 * Mitte ausrechnen, ohne fuer jeden Scheinwerfer eine eigene Regel zu
 * schreiben.
 */
body.clock-low .beam {
  --c: var(--bad) !important;
  animation: none;
  transform: rotate(calc((50 - var(--xn, 50)) * 0.34deg));
  opacity: .62;
  transition: transform .55s var(--ease), opacity .55s ease;
}

body.clock-low .lamp::after {
  background: var(--bad);
  box-shadow: 0 0 20px 7px color-mix(in srgb, var(--bad) 70%, transparent);
  animation: lamp-alarm .52s steps(2, end) infinite;
}
@keyframes lamp-alarm { 50% { opacity: .2; } }

body.clock-low .stage-haze { opacity: .8; }

/* Der rote Saum am Boden - er kommt aus dem Licht, nicht aus einem Rahmen. */
.stage::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 75% at 50% 100%,
    color-mix(in srgb, var(--bad) 32%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity .4s ease;
}
body.clock-low .stage::after { opacity: 1; animation: alarm 1s ease-in-out infinite; }
@keyframes alarm { 50% { opacity: .4; } }

/* ---------------------------------------------------------------- Goldregen */

/*
 * Der Volltreffer.
 *
 * Erst faellt das Studiolicht aus, dann bleibt ein einzelner Spot, dann
 * kommt das Gold von oben (das zeichnet das Skript auf die Konfetti-Flaeche).
 * Selten genug, um etwas zu bedeuten.
 */
.goldstage {
  position: fixed; inset: 0; z-index: 94;
  pointer-events: none;
  overflow: hidden;
  background: color-mix(in srgb, #000 74%, transparent);
  animation: fade .25s ease;
}
.goldspot {
  position: absolute; left: 50%; top: -6%;
  width: 62vw; height: 130vh; margin-left: -31vw;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 62%, transparent) 0%,
    color-mix(in srgb, var(--accent) 18%, transparent) 42%,
    transparent 78%);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  filter: blur(20px);
}
body.is-gold .stage-beams { opacity: .12; transition: opacity .3s ease; }

/* ---------------------------------------------------------------- Blindpreis */

/*
 * Die Kacheln liegen ueber dem Foto und fallen im festen Takt weg. Sie
 * verschwinden einzeln und leicht gedreht - alle gleichzeitig auszublenden
 * saehe aus wie ein Ladefehler.
 */
.tiles {
  position: absolute; inset: 0; z-index: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), 1fr);
  gap: 2px; padding: 2px;
}
.tiles i {
  border-radius: 3px;
  background: linear-gradient(155deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  transition: opacity .35s ease, transform .35s var(--ease);
}
.tiles i.is-gone { opacity: 0; transform: scale(.55) rotate(7deg); }

.blind-bonus {
  justify-self: center;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 10px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
}
.blind-bonus b { font-size: 15px; letter-spacing: 0; color: var(--accent); }
.blind-bonus.is-gone { opacity: .45; }
.blind-bonus.is-gone b { color: var(--muted); }

/* ---------------------------------------------------------------- Preis-Leiter */

.ladder-wrap {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--s2);
  min-height: 0;
}
.screen-game .ladder-wrap { grid-row: 2; }

.ladder-hint {
  text-align: center;
  font-size: 10px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted);
}

.ladder {
  display: grid; gap: 6px;
  /* Mittig: auf einem hohen Fenster stuende die Leiter sonst oben und
     darunter waere eine halbe Buehne leer. */
  align-content: center;
  min-height: 0;
  overflow-y: auto;
}

/* Eine Sprosse: Nummer, Bild, Titel, zwei Pfeile. Mehr braucht die
   Entscheidung nicht - und weniger waere auf dem Handy nicht treffbar. */
.rung {
  display: grid;
  grid-template-columns: 24px 46px minmax(0, 1fr) auto;
  gap: var(--s2);
  align-items: center;
  padding: 6px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
}
.rung > * { min-width: 0; }
.ladder .rung:first-child {
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--glow);
}
.rung-no { text-align: center; font-size: 15px; font-weight: 900; color: var(--accent); }
.rung-img {
  width: 46px; height: 46px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--sunk);
}
.rung-img.is-placeholder,
.lrung-img.is-placeholder { object-fit: contain; }
.rung-text { display: grid; gap: 1px; }
.rung-text b {
  font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rung-text span { font-size: 11.5px; color: var(--muted); }
.rung-moves { display: grid; gap: 3px; }
.rung-btn {
  width: 38px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--accent);
  font-size: 10px;
}
.rung-btn:active { transform: translateY(1px); }
.rung-btn[disabled] { opacity: .28; pointer-events: none; }

/* Die Aufloesung der Leiter: von teuer nach guenstig, Zeile fuer Zeile. */
.ladder-reveal { display: grid; gap: 6px; width: 100%; }
.lrung {
  display: grid;
  grid-template-columns: 22px 38px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: var(--sunk);
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .3s ease, transform .3s var(--ease);
}
.lrung > * { min-width: 0; }
.lrung.is-in { opacity: 1; transform: none; }
.lrung.is-ok  { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 55%, transparent); }
.lrung.is-bad { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 42%, transparent); }
.lrank { text-align: center; font-weight: 900; color: var(--accent); }
.lrung-img { width: 38px; height: 38px; object-fit: cover; border-radius: 6px; background: var(--surface-2); }
.lrung-text { display: grid; gap: 1px; }
.lrung-text b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrung-text span { font-size: 11px; color: var(--muted); }
.lrung-pts { font-size: 13px; font-weight: 900; color: var(--good); font-variant-numeric: tabular-nums; }
.lrung-pts.zero { color: var(--muted); }

/* Klappziffern im Kleinformat - dieselbe Mechanik, nur fuer eine Zeile. */
.flap-row.mini { gap: 2px; }
.flap-row.mini .flap {
  min-width: 15px; height: 24px;
  font-size: 14px; border-radius: 3px;
}
.flap-row.mini .flap.sep { font-size: 12px; }
.flap-row.mini .flap::after { display: none; }

/* ---------------------------------------------------------------- Publikum */

/*
 * Die Verteilung der fremden Tipps.
 *
 * Der mittlere Balken ist der echte Preis, links davon lagen die zu
 * niedrigen Tipps, rechts die zu hohen. Der eigene Balken ist eingefaerbt
 * und traegt ein "du" - ohne das waere die Reihe eine huebsche Statistik
 * ueber jemand anderen.
 */
.audience {
  width: 100%;
  display: grid; gap: 7px;
  padding: var(--s3);
  border-radius: var(--r-md);
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--line);
}
.audience-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2);
  font-size: 10px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.audience-head b { color: var(--accent); letter-spacing: 0; }
.audience-bars { display: flex; align-items: flex-end; gap: 3px; height: 56px; }
.acol {
  position: relative;
  flex: 1; min-width: 0;
  display: flex; align-items: flex-end;
  height: 100%;
}
.acol i {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--text) 20%, transparent);
  transition: height .45s var(--ease);
}
/*
 * Die Mitte bleibt sichtbar, auch wenn sie leer ist.
 *
 * Hat niemand den Preis getroffen, waere der mittlere Balken ein Stummel -
 * und damit genau die Information weg, an der sich alles andere ausrichtet.
 * Die gestrichelte Gasse markiert die Stelle unabhaengig von der Hoehe.
 */
.acol.is-hit::before {
  content: "";
  position: absolute; inset: 0;
  border-left: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-right: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.acol.is-hit i { background: var(--gold); position: relative; }
.acol.is-own i {
  background: var(--accent-2);
  box-shadow: 0 0 14px -2px var(--accent-2);
}
.acol.is-own.is-hit i { background: var(--gold); box-shadow: 0 0 16px -2px var(--accent); }
.acol u {
  position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-2);
}
.audience-axis {
  display: flex; justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid var(--line);
  font-size: 10px; color: var(--muted);
}
.audience-axis span:nth-child(2) { color: var(--accent); font-weight: 700; }
.audience-line { font-size: 12.5px; color: var(--muted); text-align: center; }

/* ---------------------------------------------------------------- Schlag mich */

.challenge {
  display: grid; gap: 6px;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  animation: rise .3s var(--ease);
}
.challenge-title {
  font-size: 10px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
}
.challenge-line { font-size: 13px; color: var(--muted); line-height: 1.5; }
.challenge-link { display: flex; gap: var(--s2); align-items: center; }
.challenge-link > * { min-width: 0; }
.challenge-link code {
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 7px 9px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, #000 32%, transparent);
  font-size: 12px;
}

/* ---------------------------------------------------------------- Host-Konsole */

.host-bet {
  display: grid; gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.host-bet-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2);
  font-size: 13px;
}
.host-bet-head > * { min-width: 0; }
.host-bet-head span {
  font-size: 10px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.host-bet-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); }
.host-bet-note { font-size: 12px; color: var(--muted); line-height: 1.5; }
.host-bet-note code { font-size: 11.5px; color: var(--accent); }

.host-duel {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  justify-content: center; align-items: center;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  background: var(--sunk);
  font-size: 13px; color: var(--muted);
}
.host-duel b { color: var(--text); }
.host-duel .verdict { font-weight: 900; }
.host-duel.is-host  .verdict { color: var(--accent); }
.host-duel.is-crowd .verdict { color: var(--good); }
.host-duel.is-tie   .verdict { color: var(--muted); }

.host-spread {
  display: grid; gap: 6px;
  padding: var(--s3);
  border-radius: var(--r-md);
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--line);
}
.host-spread-head {
  display: flex; justify-content: space-between; gap: var(--s2);
  font-size: 10px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.host-spread-bars { display: flex; align-items: flex-end; gap: 3px; height: 48px; }
.host-spread-bars i {
  flex: 1; min-width: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
  transition: height .35s var(--ease);
}
.host-spread-axis {
  display: flex; justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid var(--line);
  font-size: 10px; color: var(--muted);
}

.host-export { margin-top: var(--s4); display: grid; gap: 6px; }
.host-bot { margin-top: var(--s4); }

/* ---------------------------------------------------------------- Kanalseite */

.kanal-hinweis {
  display: grid; gap: var(--s2);
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13px; color: var(--muted); line-height: 1.6;
}
.kanal-hinweis b { color: var(--text); }
.lb-row .sub small { display: block; }