/* ===== Adventskalender – Stil ===== */
@font-face { font-family: 'Bagel Fat One'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/bagel-fat-one-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/nunito-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/nunito-latin-800-normal.woff2) format('woff2'); }

:root {
  --night: #101c33;
  --night-2: #182848;
  --glow: #ffd889;
  --glow-deep: #ff9d4d;
  --paper: #fff6e4;
  --ink: #1a2138;

  --cranberry: #b8323f;
  --pine: #1f6b57;
  --mustard: #e0a02b;
  --ice: #7fb8d6;
  --plum: #7a3d78;

  --swing: 1.1s cubic-bezier(.5, .05, .2, 1);
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--paper);
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #ffffffaa 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 72%, #ffffff88 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 30%, #ffffffaa 50%, transparent 51%),
    radial-gradient(1px 1px at 81% 64%, #ffffff88 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 14%, #ffffff88 50%, transparent 51%),
    linear-gradient(170deg, var(--night-2), var(--night));
  overflow: hidden;
}
/* Hintergrund aus (CONFIG.hintergrund = false): transparent, der Stream scheint durch */
body.no-bg { background: none; }

.stage {
  height: 100vh;
  padding: 2.2vh 2.4vw 2.6vh;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1.8vh;
}

/* ---------- Kopfzeile ---------- */
.head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 .4vw;
}
.head-left { display: flex; align-items: center; gap: 1.2vw; }
.badge {
  font-weight: 800; font-size: 2vh;
  padding: .5vh 1.1vh; border-radius: 10vh;
  background: var(--glow); color: var(--ink);
}
.badge[hidden] { display: none; }
.head h1 {
  font-family: 'Bagel Fat One', cursive;
  font-weight: 400;
  font-size: 4.6vh;
  letter-spacing: .01em;
  color: var(--glow);
  text-shadow: 0 .3vh 0 #0006;
}
.head p { font-weight: 800; font-size: 2.2vh; opacity: .8; }

/* ---------- Türchen-Raster ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1.8vh 1.2vw;
  min-height: 0;
}

.door {
  position: relative;
  container-type: size;      /* Schrift und Abstände skalieren mit der Türchen-Größe */
  perspective: 900px;
  min-height: 0;
}

/* Rahmen + Innenraum */
.frame {
  position: absolute; inset: 0;
  border-radius: 1.2cqw;
  background: #0b1327;
  padding: 3cqw;
  box-shadow: 0 .6vh 1.2vh #0007, inset 0 0 0 .5cqw #ffffff14;
}

.inside {
  position: relative;
  width: 100%; height: 100%;
  border-radius: .6cqw;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 105%, var(--glow) 0%, var(--glow-deep) 45%, #7a2f2a 100%);
}

