/* css/map.css */

#map-screen { 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: flex-start; 
    padding: 0; 
}

/* DIŞ ÇERÇEVE: Sadece görünür alanı sınırlar ve scroll bar ekler */
#map-display { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    overflow-x: auto; /* Yatay scroll */
    overflow-y: hidden;
    background-color: #111;
	/* --- SCROLLBAR GİZLEME (TÜM TARAYICILAR İÇİN) --- */
    -ms-overflow-style: none;  /* Internet Explorer ve Eski Edge */
    scrollbar-width: none;     /* Firefox */
}
/* Chrome, Safari ve Yeni Edge (Blink motoru) için */
#map-display::-webkit-scrollbar {
    display: none;
}
#map-display {
    cursor: grab; /* Harita üzerinde el simgesi çıksın */
}
#map-display:active {
    cursor: grabbing; /* Tutarken yumruk simgesi çıksın */
}

#map-display::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 450%; 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;
}


/* İÇERİK: Tüm harita elemanlarını tutan geniş kutu */
#map-content {
    position: relative;
    width: 450%; /* Harita ekranın 2 katı genişliğinde */
    height: 100%;
}

#map-info-box {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px; /* 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: 45px; 
    overflow: hidden;
    background: rgba(10, 10, 10, 0.8);
}

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

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

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

/* Ok İkonu Animasyonu */
#info-arrow {
    transition: transform 0.4s;
    color: #f0e68c;
}
#map-info-box.collapsed #info-arrow {
    transform: rotate(180deg);
}

/* --- TİK KUTUSU (TOGGLE SWITCH) STİLİ --- */
.toggle-control { display: flex; align-items: center; gap: 15px; }
.switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #444; transition: .4s; border-radius: 34px; border: 1px solid #6b5c3b; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 2px; background-color: #f0e68c; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #5d4a30; }
input:checked + .slider:before { transform: translateX(20px); }

/* Arka plan artık map-content boyutuna uyacak */
#map-background { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    filter: brightness(1.2) contrast(1.1) saturate(0.85); 
    opacity: 0.95;
    position: absolute; /* Sabitle */
    top: 0; left: 0;
    z-index: 0;
}

/* SVG Katmanı */
#map-trails-layer { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 5; 
    pointer-events: none; 
}

/* Gidilen Yol (Kalıcı - Parlak Sarı) */
.map-trail-line {
    stroke: #ffd700;
    stroke-width: 4;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4)); /* Hafif altın ışığı */
    stroke-dasharray: 12;
    animation: dash-animation 40s linear infinite;
}

/* Gidilebilecek yolları daha hayaletvari yapalım */
.map-path-hint {
    stroke: #1a1a1a; /* Koyu mürekkep rengi */
    stroke-width: 4; /* Daha kalın ve görünür */
    stroke-dasharray: 8, 5;
    opacity: 0.8; /* Daha az şeffaf */
    filter: drop-shadow(0 0 1px rgba(255,255,255,0.2)); /* Koyu zeminde ayrışması için hafif ışık */
}

@keyframes dash-animation { to { stroke-dashoffset: -1000; } }


/* Düğümler */
.map-node {
    position: absolute; 
    width: 50px; height: 50px; 
    border-radius: 50%; 
    padding: 0;
    background: transparent; 
    border: 2px solid #777; 
    z-index: 10; 
    cursor: pointer;
    /* transition'dan transform'u çıkardık veya sabit bıraktık */
    transition: box-shadow 0.2s, opacity 0.2s; 
    display: flex; justify-content: center; align-items: center;
    overflow: visible; !important; /* Kar taneleri içinde kalsın */
    transform: scale(1.2); /* Sabit boyut */
}

/* Hover durumunda büyümesini engelledik */
.map-node:hover:not(:disabled) { 
    transform: scale(1.5); 
    box-shadow: 0 0 15px rgba(240, 230, 140, 0.8); 
    z-index: 15;
}

.map-node img { width: 70%; height: 70%; pointer-events: none; }

/* Node Renkleri */
.map-node.start-node { border-color: #fff; background: transparent; }
.map-node.encounter-node { border-color: #ff4d4d; background: transparent; }
.map-node.campfire-node { border-color: #ffa500; background: transparent; }
.map-node.choice-node { border-color: #3498db; background: transparent; }
.map-node.town-node { border-color: #f0e68c; background: transparent; }
.map-node.boss-node { border-color: #ff4d4d; width: 70px; height: 70px; background: transparent;}
.map-node.city-node { border-color: #f0e68c; width: 70px; height: 70px; background: transparent; }

/* Durumlar */
.map-node:disabled { filter: grayscale(100%) brightness(0.8); opacity: 0.8; cursor: not-allowed; border-style: dashed;}
.map-node.available {
    filter: none;
    border-color: #43FF64;
    box-shadow: 0 0 10px #43FF64;
    animation: none; /* Pulse animasyonu sildik */
    transform: scale(1);
}
.map-node.visited { border-color: #ffd700; opacity: 0.6; }

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

/* MASTER DEKORASYON KATMANI */
.master-decorator {
    position: absolute;
    /* Hizalamayı Alt-Orta yapıyoruz */
    bottom: 50%; 
    left: 50%;
    transform: translateX(-50%); /* Sadece yatayda ortala, dikeyde bottom:50% ile yukarı uzasın */
    
    /* İnce uzun oranlar (Örn: 150px genişlik, 450px yükseklik) */
    width: 200px;  
    height: 500px; 
    
    /* GÜVENLİK: Herhangi bir sınırlayıcıyı kaldırıyoruz */
    max-width: none !important;
    max-height: none !important;
    
    z-index: 1; 
    pointer-events: none;
    
    background-repeat: no-repeat;
    background-size: contain;
    /* Görselin alt kısmının node üzerinde kalması için bottom */
    background-position: bottom center; 
    
    filter: brightness(0.7) contrast(1.1) sepia(0.2);
    opacity: 0.8;
    transition: all 0.5s ease;
}

/* Hover/Available parlaması */
.map-node.available .master-decorator,
.map-node:hover .master-decorator {
    filter: brightness(1.1) contrast(1.2) sepia(0);
    opacity: 1;
}

/* Town Butonunun Kendi İmajı (Skull/Village icon) Master dekorun üstünde kalsın */
.map-node.town-node img {
    position: relative;
    z-index: 5;
}

/* Biyom Arka Planı (Hover veya Available durumunda) */
.map-node::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 140px; height: 140px;
    z-index: -1;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* JS'den gelen değişkeni burada kullanıyoruz */
    background-image: var(--biome-bg-img);
    
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0;
    
    /* Dark RPG havası için ortak filtreler */
    filter: brightness(0.8) contrast(1.2);
}

/* Masaüstü Hover ve Mobil/Genel Aktiflik Durumu */
.map-node.available:hover::before,
.map-node.available::before,
.map-node.current-node::before,
.map-node.scouted-node::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
}

.map-node:not(.available):hover::before {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}
.map-node.available span[class*="-particle"], 
.map-node.current-node span[class*="-particle"],
.map-node.scouted-node span[class*="-particle"] {
    opacity: 1 !important;
    display: block !important;
}

/* Biome Efektleri --- */
/* 1. TÜM PARTİKÜLLERİ VARSAYILAN OLARAK TAMAMEN GİZLE */
.ash-particle, 
.cave-particle, 
.leaf-particle, 
.snow-particle, 
.cloud-particle {
    opacity: 0 !important;
    display: none !important; /* Hem görünmez hem de işleme girmesinler */
    pointer-events: none;
}

/* 2. SADECE AKTİF (AVAILABLE) VEYA ÜSTÜNDE OLUNAN (CURRENT) NODE'LARDA GÖSTER */
.map-node.available .ash-particle, .map-node.current-node .ash-particle,
.map-node.available .cave-particle, .map-node.current-node .cave-particle,
.map-node.available .leaf-particle, .map-node.current-node .leaf-particle,
.map-node.available .snow-particle, .map-node.current-node .snow-particle,
.map-node.available .cloud-particle, .map-node.current-node .cloud-particle {
    opacity: 1 !important;
    display: block !important; /* Aktif olduğunda canlansınlar */
}

/* --- ICELAND (Kar Yağışı Efekti) --- */
/* KAR TANESİ TEMEL STİLİ */
.snow-particle {
    position: absolute;
    top: -10px; /* Node'un tepesinden başlasın */
    background-color: #fff;
    border-radius: 50%;
    opacity: 0; /* Varsayılan olarak gizli */
    pointer-events: none;
    z-index: 12;
    filter: blur(0.3px);
}

/* Sadece gidilebilir (available) veya üzerinde olduğun node'larda göster */
.map-node.available .snow-particle,
.map-node.current-node .snow-particle {
    opacity: 0.8;
    animation-name: snow-fall-random;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes snow-fall-random {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    /* Ortada hafifçe sağa/sola savrulsun */
    50% {
        transform: translateY(30px) translateX(var(--drift));
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(60px) translateX(0);
        opacity: 0;
    }
}

/* Iceland Kar Birikmesi (Current Node için) */
.biome-iceland.current-node {
    box-shadow: 
        0 10px 20px 2px rgba(255, 255, 255, 0.8), 
        inset 0 -8px 10px rgba(255, 255, 255, 0.4) !important;
    transition: box-shadow 2s ease-in-out;
}

/* --- PLAINS (Rüzgar Çizgileri) --- */
.biome-plains::after {
    content: "";
    position: absolute;
    /* Çizgileri biraz daha uzattık ve kalınlaştırdık */
    width: 100px;
    height: 2px; 
    /* Renk geçişini daha opak (0.8) yaptık */
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 10%, 
        rgba(255, 255, 255, 0.8) 50%, 
        rgba(255, 255, 255, 0.1) 90%, 
        transparent 100%
    );
    
    /* Yan çizgileri (box-shadow) daha net ve geniş hale getirdik */
    box-shadow: 
        -30px 15px 1.5px rgba(255, 255, 255, 0.5), 
        30px -15px 1.5px rgba(255, 255, 255, 0.5);
    
    /* Bluru azalttık ki çizgiler keskinleşsin */
    filter: blur(0.8px);
    top: 50%; 
    left: 50%;
    pointer-events: none;
    z-index: 15;
    opacity: 0;
}

/* Aktif node'larda görünürlük artırıldı */
.biome-plains.available:hover::after,
.biome-plains.available::after {
    /* Opacity 1 yaptık (Tam görünürlük) */
    opacity: 1;
    animation: wind-bold-flow 2.5s linear infinite;
}

@keyframes wind-bold-flow {
    0% {
        transform: translate(-200%, -50%) scaleX(0.5);
        opacity: 0;
    }
    /* Geçişin ortasında parlama zirveye çıksın */
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translate(0%, -50%) scaleX(2);
        opacity: 0;
    }
}

/* FOREST: Yapraklar (Sallanarak düşme) */
.leaf-particle {
    position: absolute; width: 6px; height: 4px;
    background: #334d29; /* Koyu yeşil/kahve */
    border-radius: 2px 50%;
    opacity: 0; top: -5px; pointer-events: none;
    animation: leaf-fall linear infinite;
}
@keyframes leaf-fall {
    0% { transform: translateY(0) rotate(0deg) translateX(0); }
    50% { transform: translateY(30px) rotate(180deg) translateX(15px); }
    100% { transform: translateY(60px) rotate(var(--rot)) translateX(-5px); }
}

/* RUINS: Küller ve Kıvılcımlar */
.ash-particle {
    position: absolute; width: 2px; height: 2px;
    background: #bbb; opacity: 0; top: 50%; left: 50%; pointer-events: none;
    animation: ash-up linear infinite;
	z-index:15;
}
.ash-particle.ember { background: #ffcc00; box-shadow: 0 0 8px #ff4500, 0 0 12px #ffcc00; width: 4px; height:4px; }
@keyframes ash-up {
    0% { transform: translate(-50%, 0) scale(1); opacity: 0; }
    50% { opacity: 1; transform: translate(calc(-50% + 30px), -40px) scale(1.2); }
    100% { transform: translate(calc(-50% - 20px), -90px) scale(0.5); opacity: 0; }
}
.map-node.available .ash-particle, 
.map-node.current-node .ash-particle { animation: ash-up 3s linear infinite; }
.map-node.scouted-node .ash-particle { animation: ash-rise 3s linear infinite; }

/* CAVE: Mağara Tozu (Olduğu yerde süzülme) */
.cave-particle {
    position: absolute; 
    width: 7px; height: 7px; /* Boyut büyütüldü */
    background: rgba(200, 230, 255, 0.5); 
    border-radius: 50%;
    filter: blur(2px); /* Sis efekti için blur */
    pointer-events: none;
    animation: cave-float ease-in-out infinite;
    z-index: 15;
}
@keyframes cave-float {
    0%, 100% { transform: translate(0, 0); opacity: 0.2; }
    50% { transform: translate(10px, -10px); opacity: 0.6; }
}

.map-node.available .cave-particle, 
.map-node.current-node .cave-particle { animation: cave-float 5s ease-in-out infinite; }
.map-node.scouted-node .cave-particle { animation: cave-float 5s ease-in-out infinite; }

/* MOUNTAIN: Sis Bulutları */

.cloud-particle {
    position: absolute; 
    width: 120px; height: 120px; /* Daha yuvarlak ve büyük */
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 60%);
    filter: blur(15px);
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transform: translate(-50%, -50%); /* Merkeze sabitle */
    animation: mist-pulse ease-in-out infinite;
}

@keyframes mist-pulse {
    0%, 100% { 
        opacity: 0; 
        transform: translate(-50%, -50%) scale(0.8) rotate(0deg); 
    }
    50% { 
        opacity: 0.5; 
        transform: translate(50%, -50%) scale(1.3) rotate(15deg); 
    }
}

.map-node.available .cloud-particle, 
.map-node.current-node .cloud-particle { animation: mist-pulse 6s ease-in-out infinite; }
.map-node.scouted-node .cloud-particle { animation: mist-pulse 6s ease-in-out infinite; }

/* Eğer node'da biome- ile başlayan bir klas yoksa dekoru gösterme */
.map-node:not([class*="biome-"])::before {
    display: none !important;
    content: none !important;
}

/* Sadece biyom klası olanlarda dekoru etkinleştir */
.map-node[class*="biome-"]::before {
    /* Mevcut dekor ayarların (size, transform vb.) */
}

/* Oyuncu İkonu */
#player-marker-container { 
    position: absolute; 
    width: 90px; /* 50px'den biraz büyüttük daha iyi görünsün */
    height: 80px; 
    z-index: 200; /* Diğer her şeyin üstünde olsun */
    transition: left 0.5s ease-in-out, top 0.5s ease-in-out; 
    pointer-events: none; 
    display: none; 
    
    /* --- YENİ: ARKA PLAN IŞIK HALESİ --- */
    /* Kılıcın arkasında yumuşak altın rengi bir parlama alanı oluşturur */
    background: radial-gradient(circle, rgba(255, 215, 0, 0.4) 0%, transparent 70%);
    display: flex;
    justify-content: center;
    align-items: center;
}

#player-marker { 
    width: 80%; 
    height: 80%; 
    object-fit: contain; 
    
    /* --- YENİ: KILIÇ PARLAMASI VE ANİMASYON --- */
    /* Kılıcın kendi silüetini altın rengiyle parlatır */
    filter: drop-shadow(0 0 8px #ffd700) brightness(1.2); 
    
    /* Nabız gibi atan parlama animasyonu */
    animation: markerPulse 1.5s infinite alternate ease-in-out;
}

/* Parlama ve Hafif Büyüme Animasyonu */
@keyframes markerPulse {
    from { 
        filter: drop-shadow(0 0 5px #ffd700) brightness(1.1); 
        transform: scale(1); 
    }
    to { 
        filter: drop-shadow(0 0 15px #fff) brightness(1.4); 
        transform: scale(1.15); /* Hafifçe büyüyüp küçülür */
    }
}

/* Zıplama efekti */
@keyframes markerJumpAction {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-40px) rotate(-10deg); } /* Yukarı fırla */
    50% { transform: translateY(0); } /* Yere vur */
    75% { transform: translateY(-20px) rotate(10deg); } /* Küçük sekme */
}

.marker-jump-active {
    /* Animasyonu 0.6 saniye sürdür, 2 kez tekrarla (Sevinç gösterisi) */
    animation: markerJumpAction 0.6s ease-out 2 !important;
}

/* 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; }
}
/* --- KIRMIZI NODE ŞİMŞEK EFEKTİ --- */
.map-node.hard-encounter::after, 
.map-node.weak-encounter::after {
    content: "";
    position: absolute;
    top: -50px; /* Node'un üzerinden başlasın */
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 60px;
    /* Şimşek rengi: Beyazdan Maviye/Sarıya giden parlak gradyan */
    background: linear-gradient(to bottom, transparent, #fff, #4de8ff);
    box-shadow: 0 0 10px #fff, 0 0 20px #00ccff;
    opacity: 0; /* Normalde gizli */
    z-index: 100;
    pointer-events: none;
    /* 5 saniyede bir düzensiz şekilde çakacak */
    animation: lightning-strike 5s infinite !important;
}

/* Şimşek Çakma Animasyonu (Düzensiz ve Hızlı) */
@keyframes lightning-strike {
    0%, 94%, 100% { 
        opacity: 0; 
        height: 0;
    }
    95% { 
        opacity: 1; 
        height: 70px;
        filter: brightness(2);
    }
    96% { 
        opacity: 0.2; 
        height: 60px;
    }
    97% { 
        opacity: 1; 
        height: 80px;
        filter: brightness(3);
    }
    98% { 
        opacity: 0; 
        height: 0;
    }
}

/* Kırmızı node'un kendisinin de çakma anında parlaması için ek cila */
.map-node.hard-encounter.available, 
.map-node.weak-encounter.available {
    /* Mevcut pulse-red animasyonuna ek olarak flaş efekti */
    animation: pulse-red 2s infinite ease-in-out, lightning-flash 5s infinite !important;
}

@keyframes lightning-flash {
    0%, 94%, 100% { filter: brightness(1); }
    95%, 97% { filter: brightness(2) saturate(1.5); } /* Şimşek çaktığında node parlar */
}