* { 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; padding:1rem 0; }
.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 .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,.92); border-radius:12px; flex-direction:column; align-items:center; justify-content:center; gap:.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:.5rem; padding:.6rem 1.8rem; font-size:1rem; background:#f0c040; color:#0f0f23; border:none; border-radius:8px; cursor:pointer; font-weight:600; transition:background .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; align-items:center; justify-content:center; gap:.3rem; }
.ctrl-btn { width:80px; height:56px; font-size:1.1rem; background:#1a1a3e; color:#fff; border:2px solid #2a2a5e; border-radius:10px; cursor:pointer; transition:background .15s; -webkit-tap-highlight-color:transparent; }
.ctrl-btn:active { background:#2a2a5e; }
@media(min-width:600px){ .controls{display:none;} }

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