body { margin:0; overflow:hidden; background:#000; font-family: Arial, sans-serif; color:#fff; }
canvas { display:block; }
#hud { position:fixed; top:10px; left:10px; padding:10px 15px; background:rgba(0,0,0,0.7); border-radius:8px; font-size:16px; border:1px solid #555; }
#hud div { margin:3px 0; }
.gold { color:#ffd54a; font-weight:bold; }
.hp { color:#ff5a5a; font-weight:bold; }
.wave { color:#6ac6ff; font-weight:bold; }
#crosshair { position:fixed; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px; pointer-events:none; }
#crosshair::before, #crosshair::after { content:''; position:absolute; background:#fff; box-shadow:0 0 3px #000; }
#crosshair::before { left:9px; top:0; width:2px; height:20px; }
#crosshair::after { top:9px; left:0; height:2px; width:20px; }
#shop { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(20,20,30,0.95); padding:25px; border-radius:12px; border:2px solid #ffd54a; min-width:420px; display:none; box-shadow:0 0 30px rgba(255,213,74,0.3); max-height: 80vh; overflow-y: auto; }
#shop h2 { margin:0 0 15px; text-align:center; color:#ffd54a; }
.shop-item { display:flex; justify-content:space-between; align-items:center; padding:10px; margin:6px 0; background:rgba(255,255,255,0.08); border-radius:6px; cursor:pointer; transition:0.2s; }
.shop-item:hover { background:rgba(255,213,74,0.2); }
.shop-item.disabled { opacity:0.4; cursor:not-allowed; }
.shop-item .name { font-weight:bold; }
.shop-item .cost { color:#ffd54a; }
.shop-item .desc { font-size:12px; color:#bbb; }
#controls { position:fixed; bottom:10px; left:10px; padding:8px 12px; background:rgba(0,0,0,0.7); border-radius:8px; font-size:13px; }
#startScreen { position:fixed; inset:0; background:rgba(0,0,0,0.9); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:100; }
#startScreen h1 { font-size:48px; color:#ffd54a; margin:0 0 10px; text-shadow:0 0 20px #ff5a5a; }
#startScreen p { font-size:18px; max-width:500px; text-align:center; line-height:1.6; }
#startBtn { margin-top:25px; padding:15px 40px; font-size:20px; background:#ff5a5a; color:#fff; border:none; border-radius:8px; cursor:pointer; font-weight:bold; transition:0.3s; }
#startBtn:hover { background:#ff7a7a; transform:scale(1.05); }
#gameOver, #victoryScreen { position:fixed; inset:0; background:rgba(0,0,0,0.92); display:none; flex-direction:column; align-items:center; justify-content:center; z-index:100; }
#gameOver h1 { font-size:60px; color:#ff5a5a; margin:0; }
#victoryScreen h1 { font-size:60px; color:#ffd54a; margin:0; text-shadow:0 0 30px #ffd54a; }
#weaponInfo { position:fixed; bottom:10px; right:10px; padding:10px 15px; background:rgba(0,0,0,0.7); border-radius:8px; font-size:14px; border:1px solid #555; }
#waveMsg { position:fixed; top:30%; left:50%; transform:translateX(-50%); font-size:40px; color:#ffd54a; text-shadow:0 0 15px #000; opacity:0; transition:opacity 0.5s; pointer-events:none; }
#weaponShop { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(20,20,30,0.95); padding:25px; border-radius:12px; border:2px solid #4a90e8; min-width:500px; display:none; box-shadow:0 0 30px rgba(74,144,232,0.3); max-height: 80vh; overflow-y: auto; }
#weaponShop h2 { margin:0 0 15px; text-align:center; color:#4a90e8; }
.damage-indicator { position:fixed; color:#ff0; font-size:24px; font-weight:bold; text-shadow:0 0 5px #000, 0 0 10px #000; pointer-events:none; transition:all 0.8s ease-out; }
.pig-hp-bar { position: fixed; width: 40px; height: 6px; background: rgba(0,0,0,0.7); border: 1px solid #000; border-radius: 3px; pointer-events: none; z-index: 5; transform: translate(-50%, -50%); display: none; }
.pig-hp-fill { height: 100%; background: #00ff00; border-radius: 2px; transition: width 0.1s linear, background 0.2s; }
#muteBtn { position:fixed; top:10px; right:10px; padding:8px 12px; background:rgba(0,0,0,0.7); border:1px solid #555; border-radius:8px; color:#fff; cursor:pointer; z-index:10; font-size:16px; }
#bossHealth { position:fixed; top:12px; left:50%; transform:translateX(-50%); width:420px; max-width:80vw; display:none; z-index:10; text-align:center; }
#bossName { font-size:16px; font-weight:bold; color:#ff4444; text-shadow:0 0 8px #000; margin-bottom:4px; }
#bossBarOuter { width:100%; height:16px; background:rgba(0,0,0,0.7); border:2px solid #ff0000; border-radius:8px; overflow:hidden; }
#bossBarFill { height:100%; width:100%; background:linear-gradient(90deg,#ff0000,#ff6600); transition:width 0.2s; }