:root { --accent: #8b0000; --bg: #000; --panel: #111; }

body { 
    background-color: var(--bg); 
    color: #fff; 
    margin: 0; 
    padding: 0;
    font-family: -apple-system, sans-serif; 
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.main-container { width: 100%; display: block; }

.top-nav { 
    padding: 15px 10px; 
    background: #000; 
    text-align: center;
    border-bottom: 1px solid #222;
}

#epSearch { 
    width: 90%; max-width: 500px; background: var(--panel); 
    border: 1px solid #333; color: white; padding: 12px; 
    border-radius: 6px; font-size: 16px; margin-bottom: 10px;
}

.player-controls { margin-bottom: 10px; }

select, button { 
    background: #222; color: white; border: 1px solid #444; 
    padding: 12px; border-radius: 5px; font-size: 16px; margin: 4px;
}

#videoWrapper { width: 100%; background: #000; transition: all 0.3s ease; }

#videoContainer { 
    width: 100%; max-width: 1200px; margin: 0 auto;
    aspect-ratio: 16 / 9; position: relative; 
}

iframe { position: absolute; width: 100%; height: 100%; border: none; top: 0; left: 0; }

#nextBtn { 
    background: var(--accent); margin: 20px auto; display: none; 
    padding: 15px 40px; font-weight: bold; border: none; border-radius: 8px;
}

.results-box { 
    position: absolute; left: 50%; transform: translateX(-50%);
    background: #111; width: 90%; max-width: 500px; z-index: 1000; 
    border: 1px solid #333; max-height: 300px; overflow-y: auto;
}

.search-item { padding: 15px; border-bottom: 1px solid #222; text-align: left; }

/* THEATER MODE - Instant Fullscreen Fix */
body.theater-mode { overflow: hidden; }

body.theater-mode #videoWrapper {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 9999; background: #000;
}

body.theater-mode #fullscreenBtn {
    position: fixed; top: 20px; right: 20px; z-index: 10000;
    background: rgba(139, 0, 0, 0.9); border: 2px solid white;
}