/* =========================================================
   Der Weihnachtsbaum – Styles
   1. Variablen   2. Basis      3. Spielfläche   4. Wahl-Icons
   5. Endkarte    6. HUD & Buttons  7. Drawer    8. Intro
   8b. Geheimes Ende  9. Animationen  10. Breite Spielfläche & weniger Bewegung
   ========================================================= */

/* ---------- 1. Variablen (Design-Tokens) ----------
   Größen mit cqw beziehen sich auf die Breite der Spielfläche (#game ist Container):
   Handy hochkant ≈ 375 px, Handy quer ≈ 210 px, Desktop bis ≈ 600 px – clamp() hält sie lesbar. */
:root {
  /* Farbe – neutral dunkel wie das Studiolicht der Clips, mi-Orange der Karte 2025 als einziger Akzent */
  --bg: #0c0c0c;                        /* Seitenhintergrund (Desktop links/rechts) */
  --surface: #161616;                   /* Drawer */
  --surface-2: #222;                    /* Kacheln, aktive Zeilen */
  --ink: #f6f3ee;                       /* warmes Weiß */
  --ink-dim: #a8a49e;                   /* Nebentext, ≈ 7:1 auf --surface */
  --ink-faint: #6b6762;                 /* Gesperrtes */
  --accent: #f29526;                    /* mi-Orange (wie icons/medienimpuls.svg) – für alles Orange, auch Logo und Ringe */
  --accent-ink: #1d1d1b;                /* Text auf Orange (Weiß hätte nur ≈ 2,4:1) */
  --pill-bg: rgba(255, 255, 255, .14);  /* graue Buttons ohne Rand: auf dem Menü ≈ #343434, über dem Video helles Milchglas */
  --paper: #fff;                        /* Karte 2025 */
  --paper-ink: #1d1d1b;
  --pencil: #3a3a38;

  /* Typo – Helvetica wie die Karte, Überschriften kräftig. Skala ≈ 1,25 */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-hand: "Gochi Hand", cursive;   /* liegt in fonts/ – auf allen Geräten gleich (Abschnitt 2) */
  --fs-xs:  clamp(11px, 3.2cqw, 13px);  /* „Danger Zone“ */
  --fs-md:  clamp(16px, 4.3cqw, 18px);  /* Buttons */
  --fs-lg:  clamp(18px, 5.4cqw, 23px);  /* „Neues Ende entdeckt!“, „FORTSCHRITT“, „Auspacken? Gedrückt halten!“ */
  --fs-xl:  clamp(24px, 7.6cqw, 34px);  /* Spiel-Hinweis im Intro */
  --fs-display: clamp(26px, 9.6cqw, 56px); /* „FROHE WEIHNACHTEN!“, Titel eines Endes – Großbuchstaben */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-heavy: 800;                      /* wie die Karte; ohne Black-Schnitt → Bold */
  --lh-tight: 1.1;
  --tracking-tight: -.015em;            /* große Überschriften */
  --tracking-caps: .08em;               /* Großbuchstaben-Labels */

  /* Abstände (4er-Raster) & Formen – alles abgerundet, nur die Karte 2025 im Intro bleibt eckig */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --gutter: clamp(20px, 6.4cqw, 40px);  /* Abstand zum Rand der Spielfläche – oben, seitlich, unten gleich (Handy 24 px, Desktop bis 40 px) */
  --radius-md: 12px;
  --radius-pill: 999px;
  --tap: 44px;                          /* Mindest-Tippfläche */
  --btn-h: 52px;
  --choice-size: clamp(64px, 22cqw, 120px);   /* Kreise unten (Wahl, Endkarte) */
  --choice-y: 87cqh;                           /* ihre Mitte – unten, wie in _stuff/screens.pdf */
  --action-bottom: calc(var(--safe-bottom) + 10cqh);   /* Unterkante von „Auspacken?“ und „Zum Spielen hochwischen“ */
  --text-shadow: 0 2px 12px rgba(0, 0, 0, .55);        /* Text frei über dem Video */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- 2. Basis ---------- */
/* Handschrift der Karten: Gochi Hand (SIL Open Font License, fonts/OFL-gochi-hand.txt), nur lateinische Zeichen.
   Mitgeliefert statt von Google geladen – keine Anfragen an Dritte. index.html lädt sie vorab;
   block: lieber kurz unsichtbar als erst eine andere Schrift, die dann umspringt. */
@font-face {
  font-family: "Gochi Hand";
  src: url("fonts/gochi-hand-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  display: grid; place-items: center;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; touch-action: manipulation; }
[hidden] { display: none !important; }

/* Überschriften: xl (Spiel-Hinweis im Intro) und Display (Gruß, Titel eines Endes) */
#intro .say h1 {
  margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-heavy); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight);
  text-transform: uppercase; text-wrap: balance;
}
#end-title, #intro .say[data-for="1"] h1 {
  display: block; font-size: var(--fs-display); font-weight: var(--fw-heavy); line-height: 1; letter-spacing: var(--tracking-tight);
  text-transform: uppercase; text-wrap: balance;
}
/* Fett in Großbuchstaben: Buttons und Hinweis */
.btn, :is(#intro, #secret) .hint { font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .02em; }

/* ---------- 3. Spielfläche ----------
   Handy/Tablet hochkant: Vollbild. Desktop: 9:16-Fläche mittig, links/rechts Hintergrund. */
#game {
  position: relative;
  width: min(100vw, 100dvh * 9 / 16);
  height: 100dvh;
  overflow: clip;   /* nicht nur verstecken: auch Fokus/Tab dürfen die Fläche nicht verschieben (Drawer liegt darunter) */
  background: #000;
  box-shadow: 0 0 80px rgba(0, 0, 0, .6);   /* hebt die Fläche vom verschwommenen Hintergrund ab */
  container-type: size;
}
/* Hochformat (Handy, Tablet): immer volle Breite. Mit Adress- und Werkzeugleiste ist der sichtbare Bereich
   oft breiter als 9:16 – sonst blieben links und rechts schmale Balken. */
