/* ============================================================================
   gadplan Games — gemeinsames Spiel-Design ("Let's Play")
   ----------------------------------------------------------------------------
   EINE Datei für ALLE Spiele, gebaut nach den elf Vorlagen von Uta
   (Mail vom 07.09.2026). Was in allen elf Bildern gleich ist, steht hier:

     - cremefarbener Grund mit weichen Wellen in Rosé/Mauve/Grau an den Rändern
     - Titelblock: "LET'S PLAY" · SPIELNAME · roséfarbener Strich · Untertitel
     - weiße Leisten mit weichen Ecken für Zeit, Punkte, Fortschritt
     - ein roséfarbener Knopf mit Pfeil als Handlungsaufforderung
     - handschriftliche Hinweise mit geschwungenem Pfeil, nur für das,
       was am fertigen Spiel personalisierbar ist

   Alles Farbige und alle Maße stehen als CSS-Variablen unter :root. Damit kann
   ein Event (oder ein Kunde in den Einstellungen, oder eine KI) das Aussehen
   ändern, ohne dass hier eine Zeile angefasst wird — siehe lib/game-theme.js.
   ========================================================================== */

:root {
  /* Grundfarben aus den Vorlagen */
  --gg-cream:        #faf6f2;
  --gg-cream-2:      #f6efe9;
  --gg-blush:        #f0ded6;
  --gg-mauve:        #e3d5d4;
  --gg-mauve-deep:   #d3c4c4;
  --gg-stone:        #ddd8d6;
  --gg-stone-deep:   #c9c3c2;
  --gg-sand:         #e4d8d2;
  --gg-taupe:        #c9b4a8;
  --gg-white:        #ffffff;

  /* Der einzige warme Akzent: das Rosé/Terrakotta der Knöpfe und Striche */
  --gg-rose:         #b5806f;
  --gg-rose-deep:    #a06f5f;

  /* Schrift ist fast schwarz, die Nebentexte blaugrau */
  --gg-black:        #1c1c1c;
  --gg-navy:         #1f2a44;
  --gg-grey:         #6e6e6e;
  --gg-grey-light:   #a8a8a8;
  --gg-grey-dark:    #4d4d4d;
  --gg-amber:        #d97706;

  /* Rollen — nur diese werden im Markup benutzt */
  --gg-bg:           var(--gg-cream);
  --gg-bg-alt:       var(--gg-cream-2);
  --gg-surface:      var(--gg-white);
  --gg-surface-2:    rgba(255, 255, 255, 0.82);
  --gg-ink:          var(--gg-black);
  --gg-ink-soft:     #4a4f5c;
  --gg-ink-faint:    #8b8b92;
  --gg-line:         rgba(28, 28, 28, 0.10);
  --gg-accent:       var(--gg-rose);
  --gg-accent-deep:  var(--gg-rose-deep);
  --gg-accent-ink:   var(--gg-white);
  --gg-note-ink:     var(--gg-navy);

  /* Die Wellen am Rand */
  --gg-wave-1:       var(--gg-blush);
  --gg-wave-2:       var(--gg-mauve);
  --gg-wave-3:       var(--gg-stone);
  /* Die Wolken der ausgearbeiteten Landschaft (.gg-canvas--scenic) */
  --gg-cloud:        #efe4dd;

  /* Kartenrückseite (Memory) */
  --gg-tile-base:    #f3ebe6;
  --gg-tile-blush:   #ecd9d0;
  --gg-tile-stone:   #b9b0aa;

  /* Schrift — spielübergreifend identisch */
  --gg-font:         'Inter', 'Helvetica Neue', Arial, sans-serif;
  --gg-font-hand:    'Caveat', 'Segoe Script', cursive;
  --gg-title-size:   clamp(2rem, 6vw, 4.25rem);
  --gg-title-weight: 800;
  --gg-title-track:  -0.01em;

  /* Form */
  --gg-radius:       22px;
  --gg-radius-sm:    14px;
  --gg-radius-pill:  999px;
  --gg-shadow:       0 20px 50px rgba(90, 70, 62, 0.10);
  --gg-shadow-soft:  0 6px 20px rgba(90, 70, 62, 0.08);
  --gg-gap:          clamp(0.75rem, 2vw, 1.5rem);
}

