/* Fuente de OBS: 840 × 400. El reloj (600 × 240) va al medio y el resto queda transparente para
   que el scrap de las explosiones vuele fuera del marco. Paleta de su stream: la pared de
   ladrillos iluminada de rosa a celeste. */
:root{--rosa:#ff3dc8;--violeta:#8b5cff;--celeste:#2fd8ff;--neon:linear-gradient(90deg,var(--rosa),var(--violeta) 50%,var(--celeste))}
*{box-sizing:border-box}
html,body{width:840px;height:400px;margin:0;padding:0;background:transparent;overflow:hidden}
#escena{position:relative;width:840px;height:400px}
#clock{position:absolute;left:120px;top:80px;width:600px;height:240px;color:#fff;font-family:'Montserrat','Arial Black',Arial,sans-serif}
#explosion{position:absolute;left:0;top:0;width:840px;height:400px;pointer-events:none}
#clock.sacudon{animation:sacudon .4s cubic-bezier(.36,.07,.19,.97) both}
@keyframes sacudon{10%{transform:translate(-6px,3px) rotate(-.7deg)}25%{transform:translate(7px,-4px) rotate(.7deg)}40%{transform:translate(-5px,3px) rotate(-.3deg)}55%{transform:translate(4px,-2px)}75%{transform:translate(-2px,1px)}100%{transform:none}}

/* El marco: panel oscuro con borde de neón y la luz de la pared reflejada en las esquinas. */
.marco,.brillo,.destello{position:absolute;left:14px;top:24px;width:572px;height:166px;border-radius:26px}
.brillo{background:var(--neon);filter:blur(13px);opacity:.5}
.marco{border:3px solid transparent;background:
 radial-gradient(90% 120% at 0% 0%,rgba(255,61,200,.26),transparent 60%) padding-box,
 radial-gradient(90% 120% at 100% 100%,rgba(47,216,255,.22),transparent 60%) padding-box,
 linear-gradient(180deg,#1a1140,#0b0a24) padding-box,
 var(--neon) border-box}
.destello{border:3px solid currentColor;color:var(--violeta);opacity:0}

/* Arriba, el cartel HAPPY HOUR X2: solo aparece mientras la x2 está activa. */
.solapa{position:absolute;top:10px;left:50%;transform:translateX(-50%);height:30px;padding:0 20px;border-radius:15px;display:none;align-items:center;white-space:nowrap;
 border:2px solid transparent;background:var(--neon) border-box;box-shadow:0 0 16px rgba(255,61,200,.8);text-shadow:0 1px 0 rgba(20,0,40,.45);
 font-weight:900;font-style:italic;font-size:14px;letter-spacing:3px}
#clock.happy .solapa{display:flex}

/* Los números: blancos con la mitad de abajo apenas lila (el "cromado" de sus títulos) y relieve azul. */
.digits{position:absolute;left:14px;right:14px;top:42px;display:flex;justify-content:center;align-items:flex-start}
.grupo{display:flex;flex-direction:column;align-items:center}
.part{display:block;padding:0 10px 0 6px;font-weight:900;font-style:italic;font-size:88px;line-height:88px;letter-spacing:-1px;font-variant-numeric:tabular-nums;
 background:linear-gradient(180deg,#fff 0,#fff 54%,#dcd8f6 55%,#c2c3ee 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
 filter:drop-shadow(-1px 1px 0 #8d8cf5) drop-shadow(-1px 1px 0 #7473e8) drop-shadow(-1px 1px 0 #5d58d8) drop-shadow(-1px 2px 0 #4538bd) drop-shadow(0 0 14px rgba(64,110,255,.55))}
.colon{font-weight:900;font-style:italic;font-size:70px;line-height:88px;margin:0 -2px;color:var(--rosa);text-shadow:0 0 12px rgba(255,61,200,.9)}
.colon.celeste{color:var(--celeste);text-shadow:0 0 12px rgba(47,216,255,.9)}
.label{margin-top:2px;padding-left:5px;font-family:'Bebas Neue','Arial Narrow',Arial,sans-serif;font-size:18px;line-height:18px;letter-spacing:6px;color:#d2ccff;text-shadow:0 0 8px rgba(139,92,255,.7)}
#clock.long .part{font-size:76px}#clock.long .colon{font-size:60px}
#clock.longer .part{font-size:64px}#clock.longer .colon{font-size:52px}

/* Aviso de cada aporte: ocupa el renglón de las etiquetas. */
.notice{position:absolute;left:0;right:0;top:130px;text-align:center;font-weight:900;font-style:italic;font-size:20px;line-height:24px;letter-spacing:2px;color:#fff;opacity:0;
 text-shadow:0 0 10px var(--rosa),0 0 22px rgba(255,61,200,.6)}
#clock.noticing .notice{opacity:1}#clock.noticing .label{visibility:hidden}
.connection{position:absolute;right:34px;top:40px;width:7px;height:7px;background:#ffb640;border-radius:50%;box-shadow:0 0 6px #ffb640;display:none}
.connection.visible{display:block}

/* El logo del canal, al medio y abajo, montado sobre el borde. */
.logo{position:absolute;left:198px;top:158px;width:204px;height:74px;transform:perspective(520px) rotateY(-12deg);filter:drop-shadow(0 6px 8px rgba(8,4,24,.55))}

/* Festejo de cada aporte: se enciende el marco con el color del tipo de aporte y giran los números. */
#clock.celebrating .destello{animation:destello 1.35s ease-out both}
#clock.celebrating .brillo{animation:brillo 1.35s ease-out both}
#clock.celebrating.sub .destello{color:var(--rosa)}
#clock.celebrating.kicks .destello{color:#53fc18}
#clock.celebrating.audio .destello{color:#ffd23f}
#clock.celebrating .part{animation:slotSpin .92s cubic-bezier(.2,.75,.25,1) both}
#clock.celebrating .grupo:nth-child(3) .part{animation-delay:90ms}
#clock.celebrating .grupo:nth-child(5) .part{animation-delay:180ms}
#clock.celebrating .colon{animation:colonPop .92s ease-out both}
@keyframes destello{0%{opacity:0;box-shadow:0 0 0 0 currentColor}18%{opacity:1;box-shadow:0 0 14px 4px currentColor}70%{opacity:1;box-shadow:0 0 24px 6px currentColor}100%{opacity:0;box-shadow:0 0 0 0 currentColor}}
@keyframes brillo{0%,100%{opacity:.5}25%{opacity:.95}}
@keyframes slotSpin{0%{transform:perspective(200px) rotateX(0deg)}35%{transform:perspective(200px) rotateX(360deg)}70%{transform:perspective(200px) rotateX(690deg)}100%{transform:perspective(200px) rotateX(720deg)}}
@keyframes colonPop{0%,100%{transform:scale(1);opacity:1}45%{transform:scale(1.5);opacity:.45}}