@media (max-aspect-ratio: 3 / 4) {
  #game { width: 100vw; }
}
/* Desktop: das aktuelle Bild links und rechts, stark verschwommen und abgedunkelt (ambient.js zeichnet es winzig).
   scale: Die Unschärfe franst am Rand aus – vergrößert liegt der Rand außerhalb des Fensters. */
#ambient {
  position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%;
  filter: blur(40px) brightness(.25); transform: scale(1.2);   /* dezent: der Blick bleibt auf der Spielfläche */
  opacity: 0; transition: opacity .6s;
}
#ambient.on { opacity: 1; }
/* Videos füllen die Fläche (Spiel, Intro, geheimes Ende); #still = Standbild aus enden/, wenn ein Video fehlt (z. B. der Zapfen) */
#videos video, #intro-clips video, #secret .secret-clips video, #still, #secret .gift img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
:is(#videos, #intro-clips, #secret .secret-clips) video { opacity: 0; }
:is(#videos, #intro-clips, #secret .secret-clips) video.active { opacity: 1; }

/* ---------- 4. Wahl-Icons (unten links / rechts) ---------- */
.choice {
  position: absolute; top: var(--choice-y);
  width: var(--choice-size); aspect-ratio: 1;
  display: grid; place-items: center; padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  transform: translateY(-50%) scale(0);
  opacity: 0; pointer-events: none;
  transition: transform .45s var(--ease-spring), opacity .3s, background-color .15s;
}
.choice.left  { left: var(--gutter); }
.choice.right { right: var(--gutter); }
.choice span { font-size: clamp(32px, 11cqw, 62px); line-height: 1; }
/* Eigenes Icon vorhanden → statt des Emojis im weißen Kreis (Hover färbt den Kreis orange).
   62 % des Kreises: mit dem Rand in der Icon-Datei (8 von 120 px) etwa so groß wie das Emoji */
.choice img  { display: none; width: 62%; height: 62%; object-fit: contain; pointer-events: none; }
.choice.has-img span { display: none; }
.choice.has-img img { display: block; }

/* Sichtbar: bei der Wahl und auf der Endkarte (Abschnitt 5) */
#game.choosing > .choice, #end-card.show .choice {
  transform: translateY(-50%) scale(1);
  opacity: 1; pointer-events: auto;
  animation: float 2.6s ease-in-out .45s infinite;
}
#game.choosing > .choice.right, #end-card.show .choice.right { animation-delay: .9s; }
#game.choosing > .choice:active, #end-card.show .choice:active { transform: translateY(-50%) scale(.92); }
.choice.picked    { transform: translateY(-50%) scale(1.35) !important; opacity: 0 !important; animation: none !important; }
.choice.dismissed { transform: translateY(-50%) scale(0) !important;    opacity: 0 !important; animation: none !important; }
.choice:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* ---------- 5. Endkarte ---------- */
/* Kein Kasten: Der Text steht frei über dem Schlussbild, in denselben Größen/Schnitten wie der Gruß im Intro;
   Farben: Hinweis orange, Titel weiß. Unten bleiben die Kreise der Wahl stehen (Abschnitt 4) – links „Nochmal“,
   rechts „Ende teilen“, als Symbol statt Icon. Der Text sitzt direkt darüber, wie auf dem Teilen-Bild – oben bleibt das Motiv frei. */
#end-card { position: absolute; inset: 0; pointer-events: none; }
/* Verlauf unten wie auf dem Teilen-Bild: Der Text bleibt lesbar, auch wenn das Motiv weit nach unten reicht */
#end-card::before {
  content: ""; position: absolute; inset: 50% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7));
  opacity: 0; transition: opacity .35s;
}
#end-card.show::before { opacity: 1; }
#end-card .end-text {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: calc(100cqh - var(--choice-y) + var(--choice-size) / 2 + var(--space-5));   /* Unterkante: --space-5 über den Kreisen */
  text-align: center; text-shadow: var(--text-shadow);
  opacity: 0; transform: translateY(16px);
  transition: transform .5s var(--ease-spring), opacity .35s;
}
#end-card.show .end-text { opacity: 1; transform: none; }
#end-card.show .choice { transition-delay: .15s; }   /* nach dem Text */
/* Engel-Kreis in der Mitte (geheimes Ende): erst, wenn alle Enden gefunden sind (game.js).
   Leuchtet orange nach, damit man ihn bemerkt – schwebt versetzt zu den beiden anderen. */
#end-card .choice.mid { left: calc(50% - var(--choice-size) / 2); }
#end-card #secret-btn svg { width: 50%; height: 50%; fill: var(--accent-ink); stroke: none; }   /* auch rechts, auf der Endkarte des geheimen Endes (game.js) */
#end-card.show .choice.mid { animation: float 2.6s ease-in-out .675s infinite, glow 2.4s ease-in-out .6s infinite; }
/* Polaroid bei jedem Ende (game.js): gleitet aus dem Teilen-Kreis und bleibt schräg daran stecken, halb dahinter.
   Etwas tiefer als die Kreise, der Titel bleibt frei; daneben die Notiz in Handschrift wie auf der Karte 2025.
   Tippen öffnet „Ende teilen“. */
