/* ============================================================
   --- MOBİL Battle DÜZENLEMELER (YENİLENMİŞ) ---
   ============================================================ */
@media (max-width: 768px) {
    #arena { height: 80%; }
    .character-display img { max-height: 200px; }
    
    /* Mobilde Barlar ve İsimler Aşağıda */
    .hp-overlay-container { bottom: 45%; width: 80%; }
    #hero-name, #monster-name { font-size: 0.9em; margin-bottom: 1%; 
	        /* --- TEK SATIR GARANTİSİ --- */
        white-space: nowrap !important;     /* Yazının alt satıra geçmesini yasaklar */
        overflow: hidden !important;        /* Kutu dışına taşan harfleri gizler */
        
        /* İsmin yayılacağı maksimum genişlik (Can barı genişliğine yakın bir değer) */
        max-width: 120% !important; 
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
							  }
    
    /* KRİTİK: Mobilde İntention Layer Daha Aşağıda */
    .intention-overlay { 
        bottom: 60% !important; /* Gökyüzünden indirildi */
        font-size: 1.6em;
        min-width: 55px;
        padding: 8px 12px;
		width: 50%; 
		height: 15%;
    }

     #battle-controls { 
        height: 16% !important; /* Burayı sabit bir düşük px yapalım */
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
        position: relative; /* Barın buna göre hizalanması için şart */
        overflow: visible !important;
    }    
	#action-bar {
        /* --- MANUEL KONTROL PANELİ --- */
        width: 100% !important;  /* Genişliği buradan ayarla (Örn: 350px, 400px...) */
        height: 100% !important; /* Yüksekliği buradan ayarla (Örn: 100px, 150px...) */
        bottom: 25% !important;  /* Barı karakterlerden uzaklaştırmak için artır/azalt */
        /* ---------------------------- */

        position: absolute !important; 
        left: 50% !important;
        transform: translateX(-50%) !important; /* Barı tam yatay merkezde tutar */
        
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        

        background-size: 100% 110% !important;
        
        border: none !important;
        box-shadow: none !important;
        z-index: 1000;
    }
	/* --- SLOT BOYUT KONTROL PANELİ --- */
	.skill-slot {
       /* BURADAKİ RAKAMLARI DELİKLERİN ŞEKLİNE GÖRE AYARLA */
        width: 8.5% !important;   /* Genişlik (Yatay) */
        height: 45% !important;  /* Yükseklik (Dikey) - Kare değilse burayı artır */
        /* ------------------------------------------------ */

        position: absolute !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        overflow: visible !important;
    }

    .skill-slot img {
        width: 100% !important;
        height: 100% !important;
        /* KRİTİK: 'fill' kullanırsan resim kutunun şekline göre esner (yayılır) */
        /* 'cover' kullanırsan resim oranını bozmaz ama kenarlardan kırpar */
        object-fit: fill !important; 
        pointer-events: none;
    }

		/* SOL GRUP (Basic Skills) */
	#btn-basic-attack { left: 9.6%; top: 31%;}
	#btn-basic-defend { left: 21.2%; top: 31%;}
	/* 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%; top: 31%; }
	#skill-bar-container .skill-slot:nth-child(2) { left: 57.8%; top: 31%; }
	#skill-bar-container .skill-slot:nth-child(3) { left: 70%; top: 31%; }
	#skill-bar-container .skill-slot:nth-child(4) { left: 82.1%; top: 31%; }
	
		.expanded-bar .skill-slot {
		width: 8% !important;
		height: 42% !important;
		position: absolute !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        overflow: visible !important;
	}
		/* Rakamları action_frame5.webp'deki deliklere göre konsoldan (F12) düzenle */
	.expanded-bar #btn-basic-attack { left: 8.3%; top: 32%; }
	.expanded-bar #btn-basic-defend { left: 18.7%; top: 32%; }

	/* Sağ taraftaki 5 yetenek (1-5) */
	.expanded-bar #skill-bar-container .skill-slot:nth-child(1) { left: 40.8%; top: 32%; }
	.expanded-bar #skill-bar-container .skill-slot:nth-child(2) { left: 51.4%; top: 32%; }
	.expanded-bar #skill-bar-container .skill-slot:nth-child(3) { left: 61.7%; top: 32%; }
	.expanded-bar #skill-bar-container .skill-slot:nth-child(4) { left: 72.5%; top: 32%; }
	.expanded-bar #skill-bar-container .skill-slot:nth-child(5) { left: 83.3%; top: 32%; }
	
	/* 1. Rozetler (Mana ve Yorgunluk) */
	.expanded-bar .skill-rage-badge {
		bottom: -5px !important; /* İkonun içine iyice yanaştır */
		left: -3px !important;
		font-size: 7px !important; /* Yer kazanmak için bir tık daha ufalttık */
	}

	.expanded-bar .skill-exhaust-badge {
		top: -6px !important;
		right: -3px !important;
		font-size: 7px !important;
	}

	/* 2. Üstteki Öngörüler (Hasar, Defans, Şifa) */
	.expanded-bar .skill-damage-preview, 
	.expanded-bar .skill-def-preview, 
	.expanded-bar .skill-heal-preview {
		top: -19px !important; /* Standart -20px'den -16px'e çekerek deliğe yaklaştırdık */
	}

	/* 3. Alttaki Öngörüler (DoT, Recoil) */
	.expanded-bar .skill-recoil-preview, 
	.expanded-bar .skill-dot-preview {
		bottom: -16px !important; /* Standart -20px'den -16px'e çekerek deliğe yaklaştırdık */
	}

	/* 4. Yatay İnce Ayarlar (Sadece Expanded Bar İçin) */
	.expanded-bar .skill-heal-preview {
		left: -1px !important; /* Köşeye tam yasla */
	}

	.expanded-bar .skill-def-preview {
		right: -1px !important; /* Köşeye tam yasla */
	}

	.expanded-bar .skill-dot-preview {
		right: -1px !important; /* Sağ alta tam yasla */
	}

	/* Rakamların Boyutu (Expanded barda alan çok dar olduğu için biraz daha küçültüyoruz) */
	.expanded-bar .skill-damage-preview, 
	.expanded-bar .skill-def-preview, 
	.expanded-bar .skill-heal-preview, 
	.expanded-bar .skill-recoil-preview, 
	.expanded-bar .skill-dot-preview {
		font-size: 0.6rem !important; 
		min-width: 16px !important;
		height: 12px !important;
	}
	.skill-slot .key-hint {
        font-size: 8px !important;
        padding: 1px 3px !important;
        top: -3px !important;
        left: -3px !important;
    }

    .basic-skills-container, 
    #skill-bar-container { 
        width: auto !important; 
        gap: 4px !important; 
    }
	
  #turn-counter-box {
        /* 1. GÖRSEL AYARLARI */
        background: url('../../images/ui/turn_frame_mobile.webp') no-repeat center center !important;
        background-size: 100% 45% !important; /* Görseli kutuya tam yayar */
        
        /* 2. MANUEL BOYUT KONTROLÜ (Mobilde bu px değerleriyle oyna) */
        width: 50% !important;  
        height: 50% !important;
        /* --------------------------------------------------------- */

        /* 3. KONUM VE TEMİZLİK */
        position: absolute !important;
        bottom: 63.7% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 50;
        
        border: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Sayıların Boyutu ve Duruşu */
    #turn-count-display {
        font-size: 1.2em !important; /* Çerçeveye sığması için biraz küçülttük */
        margin-top: 0px !important; /* Rakamı deliğe ortalamak için dikey ayar */
        color: #f0e68c;
        text-shadow: 0 0 10px orange, 2px 2px 2px #000;
        font-family: 'Cinzel', serif;
		margin-top: -4% !important;
    }

    /* "TUR" Yazısının Boyutu */
    .turn-label {
        font-size: 0.6rem !important;
        letter-spacing: 2px !important;
		margin-top: -12.5% !important;
    }
	
	/* Altındaki oda olayı (Açık Gökyüzü vb.) yazısı */
    .event-indicator-mini {
        font-size: 0.41rem !important;
        margin-top: 0% !important;
    }
	
	.event-detail {
        font-size: 1.5em !important; /* Mobilde daha küçük em değeri */
        line-height: 1;
		margin-top: 1% !important;
    }
	
