/* css/battle.css - TAM VE HATASIZ NİHAİ SÜRÜM */

#battle-screen {
    /*background-image: url('../images/utils/colony_zone_bg.webp'); */
    background-size: cover; 
    background-position: center;
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#arena {
    position: relative; 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    width: 100%; 
    height: 130%; 
    padding: 0 5%; 
    box-sizing: border-box;
}

/* --- TUR SAYACI --- */
#turn-counter-box {
    /* 1. GÖRSELİ GİYDİR (Dosya yolunu kontrol et) */
    background: url('../images/ui/turn_frame.webp') no-repeat center center;
    background-size: 55% 100% !important; /* Görseli kutu boyutuna yayar */

    /* 2. MANUEL BOYUT KONTROLÜ (Bu rakamlarla oynayarak büyütebilirsin) */
    width: 60% !important;  
    height: 50% !important;
    /* ------------------------------------------------------------- */

    /* 3. WEB GÖRÜNÜMÜNÜ SİL */
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;

    /* 4. İÇERİK HİZALAMA */
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
}


.turn-label {
    font-size: 0.7em;
    color: #aaa;
    letter-spacing: 4px;
    text-transform: uppercase;
	font-family: 'Cinzel', serif;
	margin-right: -5px;
}

#turn-count-display {
    font-size: 1.5em;
    font-weight: bold;
    color: #f0e68c;
    text-shadow: 0 0 15px orange, 2px 2px 2px #000;
	font-family: 'Cinzel', serif;
}

.event-detail {
    display: block;      /* Alt satırda kalmasını garanti eder */
    font-size: 1.2em;    /* İSTEDİĞİN EM DEĞERİNİ BURADAN DEĞİŞTİR */
    color: #a89373;      /* Bir tık daha sönük bir altın/pirinç tonu */
    margin-top: -2px;
    font-style: italic;  /* Detay olduğu belli olsun diye eğik yaptık */
}


/* --- KARAKTER İSİMLERİ VE HP ÜST KATMANI --- */
#hero-name {
    color: #ffd700 !important; 
	font-family: 'Cinzel', serif;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 22px; 
    text-shadow: 2px 2px 4px #000, 0 0 10px rgba(255, 215, 0, 0.5);
	text-transform: uppercase;
}

#monster-name {
    color: #ff4d4d !important; 
	font-family: 'Cinzel', serif;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 22px; 
    text-shadow: 2px 2px 4px #000, 0 0 10px rgba(255, 77, 77, 0.5);
}

.hp-overlay-container { 
    position: absolute; 
    bottom: 295px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 160px; 
    z-index: 30; 
    text-align: center; 
}

/* İçerideki bar kapsayıcılarını çerçeveye göre hizala */
.hp-bar-container {
    width: 100%;
    height: 12px; /* Çerçeve kalınlığına göre ayarla */
    background-color: rgba(0, 0, 0, 0.6); /* Barın boş kısmının rengi */
    border: 1px solid #1a150e; /* Metalin içindeki derinlik çizgisi */
	border-radius: 20px;
    margin-bottom: 4px;
    overflow: hidden;
}

/* Barın kendisi (Yeşil veya Kırmızı kısım) */
.hp-bar {
    /* Senin mevcut transition ve renk kodların burada çalışmaya devam eder */
    box-shadow: inset 0 0 8px rgba(0,0,0,0.5); /* Barın içine gölge vererek derinlik katar */
}

/* Sayıların (100/100) çerçeve üzerinde daha okunaklı durması için */
#hero-hp-text, #hero-rage-text, #monster-hp-text {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 900;
    color: #fff9;
    text-shadow: 1px 1px 3px #000;
    margin-top: -2px;
}

/* BLOK GÖSTERGESİ */
.block-display {
    position: absolute;
    left: -60px;
    bottom: 35px;
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(0, 0, 40, 0.95);
    border: 2px solid #3498db;
    border-radius: 20px;
    padding: 8px 14px;
    color: #3498db;
    font-weight: bold;
    font-size: 1.1em;
    box-shadow: 0 0 15px rgba(52, 152, 219, 0.6);
    z-index: 100;
}