#polaroid {
  --top: 3cqh;                                                  /* unter der Oberkante der Kreise */
  --w: min(26cqw, (10cqh + var(--choice-size) / 2) * .75);    /* höchstens so groß, dass es unten noch ganz in die Fläche passt */
  position: absolute; right: calc(var(--gutter) + var(--choice-size) * .7); top: calc(var(--choice-y) - var(--choice-size) / 2 + var(--top));
  width: var(--w); padding: calc(var(--w) * .06) calc(var(--w) * .06) calc(var(--w) * .22);
  background: var(--paper); border-radius: 3px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  visibility: hidden; pointer-events: auto;
}
#polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
/* Notiz links daneben, zwischen den Kreisen, etwas tiefer als die Mitte des Polaroids */
#polaroid span {
  position: absolute; right: calc(100% + .3em); top: 38%;
  font-family: var(--font-hand); font-size: min(5.2cqw, 24px); line-height: 1; text-align: right; color: var(--accent); text-shadow: var(--text-shadow);
  white-space: nowrap; transform: rotate(4deg); transform-origin: right center;
}
#end-card.show #polaroid.peek { animation: peek .77s ease-in-out 1.2s both, wiggle 4s ease-in-out 1.6s infinite; }   /* erstes Wackeln nach gut 5 s, dann alle 4 s */
/* Nochmal und Teilen in der Machart des Ton-Schalters: kräftiger Strich, Pfeilspitzen gefüllt (.fill) – das passt
   auch zu den gefüllten Icons in icons/. Dunkel wie diese; etwa so groß wie dort (62 % abzüglich des Rands in der Icon-Datei) */
/* Enden gerade abgeschnitten, Ecken spitz – wie Menü-Icon und Vorspulen; die Pfeilspitzen ohne Rand, damit sie spitz bleiben */
#end-card .choice svg { width: 54%; height: 54%; fill: none; stroke: var(--accent-ink); stroke-width: 1.6; stroke-linecap: butt; stroke-linejoin: miter; }   /* dunkel auf Weiß wirkt der Strich kräftiger als hell auf Dunkel – daher etwas dünner als beim Ton-Schalter */
#end-card .choice svg .fill { fill: var(--accent-ink); stroke: none; }
/* Abstand im Verhältnis zum Titel wie auf dem Teilen-Bild (28 px Luft bei 72 px Titel) – dazu kommen Unterlänge und Luft über den Versalien */
#end-label { display: block; margin-bottom: calc(var(--fs-display) * .12); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--accent); }   /* eine Stufe über den Buttons, klar unter dem Titel */

/* ---------- 6. HUD & Buttons ---------- */
#hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex;
  padding: calc(var(--safe-top) + var(--gutter)) var(--gutter) 0;
  transition: opacity .3s;
}
#game.secret #hud { opacity: 0; pointer-events: none; }   /* geheimes Ende: oben rechts steht dort der Vorspulen-Knopf */
/* Menü-Icon wie auf der mi-Website: drei eckige Striche, der untere kürzer; feste Pixel, damit die Striche scharf bleiben.
   text-box schneidet die Zeile auf Versalhöhe bis Grundlinie zu → die Ziffern sitzen exakt mittig zum Icon */
#ends-btn { gap: 13px; font-weight: var(--fw-bold); }
.menu-icon { flex: none; width: 20px; height: 14px; fill: currentColor; }
#hud-count { text-box: trim-both cap alphabetic; }
/* Orange Hauptbutton („Teilen“ in der Teilen-Ansicht) */
.btn {
  min-height: var(--btn-h); padding: 0 var(--space-6); font-size: var(--fs-md); white-space: nowrap;
  border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);   /* wirkt erst beim Hover, wenn das Orange durchscheint */
  transition: background-color .15s;
}
.pill {
  min-height: var(--tap); padding: 0 var(--space-4); border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--fs-md); font-weight: var(--fw-medium);
  background: var(--pill-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background-color .15s, color .15s, opacity .15s;
}
.pill.round { width: var(--tap); padding: 0; }
.pill.wide  { width: 100%; }

/* Hover in mi-Orange – nur mit Maus (auf Touch bliebe er nach dem Tippen hängen); Tastatur-Fokus sieht gleich aus */
@media (hover: hover) {
  .pill:hover { background: var(--accent); color: var(--accent-ink); opacity: 1; }   /* opacity: für .skip (eigene Deckkraft .75) */
  #game.choosing > .choice:hover, #end-card.show .choice:hover { background: var(--accent); }
  .btn:hover { background: color-mix(in srgb, var(--accent) 75%, transparent); }   /* orange Buttons: Orange wird durchscheinendes Milchglas */
}
.pill:focus-visible { background: var(--accent); color: var(--accent-ink); opacity: 1; outline: none; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- 7. Drawer: Fortschritt & Ende teilen ---------- */
.drawer {
  position: absolute; inset: 0; z-index: 25;
  display: flex; flex-direction: column;
  background: var(--surface);
  transform: translateY(100%); visibility: hidden;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility .32s;
}
.drawer.open { transform: none; visibility: visible; }
.drawer header {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(var(--safe-top) + var(--gutter)) var(--gutter) var(--space-4);   /* ✕ sitzt wie die HUD-Buttons */
}
.drawer h2 { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.logo-mini { flex: none; height: 1.35em; width: auto; fill: var(--accent); }
.drawer-actions { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
/* Ton an/aus: immer oben rechts, über Intro und geheimem Ende. Steht dort ein Vorspulen-Knopf (Intro, geheimes Ende
   bis zur Endkarte), rückt er links daneben – sonst an dessen Stelle. Unter einem offenen Drawer: weg (dort sitzt ✕).
   Das Symbol zeigt den Zustand (music.js setzt aria-pressed). */
#sound-btn {
  position: absolute; top: calc(var(--safe-top) + var(--gutter)); right: var(--gutter); z-index: 41;
  transition: background-color .15s, color .15s, opacity .3s, visibility .3s, right .35s var(--ease-spring);
}
#game:is(:has(#intro:not([hidden], .leaving)), :has(#secret:not([hidden], [data-step="4"]))) #sound-btn {
  right: calc(var(--gutter) + var(--tap) + var(--space-2));
  opacity: .75;   /* wie der Vorspulen-Knopf daneben – allein so deutlich wie der Menü-Knopf gegenüber */
}
#game:has(.drawer.open) #sound-btn { opacity: 0; visibility: hidden; }
/* 24 px bei viewBox 24: Strich 2 px und Lautsprecher 20 × 14 px – genau wie das Menü-Icon gegenüber */
.sound-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: butt; stroke-linejoin: miter; }   /* Enden gerade, Ecken spitz wie Menü-Icon und Vorspulen */
.sound-btn svg path:first-child { fill: currentColor; }   /* Lautsprecher gefüllt: so kräftig wie die Dreiecke beim Vorspulen daneben */
.sound-btn[aria-pressed="true"] .off, .sound-btn[aria-pressed="false"] .on { display: none; }
/* Inhalt füllt die Höhe, damit die Danger Zone am unteren Rand sitzt; bei wenig Höhe scrollt alles */
.drawer-body {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: var(--space-5) var(--gutter) calc(var(--safe-bottom) + var(--gutter));
}
#new-game-btn { flex: 1; }
.danger-zone { margin-top: auto; padding-top: var(--space-6); }
.danger-zone h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-dim);
}
/* Impressum & Datenschutz: Kleingedrucktes – so klein wie „Danger Zone“, aber normal statt fett und ohne Großbuchstaben,
   damit es noch dahinter zurücktritt. Tippfläche trotzdem 44 px hoch; der negative Abstand gleicht sie am unteren Rand aus. */