#exhaustion-system {
        position: absolute !important;
        left: 1% !important; /* Ekranın soluna iyice yasladık */
        bottom: 5.5% !important; /* Yetenek barının üstünde kalsın */
        width: 35px !important;  /* Genişliği sabitleyerek ezilmeyi engelledik */
        height: 25vh !important; /* Yüksekliği ekranın %25'ine sabitledik */
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1000;
        overflow: visible !important;
    }

    /* 2. BAR KAPSAYICISI: Çerçeveyi koruyan kısım */
    .exhaustion-bar-wrapper {
        width: 100% !important; /* Parent'ın (35px) tamamını kaplasın */
        height: 100% !important;
        background-color: transparent !important;
        border: none !important;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column-reverse;
        background-image: none !important; /* Hayalet kılıcı engellemeye devam */
    }

    /* 3. ÇERÇEVE KATMANI (::after) */
    .exhaustion-bar-wrapper::after {
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        /*background-image: var(--current-frame);*/ 
        background-repeat: no-repeat !important;
        background-position: center bottom;
        /* KRİTİK: contain kullanarak resmin ezilmesini kesin olarak önledik */
        background-size: contain !important; 
        z-index: 10;
        pointer-events: none;
    }

.room-event-banner {
	top: 20%;
    left: 50%;
    font-size: 0.6rem;
}

