:root {
  --bg1: #1f2937; --bg2: #111827; --fg: #f9fafb; --accent: #fbbf24;
  --font: 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font); color: var(--fg);
  background: linear-gradient(160deg, var(--bg1), var(--bg2)) fixed;
  display: grid; place-items: center; overflow: hidden; position: relative;
}
main { position: relative; z-index: 1; text-align: center; padding: 16px; }
.icon { font-size: clamp(3rem, 12vw, 6rem); line-height: 1; animation: float 4s ease-in-out infinite; }
.kicker { margin: .5rem 0 0; letter-spacing: .2em; text-transform: uppercase; opacity: .8; font-size: .9rem; }
h1 { margin: .2em 0; font-size: clamp(2rem, 8vw, 4.5rem); line-height: 1.1; }
h1 small { font-size: .5em; opacity: .8; font-weight: 400; }
.big { display: flex; align-items: baseline; justify-content: center; gap: .3em; color: var(--accent); }
.big #days { font-size: clamp(6rem, 28vw, 15rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.unit { font-size: clamp(1.5rem, 5vw, 3rem); }
.clock { font-size: clamp(1.5rem, 6vw, 3rem); font-variant-numeric: tabular-nums; letter-spacing: .1em; opacity: .9; }
.date::first-letter { text-transform: uppercase; }
.date { margin-top: 1.5rem; opacity: .75; font-size: 1.1rem; }
.today { font-size: clamp(3rem, 14vw, 8rem); font-weight: 800; color: var(--accent); }
code { background: #0003; padding: 2px 6px; border-radius: 4px; }

.decor { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
@keyframes float { 50% { transform: translateY(-10px); } }
@keyframes fall { to { background-position: 0 800px, 0 600px, 0 1000px; } }
@keyframes twinkle { 50% { opacity: .25; } }
@keyframes confetti { to { background-position: 0 700px, 0 900px, 0 500px, 0 800px; } }

/* Jul: snø over mørk grønn/rød */
.theme-christmas { --bg1: #7f1d1d; --bg2: #14532d; --accent: #fde68a; --font: Georgia, 'Times New Roman', serif; }
.theme-christmas .decor {
  background-image:
    radial-gradient(4px 4px at 20px 30px, #fff, transparent),
    radial-gradient(3px 3px at 90px 80px, #fff, transparent),
    radial-gradient(5px 5px at 160px 150px, #fffd, transparent);
  background-size: 200px 200px, 150px 150px, 250px 250px;
  animation: fall 14s linear infinite;
}

/* Nyttår: midnattsblå med gull og glitrende stjerner */
.theme-newyear { --bg1: #0b1026; --bg2: #2e1065; --accent: #facc15; }
.theme-newyear .decor {
  background-image:
    radial-gradient(2px 2px at 40px 60px, #facc15, transparent),
    radial-gradient(2px 2px at 120px 20px, #fff, transparent),
    radial-gradient(3px 3px at 200px 140px, #f0abfc, transparent);
  background-size: 220px 180px, 160px 200px, 260px 240px;
  animation: twinkle 2.5s ease-in-out infinite;
}
.theme-newyear h1 { letter-spacing: .08em; text-transform: uppercase; }

/* Påske: pastell gul/grønn/lilla */
.theme-easter { --bg1: #fef9c3; --bg2: #bbf7d0; --fg: #4c1d95; --accent: #c026d3; --font: 'Trebuchet MS', system-ui, sans-serif; }
.theme-easter .decor {
  background:
    radial-gradient(ellipse 60px 80px at 12% 88%, #f9a8d4 60%, transparent 61%),
    radial-gradient(ellipse 50px 68px at 88% 92%, #93c5fd 60%, transparent 61%),
    radial-gradient(ellipse 44px 60px at 70% 96%, #fde047 60%, transparent 61%),
    radial-gradient(ellipse 50px 68px at 30% 98%, #c4b5fd 60%, transparent 61%);
}

/* Bursdag: konfetti */
.theme-birthday { --bg1: #be185d; --bg2: #7c3aed; --accent: #fde047; --font: 'Comic Sans MS', 'Chalkboard SE', system-ui, sans-serif; }
.theme-birthday .decor {
  background-image:
    radial-gradient(6px 6px at 40px 40px, #fde047, transparent),
    radial-gradient(5px 5px at 130px 90px, #67e8f9, transparent),
    radial-gradient(6px 6px at 210px 20px, #86efac, transparent),
    radial-gradient(5px 5px at 80px 160px, #fff, transparent);
  background-size: 240px 200px, 180px 220px, 300px 180px, 200px 240px;
  animation: confetti 9s linear infinite;
}

/* Merkedag: norsk blå/rød/hvit */
.theme-holiday { --bg1: #1e3a8a; --bg2: #0f172a; --accent: #fff; }
.theme-holiday .decor {
  background: linear-gradient(90deg, transparent 28%, #fff1 28% 34%, #dc262688 34% 40%, #fff1 40% 46%, transparent 46%) ;
}

@media (prefers-reduced-motion: reduce) { .decor, .icon { animation: none; } }