/* style.css – Layout und allgemeines Spielfeld-Styling */

/* ===========================================================================
   Custom Properties – Mobile-First base (320 px+)
   =========================================================================== */
:root {
  /* Surface & Text */
  --bg: #2d6a35;
  --text-on-felt: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.65);

  /* Buttons */
  --btn-bg: rgba(0, 0, 0, 0.28);
  --btn-hover: rgba(0, 0, 0, 0.44);
  --btn-border: rgba(255, 255, 255, 0.22);
  --btn-text: #ffffff;

  /* UI elements */
  --focus-ring: #fbbf24;
  --stat-bg: rgba(0, 0, 0, 0.22);
  --slot-border: rgba(255, 255, 255, 0.32);
  --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.32);

  /* Card colors (theme-independent) */
  --red: #c0392b;
  --black: #111111;

  /* Dialog */
  --dialog-bg: #ffffff;
  --dialog-text: #111827;
  --dialog-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  /* Glas-Panel (transparenter „vorderster Container") */
  --dialog-glass: rgba(255, 255, 255, 0.48);
  --dialog-glass-border: rgba(0, 0, 0, 0.12);
  --dialog-chip: rgba(0, 0, 0, 0.06);
  --dialog-chip-border: rgba(0, 0, 0, 0.14);

  /* Layout – mobile-first
     --card-w fills 7 equal 1fr columns; capped at 92 px for stacking maths. */
  --pad: clamp(6px, 2vw, 20px);
  --col-gap: clamp(3px, 0.8vw, 10px);
  --card-w: clamp(40px, 9.5vw, 200px);
  --stack-offset: clamp(16px, 2.8vw, 28px);
  --stack-offset-down: clamp(11px, 1.9vw, 18px);
  --radius: 6px;
}

/* ===========================================================================
   Dark Mode – OS preference
   =========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f381a;   /* exakt das Grün der Menügrafik – sonst zeichnet sich
                        deren Kante gegen den Hintergrund ab */
    --btn-bg: rgba(255, 255, 255, 0.12);
    --btn-hover: rgba(255, 255, 255, 0.22);
    --btn-border: rgba(255, 255, 255, 0.18);
    --stat-bg: rgba(0, 0, 0, 0.38);
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.56);
    --dialog-bg: #1e293b;
    --dialog-text: #e2e8f0;
    --dialog-glass: rgba(18, 24, 40, 0.4);
    --dialog-glass-border: rgba(255, 255, 255, 0.12);
    --dialog-chip: rgba(255, 255, 255, 0.06);
    --dialog-chip-border: rgba(255, 255, 255, 0.14);
  }
}

/* ===========================================================================
   Dark Mode – manual toggle via data-theme
   =========================================================================== */
[data-theme="dark"] {
  --bg: #0f381a;   /* siehe oben: identisch mit dem Grün der Menügrafik */
  --btn-bg: rgba(255, 255, 255, 0.12);
  --btn-hover: rgba(255, 255, 255, 0.22);
  --btn-border: rgba(255, 255, 255, 0.18);
  --stat-bg: rgba(0, 0, 0, 0.38);
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.56);
  --dialog-bg: #1e293b;
  --dialog-text: #e2e8f0;
  --dialog-glass: rgba(18, 24, 40, 0.4);
  --dialog-glass-border: rgba(255, 255, 255, 0.12);
  --dialog-chip: rgba(255, 255, 255, 0.06);
  --dialog-chip-border: rgba(255, 255, 255, 0.14);
}

[data-theme="light"] {
  --bg: #2d6a35;
  --btn-bg: rgba(0, 0, 0, 0.28);
  --btn-hover: rgba(0, 0, 0, 0.44);
  --btn-border: rgba(255, 255, 255, 0.22);
  --stat-bg: rgba(0, 0, 0, 0.22);
  --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.32);
  --dialog-bg: #ffffff;
  --dialog-text: #111827;
}

/* ===========================================================================
   Base
   =========================================================================== */
html {
  height: 100%;
}

body {
  height: 100dvh;
  overflow: hidden;
  background-color: var(--bg);
  background-image: var(--bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-on-felt);
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  padding: max(var(--pad), env(safe-area-inset-top, 0px))
    max(var(--pad), env(safe-area-inset-right, 0px))
    max(var(--pad), env(safe-area-inset-bottom, 0px))
    max(var(--pad), env(safe-area-inset-left, 0px));
  gap: clamp(5px, 1.2vw, 14px);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.2s ease,
    background-image 0.4s ease;
  overscroll-behavior: none;
}

/* Global focus indicator (WCAG 2.1 AA) */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ===========================================================================
   Header
   =========================================================================== */
/* ===========================================================================
   HUD – EIN zusammenhängender Balken: links Aktionen · Mitte Statistik ·
   rechts Shop/Coins. Alles in einer Zeile, kein Umbruch.
   =========================================================================== */
header.hud {
  /* Das gezoomte Brett setzt `transform` und bildet damit einen eigenen
     Stapelkontext — es legt sich sonst über die Leiste, und deren Knöpfe sind
     nicht mehr anklickbar. Zahnrad und Münzen blieben nur deshalb oben, weil
     sie positioniert sind. Mit eigener Ebene gilt das für die ganze Leiste. */
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 0;
  background: transparent; /* äußerer Container transparent – nur die Chips sind sichtbar */
  border: none;
  box-shadow: none;
  overflow-x: auto; /* Sicherheitsnetz bei sehr schmalen Fenstern */
  overflow-y: hidden;
  scrollbar-width: none;
}
header.hud::-webkit-scrollbar {
  display: none;
}

/* Rollhinweis: Solange rechts (bzw. links) noch Knoepfe liegen, liegt dort ein
   weicher Verlauf. Ohne ihn sieht die Leiste aus, als waere sie zu Ende — auf
   dem Handy sind so bis zu sieben Knoepfe unauffindbar. Die Verlaeufe haengen
   am Rand des Fensters, nicht am rollenden Inhalt, deshalb `position: fixed`. */
.hud-rollhinweis {
  position: fixed;
  top: 0;
  width: 34px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 11;   /* über der Leiste (10), unter Dialogen */
}
/* Halbdurchsichtiges Schwarz statt `--bg`: Hinter der Leiste liegt das Brett
   mit Filz oder Sternenbild, nicht die Seitenfarbe — ein Verlauf auf `--bg`
   war dort praktisch unsichtbar. */
.hud-rollhinweis--links {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.55), transparent);
}
.hud-rollhinweis--rechts {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.55), transparent);
}
header.hud.rollt-links ~ .hud-rollhinweis--links,
header.hud.rollt-rechts ~ .hud-rollhinweis--rechts {
  opacity: 0.85;
}

/* Muenzen, Lupe, Hilfe und Einstellungen bleiben am rechten Rand stehen,
   waehrend der Rest der Leiste rollt. Sonst laegen ausgerechnet die Zugaenge zu
   Ton, Sprache, Zoom und Anleitung im weggerollten Teil — auf dem Handy sind
   das bis zu sieben unauffindbare Knoepfe. Der Schatten links trennt die
   Gruppe sichtbar von dem, was darunter durchrollt. */
.hud-fest {
  position: sticky;
  right: 0;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline-start: 6px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: -14px 0 16px -10px rgba(0, 0, 0, 0.65);
}

/* ---------------------------------------------------------------------------
   Feste Gruppe bleibt bedienbar, waehrend Kisten, Sammlung, Aufgaben oder
   Bestenliste offen sind.

   Das Hindernis: `header.hud` setzt `z-index: 10` und macht damit einen
   eigenen Stapelkontext auf (noetig, sonst legt sich das gezoomte Brett
   darueber). Ein Kind kann aus diesem Kontext nicht ausbrechen — deshalb lag
   auch `.coins-display` mit `z-index: 8995` still unter der Abdunklung (8990).
   Ihr hoher Wert war seit der Zoom-Ebene wirkungslos.

   Die Loesung hebt deshalb die **ganze Leiste** ueber die Abdunklung und legt
   den Schleier fuer den Rest von Hand nach:

     · `filter` bildet nach, was die Abdunklung tut — `blur(4px)` ist ihr
       eigener Wert, `brightness(0.38)` entspricht rechnerisch ihren
       `rgba(0, 0, 0, 0.62)` (1 − 0,62 = 0,38).
     · Die Luecken zwischen den Chips brauchen nichts: Dort liegt das Brett,
       und das deckt die echte Abdunklung weiterhin ab.
     · `pointer-events: none` sorgt dafuer, dass abgedunkelt auch wirklich
       unbedienbar heisst. Ohne das waere „Hauptmenue" waehrend eines offenen
       Dialogs klickbar — das Menue (z-index 500) erschiene dann unsichtbar
       hinter dem Dialog.

   Der Pfeil des Hochformats zaehlt zur festen Gruppe: Er bedient sie, ein
   abgedunkelter Pfeil neben einer hellen Gruppe saehe kaputt aus.

   Welche Dialoge das ausloesen, steht in js/dialog.js → HUD_FREI_DIALOGE.
   Leiter: dialog 9000 · Leiste hier 8995 · Abdunklung 8990.
   --------------------------------------------------------------------------- */
body.hud-fest-frei header.hud {
  z-index: 8995;
}

/* Flaches Querformat: Dialog unter die Leiste, statt darueber.

   Gemessen bei 914 x 412: Ein zentrierter Dialog mit `max-height: 88dvh` ist
   dort 362 px hoch und laesst oben 25 px frei — die Leiste braucht mehr. Sie
   verschwand deshalb unter dem Dialog (`dialog-daily` ganz, `dialog-rules`
   fast, `dialog-lang` einen Knopf), obwohl ihre Knoepfe laut E-48 gerade dort
   bedienbar bleiben sollen. Am z-index liegt es nicht: Der Dialog MUSS oben
   liegen, sonst verdeckte die Leiste seinen Inhalt.

   Also nicht stapeln, sondern Platz schaffen: `margin-top` setzt den Dialog
   unter die gemessene Unterkante der Leiste, `max-height` nimmt ihm genau die
   Hoehe wieder weg, die er dadurch nach unten gewinnen wuerde.

   Nur bei niedrigen Fenstern — im Hochformat (914 px hoch) und auf dem Desktop
   greift die Regel nicht, dort war nie etwas verdeckt.
   `#dialog-reward` ist hier ausgenommen, weil er seine eigene Regel hat: Er ist
   randloses Vollbild und wird bei `#dialog-reward` unter die Leiste gesetzt —
   in JEDER Fensterhoehe, nicht erst im flachen Querformat. */
@media (max-height: 560px) {
  body.hud-fest-frei dialog[open]:not(#dialog-reward) {
    margin-top: calc(var(--hud-unterkante, 56px) + 8px);
    max-height: calc(100dvh - var(--hud-unterkante, 56px) - 16px);
  }
}
body.hud-fest-frei header.hud > *:not(.hud-fest):not(#btn-hud-toggle) {
  filter: blur(4px) brightness(0.38);
  pointer-events: none;
}
/* Die Rollhinweise sind Geschwister der Leiste und blieben mit z-index 11
   unter der Abdunklung — ein halber Verlauf neben der hellen Gruppe. Waehrend
   ein Dialog offen ist, rollt ohnehin niemand die Leiste. */