.legal { display: flex; align-items: center; gap: var(--space-5); margin: var(--space-3) 0 calc(-1 * var(--space-3)); }
.legal a, mi-website-by {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-size: var(--fs-xs); color: var(--ink-dim); text-decoration: none;
  transition: color .15s;
}
@media (hover: hover) { .legal a:hover { color: var(--ink); } }
.legal a:focus-visible { color: var(--ink); outline: none; text-decoration: underline; }
/* „Made by“ rechts: Text grau wie die Links, Logo in mi-Orange (Hover färbt den Text ebenfalls orange – Verhalten der Komponente).
   Die Komponente blendet das Logo beim ersten Öffnen des Menüs ein; beim Hover fliegt das i ≈ 1 Logohöhe nach rechts – der Seitenrand hat Platz. */
mi-website-by {
  margin-left: auto;
  --mi-by-text-color: var(--ink-dim);
  --mi-by-logo-color: var(--accent);
}
mi-website-by::part(link) { min-height: var(--tap); padding: 0; }
#end-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
/* Kachel zeigt nur das Bild (bzw. Icon/Emoji, solange es keins gibt) – der Titel steht nur in aria-label (game.js).
   Emoji wächst mit der Kachel (Handy ≈ 100 px, Desktop bis ≈ 170 px breit). */
.end-cell {
  position: relative; aspect-ratio: 1; overflow: hidden;
  display: grid; place-items: center;
  font-size: clamp(32px, 11cqw, 60px); line-height: 1;
  background: var(--surface-2); border-radius: var(--radius-md);   /* Menü ohne Linien: Kacheln nur als Fläche */
}
.end-cell img { width: 60%; height: auto; aspect-ratio: 1; object-fit: contain; }
.end-cell.locked { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink-faint); }
/* Eigenes Enden-Bild: füllt die ganze Kachel */
.end-cell img.thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Geheimes Ende: Rahmen in mi-Orange – über dem Bild */
.end-cell.secret::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--accent); border-radius: inherit; }

/* Ende teilen: Die Vorschau füllt den freien Platz, darunter Format und Logofarbe – zurückhaltend,
   damit „Teilen“ die einzige orange Fläche bleibt. Gewählt = warmes Weiß bzw. Ring (Orange ist schon der Hover). */
/* Hintergrund: Bild des Endes, verschwommen und abgedunkelt wie #ambient am Desktop – hebt die Vorschau ab.
   Ohne Bild bleibt --surface; scale: Die Unschärfe franst am Rand aus (#game schneidet ab). */
#share-drawer::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--backdrop) center / cover;
  filter: blur(40px) brightness(.25); transform: scale(1.2);
}
/* Scrollbereich 16 px höher, Innenabstand entsprechend größer: Bild bleibt, wo es ist – der Schein hat oben Platz und wird nicht abgeschnitten */
#share-drawer .drawer-body { margin-top: calc(-1 * var(--space-4)); padding-top: calc(var(--space-5) + var(--space-4)); }
.share-preview { position: relative; flex: 1; min-height: 120px; }
/* Leichter Schein in der gewählten Logofarbe (--glow, share.js): hebt auch dunkle Bilder (z. B. Abgehoben) vom fast schwarzen Hintergrund ab */
.share-preview img {
  position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; border-radius: var(--radius-md);
  box-shadow: 0 0 40px color-mix(in srgb, var(--glow, var(--ink)) 40%, transparent);
  transition: box-shadow .3s;
}
.share-options { display: grid; justify-items: center; gap: var(--space-4); margin: var(--space-5) 0; }
.share-formats { display: flex; gap: var(--space-2); }
.share-formats .pill[aria-pressed="true"] { background: var(--ink); color: var(--accent-ink); }
.share-colors { display: flex; gap: var(--space-3); }
.swatch { width: var(--tap); height: var(--tap); padding: 0; border-radius: 50%; background: var(--c); }
.swatch[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 3px; }   /* Ring mit Lücke – auch auf dem verschwommenen Hintergrund */
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#share-send { width: 100%; }
#share-send[disabled] { opacity: .5; cursor: progress; }

/* ---------- 8. Intro (bei jedem Aufruf, intro.js) ----------
   Ablauf über data-step am #intro: 1 Geschenk · 2 Karte · 3 Spiel mit mehreren Enden + Zapfen hochwischen */
