#battle-container { width: 600px; height: 450px; background: #444; border: 4px solid #222; position: relative; margin: 20px auto; color: white; font-family: sans-serif; }
.hidden { display: none !important; }
#start-screen { display: flex; justify-content: center; align-items: center; height: 100%; }
#start-btn { padding: 20px 40px; font-size: 20px; cursor: pointer; }

#opp-side { position: absolute; top: 20px; right: 20px; text-align: right; }
#player-side { position: absolute; bottom: 180px; left: 20px; }
.hp { width: 150px; height: 10px; background: #222; border: 1px solid #fff; margin-top: 5px; }
#opp-hp, #p-hp { height: 100%; width: 100%; background: #2ecc71; transition: 0.3s; }

#controls { position: absolute; bottom: 0; width: 100%; height: 160px; background: #222; display: flex; }
#battle-log { flex: 1.5; padding: 10px; font-size: 13px; overflow-y: auto; border-right: 1px solid #444; background: #111; }
#move-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; gap: 5px; }
button { background: #333; color: white; border: 1px solid #555; cursor: pointer; border-radius: 4px; }
button:hover { background: #555; }