body.hud-fest-frei header.hud.rollt-links ~ .hud-rollhinweis--links,
body.hud-fest-frei header.hud.rollt-rechts ~ .hud-rollhinweis--rechts {
  opacity: 0;
}

/* ---------------------------------------------------------------------------
   Hochformat: die feste Gruppe rollt mit, der Pfeil vertritt sie.

   Querformat bleibt, wie es war — .hud-fest klebt rechts, damit Muenzen, Zoom,
   Einstellungen und Hilfe nicht wegrollen.

   Im Hochformat kostet genau dieses Kleben zu viel: .hud-fest belegt auf einem
   412px breiten Handy rund 342px. Alles darunter — Neues Spiel, Rueckgaengig,
   die Statistik, Kisten, Sammlung, Aufgaben, Bestenliste — ist dadurch nur nach
   dem Wischen erreichbar, und selbst dann verdeckt. Deshalb wird die Gruppe
   hier zu gewoehnlichem Leisteninhalt und rollt ans rechte Ende mit.

   An ihre Stelle tritt #btn-hud-toggle: ein einzelner Pfeil, der klebt. Er
   meldet „rechts geht es weiter" und rollt auf Klick dorthin. Ist die Leiste am
   Ende, verdeckt er nichts mehr und wird ausgeblendet (Klasse `hud--am-ende`,
   gesetzt von main.js).

   Damit am Ende kein leerer Knopfplatz stehen bleibt, kostet der Pfeil gar
   keine Rollbreite: Ein negativer Rand hebt seine eigene Breite wieder auf
   (siehe unten). Die Leiste ist dadurch genau so lang, als gaebe es ihn nicht,
   und endet hinter der Hilfe. Sein Platz faellt auf ebenjene Hilfe — die er
   zudeckt, solange er klebt, und die zum Vorschein kommt, sobald er am Ende
   verschwindet.

   Das loest zugleich ein Flackern: Wuerde er Breite kosten, schruempfe die
   Rollweite genau in dem Moment, in dem `hud--am-ende` gesetzt wird. Die Leiste
   waere dann nicht mehr am Ende, die Klasse fiele wieder weg, und das Ganze
   kippte an der Grenze hin und her.
   --------------------------------------------------------------------------- */
#btn-hud-toggle {
  display: none;
}

@media (orientation: portrait) {
  /* Die Gruppe rollt mit. Trennschatten und Weichzeichner gehoerten zum Kleben
     — es rollt nichts mehr unter ihr durch, das sie abgrenzen muesste. */
  .hud-fest {
    position: static;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #btn-hud-toggle {
    display: inline-flex;
    position: sticky;
    right: 0;
    z-index: 2;
    /* Breite hier festgeschrieben, damit der negative Rand darunter aufgeht:
       .hud-btn--icon misst je nach Fensterbreite 42px oder 44px. */
    width: 44px;
    /* 44px eigene Breite + 8px Abstand der Leiste = 52px, die er sich selbst
       wieder abzieht. Netto belegt er nichts. */
    margin-inline-start: -52px;
    /* Solange er klebt, liegt er ueber dem, was darunter durchrollt — deshalb
       derselbe Weichzeichner und Trennschatten, die vorher die Gruppe trug. */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow:
      -14px 0 16px -10px rgba(0, 0, 0, 0.65),
      0 2px 8px rgba(0, 0, 0, 0.28);
    transition:
      opacity 0.18s ease,
      background 0.14s ease,
      transform 0.1s ease;
  }

  header.hud.hud--am-ende #btn-hud-toggle {
    opacity: 0;
    pointer-events: none;
  }
}

.hud-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  flex: 0 0 auto;
}

.hud-center {
  flex: 1 0 auto; /* wächst zum Zentrieren, schrumpft aber nie (kein Gequetsche) */
  display: flex;
  justify-content: center;
}

/* Nichts im Balken darf schrumpfen – bei Platzmangel wird gescrollt */
.hud-btn,
.stats,
.stat,
.coins-display {
  flex: 0 0 auto;
}

/* Buttons innerhalb des Balkens – dezent, flach */
.hud-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  min-height: 42px;
  border-radius: 10px;
  background: rgba(14, 19, 34, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  color: #e8edf5;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.14s ease,
    transform 0.1s ease;
}
.hud-btn:hover {
  background: rgba(38, 46, 68, 0.8);
}
.hud-btn:active {
  transform: translateY(1px);
}
/* background/display würde sonst das [hidden]-Attribut überschreiben */
.hud-btn[hidden] {
  display: none;
}

.hud-btn--icon {
  padding: 0;
  width: 42px;
  justify-content: center;
  font-size: 1.15rem;
}

/* Auto-Complete hervorheben (Akzent), sobald sichtbar */
#btn-autocomplete:not([hidden]) {
  background: #f5b301;
  border-color: #f5b301;
  color: #1a1a1a;
}
#btn-autocomplete:not([hidden]):hover {
  background: #ffc627;
}

/* Sound-Button im HUD flach & eckig (statt rund wie im Menü) */
.hud .sound-toggle-btn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(14, 19, 34, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  font-size: 1.15rem;
}
.hud .sound-toggle-btn:hover {
  background: rgba(38, 46, 68, 0.8);
}

.btn-ico {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-ico--fill {
  fill: currentColor;
  stroke: none;
}

/* ---------------------------------------------------------------------------
   Themenschalter — genau ein Symbol ist sichtbar, und es zeigt das ZIEL des
   Klicks: im hellen Thema der Mond, im dunklen die Sonne.
   Dreistufig wie überall in dieser Datei, damit das Symbol auch stimmt, bevor
   `data-theme` gesetzt ist: Standard hell · Systemeinstellung · Schalter.
   --------------------------------------------------------------------------- */
.ico-sun  { display: none; }
.ico-moon { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ico-sun  { display: block; }
  :root:not([data-theme="light"]) .ico-moon { display: none; }
}

[data-theme="dark"] .ico-sun   { display: block; }
[data-theme="dark"] .ico-moon  { display: none; }
[data-theme="light"] .ico-sun  { display: none; }
[data-theme="light"] .ico-moon { display: block; }

/* ===========================================================================
   Buttons
   =========================================================================== */
button {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius);
  padding: 5px 14px;
  cursor: pointer;
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  font-weight: 500;
  transition: background 0.14s ease;
  white-space: nowrap;
  min-height: 44px;
  touch-action: manipulation;
}

button:hover {
  background: var(--btn-hover);
}

/* ===========================================================================
   Statistik – drei kleine Pills (Zeit · Züge · Punkte) im HUD
   =========================================================================== */
.stats {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 15px;
  min-width: 58px;
  border-radius: 10px;
  background: rgba(14, 19, 34, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.stat-value {
  display: block;
  font-size: clamp(0.9rem, 1.8vw, 1.15rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  line-height: 1.15;
  color: #f2f5fa;
}

.stat-label {
  display: block;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ===========================================================================
   Board
   =========================================================================== */
.board {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--col-gap);
  /* Der Zoom setzt hier `transform`. Der Ursprung muss oben links liegen,
     damit Maßstab und Verschiebung unabhängig voneinander rechenbar bleiben. */
  transform-origin: 0 0;
  /* Zwei-Finger-Gesten sollen bei uns ankommen statt beim Browser zu landen.
     Auf den Karten steht das schon (cards.css), hier gilt es für den Filz
     dazwischen — sonst startet die Geste nur auf Karten. */
  touch-action: none;
}

/* ===========================================================================
   Zoom
   =========================================================================== */
.zoom-reset {
  flex: 0 0 auto;
  min-width: 46px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--btn-border);
  background: rgba(255, 255, 255, 0.10);
  color: var(--text-on-felt);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  touch-action: manipulation;
}
.zoom-reset:hover {
  background: rgba(255, 255, 255, 0.18);
}
.zoom-reset-text {
  font-variant-numeric: tabular-nums;
}

/* 7-column grid shared by top-row and tableau */
.top-row,
.tableau {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--col-gap);
}

.spacer {
  position: relative;
}

#spacer-gif {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 140%;
  object-fit: contain;
  pointer-events: none;
}

/* ===========================================================================
   Card Slot (empty placeholder)
   =========================================================================== */
.card-slot {
  aspect-ratio: 5 / 7;
  border: 2px dashed var(--slot-border);
  border-radius: var(--radius);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}

.card-slot[role="button"] {
  cursor: pointer;
  touch-action: manipulation;
}

/* Highlight drop target during drag – card-slot */
.card-slot.drop-target {
  border-color: var(--focus-ring);
  border-style: solid;
}

/* Highlight drop target – tableau column */
.tableau-col.drop-target {
  outline: 2px dashed var(--focus-ring);
  outline-offset: -2px;
  border-radius: var(--radius);
}

.suit-placeholder {
  font-size: clamp(1rem, 2.5vw, 1.8rem);
  color: var(--slot-border);
  pointer-events: none;
}

/* ===========================================================================
   Tableau Column
   =========================================================================== */
.tableau-col {
  position: relative;
  min-height: calc(var(--card-w) * 7 / 5 + var(--stack-offset-down) * 6);
}

/* ===========================================================================
   Footer
   =========================================================================== */
footer {
  text-align: center;
  padding-top: 2px;
}

footer a {
  color: var(--text-muted);
  font-size: 0.78rem;
  text-underline-offset: 3px;
}

footer a:hover {
  color: var(--text-on-felt);
}

/* ===========================================================================
   Dialog
   =========================================================================== */
dialog {
  position: fixed;
  inset: 0;
  margin: auto; /* Zentrierung wiederherstellen (reset.css setzt * { margin:0 }) */
  background: var(--dialog-bg);
  color: var(--dialog-text);
  border: none;
  border-radius: 12px;
  padding: clamp(20px, 4vw, 32px);
  max-width: min(540px, 92vw);
  /* Ohne Hoehendeckel ragten die Dialoge im Querformat (412px Hoehe) oben und
     unten aus dem Bild — Ueberschrift und Schliessen-Knopf waren nicht mehr zu
     sehen. `#dialog-reward` hebt beides bewusst wieder auf (Vollbild). */
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--dialog-shadow);
}

/* Reward-Dialog: randloses Vollbild – Inhalt schwebt über der Abdunklung.
   WICHTIG: nur auf [open] anwenden, sonst überschreibt der ID-Selektor
   die UA-Regel dialog:not([open]){display:none} und der Dialog fängt
   permanent unsichtbar alle Klicks ab. */
