/* Gemeinsame Farben und Bausteine für alle Türchen */
:root {
  --rot: #b3202a;
  --rot-hell: #e04551;
  --gold: #f2c14e;
  --gold-hell: #ffe3a0;
  --gruen: #2e8b57;
  --nacht: #0d1b2a;
  --nacht-2: #1b3a5c;
  --karte: rgba(255, 255, 255, .08);
  --linie: rgba(255, 255, 255, .16);
  --text: #fff;
  --text-2: rgba(255, 255, 255, .72);
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --zier: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --oben: env(safe-area-inset-top, 0px);
  --unten: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  min-height: 100%;
  background: var(--nacht);
  color: var(--text);
  font-family: var(--schrift);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
body { overflow: hidden; height: 100dvh; }
body.rollen { overflow: auto; height: auto; overscroll-behavior-y: none; }
img { max-width: 100%; display: block; }

/* Überlagerungen (Start, Laden, Fehler) */
.ebene {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.25rem;
  padding: 2rem 1rem;
  text-align: center;
  background: radial-gradient(ellipse at top, var(--nacht-2) 0%, var(--nacht) 70%);
}
.ebene[hidden] { display: none; }
.ebene p { font-size: 1.1rem; opacity: .85; max-width: 28rem; }
.ebene h1 { font-size: clamp(1.4rem, 6vw, 2.2rem); font-weight: 700; font-family: var(--zier); }

.nummer {
  font-size: clamp(4rem, 28vw, 9rem);
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 4px 30px rgba(242, 193, 78, .45);
}

.knopf {
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  background: var(--rot);
  border: 0;
  border-radius: 999px;
  padding: 1rem 2rem;
  box-shadow: 0 6px 24px rgba(179, 32, 42, .55);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.knopf:active { transform: scale(.97); }
.knopf.leise { background: rgba(255, 255, 255, .14); box-shadow: none; font-size: 1rem; padding: .8rem 1.6rem; }
.knopf.puls { animation: puls 1.6s ease-in-out infinite; }
@keyframes puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

.balken { width: min(18rem, 80vw); height: .6rem; border-radius: 999px; background: rgba(255, 255, 255, .15); overflow: hidden; }
#balkenFuellung { height: 100%; width: 0; background: var(--gold); transition: width .2s; }

#schnee { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }

#beispielBand {
  position: fixed; z-index: 100; bottom: calc(var(--unten) + .3rem); left: .3rem;
  background: #c00; color: #fff; font-size: .6rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px;
  white-space: nowrap; pointer-events: none; opacity: .7;
}
#beispielBand[hidden] { display: none; }

/* Konfetti (von mehreren Türchen genutzt) */
.konfetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.konfetti i {
  position: absolute; top: -2rem; width: .6rem; height: 1rem; border-radius: 2px;
  animation: fallen linear forwards;
}
@keyframes fallen { to { transform: translate3d(var(--dx), 110vh, 0) rotate(var(--dreh)); } }

@media (prefers-reduced-motion: reduce) {
  .knopf.puls { animation: none; }
}