/* --- CANAVAR NİYET (INTENTION) --- */
.intention-overlay {
    position: absolute; 
    /* Canavarın kafa hizasına (alt kısımdan yukarıya) yerleştirir */
    bottom: 80%; 
    left: 51%; 
    z-index: 100;
    width: 100px; 
    height: 100px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.6); 
    border: 0px solid rgba(240, 230, 140, 0.5); 
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 215, 0, 0.2);
    
    /* Başlangıç durumu: Görünmez ve aşağıda küçük */
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 20px) scale(0); 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

/* Aktifleştiğinde: Yukarı süzülür ve büyür */
.intention-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1.1);
}

.intention-overlay img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* İkonun arkasındaki beyazlığı temizlemek için (isteğe bağlı) */
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

/* Floating Text için Mor Parlama Stili */
.skill-text {
    color: #df9cff !important; /* Açık mor / lila */
    font-size: 1.8em !important;
    font-weight: 900 !important;
    text-shadow: 
        0 0 10px #a349a4, 
        0 0 20px #800080, 
        2px 2px 2px #000 !important;
    text-transform: uppercase;
    font-family: 'Cinzel', serif;
}

/* --- ACTION BAR (ALT KONTROL PANELİ) --- */
#battle-controls {
    width: 100%; 
    height: 30%; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    background: linear-gradient(to top, rgba(0,0,0,1) 10%, transparent); 
    padding-bottom: 30px;
    z-index: 100;
}

/* --- KONTEYNIRLARI SERBEST BIRAK (Koordinat sistemine hazırlık) --- */
#action-bar {
    position: relative;
    width: 900px; 
    height: 180px;
    background: url('../images/ui/action_frame.webp') no-repeat center center;
    background-size: contain;
    margin: 0 auto;
}

.separator {
    display: none; /* Görselde zaten kuru kafa olduğu için bunu gizliyoruz */
}

/* Flex yapılarının koordinat sistemini bozmaması için etkisiz hale getiriyoruz */
.basic-skills-container, #skill-bar-container {
    display: block !important; 
    position: static;
}

/* Tüm slotlar için ortak temel ayarlar */
.skill-slot {
    position: absolute !important; /* ARTIK HEPSÄ° BAÄžIMSIZ */
    width: 70px !important; 
    height: 70px !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: none !important;
	overflow: visible !important; /* hidden yerine visible yaptık: Rakamlar artık görünür */
    z-index: 10; /* Çerçevenin (action_frame) üzerinde durmasını sağlar */
}

.skill-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	pointer-events: none !important; /* Resmin üzerine tıklandığında sürüklenmesini önler */
}

/* --- SLOT KALİBRASYON PANELİ (Buradaki rakamları tek tek değiştir) --- */
/* SOL GRUP (Basic Skills) */
#btn-basic-attack { left: 10%; top: 34%;}
#btn-basic-defend { left: 21.8%; top: 34%;}
/* SAĞ GRUP (Special Skills 1-4) */
/* nth-child(1) '1' numaralı kutuyu, nth-child(4) '4' numaralı kutuyu temsil eder */
#skill-bar-container .skill-slot:nth-child(1) { left: 46.4%; top: 34%; }
#skill-bar-container .skill-slot:nth-child(2) { left: 58.2%; top: 34%; }
#skill-bar-container .skill-slot:nth-child(3) { left: 70.2%; top: 34%; }
#skill-bar-container .skill-slot:nth-child(4) { left: 82.3%; top: 34%; }

/* Engelli (Disabled) Görünümü */
.skill-slot.disabled {
    opacity: 0.4;
    filter: grayscale(100%);
}

/* Harf ve rakamları gizlemeye devam ediyoruz */
.skill-slot .key-hint {
    display: none !important;
}

