* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; background: #0f0f23; color: #fff; min-height: 100vh; display: flex; justify-content: center; align-items: center; }
.wrapper { text-align: center; position: relative; }
.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; flex-wrap: wrap; }
.back-btn { color: #888; text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.back-btn:hover { color: #4cff72; }
.back-btn { background: #2a2a5e; padding: 0.3rem 0.7rem; border-radius: 6px; }
.pause-btn { background: #2a2a5e; color: #fff; border: none; padding: 0.3rem 0.7rem; border-radius: 6px; font-size: 1rem; cursor: pointer; margin-left: 0.4rem; transition: background 0.2s; }
.pause-btn:hover { background: #3a3a7e; }
.top-bar h1 { font-size: 1.4rem; }
.score-board { display: flex; gap: 1rem; font-size: 0.9rem; color: #aaa; }
.score-board strong { color: #4cff72; }
canvas { background: #1a1a3e; border: 2px solid #2a2a5e; border-radius: 8px; display: block; margin: 0 auto; }
#overlay { display: none; position: absolute; inset: 0; background: rgba(15,15,35,0.92); border-radius: 12px; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; z-index: 20; }
#overlay.show { display: flex; }
#overlay-text { font-size: 1.4rem; color: #ccc; }
#gameover-info { text-align: center; }
#go-score { font-size: 0.95rem; color: #aaa; }
#go-highscore { font-size: 0.85rem; color: #4cff72; }
#restart-btn, #menu-btn { margin-top: 0.5rem; padding: 0.6rem 1.8rem; font-size: 1rem; background: #f0c040; color: #0f0f23; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: background 0.2s; min-width: 180px; text-align: center; }
#restart-btn:hover, #menu-btn:hover { background: #ffd866; }
#menu-btn { background: #2a2a5e; color: #fff; }
#menu-btn:hover { background: #3a3a7e; }
.hidden { display: none !important; }
.controls { margin-top: 1rem; display: flex; justify-content: center; gap: 0.3rem; }
.ctrl-btn { width: 50px; height: 50px; font-size: 1.1rem; background: #1a1a3e; color: #fff; border: 2px solid #2a2a5e; border-radius: 10px; cursor: pointer; transition: background 0.15s; -webkit-tap-highlight-color: transparent; }
.ctrl-btn:active { background: #2a2a5e; }
.fire-btn { background: #3a1a1a; border-color: #5a2a2a; }
@media (min-width: 600px) { .controls { display: none; } }

@media (max-width: 599px) { .hamburger-btn { display: none !important; } }