#dialog-reward[open] {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
}
/* Die feste Leistengruppe bleibt auch ueber diesem Dialog bedienbar
   (E-48, erweitert am 26.08.2026 — siehe js/dialog.js -> HUD_FREI_DIALOGE).

   Bei jedem anderen Dialog genuegt dafuer der z-index: Die Gruppe steigt auf
   8995 und liegt ueber der Abdunklung (8990), waehrend der Dialog bei 9000+
   danebenliegt und sie nicht erreicht. Dieser Dialog ist aber randloses
   Vollbild und deckt mit `inset: 0` die gesamte Flaeche ab — auch die Leiste,
   und mit ihr faengt er deren Klicks ab.

   Deshalb wird er nicht ueber, sondern UNTER die Leiste gesetzt. Vom `inset: 0`
   oben wird nur `top` aufgehoben; die Hoehe nimmt genau das wieder weg, was
   oben dazukommt, sonst ragte der Dialog unten aus dem Bild. Der Inhalt bleibt
   zentriert — jetzt in der Flaeche unter der Leiste.

   `--hud-unterkante` misst js/main.js an der Leiste selbst (nicht geschaetzt);
   der Rueckfallwert gilt nur, falls noch nicht gemessen wurde. */
body.hud-fest-frei #dialog-reward[open] {
  top: var(--hud-unterkante, 56px);
  height: calc(100dvh - var(--hud-unterkante, 56px));
}

#dialog-reward::backdrop {
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(3px);
}
#dialog-reward-title {
  font-size: 1.5rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  margin: 0;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}

/* ---------------------------------------------------------------------------
   SCHICHTUNG — verbindlich, siehe js/dialog.js

     1. #imaContainer / #imaContainer_new / #sdk__advertisement   Werbung
     2. dialog[open]                                              9000
     2b. .reward-itemlist.is-open                                  9100
     3. .coins-display · #btn-sound-game · #btn-lang-game
        · #btn-theme                                              8995
     4. .dlg-backdrop                                             8990
     5. Spieloberfläche                                           ≤ 9500 *

   * Der Lautstärke-Popover liegt bei 9500 und damit über den Dialogen; er
     wird nie gleichzeitig mit einem Dialog geöffnet.

   Die Dialoge werden mit show() geöffnet, nicht mit showModal(). Ein modaler
   Dialog läge in der Top Layer, wo kein z-index gilt — dann käme die Werbung
   nie darüber, egal wie hoch die Zahl.
   --------------------------------------------------------------------------- */

#imaContainer,
#imaContainer_new,
#sdk__advertisement {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2147483000 !important;
}

dialog[open] {
  z-index: 9000;
}

/* Ersatz für ::backdrop, das es nur bei modalen Dialogen gibt. Fängt zugleich
   die Klicks ab, die sonst auf dem Spielbrett landen würden. Die Werte je
   Dialog entsprechen den ::backdrop-Regeln darüber. */
.dlg-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8990;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.dlg-backdrop[data-for="dialog-reward"] {
  background: rgba(0, 0, 0, 0.74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.dlg-backdrop[data-for="dialog-highscores"],
.dlg-backdrop[data-for="dialog-chests"],
.dlg-backdrop[data-for="dialog-collection"],
.dlg-backdrop[data-for="dialog-quests"] {
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.dlg-backdrop[data-for="dialog-daily"] {
  background: rgba(0, 0, 0, 0.6);
}

/* Einheitliches Glas-Design – transparenter „vorderster Container" */
#dialog-rules,
#dialog-highscores,
#dialog-chests,
#dialog-collection {
  background: var(--dialog-glass);
  border: 1px solid var(--dialog-glass-border);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
/* Etwas kräftigere Abdunklung dahinter, damit das Glas gut lesbar bleibt */
#dialog-highscores::backdrop,
#dialog-chests::backdrop,
#dialog-collection::backdrop {
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
}

/* Schmale Fenster: Zwei Gitter waren breiter als der Dialog und liefen seitlich
   heraus — die Sieben-Tage-Reihe der Belohnung (7 Spalten zu je ~103px) und die
   Kistenkarten samt ihren Knoepfen. `1fr` schrumpft nicht unter den Inhalt,
   deshalb hier weniger Spalten, kleinere Polster und `min-width: 0`. */
@media (max-width: 560px) {
  .daily-days {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px;
  }
  .daily-day {
    min-width: 0;
    padding: 12px 4px;
    min-height: 104px;
    gap: 7px;
    border-radius: 12px;
  }
  .chest-dialog-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .chest-card {
    min-width: 0;
  }
  .reward-mini {
    padding: 8px 10px;
    font-size: 0.78rem;
  }
}

/* Flache Fenster (Handy quer): Die Dialoge sind fuer aufrechte Bildschirme
   entworfen — 40px Polster und 88dvh lassen dort kaum Inhalt uebrig. Hier wird
   das Polster kleiner und die erlaubte Hoehe groesser. */
@media (max-height: 560px) {
  dialog {
    max-height: 94dvh;
    padding: clamp(12px, 3vw, 20px);
    border-radius: 12px;
  }
  .daily-box {
    padding: 18px 20px 22px;
    border-radius: 14px;
  }
  .daily-close {
    top: 6px;
    inset-inline-end: 6px;
  }
  .daily-title {
    margin-bottom: 4px;
  }
}

/* ===========================================================================
   Spielanleitung
   Symbol links, Text rechts — statt einer Textwand aus Absaetzen. Die Diagramme
   sind sprachfrei und muessen deshalb nie uebersetzt werden.
   =========================================================================== */
#dialog-rules {
  max-width: min(620px, 94vw);
  /* Mit Diagrammen und der aufgeteilten Steuerung wird der Inhalt hoeher als
     ein Handybildschirm. Ohne Deckel faellt der Schliessen-Knopf aus dem Bild
     und ist nicht mehr erreichbar — gemessen 1043px Inhalt bei 914px Fenster. */
  max-height: 88dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.rules-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 16px 0 20px;
  padding: 0;
}
.rules-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.rules-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--dialog-chip);
  border: 1px solid var(--dialog-chip-border);
}
.rules-ico svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rules-text {
  min-width: 0;   /* damit lange Woerter umbrechen statt zu ueberlaufen */
}
.rules-text p {
  margin: 0;
}
.rules-figur {
  margin: 10px 0 0;
}
/* Die Diagrammkarten sehen aus wie echte Karten: weisse Flaeche, dunkler Rand.
   Das gilt in beiden Themen — eine Spielkarte ist auch im Dunkeln weiss. */
.rules-svg {
  height: auto;
  max-width: 100%;
}
.rules-figur .k rect {
  fill: #fff;
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 1.5;
}
.rules-figur text {
  font-family: inherit;
  font-weight: 700;
  fill: #111827;
}
.rules-figur .rang {
  font-size: 17px;
}
.rules-figur .farbe {
  font-size: 15px;
}
.rules-figur .rot {
  fill: var(--red);
}
.rules-figur .schwarz {
  fill: #111827;
}
.rules-figur .punkte {
  font-size: 20px;
  fill: var(--dialog-text);
}
/* Das erste Diagramm zeigt die Stapelung und darf schmal bleiben. */
.rules-figur .rules-svg {
  width: 68px;
}
.rules-row:nth-child(4) .rules-svg {
  width: 224px;
}

/* Steuerung: je Zeile eine Funktion. Links die Eingabe (Symbol oder
   Tastenkappe), rechts die Wirkung — so ist auf einen Blick zu sehen, dass es
   getrennte Funktionen sind und nicht ein langer Satz. */
.rules-untertitel {
  font-weight: 700;
  margin: 0 0 8px;
}
.steuerung {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.steuerung-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--dialog-chip);
  border: 1px solid var(--dialog-chip-border);
}
.steuerung dt {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 74px;
}
.steuerung dd {
  margin: 0;
  min-width: 0;
}
.st-bild svg {
  width: 34px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.st-taste {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--dialog-bg);
  border: 1px solid var(--dialog-chip-border);
  box-shadow: 0 1px 0 var(--dialog-chip-border);
  font-size: 0.8em;
  font-weight: 700;
  white-space: nowrap;
}
.st-plus {
  opacity: 0.6;
}
.st-eingabe::after {
  content: " \2192\00a0";   /* Pfeil zwischen Eingabe und Wirkung */
  opacity: 0.6;
}
.st-wirkung {
  font-weight: 600;
}
/* Dasselbe Symbol wie auf dem zugehoerigen Knopf in der Bedienleiste — die
   Bruecke zwischen Abkuerzung und Knopf. Etwas kleiner und mit dem Rahmen der
   Leistenknoepfe, damit es als Knopf erkennbar bleibt. */
.st-hudico {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  vertical-align: -7px;
  margin-right: 5px;
  border-radius: 7px;
  background: var(--dialog-chip);
  border: 1px solid var(--dialog-chip-border);
}
.st-hudico svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Zwei Seiten in der Anleitung: Reiter oben, Inhalt darunter. */
.rules-reiter {
  display: flex;
  gap: 6px;
  margin: 14px 0 4px;
}
.rules-tab {
  flex: 1 1 0;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--dialog-chip-border);
  background: transparent;
  color: inherit;
  font-weight: 600;
  cursor: pointer;
}
.rules-tab.is-aktiv {
  background: var(--dialog-chip);
  border-color: var(--dialog-text);
}

/* Knopfuebersicht: Symbol, Name, kurze Erklaerung. */
.knopf-liste,
.kisten-liste,
.kisten-hinweise {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.knopf-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--dialog-chip);
  border: 1px solid var(--dialog-chip-border);
}
.knopf-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--dialog-bg);
  border: 1px solid var(--dialog-chip-border);
}
.knopf-ico svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.knopf-muenze {
  width: 19px;
  height: 19px;
}
.knopf-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kn-name {
  font-weight: 700;
}
.kn-desc {
  color: var(--text-muted);
  font-size: 0.92em;
}

/* Kisten: Name links, Preis rechts. Die Zahlen sind sprachfrei. */
/* Kistenbild so hoch wie die Zahl daneben — deshalb in `em`, damit es der
   Schriftgroesse folgt statt an einem festen Pixelwert zu kleben. */
.kisten-bild {
  height: 1.5em;
  width: auto;
  flex: 0 0 auto;
  align-self: center;
}
.kisten-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--dialog-chip);
  border: 1px solid var(--dialog-chip-border);
}
.kisten-zeile .kn-name {
  flex: 1 1 auto;
}
.kisten-preis {
  font-weight: 700;
  white-space: nowrap;
}
/* Das echte Muenzbild aus dem Spiel statt eines Emojis: U+1FA99 hat in vielen
   Schriften keine Glyphe und erschien als leeres Kaestchen. */
.kisten-preis::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-inline-end: 5px;
  vertical-align: -2px;
  background: url("../img/Assets/Coin/coin-icon.png") center / contain no-repeat;
}
.kisten-gratis::before {
  content: none;
}
.kisten-gratis {
  font-weight: 600;
  color: var(--text-muted);
}
.kisten-hinweise {
  gap: 4px;
  margin-top: 10px;
}
.kisten-hinweise li {
  padding-inline-start: 18px;
  position: relative;
  color: var(--text-muted);
}
.kisten-hinweise li::before {
  content: "\2022";
  position: absolute;
  inset-inline-start: 4px;
}
.rules-abstand {
  margin-top: 20px;
}

