/* battle.css - Battle field layout, HP/mana bars, turn indicators */

#scene-battle {
    background: radial-gradient(ellipse at 50% 60%, rgba(20,20,50,0.8) 0%, var(--bg-dark) 80%);
    justify-content: flex-start;
    padding: 8px;
}

.battle-layout {
    width: 100%;
    max-width: 1100px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 auto;
}

/* Top bar: enemy info */
.battle-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    min-height: 44px;
}
.battle-player-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.battle-name {
    font-size: 14px;
    font-weight: 700;
}
.battle-hp-bar {
    width: 160px;
    height: 14px;
    background: rgba(0,0,0,0.5);
    border-radius: 7px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
}
.battle-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #ee3344, #ff5566);
    transition: width 0.4s;
    border-radius: 7px;
}
.battle-hp-fill.shield {
    background: linear-gradient(90deg, var(--shield-gray), #99bbdd);
}
.battle-hp-text {
    position: absolute;
    top: 0; left: 0; right: 0;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.battle-mana-bar {
    display: flex;
    gap: 3px;
    align-items: center;
}
.mana-crystal {
    width: 18px;
    height: 18px;
    object-fit: contain;
    transition: opacity 0.2s;
}
.mana-crystal.empty { opacity: 0.25; filter: grayscale(1); }
.mana-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--mana-blue);
    margin-left: 4px;
}
.battle-turn-info {
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
}
.battle-turn-num {
    font-size: 18px;
    font-weight: 900;
    color: var(--gold);
}

/* Field zones */
.battle-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}
.field-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px;
    min-height: 60px;
    border-radius: 8px;
    position: relative;
}
.field-zone.enemy-field {
    background: rgba(100,30,30,0.1);
    border: 1px solid rgba(200,50,50,0.1);
    min-height: 140px;
}
.field-zone.player-field {
    background: rgba(30,30,100,0.1);
    border: 1px solid rgba(50,50,200,0.1);
    min-height: 140px;
}
.field-zone.trap-zone {
    min-height: 50px;
    gap: 10px;
}
.trap-zone .game-card {
    width: 60px;
    height: 45px;
}
.field-zone-label {
    position: absolute;
    top: 2px;
    left: 8px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.15);
}
.field-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    margin: 0 20%;
}

/* Monster slot on field */
.field-slot {
    position: relative;
}
.field-slot .game-card {
    transition: all 0.2s;
}
.field-slot .game-card.attack-target {
    border-color: #ff3333;
    box-shadow: 0 0 12px rgba(255,0,0,0.4);
    animation: targetPulse 0.8s ease-in-out infinite;
}
.field-slot .game-card.can-attack {
    border-color: #55ff55;
    box-shadow: 0 0 8px rgba(85,255,85,0.3);
}
.field-slot .game-card.summoning-sick {
    opacity: 0.7;
}
@keyframes targetPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(255,0,0,0.3); }
    50% { box-shadow: 0 0 18px rgba(255,0,0,0.6); }
}

/* Status effects on field monsters */
.status-icons {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
}
.status-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.2);
}

/* Hand area */
.battle-hand {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    min-height: 130px;
    background: rgba(0,0,0,0.2);
    border-radius: 8px 8px 0 0;
    overflow-x: auto;
    flex-shrink: 0;
}
.battle-hand .game-card {
    flex-shrink: 0;
}

/* Side panels */
.battle-side-left, .battle-side-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.battle-side-left { left: 8px; }
.battle-side-right { right: 8px; }

/* Action buttons */
.battle-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
    justify-content: center;
    flex-shrink: 0;
}
.btn-end-turn {
    background: linear-gradient(135deg, #554400, #887700);
    color: #fff;
    padding: 8px 24px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
    border: 1px solid #aa9900;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-end-turn:hover { background: linear-gradient(135deg, #665500, #998800); box-shadow: 0 0 12px rgba(255,215,0,0.3); }
.btn-end-turn[disabled] { opacity: 0.4; pointer-events: none; }
.phase-indicator {
    font-size: 12px;
    color: var(--gold);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Turn banner */
.turn-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(255,215,0,0.5), 0 2px 8px rgba(0,0,0,0.8);
    z-index: 40;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.turn-banner.show {
    opacity: 1;
    animation: bannerPop 0.4s ease-out;
}
@keyframes bannerPop {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    60% { transform: translate(-50%, -50%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Damage floaters */
.damage-float {
    position: absolute;
    font-size: 22px;
    font-weight: 900;
    pointer-events: none;
    z-index: 30;
    animation: floatUp 0.8s ease-out forwards;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.damage-float.dmg { color: #ff4444; }
.damage-float.heal { color: #44ff44; }
.damage-float.shield { color: var(--shield-gray); }
.damage-float.element { color: var(--gold); font-size: 16px; }
@keyframes floatUp {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-40px) scale(0.7); }
}

/* Enemy hand (face down) */
.enemy-hand {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    min-height: 40px;
    flex-shrink: 0;
}
.enemy-hand-card {
    width: 32px;
    height: 44px;
    background-image: url('../assets/cards/red_back_intricate.png');
    background-size: cover;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    border: 1px solid rgba(100,100,150,0.2);
}

/* Battle log */
.battle-log {
    position: absolute;
    top: 50px;
    right: 8px;
    width: 200px;
    max-height: 200px;
    overflow-y: auto;
    background: rgba(0,0,0,0.4);
    border-radius: 6px;
    padding: 6px;
    font-size: 10px;
    color: var(--text-dim);
    z-index: 5;
}
.log-entry { padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.log-entry.player-action { color: #88aaff; }
.log-entry.enemy-action { color: #ff8888; }
.log-entry.system { color: var(--gold); }

/* Pre-battle intro */
.pre-battle {
    text-align: center;
    animation: fadeInUp 0.5s ease-out;
}
.pre-battle-enemy { font-size: 28px; font-weight: 900; margin-bottom: 8px; }
.pre-battle-element { font-size: 14px; color: var(--text-dim); margin-bottom: 20px; }
.pre-battle-art { width: 100px; height: 100px; object-fit: contain; margin-bottom: 16px; }
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@media(max-width:640px){
    .battle-top-bar{flex-wrap:wrap;gap:4px;padding:4px 6px;min-height:auto}
    .battle-hp-bar{width:100px;height:14px}
    .battle-hp-text{font-size:10px;line-height:14px}
    .battle-name{font-size:13px}
    .battle-turn-num{font-size:16px}
    .battle-turn-info{font-size:11px}
    .mana-crystal{width:16px;height:16px}
    .mana-text{font-size:12px}
    .field-zone{gap:4px;padding:2px;min-height:50px}
    .field-zone.enemy-field,.field-zone.player-field{min-height:90px}
    .field-zone-label{font-size:8px}
    .battle-hand{min-height:110px;gap:5px;padding:4px 4px;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
    .battle-hand .game-card{flex-shrink:0;scroll-snap-align:center}
    .battle-actions{gap:6px;padding:6px 0}
    .btn-end-turn{padding:14px 28px;font-size:16px;font-weight:900;min-height:56px;min-width:140px;border-radius:10px;background:linear-gradient(135deg,#665500,#aa8800);box-shadow:0 4px 16px rgba(255,215,0,0.3);text-transform:uppercase;letter-spacing:1px}
    .btn-end-turn:active{transform:scale(0.96)}
    .battle-log{display:none}
    .combat-log-mini{display:none!important}
    .enemy-hand{min-height:30px;gap:3px;padding:2px}
    .enemy-hand-card{width:22px;height:30px}
    .damage-float{font-size:18px}
    .pre-battle-enemy{font-size:22px}
    .pre-battle-art{width:80px;height:80px}
    .phase-indicator{font-size:11px}
    .trap-zone{min-height:36px}
    .trap-zone .game-card{width:50px;height:38px}
    .status-icon{width:12px;height:12px;font-size:7px}
}
/* Extra-small screens (375px and below) */
@media(max-width:400px){
    .battle-top-bar{padding:3px 4px;gap:3px}
    .battle-hp-bar{width:85px;height:12px}
    .battle-hp-text{font-size:9px;line-height:12px}
    .battle-name{font-size:12px}
    .mana-crystal{width:14px;height:14px}
    .mana-text{font-size:11px}
    .btn-end-turn{padding:12px 24px;font-size:15px;min-height:52px;min-width:130px}
    .field-zone.enemy-field,.field-zone.player-field{min-height:80px}
}