:root {
  --sky-1: #d7f2ff;
  --sky-2: #9fd8f7;
  --snow: #f6fbff;
  --ice: #dff4ff;
  --ink: #0b2b3e;
  --accent: #de1f2f;
  --tree-a: #1e6e54;
  --tree-b: #154f3d;
  --tree-trunk: #5f3c2a;
  --shadow: rgba(8, 29, 47, 0.22);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
  font-family: "Barlow Condensed", sans-serif;
  background: radial-gradient(circle at 20% 15%, var(--sky-1), transparent 45%),
    linear-gradient(180deg, var(--sky-2) 0%, #84c9ee 45%, #c7ebff 100%);
  color: var(--ink);
}

#three-bg,
#ski-world,
.overlay {
  position: fixed;
  inset: 0;
}

#three-bg {
  z-index: 1;
}

#ski-world {
  z-index: 2;
  width: 100%;
  height: 100%;
}

.overlay {
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  text-align: center;
  pointer-events: none;
  text-transform: uppercase;
  padding-top: clamp(0.25rem, 2vh, 1rem);
}

.label {
  margin: 0 0 0.4rem;
  letter-spacing: 0.25rem;
  font-size: clamp(0.8rem, 2.4vw, 1.2rem);
  font-weight: 700;
  opacity: 0.9;
}

.countdown {
  margin: 0;
  font-family: "Bungee", sans-serif;
  font-size: clamp(2rem, 9vw, 5.6rem);
  font-weight: 800;
  line-height: 1;
  white-space: pre-line;
  color: #031726;
  text-shadow: 0 8px 24px rgba(255, 255, 255, 0.68), 0 1px 0 #fff;
  letter-spacing: 0.05em;
  opacity: 1;
  transition: opacity 1.8s ease;
}

.countdown.countdown-transparent {
  opacity: 0;
  transition: none;
}

.target {
  margin: 0.6rem 0 0;
  font-size: clamp(0.95rem, 2.2vw, 1.3rem);
  letter-spacing: 0.2rem;
  font-weight: 700;
}

.skier-shadow {
  fill: rgba(9, 21, 31, 0.13);
}

.hat {
  fill: #0f2b3d;
}

.face {
  fill: #f6d2ba;
}

.jacket {
  fill: #1e8dd6;
}

.arm {
  fill: #2aa0f0;
}

.pants {
  fill: #143d57;
}

.ski {
  fill: #0f2533;
}

.pole {
  stroke: #0f2533;
  stroke-width: 0.5;
  stroke-linecap: round;
}

.scarf {
  fill: var(--accent);
  transform-origin: -1.2px -10.8px;
  animation: scarf-wave 0.8s infinite alternate ease-in-out;
}

.tree-top {
  fill: var(--tree-a);
}

.tree-top-dark {
  fill: var(--tree-b);
}

.tree-trunk {
  fill: var(--tree-trunk);
}

.joy-text {
  fill: #ffffff;
  font-family: "Bungee", sans-serif;
  font-size: 3.2px;
  letter-spacing: 0.05em;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(3, 23, 38, 0.45);
  stroke-width: 0.35px;
  stroke-linejoin: round;
}

@keyframes scarf-wave {
  from {
    transform: rotate(-10deg) translateX(-0.3px);
  }

  to {
    transform: rotate(7deg) translateX(0.35px);
  }
}

@media (max-width: 600px) {
  .countdown {
    letter-spacing: 0.02em;
  }

  .target,
  .label {
    letter-spacing: 0.12rem;
  }
}