/* ============================================================
   徽章公共样式（解锁动画 + 徽章墙）
   供所有工具页复用
   ============================================================ */

/* ---------- 徽章墙 ---------- */
.badge-wall {
    margin-top: 30px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    border: 2px solid #e2ecf6;
}
.badge-wall-title {
    font-size: 1.2rem;
    color: #1a73c7;
    margin-bottom: 18px;
    text-align: center;
}
.badge-subject {
    margin-bottom: 20px;
}
.badge-subject:last-child {
    margin-bottom: 0;
}
.badge-subject-title {
    font-size: 1rem;
    font-weight: 700;
    color: #52627a;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.badge-score {
    color: #e67e22;
    font-size: 1.1rem;
}
.badge-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
@media (max-width: 576px) {
    .badge-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- 徽章卡片（未点亮） ---------- */
.badge-item {
    text-align: center;
    padding: 12px 6px;
    border-radius: 16px;
    background: #f7fafd;
    border: 2px solid #eef4fb;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.badge-item .badge-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 6px;
    filter: grayscale(100%);
    opacity: 0.35;
    transition: all 0.3s;
    animation: lockedBreath 3.5s ease-in-out infinite;
    display: inline-block;
}
.badge-item .badge-name {
    font-size: 0.78rem;
    color: #7a8ba0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.badge-item .badge-threshold {
    font-size: 0.7rem;
    color: #b3c1d1;
    margin-top: 4px;
}

/* 未点亮徽章：微弱呼吸（诱惑孩子去点亮） */
@keyframes lockedBreath {
    0%, 100% { transform: scale(1);    opacity: 0.35; }
    50%      { transform: scale(1.06); opacity: 0.50; }
}

/* ---------- 徽章卡片（已点亮） ---------- */
.badge-item.unlocked {
    background: linear-gradient(135deg, #fff8e1, #ffe9b0);
    border-color: #f5c142;
    animation: cardGlow 2s ease-in-out infinite;
}
.badge-item.unlocked .badge-icon {
    filter: none;
    opacity: 1;
    animation: badgeBounce 1.6s ease-in-out infinite;
    transform-origin: center bottom;
    display: inline-block;
    position: relative;
    z-index: 1;
}
.badge-item.unlocked .badge-name {
    color: #8a5a00;
    position: relative;
    z-index: 1;
}
.badge-item.unlocked .badge-threshold {
    color: #d35400;
    position: relative;
    z-index: 1;
}

/* 已点亮：卡片外发光呼吸 */
@keyframes cardGlow {
    0%, 100% {
        box-shadow:
            0 4px 12px rgba(245, 193, 66, 0.4),
            0 0 0 2px rgba(245, 193, 66, 0.2),
            inset 0 0 20px rgba(255, 215, 0, 0.1);
    }
    50% {
        box-shadow:
            0 8px 24px rgba(245, 193, 66, 0.7),
            0 0 0 4px rgba(245, 193, 66, 0.35),
            inset 0 0 32px rgba(255, 215, 0, 0.25);
    }
}

/* 已点亮：图标强烈跳动 + 微摆 */
@keyframes badgeBounce {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 6px rgba(245, 193, 66, 0.6));
    }
    25% {
        transform: scale(1.15) rotate(-4deg);
        filter: drop-shadow(0 0 14px rgba(245, 193, 66, 0.9));
    }
    50% {
        transform: scale(1.25) rotate(0deg);
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1));
    }
    75% {
        transform: scale(1.15) rotate(4deg);
        filter: drop-shadow(0 0 14px rgba(245, 193, 66, 0.9));
    }
}

/* 已点亮：背后旋转金光射线 */
.badge-item.unlocked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160%;
    height: 160%;
    margin-top: -80%;
    margin-left: -80%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 215, 0, 0.35) 20deg,
        transparent 40deg,
        transparent 80deg,
        rgba(255, 215, 0, 0.35) 100deg,
        transparent 120deg,
        transparent 160deg,
        rgba(255, 215, 0, 0.35) 180deg,
        transparent 200deg,
        transparent 240deg,
        rgba(255, 215, 0, 0.35) 260deg,
        transparent 280deg,
        transparent 320deg,
        rgba(255, 215, 0, 0.35) 340deg,
        transparent 360deg
    );
    animation: rayRotate 8s linear infinite;
    z-index: 0;
    pointer-events: none;
}
@keyframes rayRotate {
    to { transform: rotate(360deg); }
}