/* ── Grundgerüst ─────────────────────────────────────────────────────────── */

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

body.gg {
  margin: 0;
  min-height: 100svh;
  background: var(--gg-bg);
  color: var(--gg-ink);
  font-family: var(--gg-font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* Die weichen Wellen. Rein dekorativ, nie klickbar.
   Zwei Ecken tragen sie: oben links und unten rechts, wie in allen Vorlagen. */
.gg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.gg-canvas::before,
.gg-canvas::after {
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
/* oben links */
.gg-canvas::before {
  left: -6%;
  top: -12%;
  width: 46%;
  height: 62%;
  background-image:
    radial-gradient(60% 55% at 18% 22%, var(--gg-wave-2) 0%, transparent 72%),
    radial-gradient(55% 48% at 6% 46%, var(--gg-wave-1) 0%, transparent 70%);
}
/* unten rechts — die breite, mehrschichtige Welle */
.gg-canvas::after {
  right: -10%;
  bottom: -18%;
  width: 78%;
  height: 66%;
  background-image:
    radial-gradient(58% 52% at 78% 82%, var(--gg-wave-3) 0%, transparent 70%),
    radial-gradient(64% 46% at 52% 96%, var(--gg-wave-2) 0%, transparent 72%),
    radial-gradient(50% 40% at 92% 60%, var(--gg-wave-1) 0%, transparent 70%);
}

/* ── Ausgearbeitete Landschaft (.gg-canvas--scenic) ──────────────────────── */
/* Die Vorlage zeigt mehr als zwei weiche Ecken: geschichtete Wellen über die
   ganze untere Kante, einen Farbverlauf oben links und ein paar Wolken.
   Die Formen liegen als Inline-SVG im Markup (+gameCanvas('scenic')), damit sie
   die Kundenfarben über --gg-wave-* mittragen — ein Bild könnte das nicht.
   Die beiden Basis-Flächen fallen dafür weg, sonst läge Farbe doppelt.

   Die Variante traegt KEINE eigene Grundfarbe: der Grund gehoert dem <body>
   (--gg-bg bzw. was die Einstellungen des Events daraus machen). Eine deckende
   Flaeche ueber dem ganzen Bildschirm wuerde die eingestellte Hintergrundfarbe
   uebermalen — die Einstellung waere wirkungslos und niemand faende den Grund. */

.gg-canvas--scenic { background: none; }
.gg-canvas--scenic::before,
.gg-canvas--scenic::after { content: none; }

/* Oben links: der weiche Verlauf, der in der Vorlage über den Rand läuft. */
.gg-canvas__glow {
  position: absolute;
  left: -7%;
  top: -10%;
  width: clamp(16rem, 34vw, 32rem);
  height: clamp(22rem, 86vh, 58rem);
  opacity: 0.9;
  filter: blur(6px);
}

/* Unten: die geschichteten Wellen über die volle Breite. */
.gg-canvas__hills {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(11rem, 46vh, 26rem);
}

/* Die Wolken. Platz und Größe stehen hier, nicht im Markup. */
.gg-cloud {
  position: absolute;
  width: clamp(5rem, 13vw, 11rem);
  height: auto;
  opacity: 0.7;
  filter: blur(0.5px);
}
.gg-cloud--a { left: 14%;  top: 38%; width: clamp(6rem, 15vw, 13rem); opacity: 0.55; }
.gg-cloud--b { right: 9%;  top: 27%; }
.gg-cloud--c { right: 3%;  top: 52%; width: clamp(4rem, 9vw, 8rem); opacity: 0.6; }
.gg-cloud--d { left: 2%;   top: 12%; width: clamp(4rem, 8vw, 7rem); opacity: 0.45; }

/* Hochkant am Telefon bleibt die Landschaft, wird aber flacher und ruhiger —
   sonst frisst sie die halbe Spielfläche. */
@media (max-width: 640px) {
  .gg-canvas__hills { height: clamp(8rem, 30vh, 14rem); }
  .gg-canvas__glow { width: 70vw; height: 34vh; }
  .gg-cloud--a, .gg-cloud--d { display: none; }
  .gg-cloud--b { top: 16%; right: 4%; width: 7rem; }
  .gg-cloud--c { top: 62%; right: 62%; width: 5rem; }
}

/* Flaches Querformat: die Wellen dürfen nur den unteren Rand säumen. */
@media (max-height: 520px) and (orientation: landscape) {
  .gg-canvas__hills { height: 38vh; }
  .gg-cloud--a, .gg-cloud--c, .gg-cloud--d { display: none; }
  .gg-cloud--b { top: 10%; }
}

/* Die Bühne: Querformat zuerst, bricht auf schmalen Geräten sauber um. */
.gg-stage {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gg-gap);
  padding: clamp(1rem, 3vw, 2.75rem) clamp(0.75rem, 3vw, 3rem);
  padding-bottom: max(clamp(1rem, 3vw, 2.75rem), env(safe-area-inset-bottom));
}
.gg-stage--center { justify-content: center; }
.gg-stage--wide { max-width: 1320px; margin-inline: auto; width: 100%; }

/* ── Titelblock ──────────────────────────────────────────────────────────── */

.gg-title {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.04;
}
.gg-title__eyebrow {
  font-size: clamp(0.62rem, 1.2vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gg-ink);
  margin-inline-start: 0.38em; /* gleicht das Tracking rechts aus */
}
.gg-title__main {
  margin: 0;
  font-size: var(--gg-title-size);
  font-weight: var(--gg-title-weight);
  letter-spacing: var(--gg-title-track);
  text-transform: uppercase;
  color: var(--gg-ink);
}
/* Der kurze roséfarbene Strich zwischen Titel und Untertitel. */
.gg-title__rule {
  width: 3.25rem;
  height: 3px;
  border-radius: 2px;
  background: var(--gg-accent);
}
.gg-title__sub {
  font-size: clamp(0.68rem, 1.35vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gg-ink-soft);
  margin-inline-start: 0.26em;
}
/* Stopwatch zeigt den Untertitel als normalen Satz statt in Versalien. */
.gg-title__sub--plain {
  text-transform: none;
  letter-spacing: 0;
  margin-inline-start: 0;
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
}

/* ── Statusleiste ────────────────────────────────────────────────────────── */
/* Zwei Bauformen aus den Vorlagen:
   .gg-hud   — eine zentrale weiße Leiste (Memory, Labyrinth, Price Guesser)
   .gg-stat  — freistehende Kacheln in den oberen Ecken (Catch & Win, Falling) */

.gg-hud {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 40rem;
  background: var(--gg-surface);
  border-radius: var(--gg-radius-pill);
  box-shadow: var(--gg-shadow-soft);
  padding: 0.4rem;
}
.gg-hud__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex: 1 1 0;
  padding: 0.6rem clamp(0.75rem, 2vw, 1.5rem);
  white-space: nowrap;
}
.gg-hud__item + .gg-hud__item { box-shadow: inset 1px 0 0 var(--gg-line); }
.gg-hud__icon {
  display: inline-flex;
  color: var(--gg-ink);
  font-size: 22px;
  line-height: 1;
}
.gg-hud__icon--accent { color: var(--gg-amber); }
.gg-hud__label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--gg-ink-soft);
}
.gg-hud__value {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gg-ink);
}
.gg-hud__value--warn { color: var(--gg-accent-deep); animation: gg-pulse 0.9s ease infinite; }
@keyframes gg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.gg-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--gg-surface);
  border-radius: var(--gg-radius);
  box-shadow: var(--gg-shadow-soft);
  padding: 0.7rem 1.4rem 0.7rem 0.7rem;
}
.gg-stat--right { flex-direction: row-reverse; padding: 0.7rem 0.7rem 0.7rem 1.4rem; }
.gg-stat__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 50%;
  background: var(--gg-taupe);
  color: var(--gg-white);
  font-size: 26px;
}
.gg-stat__body { display: flex; flex-direction: column; line-height: 1.15; }
.gg-stat__label { font-size: 0.85rem; font-weight: 500; color: var(--gg-ink-soft); }
.gg-stat__value {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--gg-ink);
}

