:root {
    --bg-dark: #1b1d1c;
    --accent-yellow-green: #d4ff2a;
    --accent-cyan-green: #0df0a3;
    --text-white: #f8f9fa;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: 'Outfit', sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

/* Background Glows */
.glow-circle-1, .glow-circle-2 {
    position: absolute; border-radius: 50%; filter: blur(120px); z-index: 0; opacity: 0.3;
}
.glow-circle-1 { background: var(--accent-yellow-green); width: 450px; height: 450px; top: -150px; left: -150px; }
.glow-circle-2 { background: var(--accent-cyan-green); width: 350px; height: 350px; bottom: -100px; right: -100px; }

/* Container */
.container {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px);
    padding: 3.5rem 4rem;
    border-radius: 24px;
    text-align: center;
    z-index: 1;
    position: relative;
    max-width: 95%;
    transition: all 0.5s ease;
}

#logo {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    cursor: pointer;
    background: linear-gradient(135deg, var(--accent-yellow-green), var(--accent-cyan-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform 0.3s;
}
#logo:hover { transform: scale(1.05); }

.subtitle { color: #8c918e; margin-bottom: 2.5rem; font-weight: 300; }

/* Countdown & Buttons */
.countdown { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2.5rem; }
.time-box { background: rgba(0, 0, 0, 0.2); padding: 1rem; border-radius: 16px; min-width: 85px; border: 1px solid var(--glass-border); }
.time-box .number { font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; display: block; }
.time-box .label { font-size: 0.7rem; color: #8c918e; text-transform: uppercase; }

.actions { display: flex; gap: 1rem; justify-content: center; }
.btn {
    padding: 0.8rem 1.5rem; border-radius: 12px; font-family: 'Space Grotesk', sans-serif;
    text-decoration: none; transition: all 0.3s; cursor: pointer; border: none;
}
.btn-primary { background: transparent; border: 1px solid var(--accent-cyan-green); color: var(--accent-cyan-green); }
.btn-primary:hover { box-shadow: 0 0 15px rgba(13, 240, 163, 0.3); background: rgba(13, 240, 163, 0.05); }
.btn-secondary { background: transparent; border: 1px solid var(--glass-border); color: #b0b5b2; }

/* Game Styles */
#game-canvas { background: rgba(0,0,0,0.4); border-radius: 16px; border: 1px solid var(--glass-border); margin-top: 20px; }
.game-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.score-display { font-family: 'Space Grotesk'; color: var(--accent-yellow-green); }
.btn-close { background: transparent; border: 1px solid #ff4b2b; color: #ff4b2b; padding: 5px 15px; border-radius: 8px; cursor: pointer; }

/* Modals */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
    display: flex; justify-content: center; align-items: center; z-index: 100;
}
.modal-card {
    background: #242625; padding: 2.5rem; border-radius: 24px; border: 1px solid var(--glass-border);
    max-width: 450px; text-align: center;
}
.modal-card h2 { font-family: 'Space Grotesk'; margin-bottom: 1rem; color: var(--accent-cyan-green); }
.modal-card p { color: #b0b5b2; line-height: 1.6; margin-bottom: 1.5rem; }
.tutorial-keys { margin-bottom: 1.5rem; font-size: 1.5rem; color: var(--accent-yellow-green); }

.hidden { display: none !important; }
.mouse-glow { position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(13, 240, 163, 0.1) 0%, transparent 60%); pointer-events: none; transform: translate(-50%, -50%); z-index: -1; }