/* ============ Tokens ============ */
:root{
  --sky-top:#0b3d91;
  --sky-mid:#1d63c9;
  --sky-bottom:#59b6f0;
  --snow:#fbfeff;
  --wood-light:#a9703f;
  --wood:#8a5a30;
  --wood-dark:#6b4321;
  --wood-shadow:#4a2c14;
  --gold:#ffd93d;
  --green:#3cb043;
  --green-dark:#1f7a2e;
  --red:#e63946;
  --cream:#fbf2d9;
  --display-font:'Baloo 2', cursive;
  --body-font:'Fredoka', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  font-family:var(--body-font);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  background:var(--sky-bottom);
  color:#1a2b4c;
}

/* ============ Sky Scene ============ */
.scene{
  position:fixed;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 45%, var(--sky-bottom) 100%);
  overflow:hidden;
}

.stars{position:absolute; inset:0; top:0; height:55%;}
.stars::before, .stars::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(2px 2px at 10% 15%, #fff 100%, transparent),
    radial-gradient(2px 2px at 25% 30%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 40% 10%, #fff 100%, transparent),
    radial-gradient(2px 2px at 60% 22%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 75% 8%, #fff 100%, transparent),
    radial-gradient(2px 2px at 88% 18%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 95% 30%, #fff 100%, transparent),
    radial-gradient(1.5px 1.5px at 5% 40%, #fff 100%, transparent);
  animation:twinkle 3s ease-in-out infinite alternate;
}
.stars::after{animation-delay:1.5s; opacity:.6;}
@keyframes twinkle{from{opacity:.3;} to{opacity:1;}}

.clouds{
  position:absolute;
  background:#fff;
  opacity:.85;
  border-radius:100px;
  filter:blur(1px);
}
.clouds::before, .clouds::after{
  content:"";
  position:absolute;
  background:#fff;
  border-radius:100px;
}
.cloud-1{width:140px; height:40px; top:6%; left:-10%; animation:driftRight 55s linear infinite;}
.cloud-1::before{width:70px; height:70px; top:-30px; left:15px;}
.cloud-1::after{width:50px; height:50px; top:-20px; left:70px;}
.cloud-2{width:100px; height:32px; top:14%; left:-20%; animation:driftRight 70s linear infinite; animation-delay:-15s;}
.cloud-2::before{width:55px; height:55px; top:-22px; left:10px;}
.cloud-2::after{width:40px; height:40px; top:-15px; left:55px;}
.cloud-3{width:160px; height:44px; top:3%; right:-15%; animation:driftLeft 65s linear infinite;}
.cloud-3::before{width:80px; height:80px; top:-34px; left:20px;}
.cloud-3::after{width:55px; height:55px; top:-22px; left:80px;}
.cloud-4{width:110px; height:34px; top:20%; right:-25%; animation:driftLeft 80s linear infinite; animation-delay:-20s;}
.cloud-4::before{width:60px; height:60px; top:-25px; left:12px;}
.cloud-4::after{width:42px; height:42px; top:-16px; left:58px;}

@keyframes driftRight{from{transform:translateX(0);} to{transform:translateX(130vw);}}
@keyframes driftLeft{from{transform:translateX(0);} to{transform:translateX(-130vw);}}

.trees{position:absolute; bottom:0; z-index:1;}
.trees-left{left:0;}
.trees-right{right:0;}
.tree{
  position:relative;
  width:0; height:0;
  border-left:60px solid transparent;
  border-right:60px solid transparent;
  border-bottom:140px solid #1f7a3c;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.35));
  margin-bottom:-20px;
}
.tree::before{
  content:"";
  position:absolute;
  bottom:-40px; left:-45px;
  width:0; height:0;
  border-left:45px solid transparent;
  border-right:45px solid transparent;
  border-bottom:110px solid #248245;
}
.tree::after{
  content:"❄";
  position:absolute;
  top:-14px; left:-14px;
  font-size:22px;
  color:#fff;
  text-shadow:0 0 4px rgba(255,255,255,.8);
}
.t1{margin-left:-10px; transform:scale(.8);}
.t2{margin-left:40px; transform:scale(1.1);}
.t3{margin-right:20px; transform:scale(1);}
.t4{margin-right:-20px; transform:scale(.75);}

.snow-ground{
  position:absolute;
  bottom:0; left:0; right:0;
  height:14vh;
  background:var(--snow);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  transform:scaleX(1.3);
  box-shadow:0 -6px 20px rgba(255,255,255,.6);
  z-index:1;
}

.snow-container{position:absolute; inset:0; z-index:2; pointer-events:none;}
.snowflake{
  position:absolute;
  top:-10px;
  color:#fff;
  user-select:none;
  pointer-events:none;
  animation-name:fall;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  text-shadow:0 0 4px rgba(255,255,255,.7);
}
@keyframes fall{
  to{ transform:translateY(110vh) translateX(var(--drift,20px)) rotate(360deg); }
}

/* ============ Fireworks canvas ============ */
#fireworksCanvas{
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
  display:none;
}
body.event-active #fireworksCanvas{display:block;}

/* ============ Content ============ */
.content{
  position:relative;
  z-index:3;
  max-width:760px;
  margin:0 auto;
  padding:32px 20px 40px;
  text-align:center;
}

.page-title{
  font-family:var(--display-font);
  font-weight:800;
  font-size:clamp(2.4rem, 8vw, 4rem);
  color:var(--gold);
  -webkit-text-stroke:2px var(--wood-shadow);
  text-shadow:
    3px 3px 0 var(--wood-shadow),
    0 0 20px rgba(255,217,61,.5);
  margin:10px 0 28px;
  letter-spacing:1px;
}
.holly{
  font-size:.55em;
  display:inline-block;
  -webkit-text-stroke:0;
  text-shadow:none;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.3));
}
.holly-left{transform:rotate(-15deg);}
.holly-right{transform:rotate(15deg) scaleX(-1);}

/* ---- Wood sign ---- */
.sign{
  display:flex;
  align-items:center;
  gap:0;
  margin:0 auto 22px;
  max-width:640px;
  position:relative;
}
.newyear-sign{flex-direction:row-reverse;}

.sign-icon{
  font-size:64px;
  flex:0 0 auto;
  margin:0 -18px;
  z-index:2;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.35));
  animation:bob 3s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(-2deg);}
  50%{transform:translateY(-6px) rotate(2deg);}
}

.sign-plank{
  flex:1;
  position:relative;
  background:
    repeating-linear-gradient(90deg, var(--wood-light) 0 6px, var(--wood) 6px 46px, var(--wood-dark) 46px 50px);
  border:5px solid var(--wood-shadow);
  border-radius:16px;
  padding:18px 22px;
  box-shadow:
    0 8px 0 var(--wood-shadow),
    0 14px 18px rgba(0,0,0,.35),
    inset 0 0 0 3px rgba(255,255,255,.08);
}
.sign-plank::before{
  content:"";
  position:absolute;
  top:-14px; left:10%; right:10%;
  height:18px;
  background:var(--snow);
  border-radius:0 0 50% 50% / 0 0 100% 100%;
  box-shadow:0 -2px 8px rgba(255,255,255,.7);
}
.sign-plank::after{
  content:"";
  position:absolute;
  left:14px; right:14px; top:6px; bottom:6px;
  border:2px dashed rgba(255,255,255,.15);
  border-radius:8px;
  pointer-events:none;
}

.sign-text{
  font-family:var(--display-font);
  font-size:clamp(1.1rem, 4.4vw, 1.7rem);
  font-weight:700;
  color:var(--cream);
  text-shadow:1px 2px 2px rgba(0,0,0,.5);
  line-height:1.3;
}
.christmas-sign .num{color:var(--green); font-size:1.5em; -webkit-text-stroke:1px var(--wood-shadow);}
.christmas-sign strong{color:#ffffff;}
.newyear-sign .num{color:#7fd0ff; -webkit-text-stroke:1px var(--wood-shadow); font-size:1.5em;}
.newyear-sign strong{color:var(--gold);}

/* ---- Clock + date row ---- */
.clock-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin:34px 0 20px;
}

.santa-clock{
  position:relative;
  width:150px; height:150px;
}
.santa-hat{
  position:absolute;
  top:-38px; left:50%;
  transform:translateX(-40%) rotate(-18deg);
  font-size:58px;
  z-index:3;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.35));
}
.clock-wreath{
  width:150px; height:150px;
  border-radius:50%;
  background:conic-gradient(var(--green) 0 10deg, var(--green-dark) 10deg 20deg);
  padding:10px;
  box-shadow:0 10px 18px rgba(0,0,0,.4), inset 0 0 0 3px rgba(0,0,0,.15);
  position:relative;
}
.clock-wreath::before{
  content:"🔴🟡🔵🔴🟡🔵🔴🟡🔵🔴🟡🔵";
  position:absolute;
  inset:0;
  font-size:11px;
  line-height:1;
  color:transparent;
}
.clock-face{
  width:100%; height:100%;
  background:var(--cream);
  border-radius:50%;
  position:relative;
  box-shadow:inset 0 0 0 4px var(--wood-shadow), inset 0 4px 10px rgba(0,0,0,.15);
}
.clock-face span{
  position:absolute;
  font-family:var(--display-font);
  font-weight:700;
  color:var(--wood-shadow);
  font-size:15px;
}
.num12{top:8px; left:50%; transform:translateX(-50%);}
.num6{bottom:8px; left:50%; transform:translateX(-50%);}
.num3{right:10px; top:50%; transform:translateY(-50%);}
.num9{left:10px; top:50%; transform:translateY(-50%);}