/* Die Ecken-Kacheln liegen über dem Spielfeld, ohne es anzufassen. */
.gg-stat-row {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.75rem);
  left: clamp(0.75rem, 2vw, 1.75rem);
  right: clamp(0.75rem, 2vw, 1.75rem);
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  pointer-events: none;
}
/* Catch & Win / Falling Items tragen den Titelblock zwischen den beiden
   Ecken-Kacheln in derselben Zeile (siehe Vorlage) statt darüber. */
.gg-stat-row--with-title {
  /* Drei Spalten statt Flex: mit Flex stand der Titel zwischen zwei
     unterschiedlich breiten Kacheln ("Time Left" vs. "Score") und damit
     neben der Mitte des Spielfelds, auf dem das Ergebnis darunter mittig
     steht (gemeldet 15.10.2026, Mathis). Die gleich breiten Aussenspalten
     halten den Titel exakt in der Mitte; 1fr (nicht minmax(0, 1fr))
     laesst die Kacheln nie unter ihre Inhaltsbreite schrumpfen, am Telefon
     bricht dann der Titel um, statt unter den Kacheln zu liegen. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.gg-stat-row--with-title .gg-title {
  min-width: 0;
}
.gg-stat-row--with-title > .gg-stat { justify-self: start; }
.gg-stat-row--with-title > .gg-stat--right { justify-self: end; }

/* ── Flächen, Karten, Rahmen ─────────────────────────────────────────────── */

.gg-card {
  background: var(--gg-surface);
  border-radius: var(--gg-radius);
  box-shadow: var(--gg-shadow-soft);
}
/* Der weiße Rahmen um Bilder und Spielfelder (Wimmelbild, Fehlersuche,
   Price Guesser, Labyrinth). */
.gg-frame {
  background: var(--gg-surface);
  border-radius: var(--gg-radius);
  box-shadow: var(--gg-shadow);
  padding: clamp(0.5rem, 1.2vw, 0.85rem);
  overflow: hidden;
}
.gg-frame > img,
.gg-frame > canvas { display: block; width: 100%; height: auto; border-radius: calc(var(--gg-radius) - 8px); }

/* Die Memory-Kartenrückseite: weiche Wellen in Creme, Rosé und Warmgrau,
   in einem weißen Rahmen. Vier Varianten, damit die Karten nicht wie
   Fotokopien nebeneinander liegen — genau wie in der Vorlage. */
.gg-tile {
  position: relative;
  border-radius: var(--gg-radius-sm);
  overflow: hidden;
  background: var(--gg-tile-base);
  box-shadow: inset 0 0 0 5px var(--gg-white), var(--gg-shadow-soft);
}
.gg-tile::before,
.gg-tile::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.gg-tile::before {
  width: 150%; height: 140%;
  left: -58%; top: 34%;
  background: var(--gg-tile-stone);
  opacity: 0.85;
}
.gg-tile::after {
  width: 120%; height: 110%;
  right: -46%; top: -46%;
  background: var(--gg-tile-blush);
  opacity: 0.9;
}
.gg-tile--v2::before { left: -50%; top: 46%; width: 165%; }
.gg-tile--v2::after  { right: -38%; top: -38%; }
.gg-tile--v3::before { left: -66%; top: 28%; width: 140%; }
.gg-tile--v3::after  { right: -54%; top: -52%; width: 135%; }
.gg-tile--v4::before { left: -44%; top: 52%; }
.gg-tile--v4::after  { right: -60%; top: -30%; }
.gg-tile__brand {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16%;
}
.gg-tile__brand img { max-width: 74%; max-height: 62%; object-fit: contain; }

/* ── Schaltflächen ───────────────────────────────────────────────────────── */

.gg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.95rem 2.4rem;
  border: 0;
  border-radius: var(--gg-radius-pill);
  background: var(--gg-accent);
  color: var(--gg-accent-ink);
  font-family: var(--gg-font);
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: var(--gg-shadow-soft);
}
.gg-btn:hover { background: var(--gg-accent-deep); transform: translateY(-1px); box-shadow: var(--gg-shadow); }
.gg-btn:active { transform: scale(0.98); }
.gg-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.gg-btn--ghost {
  background: var(--gg-surface);
  color: var(--gg-ink);
  box-shadow: inset 0 0 0 1px var(--gg-line), var(--gg-shadow-soft);
}
.gg-btn--ghost:hover { background: var(--gg-bg-alt); }
/* Ein Knopf, der nur einen Satz trägt (Stopwatch), bleibt gemischt gesetzt. */
.gg-btn--plain { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Die weißen Tasten aus dem Zahlenfeld beim Price Guesser. */
.gg-key {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 2vw, 1.15rem);
  border: 0;
  border-radius: var(--gg-radius-sm);
  background: var(--gg-surface);
  box-shadow: inset 0 0 0 1px var(--gg-line), var(--gg-shadow-soft);
  font-family: var(--gg-font);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 700;
  color: var(--gg-ink);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.2s ease;
}
.gg-key:active { transform: scale(0.96); }
.gg-key--confirm { background: var(--gg-grey); color: var(--gg-white); box-shadow: var(--gg-shadow-soft); }
.gg-key--confirm:hover { background: var(--gg-grey-dark); }