#combat-log-wrapper {
	    position: absolute;
        width: 92% !important;
        max-width: 72% !important;
        left: 35.2cqw;
        top: 23.5cqw !important; /* Üst bara daha yakın */
        border-radius: 4px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.8) !important;
		transition: all 0.3s ease-in-out;
    }

    #combat-log-header {
        padding: 4px 10px !important; /* Daha ince handle */
        font-size: 0.65rem !important; 
        min-height: 25px !important;
    }

    #combat-log-area {
        /* Mobilde 3 satır (yaklaşık 60px) yeterlidir */
        height: 60px !important; 
        padding: 6px 10px !important;
        font-size: 0.7rem !important;
        line-height: 1.3 !important;
		transition: all 0.3s ease-in-out;
    }
    
	#combat-log-trigger {
        top: 20cqw;
        width: 5cqw;
        height: 10cqw;
    }
    .skill-rage-badge {
        position: absolute !important;
        bottom: -5px !important;
        left: -5px !important;
        width: auto !important;
        padding: 1px 3px !important;
        font-size: 8px !important;
        white-space: nowrap !important;
        z-index: 50 !important;
        border-radius: 3px !important;
    }
	.skill-exhaust-badge {
        position: absolute !important; /* Akıştan tamamen çıkart */
        top: -5px !important;      /* Üst köşeye taşı */
        right: -5px !important;    /* Sağ köşeye taşı */
        width: auto !important;    /* İçeriği kadar genişlesin */
        height: auto !important;   /* Yüksekliği metne göre ayarlasın */
        min-width: 20px !important;
        padding: 1px 4px !important; /* Kenarlardan çok az boşluk */
        
        display: block !important;  /* Flex yerine blok yaparak kolonlaşmayı engelle */
        white-space: nowrap !important; /* Metnin alt satıra geçmesini veya daralmasını engelle */
        
        font-size: 8px !important;  /* Fontu küçült */
        line-height: 1 !important;  /* Satır yüksekliğini sıfırla */
        z-index: 50 !important;     /* İkonun en üstünde olsun */
        
        background: #000 !important; /* Arka planı siyah yap ki ikonun üstünde okunsun */
        border: 1px solid #6b5c3b !important;
        border-radius: 3px !important;
        box-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
    }
	/* TÜM ÖNGÖRÜ RAKAMLARI (Hasar, Defans, Şifa, DoT, Recoil) */
    .skill-damage-preview, 
    .skill-def-preview, 
    .skill-heal-preview, 
    .skill-recoil-preview, 
    .skill-dot-preview {
  /* FLEXBOX AKTİF: İçindeki her şeyi tam ortalar */
        display: flex !important;
        justify-content: center !important; /* Yatayda ortala */
        align-items: center !important;    /* Dikeyde ortala */
        text-align: center !important;
        font-size: 0.55rem !important; 
        /* Boyut Ayarları: Genişliği rakama göre esnet ama bir alt limit koy */
        min-width: 18px !important; 
        height: 14px !important; /* Yüksekliği sabitlemek hizalamayı pürüzsüz yapar */
        /* Padding'i sıfırlıyoruz veya dengeliyoruz ki sola çekmesin */
        padding: 0 2px !important;  
        line-height: 1 !important;
        border-width: 1px !important;  /* İnce çerçeve */
        border-radius: 3px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
    }

    /* ÜSTTE DURANLAR (Hasar, Def, Heal) */
    .skill-damage-preview, 
    .skill-def-preview, 
    .skill-heal-preview {
        top: -20px !important; /* Slotun hemen tepesine yapıştır */
    }

    /* ALTTA DURANLAR (Recoil, DoT) */
    .skill-recoil-preview, 
    .skill-dot-preview {
        bottom: -20px !important; /* Slotun hemen altına yapıştır */
    }

    /* YATAY KONUMLANDIRMA AYARLARI */
    .skill-damage-preview, .skill-recoil-preview {
        left: 50% !important;
        transform: translateX(-50%) !important; /* Tam orta */
    }

    .skill-heal-preview {
        left: -2px !important; /* Sol köşe */
    }

    .skill-def-preview {
        right: -2px !important; /* Sağ köşe */
    }

    /* DoT Öngörüsü (↻6 gibi) */
    .skill-dot-preview {
        right: -2px !important; /* Sağ alt köşe */
        /* Eğer Recoil ile çakışırsa diye bir miktar sola kaydırılabilir */
    }

	#combat-log-wrapper.death-mode {
        width: 95% !important;
        top: 75% !important;
    }
    #combat-log-wrapper.death-mode #combat-log-area {
        height: 220px !important;
        font-size: 0.85rem !important;
    }
	#hero-sprite-viewer {
        /* Mobilde karakterin idle resminin yüksekliği yaklaşık 200px civarıdır. */
        /* Bu yüzden 317px olan sprite'ı yaklaşık %60 oranında küçültüyoruz. */
        
        /* ÖNEMLİ: transform-origin: bottom; sayesinde ayaklar sabit kalır, kafa aşağı iner. */
        transform: translateX(-50%) scale(0.67); 
        transform-origin: bottom center;

        /* Ayak hizasını mobildeki zemine oturtmak için bu değerle oynayabilirsin */
        bottom: 0%; 
        
        /* left değerini sabit tutuyoruz çünkü translateX(-50%) ile ortalıyoruz */
        left: 53%; 
    }
	 #hero-idle-viewer {
        transform: translateX(-50%) scale(0.67);
        transform-origin: bottom center;
		bottom: 0%;
		left: 53%;
    }
	  #hero-death-viewer {
        transform: translateX(-50%) scale(0.63);
        transform-origin: bottom center;
		bottom: 0%;
		left: 53%;
    }
	   #monster-sprite-viewer, #monster-static-img {
        /* Mobilde olduğumuzu değişkenlere fısıldıyoruz */
        --m-mobile-mult: 0.67;
        --m-y-mult: 0.67;
		--m-x-mult: 0.67; 		
        
        /* ÖNEMLİ: transformu burada !important ile zorluyoruz ama değişkenleri bozmadan */
        transform: translateX(-50%) translateY(var(--final-y)) scale(var(--final-scale)) !important;
        
        bottom: 0% !important;
        left: 53% !important;
    }
}

/*@media (max-height: 600px) {
    .intention-overlay { bottom: 260px !important; }
    .hp-overlay-container { bottom: 170px; }
}*/