:root{
  --bg-1: #0b0f17;
  --bg-2: #0f1630;
  --neon-1: #00f5ff;
  --neon-2: #8a2eff;
  --neon-3: #00ffa3;
  --glass: rgba(255,255,255,0.06);
  --glass-stroke: rgba(255,255,255,0.18);
  --text: #e8f1ff;
  --muted: #b7c2d9;
}
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 20%, #121a2d 0%, var(--bg-1) 45%, var(--bg-2) 100%);
  font-family: "Outfit", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.bg{ position:fixed; inset:0; overflow:hidden; z-index:-2; }
.bg .grid{
  position:absolute; inset:-50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 38%, rgba(255,255,255,0.04) 39% 40%, transparent 41%) 0 0/22vmin 22vmin,
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 80px);
  filter: blur(2px);
  animation: drift 40s linear infinite;
}
.bg .glow{
  position:absolute; inset:0;
  background:
    radial-gradient(40vmax 30vmax at 15% 85%, color-mix(in oklab, var(--neon-2) 35%, transparent) 0%, transparent 60%),
    radial-gradient(35vmax 35vmax at 85% 20%, color-mix(in oklab, var(--neon-1) 35%, transparent) 0%, transparent 60%),
    radial-gradient(30vmax 25vmax at 60% 75%, color-mix(in oklab, var(--neon-3) 28%, transparent) 0%, transparent 60%);
  filter: blur(40px) saturate(120%); mix-blend-mode: screen;
  animation: pulse 10s ease-in-out infinite alternate;
}
@keyframes drift{ 0%{ transform: translate3d(0,0,0) rotate(0) } 100%{ transform: translate3d(-5%,-5%,0) rotate(1deg) } }
@keyframes pulse{ from{ opacity:.7 } to{ opacity:1 } }
.wrap{ min-height:100%; display:grid; place-items:center; padding: clamp(16px, 3vw, 40px); }
.hero{ text-align:center; margin-bottom: clamp(12px, 2vw, 16px); }
.title{
  font-family:"Orbitron", ui-sans-serif, system-ui;
  letter-spacing:.06em; font-weight:800; font-size: clamp(28px, 6vw, 64px);
  text-shadow: 0 0 12px color-mix(in oklab, var(--neon-1) 55%, transparent),
               0 0 28px color-mix(in oklab, var(--neon-2) 35%, transparent);
}
.subtitle{ color:var(--muted); font-size: clamp(14px, 2.4vw, 18px); margin-top:6px; }
.panel.glass{
  width:min(1100px, 96vw); margin-inline:auto;
  backdrop-filter: blur(12px) saturate(120%);
  background: linear-gradient(180deg, color-mix(in oklab, var(--glass) 100%, transparent) 0%, rgba(255,255,255,0.03) 100%);
  border-radius: 24px; border:1px solid var(--glass-stroke);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.03);
  padding: clamp(16px, 4vw, 36px);
}
.countdown{
  display:grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items:center; gap: clamp(10px, 2.4vw, 22px); justify-items:center;
}
.sep{ font-family:"Orbitron", monospace; font-size: clamp(22px, 6vw, 40px); opacity:.6; text-shadow: 0 0 12px rgba(255,255,255,0.2); }
.unit{ display:grid; gap:8px; justify-items:center; }
.value{
  font-family:"Orbitron", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight:800; font-size: clamp(34px, 12vw, 120px); line-height:1;
  padding: clamp(10px, 3vw, 20px) clamp(12px, 3vw, 24px);
  border-radius:18px; border:1px solid rgba(255,255,255,0.18);
  background: radial-gradient(120% 160% at 10% 10%, rgba(255,255,255,0.10), transparent 55%),
             linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow: 0 10px 28px color-mix(in oklab, var(--neon-2) 24%, transparent),
              inset 0 0 30px color-mix(in oklab, var(--neon-1) 10%, transparent);
  color: var(--text);
  text-shadow: 0 0 18px color-mix(in oklab, var(--neon-1) 50%, transparent),
               0 0 40px color-mix(in oklab, var(--neon-2) 35%, transparent),
               0 0 8px rgba(255,255,255,0.4);
  transform-style: preserve-3d; perspective: 800px;
}
.value.flip{ animation: flip 600ms cubic-bezier(.2,.8,.2,1); }
@keyframes flip{
  0%{ transform: rotateX(0) scale(1) }
  45%{ transform: rotateX(75deg) scale(.98); filter: brightness(1.2) }
  100%{ transform: rotateX(0) scale(1) }
}
.label{ font-size: clamp(11px, 2.4vw, 14px); letter-spacing:.14em; text-transform: uppercase; color: var(--muted); }
.hint{ text-align:center; margin:18px auto 0; color: var(--muted); }
.footer{ margin-top: clamp(14px, 4vw, 28px); text-align:center; color: var(--muted); }
/* Mobile */
@media (max-width: 640px){
  .countdown{ grid-template-columns: 1fr 1fr; }
  .sep{ display:none; }
}