/**
 * Token Pool Alignment & Design Fixes
 * Matematiksel token'ların ortalanması ve tasarım iyileştirmeleri
 */

/* Token pool container için ek düzenlemeler */
#token-pool {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px !important;
    min-height: 120px !important;
}

/* Token butonlarının alignment'ı - Modern ve çok büyük */
.token-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    min-height: 56px !important;
    min-width: 100px !important;
    max-width: 160px !important;
    padding: 16px 20px !important;
    border-radius: 20px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border: 2px solid #dee2e6 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease, opacity 0.2s ease, visibility 0.2s ease !important;
}

/* Modern hover efektleri */
.token-item:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
    border-color: #6c757d !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.token-item:active {
    transform: translateY(0px) scale(0.98) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

/* Seçili/tıklandığında görsel feedback */
.token-item.selected {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    color: white !important;
    border-color: #0056b3 !important;
}

/* Kullanılamaz durumda olan token'lar */
.token-item:disabled,
.token-item.disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
    transform: none !important;
}

/* Titreşim animasyonu */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px) rotate(-1deg); }
    20%, 40%, 60%, 80% { transform: translateX(2px) rotate(1deg); }
}

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

/* Tıklama efekti */
.token-item.clicked {
    animation: shake 0.3s ease-in-out, pulse-scale 0.2s ease-in-out !important;
}

/* Başarılı seçim efekti */
.token-item.success-selected {
    animation: pulse-scale 0.4s ease-in-out !important;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
    border-color: #28a745 !important;
}

/* Kontrol et butonu animasyonları */
@keyframes success-flash {
    0%, 100% { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); transform: scale(1); }
    50% { background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%); transform: scale(1.05); }
}

@keyframes error-flash {
    0%, 100% { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); transform: scale(1); }
    25%, 75% { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); transform: scale(0.98); }
    50% { background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%); transform: scale(1.02); }
}

/* Kontrol et butonu feedback sınıfları */
#check-answer-btn.success-feedback {
    animation: success-flash 0.6s ease-in-out !important;
    border-color: #28a745 !important;
}

#check-answer-btn.error-feedback {
    animation: error-flash 0.8s ease-in-out !important;
    border-color: #dc3545 !important;
}

/* MathJax içerikleri için özel düzenlemeler */
.token-item mjx-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.token-item mjx-container svg {
    display: block !important;
    margin: 0 auto !important;
}

/* LaTeX içeriği için merkezi hizalama */
.token-item .latex-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
}

/* Mobil için responsive ayarlar - büyük butonlar */
@media (max-width: 768px) {
    .token-item {
        min-height: 50px !important;
        min-width: 90px !important;
        max-width: 140px !important;
        padding: 14px 18px !important;
        font-size: 16px !important;
        border-radius: 18px !important;
    }

    #token-pool {
        gap: 10px !important;
        padding: 12px !important;
        min-height: 100px !important;
    }
}

@media (max-width: 480px) {
    .token-item {
        min-height: 46px !important;
        min-width: 80px !important;
        max-width: 120px !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
        border-radius: 16px !important;
    }

    #token-pool {
        gap: 8px !important;
        padding: 10px !important;
        min-height: 90px !important;
    }
}