/* ---------------------------------------------------------------------------
   Nebentext in Dialogen
   `--text-muted` ist weiß (0.65) — richtig auf dem grünen Brett, aber auf einem
   hellen Dialog kaum lesbar. Statt 16 Fundstellen einzeln zu ändern, wird die
   Variable innerhalb von Dialogen neu gesetzt; sie vererbt sich an alles darin.
   Dreistufig wie im Rest der Datei: Standard hell · Systemeinstellung · Schalter.
   --------------------------------------------------------------------------- */
dialog,
.daily-box {
  --text-muted: rgba(0, 0, 0, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) dialog,
  :root:not([data-theme="light"]) .daily-box {
    --text-muted: rgba(255, 255, 255, 0.65);
  }
}
[data-theme="dark"] dialog,
[data-theme="dark"] .daily-box {
  --text-muted: rgba(255, 255, 255, 0.65);
}

dialog h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 14px;
}

dialog p {
  font-size: 0.875rem;
  line-height: 1.65;
  margin-bottom: 10px;
}

dialog p strong {
  font-weight: 600;
}

.btn-close-dialog {
  margin-top: 16px;
  background: var(--dialog-chip);
  border: 1px solid var(--dialog-chip-border);
  color: inherit;
  border-radius: 10px;
  font-weight: 600;
  transition: background 0.14s ease;
}
.btn-close-dialog:hover {
  background: var(--dialog-glass-border);
}

/* ===========================================================================
   Win Overlay
   =========================================================================== */
#win-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.win-box {
  background: transparent; /* transparenter Container – über der Abdunklung */
  border: none;
  box-shadow: none;
  color: #f2f5fa;
  padding: 30px 40px;
  text-align: center;
}

.win-box h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 8px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

.win-box p {
  font-size: 1rem;
  opacity: 0.85;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

/* Verdiente Münzen: grünes „+X" */
.win-coins {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 1.5rem;
  font-weight: 800;
  animation: win-coins-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.win-coins-plus {
  color: #34d399;
  text-shadow: 0 0 14px rgba(52, 211, 153, 0.55);
}
.win-coins .coin-icon {
  width: 1.4em;
  height: 1.4em;
}
@keyframes win-coins-pop {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Header-Coins: nur die sich ändernden Ziffern (Suffix) werden grün und
   gehen danach weich zurück in die Ursprungsfarbe (Gold). Pill pulsiert. */
.cv-gain {
  color: #34d399;
  transition: color 0.7s ease;
}
.cv-gain.cv-done {
  color: inherit; /* zurück ins Gold der Coins-Pill */
}
.coins-display.coins-gain {
  animation: coins-gain-pulse 1.3s ease;
}
@keyframes coins-gain-pulse {
  0%,
  100% {
    box-shadow: none;
    border-color: rgba(245, 197, 66, 0.6);
  }
  35% {
    box-shadow:
      0 0 0 2px rgba(52, 211, 153, 0.6),
      0 0 18px rgba(52, 211, 153, 0.45);
    border-color: #34d399;
  }
}

.win-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px;
}
.win-btn {
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 10px;
  background: var(--dialog-chip);
  border: 1px solid var(--dialog-chip-border);
  color: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition:
    background 0.14s ease,
    transform 0.1s ease;
}
.win-btn:hover {
  background: var(--dialog-glass-border);
}
.win-btn:active {
  transform: translateY(1px);
}
.win-btn--primary {
  background: var(--focus-ring);
  border-color: var(--focus-ring);
  color: #1a1a1a;
}
.win-btn--primary:hover {
  background: #ffce50;
}

/* ===========================================================================
   Auto-Complete Button
   =========================================================================== */
#btn-autocomplete {
  background: var(--focus-ring);
  color: #111111;
  border-color: transparent;
  font-weight: 700;
  animation: pulse-autocomplete 1.6s ease-in-out infinite;
}

#btn-autocomplete:hover {
  background: #f59e0b;
}

@keyframes pulse-autocomplete {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.55);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(251, 191, 36, 0);
  }
}

/* ===========================================================================
   Toast
   =========================================================================== */
.toast {
  position: fixed;
  bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 8px));
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  background: rgba(17, 24, 39, 0.88);
  color: #f9fafb;
  padding: 7px 22px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  pointer-events: none;
  z-index: 3000;
  white-space: nowrap;
}

.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===========================================================================
   Highscore Table
   =========================================================================== */
.highscore-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-bottom: 8px;
}

.highscore-table th,
.highscore-table td {
  padding: 6px 12px;
  text-align: right;
  border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}

.highscore-table th:first-child,
.highscore-table td:first-child {
  text-align: center;
  width: 2em;
  color: var(--dialog-text);
  opacity: 0.55;
}

.highscore-table th:last-child,
.highscore-table td:last-child {
  text-align: left;
}

.highscore-table thead th {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.55;
  border-bottom: 2px solid rgba(128, 128, 128, 0.28);
}

.highscore-table tbody tr:last-child td {
  border-bottom: none;
}

.highscore-table tbody tr:hover td {
  background: rgba(128, 128, 128, 0.07);
}

.highscore-table .hs-empty {
  text-align: center;
  padding: 18px;
  opacity: 0.6;
}

/* ===========================================================================
   Screen-reader only
   =========================================================================== */
.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;
}

/* ===========================================================================
   Rotate Hint – Querformat auf sehr kleinen Displays
   =========================================================================== */
#rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  color: #ffffff;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 500;
  z-index: 9000;
  text-align: center;
  padding: 24px;
  pointer-events: none;
}

@media (orientation: landscape) and (max-height: 380px) {
  #rotate-hint {
    display: flex;
  }
}

/* ===========================================================================
   Tablet / Desktop (600 px+)
   =========================================================================== */
/* Schmale Screens: Button-Beschriftungen ausblenden, nur Icons zeigen */
@media (max-width: 640px) {
  .hud-btn {
    padding: 0;
    width: 44px;
    justify-content: center;
  }
  /* Nur die übersetzbaren Beschriftungen ausblenden. Sie tragen alle
     `data-i18n`; Symbole (Globus, Lautsprecher) tragen es nie. Vorher hing die
     Regel an „hat keine Klasse" — daran ist der Globus im Sprach-Knopf
     hängengeblieben, weil er im Gegensatz zu den Sound-Symbolen keine hat. */
  .hud-btn > span[data-i18n] {
    display: none;
  }
  .stat {
    padding: 2px 12px;
    min-width: 52px;
  }
}

/* ===========================================================================
   Main Menu
   =========================================================================== */

/* Sicherheitsnetz: #main-menu[hidden] und display:none inline immer respektieren */
#main-menu[hidden],
#main-menu[style*="display: none"],
#main-menu[style*="display:none"] {
  display: none !important;
  pointer-events: none !important;
}

#main-menu {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(
    --bg
  ); /* Grün – passt zum Spielfeld; Letterbox-Ränder blenden ein */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 300ms ease;
}

.menu-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3.5vw, 40px);
  padding: clamp(20px, 4vw, 56px);
  width: 100%;
  max-width: 500px;
}

.menu-game-title {
  font-size: clamp(2rem, 7vw, 4rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-on-felt);
}

.menu-logo-image {
  display: block;
  height: clamp(6.5rem, 24vw, 15rem);
  width: auto;
  max-width: 95vw;
  margin-top: clamp(-50px, -5vw, -20px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Sprache-/Sound-Button unten rechts, nebeneinander (auf dem Startbildschirm) */
.menu-corner {
  position: absolute;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  display: flex;
  gap: 12px;
  z-index: 1;
}

/* Linker unterer Ecke: „Nur lösbare Spiele"-Schalter */
.menu-corner-left {
  right: auto;
  left: clamp(16px, 3vw, 32px);
}
.solvable-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font: inherit;
  font-size: clamp(.72rem, 1.6vw, .9rem);
  font-weight: 700;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.solvable-toggle:hover  { transform: translateY(-1px); background: rgba(0, 0, 0, .5); }
.solvable-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.solvable-chk {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, .5);
  background: transparent;
  color: transparent;
  font-size: .8rem;
  line-height: 1;
}
.solvable-toggle[aria-pressed="true"] {
  border-color: #34d399;
  background: rgba(16, 122, 87, .45);
}
.solvable-toggle[aria-pressed="true"] .solvable-chk {
  border-color: #34d399;
  background: #34d399;
  color: #062b1f;
}

/* ---------------------------------------------------------------------------
   Titelbild-Hero (Startbildschirm). Aus separaten Teilen zusammengesetzt:
   Background + Title + Site + Button (mit Hover/Click-Zuständen). Alle Teile
   sind volle 1775×886-Leinwände (Transparenz) und liegen deckungsgleich. Die
   grünen Ränder blenden mit dem Spielfeld ein. Klick-/Hover-Flächen liegen
   prozentgenau über den gemalten Elementen (auf jeder Größe passgenau).
   --------------------------------------------------------------------------- */
.menu-hero {
  position: relative;
  aspect-ratio: 1775 / 886;
  width: min(100vw, calc(100dvh * (1775 / 886)));
  max-width: 100vw;
  max-height: 100dvh;
}

/* Deckungsgleiche Ebenen (volle Leinwand). Sichtbare Ebenen ignorieren Klicks. */
.menu-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  transition: transform 0.15s ease;
  will-change: transform;
}
.layer-btn {
  background-image: url("../img/site/menu-btn.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Unsichtbare Hover-/Klick-Flächen (vor den sichtbaren Layern im DOM) */
.hero-hit {
  position: absolute;
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hit-start {
  left: 51.2%;
  top: 64.4%;
  width: 30%;
  height: 16%;
  border-radius: 999px;
}
.hit-title {
  left: 50.3%;
  top: 34.1%;
  width: 59.3%;
  height: 42.9%;
  cursor: default;
}
.hit-site {
  left: 51.2%;
  top: 84.3%;
  width: 48.5%;
  height: 16.5%;
  cursor: default;
}

/* Hover: das jeweilige Element hebt sich ein paar Pixel; Button wechselt das Bild */
.hit-title:hover ~ .layer-title {
  transform: translateY(-7px);
}
.hit-site:hover ~ .layer-site {
  transform: translateY(-5px);
}
.hit-start:hover ~ .layer-btn {
  transform: translateY(-7px);
  background-image: url("../img/site/menu-btn-hover.png");
}
.hit-start:active ~ .layer-btn {
  transform: translateY(-2px);
  background-image: url("../img/site/menu-btn-click.png");
}

.hero-hit:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.menu-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(10px, 1.8vw, 16px);
  width: 100%;
  max-width: 320px;
}

.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 28px;
  border-radius: var(--radius);
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  text-decoration: none;
  border: 2px solid transparent;
  transition:
    background 0.14s ease,
    transform 0.1s ease;
  white-space: nowrap;
}

.menu-btn:hover {
  transform: translateY(-2px);
}
.menu-btn:active {
  transform: translateY(0);
}

.menu-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.menu-btn-primary {
  background: #f0b429;
  color: #111111;
  border-color: #c8901a;
  font-size: clamp(1.25rem, 3.4vw, 1.7rem);
  font-weight: 800;
  min-height: 58px;
  padding: 14px 28px;
}

.menu-btn-primary:hover {
  background: #f5c842;
}

.menu-btn-secondary {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-border);
}

