/* ==========================================
   淘淘识字大冒险 - 样式与动画
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');

:root {
    --primary-color: #FF7B54;
    --primary-light: #FFB26B;
    --success-color: #2ECC71;
    --danger-color: #E74C3C;
    --accent-yellow: #FFD56B;
    --card-bg: #FFFFFF;
}

body {
    background: linear-gradient(135deg, #FFF9EB 0%, #FFF3E2 50%, #F0F7FF 100%);
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: #2C3E50;
    user-select: none;
    -webkit-user-select: none;
}

/* 楷体与手写大字体，专为汉字辨识设计 */
.font-hanzi {
    font-family: "Kaiti SC", "STKaiti", "KaiTi", "PingFang SC", serif;
}

.font-fun {
    font-family: 'ZCOOL KuaiLe', cursive, -apple-system, sans-serif;
}

/* 动效增强 */
.pop-on-click:active {
    transform: scale(0.96);
}

.btn-bounce {
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}

.btn-bounce:hover {
    transform: translateY(-2px);
}

.btn-bounce:active {
    transform: translateY(2px) scale(0.98);
}

/* 翻转卡片微动效 */
.card-flip-enter-active {
    animation: cardEnter 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes cardEnter {
    0% {
        opacity: 0;
        transform: scale(0.92) translateY(12px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 庆祝彩屑粒子动画 */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #f00;
    border-radius: 50%;
    pointer-events: none;
    z-index: 999;
}

/* 汉字卡片阴影与边框 */
.hanzi-card {
    background: #FFFFFF;
    box-shadow: 0 16px 36px -8px rgba(255, 123, 84, 0.12), 0 6px 16px -4px rgba(0, 0, 0, 0.04);
    border: 3px solid #FFE4D6;
    transition: all 0.25s ease;
}

.hanzi-card:hover {
    box-shadow: 0 20px 40px -8px rgba(255, 123, 84, 0.18), 0 8px 20px -4px rgba(0, 0, 0, 0.06);
    border-color: #FFC4A8;
}

/* 遮罩毛玻璃效果 */
.pinyin-mask {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 进度条动画 */
.progress-bar-fill {
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 打印专属样式 */
@media print {
    body {
        background: #fff;
    }
    .no-print {
        display: none !important;
    }
    .print-only {
        display: block !important;
    }
    .print-sheet {
        page-break-after: always;
    }
}