.gg-input {
  width: 100%;
  padding: 0.9rem 1.2rem;
  border: 0;
  border-radius: var(--gg-radius-pill);
  background: var(--gg-surface);
  box-shadow: inset 0 0 0 1px var(--gg-line);
  font-family: var(--gg-font);
  font-size: 1rem;
  color: var(--gg-ink);
  text-align: center;
}
.gg-input:focus { outline: 2px solid var(--gg-accent); outline-offset: 1px; }

/* Der weiße Hinweisstreifen unter dem Spielfeld ("Gib deinen Tipp ein"). */
.gg-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.6rem;
  border-radius: var(--gg-radius-pill);
  background: var(--gg-surface);
  box-shadow: var(--gg-shadow-soft);
  color: var(--gg-ink-soft);
  font-size: 0.95rem;
}

/* ── Handschriftliche Hinweise ───────────────────────────────────────────── */
/* Nur für Hinweise auf Personalisierung. Genau diese Einschübe dürfen laut
   Vorlage wie handgeschrieben aussehen — Spielanweisungen nicht. */

.gg-note {
  font-family: var(--gg-font-hand);
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  line-height: 1.3;
  color: var(--gg-note-ink);
  max-width: 20ch;
  text-align: left;
}
.gg-note--rose { color: var(--gg-accent-deep); }
.gg-note--pinned {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

/* Der geschwungene Pfeil zum jeweiligen Bedienelement (Vorlagen 07.09.2026).
   EIN Grundpfad (zeigt nach unten rechts), gespiegelt/gedreht für die drei
   anderen Richtungen — sonst müsste jede Richtung ihren eigenen Pfad tragen. */
.gg-note--has-arrow {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
/* Grundreihenfolge im Markup ist Pfeil, dann Text - passt für die Pfeile,
   die nach links zeigen (der Pfeil steht auf der Zielseite, der Text hängt
   dran). Zeigt der Pfeil nach rechts, gehört er hinter den Text. */
.gg-note--arrow-down-right,
.gg-note--arrow-up-right {
  flex-direction: row-reverse;
}
.gg-note__arrow {
  flex: none;
  width: clamp(2rem, 3.6vw, 2.9rem);
  height: auto;
  margin-top: 0.1em;
}
.gg-note__arrow--up-right { transform: scaleY(-1); }
.gg-note__arrow--down-left { transform: scaleX(-1); }
.gg-note__arrow--up-left { transform: scale(-1, -1); }

/* Die Hinweise sind Anmerkungen am Rand des Querformat-Layouts. Auf kleinen
   Geräten gibt es diesen Rand nicht - im Fluss schieben sie sich unter das
   Spielfeld und hinter die Demo-Kennzeichnung (gemeldet 10.10.2026, Mathis).
   Darum nur auf dem Desktop. !important, weil einzelne Spiele (Price Guesser,
   Perfect Circle) die Hinweise mit eigenen Regeln positionieren. */
@media (max-width: 1099px) {
  .gg-note { display: none !important; }
}

/* ── Overlays (Start, Ergebnis, Demo-Ende) ───────────────────────────────── */

.gg-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(28, 28, 28, 0.26);
  backdrop-filter: blur(4px);
}
.gg-overlay[hidden] { display: none; }
.gg-panel {
  width: min(30rem, 100%);
  max-height: 92svh;
  overflow-y: auto;
  background: var(--gg-surface);
  border-radius: var(--gg-radius);
  box-shadow: var(--gg-shadow);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}

/* ── Demo-Kennzeichnung ──────────────────────────────────────────────────── */

.gg-demo-badge {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 50;
  background: var(--gg-surface-2);
  color: var(--gg-ink-soft);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: var(--gg-radius-pill);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

/* ── Mobil ───────────────────────────────────────────────────────────────── */
/* Die Vorlagen sind auf Querformat gerechnet. Sie müssen aber auch hochkant
   am Telefon spielbar sein, deshalb wird hier nichts vom Spiel ausgeblendet,
   sondern nur enger gesetzt. (Die Randhinweise .gg-note sind kein Teil des
   Spiels und fallen schon unter 1100px weg, siehe oben.) */

@media (max-width: 640px) {
  :root {
    --gg-radius: 18px;
    --gg-radius-sm: 12px;
    --gg-gap: 0.75rem;
  }
  .gg-stage { justify-content: flex-start; padding-top: 1.25rem; }
  .gg-title__eyebrow { letter-spacing: 0.28em; margin-inline-start: 0.28em; }
  .gg-title__sub { letter-spacing: 0.18em; margin-inline-start: 0.18em; }
  .gg-hud__item { padding-inline: 0.5rem; gap: 0.35rem; }
  .gg-hud__label { display: none; }
  .gg-btn { width: 100%; padding-inline: 1.25rem; }
  /* Die Ecken-Kacheln stehen hochkant nebeneinander und werden kleiner,
     statt sich über das halbe Spielfeld zu legen. */
  .gg-stat { gap: 0.5rem; padding: 0.4rem 0.8rem 0.4rem 0.4rem; }
  .gg-stat--right { padding: 0.4rem 0.4rem 0.4rem 0.8rem; }
  .gg-stat__badge { width: 2rem; height: 2rem; font-size: 18px; }
  .gg-stat__label { font-size: 0.68rem; }
}

/* Flaches Querformat am Telefon: Titel klein halten, damit das Spielfeld passt. */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --gg-title-size: 1.5rem; --gg-gap: 0.5rem; }
  .gg-stage { justify-content: flex-start; padding-block: 0.5rem; }
  .gg-title__sub, .gg-title__rule { display: none; }
  .gg-demo-badge { display: none; }
}

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