/* ==========================================================
   GENEL AYARLAR VE OVERLAY
   ========================================================== */
.activity-overlay { 
    position: absolute; top:0; left:0; width:100%; height:100%; 
    background:rgba(0,0,0,0.4); z-index: 99998; 
}

/* Sayfa değişirken animasyonları susturmak için */
.no-transition {
    transition: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Sayfa dönerken hover'ı ve etkileşimi tamamen keser */
.force-no-hover {
    pointer-events: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ==========================================================
   TEBRİKLER PANELİ
   ========================================================== */
.result-panel-global { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
    width: 280px; background: #fff; border: 8px solid #27ae60; border-radius: 40px; 
    padding: 40px 25px 30px 25px; text-align: center; z-index: 99999; 
    font-family: 'Comic Sans MS', sans-serif; box-shadow: 0 25px 60px rgba(0,0,0,0.6); 
}


.btn-close-global {
    position: absolute; top: 5px; right: 15px; font-size: 50px; color: #bdc3c7;
    cursor: pointer; font-weight: bold; line-height: 1; transition: color 0.2s;
}
.btn-close-global:hover { color: #e74c3c; }
.result-panel-global h2 { color: #27ae60; margin: 0 0 15px 0; font-size: 32px; }
.result-panel-global .info { font-size: 20px; color: #7f8c8d; margin-bottom: 25px; font-weight: bold; }
.btn-yenile-global { 
    background: #e67e22; color: white; border: none; padding: 15px 40px; 
    border-radius: 60px; cursor: pointer; font-weight: bold; font-size: 22px;
    box-shadow: 0 5px 0 #d35400; transition: all 0.1s;
}
.btn-yenile-global:active { transform: translateY(3px); box-shadow: 0 2px 0 #d35400; }

/* ==========================================================
   ETKİLEŞİM BÖLGELERİ (MATCH ZONES)
   ========================================================== */
.match-zone-global { 
    position: absolute; z-index: 50; background: rgba(255, 255, 255, 0.01); 
    cursor: pointer; pointer-events: auto; box-sizing: border-box;
    border: 5px solid transparent; transition: all 0.2s ease-in-out;
}

/* HOVER VE SÜRÜKLEME SIRASINDAKİ PARLAMA */
.match-zone-global:hover:not(.matched):not(.no-hover),
.match-zone-global.dragging-active {
    border-color: #ffae00 !important;
    box-shadow: 0 0 25px rgba(255, 174, 0, 0.9) !important;
    z-index: 60;
}

.no-hover { cursor: default; }


.match-zone-global.matched {
    /* --pair-color yoksa varsayılan olarak transparent kullanır */
    border: 5px solid var(--pair-color, transparent) !important;
    box-shadow: 0 0 15px var(--pair-color, transparent) !important;
    pointer-events: none;
}
/* HATALI EŞLEŞME SALLANMA (Açı Koruyan Versiyon) */
@keyframes wiggleAnim {
    0%, 100% { 
        /* Orijinal açısında başla ve bitir */
        transform: rotate(var(--rot, 0deg)) scale(1); 
    }
    20% { 
        /* Sağa salla (Mevcut açı + 7 derece) */
        transform: rotate(calc(var(--rot, 0deg) + 7deg)) scale(1.05); 
    }
    40% { 
        /* Sola salla (Mevcut açı - 7 derece) */
        transform: rotate(calc(var(--rot, 0deg) - 7deg)) scale(1.05); 
    }
    60% { 
        /* Tekrar sağa salla */
        transform: rotate(calc(var(--rot, 0deg) + 7deg)) scale(1.05); 
    }
    80% { 
        /* Tekrar sola salla */
        transform: rotate(calc(var(--rot, 0deg) - 7deg)) scale(1.05); 
    }
}

.wiggle { 
    animation: wiggleAnim 0.4s ease-in-out !important; 
    border-color: #f44336 !important; 
    box-shadow: 0 0 20px rgba(244, 67, 54, 0.8) !important;
    z-index: 100;
    /* Önemli: Geçiş yumuşatmasını kapat ki animasyon anlık başlasın */
    transition: none !important; 
    
}

/* ==========================================================
   İPLER (ROPES)
   ========================================================== */
svg.rope-temp, svg.rope-permanent { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    pointer-events: none; z-index: 100; overflow: visible;
}
.rope-temp line {
    stroke: #ffae00; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 8,5;
}
.rope-permanent line {
    stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}

/* ==========================================================
   EFEKTLER
   ========================================================== */
.particle-star {
    position: absolute; pointer-events: none; width: 25px; height: 25px; background: #FFD700;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    z-index: 110;
}

@keyframes starPop {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(1.5) translateY(-50px); opacity: 0; }
}