/* 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: video arriba a todo el ancho, sonido compacto debajo */
@media (max-width:560px){
 #pz:not(.min) #plbody{grid-template-columns:1fr}
 #pz:not(.min) #radio{grid-column:1;grid-row: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}