*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;              /* geen schuifbalken */
  background: #1a0f0a;           /* donker-warm, voor als de foto nog laadt */
  color: #fff8ec;
}

/* Schermvullende foto, niet uitgerekt, gecentreerde uitsnede */
.bg {
  position: fixed;
  inset: 0;
  background: #1a0f0a url("KerstAchtergrond.jpg") center center / cover no-repeat;
}

/* Zachte, transparante gloed achter de timer voor leesbaarheid — geen paneel */
.glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 50% 50%, rgba(15, 8, 4, .38), rgba(15, 8, 4, 0) 70%),
    linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.18));
}

#snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;          /* blokkeert geen bediening */
  z-index: 2;
}

.stage {
  position: fixed;
  inset: 0;
  z-index: 1;                    /* sneeuw valt er licht overheen */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  text-align: center;
}

.title {
  margin: 0 0 .25em;
  font-family: "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive;
  font-weight: 400;
  font-size: clamp(2.2rem, 7.5vw, 5.5rem);
  line-height: 1.15;
  color: #fff3dc;
  text-shadow:
    0 0 18px rgba(255, 200, 120, .45),
    0 2px 6px rgba(0, 0, 0, .55);
}

.timer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(.15rem, 1.2vw, .9rem);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  color: #fffaf0;
}

.unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.num {
  display: block;
  font-weight: 600;
  font-size: clamp(2.6rem, 11vw, 8.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;   /* cijfers even breed: niets verspringt */
  min-width: 2ch;                                    /* vaste breedte per blok */
  text-align: center;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, .6),
    0 0 22px rgba(0, 0, 0, .35);
}
#d { min-width: 2ch; }

.sep {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.2rem, 9vw, 7rem);
  line-height: 1;
  opacity: .7;
  transform: translateY(-.04em);
  text-shadow: 0 2px 4px rgba(0, 0, 0, .55);
}

.label {
  margin-top: .35em;
  font-size: clamp(.8rem, 2.2vw, 1.35rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f3e3c4;
  /* vaste breedte zodat "dag"/"dagen" e.d. de layout niet verschuift */
  min-width: 8.5ch;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}

.done {
  margin: .2em 0 0;
  font-family: "Great Vibes", "Snell Roundhand", cursive;
  font-size: clamp(2.6rem, 10vw, 7rem);
  color: #fff3dc;
  text-shadow: 0 0 22px rgba(255, 200, 120, .55), 0 2px 6px rgba(0, 0, 0, .6);
}

/* Smalle schermen: scheidingstekens weg, labels kleiner */
@media (max-width: 520px) {
  .sep { display: none; }
  .timer { gap: 0; width: 100%; max-width: 420px; justify-content: space-between; }
  .unit { flex: 1 1 0; }
  .num { font-size: clamp(2.6rem, 15.5vw, 4.4rem); }
  .label { font-size: clamp(.68rem, 3vw, .9rem); letter-spacing: .05em; min-width: 0; }
  .title { font-size: clamp(2.1rem, 10vw, 3.2rem); }
}

/* Liggende telefoon met weinig hoogte */
@media (max-height: 430px) and (orientation: landscape) {
  .title { font-size: clamp(1.8rem, 6vh + 1rem, 3.2rem); }
  .num { font-size: clamp(2.2rem, 18vh, 5rem); }
  .sep { font-size: clamp(1.8rem, 15vh, 4rem); }
}