/* --- MOBİL UYUMLULUK (MAP) --- */
@media (max-width: 768px) {
    /* Harita içeriğini mobilde daha geniş yap ki düğümler arası açılsın */
    #map-content {
        width: 900%; /* Masaüstünde 200% idi, mobilde 300% olsun */
    }
	
	#map-display::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 900%; height: 100%;
    /* Değişiklik: Şeffaf alan %30'dan %60'a çıkarıldı, kenar siyahlığı %85'ten %60'a çekildi */
    background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
    z-index: 100;
}

    .map-node {
        width: 60px; /* Parmakla basmak için büyüttük */
        height: 60px;
    }
    
    /* Boss ve City daha da büyük */
    .map-node.boss-node, .map-node.city-node {
        width: 80px;
        height: 80px;
    }
	#map-info-box {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px; /* Genişliği isteğine göre ayarla */
    background: rgba(20, 20, 20, 0.95);
    border: 2px solid #6b5c3b;
    border-bottom: none;
    border-radius: 15px 15px 0 0;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 -5px 25px rgba(0,0,0,0.8);
}

/* Kutu kapalıyken sadece başlık barı görünecek */
#map-info-box.collapsed {
    height: 55px; 
    overflow: hidden;
    background: rgba(10, 10, 10, 0.8);
}

#map-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    cursor: pointer;
    background: linear-gradient(to bottom, #2b2218, #1a150e);
    border-radius: 12px 12px 0 0;
}

#map-info-header h2 {
    margin: 0;
    font-size: 0.8em;
    color: #f0e68c;
    pointer-events: none;
}

#map-info-content {
    padding: 15px 25px;
    text-align: center;
}
}

/* Turuncu Node (Güçlendirmesiz, sadece Seviye Atlamış) */
.map-node.orange-encounter {
    border-color: #ff9800 !important;
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.4) !important;
}

/* Kırmızı Node (Hem isHard hem isWeak için kullanılacak - Tehlike/Özel durum rengi) */
.map-node.hard-encounter, .map-node.weak-encounter {
    border-color: #ff4d4d !important;
    box-shadow: 0 0 15px rgba(255, 77, 77, 0.6) !important;
    animation: pulse-red 2s infinite ease-in-out;
}

@keyframes pulse-red {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}