:root { --neon: #00f2ff; --pink: #ff0055; --bg: #050508; }
body { margin: 0; background: #000; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: 'Segoe UI', sans-serif; overflow: hidden; }

#game-container { position: relative; width: 100vw; height: 56.25vw; max-height: 100vh; max-width: 177.78vh; background: var(--bg); border: 2px solid #333; box-shadow: 0 0 50px rgba(0,0,0,0.5); }
canvas { width: 100%; height: 100%; display: block; }

.screen, .overlay { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: center; align-items: center; background: rgba(5, 5, 8, 0.95); z-index: 10; color: white; }
.active { display: flex; }
.overlay { background: transparent; pointer-events: none; z-index: 5; }

.title { font-size: 5rem; color: var(--neon); text-shadow: 0 0 20px var(--neon); margin-bottom: 30px; letter-spacing: 5px; font-weight: 900; }
.neon-text { color: var(--neon); text-shadow: 0 0 10px var(--neon); margin-bottom: 20px; }
.win-text { color: #00ff88; text-shadow: 0 0 15px #00ff88; font-size: 3rem; }

/* Main Play Button */
.play-orb { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, var(--neon), #00aaff); border: 4px solid #fff; color: #000; font-size: 1.5rem; font-weight: 900; cursor: pointer; box-shadow: 0 0 30px var(--neon); transition: transform 0.2s; }
.play-orb:hover { transform: scale(1.1); }

/* Menu Buttons */
.menu-btn { padding: 15px 40px; margin: 10px; background: transparent; border: 2px solid var(--neon); color: #fff; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: 0.2s; min-width: 200px; pointer-events: auto; }
.menu-btn:hover { background: var(--neon); color: #000; box-shadow: 0 0 20px var(--neon); }
.menu-box { display: flex; flex-direction: column; gap: 10px; }

/* Level Select Buttons - FIXED */
.level-grid { display: flex; gap: 20px; margin-bottom: 30px; }
.lvl-btn { 
    width: 90px; height: 90px; 
    background: #111; 
    border: 3px solid #444; 
    color: white; 
    font-size: 2rem; 
    font-weight: bold;
    cursor: pointer; 
    transition: 0.2s; 
    pointer-events: auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.lvl-btn:hover { 
    border-color: var(--neon); 
    box-shadow: 0 0 25px var(--neon); 
    color: var(--neon); 
    transform: translateY(-5px);
}

/* Editor Toolbar */
.editor-toolbar { position: absolute; bottom: 0; width: 100%; background: #0a0a0a; border-top: 2px solid var(--neon); padding: 10px; display: flex; justify-content: space-between; pointer-events: auto; }
.group { display: flex; gap: 5px; }
.portals { border-left: 1px solid #333; border-right: 1px solid #333; padding: 0 10px; }
.ed-btn { padding: 8px 12px; background: #222; border: 1px solid #444; color: #aaa; cursor: pointer; font-size: 0.8rem; font-weight: bold; }
.ed-btn:hover { background: #333; color: #fff; }
.ed-btn.active { background: var(--neon); color: #000; border-color: var(--neon); }
.p-btn { border-bottom: 2px solid #ff00ff; }
.save-btn { background: #1976D2; color: white; }
.load-btn { background: #F57C00; color: white; }

/* HUD */
#pause-trigger { position: absolute; top: 20px; left: 20px; width: 40px; height: 40px; background: rgba(0,0,0,0.5); border: 2px solid #fff; color: white; cursor: pointer; pointer-events: auto; font-weight: bold; }
#progress-bar { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: 40%; height: 6px; background: #222; border-radius: 3px; }
#progress-fill { width: 0%; height: 100%; background: var(--neon); box-shadow: 0 0 10px var(--neon); }