#scene-battle{display:flex;flex-direction:column;padding:10px;gap:0;background:radial-gradient(ellipse at 50% 30%,rgba(60,20,20,0.3) 0%,transparent 60%),var(--bg-dark)}
.battle-top{display:flex;align-items:flex-start;justify-content:space-between;padding:8px 16px;flex:0 0 auto;min-height:120px}

/* Player HUD */
.battle-player-hud{background:var(--bg-card);border:1px solid #333;border-radius:10px;padding:12px 16px;min-width:220px;box-shadow:0 4px 12px rgba(0,0,0,0.4)}
.player-hud-name{font-family:var(--font-heading);font-size:0.9rem;color:var(--gold);letter-spacing:1px;margin-bottom:6px}
.player-hud-bars{display:flex;flex-direction:column;gap:4px}
.hud-bar{display:flex;align-items:center;gap:8px;font-size:0.8rem}
.hud-bar-label{width:20px;text-align:center}
.hud-bar-track{flex:1;height:14px;background:#111;border-radius:7px;overflow:hidden;border:1px solid #333;position:relative}
.hud-bar-fill{height:100%;border-radius:7px;transition:width 0.5s ease}
.hud-bar-fill.hp{background:linear-gradient(90deg,#27ae60,#2ecc71)}
.hud-bar-fill.hp.low{background:linear-gradient(90deg,#c0392b,#e74c3c)}
.hud-bar-fill.block{background:linear-gradient(90deg,#666,#888)}
.hud-bar-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;color:#fff;text-shadow:0 1px 2px #000}
.player-hud-resources{display:flex;gap:12px;margin-top:8px;font-size:0.8rem}
.resource-item{display:flex;align-items:center;gap:4px}
.resource-item img{width:16px;height:16px;image-rendering:pixelated}

/* Status effects on player HUD */
.player-hud-statuses{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.status-icon{width:28px;height:28px;background:#222;border:1px solid #555;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:0.75rem;position:relative;transition:all var(--transition-fast)}
.status-icon:hover{border-color:var(--gold);transform:scale(1.15)}
.status-icon.poison{border-color:var(--poison);background:rgba(155,89,182,0.15)}
.status-icon.strength{border-color:#e67e22;background:rgba(230,126,34,0.15)}
.status-icon.weakened{border-color:#e74c3c;background:rgba(231,76,60,0.15)}
.status-count{position:absolute;bottom:-2px;right:-2px;background:#000;font-size:0.55rem;padding:0 3px;border-radius:3px;color:var(--gold);font-weight:700}

/* Enemy area */
.battle-enemy-area{display:flex;gap:16px;align-items:flex-end;justify-content:center;flex:1}
.enemy-card{text-align:center;transition:all var(--transition-med);position:relative;cursor:pointer}
.enemy-card.targeted{filter:brightness(1.2)}
.enemy-card.targeted .enemy-sprite{filter:drop-shadow(0 0 12px rgba(255,215,0,0.5))}
.enemy-card.dead{opacity:0.3;filter:grayscale(1);pointer-events:none}
.enemy-sprite{width:96px;height:96px;image-rendering:pixelated;transition:transform 0.15s ease;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.6))}
.enemy-card:hover .enemy-sprite{transform:scale(1.05)}
.enemy-card.shake .enemy-sprite{animation:enemyShake 0.3s ease}
.enemy-name{font-family:var(--font-heading);font-size:0.75rem;color:var(--text-dim);margin-top:4px;letter-spacing:1px}
.enemy-hp-bar{width:100px;height:12px;background:#222;border-radius:6px;overflow:hidden;margin:4px auto 0;border:1px solid #444;position:relative;box-shadow:inset 0 1px 3px rgba(0,0,0,0.5)}
.enemy-hp-fill{height:100%;background:linear-gradient(90deg,#c0392b,#e74c3c);border-radius:6px;transition:width 0.5s ease}
.enemy-hp-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:700;color:#fff;text-shadow:0 1px 2px #000}
.enemy-intent{margin-top:4px;font-size:0.7rem;padding:2px 8px;border-radius:4px;display:inline-block;animation:fadeIn 0.3s ease}
.enemy-intent.attack{background:rgba(231,76,60,0.3);color:#e74c3c;border:1px solid rgba(231,76,60,0.4)}
.enemy-intent.defend{background:rgba(149,165,166,0.3);color:#bdc3c7;border:1px solid rgba(149,165,166,0.4)}
.enemy-intent.buff{background:rgba(155,89,182,0.3);color:#bb6bd9;border:1px solid rgba(155,89,182,0.4)}
.enemy-intent.heal{background:rgba(46,204,113,0.3);color:#2ecc71;border:1px solid rgba(46,204,113,0.4)}

/* Enemy status badges */
.enemy-statuses{display:flex;gap:3px;justify-content:center;margin-top:3px}
.enemy-status{font-size:0.6rem;padding:1px 5px;border-radius:3px;font-weight:700}
.enemy-status.poison{background:rgba(155,89,182,0.3);color:#bb6bd9;border:1px solid rgba(155,89,182,0.3)}
.enemy-status.block{background:rgba(149,165,166,0.3);color:#bdc3c7;border:1px solid rgba(149,165,166,0.3)}
.enemy-status.buffed{background:rgba(230,126,34,0.3);color:#e67e22;border:1px solid rgba(230,126,34,0.3)}
.enemy-status.weakened{background:rgba(231,76,60,0.3);color:#e74c3c;border:1px solid rgba(231,76,60,0.3)}

/* Dice tray */
.battle-middle{display:flex;align-items:center;justify-content:center;gap:20px;padding:10px 16px;flex:0 0 auto}
.battle-dice-tray{display:flex;gap:10px;align-items:center;justify-content:center;background:rgba(20,20,30,0.6);border:1px solid #333;border-radius:10px;padding:10px 20px;min-height:70px;box-shadow:inset 0 2px 8px rgba(0,0,0,0.4)}
.die-slot{width:56px;height:56px;position:relative;cursor:pointer;transition:all var(--transition-fast);border-radius:8px}
.die-slot img{width:100%;height:100%;image-rendering:pixelated;filter:drop-shadow(0 3px 6px rgba(0,0,0,0.6));transition:all var(--transition-fast)}
.die-slot:hover img{transform:scale(1.1);filter:drop-shadow(0 0 10px rgba(255,215,0,0.5)) drop-shadow(0 3px 6px rgba(0,0,0,0.6))}
.die-slot.used{opacity:0.3;pointer-events:none}
.die-slot.selected{outline:3px solid var(--gold);border-radius:8px;box-shadow:0 0 16px rgba(255,215,0,0.5);background:rgba(255,215,0,0.1)}
.die-slot.selected img{transform:scale(1.08)}
.die-slot.rolling img{animation:diceRoll 0.4s ease}
.die-slot[draggable="true"]{cursor:grab}
.die-slot[draggable="true"]:active{cursor:grabbing}
.die-face-overlay{position:absolute;inset:0;pointer-events:none;display:none}
.die-value-num{position:absolute;bottom:0;right:2px;font-size:0.6rem;font-weight:900;color:rgba(255,255,255,0.7);text-shadow:0 1px 2px #000;pointer-events:none}

/* Battle info / turn counter */
.battle-info{font-family:var(--font-heading);font-size:0.85rem;color:var(--text-dim);text-align:center;letter-spacing:1px;background:rgba(0,0,0,0.3);padding:4px 16px;border-radius:6px;border:1px solid #222}
.battle-info .turn-num{color:var(--gold);font-weight:700;font-size:1rem}

/* Hand and actions */
.battle-bottom{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 16px 12px;flex:1 1 auto;justify-content:flex-end}
.battle-hand{display:flex;gap:8px;justify-content:center;flex-wrap:nowrap;overflow-x:auto;padding:6px 10px;max-width:100%}
.battle-actions{display:flex;gap:10px;justify-content:center}
.battle-fx-layer{position:absolute;inset:0;pointer-events:none;z-index:50}

/* Damage numbers */
.damage-number{position:absolute;font-family:var(--font-heading);font-size:1.8rem;font-weight:900;color:#ff4444;text-shadow:0 2px 4px rgba(0,0,0,0.8),0 0 10px rgba(255,0,0,0.4);pointer-events:none;animation:damageFloat 0.8s ease-out forwards}
.damage-number.heal{color:var(--hp-green);text-shadow:0 0 10px rgba(46,204,113,0.4)}
.damage-number.block{color:var(--block-gray);text-shadow:0 0 10px rgba(149,165,166,0.4)}

/* Screen flash */
.screen-flash{position:absolute;inset:0;pointer-events:none;animation:flashFade 0.2s ease-out}
.screen-flash.red{background:rgba(200,0,0,0.15)}
.screen-flash.white{background:rgba(255,255,255,0.1)}
.screen-flash.gold{background:rgba(255,215,0,0.1)}

/* Card play animation: fly to center */
.game-card.card-played{animation:cardFlyToCenter 0.4s ease-in forwards;pointer-events:none}
@keyframes cardFlyToCenter{
    0%{transform:translateY(0) scale(1);opacity:1}
    50%{transform:translateY(-120px) scale(1.3);opacity:1}
    80%{transform:translateY(-120px) scale(1.4);opacity:0.8;filter:brightness(2)}
    100%{transform:translateY(-120px) scale(0.3);opacity:0}
}

/* Dice roll bounce animation */
.die-slot.rolling img{animation:diceBounce 0.5s cubic-bezier(0.36,0.07,0.19,0.97)}
@keyframes diceBounce{
    0%{transform:translateY(0) rotate(0deg) scale(0.5);opacity:0}
    30%{transform:translateY(-20px) rotate(180deg) scale(1.1);opacity:1}
    50%{transform:translateY(5px) rotate(270deg) scale(0.95)}
    70%{transform:translateY(-8px) rotate(340deg) scale(1.05)}
    100%{transform:translateY(0) rotate(360deg) scale(1)}
}

/* Heal pulse on HP bar */
.hud-bar-fill.hp.healing{animation:healPulse 0.6s ease}
@keyframes healPulse{0%{filter:brightness(1)}30%{filter:brightness(1.8) hue-rotate(-20deg)}100%{filter:brightness(1)}}

/* Low HP pulse */
.hud-bar-fill.hp.low{animation:hpLowPulse 1s infinite ease-in-out}
@keyframes hpLowPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.4)}}

/* Buff/debuff icon pop-in */
.enemy-status{animation:statusPopIn 0.3s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes statusPopIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}

/* Status icon on player HUD pop animation */
.status-icon{animation:statusPopIn 0.3s cubic-bezier(0.34,1.56,0.64,1)}

/* Intent attack type bounce */
.enemy-intent.attack{animation:intentBounce 1.5s infinite ease-in-out}
@keyframes intentBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* Enemy death animation */
.enemy-card.dead{animation:enemyDeath 0.6s ease-in forwards}
@keyframes enemyDeath{
    0%{opacity:1;transform:scale(1) rotate(0deg)}
    50%{opacity:0.5;transform:scale(0.5) rotate(180deg)}
    100%{opacity:0;transform:scale(0) rotate(360deg)}
}

/* Screen shake for enemy attack */
.screen-flash.shake{animation:screenShake 0.3s ease}
@keyframes screenShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px) translateY(2px)}40%{transform:translateX(6px) translateY(-2px)}60%{transform:translateX(-4px) translateY(1px)}80%{transform:translateX(4px) translateY(-1px)}}

@keyframes enemyShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes damageFloat{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(-30px) scale(1.2)}100%{opacity:0;transform:translateY(-60px) scale(0.8)}}
@keyframes flashFade{0%{opacity:1}100%{opacity:0}}

@media(max-width:640px){
    .battle-top{flex-direction:column;gap:6px;padding:6px 8px;min-height:auto}
    .battle-player-hud{min-width:auto;width:100%;padding:8px 12px}
    .player-hud-name{font-size:clamp(0.75rem,2.5vw,0.9rem)}
    .hud-bar-track{height:12px}
    .enemy-card .enemy-sprite{width:64px;height:64px}
    .enemy-hp-bar{width:80px;height:10px}
    .enemy-name{font-size:clamp(0.6rem,2vw,0.75rem)}
    .battle-dice-tray{min-height:50px;padding:6px 10px;gap:6px}
    .die-slot{width:40px;height:40px}
    .battle-hand{flex-wrap:wrap;gap:4px;max-width:100%;overflow-x:visible}
    .game-card{width:100px;min-width:100px}
    .battle-actions{gap:6px}
    .btn-action{padding:8px 14px;font-size:clamp(0.75rem,2.5vw,0.9rem);min-height:44px}
    .damage-number{font-size:1.2rem}
}