.menu-btn-secondary::after {
  content: " ↗";
  font-size: 0.8em;
  opacity: 0.7;
  margin-left: 2px;
}

.menu-btn-secondary:hover {
  background: var(--btn-hover);
}

/* Sound-Toggle-Button – inline in menu-row und game-header */
.sound-toggle-btn {
  width: 44px;
  height: 44px;
  min-height: unset;
  padding: 0;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--btn-text);
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background 0.14s ease,
    opacity 0.14s ease;
}

.sound-toggle-btn:hover {
  background: var(--btn-hover);
}

.sound-toggle-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.sound-toggle-btn.sound-off {
  opacity: 0.5;
}

/* Menu-Row: More Games + Mute nebeneinander */
.menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
}

.menu-row .menu-btn {
  flex: 1;
}

/* ===========================================================================
   Cosmetics – Kisten & Sammlung
   =========================================================================== */

/* Münzen-Anzeige im Header – Gold-Pill */
/* Auf dem Startbildschirm gehören diese drei Bedienelemente nicht hin. Vor der
   Anhebung lagen sie unter #main-menu (z-index 500) und waren dadurch verdeckt;
   mit 8995 liegen sie darüber. Deshalb hier ausdrücklich ausblenden —
   `visibility` statt `display`, damit der HUD-Balken seine Breite behält.
   (Ton und Sprache gibt es im Hauptmenü ohnehin als eigene Knöpfe.)
   Die Klasse setzt js/menu.js in showMenu()/hideMenu(). */
body.menu-open .coins-display,
body.menu-open #btn-sound-game,
body.menu-open #btn-lang-game,
body.menu-open #btn-theme {
  visibility: hidden;
}

/* Ton-, Sprach- und Themenknopf.
   ALT: `z-index: 8995` — „über der Abdunklung, auch bei offenem Dialog
        sichtbar und bedienbar". Der Satz stimmte, als die drei noch in der
        Leiste standen.
   NEU: nur noch `position: relative`. Die drei sitzen seit dem 18.08. **im**
        Einstellungsdialog (index.html → dialog-settings) und damit ohnehin
        über der Abdunklung. Der hohe Wert war dort ohne Wirkung und legte
        eine Schichtung nahe, die es nicht mehr gibt.
   `position: relative` bleibt: Es traegt die Marker der Knoepfe.
   Ihre Aufgabe in der Leiste hat heute .hud-fest — siehe dort. */
#btn-sound-game,
#btn-lang-game,
#btn-theme {
  position: relative;
}

.coins-display {
  /* Soll über der Abdunklung sichtbar bleiben — bei offenem Dialog und auf
     dem Sieg-Bildschirm. Dort zählt die Anzeige die verdienten Münzen hoch;
     läge sie unter dem Schleier, sähe man den Zuwachs nicht.
     ACHTUNG: Der Wert allein reicht dafür nicht. Die Anzeige sitzt in
     `header.hud`, und dessen `z-index: 10` macht einen Stapelkontext auf —
     aus dem kein Kind ausbricht. Über die Abdunklung kommt sie nur, wenn die
     ganze Leiste steigt: `body.hud-fest-frei` (siehe HUD-Abschnitt).
     Leiter: dialog 9000 · Leiste 8995 · Abdunklung 8990 · Sieg-Overlay 2000 */
  position: relative;
  z-index: 8995;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(30, 24, 6, 0.68);
  border: 1px solid rgba(245, 197, 66, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  border-radius: 10px;
  padding: 0 14px 0 10px;
  min-height: 42px;
  font-size: 0.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #ffe08a;
}

/* Münz-Icon (Bild) – inline neben Text, quadratisch */
.coin-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  object-fit: contain;
  vertical-align: -0.28em; /* an der Textgrundlinie ausrichten */
  flex: 0 0 auto;
}
.coins-display .coin-icon {
  width: 1.4em;
  height: 1.4em;
}

/* Kisten-Dialog */
.chest-dialog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.chest-card {
  border: 1px solid var(--dialog-chip-border);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  background: var(--dialog-chip);
  cursor: pointer;
  transition:
    border-color 0.15s,
    transform 0.15s;
}

.chest-card:hover {
  border-color: var(--focus-ring);
  transform: translateY(-3px);
}

.chest-card:disabled,
.chest-card[data-locked] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Bildrahmen der Kistenkarte. Feste Größe, damit das zweite (aufgeklappte)
   Bild deckungsgleich darüberliegen kann. */
.chest-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 8px;
}
.chest-thumb > img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  display: block;
  transition: opacity 0.18s ease;
}
/* Das Hover-Bild liegt deckungsgleich darüber und wird eingeblendet. Beide
   Bilder werden mitgeladen — sonst flackerte es beim ersten Überfahren.

   Ausgelöst wird über die Klasse `is-peek`, die js/chest.js setzt, sobald die
   Maus über dem Kauf- oder dem Inhalt-Knopf steht. Kein CSS-`:hover`, weil das
   Bild ein vorangehendes Geschwister der Knöpfe ist — rückwärts greift ein
   Selektor nur mit `:has()`.
   Auf Tastbildschirmen bleibt die geschlossene Kiste stehen, was richtig ist:
   sie ist der Ruhezustand. */
.chest-thumb .chest-img-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.chest-card.is-peek .chest-thumb .chest-img-hover {
  opacity: 1;
}
.chest-card.is-peek .chest-thumb > img:first-child {
  opacity: 0;
}

/* Hinweis: Hier stand eine Hülle um den Kaufknopf, damit das Überfahren auch
   bei deaktiviertem Knopf ankommt. Das ist bewusst wieder entfernt — eine
   aufklappende Kiste über einem Knopf, den man nicht drücken kann, verspricht
   etwas, das nicht einlösbar ist. Deaktivierte Knöpfe senden von sich aus
   keine Mausereignisse; genau das ist jetzt das gewünschte Verhalten. */
/* Münz-Icon in den Kosten klein halten (nicht 80px wie das Kistenbild) */
.chest-card .coin-icon {
  width: 1.1em;
  height: 1.1em;
  margin: 0;
  display: inline-block;
}

.chest-card .chest-name {
  font-weight: 700;
  font-size: 0.9rem;
}

.chest-card .chest-cost {
  font-size: 0.8rem;
  color: var(--focus-ring);
  margin-top: 4px;
}

/* Karte ist jetzt ein Container (kein Button mehr) → kein Whole-Card-Hover-Lift */
.chest-card:hover {
  transform: none;
  border-color: var(--dialog-chip-border);
}

/* Aktionsbereich: Kaufen (Coins) + Öffnen per Ad */
.chest-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.chest-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 9px;
  background: linear-gradient(180deg, #f5c542, #e0a92e);
  color: #1a1400;
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
}
.chest-buy:hover {
  background: linear-gradient(180deg, #ffd45a, #eab534);
}
.chest-buy:disabled {
  background: rgba(120, 120, 130, 0.3);
  color: var(--text-muted, #9ca3af);
  cursor: not-allowed;
}
.chest-ad {
  width: 100%;
  justify-content: center;
  padding: 7px 8px;
  border-radius: 9px;
  font-size: 0.78rem;
}

/* Coin-Reroll im Reward-Dialog ohne genug Coins → ausgegraut */
.reward-reroll:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Hero Chest – eigenes Panel oben im Kisten-Menü (1× gratis/Woche + Ad) */
.hero-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(245, 197, 66, 0.12),
    rgba(245, 197, 66, 0.04)
  );
  border: 1px solid rgba(245, 197, 66, 0.5);
}
.hero-panel-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex: 0 0 auto;
  transition: opacity 0.18s ease;
}
/* Bildrahmen des Hero-Panels — gleiche Bauweise wie .chest-thumb, nur 64px.
   Umgeschaltet über `is-peek`, gesetzt von js/chest.js. */
.hero-thumb {
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
}
.hero-thumb .chest-img-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.hero-panel.is-peek .hero-thumb .chest-img-hover {
  opacity: 1;
}
.hero-panel.is-peek .hero-thumb > img:first-child {
  opacity: 0;
}
.hero-panel-info {
  flex: 1 1 auto;
  text-align: left;
  min-width: 0;
}
.hero-panel-name {
  font-weight: 800;
  font-size: 1rem;
}
.hero-panel-sub {
  font-size: 0.72rem;
  color: var(--text-muted, #9ca3af);
}
.hero-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}
/* Schmale Fenster: Die Hero-Zeile stand als starre Reihe (Bild, Text,
   Knopfspalte mit `flex: 0 0 auto`) und ragte dadurch aus dem Dialog — im
   Hochformat um 64px. Diese Ausnahme muss NACH der Regel oben stehen: gleiche
   Spezifitaet, es gewinnt die spaetere. */
@media (max-width: 560px) {
  .hero-panel {
    flex-wrap: wrap;
  }
  .hero-panel-actions {
    flex: 1 1 100%;
    min-width: 0;
  }
}
.hero-btn {
  /* Wie die übrigen Ad-Knöpfe ein zentrierter Flex-Container: sonst sitzt das
     Restzeit-Plättchen auf der Grundlinie und damit sichtbar zu tief. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --ad-gap: 5px;
  gap: var(--ad-gap);
  min-height: 0;
  padding: 7px 12px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.hero-btn--free {
  background: linear-gradient(180deg, #f5c542, #e0a92e);
  color: #1a1400;
}
.hero-btn--free:hover {
  background: linear-gradient(180deg, #ffd45a, #eab534);
}
.hero-btn--ad {
  background: var(--dialog-chip);
  color: inherit;
  border-color: var(--dialog-chip-border);
}
.hero-btn--ad:hover {
  background: var(--dialog-chip-border);
}
.hero-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(120, 120, 130, 0.3);
  color: var(--text-muted, #9ca3af);
  border-color: transparent;
}
@media (max-width: 480px) {
  .hero-panel {
    flex-wrap: wrap;
  }
  /* Die Ad-Knoepfe nebeneinander, um Hoehe zu sparen — der „Inhalt"-Knopf
     bekommt weiter unten `width: 100%` und braucht deshalb eine eigene Zeile.
     Ohne `flex-wrap` versuchte er, sie sich neben den Knoepfen zu nehmen, und
     ragte bei 412px um 33px aus dem Dialog (gemessen, `MASTER_HANDOVER § 8 A-1`).
     Die beiden Regeln widersprachen sich: Der Kommentar am Inhalt-Knopf ging von
     untereinander stehenden Knoepfen aus, diese Regel stellt sie nebeneinander. */
  .hero-panel-actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .hero-btn {
    flex: 1 1 auto;
    /* Ohne das kann ein Knopf nicht unter seine Inhaltsbreite schrumpfen —
       dieselbe Falle wie bei den Dialoggittern (B-16). */
    min-width: 0;
  }
}

