/* El Boliche · tema neón y humo. Va DESPUÉS de app.css y solo lo pisa.
   Liviano: solo se animan transform y opacity (nada de blur ni filtros) y todo
   se apaga con "reducir movimiento" o en teléfonos modestos (clase .ahorro). */
:root{--bg:#0a0514;--sf:#150a26;--tx:#f6eeff;--mu:#a998c4;--ac:#ee1c8c;--ac2:#ffd23f;--tq:#19e6d4;--bd:#2e1a4d;--bar:#06020d;--neon:#ff2d95}
html{color-scheme:dark;background:var(--bg)}

/* humo: dos capas grandes y suaves que se desplazan muy despacio detrás del chat */
#app{z-index:1}
body::before,body::after{content:"";position:fixed;inset:-15%;z-index:0;pointer-events:none;will-change:transform}
body::before{background:radial-gradient(38% 30% at 18% 82%,#ff2d9533,transparent 70%),radial-gradient(34% 28% at 85% 55%,#19e6d42b,transparent 70%);animation:humo1 26s ease-in-out infinite alternate}
body::after{background:radial-gradient(40% 32% at 70% 90%,#8a3dff33,transparent 70%),radial-gradient(30% 26% at 10% 40%,#ff2d9522,transparent 70%);animation:humo2 38s ease-in-out infinite alternate}
@keyframes humo1{to{transform:translate3d(6%,-8%,0) scale(1.08)}}
@keyframes humo2{to{transform:translate3d(-7%,-6%,0) scale(1.12)}}

/* letrero de neón */
.logo{color:#fff;text-shadow:0 0 4px #fff,0 0 10px var(--neon),0 0 22px var(--neon)}
.logo b{color:var(--ac2);text-shadow:0 0 4px #fff,0 0 10px #ffb300,0 0 22px #ff8c00;animation:flick 7s infinite}
@keyframes flick{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.45}21%{opacity:.9}}

header{position:relative;z-index:3;border-bottom:1px solid #ff2d9577;box-shadow:0 2px 16px #ff2d9533}
.chip{border:1px solid #ffffff22}
.chip.gold{box-shadow:0 0 10px #ffd23f88}
.sn{border-bottom:1px solid #19e6d455}

/* chat */
.bub{border-color:#3a2160}
.me .bub{box-shadow:0 0 12px #ee1c8c66}
.sys{border-color:#19e6d444;color:#7ff3ea}
form{border-top:1px solid #ff2d9555}
form input:focus{border-color:var(--neon);box-shadow:0 0 10px #ff2d9566}

/* botones con brillo fijo */
.send,.pb,.big,.sn-buy{box-shadow:0 0 12px #ee1c8c88}
.ib{box-shadow:0 0 10px #ffd23f66}
.big.alt{box-shadow:0 0 12px #19e6d466;color:#05201e}
.big.ghost{box-shadow:none}
.pr{box-shadow:0 0 8px #ee1c8c88}
#s-rec .pk.on{box-shadow:0 0 14px #ffd23f88}

/* ventanas */
.sheet{background:#000c}
.pan{border:1px solid #ff2d9577;box-shadow:0 0 24px #ff2d9544,0 20px 60px #000a}
.it{border-color:#3a2160}
#toast{background:#150a26;border:1px solid #ff2d9588;box-shadow:0 0 14px #ff2d9566}

/* rockola */
.rk{border-color:#3a2160}
.rk.on{border-color:var(--tq);box-shadow:0 0 12px #19e6d444}
.disc{box-shadow:0 0 12px #ff2d95aa}
.pg i{background:linear-gradient(90deg,var(--neon),var(--tq))}

@media (prefers-reduced-motion:reduce){body::before,body::after,.logo b{animation:none}}
.ahorro body::before,.ahorro body::after{display:none}
.ahorro .logo b{animation:none}

/* sectores de sonido y micrófono */
#snack{display:none!important}
.tabs{display:flex;gap:3px}
.tabs button{flex:1;min-width:0;border:1px solid var(--bd);background:var(--bg);color:var(--tx);border-radius:99px;padding:3px 4px;font:600 11px "Bricolage Grotesque",sans-serif;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tabs button.on{border-color:var(--tq);box-shadow:0 0 8px #19e6d466}
.tp{display:flex;flex-direction:column;gap:4px}.tp[hidden]{display:none}
.cl{font-size:12px;line-height:1.3}.cl small,.mq small{color:var(--mu)}
.mi{font-size:12px;display:flex;flex-direction:column;gap:4px}
.mb{display:flex;gap:4px;flex-wrap:wrap}
.mi button{border:0;border-radius:99px;padding:3px 9px;font:600 11px "Bricolage Grotesque",sans-serif;background:var(--ac);color:#fff;cursor:pointer}
.mq{display:flex;gap:6px;flex-wrap:wrap}.mq button{background:var(--tq);color:#05201e}

/* pestañas compactas: solo la activa muestra su nombre */
.tabs button span{display:none}
.tabs button.on{flex:3}
.tabs button.on span{display:inline;margin-left:3px}
/* un solo video: si el DJ está sonando, su video ocupa el lugar de "En vivo" */
#pz.dj .vin,#pz.dj #vfl{display:none}
/* disposición: video grande a la izquierda, sonido compacto a la derecha */
#pz:not(.min) #plbody{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:8px;align-items:start}
#pz:not(.min) .vwrap{grid-column:1;grid-row:1;width:auto;max-width:none;min-width:0;flex:none}
#pz:not(.min) #radio{grid-column:2;grid-row:1;width:auto;max-width:none;min-width:0;flex:none;align-self:start}
#radio .disc{width:32px;height:32px;flex:none}
#radio .inf b{font-size:13px}
/* teléfono: igual que en PC, video y sonido lado a lado pero más pequeños */
@media (max-width:560px){
 #pz:not(.min) #plbody{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:6px}
 .tabs{gap:2px}
 .tabs button{padding:3px 0;font-size:13px}
 .tabs button.on{flex:1}
 .tabs button.on span{display:none}
 #radio .disc{width:24px;height:24px}
 #radio .inf b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #radio .inf small{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #nx,#fv{display:none}
 #dj-cap{font-size:10px;line-height:1.2}
}
/* actividad en vivo */
#fv{max-height:64px;overflow-y:auto;border-top:1px solid var(--bd);padding-top:4px;margin-top:2px}
#fv div{margin:1px 0}

/* ===== Franja de avisos · PEGAR AL FINAL de boliche.css =====
   (borra la regla .ban{display:none!important} si todavía existe) */
.fr{position:relative;z-index:2;display:flex;align-items:center;height:26px;background:#0d0619;border-bottom:1px solid #19e6d433;overflow:hidden}
.fr[hidden]{display:none}
.fr-b{flex:1;min-width:0;height:100%;display:flex;align-items:center;gap:6px;padding:0 10px;background:none;border:0;color:var(--tx);font:600 12px "Bricolage Grotesque",sans-serif;cursor:pointer;text-align:left;overflow:hidden}
.fr-i{flex:none}
.fr-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-t.in{animation:frIn .45s ease-out}
@keyframes frIn{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
.fr-x{flex:none;min-width:28px;height:100%;border:0;background:none;color:var(--mu);font:600 11px "Bricolage Grotesque",sans-serif;cursor:pointer}
.fr.min{height:16px}
.fr.min .fr-b{display:none}
.fr.min .fr-x{width:100%;line-height:1}
/* celebración: dorada todo el día */
.fr.oro{background:linear-gradient(90deg,#3a2a00,#6b4b00,#3a2a00);border-bottom-color:#ffd23f;box-shadow:0 0 12px #ffd23f66}
.fr.oro .fr-b{color:#ffe9a0}
/* ventana de novedades */
#fr-l{display:flex;flex-direction:column;gap:8px;margin:8px 0 12px}
.fr-c{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;cursor:pointer;color:#fff}
.fr-c .ph{font-size:26px;flex:none}
.fr-c strong{display:block;font-size:13px}
.fr-c small{display:block;font-size:12px;opacity:.9}
.fr-c.oro{background:linear-gradient(90deg,#5a3f00,#8a6200);border:1px solid #ffd23f;box-shadow:0 0 12px #ffd23f66}
/* confeti */
#fr-cv{position:fixed;inset:0;z-index:60;pointer-events:none}
#fr-cv[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.fr-t.in{animation:none}}
.ahorro .fr-t.in{animation:none}

/* ===== Caja de sonido flotante ===== */
#radio:not(.exp){cursor:pointer}
#rk-bg{position:fixed;inset:0;z-index:69;background:#000b}
#rk-bg[hidden]{display:none}
#rk-x{display:none}
body #radio.exp{position:fixed!important;left:50%;top:50%;transform:translate(-50%,-50%);width:min(94vw,480px)!important;max-width:none!important;max-height:86vh;overflow-y:auto;z-index:70;display:flex;flex-direction:column;gap:10px;padding:14px;font-size:14px;background:var(--sf);border:1px solid #ff2d9577;box-shadow:0 0 24px #ff2d9544,0 20px 60px #000a;cursor:default;grid-column:auto!important;grid-row:auto!important}
#radio.exp #rk-x{display:block;align-self:flex-end;border:1px solid var(--bd);background:var(--bg);color:var(--tx);border-radius:99px;padding:5px 12px;font:600 12px "Bricolage Grotesque",sans-serif;cursor:pointer}
#radio.exp .tabs button{flex:1;padding:7px 4px;font-size:13px}
#radio.exp .tabs button span{display:inline!important;margin-left:4px}
#radio.exp #nx,#radio.exp #fv{display:block}
#radio.exp #fv{max-height:200px}
#radio.exp .disc{width:44px;height:44px}
#radio.exp .inf b,#radio.exp .inf small{white-space:normal;font-size:14px}
#radio.exp .cl,#radio.exp .mi{font-size:14px}
#radio.exp .pq{padding:8px 14px;font-size:13px}
/* ❤️ y 👎 debajo del video */
#dj-vt{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px}
#dj-vt:empty{display:none}
#dj-vt .pq{padding:5px 10px;font-size:12px}
#dj-vt .pq.on{outline:2px solid var(--ac2)}
#dj-vt small{opacity:.85}

/* playlist del DJ */
#tp-d .djl{display:flex;align-items:center;gap:4px;font-size:12px;margin:2px 0}
#tp-d .djl .djt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tp-d .djl .pq{padding:2px 8px;font-size:11px}
#radio:not(.exp) #tp-d{max-height:130px;overflow-y:auto}

/* etiqueta del DJ arriba de la cajita: 🎧 DJ nombre + punto rojo parpadeando */
#dj-tag{grid-column:2;grid-row:1;display:flex;align-items:center;gap:6px;min-width:0;padding:0 4px 2px;font:800 12px "Bricolage Grotesque",sans-serif;color:var(--tx)}
#dj-tag[hidden]{display:none}
#dj-tag .dj-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dj-tag.libre{color:var(--mu);font-weight:600}
.dj-pt{flex:none;width:9px;height:9px;border-radius:50%;background:#6b5a85}
.dj-pt.vv{background:#ff2a2a;box-shadow:0 0 8px #ff2a2a;animation:djp 1.2s ease-in-out infinite}
@keyframes djp{50%{opacity:.25}}
/* con etiqueta: la caja baja a la fila 2 y el video ocupa las dos filas */
#pz.tag:not(.min) #plbody{row-gap:2px}
#pz.tag:not(.min) .vwrap{grid-row:1 / span 2;align-self:start}
#pz.tag:not(.min) #radio{grid-row:2}
@media (prefers-reduced-motion:reduce){.dj-pt.vv{animation:none}}
.ahorro .dj-pt.vv{animation:none}

/* Animar: franja del micrófono del DJ, pegada arriba del chat */
#an-bar{display:flex;align-items:center;gap:8px;padding:5px 10px;background:var(--sf);border-top:1px solid #ff2d9555;font-size:12px;color:var(--mu)}
#an-bar[hidden]{display:none}
#an-b{flex:none;border:0;border-radius:99px;padding:8px 16px;font:800 14px "Bricolage Grotesque",sans-serif;background:var(--ac);color:#fff;cursor:pointer;box-shadow:0 0 12px #ee1c8c88}
#an-b[hidden]{display:none}
#an-b:disabled{opacity:.6}
#an-b.on{background:#ff2a2a;box-shadow:0 0 12px #ff2a2a;animation:anp 1.2s ease-in-out infinite}
@keyframes anp{50%{opacity:.7}}
#an-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-vz{display:inline-flex;gap:2px;align-items:flex-end;height:11px;vertical-align:middle}
.an-vz i{width:3px;height:30%;background:var(--tq);border-radius:2px;animation:eq .8s ease-in-out infinite alternate}
.an-vz i:nth-child(2){animation-delay:.2s}.an-vz i:nth-child(3){animation-delay:.4s}
@media (prefers-reduced-motion:reduce){#an-b.on,.an-vz i{animation:none}}
.ahorro #an-b.on,.ahorro .an-vz i{animation:none}