:root {
            --card-size: 140px;
            --text-width: 20;
            --image-size: 100%;
        }

        body {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            font-family: 'Comic Sans MS', cursive;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

     h3 {
         margin-top: -5px;
         margin-bottom: 3px;
         align-items: center;
     }

        .timer {
            background: rgba(255,255,255,0.9);
            padding: 10px 20px;
            border-radius: 25px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            font-size: 18px;
            color: #ff6b6b;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .game-board {
            width: 80%;
            /*max-width: 800px;*/
           display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
             margin: 0 auto; 
              padding: 0 10px; /* 新增内边距 */
   
        }

        .column {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(calc(var(--card-size)*var(--text-width)), 1fr));
            justify-items: center;
            gap: 15px;
            padding: 15px;
            background: rgba(255,255,255,0.85);
            border-radius: 15px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }

        .word {
            width: calc(var(--card-size) * var(--text-width));
            /*height: var(--card-size);*/
            /*aspect-ratio: 1/1;*/
            background: white;
            border-radius: 12px;
          
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            font-size: 1.2em;
            text-align: center;
            cursor: pointer;
            box-shadow: 0 2px 6px #96c93d;
            line-height: 1.3;
            background: linear-gradient(45deg, 
        #ff6b6b 10%, 
        #4ecdc4 30%, 
        #45b7d1 50%, 
        #96c93d 70%, 
        #ff6b6b 90%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    
    animation: float 3s ease-in-out infinite, 
               shine 4s linear infinite;
    text-shadow: 0 0 15px rgba(255,107,107,0.5),
                 0 0 30px rgba(78,205,196,0.3),
                 0 0 50px rgba(150,201,61,0.2);
            
        }
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}
        .image {
            width: var(--card-size);
            height: var(--card-size);
            aspect-ratio: 1/1;
            background: white;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            /*padding: 5px;*/
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        }

        .image img {
            width: var(--image-size);
            /*height: var(--image-size);*/
            object-fit: contain;
            border-radius: 8px;
            aspect-ratio: 1/1;
        }

        .selected {
            transform: scale(1.05);
            box-shadow: 0 0 15px rgba(255,107,107,0.3);
            border: 3px solid #ff9f43;
            animation: pulse 0.8s infinite;
        }

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

        .matched {
            animation: vanish 0.6s forwards;
        }

        @keyframes vanish {
            to { opacity: 0; transform: scale(0.8); }
        }

        .restart-btn {
            background: #ff6b6b;
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 16px;
        }

        .restart-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 3px 8px rgba(255,107,107,0.4);
        }

        @media (max-width: 768px) {
            :root {
                --card-size: 90px;
                --text-width: 0.8;
                --image-size: 90%;
            }
            
             body {
        padding: 10px 5px; /* 减少左右内边距 */
    }
          
            .word {
            font-size:0.9em;
           
            }
            .column {
                  
        gap: 10px;
        padding: 10px;
         grid-template-columns: repeat(3, 1fr); /* 三列增加信息密度 */
                
            }
            .game-board {
                width: 90%;         /* 增加两侧留白 */
                grid-template-columns: 1fr;
                
                 
                padding: 0 3%;
                /*transform: translateX(-1%); /* 微调视觉平衡 */
                
                /* 防挤压保护 */
                min-width: 300px; /* 最小宽度保证布局完整 */
               
            }
            h3 {
                font-size:1em;
            }
            
             .fa-weixin {
                font-size: 1rem;
            }

            .fa-book {
                font-size: 1rem;
            }
        }

        @media (min-width: 1200px) {
            :root {
                --card-size: 160px;
                --text-width: 0.7;
            }
            .column {
           
           grid-template-columns: repeat(3, 1fr);
           
            }
         
        }
        

        /* 统计页面样式 */
        .stats-page {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.98);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            flex-direction: column;
            
            visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
        }
        
        .stats-page:not(.hidden) {
    visibility: visible;
    opacity: 1;
}

        .stats-header {
            display: flex;
            justify-content: space-between;
            width: 400px;
            margin-bottom: 20px;
        }

        .stats-content {
            background: white;
            padding: 30px 40px;
            border-radius: 20px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 400px;
        }

        .stats-item {
            font-size: 1.2em;
            margin: 15px 0;
            color: #666;
        }

        .hidden {
             display: none !important;
        }
        
        /* 新增碎片样式 */
