/* Motion graphics de los demos con presentador en video. Prefijo fx-. */
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.fx-flash{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 55%,var(--fx-c,#fff) 0,transparent 70%)}
.fx-flash.on{animation:fx-flash .9s ease-out}
@keyframes fx-flash{0%{opacity:.75}100%{opacity:0}}

/* Cargador: reemplaza la pantalla negra mientras llega el clip */
.fx-load{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#06090ccc;backdrop-filter:blur(3px);color:#fff;font:700 clamp(11px,1.6cqw,15px)/1 'DM Sans',Arial,sans-serif;letter-spacing:.14em;animation:fx-fade .25s ease-out both}
.fx-load i{width:clamp(34px,7cqw,58px);height:clamp(34px,7cqw,58px);border-radius:50%;border:4px solid #ffffff22;border-top-color:var(--accent);animation:fx-spin .8s linear infinite}
.fx-load span::after{content:"";display:inline-block;width:1.4em;text-align:left;animation:fx-puntos 1.2s steps(4) infinite}
@keyframes fx-spin{to{transform:rotate(360deg)}}
@keyframes fx-puntos{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
.fx-load[hidden]{display:none}

/* Estado de la ronda (pastilla bajo la etiqueta superior) */
.fx-status{position:absolute;left:12px;top:44px;z-index:3;display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:20px;background:#0c120dcc;color:#fff;font:700 10px/1 'DM Sans',Arial,sans-serif;letter-spacing:.1em;animation:fx-slide .3s ease-out both}
.fx-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.fx-status.live::before{background:#ff4d3a;animation:fx-pulso 1s ease-in-out infinite}
.fx-status.result::before{background:#ffd166}
.fx-status.open::before{animation:fx-pulso 1.6s ease-in-out infinite}
@keyframes fx-pulso{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}
@keyframes fx-slide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.fx-status[hidden]{display:none}

/* Barra de progreso de la ronda */
.fx-bar{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;background:#ffffff1f}
.fx-bar b{display:block;height:100%;width:0;background:linear-gradient(90deg,#8bd13a,var(--accent));box-shadow:0 0 10px var(--accent)}
.fx-bar[hidden]{display:none}

/* Cuenta atras antes de que gire la maquina */
.fx-count{position:absolute;left:3%;top:25%;z-index:3;display:flex;flex-direction:column;align-items:center;gap:5px;padding:.5em 1.1em;border-radius:16px;background:#0b0e0bd9;border:1px solid #ffffff33;color:#fff;font:700 clamp(10px,1.5cqw,14px)/1 'DM Sans',Arial,sans-serif;letter-spacing:.12em;pointer-events:none}
.fx-count b{font:800 clamp(24px,5.4cqw,52px)/1 Manrope,Arial,sans-serif;color:var(--accent);letter-spacing:0;animation:fx-tic .9s ease-out both}
.fx-count.go b{color:#ffd166}
@keyframes fx-tic{0%{transform:scale(1.7);opacity:0}30%{transform:scale(1);opacity:1}100%{transform:scale(.9);opacity:.85}}
.fx-count[hidden]{display:none}

/* Titulo grande para premios especiales */
.fx-title{position:absolute;left:50%;top:40%;z-index:3;transform:translate(-50%,-50%) scale(.5);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;pointer-events:none;opacity:0;max-width:92%}
.fx-title b{white-space:nowrap}
.fx-title b{font:900 clamp(24px,7cqw,76px)/1 Manrope,Arial,sans-serif;letter-spacing:.02em;color:#fff3b0;text-shadow:0 0 28px #ffb400aa,0 4px 0 #3b2a00}
.fx-title small{font:700 clamp(11px,2cqw,20px)/1 'DM Sans',Arial,sans-serif;letter-spacing:.14em;color:#fff}
.fx-title.on{animation:fx-titulo 2.4s cubic-bezier(.2,1.2,.3,1) both}
.fx-title.verde b{color:#b8ffd0;text-shadow:0 0 28px #22c46acc,0 4px 0 #04301a}
.fx-title.lima b{color:var(--accent);text-shadow:0 0 28px #d1f65a88,0 4px 0 #2b3a05}
@keyframes fx-titulo{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}20%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(1.04)}}
.fx-title[hidden]{display:none}

@media(prefers-reduced-motion:reduce){
  .fx-load i,.fx-status::before,.fx-load span::after,.fx-count b,.fx-flash.on{animation:none}
  .fx-title.on{animation:none;opacity:1;transform:translate(-50%,-50%)}
}
@media(max-width:640px){
  .fx-status{top:38px;left:10px;font-size:9px;padding:5px 8px}
  .fx-count{flex-direction:row;align-items:center;gap:7px;left:10px;top:52%;padding:.3em .7em;border-radius:12px;font-size:9px}
  .fx-count b{font-size:20px}
  .fx-title{top:36%;gap:5px}
  .fx-title small{font-size:10px;letter-spacing:.08em}
  .mk-hud,.rs-hud{display:none}
}