/* ===========================================================================
   Reward-Reveal (CS:GO-Style Roulette mit Rarity-Glow)
   --rarity wird per JS gesetzt (Seltenheits-Farbe)
   =========================================================================== */
.reward-roulette {
  --rarity: #9ca3af;
  width: min(1180px, 95vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.2vw, 34px);
  padding: 12px 0 18px;
  text-align: center;
}

/* --- Phase 1: Kiste groß & mittig ---------------------------------------- */
.reward-chestphase {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  padding: 20px 0;
}
.reward-chest-glow {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(245, 197, 66, 0.45),
    transparent 66%
  );
  filter: blur(10px);
  animation: reward-glow-pulse 1.7s ease-in-out infinite;
  pointer-events: none;
}
.reward-chest-big {
  position: relative;
  z-index: 1;
  width: min(480px, 42vw);
  max-height: 52dvh;
  object-fit: contain;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.6));
  animation: reward-chest-idle 1.3s ease-in-out infinite;
}
.reward-hint {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  color: #e5e7eb;
  letter-spacing: 0.03em;
  animation: reward-hint-blink 1.3s ease-in-out infinite;
}

/* Aktions-Buttons unter der Kiste (Inhalt · Zurück) */
.reward-chest-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.reward-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  min-height: 40px;
  border-radius: 10px;
  background: rgba(14, 19, 34, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e8edf5;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s ease;
}
.reward-mini:hover {
  background: rgba(38, 46, 68, 0.85);
}
.reward-mini .btn-ico {
  width: 16px;
  height: 16px;
}

/* Inhalts-Panel (Drop-Chancen) – nur bei .show-contents sichtbar */
.reward-contents {
  position: relative;
  z-index: 2;
  display: none;
  width: min(320px, 82vw);
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(14, 19, 34, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-align: left;
}
.reward-chestphase.show-contents .reward-contents {
  display: block;
}
.reward-chestphase.show-contents .reward-hint {
  visibility: hidden;
}

.reward-contents-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted, #9ca3af);
  margin-bottom: 8px;
}
.reward-contents-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 0.85rem;
}
.reward-contents-row + .reward-contents-row {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.reward-contents-row .rc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.reward-contents-row .rc-label {
  font-weight: 700;
}
.reward-contents-row .rc-count {
  color: var(--text-muted, #9ca3af);
  margin-left: auto;
  font-size: 0.78rem;
}
.reward-contents-row .rc-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  min-width: 3ch;
  text-align: right;
}

/* „Inhalt"-Button unter dem Drop-Rate-Panel (nur sichtbar, wenn Drops offen) */
.reward-itemsrow {
  position: relative;
  z-index: 2;
  display: none;
  justify-content: center;
  margin-top: 8px;
}
.reward-chestphase.show-contents .reward-itemsrow {
  display: flex;
}

/* Vollständige Item-Liste (Overlay über der Kiste) */
.reward-itemlist {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(840px, 92vw);
  max-height: 82vh;
  display: none;
  flex-direction: column;
  background: rgba(14, 19, 34, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  z-index: 20;
  overflow: hidden;
}
.reward-chestphase.show-items .reward-itemlist {
  display: flex;
}
/* Dieselbe Liste, aber im Kisten-Menü: dort wird sie bei Bedarf erzeugt, hängt
   an <body> statt im Dialog und trägt ihre Sichtbarkeit selbst.
   Der z-index muss über dialog[open] (9000) liegen, weil sie als Geschwister
   des Dialogs eingehängt wird — Begründung siehe _zeigeInhalt() in js/chest.js.
   Leiter: Werbung ≫ Inhaltsliste 9100 · Dialog 9000 · Abdunklung 8990 */
.reward-itemlist.is-open {
  display: flex;
  z-index: 9100;
}

/* „Inhalt"-Knopf in Kistenkarte und Hero-Panel: dort stehen die Knöpfe
   untereinander und über die volle Breite, anders als in der Aktionsleiste
   des Reward-Dialogs. */
.chest-actions .chest-contents,
.hero-panel-actions .chest-contents {
  width: 100%;
  justify-content: center;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 0.78rem;
}

.reward-itemlist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex: 0 0 auto;
}
.reward-itemlist-title {
  font-size: 1rem;
  font-weight: 700;
}
/* Quadratisch auf 44px — nicht 34px. Die allgemeine `button`-Regel setzt
   `min-height: 44px` für die Fingerbedienung; ein `height: 34px` kommt dagegen
   nicht an. Ergebnis war ein 34×44-Kasten, in dem das ✕ zu hoch saß.
   Flex statt Textfluss zentriert es in beiden Achsen. */
.reward-itemlist-close {
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.reward-itemlist-close:hover {
  background: rgba(255, 255, 255, 0.16);
}

.reward-itemlist-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 18px 18px;
}
.reward-itemgroup-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 16px 0 8px;
}
.reward-itemgroup-title:first-child {
  margin-top: 0;
}

.reward-itemgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}
.reward-itemcard {
  border: 1px solid var(--tile-rarity, #555);
  border-radius: 8px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
  /* Nur sichtbare Karten rendern – spart beim Scrollen das Malen aller Bilder */
  content-visibility: auto;
  contain-intrinsic-size: auto 112px;
}
.reward-itemcard-media {
  position: relative;
}
.reward-itemcard img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}
.reward-itemcard-pct {
  position: absolute;
  left: 3px;
  bottom: 3px;
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.35;
  color: #fff;
  background: rgba(10, 14, 22, 0.92);
  border: 1px solid var(--tile-rarity, #555);
  pointer-events: none;
}
.reward-itemcard-name {
  font-size: 0.62rem;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted, #9ca3af);
}

/* Phasen-Sichtbarkeit */
.reward-roulette.phase-chest .roulette-viewport,
.reward-roulette.phase-chest .reward-info {
  display: none;
}
.reward-roulette.phase-spin .reward-chestphase,
.reward-roulette.is-done .reward-chestphase {
  display: none;
}

/* --- Viewport (Sichtfenster des Streifens) ------------------------------- */
.roulette-viewport {
  position: relative;
  width: 100%;
  height: clamp(240px, 20vw, 356px);
  overflow: hidden;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    #000 13%,
    #000 87%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
}

.roulette-strip {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 8px; /* Startversatz, damit Kachel 0 sichtbar ist */
  will-change: transform;
  transform: translateX(0);
}

.roulette-tile {
  --tile-rarity: #555;
  --tw: clamp(150px, 12vw, 224px);
  flex: 0 0 var(--tw);
  width: var(--tw);
  aspect-ratio: 2 / 3; /* Höhe wächst proportional mit der Breite */
  margin-right: clamp(12px, 1.1vw, 18px);
  display: grid;
  place-items: center;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.15)),
    var(--dialog-bg, #1b2230);
  border: 2px solid var(--tile-rarity);
  box-shadow:
    inset 0 0 16px rgba(0, 0, 0, 0.4),
    0 0 8px -2px var(--tile-rarity);
}
.roulette-tile img {
  max-width: 88%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 6px;
}

/* Mittel-Marker */
.roulette-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: var(--rarity);
  box-shadow: 0 0 14px 2px var(--rarity);
  z-index: 3;
  pointer-events: none;
}
.roulette-marker::before,
.roulette-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
}
.roulette-marker::before {
  top: -1px;
  border-top-color: var(--rarity);
}
.roulette-marker::after {
  bottom: -1px;
  border-bottom-color: var(--rarity);
}

/* Gewinn-Kachel leuchtet nach dem Stopp */
.reward-roulette.is-done .roulette-tile.is-winner {
  border-color: var(--rarity);
  box-shadow:
    inset 0 0 20px -2px var(--rarity),
    0 0 22px -2px var(--rarity);
  animation: reward-winner-pulse 1.1s ease-in-out infinite;
}

/* Funken (nur Epic/Legendary) – aus der Viewport-Mitte */
.reward-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.reward-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--rarity);
  box-shadow: 0 0 8px var(--rarity);
  opacity: 0;
  animation: reward-spark-fly 0.8s ease-out var(--delay, 0s) both;
}

/* --- Info-Block (erst nach Stopp sichtbar) ------------------------------- */
.reward-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 180px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.reward-roulette.is-done .reward-info {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.reward-rarity {
  font-size: 0.92rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 6px 20px;
  border-radius: 20px;
  box-shadow: 0 0 12px var(--rarity);
}

/* Godlike – radiant, über Legendary */
.reward-roulette[data-rarity="godlike"] .reward-rarity {
  background: linear-gradient(90deg, #ff2e63, #ffb03d, #ff2e63);
  background-size: 200% 100%;
  color: #fff;
  box-shadow:
    0 0 18px #ff2e63,
    0 0 6px #ffb03d;
  animation: godlike-shimmer 2.2s linear infinite;
}
@keyframes godlike-shimmer {
  to {
    background-position: 200% 0;
  }
}

.reward-name {
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  font-weight: 700;
}

.reward-type {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: -4px;
}

.reward-dupe {
  font-size: 0.82rem;
  font-weight: 600;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.4);
  padding: 4px 12px;
  border-radius: 20px;
}

.reward-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.reward-later {
  background: transparent;
}

/* „Nochmal öffnen" – gleiche Kiste direkt erneut ziehen */
.reward-reroll {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #f5c542, #e0a92e);
  color: #1a1400;
  border-color: rgba(245, 197, 66, 0.8);
  font-weight: 700;
}
.reward-reroll:hover {
  background: linear-gradient(180deg, #ffd45a, #eab534);
}
.reward-reroll .btn-ico {
  width: 16px;
  height: 16px;
}
.reward-reroll .coin-icon {
  width: 15px;
  height: 15px;
}
.reward-reroll:disabled {
  background: rgba(120, 120, 130, 0.35);
  color: var(--text-muted);
  border-color: rgba(150, 150, 160, 0.3);
  cursor: not-allowed;
  filter: none;
}

/* Fast-Roll – erscheint nur während des Spins */
.reward-fast {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 6;
  align-items: center;
  gap: 6px;
  background: rgba(20, 26, 40, 0.82);
  border: 1px solid var(--rarity, rgba(245, 197, 66, 0.8));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}
.reward-fast:hover {
  background: rgba(32, 40, 60, 0.92);
}
.reward-fast .btn-ico {
  width: 15px;
  height: 15px;
  color: var(--rarity, #f5c542);
}
.reward-roulette.phase-spin .reward-fast {
  display: inline-flex;
}

/* --- Keyframes ----------------------------------------------------------- */
@keyframes reward-glow-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.92);
  }
  50% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1.06);
  }
}
@keyframes reward-chest-idle {
  0%,
  100% {
    transform: translateY(0) rotate(-1.5deg);
  }
  50% {
    transform: translateY(-6px) rotate(1.5deg);
  }
}
@keyframes reward-hint-blink {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.95;
  }
}
@keyframes reward-winner-pulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 20px -2px var(--rarity),
      0 0 18px -2px var(--rarity);
  }
  50% {
    box-shadow:
      inset 0 0 26px 0 var(--rarity),
      0 0 30px 0 var(--rarity);
  }
}
@keyframes reward-spark-fly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.3);
  }
}