.hand{
  position:absolute;
  bottom:50%;
  left:50%;
  transform-origin:50% 100%;
  background:var(--wood-shadow);
  border-radius:4px;
}
.hour-hand{width:5px; height:34px; margin-left:-2.5px;}
.minute-hand{width:4px; height:48px; margin-left:-2px; background:#3a2311;}
.second-hand{width:2px; height:54px; margin-left:-1px; background:var(--red);}
.center-cap{
  position:absolute;
  top:50%; left:50%;
  width:12px; height:12px;
  background:var(--wood-shadow);
  border-radius:50%;
  transform:translate(-50%,-50%);
  z-index:4;
}

.datetime-board{
  background:
    repeating-linear-gradient(90deg, var(--wood-light) 0 6px, var(--wood) 6px 46px, var(--wood-dark) 46px 50px);
  border:5px solid var(--wood-shadow);
  border-radius:14px;
  padding:16px 22px;
  box-shadow:0 6px 0 var(--wood-shadow), 0 12px 16px rgba(0,0,0,.3);
  min-width:220px;
}
.date-line{
  font-family:var(--display-font);
  font-weight:700;
  color:var(--cream);
  font-size:1.05rem;
  margin-bottom:4px;
  text-shadow:1px 1px 2px rgba(0,0,0,.5);
}
.time-line{
  font-family:var(--display-font);
  font-weight:800;
  color:var(--red);
  font-size:1.35rem;
  text-shadow:1px 1px 0 rgba(0,0,0,.35);
  letter-spacing:1px;
}

/* ---- Footer ---- */
.credit{
  margin-top:22px;
  display:inline-block;
  background:var(--green-dark);
  color:var(--gold);
  font-family:var(--display-font);
  font-weight:700;
  font-size:1rem;
  padding:10px 28px;
  border-radius:999px;
  box-shadow:0 5px 0 #144d1f, 0 8px 14px rgba(0,0,0,.3);
}

/* ---- Message popup ---- */
.message-popup{
  position:fixed;
  z-index:10;
  top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.7);
  background:linear-gradient(160deg, #ffffff, var(--cream));
  border:5px solid var(--gold);
  border-radius:22px;
  padding:22px 34px;
  max-width:min(90vw, 480px);
  text-align:center;
  font-family:var(--display-font);
  font-weight:700;
  font-size:clamp(1.2rem, 5vw, 1.8rem);
  color:var(--wood-shadow);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
}
.message-popup.show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.message-popup.from-top{transform:translate(-50%,-220%) scale(.8);}
.message-popup.from-top.show{transform:translate(-50%,-50%) scale(1);}
.message-popup.from-bottom{transform:translate(-50%,120%) scale(.8);}
.message-popup.from-bottom.show{transform:translate(-50%,-50%) scale(1);}
.message-popup.from-left{transform:translate(-220%,-50%) scale(.8);}
.message-popup.from-left.show{transform:translate(-50%,-50%) scale(1);}
.message-popup.from-right{transform:translate(120%,-50%) scale(.8);}
.message-popup.from-right.show{transform:translate(-50%,-50%) scale(1);}

/* ---- Event banner text swap ---- */
.event-live .sign-text{animation:pulseGlow 1.4s ease-in-out infinite;}
@keyframes pulseGlow{
  0%,100%{filter:drop-shadow(0 0 2px var(--gold));}
  50%{filter:drop-shadow(0 0 14px var(--gold));}
}

/* ---- Responsive ---- */
@media(max-width:520px){
  .sign{flex-direction:column;}
  .newyear-sign{flex-direction:column-reverse;}
  .sign-icon{margin:0 0 -14px;}
  .sign-plank{width:100%;}
  .clock-row{gap:10px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}