/* COOLDOWN */
.cooldown-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 0%;
    background-color: rgba(0, 0, 0, 0.8); z-index: 15;
    display: flex; justify-content: center; align-items: center;
    transition: height 0.3s ease;
    border-radius: 8px;
}
.cooldown-text { color: #fff; font-weight: bold; font-size: 1.6em; text-shadow: 0 0 8px #ff0000; }

/* --- TOOLTIP --- */
.skill-tooltip {
    visibility: hidden; 
    position: absolute; 
    bottom: 90px; 
    left: 50%; 
    transform: translateX(-50%);
    width: 240px; 
    background-color: rgba(5, 5, 5, 0.98); 
    border: 1px solid #f0e68c;
    color: #fff; 
    padding: 15px; 
    border-radius: 8px; 
    text-align: left; 
    font-size: 0.95em;
    z-index: 1000; 
    opacity: 0; 
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 10px 40px #000;
    pointer-events: none;
}
.skill-slot:hover .skill-tooltip { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(-5px); }

/* --- YENİ GENİŞLETİLMİŞ ÇERÇEVE (7 SLOT) --- */
#action-bar.expanded-bar {
    /* Buraya yeni 5'li çerçeve görselinin yolunu koy */
    background-image: url('../images/ui/action_frame5.webp'); 
}
/* 1. Boyut Küçültme: Bar genişlediğinde tüm slotları otomatik ufalt */
.expanded-bar .skill-slot {
    width: 65px !important;  /* 75px -> 65px'e düştü (Görseline göre ayarla) */
    height: 65px !important;
}
/* 2. İnce Ayar Koordinatları (Küçülmüş slotlara göre yeni yerleşim) */
/* Rakamları action_frame5.webp'deki deliklere göre konsoldan (F12) düzenle */
.expanded-bar #btn-basic-attack { left: 8.7%; top: 36%; }
.expanded-bar #btn-basic-defend { left: 19.1%; top: 36%; }

/* Sağ taraftaki 5 yetenek (1-5) */
.expanded-bar #skill-bar-container .skill-slot:nth-child(1) { left: 41.1%; top: 36%; }
.expanded-bar #skill-bar-container .skill-slot:nth-child(2) { left: 51.5%; top: 36%; }
.expanded-bar #skill-bar-container .skill-slot:nth-child(3) { left: 62.2%; top: 36%; }
.expanded-bar #skill-bar-container .skill-slot:nth-child(4) { left: 73%; top: 36%; }
.expanded-bar #skill-bar-container .skill-slot:nth-child(5) { left: 83.7%; top: 36%; }

/* --- ARENA VE KARAKTERLER --- */
.character-display {
    position: relative; 
    width: 45%; 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: flex-end; 
    overflow: visible;
}

.character-display img {
    max-height: 290px; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
}
.monster-block {
    left: auto !important;
    right: -55px; /* Kahramanın tam tersi yönü */
    background-color: rgba(60, 0, 0, 0.9) !important; /* Düşman için koyu kırmızı/kahve */
    border: 2px solid #ff4d4d !important;
    color: #ff4d4d !important;
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.5) !important;
}

.monster-block i {
    font-size: 1.8rem; /* Kalkanı biraz büyüttük ki içine rakam sığsın */
}

/* Kalkanın hafif titreme animasyonu (Savunmada olduğunu belli eder) */
.monster-block.active-shield {
    animation: shield-pulse 2s infinite ease-in-out;
}

@keyframes shield-pulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 20px rgba(255, 77, 77, 0.8); }
    100% { transform: scale(1); opacity: 0.8; }
}
#skill-battle-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(40, 10, 10, 0.85); /* Hafif kırmızımsı koyu şeffaflık */
    backdrop-filter: blur(4px); /* Arkayı bulanıklaştırır, çok profesyonel durur */
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    border: 2px solid #ff4d4d;
}

.lock-content {
    color: #ff4d4d;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    text-align: center;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px #000;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Kilit açıkken alttaki slotlara tıklanmasın */
#skill-battle-overlay:not(.hidden) {
    display: flex !important;
}
#inventory-battle-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 1, 1, 0.5); /* Skill Book'tan biraz daha koyu kırmızı */
    backdrop-filter: blur(0px);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 2px solid #ff4d4d;
}

#inventory-battle-overlay:not(.hidden) {
    display: flex !important;
}

/* Slotların kilitli olduğunu belli eden ekstra görsel dokunuş */
.locked-slot {
    filter: grayscale(100%) brightness(0.6);
    cursor: default !important;
}
#exhaustion-system {
    position: absolute;
    left: 14.5%;
    bottom: 8%;
    /* GÖRSEL ORANINA GÖRE BOYUT (Buradaki rakamlarla büyütüp küçültebilirsin) */
    width: 5% !important; 
    height: 40% !important; 
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1000;
	background-repeat: no-repeat !important;
}

