.battle-container{background:linear-gradient(#1c1c1c,#2e2e2e);justify-content:center;align-items:center;min-height:100vh;padding:40px 10px;display:flex}.battle-box{color:#fff;background:#282828f2;border-radius:16px;width:100%;max-width:700px;padding:30px;font-family:Segoe UI,sans-serif;box-shadow:0 0 30px #00000080}.character{text-align:center;padding:10px}.character img{border-radius:12px;width:120px;transition:opacity .3s;box-shadow:0 0 8px #0000004d}.hp-bar-bg{background:#555;border-radius:6px;width:100%;height:14px;margin-top:6px}.hp-bar{background:linear-gradient(90deg,#32cd32,green);border-radius:6px;height:100%;transition:width .5s ease-in-out}.battle-log{color:#ddd;background:#ffffff14;border-radius:8px;max-height:120px;margin-top:20px;padding:12px;font-size:14px;line-height:1.4;overflow-y:auto}.battle-log-entry{animation:.4s fadeIn}button.attack-btn{color:#222;cursor:pointer;background:gold;border:none;border-radius:6px;margin-top:15px;padding:12px 24px;font-weight:700;transition:transform .2s;box-shadow:0 4px 10px #ffd70066}button.attack-btn:hover{transform:scale(1.05)}button.attack-btn:disabled{opacity:.5;cursor:not-allowed}@keyframes shake{0%{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}to{transform:translate(0)}}.shake{animation:.3s shake}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.victory-message{animation:.5s ease-out popIn}.start-btn{color:#fff;cursor:pointer;background-color:#28a745;border:none;border-radius:10px;padding:12px 20px;font-size:18px;transition:background-color .3s}.start-btn:hover{background-color:#218838}.blood-explosion{position:relative}.blood-explosion:after{content:"";z-index:5;background:radial-gradient(circle,red 30%,#8b0000 70%,#0000 100%);border-radius:50%;width:120px;height:120px;animation:.6s ease-out forwards bloodBurst;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(0)}@keyframes bloodBurst{0%{opacity:1;transform:translate(-50%,-50%)scale(0)}70%{opacity:.9;transform:translate(-50%,-50%)scale(1.2)}to{opacity:0;transform:translate(-50%,-50%)scale(2.5)}}.fade-out{animation:1s forwards fadeOut}@keyframes fadeOut{to{opacity:0;transform:scale(1.3)}}