:root[data-theme="light"] {
    --bg: #f5f5f5; --text: #222; --card: #fff; --nav: #ddd; --accent: #2980b9;
}
:root[data-theme="dark"] {
    --bg: #0b0b0b; --text: #f0f0f0; --card: #1a1a1a; --nav: #151515; --accent: #e74c3c;
}

body {
    background-color: var(--bg); color: var(--text);
    font-family: 'Segoe UI', sans-serif; margin: 0;
    transition: 0.4s; overflow-x: hidden;
}

/* Nav is always on top */
nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 40px; background: var(--nav);
    border-bottom: 2px solid var(--accent);
    position: sticky; top: 0; z-index: 10000;
}
nav ul { display: flex; list-style: none; gap: 20px; }
nav a { color: var(--text); text-decoration: none; font-weight: bold; cursor: pointer; }

/* Banner */
.banner-container { width: 100%; height: 350px; position: relative; background: #000; }
.banner { width: 100%; height: 100%; background-size: cover; background-position: center; transition: 1s; }
.banner-overlay { position: absolute; top: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, var(--bg)); }

/* Pages */
main { padding: 40px; max-width: 900px; margin: auto; }
.page { display: none; }
.page.active { display: block; animation: fadeIn 0.5s; }

/* News Grid & Cards */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.video-card { background: var(--card); border-radius: 10px; overflow: hidden; cursor: pointer; border: 1px solid #333; transition: 0.3s; }
.video-card:hover { transform: scale(1.02); }
.video-thumb { position: relative; width: 100%; aspect-ratio: 16/9; background: #222; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 3rem; opacity: 0.7; }
.video-info { padding: 15px; }

/* Video Modal */
.video-modal { display: none; position: fixed; z-index: 20000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); backdrop-filter: blur(8px); }
.modal-content { position: relative; margin: auto; top: 50%; transform: translateY(-50%); width: 90%; max-width: 800px; }
#main-video { width: 100%; border-radius: 10px; }
.close-btn { position: absolute; top: -50px; right: 0; color: white; font-size: 50px; cursor: pointer; }

/* Cinematic Bars */
.cine-bar { position: fixed; left: 0; width: 100%; height: 0; background: #000; z-index: 5000; transition: 0.6s; }
#top-bar { top: 0; } #bottom-bar { bottom: 0; }
body.cinematic-on #top-bar, body.cinematic-on #bottom-bar { height: 12vh; }

/* UI Elements */
.enemy-img { max-width: 100%; border-radius: 10px; border: 2px solid var(--accent); }
.btn { background: var(--accent); color: white; border: none; padding: 10px 15px; cursor: pointer; border-radius: 5px; font-weight: bold; }
.setting-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; background: var(--card); margin-bottom: 10px; border-radius: 8px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }