:root{
  --fondo:#1d0b45;--fondo2:#2a0f63;--tinta:#fff;--suave:#cbbef5;
  --amarillo:#ffd60a;--rosa:#ff4d6d;--verde:#2bd576;--azul:#3a86ff;--morado:#8338ec;--naranja:#ff9f1c;
  --radio:22px;--sombra:0 10px 30px rgba(0,0,0,.35);
  --fuente:ui-rounded,"SF Pro Rounded","Nunito","Varela Round",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
html{min-height:100%;background:var(--fondo) radial-gradient(120% 80% at 50% 0%,#3b1690 0%,var(--fondo) 60%) no-repeat;background-size:100% 100%}
body{font-family:var(--fuente);color:var(--tinta);background:transparent;
  min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
input{user-select:text;-webkit-user-select:text}
button{font-family:inherit;cursor:pointer;color:inherit}
[hidden]{display:none!important}

/* fondo animado */
.fondo{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.fondo i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(60px);opacity:.35;animation:flota 18s ease-in-out infinite alternate}
.fondo i:nth-child(1){background:var(--rosa);left:-25vmax;top:-20vmax}
.fondo i:nth-child(2){background:var(--azul);right:-30vmax;top:20vh;animation-delay:-6s}
.fondo i:nth-child(3){background:var(--morado);left:10vw;bottom:-35vmax;animation-delay:-12s}
@keyframes flota{to{transform:translate(8vmax,6vmax) scale(1.15)}}

#confeti{position:fixed;inset:0;pointer-events:none;z-index:50}
#reacciones-vuelo{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.vuela{position:absolute;bottom:90px;font-size:42px;animation:sube 2.2s cubic-bezier(.2,.7,.3,1) forwards}
.vuela small{display:block;font-size:11px;text-align:center;font-weight:800;opacity:.85}
@keyframes sube{0%{transform:translateY(0) scale(.4);opacity:0}15%{opacity:1;transform:translateY(-40px) scale(1.2)}100%{transform:translateY(-70vh) translateX(var(--dx,0)) scale(1);opacity:0}}

/* barra */
.barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px}
.mini-logo{font-weight:900;letter-spacing:2px;font-size:18px;color:var(--amarillo);text-shadow:2px 2px 0 var(--rosa);opacity:0;transition:.3s}
body.en-sala .mini-logo{opacity:1}
.barra-der{display:flex;gap:8px;align-items:center}
.chip-sala{background:rgba(255,255,255,.12);border-radius:999px;padding:6px 12px;font-weight:900;letter-spacing:3px;font-size:14px}
.icono{background:rgba(255,255,255,.12);border:0;border-radius:50%;width:40px;height:40px;font-size:18px}

main{max-width:520px;margin:0 auto;padding:0 16px calc(env(safe-area-inset-bottom) + 110px)}
.pantalla{animation:entra .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes entra{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}

/* logo */
.logo{display:flex;justify-content:center;gap:2px;margin:8px 0 0;font-size:clamp(64px,22vw,104px);font-weight:900;line-height:1}
.logo span{display:inline-block;color:var(--amarillo);text-shadow:0 6px 0 #c9541f,0 12px 24px rgba(0,0,0,.4);animation:bota 1.6s ease-in-out infinite}
.logo span:nth-child(2){color:var(--rosa);text-shadow:0 6px 0 #a3163a,0 12px 24px rgba(0,0,0,.4);animation-delay:.1s}
.logo span:nth-child(3){color:#7ee8fa;text-shadow:0 6px 0 #2167a8,0 12px 24px rgba(0,0,0,.4);animation-delay:.2s}
.logo span:nth-child(4){color:var(--verde);text-shadow:0 6px 0 #138049,0 12px 24px rgba(0,0,0,.4);animation-delay:.3s}
.logo span:nth-child(5){color:#ff9ff3;text-shadow:0 6px 0 #9c2d8e,0 12px 24px rgba(0,0,0,.4);animation-delay:.4s}
@keyframes bota{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
.lema{text-align:center;color:var(--suave);font-weight:700;margin:10px 0 18px;font-size:17px}
.invitacion{background:var(--amarillo);color:#2a0f63;font-weight:900;text-align:center;border-radius:16px;padding:12px;margin-bottom:14px;animation:late 1.2s ease-in-out infinite}
@keyframes late{50%{transform:scale(1.03)}}

/* tarjetas */
.tarjeta{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--radio);padding:16px;box-shadow:var(--sombra);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.perfil-cab{display:flex;gap:14px;align-items:center}
.avatar-grande{width:78px;height:78px;flex:none;border-radius:50%;border:4px solid #fff;font-size:44px;display:grid;place-items:center;box-shadow:0 6px 0 rgba(0,0,0,.25);transition:transform .2s}
.avatar-grande:active{transform:scale(.9) rotate(-10deg)}
.campo{flex:1;display:flex;flex-direction:column;gap:6px}
.campo span,.sub{font-size:13px;font-weight:800;color:var(--suave);text-transform:uppercase;letter-spacing:1px}
.sub{margin:14px 0 8px}
input{font-family:inherit;font-size:20px;font-weight:800;border:3px solid transparent;border-radius:14px;padding:12px 14px;background:#fff;color:#2a0f63;outline:none;width:100%;transition:border .2s}
input:focus{border-color:var(--amarillo)}
input.mal{animation:tiembla .4s;border-color:var(--rosa)}
@keyframes tiembla{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.rejilla-avatares{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.rejilla-avatares button{aspect-ratio:1;border:0;border-radius:14px;background:rgba(255,255,255,.1);font-size:26px;transition:transform .15s,background .15s}
.rejilla-avatares button[aria-checked=true]{background:#fff;transform:scale(1.12);box-shadow:0 4px 0 var(--amarillo)}
.colores{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;justify-items:center}
.colores button{width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.3);transition:transform .15s}
.colores button[aria-checked=true]{border-color:#fff;transform:scale(1.2)}

/* botones */
.acciones{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.btn{border:0;border-radius:18px;padding:14px 20px;font-size:18px;font-weight:900;color:#2a0f63;background:#fff;box-shadow:0 6px 0 rgba(0,0,0,.28);transition:transform .08s,box-shadow .08s;touch-action:manipulation}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 rgba(0,0,0,.28)}
.btn:disabled{opacity:.45;filter:grayscale(.6)}
.btn.grande{font-size:22px;padding:18px}
a.btn{display:block;text-align:center;text-decoration:none}
.btn.amarillo{background:var(--amarillo);box-shadow:0 6px 0 #c99a00}
.btn.verde{background:var(--verde);color:#08361d;box-shadow:0 6px 0 #148a4a}
.btn.azul{background:var(--azul);color:#fff;box-shadow:0 6px 0 #1a54b8}
.btn.rosa{background:var(--rosa);color:#fff;box-shadow:0 6px 0 #a3163a}
.btn.wasap{background:#25d366;color:#053d1d;box-shadow:0 6px 0 #138a40}
.btn.fantasma{background:rgba(255,255,255,.12);color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.25)}
.btn.latido{animation:late 1s ease-in-out infinite}
.o{text-align:center;color:var(--suave);font-weight:700;font-size:14px}
.codigo-fila{display:flex;gap:10px}
.codigo-fila input{text-align:center;letter-spacing:8px;text-transform:uppercase;font-size:24px}
.codigo-fila .btn{flex:none}
.nota{text-align:center;color:var(--suave);font-size:13px;margin-top:18px;opacity:.8}

/* sala */
.titulo{text-align:center;font-weight:900;font-size:26px;margin:6px 0 4px}
.subtitulo{text-align:center;color:var(--suave);font-weight:700;margin:0 0 16px}
.codigo-gigante{display:flex;justify-content:center;gap:8px;margin:6px 0 16px}
.codigo-gigante b{width:62px;height:74px;border-radius:16px;background:#fff;color:#2a0f63;display:grid;place-items:center;font-size:44px;font-weight:900;box-shadow:0 6px 0 var(--amarillo);animation:cae .5s cubic-bezier(.3,1.6,.5,1) backwards}
.codigo-gigante b:nth-child(2){animation-delay:.08s}.codigo-gigante b:nth-child(3){animation-delay:.16s}.codigo-gigante b:nth-child(4){animation-delay:.24s}
@keyframes cae{from{transform:translateY(-60px) rotate(-20deg);opacity:0}}
.compartir{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:18px}
.jugadores{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.jug{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:18px;background:rgba(255,255,255,.08);animation:aparece .5s cubic-bezier(.3,1.6,.5,1) backwards}
@keyframes aparece{from{transform:scale(0) rotate(-30deg)}}
.jug .av{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:32px;border:3px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.jug .nom{font-weight:800;font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jug.off{opacity:.4}
.jug .corona{position:absolute;top:-8px;right:10px;font-size:22px;transform:rotate(18deg)}
.jug.yo{outline:3px solid var(--amarillo)}
.jug.hueco{border:3px dashed rgba(255,255,255,.2);background:none;color:var(--suave);font-weight:800;font-size:13px;justify-content:center;min-height:108px;animation:none}
.esperando{text-align:center;color:var(--suave);font-weight:800;margin:20px 0}
.puntos-susp span{animation:parpa 1.4s infinite}
.puntos-susp span:nth-child(2){animation-delay:.2s}.puntos-susp span:nth-child(3){animation-delay:.4s}
@keyframes parpa{50%{opacity:.1}}
.como{margin-top:18px;font-size:15px;line-height:1.45;color:var(--suave)}
.como b{color:#fff}
.como div{display:flex;gap:10px;align-items:flex-start;margin:8px 0}
.como div span:first-child{font-size:22px}

/* intro de ronda */
.intro{min-height:70dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.intro .num{font-weight:900;color:var(--suave);letter-spacing:3px;font-size:15px;animation:entra .4s backwards}
.intro .emoji{font-size:110px;animation:gira .9s cubic-bezier(.3,1.6,.5,1)}
@keyframes gira{from{transform:scale(0) rotate(-200deg)}}
.intro h2{font-size:clamp(36px,11vw,56px);font-weight:900;margin:10px 0;line-height:1;text-shadow:0 5px 0 rgba(0,0,0,.3);animation:cae .6s .15s cubic-bezier(.3,1.6,.5,1) backwards}
.intro p{color:var(--suave);font-weight:700;font-size:18px;max-width:320px;animation:entra .5s .35s backwards}
.t-vob h2{color:var(--verde)}.t-quien h2{color:var(--amarillo)}.t-pref h2{color:#ff9ff3}

/* pregunta */
.reloj{height:14px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;margin:4px 0 14px}
.reloj i{display:block;height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,var(--verde),var(--amarillo));transform-origin:left;transition:background .3s}
.reloj.prisa i{background:var(--rosa)}
.cab-preg{display:flex;justify-content:space-between;align-items:center;font-weight:900;color:var(--suave);font-size:14px;letter-spacing:1px}
.seg{font-size:22px;color:#fff;min-width:36px;text-align:right}
.reloj.prisa+.x,.prisa-txt{color:var(--rosa)}
.pregunta{font-size:clamp(22px,6.4vw,30px);font-weight:900;text-align:center;line-height:1.2;margin:10px 4px 22px;animation:entra .4s}
.pregunta small{display:block;font-size:15px;color:var(--suave);font-weight:800;margin-bottom:8px;letter-spacing:1px;text-transform:uppercase}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.op{border:0;border-radius:22px;min-height:150px;padding:14px;font-size:24px;font-weight:900;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:0 8px 0 rgba(0,0,0,.3);transition:transform .1s,box-shadow .1s,opacity .3s;touch-action:manipulation}
.op:active{transform:translateY(6px) scale(.98);box-shadow:0 2px 0 rgba(0,0,0,.3)}
.op .e{font-size:54px}
.op.v{background:linear-gradient(160deg,#2bd576,#11a35b)}
.op.b{background:linear-gradient(160deg,#ff4d6d,#d61f4a)}
.op.pa{background:linear-gradient(160deg,#3a86ff,#7341f0);font-size:19px;line-height:1.2}
.op.pb{background:linear-gradient(160deg,#ff9f1c,#ff4d9a);font-size:19px;line-height:1.2}
.pref .dos{grid-template-columns:1fr}
.pref .op{min-height:120px}
.vs{text-align:center;font-weight:900;font-size:22px;margin:-4px 0;position:relative;z-index:2}
.vs span{background:#fff;color:#2a0f63;border-radius:999px;padding:4px 14px;box-shadow:0 4px 0 rgba(0,0,0,.3)}
.op.elegida{outline:5px solid #fff;transform:scale(1.03)}
.op.apagada{opacity:.3}
.candidatos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.cand{border:0;border-radius:20px;padding:12px 6px;background:rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:900;font-size:15px;box-shadow:0 6px 0 rgba(0,0,0,.25);transition:transform .1s}
.cand:active{transform:translateY(5px)}
.cand .av{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:34px;border:3px solid #fff}
.cand.elegida{background:#fff;color:#2a0f63}
.votado{text-align:center;margin-top:22px}
.votado .gran{font-size:64px;animation:gira .6s cubic-bezier(.3,1.6,.5,1)}
.votado p{font-weight:900;font-size:20px;margin:6px 0}
.quienes{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:10px}
.quienes span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:20px;border:2px solid #fff;opacity:.25;transition:.3s}
.quienes span.si{opacity:1;transform:scale(1.1)}

/* revelar */
.revela{text-align:center}
.sello{display:inline-block;font-size:clamp(44px,14vw,70px);font-weight:900;padding:6px 22px;border-radius:20px;border:6px solid currentColor;transform:rotate(-6deg);margin:10px 0 14px;animation:sello .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes sello{from{transform:scale(3) rotate(10deg);opacity:0}}
.sello.v{color:var(--verde)}.sello.b{color:var(--rosa)}
.explica{font-size:17px;line-height:1.4;font-weight:700;background:rgba(255,255,255,.1);border-radius:18px;padding:14px;margin:0 0 16px;animation:entra .5s .3s backwards}
.lista-res{display:flex;flex-direction:column;gap:8px}
.fila-res{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border-radius:16px;padding:8px 12px;animation:entra .4s backwards}
.fila-res .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:22px;border:2px solid #fff;flex:none}
.fila-res .nom{flex:1;text-align:left;font-weight:800}
.fila-res .mas{font-weight:900;color:var(--verde)}
.fila-res .cero{font-weight:900;color:var(--rosa);opacity:.8}
.fila-res .racha{font-size:13px;color:var(--naranja);font-weight:900}
.elegido{margin:8px 0 14px}
.elegido .av{width:120px;height:120px;font-size:70px;border-width:5px;margin:0 auto;border-radius:50%;display:grid;place-items:center;border:5px solid #fff;animation:gira .7s cubic-bezier(.3,1.6,.5,1);box-shadow:0 0 0 10px rgba(255,214,10,.25),0 0 60px rgba(255,214,10,.6)}
.elegido .nom{font-size:30px;font-weight:900;margin-top:10px}
.elegido .votos{color:var(--suave);font-weight:800}
.elegidos-varios{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.elegidos-varios .av{width:90px;height:90px;font-size:50px}
.barra-pref{display:flex;height:64px;border-radius:18px;overflow:hidden;margin:16px 0 8px;box-shadow:0 6px 0 rgba(0,0,0,.3)}
.barra-pref div{display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;transition:flex-grow 1s cubic-bezier(.2,.9,.3,1);min-width:0;overflow:hidden}
.barra-pref .a{background:linear-gradient(160deg,#3a86ff,#7341f0)}
.barra-pref .b{background:linear-gradient(160deg,#ff9f1c,#ff4d9a)}
.leyenda-pref{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:14px;font-weight:800;color:var(--suave);margin-bottom:12px}
.leyenda-pref div:last-child{text-align:right}
.caras{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.leyenda-pref div:last-child .caras{justify-content:flex-end}
.caras span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:16px;border:2px solid #fff}
.mi-pts{position:fixed;left:50%;top:38%;transform:translateX(-50%);font-size:64px;font-weight:900;color:var(--amarillo);text-shadow:0 5px 0 #c9541f,0 0 30px rgba(0,0,0,.5);pointer-events:none;z-index:45;animation:pts 1.8s cubic-bezier(.2,.9,.3,1.3) forwards}
.mi-pts.cero{color:#fff;text-shadow:0 5px 0 rgba(0,0,0,.4);font-size:44px}
@keyframes pts{0%{transform:translateX(-50%) scale(0)}20%{transform:translateX(-50%) scale(1.25)}70%{transform:translateX(-50%) scale(1);opacity:1}100%{transform:translateX(-50%) translateY(-120px) scale(.8);opacity:0}}

/* ranking */
.ranking{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.rk{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:18px;background:rgba(255,255,255,.09);animation:entra .5s backwards;position:relative}
.rk .pos{font-weight:900;font-size:22px;width:30px;text-align:center}
.rk .av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:26px;border:3px solid #fff;flex:none}
.rk .nom{flex:1;font-weight:900;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk .pt{font-weight:900;font-size:20px;color:var(--amarillo)}
.rk.primero{background:linear-gradient(90deg,rgba(255,214,10,.35),rgba(255,214,10,.08));transform:scale(1.03)}
.rk.yo{outline:3px solid var(--amarillo)}

/* final */
.podio{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:8px;margin:20px 0 18px}
.pd{display:flex;flex-direction:column;align-items:center;gap:6px}
.pd .av{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:36px;border:4px solid #fff;animation:gira .8s cubic-bezier(.3,1.6,.5,1) backwards}
.pd.p1 .av{width:86px;height:86px;font-size:50px;animation-delay:1.1s}
.pd.p2 .av{animation-delay:.6s}.pd.p3 .av{animation-delay:.2s}
.pd .nom{font-weight:900;font-size:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd .pt{font-weight:800;color:var(--suave);font-size:13px}
.pd .caja{width:100%;border-radius:14px 14px 0 0;display:grid;place-items:start center;padding-top:8px;font-size:30px;font-weight:900;animation:crece .7s cubic-bezier(.3,1.4,.5,1) backwards;transform-origin:bottom}
.pd.p1 .caja{height:130px;background:linear-gradient(var(--amarillo),#e0a800);color:#6b4b00;animation-delay:.9s}
.pd.p2 .caja{height:95px;background:linear-gradient(#e4e4f0,#a9a9c4);color:#44445e;animation-delay:.5s}
.pd.p3 .caja{height:70px;background:linear-gradient(#ffb36b,#cd7a35);color:#5c2e07;animation-delay:.1s}
@keyframes crece{from{transform:scaleY(0)}}
.corona-final{font-size:40px;margin-bottom:-14px;animation:bota 1.4s ease-in-out infinite;z-index:2}
.premios{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.premio{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border-radius:16px;padding:10px 12px;font-weight:800;animation:entra .5s backwards}
.premio .e{font-size:28px}
.premio small{display:block;color:var(--suave);font-weight:700}

/* reacciones */
.reacciones{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:center;gap:4px;padding:10px 10px calc(env(safe-area-inset-bottom) + 10px);background:linear-gradient(transparent,rgba(16,4,40,.9) 40%)}
.reacciones button{border:0;background:rgba(255,255,255,.12);border-radius:14px;font-size:26px;width:44px;height:48px;transition:transform .1s;touch-action:manipulation}
.reacciones button:active{transform:scale(1.35) rotate(-10deg)}

#toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 84px);transform:translateX(-50%) translateY(30px);opacity:0;background:#fff;color:#2a0f63;font-weight:900;padding:12px 18px;border-radius:999px;box-shadow:var(--sombra);transition:.3s;z-index:60;max-width:90vw;text-align:center;pointer-events:none}
#toast.ver{opacity:1;transform:translateX(-50%) translateY(0)}

@media (min-width:700px){main{padding-top:20px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}

.durs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 4px;width:100%}
.dur{background:rgba(255,255,255,.1);border:3px solid transparent;border-radius:16px;color:var(--tinta);font:inherit;font-weight:900;font-size:15px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;transition:transform .15s}
.dur small{font-size:12px;font-weight:700;color:var(--suave)}
.dur.on{background:rgba(255,214,10,.16);border-color:var(--amarillo);transform:scale(1.04)}
.dur:active{transform:scale(.96)}

/* ===== modo espectáculo (v3) ===== */
.flash{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:.55;mix-blend-mode:screen;animation:flash .55s ease-out forwards}
@keyframes flash{to{opacity:0}}
.temblor{animation:temblor .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes temblor{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-6px,2px) rotate(-.5deg)}40%,60%{transform:translate(6px,-1px) rotate(.5deg)}}
.intro{position:relative;overflow:hidden}
.intro .emoji{position:relative;z-index:1}
.rayos{position:absolute;left:50%;top:44%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;z-index:0;opacity:.22;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,currentColor 0 7deg,transparent 7deg 20deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 55%);mask:radial-gradient(circle,#000 0,transparent 55%);animation:giro 14s linear infinite}
.t-vob .rayos{color:var(--verde)}.t-quien .rayos{color:var(--amarillo)}.t-pref .rayos{color:#ff9ff3}
@keyframes giro{to{transform:rotate(360deg)}}
.intro .num,.intro h2,.intro p,.ultima{position:relative;z-index:1}
.ultima{font-weight:900;color:#fff;background:var(--rosa);border-radius:999px;padding:6px 16px;margin-top:10px;letter-spacing:1px;animation:late .6s ease-in-out infinite}
.intro h2{text-shadow:0 5px 0 rgba(0,0,0,.3),0 0 30px currentColor}
body.prisa-pantalla::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;box-shadow:inset 0 0 90px 20px rgba(255,40,80,.55);animation:latePrisa .5s ease-in-out infinite alternate}
@keyframes latePrisa{from{opacity:.35}to{opacity:1}}
body.prisa-pantalla .seg{color:var(--rosa);animation:late .5s infinite;display:inline-block}
.elegido{position:relative}
.elegido .foco{position:absolute;left:50%;top:60px;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,214,10,.35) 0 10deg,transparent 10deg 24deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%);animation:giro 9s linear infinite;z-index:-1}
.sello{text-shadow:0 0 24px currentColor;box-shadow:0 0 30px currentColor}
.banner-racha{position:fixed;left:50%;top:22%;z-index:46;transform:translateX(-50%);white-space:nowrap;font-weight:900;font-size:clamp(24px,8vw,40px);color:#fff;
  background:linear-gradient(90deg,#ff9f1c,#ff4d6d,#ff9f1c);background-size:200% 100%;padding:10px 22px;border-radius:999px;box-shadow:0 8px 0 rgba(0,0,0,.3),0 0 40px #ff4d6d;pointer-events:none;animation:racha 2.2s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes racha{0%{transform:translateX(-50%) scale(0) rotate(-12deg)}15%{transform:translateX(-50%) scale(1.15) rotate(3deg)}25%,80%{transform:translateX(-50%) scale(1) rotate(-2deg);opacity:1}100%{transform:translateX(-50%) scale(.6);opacity:0}}
.pd.p1 .av{box-shadow:0 0 0 6px rgba(255,214,10,.35),0 0 50px rgba(255,214,10,.8)}
.pd.p1 .caja{box-shadow:0 0 40px rgba(255,214,10,.5)}
.rk.primero{box-shadow:0 0 26px rgba(255,214,10,.35)}
@media (prefers-reduced-motion:reduce){.rayos,.foco{display:none}body.prisa-pantalla::after{animation:none;opacity:.6}}
html,body{overflow-x:clip}
.elegido .foco{width:min(340px,88vw);height:min(340px,88vw);margin:calc(min(340px,88vw)/-2) 0 0 calc(min(340px,88vw)/-2)}
#confeti{width:100%;height:100%}
.reacciones button{flex:0 1 44px;min-width:0}
.banner-racha{font-size:clamp(20px,6.4vw,40px);max-width:94vw;padding:10px 16px}
.elegido .foco{width:min(300px,76vw);height:min(300px,76vw);margin:calc(min(300px,76vw)/-2) 0 0 calc(min(300px,76vw)/-2)}

/* Mecánicas nuevas: siempre dentro del flujo de juego, sin tapar los controles. */
.chat-sala [hidden],.panel-comodines [hidden],.apuesta-pantalla [hidden],.zona-ruleta [hidden]{display:none!important}
.panel-comodines{width:100%;margin:22px 0 8px;position:relative;z-index:2}
.boton-comodines{width:100%;font-size:16px;padding:12px}
.comodines-contenido{margin-top:10px;background:rgba(255,255,255,.09);border-radius:18px;padding:12px}
.comodines-contenido>p,.elegir-congelado>p{font-size:13px;color:var(--suave);font-weight:800;margin:0 0 10px}
.cartas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.carta{min-width:0;min-height:92px;border:2px solid rgba(255,255,255,.25);border-radius:14px;background:linear-gradient(155deg,#40317d,#251455);padding:9px 4px;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;text-align:center;font-size:13px;box-shadow:0 4px 0 rgba(0,0,0,.3)}
.carta b{color:var(--amarillo);font-size:16px}.carta small{font-size:11px;line-height:1.25;color:var(--suave)}.carta:disabled{opacity:.35;filter:grayscale(.8)}
.elegir-congelado{margin-top:16px}.elegir-congelado .cand{font-size:13px}.elegir-congelado .cand .av{width:44px;height:44px;font-size:24px}
.opciones-impostor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.op-impostor{min-height:74px;font-size:17px;background:linear-gradient(145deg,#3a86ff,#6241bf);line-height:1.2;overflow-wrap:anywhere}
.opciones-impostor .op:last-child:nth-child(odd){grid-column:1/-1}.op:disabled{opacity:.55;cursor:not-allowed}.aviso-hielo{text-align:center;background:rgba(58,134,255,.3);border-radius:14px;padding:10px;font-weight:900;font-size:14px}
.apuesta-pantalla{text-align:center}.apuesta-icono{font-size:76px;margin:28px 0 8px;animation:gira .8s cubic-bezier(.3,1.6,.5,1)}.apuesta-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.apuesta-picks .btn{display:flex;flex-direction:column;gap:4px;align-items:center;min-width:0;padding:18px 5px}.apuesta-picks small{font-size:12px}.apuesta-pantalla .subtitulo{line-height:1.4}
.respuestas-impostor{display:flex;flex-direction:column;gap:8px;margin:14px 0}.respuesta-impostor{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px;min-width:0}.respuesta-impostor .av{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;font-size:22px;flex:none}.respuesta-impostor b{max-width:85px;overflow:hidden;text-overflow:ellipsis}.respuesta-impostor span:last-child{margin-left:auto;text-align:right;font-size:14px;max-width:50%;overflow-wrap:anywhere;color:var(--amarillo);font-weight:800}.votacion-impostor .subtitulo strong{color:#fff}.votacion-impostor .candidatos{grid-template-columns:repeat(2,minmax(0,1fr))}
.impostor-revela{text-align:center}.preguntas-dobles{text-align:left;display:grid;gap:8px;margin-bottom:16px;line-height:1.4;font-size:14px}.preguntas-dobles div+div{border-top:1px solid rgba(255,255,255,.2);padding-top:8px}.impostor-revela .fila-res .nom small{display:block;color:var(--suave);font-size:12px;overflow-wrap:anywhere}.caja-apuestas{margin-top:20px}.caja-apuestas h3{margin:0 0 12px;color:var(--amarillo)}.apuesta-resultado{display:flex;align-items:center;gap:8px;margin:7px 0}.apuesta-resultado .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center}.apuesta-resultado b{flex:1}.apuesta-resultado strong{font-size:19px}.apuesta-resultado .mas{color:var(--verde)}.apuesta-resultado .cero{color:var(--rosa)}
.zona-ruleta{text-align:center;margin:24px 0 12px;border-color:var(--amarillo)}.zona-ruleta h3{font-size:21px;margin:0 0 10px;color:var(--amarillo)}.zona-ruleta>p{color:var(--suave);font-weight:700}.zona-ruleta .btn{max-width:100%;margin:8px auto}.ruleta-visor{border:3px solid var(--amarillo);background:linear-gradient(125deg,#36146e,#782e78);border-radius:20px;min-height:104px;display:grid;place-items:center;padding:18px;box-shadow:0 0 25px rgba(255,214,10,.3);font-weight:900;font-size:clamp(18px,5vw,25px);line-height:1.25;overflow-wrap:anywhere}
/* El panel vive sobre la banda de reacciones, no encima de las opciones. */
.chat-sala{position:fixed;z-index:32;right:12px;bottom:calc(env(safe-area-inset-bottom) + 79px);width:min(380px,calc(100vw - 24px));pointer-events:none}.chat-sala>*{pointer-events:auto}
.abrir-chat{display:block;margin-left:auto;font-size:15px;padding:9px 13px;border-radius:15px;background:#2d1b66!important;box-shadow:0 4px 0 rgba(0,0,0,.4)!important}.abrir-chat span{background:var(--rosa);border-radius:999px;padding:1px 6px;margin-left:2px;font-size:12px}
.cuerpo-chat{margin-top:9px;background:#251355;border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:12px;box-shadow:var(--sombra);max-height:min(60dvh,480px);display:flex;flex-direction:column;gap:8px}.cuerpo-chat h2{font-size:18px;margin:0;display:flex;justify-content:space-between;align-items:center}.cuerpo-chat h2 button{border:0;background:rgba(255,255,255,.2);border-radius:50%;font-size:24px;width:32px;height:32px}.chat-aviso{font-size:11px;line-height:1.25;color:var(--suave);margin:0;text-align:left}.chat-lista{flex:1;min-height:90px;max-height:26dvh;overflow-y:auto;overscroll-behavior:contain;border-radius:12px;background:rgba(0,0,0,.18);padding:8px}.mensaje-chat{display:flex;gap:7px;margin-bottom:10px;font-size:13px}.mensaje-chat.propio{background:rgba(255,214,10,.08);border-radius:10px;padding:4px}.mensaje-avatar{font-size:21px}.mensaje-chat div{min-width:0;max-width:100%}.mensaje-chat b{color:var(--amarillo)}.mensaje-chat p{margin:2px 0;line-height:1.3;overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}.chat-sala form{display:flex;gap:6px}.chat-sala input{min-width:0;flex:1;border:1px solid rgba(255,255,255,.4);background:#fff;color:#27144d;border-radius:12px;padding:10px;font:inherit;font-size:14px}.chat-sala form .btn{padding:8px 13px;box-shadow:none}.chat-moderacion{max-height:105px;overflow-y:auto;border-top:1px solid rgba(255,255,255,.2);padding-top:5px}.chat-moderacion>p{font-size:12px;font-weight:900;margin:0 0 4px}.mod-fila{display:flex;align-items:center;gap:5px;margin:3px 0;font-size:12px}.mod-fila span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mod-fila button{background:rgba(255,255,255,.14);border:0;border-radius:8px;padding:4px 7px;font-size:16px}.mod-fila button:focus-visible,.abrir-chat:focus-visible,.carta:focus-visible{outline:3px solid var(--amarillo)}
@media(max-width:390px){.chat-sala{right:8px;width:calc(100vw - 16px)}.cuerpo-chat{padding:10px}.opciones-impostor{gap:8px}.op-impostor{font-size:15px}.cartas{gap:5px}.carta small{font-size:10px}}

/* v4: el chat, las reacciones y los avisos no tapan el juego */
body.en-sala #app{padding-bottom:calc(env(safe-area-inset-bottom) + 150px)}
body.en-sala #toast{bottom:auto;top:calc(env(safe-area-inset-top) + 64px);transform:translateX(-50%) translateY(-30px)}
body.en-sala #toast.ver{transform:translateX(-50%) translateY(0)}

/* v5: firma JamSoluciones (promoción) */
.firma{display:flex;flex-direction:column;align-items:center;gap:3px;margin:18px auto 6px;padding:12px 16px;max-width:360px;text-align:center;text-decoration:none;color:var(--suave);font-size:14px;line-height:1.35;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.06);transition:background .2s,transform .2s}
.firma b{color:#fff}
.firma:hover,.firma:focus-visible{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.firma-ia{font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--amarillo)}
.firma-cta{font-size:12.5px;font-weight:800;color:var(--verde)}