/* Gewinn hinter der Tür (keine Namen, nur der Preis) */
.prize {
  display: grid;
  justify-items: center;
  gap: 2cqh;
  padding: 0 8cqw;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8cqh) scale(.85);
  transition: opacity .5s ease, transform .9s cubic-bezier(.2, 1.4, .4, 1);
}
.prize .pic { display: grid; place-items: center; }
.prize .pic svg { width: 22cqh; height: 22cqh; filter: drop-shadow(0 1cqh 0 #0002); }
.prize .pic img {
  max-width: 76cqw; max-height: 26cqh;
  object-fit: contain;
  border-radius: 1.2cqw;
  filter: drop-shadow(0 1cqh 0 #0002);
}
.prize .name:empty { display: none; }
.prize .no { font-weight: 800; font-size: 6cqh; opacity: .65; }
.prize .name {
  font-family: 'Bagel Fat One', cursive;
  font-size: 10cqh;
  line-height: 1.08;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* ---------- Die Tür selbst ---------- */
.panel {
  position: absolute;
  inset: 3cqw;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform var(--swing);
  border-radius: .6cqw;
  cursor: pointer;
}

.face, .back {
  position: absolute; inset: 0;
  border-radius: .6cqw;
  backface-visibility: hidden;
}

.face {
  background: var(--c);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1.2cqw #ffffff26, inset 0 -3cqh 0 #00000024;
}
/* eingeprägter Innenrahmen */
.face::before {
  content: '';
  position: absolute; inset: 7cqw;
  border-radius: .5cqw;
  border: .6cqw solid #ffffff3a;
}
.face .num {
  font-family: 'Bagel Fat One', cursive;
  font-size: 46cqh;
  line-height: 1;
  color: #fff6e4;
  text-shadow: 0 1.4cqh 0 #0004;
  transform: translateY(-3cqh);
}
/* Türknauf */
.face .knob {
  position: absolute;
  right: 9cqw; top: 50%;
  width: 6cqw; height: 6cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c9, var(--mustard) 60%, #8a5d10);
  box-shadow: 0 .5cqh .8cqh #0006;
}
/* Kleiner Stern unten */
.face .star {
  position: absolute; bottom: 10cqh; left: 50%;
  width: 9cqw; height: 9cqw;
  transform: translateX(-50%);
  background: var(--glow);
  clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%);
  opacity: .9;
}

.back { background: color-mix(in srgb, var(--c) 70%, black); transform: rotateY(180deg); }

/* ---------- Zustände ---------- */

/* Türchen selbst kann heranzoomen (Transform kommt per JS in --zoom) */
.door { transition: transform 1.7s cubic-bezier(.55, 0, .15, 1); z-index: 1; }
.door.is-zoomed { transform: var(--zoom); }
/* Bleibt über den Nachbarn, solange gezoomt wird - auch während des Rauszoomens (wird per JS erst nach dem Ende entfernt) */
.door.is-lifted { z-index: 50; }
.door.is-zooming-out { will-change: transform; }
.frame { transition: box-shadow 1.2s ease; }

/* Tür ist aufgeschwungen, Licht fällt raus */
.door.is-open .panel { transform: rotateY(-118deg); }
.door.is-open .frame { box-shadow: 0 .6vh 1.2vh #0007, 0 0 3vh .2vh #ffb35c66, inset 0 0 0 .5cqw #ffffff14; }

/* Gewinn ist sichtbar (bleibt danach im Raster stehen) */
.door.is-revealed .prize { opacity: 1; transform: none; }
.door.is-open .panel, .door.is-revealed .panel { cursor: pointer; }

/* heutiges Türchen: sanftes Leuchten */
.door.is-today .frame { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 .6vh 1.2vh #0007, 0 0 0 .3vh #ffd88900, inset 0 0 0 .5cqw #ffffff14; }
  50%      { box-shadow: 0 .6vh 1.2vh #0007, 0 0 2.4vh .4vh #ffd889aa, inset 0 0 0 .5cqw #ffffff14; }
}

/* Farben */
.c-cranberry { --c: var(--cranberry); }
.c-pine      { --c: var(--pine); }
.c-mustard   { --c: var(--mustard); }
.c-ice       { --c: var(--ice); }
.c-plum      { --c: var(--plum); }
.c-mustard .face .knob { background: radial-gradient(circle at 35% 30%, #fff, #c9c9c9 60%, #6b6b6b); }
.c-mustard .face .num, .c-ice .face .num { color: #23180a; text-shadow: 0 1.4cqh 0 #ffffff55; }
.c-ice .face::before, .c-mustard .face::before { border-color: #0000002e; }

@media (prefers-reduced-motion: reduce) {
  .panel, .prize, .door, .frame { transition-duration: .01s; }
  .door.is-today .frame { animation: none; }
}
/* Falsches Datum / gesperrtes Türchen: kurzes Wackeln */
.door.is-denied .face { animation: shake .5s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-1.6cqw); }
  40% { transform: translateX(1.6cqw); }
  60% { transform: translateX(-1cqw); }
  80% { transform: translateX(.8cqw); }
}


/* Aufgegangene Tür verschwindet, sobald der Gewinn gezeigt wurde - so verdeckt sie keine Nachbarn mehr */
.door.is-gone .panel {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform var(--swing), opacity .5s ease, visibility 0s .5s;
}


/* Schneefall: liegt über allem (auch über dem Vollbild-Gewinn), fängt aber keine Klicks ab */
#snow {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 60;
}