/* Dark neon theme styling */
* { box-sizing: border-box; }
html,body,#game-wrap { height: 100%; margin:0; }
body { background: linear-gradient(180deg,#0b0f17,#06101a); font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color: #dbeafe; }
#game-wrap { position: relative; display:flex; align-items:center; justify-content:center; }
canvas { width: 100%; height: 100vh; display:block; }
#hud { position: absolute; left: 12px; top: 12px; display:flex; gap:8px; align-items:center; }
#score { background: rgba(255,255,255,0.03); padding: 8px 12px; border-radius: 8px; font-weight:700; color:#7cfffb; box-shadow: 0 4px 20px rgba(0,0,0,0.6); }
#muteBtn { background: rgba(255,255,255,0.02); border: none; padding:8px; border-radius:8px; color:#fff; cursor:pointer; }
#volumeSlider { width:120px; appearance:none; height:6px; background:linear-gradient(90deg,#7cfffb,#ff6ec7); border-radius:6px; }
#volumeSlider::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; background:#fff; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,0.4);} 
#overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; backdrop-filter: blur(6px); }
.hidden { display:none; }
.panel { background: linear-gradient(180deg, rgba(12,16,24,0.9), rgba(6,8,12,0.85)); padding:24px; border-radius:12px; box-shadow: 0 10px 40px rgba(0,0,0,0.7); min-width:260px; text-align:center; }
.panel h1 { margin:0 0 8px 0; color:#ff6ec7; }
.panel p { margin:8px 0; }
.controls { display:flex; gap:8px; margin:8px 0; }
.controls input { flex:1; padding:8px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:transparent; color:#fff; }
.controls button { padding:8px 12px; background:#7cfffb; border:none; border-radius:8px; cursor:pointer; }
.actions { margin-top:8px; }
.actions button { padding:10px 16px; border-radius:10px; border:none; background:#ff6ec7; color:#fff; font-weight:700; cursor:pointer; }

/* Responsive tweaks */
@media (max-width:520px){ .panel { width:90vw; } }

/* Start screen and jump button styles */
.start-screen { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 30% 20%, rgba(0,0,0,0.15), rgba(0,0,0,0.7) 60%), #0b1220; color:#fff; z-index: 50; text-align:center; }
.start-btn { padding:10px 16px; border-radius:10px; border:none; background:#7cfffb; color:#012; font-weight:700; cursor:pointer; }
.jump-btn { position:fixed; left:20px; bottom:40px; width:64px; height:64px; border-radius:12px; border:none; background: linear-gradient(135deg, #1bd1d8, #7cfffb); color:#041; font-weight:700; box-shadow:0 6px 20px rgba(0,0,0,0.4); }
