:root {
    --primary-color: #4DB6AC;
    --secondary-color: #FFCA28;
    --dark-bg: #0D1117;
    --card-bg: #161B22;
    --text-color: #E0E0E0;
    --text-muted: #a0a0a0;
    --border-color: rgba(255, 255, 255, 0.1);
    --heading-font: 'Montserrat', sans-serif;
    --body-font: 'Poppins', sans-serif;
    --header-bg: rgba(13, 17, 23, 0.85);
    --hero-gradient: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
    --shadow-color: rgba(0,0,0,0.5);
    --footer-bg: #000;
}

body.light-mode {
    --primary-color: #00796B;
    --secondary-color: #FBC02D;
    --dark-bg: #F4F6F8;
    --card-bg: #FFFFFF;
    --text-color: #212121;
    --text-muted: #5f5f5f;
    --border-color: rgba(0, 0, 0, 0.1);
    --header-bg: rgba(255, 255, 255, 0.85);
    --hero-gradient: linear-gradient(180deg, #E3F2FD 0%, #FFFFFF 100%);
    --shadow-color: rgba(0,0,0,0.1);
    --footer-bg: #E0E0E0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--body-font); background-color: var(--dark-bg); color: var(--text-color); overflow-x: hidden; transition: background-color 0.4s, color 0.4s; }
.reveal { transform: translateY(100px); opacity: 0; transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
.reveal.active { transform: translateY(0); opacity: 1; }

header { position: fixed; width: 100%; top: 0; padding: 20px 0; z-index: 1000; transition: background-color 0.4s ease, padding 0.4s ease; background-color: transparent; }
header.scrolled { background-color: var(--header-bg); backdrop-filter: blur(10px); padding: 15px 0; box-shadow: 0 4px 20px var(--shadow-color); }
.container { max-width: 1200px; margin: auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
header .logo-img { height: 60px; transition: height 0.4s ease; }
header.scrolled .logo-img { height: 50px; }
nav a { color: var(--text-color); text-decoration: none; margin-left: 35px; font-size: 1.1em; font-weight: 600; transition: color 0.3s; }
nav a:hover { color: var(--secondary-color); }
.theme-toggle-button { background: none; border: 2px solid var(--border-color); color: var(--text-color); width: 40px; height: 40px; border-radius: 50%; margin-left: 35px; font-size: 1.2rem; transition: all 0.3s; }
.theme-toggle-button:hover { border-color: var(--secondary-color); color: var(--secondary-color); transform: rotate(15deg); }

.hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 20px; background: var(--hero-gradient); overflow: hidden; }
#particles-js { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
body.light-mode #particles-js { display: none; }
.hero-content { z-index: 2; }
.hero-logo { max-width: 200px; width: 100%; margin: 0 auto 20px auto; filter: drop-shadow(0 0 15px rgba(255,202,40,0.3)); }
.hero h1 { font-family: var(--heading-font); font-weight: 900; font-size: clamp(2.5rem, 8vw, 6rem); margin-bottom: 20px; line-height: 1.1; background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--text-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; animation: gradient-animation 5s ease infinite; background-size: 200% 200%; }
@keyframes gradient-animation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
body.light-mode .hero h1 { background: linear-gradient(45deg, var(--primary-color), #004D40); -webkit-background-clip: text; background-clip: text; }
.hero p { font-size: clamp(1rem, 3vw, 1.5rem); margin-bottom: 40px; color: var(--text-muted); }
.cta-button { background-color: var(--secondary-color); color: var(--dark-bg); padding: 18px 40px; font-size: 1.2em; border-radius: 50px; border: none; font-weight: 700; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; }
.cta-button:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 10px 30px color-mix(in srgb, var(--secondary-color) 40%, transparent); }
.player-count { margin-top: 20px; font-size: 1.2em; font-weight: 600; color: var(--text-muted); }
.player-count .online { color: #4CAF50; }
.player-count .offline { color: #F44336; }

.section-wrapper { padding: 100px 20px; }
p { color: var(--text-muted); line-height: 1.7; }
h2 { font-family: var(--heading-font); font-size: 3.5rem; text-align: center; margin-bottom: 60px; color: var(--text-color); }
.gamemodes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }
.mode-card { background: var(--card-bg); border-radius: 15px; padding: 40px 30px; text-align: center; border: 1px solid var(--border-color); position: relative; overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; }
.mode-card:hover { transform: translateY(-15px); box-shadow: 0 20px 40px var(--shadow-color); }
.mode-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary-color) 30%, transparent), transparent); transition: left 0.6s ease; }
.mode-card:hover::before { left: 100%; }
.mode-card .icon { font-size: 3rem; margin-bottom: 20px; color: var(--primary-color); }
.mode-card h3 { font-size: 2rem; color: var(--secondary-color); margin-bottom: 15px; }
.mode-card.coming-soon { opacity: 0.6; }
.mode-card.coming-soon:hover { transform: none; box-shadow: none; border-color: var(--border-color); }
.mode-card.coming-soon:hover::before { left: -100%; }

#review-form { display: flex; flex-direction: column; gap: 20px; }
#review-form input[type="text"], #review-form textarea { width: 100%; padding: 15px; border-radius: 8px; border: 1px solid var(--border-color); background-color: color-mix(in srgb, var(--dark-bg) 50%, transparent); color: var(--text-color); font-size: 1em; font-family: var(--body-font); transition: background-color 0.3s; }
#review-form button { background-color: var(--primary-color); color: #fff; padding: 15px 30px; font-size: 1.1em; border-radius: 50px; border: none; font-weight: 700; transition: all 0.3s ease; }
#review-form button:hover { background-color: color-mix(in srgb, var(--primary-color) 85%, #000); transform: scale(1.05); }
.star-rating { display: flex; flex-direction: row-reverse; justify-content: center; gap: 5px; }
.star-rating input[type="radio"] { display: none; }
.star-rating label { font-size: 2.5rem; color: #444; transition: color 0.2s; }
.star-rating input[type="radio"]:checked ~ label, .star-rating:not(:checked) > label:hover, .star-rating:not(:checked) > label:hover ~ label { color: var(--secondary-color); }
body.light-mode #review-form input[type="text"], body.light-mode #review-form textarea { background-color: #fff; }

.main-footer { background-color: var(--footer-bg); padding-top: 60px; margin-top: 100px; color: var(--text-muted); transition: background-color 0.4s; }
.footer-content { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 40px; }
.footer-column { flex: 1; min-width: 220px; }
.footer-column h4 { color: var(--text-color); font-family: var(--heading-font); font-size: 1.5rem; margin-bottom: 20px; letter-spacing: 1px; }
.footer-logo { width: 100px; margin-bottom: 15px; }
.footer-column ul { list-style: none; padding: 0; }
.footer-column ul li a { color: var(--text-muted); text-decoration: none; line-height: 2.2; transition: color 0.3s, padding-left 0.3s; }
.footer-column ul li a:hover { color: var(--secondary-color); padding-left: 5px; }
.discord-button { background-color: #5865F2; color: #fff; padding: 12px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; transition: transform 0.3s; }
.discord-button:hover { transform: scale(1.05); }
.footer-bottom { border-top: 1px solid var(--border-color); text-align: center; padding: 20px; font-size: 0.9em; }
body.light-mode .footer-bottom { border-top: 1px solid #ccc; }

html {
    cursor: url('https://i.postimg.cc/W12f0bC3/dr-flag-cursor.png') 4 4, auto;
}
a, button, .cta-button, .theme-toggle-button, .mode-card, .discord-button, .back-button, input[type="radio"] + label, .story-logo {
    cursor: pointer;
}