* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:#000; font-family:Arial,sans-serif; }

#gameCanvas { display:block; width:100%; height:100%; }

#hud { position:fixed; top:10px; left:0; right:0; z-index:10; pointer-events:none; }
#hudTop { display:flex; justify-content:space-between; padding:0 20px; color:#fff; font-size:18px; font-weight:bold; text-shadow:2px 2px 0 #000; }
#hudCoins { color:#FFD700; }
#pauseBtn { position:fixed; top:10px; right:10px; z-index:20; pointer-events:auto; width:36px; height:36px; border:none; border-radius:50%; background:rgba(255,255,255,0.2); color:#fff; font-size:18px; cursor:pointer; }

.overlay { position:fixed; top:0; left:0; width:100%; height:100%; z-index:100; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.85); }
.hidden { display:none !important; }

.panel { background:linear-gradient(135deg,#1a1a3e,#0d0d2b); border:2px solid #4a4a8a; border-radius:16px; padding:30px; text-align:center; color:#fff; max-width:360px; width:90%; max-height:80vh; overflow-y:auto; }
.panel h2 { font-size:24px; margin-bottom:16px; color:#FFD700; }
.panel button, #menuContent button { display:block; width:100%; padding:12px; margin:8px 0; border:none; border-radius:10px; font-size:16px; cursor:pointer; transition:transform .1s,opacity .1s; }
.panel button:active, #menuContent button:active { transform:scale(0.96); opacity:0.9; }
.panel button { background:#3a3a8a; color:#fff; }
.panel button.gold { background:linear-gradient(135deg,#f9a825,#f57f17); color:#000; font-weight:bold; }
.panelBtns { margin-top:12px; }

#mainMenu { background:linear-gradient(180deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%); }
#menuContent { text-align:center; color:#fff; padding:40px 20px; max-width:360px; width:90%; }
#menuContent h1 { font-size:36px; color:#FFD700; margin-bottom:4px; }
#menuContent .subtitle { font-size:14px; color:#aaa; margin-bottom:24px; }
#menuContent button { background:linear-gradient(135deg,#e94560,#c23152); color:#fff; font-weight:bold; font-size:18px; }
#menuContent button:nth-child(4), #menuContent button:nth-child(5) { background:linear-gradient(135deg,#3a3a8a,#2a2a6a); font-size:15px; }
.menuBtns { margin-bottom:20px; }
.menuControls { font-size:12px; color:#888; line-height:1.8; }
.menuControls p { margin:0; }

.shopItem, .charItem { background:rgba(255,255,255,0.05); border-radius:8px; padding:10px; margin:6px 0; display:flex; justify-content:space-between; align-items:center; }
.shopItem span, .charItem span { color:#ddd; }
.shopItem button, .charItem button { width:auto; padding:6px 14px; margin:0; font-size:13px; background:#e94560; color:#fff; border-radius:6px; }

@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }