/* =========================================
   BATTLE UI STYLES — CINEMATIC V5.0 (MASTERPIECE)
   ========================================= */

.cinematic-text {
    position: fixed; font-weight: 900; pointer-events: none; z-index: 10000;
    animation: floatUpAnim 0.8s forwards; text-shadow: 0 0 8px currentColor;
    will-change: transform, opacity; 
}
@keyframes floatUpAnim {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-50px); opacity: 0; }
}

.topbar-icon { width: 14px; height: 14px; vertical-align: middle; margin: 0 4px; object-fit: contain; }

/* Latar belakang radial gelap, 0% blur, 100% FPS */
.battle-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgba(18, 26, 36, 0.98) 0%, rgba(4, 6, 10, 0.98) 100%);
    display: flex; justify-content: center; align-items: center; z-index: 20000;
    /* Hardware Acceleration */
    transform: translateZ(0); backface-visibility: hidden; perspective: 1000px;
}

.battle-box {
    background: rgba(18, 22, 30, 0.95);
    border-radius: 14px; padding: 28px; width: 88%; max-width: 340px; text-align: center;
    border: 1px solid var(--panel-border); box-shadow: 0 12px 40px rgba(0,0,0,0.9);
    animation: boxIn 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
    will-change: transform, opacity;
}
@keyframes boxIn {
    0%   { opacity: 0; transform: scale(0.85) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.battle-box-victory { border-color: var(--cyan); box-shadow: 0 0 25px rgba(0,234,255,0.2); }
.battle-box-stamina { border-color: var(--danger); box-shadow: 0 0 25px rgba(255,68,68,0.2); }
.battle-box-destroy { border-color: #ff4444; box-shadow: 0 0 25px rgba(255,68,68,0.3); }

.battle-title-stamina {
    color: var(--danger); margin-bottom: 12px; font-size: 20px;
    text-transform: uppercase; font-weight: 900; letter-spacing: 1px;
    text-shadow: 0 0 12px rgba(255,68,68,0.6);
}
.battle-text { color: var(--text-main); font-size: 13px; line-height: 1.7; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; }
.battle-icon-container { margin-bottom: 16px; }
.battle-icon { width: 65px; height: 65px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(0,234,255,0.4)); }
.battle-icon-stamina { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255,68,68,0.5)); }
.modal-icon-md { width: 60px; height: 60px; object-fit: contain; }

.btn-battle-modal {
    margin-top: 10px; width: 100%; padding: 14px; border: none; border-radius: 8px; font-weight: 900;
    cursor: pointer; text-transform: uppercase; letter-spacing: 1.5px; transition: all 0.2s; font-size: 13px;
}
.btn-victory { background: var(--cyan); color: black; box-shadow: 0 0 18px rgba(0,234,255,0.5); }
.btn-victory:active { transform: scale(0.96); }
.btn-stamina { background: var(--danger); color: white; box-shadow: 0 0 18px rgba(255,68,68,0.5); }
.btn-stamina:active { transform: scale(0.96); }

.cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999;
    background: radial-gradient(circle at center, rgba(18, 26, 36, 0.98) 0%, rgba(4, 6, 10, 0.98) 100%);
    display: flex; justify-content: center; align-items: center;
    /* Hardware Acceleration */
    transform: translateZ(0); backface-visibility: hidden; perspective: 1000px;
}

.cinematic-box {
    width: 92%; max-width: 420px; position: relative; overflow: hidden;
    background: rgba(10, 14, 20, 0.97); border-radius: 14px; padding: 22px 18px;
    transform: translateZ(0); 
}

.cinematic-box::after {
    content: ''; position: absolute; top: -50%; left: 0; width: 100%; height: 200%;
    background: linear-gradient(to bottom, transparent 40%, rgba(46,204,113,0.08) 50%, transparent 60%);
    animation: scanline 3.5s linear infinite; pointer-events: none; z-index: 0;
    will-change: transform;
}
@keyframes scanline { 0% { transform: translateY(-50%); } 100% { transform: translateY(0%); } }

.cinematic-box::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(46,204,113,0.06) 0%, transparent 40%), linear-gradient(315deg, rgba(46,204,113,0.04) 0%, transparent 40%);
    pointer-events: none; z-index: 0;
}

.cinematic-ship { width: 75px; height: 75px; object-fit: contain; }

#battle-combat-log { min-height: 54px; font-size: 11px; font-family: 'Share Tech Mono', 'Courier New', monospace; line-height: 1.75; letter-spacing: 0.5px; }
#battle-combat-log div { opacity: 1; transition: opacity 0.4s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ScaleX HP Bar (Kunci dari Smooth FPS) */
.cin-hp-track { width: 70px; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); }
.cin-hp-fill { 
    height: 100%; width: 100%; border-radius: 2px; 
    transform-origin: left center; /* Wajib ada untuk scaleX */
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s; 
    will-change: transform; 
} 

#sys-loot-toast { border-left: 3px solid var(--cyan); }