:root{
  --bg1:#ffecd2;
  --bg2:#fcb69f;
  --card:#ffffffee;
  --ink:#2d2a32;
  --accent:#ffd166;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0; padding:0;}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background: 
    linear-gradient(135deg, rgba(255, 236, 210, 0.85), rgba(252, 182, 159, 0.85)),
    url('img/disney.jpg') center/cover fixed;
  background-attachment: fixed;
  display:flex; 
  align-items:center; 
  justify-content:center;
  min-height:100vh;
  padding:20px;
}
.wrap{
  width:min(980px,92vw);
  background:var(--card);
  border-radius:24px;
  padding:24px clamp(16px,4vw,40px);
  box-shadow:0 20px 60px #00000022;
  text-align:center;
}
h1{margin:0 0 8px; font-size:clamp(1.6rem,2.5vw,2.4rem)}
.subtitle{margin:0 0 22px; opacity:.85}
#timer{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px;
}
.timebox{
  background:white;
  border-radius:18px;
  padding:18px 10px;
  box-shadow:0 8px 24px #00000014;
  transition: transform 0.2s;
}
.timebox:hover{
  transform: translateY(-4px);
  box-shadow:0 12px 28px #00000020;
}
.timebox span{
  display:block;
  font-weight:800;
  font-size:clamp(1.8rem,7vw,4rem);
  line-height:1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.timebox label{
  display:block;
  margin-top:8px;
  font-size:.95rem;
  letter-spacing:.04em;
  opacity:.7;
}
.cta{
  margin:20px 0 6px;
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
button{
  border:0; border-radius:999px; padding:12px 18px;
  background:var(--accent); color:#222; font-weight:700; cursor:pointer;
  box-shadow:0 6px 14px #00000018;
  transition: all 0.2s;
}
button:hover{
  transform: translateY(-2px);
  box-shadow:0 8px 18px #00000025;
}
button:active{transform:translateY(1px)}
.hint{font-size:.9rem; opacity:.7}
#confetti-canvas{
  position:fixed; inset:0; pointer-events:none; z-index:999;
}
@media (max-width:560px){
  #timer{grid-template-columns: repeat(2, minmax(0,1fr));}
  body{padding:10px;}
}