: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 { display: flex; justify-content: center; gap: 5px; margin-bottom: 10px; }

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

/* Search Box with Poster Logic */
.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: 400px; overflow-y: auto;
    border-radius: 0 0 8px 8px;
}

.search-item { 
    display: flex; align-items: center; padding: 10px; gap: 12px;
    border-bottom: 1px solid #222; cursor: pointer; text-align: left;
}

.search-item img { width: 45px; height: 68px; object-fit: cover; border-radius: 4px; background: #222; }

.search-info { display: flex; flex-direction: column; }

.search-info strong { font-size: 16px; }

.search-info small { color: #888; font-size: 13px; }

/* Video Player */
#videoWrapper { width: 100%; background: #000; }

#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;
}

/* Theater Mode (Instant Full) */
body.theater-mode { overflow: hidden; }
body.theater-mode #videoWrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; }
body.theater-mode #fullscreenBtn { position: fixed; top: 20px; right: 20px; z-index: 10000; background: var(--accent); border: 2px solid #fff; }