.exhaustion-bar-wrapper {
    width: 100%;
    height: 100%;
    background-color: transparent !important;
    border: none !important;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column-reverse;
    /* Alt katmandaki resmi tamamen kapattık */
    background-image: none !important; 
}

.exhaustion-bar-wrapper::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    
    /* KRİTİK: inherit satırını SİLDİK. Sadece değişken kalsın */
    background-image: var(--current-frame); 
    
    background-repeat: no-repeat !important;
    background-position: center center;
    background-size: 100% 100%;
    z-index: 10;
    pointer-events: none;
	background-size: contain !important;
}

#exhaustion-fill-sari, #exhaustion-fill-mor {
    position: absolute !important;
    bottom: 11% !important; /* Tünel dibi */    
    /* MERKEZLEME: Sadece dikey bar için geçerli */
    left: 50% !important;
    transform: translateX(-50%) !important;    
    /* KALINLIK: Tüneline göre %25 - %35 arası bir değer ver */
    width: 20% !important;     
    height: 0%; /* JS tarafından yönetilecek */
    z-index: 5;
    transition: height 0.3s ease-out;
	
}
#exhaustion-fill-sari {
    background: linear-gradient(to top, #ffd700, #ffae00) !important;
}

.exhaust-fill-mor {
    background: linear-gradient(to top, #6a0dad, #9b59b6); 
    box-shadow: 0 0 10px #9b59b6;
    transition: all 0.3s ease;
    opacity: 1; /* Daha belirgin olması için opaklığı artırdık */
    z-index: 5; /* Sarının (varsayılan 1) üzerinde durması için */
}

#exhaustion-value {
    margin-top: 5px;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: #f0e68c;
}

.skill-exhaust-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #111;
    color: #ffd700; /* Başlangıç rengi sarı */
    font-size: 10px;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    padding: 2px 5px;
    border: 1px solid #6b5c3b;
    border-radius: 4px;
    z-index: 20;
    pointer-events: none;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.8);
    transition: all 0.3s ease;
}

/* Yorgunluk 100'ü geçtiğinde kullanılacak mor stil */
.exhaust-status-danger .skill-exhaust-badge {
    color: #df9cff !important;
    border-color: #8e44ad !important;
    box-shadow: 0 0 8px rgba(142, 68, 173, 0.6);
}

/* Düşman Saldırı Animasyonu (Hacivat-Karagöz Tarzı) */
@keyframes enemyHeadbutt {
    0% { 
        transform: translateX(calc(-50% + var(--final-x))) translateY(var(--final-y)) scale(var(--final-scale)) rotate(0deg); 
    }
    50% { 
        /* Saldırı anında ekstra öne atılma (-68%) + X kayması koruması */
        transform: translateX(calc(-68% + var(--final-x))) translateY(var(--final-y)) scale(var(--final-scale)) rotate(-12deg); 
    }
    100% { 
        transform: translateX(calc(-50% + var(--final-x))) translateY(var(--final-y)) scale(var(--final-scale)) rotate(0deg); 
    }
}

.monster-attack-anim {
    /* ease-in-out daha doğal bir yavaşlama/hızlanma sağlar */
    animation: enemyHeadbutt 0.5s ease-in-out !important;
    transform-origin: bottom center;
    will-change: transform; /* Tarayıcıya performans optimizasyonu yaptırır */
}

/* Mikro-Sarsıntı: Sadece 2-3 piksellik hızlı titreşim */
@keyframes subtleShake {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-3px, 1px); }
    40% { transform: translate(2px, -1px); }
    60% { transform: translate(-2px, 2px); }
    80% { transform: translate(1px, -1px); }
    100% { transform: translate(0, 0); }
}

/* Kan Efekti: 1.5s yerine 1s yaptık, daha seri biter */
@keyframes bloodVignette {
    0% { opacity: 0; box-shadow: inset 0 0 0 rgba(255, 0, 0, 0); }
    10% { opacity: 1; box-shadow: inset 0 0 100px rgba(150, 0, 0, 0.7); } 
    100% { opacity: 0; box-shadow: inset 0 0 0 rgba(255, 0, 0, 0); }
}

.shake-effect {
    /* Süreyi 0.3 saniyeye indirdik, daha 'anlık' bir titreme */
    animation: subtleShake 0.3s ease-in-out both !important;
}

.flash-effect::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9999;
    animation: bloodVignette 1.0s ease-out forwards !important;
}

#combat-log-wrapper {
    position: absolute;
    top: 2.6%; /* Üst barın hemen altı */
    left: 23.4%;
    transform: translateX(-50%);
    width: 450px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid #6b5c3b;
    border-radius: 8px;
    z-index: 1000;
    font-family: 'Cinzel', serif;
    transition: all 0.3s ease;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

#combat-log-header {
    padding: 5px 15px;
    background: rgba(43, 34, 24, 0.9);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 0.75rem;
    color: #f0e68c;
    border-bottom: 1px solid #6b5c3b;
}

#combat-log-area {
    height: 100px; /* Yaklaşık 4 satır */
    overflow-y: auto;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #ccc;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scroll-behavior: smooth;
	transition: all 0.3s ease-in-out;
}

#combat-log-area::-webkit-scrollbar { width: 4px; }
#combat-log-area::-webkit-scrollbar-thumb { background: #6b5c3b; }

.log-entry { 
    border-bottom: 1px solid rgba(255,255,255,0.05); 
    padding-bottom: 2px; 
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

#combat-log-trigger {
    position: absolute;
    left: 0;
    top: 60px; /* Üst barın biraz altında */
    background: rgba(107, 92, 59, 0.9);
    color: #f0e68c;
    width: 30px;
    height: 45px;
    display: none; /* JS (applySettings) bunu flex yapacak */
    align-items: center;
    justify-content: center;
    border-radius: 0 10px 10px 0;
    border: 1px solid #f0e68c;
    border-left: none;
    z-index: 1100;
    cursor: pointer;
    box-shadow: 2px 0 10px rgba(0,0,0,0.5);
    transition: width 0.2s;
}
#combat-log-trigger:hover { width: 40px; background: #5d4a30; }

#combat-log-trigger:hover {
    background: #5d4a30;
    width: 35px;
}

/* --- ÖLÜM EKRANI ÖZEL LOG STİLİ --- */
#combat-log-wrapper.death-mode {
    top: 75% !important; /* YOU DIED yazısının altına, ekranın ortasına yakın */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 650px !important; /* Daha geniş */
    max-width: 95% !important;
    background: rgba(20, 5, 5, 0.98) !important; /* Hafif kırmızımsı koyu siyah */
    border: 2px solid #8b0000 !important; /* Kan kırmızısı çerçeve */
    box-shadow: 0 0 100px rgba(0, 0, 0, 1), 0 0 30px rgba(139, 0, 0, 0.3) !important;
    z-index: 2000 !important;
}

#combat-log-wrapper.death-mode #combat-log-area {
    height: 300px !important; /* Daha fazla satır göründün */
    font-size: 1rem !important; /* Yazılar biraz daha büyüsün */
    padding: 15px !important;
}

#combat-log-wrapper.death-mode #combat-log-header {
    background: #500000 !important; /* Header kırmızısı */
    color: #fff !important;
}

.skill-rage-badge {
    position: absolute;
    bottom: -5px; /* Sol alt köşe */
    left: -5px;
    background: #050505;
    /* Renk JS ile sınıfın kaynak rengine (Kırmızı/Mavi) göre atanacak */
    color: #ffd700; 
    font-size: 10px;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    padding: 2px 5px;
    border: 1px solid #6b5c3b;
    border-radius: 4px;
    z-index: 20;
    pointer-events: none;
    box-shadow: 2px -2px 5px rgba(0,0,0,0.8);
    transition: all 0.3s ease;
}

.event-indicator-mini {
    margin-top: -5px;
    font-size: 0.6rem;
    color: #a89373; /* Pirinç/Altın rengi */
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-top: 1px solid rgba(171, 147, 115, 0.3);
    padding-top: 4px;
    min-width: 100px;
    text-align: center;
    font-style: italic;
}

/* Kırmızı veya özel olaylar için vurgu rengi */
.event-indicator-mini.active-event {
    color: #f0e68c;
    text-shadow: 0 0 5px rgba(240, 230, 140, 0.5);
}

