/* Typography */
:root {
  --fg: #ffffff;
  --fg-dim: #e7f0ffcc;
  --accent: #ffd166;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  /* Default background image (local). Place your image at images/fundal.jpg */
  --bg-url: url('images/fundal.jpg');
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
}
body {
  margin: 0;
  font-family: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--fg);
  background: #0a1b3d; /* deep night fallback */
  overflow: hidden; /* allow canvas snow to cover viewport */
}

/* Background: winter landscape (free Unsplash) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  /* New winter landscape with Santa sleigh silhouette tones */
  background-image:
    linear-gradient(180deg, rgba(6,14,34,0.55) 0%, rgba(6,14,34,0.35) 40%, rgba(6,14,34,0.65) 100%),
    var(--bg-url);
  background-size: cover;
  /* Keep main interest in vertical middle to survive top/bottom crop */
  background-position: center center;
  filter: saturate(1.05) contrast(1.08) brightness(0.85);
}

/* Frosted overlay for readability */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8,16,40,0.6) 0%, rgba(8,16,40,0.4) 50%, rgba(8,16,40,0.7) 100%);
  backdrop-filter: blur(1px);
}

.container {
  min-height: 100vh;
  display: grid;
  /* Force the content block to sit around the vertical middle */
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  padding: 24px;
}

.header { text-align: center; }
.header h1 {
  margin: 16px 0 8px;
  font-weight: 900;
  font-size: clamp(28px, 5vw, 56px);
  letter-spacing: 0.5px;
  text-shadow: var(--shadow);
}
.subtitle {
  margin: 0 0 24px;
  font-size: clamp(14px, 2.6vw, 18px);
  color: var(--fg-dim);
}

.countdown {
  display: flex;
  align-items: center;
  gap: clamp(10px, 3vw, 24px);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: clamp(12px, 3vw, 20px) clamp(16px, 4vw, 28px);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

.time-box {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  min-width: clamp(64px, 18vw, 120px);
}
.num {
  font-weight: 900;
  font-size: clamp(28px, 8vw, 64px);
  line-height: 1;
  color: var(--accent);
}
.label {
  margin-top: 6px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: clamp(10px, 2.2vw, 12px);
  color: var(--fg-dim);
}
.sep {
  font-size: clamp(20px, 6vw, 36px);
  opacity: 0.7;
}

.message {
  margin-top: 20px;
  color: var(--fg-dim);
  text-align: center;
}

.footer {
  margin-top: 32px;
  opacity: 0.8;
}

/* Fullscreen snow canvas */
#snow {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2;
}

/* Removed SVG village layer */

/* Santa overlay for a festive touch; subtle and centered */
.santa {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  font-size: clamp(48px, 10vw, 120px);
  opacity: 0.15;
  z-index: 1; /* between snow and background */
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

@media (max-width: 420px) {
  .time-box { min-width: 62px; }
}

/* Portrait-first adjustments */
@media (orientation: portrait) {
  .container {
    grid-template-rows: 1fr auto 2fr; /* push a bit lower for camera notches */
    padding: 40px 16px;
  }
  .header h1 {
    font-size: clamp(28px, 7vw, 52px);
  }
  .subtitle { font-size: clamp(14px, 3.8vw, 18px); }
  .countdown {
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
  }
  .sep { display: none; }
  .time-box { min-width: auto; }
  .num { font-size: clamp(32px, 10vw, 64px); }
}