/* Dark mode TV-friendly styles (1920x1080) */
:root{--bg:#000;--panel:rgba(14,14,14,0.85);--accent:#00b3ff;--muted:#9aa0a6}
html,body{height:100%;margin:0;background:var(--bg);color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial}
#player-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);outline:none}
#player-container.hide-cursor, #player-container.hide-cursor video { cursor: none; } /* Ocultar cursor nativo solo cuando añadimos la clase hide-cursor */
.show-native-cursor #player-container, .show-native-cursor #player-container video { cursor: default; } /* Forzar cursor visible durante pruebas en desktop */
video{width:100%;height:100%;object-fit:contain;background:#000}
#controls{position:absolute;top:6%;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:18px;transition:opacity 200ms ease-out,transform 200ms ease-out} 
.hidden{opacity:0;pointer-events:none;transform:translateY(-12px)} 
.control{min-width:88px;min-height:88px;border-radius:10px;background:var(--panel);border:1px solid rgba(255,255,255,0.04);display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px}
.control.big{width:140px;height:140px;border-radius:70px;font-size:48px}
#top-controls{display:flex;gap:14px;align-items:center;justify-content:center;padding-top:6px}
#quality-badge{min-width:84px;text-align:center;padding:8px 10px;font-size:20px;border-radius:8px;background:rgba(255,255,255,0.02);color:var(--muted);opacity:0;transition:opacity 160ms ease-out}
#quality-badge[aria-hidden="false"]{color:#fff;background:rgba(0,179,255,0.06);opacity:1}

/* Center the large Play/Pause button */
.control.big{position:absolute;transform:translate(-50%,-50%);width:160px;height:160px;border-radius:80px;font-size:56px;z-index:1001;}

/* subtle scale animation when showing/hiding the central button */
.control.big.showing{transform:translate(-50%,-50%) scale(1);opacity:1;transition:transform 180ms ease-out,opacity 180ms ease-out}
.control.big.hidden{opacity:0;transform:translate(-50%,-50%) scale(0.96)}

/* Ensure smaller screens adapt */
@media (max-width:1280px){.control.big{width:120px;height:120px;border-radius:60px;font-size:40px}}
.menu{position:absolute;left:auto;top:auto;background:rgba(10,10,10,0.98);padding:8px;border-radius:10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 10px 40px rgba(0,0,0,0.7);min-width:160px;pointer-events:auto;z-index:1100;}
.menu button[role="menuitem"]{min-width:140px;text-align:left;padding:10px 14px;font-size:28px;border-radius:6px;background:transparent;color:#fff}
.menu button[role="menuitem"]:focus{outline:none;background:rgba(255,255,255,0.03);box-shadow:0 0 20px rgba(0,179,255,0.08)}
.menu button[role="menuitem"].active{background:linear-gradient(90deg, rgba(0,179,255,0.12), rgba(0,179,255,0.04));box-shadow:0 6px 18px rgba(0,179,255,0.08);}
.menu button[role="menuitem"].active::after{content:'✓';float:right;font-size:20px;color:var(--accent);opacity:0.98} 
.menu.hidden{display:none}  
.menu.hidden{display:none}
button{cursor:pointer;border:none}
button:focus{outline:none;box-shadow:0 0 18px 6px rgba(0,179,255,0.25)}
#overlay-messages{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.6);padding:10px 18px;border-radius:8px;font-size:28px;color:#fff;pointer-events:none;opacity:0;transition:opacity 180ms ease-out;}
#overlay-messages.visible{opacity:1} 
@media (max-width:1280px){.control.big{width:120px;height:120px;font-size:40px}.control{min-width:72px;min-height:72px;font-size:24px}}

/* AVPlay mode: hide <video> element (native renderer will be used) */
.av-active #video{display:none}
.av-active #controls{z-index:9999}