.room-event-banner {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    border-top: 2px solid #f0e68c;
    border-bottom: 2px solid #f0e68c;
    color: #f0e68c;
    padding: 15px 60px;
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 5px;
    text-shadow: 0 0 15px rgba(240, 230, 140, 0.6);
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
    z-index: 2000;
    pointer-events: none;
    white-space: nowrap;
}

/* Belirip kaybolma animasyonu */
.banner-animate {
    animation: bannerPop 2.5s ease-in-out forwards;
}

@keyframes bannerPop {
    0% { opacity: 0; transform: translate(-50%, -60%) scale(0.8); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    85% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -40%) scale(0.9); }
}
.skill-damage-preview {
    position: absolute;
    top: -22px; /* Slotun hemen üstü */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 0, 0, 0.9);
    color: #ff4d4d; /* Hasar kırmızısı */
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 900;
    padding: 1px 6px;
    border: 1px solid #8b0000;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    animation: fadeIn 0.3s ease;
}

/* Hasar 0 ise etiketi gri yapalım (Zırh delinemiyor uyarısı) */
.skill-damage-preview.no-damage {
    color: #777;
    border-color: #444;
    background: rgba(10, 10, 10, 0.9);
}

.skill-def-preview {
    position: absolute;
    top: -22px; /* Hasar kutusuyla aynı hizada */
    right: -2px; /* Sağ köşeye yasla */
    background: rgba(0, 20, 40, 0.9); /* Lacivert/Mavi tonu */
    color: #3498db; /* Defans mavisi */
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 900;
    padding: 1px 5px;
    border: 1px solid #1a5276;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 105;
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
    animation: fadeIn 0.3s ease;
}

.skill-heal-preview {
    position: absolute;
    top: -22px;
    left: -2px; /* Sol köşeye yasla */
    background: rgba(0, 40, 20, 0.9); /* Koyu Yeşil tonu */
    color: #43FF64; /* İyileşme yeşili */
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 900;
    padding: 1px 5px;
    border: 1px solid #145a32;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 105;
    box-shadow: 0 0 8px rgba(67, 255, 100, 0.4);
    animation: fadeIn 0.3s ease;
}

.skill-heal-preview::before {
    content: "💚";
    font-size: 0.6rem;
    margin-right: 3px;
}