.debris {
    position: fixed;
    width: 12px;
    height: 12px;
    background: #ff9f43;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    animation: debrisFly 1.5s ease-out forwards;
    opacity: 0.8;
    transform-origin: center;
}

@keyframes debrisFly {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(
            calc(var(--tx) * 1px), 
            calc(var(--ty) * 1px)
        ) rotate(720deg) scale(0);
        opacity: 0;
    }
}

/* 添加随机形状 */
.debris:nth-child(3n) {
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.debris:nth-child(3n+1) {
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* 爆炸光效 */
.blast {
    position: fixed;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, 
        rgba(255,165,0,0.8) 0%, 
        rgba(255,165,0,0) 70%);
    mix-blend-mode: screen;
    animation: blast 0.6s ease-out forwards;
}

@keyframes blast {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(4); opacity: 0; }
}

               /* 导航容器 */
       
               /* 导航容器 */
        .final-nav {
            position: fixed;
            right: -10px;
            top: 30%;
            width: clamp(70px, 8vw, 90px);
            height: 20vh;
            min-height: 160px;
            
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 2vh 0;
            
            z-index: 1000;
            border-radius: 15px 0 0 15px;
        }

        /* 品牌整体链接 */
        .brand-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            margin-bottom: 2vh;
            padding: 0 10px;
        }

        .fa-weixin {
            font-size: clamp(1.5rem, 2.5vw, 2rem);
            color: green;
            margin-bottom: 1vh;
            transition: transform 0.3s ease;
        }

        .brand-text {
            font-family: 'ZCOOL KuaiLe', cursive;
            font-size: clamp(0.8rem, 1.4vw, 1.1rem);
            color: var(--text-color);
            writing-mode: vertical-rl;
            letter-spacing: 0.15em;
            line-height: 1.3;
            white-space: nowrap;
        }

        /* 目录区域 */
        .menu-section {
            flex: 1;
            display: flex;
            align-items: center;
            width: 100%;
        }

        .menu-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            padding: 1vh 0;
            width: 100%;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .fa-book {
            font-size: clamp(1.2rem, 2vw, 1.5rem);
            color: red;
            margin-bottom: 0.8vh;
        }

        .menu-text {
            font-size: clamp(0.8rem, 1.4vw, 1.1rem);
            color: var(--text-color);
            /*font-weight: 500;*/
            writing-mode: vertical-rl;
            letter-spacing: 0.1em;
            white-space: nowrap;
        }

        /* 交互效果 */
        .brand-link:hover .fa-weixin {
            transform: rotate(-15deg) scale(1.1);
        }

        .menu-link:hover .fa-book {
            animation: bounce 0.8s ease;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }

        /* 移动端优化 */
        @media (max-width: 768px) {
           


            .final-nav {
                
                height: 25vh;
                
                padding: 1.5vh 0;
                
            }
          .fa-book  {
               font-size: 1.2em; 
            }
            .fa-weixin {
                font-size: 1.2em;  
            }
            .brand-text {
                writing-mode: vertical-rl;
                font-size: 1em;
                letter-spacing: 0.1em;
            }

            .menu-text {
                font-size: 1em;
            }
        }

        @media (max-width: 480px) and (orientation: portrait) {
            #chinese-text { font-size: 1rem; }
            .brand-text,
            .menu-text {
                writing-mode: vertical-rl;
                display: block !important; /* 强制显示文字 */
                font-size: 0.6rem;
            }

            .final-nav {
                width: 65px;
                min-height: 180px;
                       
                width: clamp(60px, 12vw, 80px);
            }

            .fa-weixin {
                font-size: 1rem;
            }

            .fa-book {
                font-size: 1rem;
            }
        }

        @media (max-height: 600px) {
            
            .final-nav {
                height: 25vh;
                min-height: 140px;
            }
        }