@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Roboto+Mono:wght@400;700&display=swap');

:root {
    --primary: #00f3ff;
    --danger: #ff0055;
    --success: #00ff66;
    --warning: #ffaa00;
    --bg: #050510;
    --ui-font: 'Orbitron', sans-serif;
    --type-font: 'Roboto Mono', monospace;
}

body {
    margin: 0; overflow: hidden; background-color: var(--bg); color: white;
    font-family: var(--ui-font); user-select: none;
}
body::after {
    content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.1) 50%), linear-gradient(90deg, rgba(255,0,0,0.03), rgba(0,255,0,0.01), rgba(0,0,255,0.03));
    z-index: 999; background-size: 100% 2px, 3px 100%; pointer-events: none;
}

.modal {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5,5,16,0.95); backdrop-filter: blur(10px);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 200; pointer-events: auto; transition: opacity 0.3s; overflow-y: auto; padding: 20px;
}
.hidden { display: none !important; opacity: 0; pointer-events: none; }

h1 { font-size: 4rem; margin: 0; background: linear-gradient(to bottom, #fff, var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase; letter-spacing: 5px; filter: drop-shadow(0 0 15px var(--primary)); text-align: center; }
h2 { font-size: 1.5rem; color: #fff; margin-bottom: 20px; text-shadow: 0 0 5px var(--primary); font-weight: 400; text-align: center; }
p.subtitle { font-family: var(--type-font); color: #aaa; font-size: 1.2rem; margin-bottom: 40px; text-align: center; max-width: 600px; line-height: 1.6; }

.btn {
    background: transparent; color: var(--primary); border: 2px solid var(--primary); padding: 15px 40px;
    font-size: 1.5rem; font-family: var(--ui-font); text-transform: uppercase; cursor: pointer; transition: all 0.3s;
    position: relative; overflow: hidden; pointer-events: auto; margin: 10px;
}
.btn:hover { background: var(--primary); color: #000; box-shadow: 0 0 30px var(--primary); transform: translateY(-2px); }
.btn-small { padding: 10px 20px; font-size: 1rem; }
.btn-easy { border-color: var(--success); color: var(--success); }
.btn-easy:hover { background: var(--success); box-shadow: 0 0 30px var(--success); }
.btn-hard { border-color: var(--warning); color: var(--warning); }
.btn-hard:hover { background: var(--warning); box-shadow: 0 0 30px var(--warning); }
.btn-expert { border-color: var(--danger); color: var(--danger); }
.btn-expert:hover { background: var(--danger); box-shadow: 0 0 30px var(--danger); }