body { margin: 0; background: #050505; color: white; font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; }
.hidden { display: none !important; }

#home-screen { text-align: center; background: #111; padding: 40px; border: 2px solid #00f2ff; border-radius: 20px; box-shadow: 0 0 20px #00f2ff; }
.house-icon { font-size: 80px; }
#shop { background: #1a1a1a; padding: 20px; border-radius: 10px; margin: 20px 0; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

button { padding: 10px; cursor: pointer; background: #222; color: #fff; border: 1px solid #00f2ff; transition: 0.2s; }
button:hover { background: #00f2ff; color: #000; }
.main-btn { font-size: 24px; padding: 15px 40px; background: #00f2ff; color: #000; font-weight: bold; border: none; margin-top: 20px; }

#game-container { position: relative; border: 4px solid #333; }
.top-ui { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; pointer-events: none; }

.hp-bar-container { width: 200px; }
#hp-gauge-bg { width: 100%; height: 10px; background: #444; margin-top: 5px; }
#hp-gauge-fill { width: 100%; height: 100%; background: #00ff00; transition: width 0.3s; }

#boss-ui { position: absolute; top: 50px; left: 200px; right: 200px; text-align: center; }
#boss-hp-bar { height: 10px; background: #333; border: 1px solid #fff; }
#boss-hp-inner { width: 100%; height: 100%; background: #ff0055; }

canvas { background: #000; display: block; }
#controls { position: absolute; bottom: 5px; width: 100%; text-align: center; font-size: 12px; color: #777; }