#intro {
  position: absolute; inset: 0; z-index: 40;
  background: #000;
  transition: opacity .5s;
  --pull: 0;   /* Hochwischen 0…1 (Schritt 3) */
}
#intro.leaving { opacity: 0; pointer-events: none; }
#intro:is([data-step="1"], [data-step="3"]) { touch-action: none; }   /* Halten bzw. Wischen – ohne Scrollen/Zoomen des Browsers */
#intro[data-step="3"] { cursor: grab; }
#intro[data-step="3"].pulling { cursor: grabbing; }
/* Vorspulen (Intro und geheimes Ende) */
.skip { position: absolute; top: calc(var(--safe-top) + var(--gutter)); right: var(--gutter); z-index: 1; opacity: .75; }
.skip svg { width: 20px; margin-left: 2px; fill: currentColor; }   /* optisch mittig: die Spitzen ziehen nach rechts */

/* Gedrückt halten: Clip 2 läuft, solange der Finger liegt – der Ring zeigt, wie weit es noch ist (Intro und geheimes Ende) */
.ring {
  position: absolute; z-index: 2; width: 112px; height: 112px; margin: -56px 0 0 -56px;   /* größer als eine Fingerkuppe; über Ringen, Texten und »-Knopf */
  pointer-events: none; opacity: 0; transform: scale(.6);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
  transition: opacity .2s ease-out, transform .25s ease-out;
}
.ring.show { opacity: 1; transform: none; }
.ring circle { fill: none; stroke-width: 6; }
.ring .track { stroke: rgba(0, 0, 0, .35); }
.ring .fill {
  stroke: #fff; stroke-linecap: round;   /* weiß: Orange verschwindet auf der orangen Schleife */
  stroke-dasharray: 213.63; stroke-dashoffset: 213.63;   /* Umfang bei r = 34 */
  transform: rotate(-90deg); transform-origin: center;
}

/* Texte: nur der Block des aktuellen Schritts ist sichtbar – blendet von unten ein (data-step) */
#intro .say, #intro .rings, :is(#intro, #secret) .hint {
  position: absolute; left: var(--gutter); right: var(--gutter);
  text-align: center; visibility: hidden;
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s ease-out, transform .45s ease-out, visibility .45s;
}
#intro[data-step="1"] .rings,
#intro[data-step="1"].ready [data-for="1"],
#intro[data-step="2"] [data-for="2"],
#intro[data-step="3"] [data-for="3"] { opacity: 1; visibility: visible; transform: none; }

#intro .say { top: calc(var(--safe-top) + 11cqh); }
#intro .say em { font-style: normal; color: var(--accent); }   /* „16 ENDEN“ */
#intro .say[data-for="1"] { top: calc(var(--safe-top) + 13cqh); }   /* höher als der Spiel-Hinweis: Luft zu den Ringen (Mütze) darunter */
/* Ringe mittig zwischen Überschrift und Schleife, wo vorher das mi-Engel-Logo stand; Höhe in cqh wie das Video (cover).
   Feste Breite (Seitenverhältnis der viewBox 625 : 335) + margin auto: mittig in jedem Browser –
   mit width: auto legt Safari das SVG an den linken Rand. overflow: visible, damit die Ringe von außerhalb hereinlaufen. */
#intro .rings { top: 28cqh; left: 0; right: 0; margin-inline: auto; height: 14cqh; width: calc(14cqh * 625 / 335); overflow: visible; pointer-events: none; }
#intro .rings circle { fill: none; stroke: var(--accent); stroke-width: 26; }
#intro .rings .hat > * { fill: #fff; stroke: none; }
#intro .rings .antlers { fill: none; stroke: #fff; stroke-width: 9; }
/* Laufen: Start ganz außerhalb links (--from), nacheinander; Schrittzahl × Schrittdauer = Laufdauer,
   so endet jeder Ring genau in Ruhe. Steht alles bei ≈ 2,9 s.
   --from (viewBox-Einheiten) so gewählt, dass jeder Ring vor dem Start ganz links außerhalb liegt –
   auch auf der breitesten Fläche (9 : 16) mit Abstand (dort ≈ 24 px, auf dem Handy ≈ 65 px). */
#intro .rings :is(.r1, .r2, .r3) { animation: walk-in 1.8s cubic-bezier(.25, .45, .35, 1) both; }
#intro .rings .r1 { --from: -660px; animation-delay: .3s; }
#intro .rings .r2 { --from: -760px; animation-delay: .65s; }
#intro .rings .r3 { --from: -1050px; animation-delay: 1s; animation-duration: 1.9s; }
#intro .rings .step { transform-box: fill-box; transform-origin: 50% 100%; animation: step .45s ease-in-out 4 both; }
#intro .rings .r1 .step { animation-delay: .3s; }
#intro .rings .r2 .step { animation-delay: .65s; }
#intro .rings .r3 .step { animation-delay: 1s; animation-duration: .475s; }

:is(#intro, #secret) .hint { bottom: var(--action-bottom); margin: 0; font-size: var(--fs-lg); text-shadow: var(--text-shadow); }
/* Schritt 1: Gruß und Hinweis blenden ein wie die Texte am Zapfen, sobald Clip 1 geladen ist (.ready, intro.js).
   Der Hinweis pulsiert erst, wenn er ganz da ist – vorher würde pulse das Einblenden überdecken. */
#intro[data-step="1"].ready .say[data-for="1"] { transition-delay: .2s; }
#intro[data-step="1"].ready .hint[data-for="1"] { transition-delay: .7s; animation: pulse 1.8s ease-in-out 1.15s infinite; }

/* Schritt 2: „Zum Fortfahren tippen“ erst, wenn die Karte fertig ist (Rakete gelandet: flyRocket(4500) + ROCKET_MS
   in intro.js = 7,3 s) und noch eine Sekunde danach – nur für alle, die nicht von selbst tippen.
   Mit Maus „klicken“ statt „tippen“. */
#intro[data-step="2"] .hint[data-for="2"] { transition-delay: 8.3s; }
:is(#intro, #secret) .hint .mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  :is(#intro, #secret) .hint .touch { display: none; }
  :is(#intro, #secret) .hint .mouse { display: inline; }
}

/* Schritt 3: Text, sobald die Karte hinausgeflogen ist (card-exit .6 s), der Wisch-Hinweis kurz danach */
#intro[data-step="3"] .say[data-for="3"] { transition-delay: .5s; }
#intro[data-step="3"] .hint[data-for="3"] { transition-delay: 1s; }
/* Wisch-Hinweis: Pfeil zieht immer wieder nach oben – zeigt die Bewegung */
#intro .swipe { display: grid; justify-items: center; gap: var(--space-3); }
#intro .swipe .arrow {
  width: 22px; height: 36px; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55));
  animation: nudge 1.6s ease-in-out infinite;
}
/* Beim Wischen blenden Hinweis und Text mit dem Zapfen aus (--pull 0…1, intro.js) – direkt, ohne Übergang.
   .pulled: losgelassen, der Zapfen springt von allein heraus. */
#intro[data-step="3"].pulling [data-for="3"] { opacity: calc(1 - var(--pull) * 2.5); transition: none; }
#intro[data-step="3"].pulled [data-for="3"] { opacity: 0; transition: opacity .3s 0s; }

/* Karte: wächst aus der Box, fliegt später nach oben hinaus (Intro und geheimes Ende) */
:is(#intro, #secret) .card {
  position: absolute; left: 50%; top: 46%;
  width: 72cqw; padding: 10cqw 6cqw 5cqw;
  background: var(--paper); color: var(--paper-ink);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  opacity: 0; transform: translate(-50%, -50%) translateY(8cqh) scale(.08);
}
/* card-grow bleibt ab Schritt 3 stehen (gleicher Name → kein Neustart), card-exit setzt an dessen Endzustand an */
:is(#intro, #secret)[data-step="2"] .card { animation: card-grow 2s .15s both; }
:is(#intro, #secret)[data-step="3"] .card { animation: card-grow 2s .15s both, card-exit .6s ease-in both; }
/* Box-Rand: bis die Karte ganz heraus ist, bleibt alles unterhalb der V-Kante der Laschen verdeckt */
.card-stage { position: absolute; inset: 0; pointer-events: none; }
#intro:not([data-step="1"]) .card-stage { animation: card-rim 2s .15s both; }
.card-title { font-size: 9cqw; font-weight: var(--fw-heavy); line-height: 1.05; letter-spacing: -.01em; }
.card-title > span { display: block; white-space: nowrap; }

/* Handschrift wie auf der Karte 2025 – Ergänzungen von 2026 in Orange, Zeitpunkt über --d */
.hand { display: inline-block; font-family: var(--font-hand); letter-spacing: 0; font-synthesis: none; }   /* nur ein Schnitt – kein künstliches Fett */
.hand.old { margin-left: .25em; font-size: .62em; font-weight: var(--fw-regular); color: var(--pencil); transform: rotate(-6deg) translateY(-.35em); }
.hand.new {
  color: var(--accent); font-weight: var(--fw-bold);
  clip-path: inset(-30% 100% -30% 0);
  transition: clip-path .6s ease-out var(--d);
}
.struck + .hand.new { margin-left: .2em; font-size: .8em; transform: rotate(-7deg) translateY(-.1em); }

/* Kritzel-Durchstreichung: wird von links nach rechts aufgedeckt; .done = schon 2025 durchgestrichen.
   Wischblende statt stroke-dash – die zeigt in Safari mit non-scaling-stroke vorab Strichstücke. */
.struck { position: relative; display: inline-block; }
.scribble {
  position: absolute; left: -6%; top: 8%; width: 112%; height: 84%; overflow: visible; pointer-events: none;
  clip-path: inset(-60% 110% -60% -10%);
  transition: clip-path .45s ease-in-out var(--d);
}
.scribble path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.struck.done .scribble path { stroke: var(--pencil); stroke-width: 1.4; }
#intro:not([data-step="1"]) .scribble { clip-path: inset(-60% -10% -60% -10%); }
#intro:not([data-step="1"]) .hand.new { clip-path: inset(-30% -10% -30% 0); }

/* Radiergummi: radiert den 2025er Strich über HELLO weg – danach wird „Goodbye“ durchgestrichen */
.struck.done .scribble { clip-path: inset(-60% -10% -60% -10%); transition: clip-path .55s linear var(--e); }
#intro:not([data-step="1"]) .struck.done .scribble { clip-path: inset(-60% -10% -60% 110%); }
.eraser { position: absolute; top: 5%; left: -4%; width: 1.25em; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); }
.eraser svg { display: block; width: 100%; }
#intro:not([data-step="1"]) .eraser { animation: rub .65s linear 2.3s both; }
.crumb { position: absolute; top: 70%; left: var(--x); width: .08em; height: .08em; border-radius: 50%; background: #9a9a96; opacity: 0; }
#intro:not([data-step="1"]) .crumb { animation: crumb .7s ease-in var(--t) both; }

.card-foot { display: flex; justify-content: flex-end; align-items: flex-end; gap: 2cqw; margin-top: 5cqw; }
.card-foot svg { width: 10cqw; opacity: 0; }   /* Flug: flyRocket() in intro.js */
.card-foot p { margin: 0; text-align: right; color: var(--accent); font-size: 4.2cqw; font-weight: var(--fw-heavy); line-height: 1; }
.card-foot small { display: block; font-size: .85em; }

/* ---------- 8b. Geheimes Ende (secret.js) ----------
   Liegt über dem Schlussbild, unter Endkarte und HUD (Reihenfolge in index.html). Ablauf über data-step:
   0 Geschenk fällt · 1 gedrückt halten · 2 Karte · 3 Grußvideo · 4 Endkarte */
#secret { position: absolute; inset: 0; }
#secret[data-step="1"] { touch-action: none; }   /* Halten – ohne Scrollen/Zoomen des Browsers */
#secret[data-step="4"] .skip { display: none; }
/* Das Schlussbild tritt zurück, bevor das Geschenk landet – Clip 1 blendet danach ganz darüber */
#secret .dim { position: absolute; inset: 0; background: #000; opacity: .55; animation: dim .6s ease-out both; }
#secret .secret-clips { position: absolute; inset: 0; isolation: isolate; }   /* .front wirkt nur unter den Clips */
#secret .secret-clips .front { z-index: 1; }   /* Clip 1 beim Nochmal: über dem offenen Geschenk vom letzten Mal */
#secret .secret-clips .fade { transition: opacity .8s ease-in-out; }   /* Clip 1 und Grußvideo blenden über, Clip 2 schaltet hart um wie im Intro */
/* Geschenk: wie das Video (cover) gelegt → steht genau dort, wo es in Clip 1 steht. Gestaucht wird an seiner
   Unterkante (79 % der Bildhöhe); Schatten am Boden, x im Spiel = 50cqw + (x_video − 50) · 1cqh wie bei card-rim */
#secret .gift img { transform-origin: 50% 79%; will-change: transform; }
#secret .gift .shadow {
  position: absolute; left: calc(50cqw - 20cqh); top: 76cqh; width: 40cqh; height: 5cqh;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent);
}
/* Grußvideo: Player über die ganze Breite bis auf den Seitenrand, Höhe nach dem Seitenverhältnis des Videos.
   Steht in der optischen Mitte – etwas über der rechnerischen, sonst wirkt er nach unten gerutscht.
   Wächst aus dem Geschenk, sobald das Video ein Bild zeigt (.active), während die Karte hinausfliegt.
   Mit der Endkarte blendet er aus – das Video endet schwarz, dahinter steht wieder das offene Geschenk.
   Unten der Fortschritt in mi-Orange (--p, secret.js); angehalten: Play-Symbol im weißen Kreis wie die Wahl-Kreise. */
