html,body{margin:0;height:100%;background:#000;overflow:hidden;font-family:'Segoe UI',Arial,sans-serif;color:#fff}
#player-wrap{position:fixed;inset:0}
.video-js{width:100vw;height:100vh}

.overlay{position:absolute;inset:0;pointer-events:none;z-index:5}
.topbar{position:absolute;top:0;left:0;right:0;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(180deg,rgba(0,0,0,.75),transparent)}
.logo{display:flex;align-items:center}
.logo img{height:48px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.right{display:flex;gap:14px;align-items:center;pointer-events:auto}
.live{background:rgba(17,17,17,.85);color:#fff;padding:7px 14px;border-radius:30px;font-size:13px;font-weight:600;letter-spacing:.5px}
.live::first-letter{color:#e50914}

/* Botón activar sonido */
.unmute-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;color:#111;border:none;
  padding:7px 14px;border-radius:30px;
  font-size:13px;font-weight:600;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  animation:pulseWhite 1.8s infinite;
}
.unmute-btn:hover{background:#f0f0f0}
@keyframes pulseWhite{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}
  50%{box-shadow:0 0 0 8px rgba(255,255,255,0)}
}

/* Botón Cast personalizado */
.cast-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:#e50914;color:#fff;border:none;
  padding:8px 16px;border-radius:30px;
  font-size:14px;font-weight:600;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  transition:all .2s ease;
}
.cast-btn:hover:not(:disabled){background:#ff0f1f;transform:scale(1.05)}
.cast-btn:disabled{background:#555;cursor:not-allowed;opacity:.7}
.cast-btn.connected{background:#0a84ff;animation:castPulse 1.5s infinite}
@keyframes castPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(10,132,255,.6)}
  50%{box-shadow:0 0 0 10px rgba(10,132,255,0)}
}

.bottom{position:absolute;left:32px;bottom:32px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);max-width:60%}
.bottom h1{font-size:34px;font-weight:800;margin:0 0 6px}
.bottom p{font-size:15px;opacity:.9;margin:0}

/* Pantalla de "Transmitiendo a TV" */
.casting-screen{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at center,#1a1a1a,#000);
}
.casting-inner{text-align:center;padding:20px}
.cast-icon-big{
  width:140px;height:140px;border-radius:50%;
  background:rgba(229,9,20,.15);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 24px;color:#e50914;
  animation:pulse 2s infinite ease-in-out;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(229,9,20,.4)}
  50%{box-shadow:0 0 0 24px rgba(229,9,20,0)}
}
.casting-inner h2{font-size:18px;font-weight:400;opacity:.7;margin:0 0 6px}
.casting-inner p{font-size:28px;font-weight:700;margin:0 0 16px;color:#fff}
.live-dot{display:inline-block;background:#e50914;color:#fff;padding:6px 14px;border-radius:30px;font-size:13px;font-weight:600;letter-spacing:.5px}

/* Toast */
.toast-msg{
  position:fixed;bottom:40px;left:50%;transform:translateX(-50%);
  background:rgba(20,20,20,.95);color:#fff;
  padding:12px 22px;border-radius:30px;font-size:14px;
  z-index:100;box-shadow:0 4px 20px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.1);
  animation:slideUp .25s ease;
}
@keyframes slideUp{from{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* Mobile */
@media(max-width:600px){
  .logo img{height:32px}
  .bottom{left:20px;bottom:80px}
  .bottom h1{font-size:24px}
  .topbar{padding:14px 16px}
  .casting-inner p{font-size:22px}
  .cast-icon-big{width:110px;height:110px}
  .cast-icon-big svg{width:60px;height:60px}
}