/* KENDİNE HASAR (RECOIL/COST) ÖNGÖRÜSÜ - KOYU KIRMIZI */
.skill-recoil-preview {
    position: absolute;
    bottom: -22px; /* Slotun altına taşındı */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(60, 0, 0, 0.95); /* Koyu Kan Kırmızısı */
    color: #ff4d4d;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 900;
    padding: 1px 6px;
    border: 1px solid #330000;
    border-radius: 4px;
    z-index: 106;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
    animation: fadeIn 0.3s ease;
}
/* DoT Renkleri */
.dot-fire { color: #ff9800 !important; text-shadow: 0 0 10px #ff4500, 2px 2px 2px #000 !important; }      /* Turuncu */
.dot-poison { color: #2ecc71 !important; text-shadow: 0 0 10px #27ae60, 2px 2px 2px #000 !important; }    /* Koyu Yeşil */
.dot-cold { color: #00ccff !important; text-shadow: 0 0 10px #0055ff, 2px 2px 2px #000 !important; }      /* Açık Mavi */
.dot-lightning { color: #ffd700 !important; text-shadow: 0 0 10px #ffae00, 2px 2px 2px #000 !important; } /* Sarı */
.dot-curse { color: #9b59b6 !important; text-shadow: 0 0 10px #800080, 2px 2px 2px #000 !important; }    /* Mor */
.dot-bleed { color: #ff3333 !important; text-shadow: 0 0 10px #8b0000, 2px 2px 2px #000 !important; }    /* Kırmızı */

/* DoT Önizleme Kutusu (Skill Bar için) */
.skill-dot-preview {
    position: absolute;
    bottom: -22px; /* Recoil'in yanına veya yanına yerleştirilebilir */
    right: -2px;
    background: rgba(0, 0, 0, 0.9);
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 900;
    padding: 1px 5px;
    border: 1px solid #444;
    border-radius: 4px;
    z-index: 100;
    box-shadow: 0 0 8px rgba(0,0,0,0.8);
}

/* Barbar Sprite Kutusu */
#hero-sprite-viewer {
    /* Boyutları senin %44'lük yeni resmine göre ayarla */
    width: 563px; 
    height: 317px;
    background-size: 2815px 2536px;
    background-image: url('../images/heroes/barbarian/barbar_attack_sprite.webp');
    background-repeat: no-repeat;
    position: absolute;
    bottom: -20px; 
    left: 52%;
    transform: translateX(-50%);
    z-index: 10;
    
    /* ÖNEMLİ: Başlangıçta gizli ama yer kaplar (flicker engeller) */
    visibility: hidden; 
    opacity: 0;
    transition: opacity 0.1s; /* Yumuşak geçiş için */
	/* Titremeyi (Stutter) önleyen komutlar */
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    transform: translateX(-50%) translateZ(0); /* GPU üzerinde sabitler */
}

/* Animasyon sırasında çalışacak sınıf */
.sprite-active {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Orijinal IMG etiketini gizleme sınıfı */
.hero-hidden {
    opacity: 0 !important;
    pointer-events: none;
}
#hero-idle-viewer {
    width: 563px; 
    height: 317px;
    background-size: 2815px 2536px;
    background-image: url('../images/heroes/barbarian/barbarian_idle.webp');
    background-repeat: no-repeat;
    position: absolute;
    bottom: -20px; 
    left: 52%;
    transform: translateX(-50%);
    z-index: 9; /* Saldırı sprite'ının (10) bir tık altında */
    display: none; /* Sadece Barbar ise ve savaşta ise açılacak */
	/* Titremeyi (Stutter) önleyen komutlar */
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    transform: translateX(-50%) translateZ(0); /* GPU üzerinde sabitler */
}

#hero-death-viewer {
    width: 563px; 
    height: 317px;
    background-size: 2815px 2536px;
    background-image: url('../images/heroes/barbarian/barbar_death_sprite.webp'); /* Dosya yolunu kontrol et */
    background-repeat: no-repeat;
    position: absolute;
    bottom: -20px; 
    left: 52%;
    transform: translateX(-50%);
    z-index: 11; /* En üstte görünsün */
    display: none;
}
#monster-sprite-viewer {
    /* Bir karenin boyutu */
    width: 563px !important; 
    height: 317px !important;
    
    /* Resmin GERÇEK toplam boyutu */
    background-size: 2815px 2536px !important; 
    
    background-repeat: no-repeat;
    position: absolute;
    bottom: -20px; 
    left: 52%;
    transform: translateX(calc(-50% + var(--final-x))) translateY(var(--final-y)) scale(var(--final-scale));
    z-index: 9;
    display: none;
    image-rendering: auto;
	transform-origin: bottom center !important;
    --m-mobile-mult: 1;   /* Masaüstünde 1, Mobilde 0.67 olacak */
    --m-y-mult: 1;        /* Yüksekliği de çarpmak için */
	--m-x-mult: 1; /* YENİ: Masaüstü çarpanı */
    --final-scale: calc(var(--m-scale, 1) * var(--m-mobile-mult, 1));
    --final-y: calc(var(--m-y, 0px) * var(--m-y-mult, 1));
	--final-x: calc(var(--m-x, 0px) * var(--m-x-mult, 1)); /* YENİ: Nihai X kayması */
}
#monster-static-img {
	--m-mobile-mult: 1;   /* Masaüstünde 1, Mobilde 0.67 olacak */
    --m-y-mult: 1;        /* Yüksekliği de çarpmak için */
    --final-scale: calc(var(--m-scale, 1) * var(--m-mobile-mult, 1));
    --final-y: calc(var(--m-y, 0px) * var(--m-y-mult, 1));
	--final-x: calc(var(--m-x, 0px) * var(--m-x-mult, 1)); /* YENİ: Nihai X kayması */
    position: absolute !important;
    bottom: -18px !important; /* Senin ideal değerin */
    left: 52% !important;     /* Senin ideal değerin */
    transform: translateX(-50%) translateY(var(--final-y)) scale(var(--final-scale));
    width: 563px; 
    height: 317px;
    object-fit: contain;
    z-index: 9;
	transform-origin: bottom center !important;
}