#secret .player {
  position: absolute; left: 50%; top: 45%; width: calc(100cqw - 2 * var(--gutter));
  overflow: hidden; border-radius: var(--radius-md); background: #000;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
  opacity: 0; transform: translate(-50%, -50%) translateY(8cqh) scale(.6); pointer-events: none;
  transition: opacity .4s ease-out .2s, transform .6s var(--ease-spring) .2s;
}
#secret[data-step="3"] .player { pointer-events: auto; cursor: pointer; }
#secret[data-step="3"] .player:has(video.active) { opacity: 1; transform: translate(-50%, -50%); }
#secret[data-step="4"] .player { transform: translate(-50%, -50%); transition-delay: 0s; }   /* nur ausblenden, nicht zurückschrumpfen */
#secret .player video { display: block; width: 100%; height: auto; }
#secret .player-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 4px;
  background: linear-gradient(var(--accent), var(--accent)) left / calc(var(--p, 0) * 100%) 100% no-repeat, rgba(255, 255, 255, .25);
  transition: background-size .25s linear;   /* timeupdate kommt nur etwa viermal pro Sekunde */
}
#secret[data-step="3"] .player.paused::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--tap); height: var(--tap); margin: calc(var(--tap) / -2) 0 0 calc(var(--tap) / -2); border-radius: 50%;
  background: rgba(255, 255, 255, .94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 4 L16 10 L7 16 Z' fill='%231d1d1b'/%3E%3C/svg%3E") center / 45% no-repeat;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
/* Karte: dieselbe wie im Intro, nur mit Gruß – etwas kleinere Schrift, damit WEIHNACHTEN in eine Zeile passt */
#secret .card-title { font-size: 7.4cqw; }
#secret .card-title .hand { display: block; margin-top: .35em; font-size: .62em; transform: rotate(-4deg); }
#secret .card-foot svg { opacity: 1; }   /* Rakete steht schon (im Intro fliegt sie herein) */
#secret:is([data-step="2"], [data-step="3"]) .card-stage { animation: card-rim 2s .15s both; }
#secret:is([data-step="2"], [data-step="3"]) .hand.new { clip-path: inset(-30% -10% -30% 0); }
/* Hinweise: „Gedrückt halten“ sobald Clip 1 steht, „Tippen“ erst, wenn die Karte fertig ist */
#secret[data-step="1"] .hint[data-for="1"],
#secret[data-step="2"] .hint[data-for="2"] { opacity: 1; visibility: visible; transform: none; }
#secret[data-step="1"] .hint[data-for="1"] { transition-delay: .2s; animation: pulse 1.8s ease-in-out .65s infinite; }
#secret[data-step="2"] .hint[data-for="2"] { transition-delay: 2.6s; }
/* Grußvideo fehlt noch (videos/32-engel.mp4): Hinweis statt Video */
#secret .placeholder-note {
  position: absolute; inset: 0; display: grid; justify-content: center; align-content: start; margin: 0;
  padding: calc(var(--safe-top) + 24cqh) var(--gutter) 0;   /* über dem offenen Geschenk */
  text-align: center; font-size: var(--fs-lg); font-weight: var(--fw-bold); text-shadow: var(--text-shadow);
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
#secret .placeholder-note small { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--ink-dim); }
#secret.placeholder .placeholder-note { opacity: 1; }

/* ---------- 9. Animationen ---------- */
@keyframes dim { from { opacity: 0; } }
/* Engel-Kreis: orangener Schein, der kommt und geht – der Schatten der Kreise bleibt */
@keyframes glow {
  0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 0 0 rgba(242, 145, 35, 0); }
  50%      { box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 28px 6px rgba(242, 145, 35, .7); }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }   /* startet voll sichtbar → nahtlos nach dem Einblenden */
/* Ringe (Intro, Schritt 1) laufen von links an ihren Platz (Werte in viewBox-Einheiten; CSS-px an SVG = Nutzer-Einheiten).
   Ein Durchlauf von step = zwei Schritte: abheben + zur einen Seite wippen, aufsetzen, abheben + zur anderen Seite. */
