/* =========================================
   BATTLE UI & CINEMATIC STYLES - HOLOGRAPHIC V4
   ========================================= */

.cinematic-text { position: fixed; font-weight: 900; pointer-events: none; z-index: 10000; animation: floatUpAnim 0.8s forwards; text-shadow: 0 0 8px currentColor;}
@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; }

/* --- OVERLAY GELAP SAAT PERTEMPURAN --- */
.battle-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); 
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; justify-content: center; align-items: center; z-index: 20000;
}

/* --- KOTAK HASIL PERTEMPURAN (VICTORY / STAMINA) --- */
.battle-box {
    background: rgba(22, 27, 34, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 12px; padding: 25px;
    width: 85%; max-width: 320px; text-align: center;
    border: 1px solid var(--panel-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
.battle-box-victory { border-color: var(--cyan); box-shadow: 0 0 30px rgba(0, 234, 255, 0.2), inset 0 0 15px rgba(0, 234, 255, 0.05); }
.battle-box-stamina { border-color: var(--danger); box-shadow: 0 0 30px rgba(255, 68, 68, 0.2), inset 0 0 15px rgba(255, 68, 68, 0.05); }

.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 10px rgba(255,68,68,0.5);}
.battle-text { color: var(--text-main); font-size: 13px; line-height: 1.6; font-weight: bold; text-transform: uppercase; margin-bottom: 20px;}

.battle-icon-container { margin-bottom: 15px; }
.battle-icon { width: 65px; height: 65px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(0, 234, 255, 0.3));}
.battle-icon-stamina { width: 55px; height: 55px; object-fit: contain; margin-bottom: 10px; filter: drop-shadow(0 0 10px rgba(255, 68, 68, 0.4));}

.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: 0.2s;
}
.btn-victory { background: var(--cyan); color: black; box-shadow: 0 0 15px rgba(0, 234, 255, 0.4); }
.btn-victory:active { transform: scale(0.95); box-shadow: 0 0 25px var(--cyan); }
.btn-stamina { background: var(--danger); color: white; box-shadow: 0 0 15px rgba(255, 68, 68, 0.4); }
.btn-stamina:active { transform: scale(0.95); box-shadow: 0 0 25px var(--danger); }

/* =========================================
   CINEMATIC BATTLE ANIMATION POPUP
   ========================================= */
.cinematic-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    z-index: 9999; display: flex; justify-content: center; align-items: center;
}

.cinematic-box {
    width: 90%; max-width: 400px; 
    background: rgba(13, 17, 23, 0.8); border: 1px solid rgba(46, 204, 113, 0.4);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(46, 204, 113, 0.1); 
    border-radius: 12px; padding: 25px 20px;
    position: relative; overflow: hidden;
}

/* Garis Scanline Radar */
.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.1) 50%, transparent 60%);
    animation: scanline 4s linear infinite; pointer-events: none; z-index: 0;
}
@keyframes scanline { 0% { transform: translateY(-50%); } 100% { transform: translateY(0%); } }

.cinematic-title { text-align: center; color: var(--emerald); margin-bottom: 25px; font-size: 20px; letter-spacing: 3px; font-weight: 900; text-shadow: 0 0 10px rgba(46, 204, 113, 0.6); position: relative; z-index: 1;}
.cinematic-stage { display: flex; justify-content: space-between; align-items: center; position: relative; height: 120px; padding: 0 10px; z-index: 1;}
.cinematic-ship { height: 75px; width: 75px; object-fit: contain; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); filter: drop-shadow(0 5px 10px rgba(0,0,0,0.8));}
.cinematic-vs { font-size: 28px; font-weight: 900; color: var(--danger); position: absolute; left: 50%; transform: translateX(-50%); text-shadow: 0 0 15px rgba(255,68,68,0.8); opacity: 0; transition: opacity 0.2s ease; font-family: 'Share Tech Mono', monospace;}
.cinematic-log { text-align: center; font-size: 14px; margin-top: 25px; color: #8b949e; height: 20px; font-weight: bold; transition: color 0.2s ease; text-transform: uppercase; letter-spacing: 1px; position: relative; z-index: 1;}