/* --- PLAYER CONTAINER (Overlay Nascosto) --- */
#player-container { 
    display: none; /* Nascosto di default */
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: #000; z-index: 2000; outline: none;
    cursor: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#player-container.user-active { cursor: default; }
#video { width: 100%; height: 100%; object-fit: contain; }

/* --- CONTROLLI PERSONALIZZATI --- */
#controls-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 20;
}

/* Mostra controlli se c'è attività utente o se in pausa */
#player-container.user-active #controls-layer,
#player-container.paused #controls-layer { opacity: 1; }

/* --- TOP BAR --- */
#player-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent);
    display: flex;
    justify-content: space-between;
    padding: 30px 50px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 10;
}

#player-container.user-active #player-top-bar,
#player-container.paused #player-top-bar { opacity: 1; }

.top-bar-left { text-align: left; }
.top-bar-right { text-align: right; }

.player-text-large { font-size: 28px; font-weight: bold; color: white; text-shadow: 1px 1px 4px rgba(0,0,0,0.8); margin-bottom: 5px; font-family: sans-serif; }
.player-text-small { font-size: 16px; color: #ddd; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); font-family: sans-serif; }
.player-year { font-weight: normal; opacity: 0.8; margin-left: 10px; font-size: 0.8em; }

/* Barra Progresso */
.progress-area { width: 100%; height: 15px; cursor: pointer; display: flex; align-items: center; }
.progress-area:focus { transform: none !important; outline: none !important; border: none !important; box-shadow: none !important; } /* Rimuove zoom e outline al focus */
.progress-bg { width: 100%; height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px; position: relative; transition: height 0.1s; }
.progress-buffer { height: 100%; background: rgba(255,255,255,0.5); width: 0%; border-radius: 2px; position: absolute; top: 0; left: 0; transition: width 0.2s; }
.progress-fill { height: 100%; background: #2196F3; width: 0%; border-radius: 2px; position: relative; z-index: 2; }
.progress-handle { width: 12px; height: 12px; background: #2196F3; border-radius: 50%; position: absolute; right: -6px; top: -4px; transform: scale(0); transition: transform 0.2s; }
.progress-area:hover .progress-handle, .progress-area:focus .progress-handle { transform: scale(1); }

/* Focus sulla barra: aumenta spessore */
.progress-area:focus .progress-bg { height: 10px; }
.progress-area:focus .progress-handle { top: -1px; }

/* Riga Pulsanti */
.controls-row { display: flex; justify-content: space-between; align-items: center; color: white; }
.left-controls, .right-controls { display: flex; align-items: center; gap: 15px; }

/* Gestione Seeking Mode (Solo barra progresso visibile) */
#player-container.seeking-active #controls-layer { opacity: 1; }
#player-container.seeking-active .controls-row { 
    opacity: 0; 
    pointer-events: none; 
}

button.ctrl-btn { background: none; border: none; color: white; cursor: pointer; padding: 0; opacity: 0.8; transition: all 0.2s; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
button.ctrl-btn:hover { opacity: 1; transform: scale(1.1); }
button.ctrl-btn svg { width: 28px; height: 28px; fill: currentColor; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6)); }

.time-display { font-size: 14px; font-variant-numeric: tabular-nums; color: #ddd; }

/* Volume */
.volume-container { display: flex; align-items: center; gap: 8px; }
input[type=range] { width: 80px; cursor: pointer; accent-color: #2196F3; }

/* Menu Player (Generico per Qualità, Sub, Audio) */
.player-menu {
    display: none;
    position: absolute;
    bottom: 70px;
    /* right: posizionato via JS */
    background: rgba(20, 20, 20, 0.95);
    border-radius: 8px;
    padding: 10px 0;
    min-width: 180px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
    z-index: 30;
    overflow-y: auto;
    max-height: 300px;
}

/* Scrollbar personalizzata per i menu */
.player-menu::-webkit-scrollbar { width: 6px; }
.player-menu::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.player-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; }

.player-menu ul { list-style: none; margin: 0; padding: 0; }
.player-menu li { 
    padding: 10px 20px; 
    color: #eee; 
    cursor: pointer; 
    font-size: 14px; 
    transition: background-color 0.2s; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.player-menu li:focus { outline: none !important; box-shadow: none !important; background: rgba(255,255,255,0.15); }
.player-menu li:hover { background: rgba(255,255,255,0.1); }
.player-menu li.active { color: #2196F3; font-weight: bold; }
.player-menu li.active::after { content: '✓'; }