@keyframes walk-in { from { transform: translateX(var(--from)); } to { transform: none; } }
@keyframes step {
  0%, 50%, 100% { transform: none; }
  25% { transform: translateY(-18px) rotate(-6deg); }
  75% { transform: translateY(-18px) rotate(6deg); }
}
/* steigt aus der leuchtenden Öffnung auf (orange angestrahlt), schwebt kurz über der Box,
   senkt sich dann vor die Box auf ihren Platz */
@keyframes card-grow {
  0%   { opacity: 1; transform: translate(-50%, -50%) translateY(18cqh) scale(.5);
         box-shadow: 0 0 50px 14px rgba(242, 145, 35, .8);
         animation-timing-function: cubic-bezier(.5, 0, .3, 1); }   /* langsam aus der Box, oben abbremsen */
  55%  { transform: translate(-50%, -50%) translateY(-11cqh) scale(.95) rotate(-1deg);
         box-shadow: 0 0 60px 6px rgba(242, 145, 35, .35);
         animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg);
         box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
}
/* V-Kante der Laschen aus Clip 2 (bei 4 s), in Prozent des Videobilds gemessen.
   Das quadratische Video füllt die Höhe (cover): x im Spiel = 50cqw + (x_video − 50) · 1cqh, y = y_video · 1cqh */
@keyframes card-rim {
  0%, 55% { clip-path: polygon(-50cqw -50cqh, 150cqw -50cqh, 150cqw 50.2cqh,
    calc(50cqw + 15cqh) 50.2cqh, calc(50cqw + 8.1cqh) 50.5cqh, calc(50cqw + 4.5cqh) 53.4cqh,
    calc(50cqw + .5cqh) 54.8cqh, calc(50cqw - 3.4cqh) 53.2cqh, calc(50cqw - 6.6cqh) 51.4cqh,
    calc(50cqw - 10.6cqh) 50.2cqh, -50cqw 50.2cqh); }
  56%, 100% { clip-path: polygon(-50cqw -50cqh, 150cqw -50cqh, 150cqw 150cqh,
    calc(50cqw + 15cqh) 150cqh, calc(50cqw + 8.1cqh) 150cqh, calc(50cqw + 4.5cqh) 150cqh,
    calc(50cqw + .5cqh) 150cqh, calc(50cqw - 3.4cqh) 150cqh, calc(50cqw - 6.6cqh) 150cqh,
    calc(50cqw - 10.6cqh) 150cqh, -50cqw 150cqh); }
}
@keyframes card-exit {
  to { opacity: 0; transform: translate(-50%, -50%) translate(-20cqw, -75cqh) rotate(-20deg); }
}
@keyframes rub {
  0%   { left: -4%; opacity: 0; transform: translate(-50%, 0) rotate(-24deg); }
  8%   { opacity: 1; }
  16%  { transform: translate(-50%, -25%) rotate(-30deg); }
  32%  { transform: translate(-50%, 20%) rotate(-18deg); }
  48%  { transform: translate(-50%, -25%) rotate(-30deg); }
  64%  { transform: translate(-50%, 20%) rotate(-18deg); }
  80%  { transform: translate(-50%, -20%) rotate(-28deg); }
  92%  { opacity: 1; }
  100% { left: 104%; opacity: 0; transform: translate(-50%, 0) rotate(-24deg); }
}
/* 0 % unsichtbar: „both“ hält diesen Zustand bis zum Start – sonst liegen die Krümel vorher schon auf HELLO */
@keyframes crumb {
  0%   { opacity: 0; transform: none; }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(.2em, 1.4em); }
}
@keyframes nudge {
  0%   { opacity: 0; transform: translateY(10px); }
  30%  { opacity: 1; }
  70%  { opacity: 1; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(-14px); }
}
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
/* Polaroid: klein in der Mitte des Teilen-Kreises → schräg daneben, bleibt dort stecken */
@keyframes peek {
  0%   { visibility: hidden; opacity: 0;
         transform: translate(calc(var(--choice-size) * .2 + var(--w) / 2), calc(var(--choice-size) / 2 - var(--top) - 50%)) scale(.3) rotate(12deg); }
  71%  { visibility: visible; opacity: 1; transform: translate(-4px, -4px) scale(1.04) rotate(-10deg); }
  100% { visibility: visible; opacity: 1; transform: rotate(-8deg); }
}
/* …und wackelt am Ende jeder Runde kurz (rotate zusätzlich zu transform aus peek) */
@keyframes wiggle {
  0%, 90%, 100% { rotate: 0deg; }
  93% { rotate: -6deg; }
  96% { rotate: 5deg; }
  98% { rotate: -3deg; }
}

/* ---------- 10. Breite Spielfläche & weniger Bewegung ----------
   Am Dateiende, damit diese Regeln die gleichrangigen Grundregeln oben überschreiben. */
@container (min-width: 480px) {
  /* Großes/hohes Desktop-Fenster: Drawer mit 4 Spalten, Emoji im selben Verhältnis zur Kachel */
  #end-grid { grid-template-columns: repeat(4, 1fr); }
  .end-cell { font-size: clamp(32px, 8cqw, 52px); }
  /* Buttons und Danger Zone wachsen mit (bei 608 px Spielfläche ≈ 22 px bzw. 16 px) */
  .pill { font-size: clamp(18px, 3.6cqw, 22px); }
  .pill.wide { min-height: var(--btn-h); }
  .danger-zone h3, .legal a, mi-website-by { font-size: clamp(13px, 2.6cqw, 16px); }
  /* Intro: Die Überschrift ist im Verhältnis zur Höhe kleiner (max. 56 px) – die Ringe rücken höher
     (bis 26cqh), bleiben aber mindestens 24 px unter der Überschrift (13cqh + zwei Zeilen à 1 × --fs-display). */
  #intro .rings { top: clamp(26cqh, 13cqh + 2 * var(--fs-display) + 24px, 28cqh); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  :is(#intro, #secret)[data-step="2"] .card { opacity: 1; transform: translate(-50%, -50%) rotate(-3deg); }   /* Karte steht ohne Wachsen da */
}