* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #000; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; font-family: 'Arial Black', sans-serif; }
#game-container { position: relative; width: 800px; height: 400px; border: 4px solid #333; }
canvas { width: 100%; height: 100%; }

#progress-container { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 300px; height: 10px; background: rgba(255,255,255,0.2); border-radius: 5px; z-index: 95; display: none; }
#progress-bar { width: 0%; height: 100%; background: #00fbff; border-radius: 5px; }
#progress-text { position: absolute; right: -45px; top: -5px; color: white; font-size: 14px; }

#hud { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); color: white; z-index: 90; font-size: 18px; text-shadow: 2px 2px #000; }
#pause-btn { position: absolute; top: 15px; right: 15px; z-index: 110; width: 45px; height: 45px; background: rgba(255,255,255,0.2); border: 2px solid #fff; color: #fff; border-radius: 8px; cursor: pointer; display: none; font-size: 20px; }

.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; z-index: 100; }
.logo { font-size: 40px; text-shadow: 0 0 15px #00fbff; margin-bottom: 20px; }
.play-btn { background: #2ecc71; border: 4px solid #fff; border-radius: 50%; width: 70px; height: 70px; font-size: 30px; color: #fff; cursor: pointer; }
.level-btn { background: #222; border: 2px solid #00fbff; color: #fff; padding: 10px 20px; margin: 5px; cursor: pointer; width: 220px; font-weight: bold; }
.icon-btn { background: #3498db; border: 2px solid #fff; padding: 10px; border-radius: 10px; font-size: 20px; cursor: pointer; margin-right: 10px; }
.back-btn { background: none; border: none; color: #aaa; text-decoration: underline; cursor: pointer; }