/* Kisten-Reveal (Roulette-Spin + Glow/Sparks) läuft BEWUSST auch bei
   'prefers-reduced-motion'. Eine Kiste zu öffnen ist eine aktive, kurze
   Nutzer-Aktion – konsistent mit dem animierten Ulala-Deck. Sonst würde die
   Windows-Einstellung „Animationen reduzieren" den Spin abschalten (und das
   'transition: none !important' hätte sogar den inline-Spin überschrieben,
   sodass 'transitionend' nie feuert und der Reveal hängen bleibt). */

/* Sammlungs-Dialog */
.collection-tabs {
  display: flex;
  gap: 6px;
  margin: 12px 0 8px;
  border-bottom: 1px solid var(--dialog-glass-border);
  padding-bottom: 6px;
  flex-wrap: wrap;
}

.collection-tab {
  background: transparent;
  border: none;
  padding: 6px 14px;
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
  min-height: unset;
}

.collection-tab[aria-selected="true"] {
  color: var(--focus-ring);
  font-weight: 700;
  background: var(--dialog-chip);
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 4px 2px;
}

.collection-item {
  border: 1px solid var(--dialog-chip-border);
  border-radius: 10px;
  padding: 6px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s;
  background: var(--dialog-chip);
}

.collection-item:hover {
  border-color: rgba(255, 255, 255, 0.6);
}
.collection-item.active {
  border-color: var(--focus-ring);
}
.collection-item.locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.collection-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}

.collection-item .item-name {
  font-size: 0.68rem;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.collection-item .item-rarity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 3px;
  vertical-align: middle;
}

.active-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 0.6rem;
  background: var(--focus-ring);
  color: #000;
  border-radius: 3px;
  padding: 1px 3px;
  font-weight: 800;
}

/* Figuren-Begleiter – unten rechts fix */
#companion-figure {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: clamp(130px, 18vw, 240px);
  object-fit: contain;
  pointer-events: none;
  z-index: 5;
  opacity: 0.95;
  animation: companion-float 3s ease-in-out infinite;
}

@keyframes companion-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* ===========================================================================
   „Nur Hintergrund"-Modus – blendet den gesamten Vordergrund aus,
   nur das Body-Hintergrundbild bleibt sichtbar. Klick holt alles zurück.
   =========================================================================== */
body.bg-peek main,
body.bg-peek #companion-figure {
  display: none !important;
}
/* ALT: nur `main` und der Begleiter verschwanden.
   NEU: offener Dialog und seine Abdunklung ebenfalls.
   Grund: Seit das Auge auch bei offener Sammlung, Kiste, Aufgabe oder
   Bestenliste bedienbar ist (body.hud-fest-frei), trifft man genau den Fall,
   fuer den der Knopf gedacht ist — einen Hintergrund ansehen, bevor man ihn
   kauft. Die Dialoge stehen im Dokument **neben** `main`, nicht darin; ohne
   diese Regel blieb der Kasten mitten im Bild stehen und der Schleier legte
   62 % Schwarz ueber genau den Hintergrund, den man pruefen wollte.
   Der Dialog bleibt dabei offen — nur unsichtbar. Der naechste Klick beendet
   den Modus (siehe js/main.js) und er steht unveraendert wieder da. */
body.bg-peek dialog[open],
body.bg-peek .dlg-backdrop {
  display: none !important;
}
body.bg-peek {
  cursor: pointer;
}

body.bg-peek::after {
  content: "Klicken, um zurückzukehren";
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 0.85rem;
  border-radius: 20px;
  pointer-events: none;
  z-index: 100;
  animation: peek-hint 2.6s ease forwards;
}
@keyframes peek-hint {
  0%,
  100% {
    opacity: 0;
  }
  12%,
  70% {
    opacity: 1;
  }
}

/* Gewinn-GIF – zentriert im .spacer */
#win-gif-overlay {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: contain;
  border-radius: 8px;
  pointer-events: none;
  z-index: 10;
  animation: win-gif-in 0.4s ease both;
}

@keyframes win-gif-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Coins-Earn-Toast */
.toast-coins {
  color: var(--focus-ring);
  font-weight: 700;
}

/* ===========================================================================
   Lautstärke-Popover (Sound-Button → Musik- & Sound-Regler)
   =========================================================================== */
/* Der Kartenabstand-Regler klappt genauso auf wie die Lautstärke und teilt
   sich deshalb ihr Aussehen. */
.sound-menu,
.spread-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9500; /* über dem Hauptmenü (500) und der übrigen UI */
  width: 260px;
  max-width: 92vw;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: 14px;
  background: rgba(14, 19, 34, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
}
.sound-menu[hidden],
.spread-menu[hidden] {
  display: none;
}
.spread-menu {
  width: 300px;
  padding: 16px 18px;
}
/* Die Zeile des Lautstärkereglers ist ein Raster aus vier Spalten (Symbol,
   Beschriftung, Regler, Zahl). Hier gibt es nur drei Elemente, der Regler
   landete dadurch in der schmalen Beschriftungsspalte und war 46px breit.
   Deshalb hier eine eigene Aufteilung: Symbole außen, Regler nimmt den Rest. */
.spread-menu .sound-menu-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.spread-menu .btn-ico {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  opacity: 0.75;
}
.spread-menu input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 24px;
  accent-color: var(--btn-border);
  cursor: pointer;
}
.sound-menu-row {
  display: grid;
  grid-template-columns: 22px 46px 1fr 34px;
  align-items: center;
  gap: 8px;
}
.sound-menu-ico {
  font-size: 1rem;
  text-align: center;
}
.sound-menu-label {
  font-size: 0.82rem;
  font-weight: 600;
}
.sound-menu-val {
  font-size: 0.78rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--focus-ring, #fbbf24);
}

/* Range-Slider – schlanke, themen-neutrale Optik in beiden Modi */
.sound-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  outline: none;
  cursor: pointer;
  min-height: 0; /* überschreibt globale button-artige min-height nicht nötig */
  padding: 0;
}
.sound-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--focus-ring, #fbbf24);
  border: 2px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.sound-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--focus-ring, #fbbf24);
  border: 2px solid rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.sound-slider:focus-visible {
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.35);
}

/* ===========================================================================
   Tägliche Belohnung (Daily Reward Popup)
   =========================================================================== */
/* Tagesbelohnung und Tagesaufgaben teilen sich diese Klassen. Die Farben
   kommen aus den Themen-Variablen, damit sie im hellen Modus hell werden wie
   Kisten, Sammlung und Bestenliste — vorher standen hier feste Dunkelwerte. */
