@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Montserrat:wght@600;700&display=swap');

:root { color-scheme:dark; background:#000; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; background:#000; }
body { overflow:hidden; color:#fff; font-family:Montserrat,Arial,sans-serif; }
.countdown-stage { min-height:100svh; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(25px,4.5vw,74px); background:radial-gradient(ellipse at 50% 52%,#1a0010 0%,#070004 38%,#000 73%); }
header { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
.brand,.launch,footer { font:500 10px/1.2 "DM Mono",monospace; letter-spacing:.15em; }
.brand { margin:0; color:#ff3fab; }
.launch { margin:0; color:rgba(255,223,243,.64); text-align:right; }
.clock { display:flex; justify-content:center; align-items:center; gap:clamp(6px,1.2vw,23px); margin:auto 0; }
.unit { display:grid; justify-items:center; gap:12px; }
.unit p { margin:0; font:500 9px/1 "DM Mono",monospace; letter-spacing:.16em; color:rgba(255,221,242,.72); }
.pair { display:flex; align-items:center; gap:clamp(0px,.25vw,5px); }
.slot { width:clamp(48px,9.5vw,186px); aspect-ratio:360/444; overflow:visible; position:relative; }
.glyph { --glyph-scale:1; display:block; width:100%; height:100%; object-fit:contain; transform:scale(var(--glyph-scale)); filter:drop-shadow(0 10px 16px rgba(255,0,153,.13)); will-change:transform,filter,opacity; }
/* Los renders IA no comparten el mismo encuadre: compensación óptica sin deformar la fibra. */
.glyph[data-digit="7"] { --glyph-scale:.84; }
.glyph[data-digit="8"] { --glyph-scale:.82; }
.slot.changed .glyph { animation: subtle-settle 470ms cubic-bezier(.21,.86,.43,1) both; }
.slot.intro .glyph { animation: intro-settle 720ms cubic-bezier(.18,.9,.35,1) both; }
@keyframes subtle-settle { 0%{opacity:.2;transform:translateY(-9px) scale(var(--glyph-scale));filter:blur(.7px) drop-shadow(0 10px 16px rgba(255,0,153,.13))} 58%{opacity:1;transform:translateY(2px) scale(var(--glyph-scale));filter:blur(0) drop-shadow(0 10px 16px rgba(255,0,153,.13))} 100%{transform:translateY(0) scale(var(--glyph-scale))} }
@keyframes intro-settle { 0%{opacity:0;transform:translateY(-18px) rotate(-1deg) scale(var(--glyph-scale))} 68%{opacity:1;transform:translateY(3px) rotate(.18deg) scale(var(--glyph-scale))} 100%{transform:translateY(0) rotate(0) scale(var(--glyph-scale))} }
.separator { align-self:center; margin-bottom:25px; color:#ff43ad; font:300 clamp(21px,4vw,72px)/1 Arial,sans-serif; opacity:.7; }
footer { display:flex; align-items:center; gap:8px; color:rgba(255,225,244,.56); }
.live-dot { width:7px; height:7px; border-radius:50%; background:#ff009d; box-shadow:0 0 12px #ff009d; }
@media (max-width:620px) { .countdown-stage{padding:25px 18px}.launch{max-width:180px;font-size:8px}.clock{gap:3px}.unit{gap:8px}.slot{width:11vw;min-width:35px}.separator{font-size:25px;margin-bottom:19px}.unit p{font-size:7px;letter-spacing:.07em} }
@media (prefers-reduced-motion:reduce){.slot.changed .glyph,.slot.intro .glyph{animation:none}}

/* Botón "Jugar Ahora" (lo agrega publicar/build.js) */
.play { align-self:center; margin:0 0 clamp(8px,2vw,24px); padding:16px 34px; border:1px solid #ff6cc0; border-radius:999px; background:linear-gradient(180deg,#ff3fab,#d1007a); color:#fff; font:700 13px/1 Montserrat,Arial,sans-serif; letter-spacing:.22em; text-transform:uppercase; text-decoration:none; box-shadow:0 0 28px rgba(255,0,157,.35); transition:transform .15s ease, box-shadow .15s ease; }
.play:hover { transform:translateY(-1px); box-shadow:0 0 42px rgba(255,0,157,.6); }
.play:active { transform:translateY(1px); }
.play:focus-visible { outline:2px solid #fff; outline-offset:4px; }
@media (max-width:620px) { .play { padding:14px 26px; font-size:11px; } }
@media (prefers-reduced-motion:reduce) { .play { transition:none; } }