:root {
    --neon-green: #39FF14; --neon-red: #FF003C; --neon-blue: #00F3FF;
    --bg-dark: #020204; --cyber-panel: rgba(10, 10, 15, 0.9);
    --font-retro: 'Press Start 2P', cursive;
}
body { margin: 0; background: var(--bg-dark); color: #fff; font-family: var(--font-retro); display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; touch-action: none; overflow: hidden; }
#game-container { position: relative; width: 100%; max-width: 600px; display: flex; flex-direction: column; height: 100vh; padding: 10px; box-sizing: border-box; text-align: center; }
header { margin-bottom: 15px; }
.brand { font-size: 8px; letter-spacing: 2px; color: var(--neon-blue); margin-bottom: 5px; opacity: 0.8; }
.title { font-size: 22px; margin: 5px 0; color: #fff; text-shadow: 0 0 10px var(--neon-green); }
#level-display { font-size: 10px; color: #aaa; margin-top: 5px; line-height: 1.6; }
#game-mode { color: var(--neon-red); font-weight: bold; display: block; font-size: 11px; margin-top: 3px; text-shadow: 0 0 8px var(--neon-red); }
#ui { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 10px; gap: 10px; }
.ui-box { background: var(--cyber-panel); border: 1px solid var(--neon-green); padding: 8px; flex: 1; }
.canvas-wrapper { position: relative; background: #000; border: 1px solid rgba(0, 243, 255, 0.3); flex: 1; overflow: hidden; }
canvas { width: 100%; height: 100%; object-fit: contain; }
.deadline-line { position: absolute; bottom: 150px; left: 0; width: 100%; height: 2px; background: repeating-linear-gradient(90deg, var(--neon-red), var(--neon-red) 10px, transparent 10px, transparent 20px); display: none; z-index: 5; }
.bonus-active .deadline-line { display: block; animation: flash 0.5s infinite; }
@keyframes flash { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
.corner { position: absolute; width: 15px; height: 15px; border-color: var(--neon-blue); border-style: solid; z-index: 2; }
.top-left { top: -2px; left: -2px; border-width: 3px 0 0 3px; }
.top-right { top: -2px; right: -2px; border-width: 3px 3px 0 0; }
.bottom-left { bottom: -2px; left: -2px; border-width: 0 0 3px 3px; }
.bottom-right { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; }
#overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.9); display: flex; justify-content: center; align-items: center; z-index: 100; }
.cyberpunk-modal { border: 2px solid var(--neon-red); padding: 30px; background: var(--cyber-panel); }
.hidden { display: none !important; }
button { font-family: var(--font-retro); background: transparent; color: #fff; border: 2px solid var(--neon-green); padding: 15px; cursor: pointer; width: 100%; font-size: 10px; }