.daily-dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(1220px, 97vw);
  color: var(--dialog-text);
}
.daily-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.daily-box {
  position: relative;
  padding: 40px 40px 44px;
  border-radius: 22px;
  /* dasselbe Glas wie #dialog-chests, #dialog-collection, #dialog-highscores */
  background: var(--dialog-glass);
  border: 1px solid var(--dialog-glass-border);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: var(--dialog-shadow);
  text-align: center;
}
.daily-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border-radius: 8px;
  background: var(--dialog-chip);
  border: 1px solid var(--dialog-chip-border);
  color: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.daily-close:hover {
  background: var(--dialog-chip-border);
}
.daily-title {
  font-size: 2.45rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.daily-subtitle {
  font-size: 1.2rem;
  color: var(--text-muted, #9ca3af);
  margin-bottom: 30px;
}
.daily-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
@media (max-width: 520px) {
  .daily-days {
    grid-template-columns: repeat(4, 1fr);
  }
}
.daily-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 32px 8px;
  min-height: 172px;
  border-radius: 18px;
  background: var(--dialog-chip);
  border: 1px solid var(--dialog-chip-border);
}
.daily-day-label {
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #9ca3af);
}
.daily-day-reward {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 1.7rem;
}
.daily-day-reward .coin-icon {
  width: 33px;
  height: 33px;
}
.daily-day-chest {
  font-size: 1.4rem;
}
.daily-day.is-chest .daily-day-reward {
  color: var(--focus-ring, #fbbf24);
}

/* Abgeholte Tage: grüner Haken über der Zelle */
.daily-day-check {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: #22c55e;
  background: rgba(8, 12, 20, 0.55);
  border-radius: 18px;
}
.daily-day.is-claimed .daily-day-check {
  display: flex;
}

/* Heute abholbar: goldener Rahmen */
.daily-day.is-today {
  border-color: var(--focus-ring, #fbbf24);
  background: rgba(251, 191, 36, 0.1);
  box-shadow:
    0 0 0 2px rgba(251, 191, 36, 0.35),
    0 0 16px rgba(251, 191, 36, 0.3);
}

.daily-claim {
  background: linear-gradient(180deg, #f5c542, #e0a92e);
  color: #1a1400;
  font-weight: 800;
  border: none;
  padding: 18px 64px;
  border-radius: 14px;
  font-size: 1.45rem;
  cursor: pointer;
}
.daily-claim:hover {
  background: linear-gradient(180deg, #ffd45a, #eab534);
}
.daily-claim:disabled {
  background: rgba(120, 120, 130, 0.35);
  color: var(--text-muted, #9ca3af);
  cursor: not-allowed;
}

/* Kistenbild in der Daily-Reihe (Tag 7 = Hero Chest) */
.daily-chest-img {
  width: 82px;
  height: 82px;
  object-fit: contain;
  display: block;
}

/* „2. per Ad"-Button im Reward-Dialog (Hero Chest, Tag 7) */
.reward-ad {
  display: inline-flex;
  align-items: center;
  /* Als Variable, damit die Hüllen des Countdowns denselben Abstand benutzen,
     ohne ihn zu wiederholen (Custom Properties werden vererbt). */
  --ad-gap: 5px;
  gap: var(--ad-gap);
  /* Variablen statt festem Weiß: Der Knopf sitzt in Dialogen, die im hellen
     Thema hell sind — weiße Schrift auf 8 % Weiß wäre dort unsichtbar. */
  background: var(--dialog-chip);
  border: 1px solid var(--dialog-chip-border);
  color: inherit;
  font-weight: 700;
}
.reward-ad:hover {
  background: var(--dialog-chip-border);
}
.reward-ad:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Restzeit bis zur nächsten möglichen Werbung. Sie steht während der Sperre
   allein im Knopf und damit genau in dessen Mitte — die Knöpfe zentrieren ihren
   Inhalt bereits (`justify-content: center`), es bleibt also nichts daneben,
   das die Zahl aus der Mitte schöbe.

   `tabular-nums` hält die Ziffern gleich breit, sonst zappelt der Knopf im
   Sekundentakt. `line-height: 1` ist wichtig: mit der geerbten Zeilenhöhe wäre
   die Box deutlich höher als die Ziffern, und weil Ziffern keine Unterlänge
   haben, sässe die Zahl sichtbar zu hoch. So eng gefasst bleibt sie im Browser
   gemessen auf 0,4px an der Knopfmitte — ein zusätzlicher Innenabstand brachte
   in der Messreihe nur 0,02px und ist den Sonderfall nicht wert. */
.ad-countdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
/* Der Quest-Reroll ist nur 34px breit und setzt eine grosse Schrift für sein
   „↻" — die Zeit muss dort kleiner sein, sonst läuft sie über. */
.quest-reroll .ad-countdown {
  font-size: 0.62em;
}

/* ---------------------------------------------------------------------------
   GameMonetize: „Powered by"-Leiste unter der Werbung
   ---------------------------------------------------------------------------
   Das SDK legt diese Leiste selbst an (#gmLoadingText, 35px hoch, am unteren
   Rand). Der Link darin ist aber nur so breit wie das Logo (131px), wodurch
   „Powered by" in eine eigene Zeile über das Logo rutscht — zusammen 52px.
   Am 17.08.2026 im Browser gemessen: Der Link endet bei y=829, der sichtbare
   Bereich bei y=808. Die unteren 21px, also praktisch das ganze Logo, liegen
   ausserhalb des Bildes.

   Nebeneinander gesetzt sind Text und Logo nur 28px hoch und passen in die
   Leiste. Das Logo behält dabei seine Originalgrösse.

   `!important` ist nötig, weil das SDK inline stylt. Ändert es seine IDs,
   greifen die Regeln einfach nicht mehr — kaputt geht dadurch nichts. */
#gmLoadingText a {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  /* Statt oben zu kleben mittig in der Leiste sitzen. */
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
  white-space: nowrap !important;
}
#gmLoadingText #loading-text-gm {
  top: 0 !important;
  padding-right: 0 !important;
}

/* Die Knopfbreite darf sich durch den Countdown NICHT ändern. Sonst schrumpft
   im Hero-Panel die Knopfspalte, der Dialog wird schmaler und das Kistenraster
   klappt von drei auf zwei Spalten um (nachgemessen: 531px → 505px Dialog,
   720px → 1016px hoch). Deshalb bleibt die normale Beschriftung unsichtbar als
   Platzhalter stehen und hält die Breite; die Zeit liegt in derselben
   Rasterzelle darüber und ist dadurch exakt zentriert.

   Grid statt `position: absolute`: So zählt die breitere von beiden für die
   Zellenbreite. Bei schmalen Knöpfen (Quest-Reroll mit „↻") ist das die Zeit —
   die würde sonst überlaufen. */
.ad-zeitbox {
  display: inline-grid;
  align-items: center;
  justify-items: center;
  /* Reicht den Abstand des Knopfes an den Platzhalter durch (siehe unten). */
  gap: var(--ad-gap, 5px);
}
.ad-zeitbox > * {
  grid-area: 1 / 1;
}
/* Der Platzhalter muss seine Teile genauso setzen wie der Knopf selbst — als
   Flex-Zeile mit demselben Abstand. Inline gesetzt wäre er ein paar Pixel
   schmaler, und die Knopfbreite änderte sich beim Sperrbeginn doch wieder. */
.ad-zeitbox__platz {
  display: inline-flex;
  align-items: center;
  gap: var(--ad-gap, 5px);
  visibility: hidden;
}
/* Der sichtbare Teil, wenn nur die Zeit gezeigt wird. */
.ad-zeitbox__inhalt {
  display: inline-flex;
  align-items: center;
  gap: var(--ad-gap, 5px);
  white-space: nowrap;
}

/* Gestapelt: Beschriftung oben, Restzeit darunter. Nebeneinander passt beides
   nicht — im schmalsten Kisten-Knopf stehen 106px zur Verfügung, zusammen
   brauchen sie 150px (gemessen an der Goldkiste mit „−10 🪙 (19/35)"). Die
   Breite bleibt dabei die der Beschriftung, es entsteht also kein Sprung zur
   Seite; für die Höhe sorgt die min-height weiter unten. */
.ad-stapel {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.15;
}
/* Die obere Zeile ist die unveränderte Beschriftung – ihre Teile stehen wie im
   Knopf nebeneinander, mit demselben Abstand. */
.ad-stapel__label {
  display: inline-flex;
  align-items: center;
  gap: var(--ad-gap, 5px);
  white-space: nowrap;
}

/* ===========================================================================
   Einstellungen
   =========================================================================== */
.settings-box {
  max-width: min(420px, 94vw);
}
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
/* Beschriftung links, Bedienelement rechts — eine Zeile je Einstellung. */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--dialog-chip);
  border: 1px solid var(--dialog-chip-border);
}
.settings-label {
  font-weight: 600;
  text-align: start;
}
/* Die Knöpfe kommen aus der Bedienleiste und bringen deren Breitenregel für
   schmale Screens mit. Im Dialog ist Platz, hier zählt nur die Trefferfläche. */
.settings-row .hud-btn {
  flex: 0 0 auto;
  width: 44px;
  min-width: 44px;
  justify-content: center;
}

/* ===========================================================================
   Promo-Code-Dialog

   Erbt Kasten, Titel und Schliessknopf von `.daily-box` — dieselbe Hülle wie
   Einstellungen und Sprachauswahl. Eigene Regeln gibt es nur für die Zeile aus
   Eingabefeld und Knopf sowie für die Rückmeldung.
   =========================================================================== */
.promo-box {
  max-width: min(460px, 94vw);
}

.promo-hint {
  margin: 6px 0 14px;
  opacity: 0.8;
  font-size: 0.9rem;
  text-align: center;
}

.promo-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* `min-width: 0` ist Pflicht: Ein Eingabefeld bringt eine Mindestbreite aus der
   Grösse-Angabe mit und schiebt den Knopf sonst auf schmalen Geräten aus dem
   Kasten. Dieselbe Falle wie bei den Dialoggittern (siehe B-16). */
.promo-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--dialog-chip);
  border: 1px solid var(--dialog-chip-border);
  color: inherit;
  font: inherit;
  /* Codes bestehen aus Ziffern und Grossbuchstaben; feste Laufweite macht
     Verwechslungen beim Vergleichen mit dem Zettel unwahrscheinlicher. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.promo-input::placeholder {
  opacity: 0.45;
  letter-spacing: 0.06em;
}

.promo-btn {
  flex: 0 0 auto;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid #f5b301;
  background: #f5b301;
  color: #1a1a1a;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.14s ease, transform 0.1s ease;
}
.promo-btn:hover:not(:disabled) { background: #ffc627; }
.promo-btn:active:not(:disabled) { transform: translateY(1px); }
.promo-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Die Meldung belegt ihre Zeile dauerhaft, auch wenn sie leer ist — sonst
   springt der Dialog bei jeder Rückmeldung in der Höhe. */
.promo-msg {
  min-height: 1.4em;
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.9rem;
}
.promo-msg--fehler {
  color: #ff6b6b;
}

/* ===========================================================================
   Sprachauswahl (Language picker)
   =========================================================================== */
.lang-box {
  max-width: min(640px, 94vw);
}
.lang-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
  margin-top: 10px;
}
.lang-item {
  min-height: 0;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--dialog-chip);
  border: 1px solid var(--dialog-chip-border);
  color: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lang-item:hover {
  background: var(--dialog-chip-border);
}
.lang-item.is-active {
  border-color: var(--focus-ring, #fbbf24);
  background: rgba(251, 191, 36, 0.14);
  color: var(--focus-ring, #fbbf24);
}

/* ===========================================================================
   Daily Quests (Tagesaufgaben)
   =========================================================================== */

/* Badge am HUD-Button (Anzahl abholbarer Quests) */
#btn-quests {
  position: relative;
}
.hud-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.hud-badge[hidden] {
  display: none;
}

.quests-box {
  width: min(560px, 92vw);
  text-align: left;
}
.quests-box .daily-title,
.quests-box .daily-subtitle {
  text-align: center;
}

.quests-counter {
  text-align: center;
  font-weight: 700;
  color: var(--text-muted, #9ca3af);
  margin-bottom: 18px;
}

/* Zehn Aufgaben werden seitenweise gezeigt (fünf je Seite, siehe PRO_SEITE in
   js/quests.js). Die Höhenbegrenzung bleibt trotzdem als Netz: auf einem sehr
   flachen Fenster reichen auch fünf Zeilen über den Rand. */
.quests-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: min(56dvh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}
.quests-list::-webkit-scrollbar {
  width: 8px;
}
.quests-list::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.45);
  border-radius: 4px;
}

/* Blätterleiste unter der Liste. Sie wird nur erzeugt, wenn es mehr als eine
   Seite gibt — siehe _renderBlaetterleiste(). */
.quests-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 22px;
  padding-top: 18px;
  /* Feine Trennlinie: setzt die Leiste von der letzten Aufgabe ab, statt sie
     direkt darunter kleben zu lassen. */
  border-top: 1px solid var(--dialog-chip-border);
}
.quests-pager-btn {
  /* `flex: 0 0 auto` ist wichtig: Ohne das schrumpfen die Knöpfe im Flexbox-
     Layout und werden zu schmalen Streifen statt Quadraten. */
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1.5rem;
  border-radius: 12px;
  background: var(--dialog-chip);
  border: 1px solid var(--dialog-chip-border);
  color: inherit;
  cursor: pointer;
  transition: background 0.14s ease;
}
.quests-pager-btn:hover:not(:disabled) {
  background: var(--btn-hover);
}
.quests-pager-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.quests-pager-state {
  flex: 0 0 auto;
  min-width: 72px;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.quest {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.quest.is-done {
  border-color: var(--focus-ring, #fbbf24);
  background: rgba(251, 191, 36, 0.08);
}
.quest.is-claimed {
  opacity: 0.6;
}

.quest-info {
  flex: 1;
  min-width: 0;
}
.quest-title {
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 8px;
}
.quest-bar {
  height: 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.quest-bar-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #f5c542, #e0a92e);
  transition: width 0.25s ease;
}
.quest.is-done .quest-bar-fill {
  background: #22c55e;
}
.quest-progress {
  margin-top: 5px;
  font-size: 0.82rem;
  color: var(--text-muted, #9ca3af);
}

.quest-reward {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
  font-size: 1.15rem;
  flex-shrink: 0;
}
.quest-reward .coin-icon {
  width: 24px;
  height: 24px;
}

.quest-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  flex-shrink: 0;
  min-width: 92px;
}
.quest-claim {
  background: linear-gradient(180deg, #f5c542, #e0a92e);
  color: #1a1400;
  font-weight: 800;
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.92rem;
  cursor: pointer;
}
.quest-claim:hover {
  background: linear-gradient(180deg, #ffd45a, #eab534);
}
.quest-double {
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 0.82rem;
  justify-content: center;
  cursor: pointer;
}
.quest-reroll {
  align-self: flex-end;
  width: 34px;
  height: 34px;
  padding: 0;
  justify-content: center;
  border-radius: 10px;
  font-size: 1.15rem;
  cursor: pointer;
}
.quest-claimed {
  color: #22c55e;
  font-weight: 800;
  font-size: 0.95rem;
  text-align: center;
}

@media (max-width: 520px) {
  .quest {
    flex-wrap: wrap;
  }
  .quest-actions {
    flex-direction: row;
    min-width: 0;
    width: 100%;
    justify-content: flex-end;
  }
}