/* ---------- 新解锁的徽章：闪光扫过 + 一次性爆闪 ---------- */
.badge-item.just-unlocked {
    animation: badgePop 0.6s ease-out, cardGlow 2s ease-in-out infinite;
}
.badge-item.just-unlocked::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    animation: badgeShine 1.5s ease-in-out;
    z-index: 2;
    pointer-events: none;
}
.badge-item.just-unlocked .badge-icon {
    animation: badgeBounce 1.6s ease-in-out infinite, unlockFlash 1.5s ease-out;
}
@keyframes badgePop {
    0%   { transform: scale(0.6); opacity: 0.4; }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes badgeShine {
    0%   { left: -100%; }
    100% { left: 100%; }
}
@keyframes unlockFlash {
    0% {
        transform: scale(0.5) rotate(0deg);
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 1)) brightness(2);
    }
    40% {
        transform: scale(1.4) rotate(15deg);
        filter: drop-shadow(0 0 40px rgba(255, 215, 0, 1)) brightness(1.5);
    }
    100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 6px rgba(245, 193, 66, 0.6)) brightness(1);
    }
}

/* ---------- 解锁弹窗（全屏） ---------- */
.badge-modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: badgeFadeIn 0.3s ease-out;
}
@keyframes badgeFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.badge-modal-card {
    position: relative;
    width: 320px;
    padding: 36px 24px 28px;
    background: linear-gradient(145deg, #fffef8, #fff8e1);
    border-radius: 32px;
    box-shadow:
        0 0 0 3px rgba(255, 215, 0, 0.4),
        0 20px 60px rgba(255, 180, 0, 0.5);
    text-align: center;
    animation: cardBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cardBounce {
    0%   { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}
.badge-modal-halo {
    position: absolute;
    top: 36px;
    left: 50%;
    width: 140px;
    height: 140px;
    margin-left: -70px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ffd700, #ffb300, #ff8f00, #ffb300, #ffd700);
    animation: haloRotate 4s linear infinite;
    filter: blur(10px);
    opacity: 0.7;
    z-index: 0;
}
@keyframes haloRotate {
    to { transform: rotate(360deg); }
}
.badge-modal-icon {
    position: relative;
    z-index: 1;
    font-size: 6rem;
    line-height: 1;
    display: inline-block;
    animation: iconPulse 1.2s ease-in-out infinite;
    filter: drop-shadow(0 6px 16px rgba(255, 180, 0, 0.6));
}
@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
.badge-modal-title {
    position: relative;
    z-index: 1;
    margin-top: 24px;
    font-size: 0.95rem;
    color: #d68f4c;
    font-weight: 600;
    letter-spacing: 2px;
}
.badge-modal-name {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    font-size: 1.6rem;
    font-weight: 800;
    color: #8a5a00;
    letter-spacing: 1px;
    background: linear-gradient(135deg, #ffb300, #ff8f00, #ffb300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.badge-modal-desc {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    font-size: 0.85rem;
    color: #a18a4a;
}
.badge-modal-close {
    position: relative;
    z-index: 1;
    margin-top: 22px;
    padding: 10px 32px;
    border: none;
    border-radius: 40px;
    background: linear-gradient(135deg, #ffd700, #ffb300);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(255, 180, 0, 0.4);
    transition: all 0.2s;
}
.badge-modal-close:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255, 180, 0, 0.5);
}
.badge-modal-card::before,
.badge-modal-card::after {
    content: '✨';
    position: absolute;
    font-size: 1.5rem;
    animation: starTwinkle 2s ease-in-out infinite;
    z-index: 0;
}
.badge-modal-card::before {
    top: 20px;
    left: 24px;
}
.badge-modal-card::after {
    top: 40px;
    right: 24px;
    animation-delay: 0.7s;
}
@keyframes starTwinkle {
    0%, 100% { opacity: 0.4; transform: scale(0.9) rotate(0deg); }
    50%      { opacity: 1;   transform: scale(1.2) rotate(20deg); }
}