@import url('https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400&family=Nunito:wght@400;600;700;800&display=swap');
        
        :root {
            /* 数学概念导向配色 - 代数运算绿色系 */
            --primary: #388e3c;
            --secondary: #4caf50;
            --accent: #66bb6a;
            --success: #2e7d32;
            --warning: #f57c00;
            --danger: #d32f2f;
            --info: #1976d2;
            --light: #e8f5e8;
            --dark: #2d3436;
            --white: #ffffff;
            --shadow: rgba(56, 142, 60, 0.15);
            --card-bg: rgba(255, 255, 255, 0.95);
            --game-bg: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
            --block-bg: #ffffff;
            
            /* 木质公示牌专用颜色 */
            --wood-dark: #5d4037;
            --wood-medium: #6d4c41;
            --wood-light: #8d6e63;
            --wood-highlight: #a1887f;
            --wood-shadow: rgba(93, 64, 55, 0.6);
            --wood-grain: #4e342e;
            
            /* 立体麻将块专用颜色 - 改为浅绿色系 */
            --mahjong-face: #e8f5e8;
            --mahjong-top: #c8e6c9;
            --mahjong-right: #a5d6a7;
            --mahjong-shadow: rgba(0, 0, 0, 0.3);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Nunito', sans-serif;
            background: var(--game-bg);
            min-height: 100vh;
            color: var(--dark);
            overflow: hidden;
            user-select: none;
        }

        /* 游戏容器 */
        .game-container {
            width: 100vw;
            height: 100vh;
            display: grid;
            grid-template-areas: 
                "controls controls controls"
                "header header header"
                "game-area game-area game-area"
                "game-area game-area game-area";
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 70px 80px 1fr 1fr;
            gap: 10px;
            padding: 10px;
            position: relative;
        }

        /* 游戏控制按钮区域 */
        .game-controls {
            grid-area: controls;
            background: var(--card-bg);
            border-radius: 15px;
            padding: 15px 20px;
            box-shadow: 0 4px 16px var(--shadow);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            z-index: 10;
        }

        .control-btn {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            font-size: 1.1em;
            font-weight: 700;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 6px 16px rgba(56, 142, 60, 0.3);
            font-family: 'Nunito', sans-serif;
            min-width: 140px;
        }

        .control-btn:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 8px 24px rgba(56, 142, 60, 0.4);
        }

        .control-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .restart-btn {
            background: linear-gradient(135deg, var(--warning) 0%, #ff9800 100%);
            box-shadow: 0 6px 16px rgba(245, 124, 0, 0.3);
        }

        .restart-btn:hover {
            box-shadow: 0 8px 24px rgba(245, 124, 0, 0.4);
        }

        /* 游戏头部 */
        .game-header {
            grid-area: header;
            background: var(--card-bg);
            border-radius: 15px;
            padding: 15px 20px;
            box-shadow: 0 4px 16px var(--shadow);
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10;
        }

        .game-title {
            font-family: 'Fredoka One', cursive;
            font-size: 1.8em;
            color: var(--primary);
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .game-stats {
            display: flex;
            gap: 20px;
            align-items: center;
        }

        .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 12px;
            background: var(--light);
            border-radius: 10px;
            border: 2px solid var(--primary);
        }

        .stat-label {
            font-size: 0.8em;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 2px;
        }

        .stat-value {
            font-size: 1.2em;
            font-weight: 800;
            color: var(--dark);
        }

        .timer {
            font-family: 'Fredoka One', cursive;
            font-size: 1.4em;
            color: var(--danger);
            background: var(--white);
            padding: 8px 16px;
            border-radius: 20px;
            border: 2px solid var(--danger);
            box-shadow: 0 2px 8px rgba(211, 47, 47, 0.2);
        }

        /* 游戏主区域 - 绿色背景 */
        .game-area {
            grid-area: game-area;
            background: var(--game-bg);
            border-radius: 15px;
            padding: 20px;
            box-shadow: inset 0 4px 16px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
        }

        /* 游戏未开始遮罩 */
        .game-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.3);
            backdrop-filter: blur(4px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 20;
            border-radius: 15px;
            transition: opacity 0.5s ease;
        }

        .game-overlay.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .overlay-text {
            font-family: 'Fredoka One', cursive;
            font-size: 2.5em;
            color: var(--white);
            text-shadow: 0 4px 8px rgba(0,0,0,0.5);
            text-align: center;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.05); opacity: 1; }
        }

        /* 交错重叠的算式积木堆 */
        .expression-blocks {
            position: relative;
            width: 100%;
            height: 100%;
        }

        /* 立体麻将块样式的算式方块 */
        .expression-block {
            position: absolute;
            cursor: grab;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            font-weight: 700;
            font-size: 1.5em;
            color: var(--dark);
            user-select: none;
            
            /* 更大的尺寸 */
            min-width: 160px;
            min-height: 90px;
            
            /* 默认层级，越后面的z-index越高（在上层） */
            z-index: 1;
            
            /* 3D变换容器 */
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        .expression-block.disabled {
            pointer-events: none;
            opacity: 0.7;
        }

        /* 麻将块的3D结构 */
        .mahjong-block {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all 0.3s ease;
        }

        /* 麻将块的各个面 */
        .mahjong-face {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 700;
            font-size: 1em;
            color: var(--dark);
            border: 2px solid #81c784;
        }

        /* 正面 - 改为浅绿色 */
        .mahjong-front {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--mahjong-face) 0%, #dcedc8 100%);
            border-radius: 8px;
            transform: translateZ(8px);
            box-shadow: 
                inset 0 1px 0 rgba(255,255,255,0.8),
                inset 0 -1px 0 rgba(0,0,0,0.1);
        }

        /* 顶面 - 改为浅绿色 */
        .mahjong-top {
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, var(--mahjong-top) 0%, #aed581 100%);
            transform: rotateX(90deg) translateZ(4px);
            transform-origin: top;
            border-radius: 8px 8px 0 0;
        }

        /* 右侧面 - 改为浅绿色 */
        .mahjong-right {
            width: 8px;
            height: 100%;
            background: linear-gradient(180deg, var(--mahjong-right) 0%, #81c784 100%);
            transform: rotateY(90deg) translateZ(calc(100% - 8px));
            transform-origin: right;
            border-radius: 0 8px 8px 0;
            right: 0;
        }

        /* 底面阴影 */
        .mahjong-shadow {
            position: absolute;
            width: 105%;
            height: 105%;
            background: radial-gradient(ellipse at center, var(--mahjong-shadow) 0%, transparent 70%);
            border-radius: 12px;
            transform: translateZ(-2px) translateX(3px) translateY(3px);
            opacity: 0.4;
            z-index: -1;
        }

        .expression-block:hover:not(.disabled) {
            transform: translateY(-8px) scale(1.1);
            z-index: 50;
        }

        .expression-block:hover:not(.disabled) .mahjong-block {
            transform: rotateX(-5deg) rotateY(5deg) translateZ(4px);
        }

        .expression-block.dragging {
            transform: rotate(8deg) scale(1.2);
            z-index: 100;
            cursor: grabbing;
        }

        .expression-block.dragging .mahjong-block {
            transform: rotateX(-10deg) rotateY(10deg) translateZ(8px);
            filter: brightness(1.1);
        }

        .expression-block.correct-drop {
            animation: correctDrop 0.8s ease-out forwards;
        }

        .expression-block.wrong-drop {
            animation: wrongDrop 1s ease-out forwards;
        }

        /* 回弹到原位置的动画 */
        .expression-block.return-to-origin {
            transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* 层级系统 - 创建明显的重叠效果 */
        .expression-block.layer-1 { z-index: 1; }
        .expression-block.layer-2 { z-index: 2; }
        .expression-block.layer-3 { z-index: 3; }
        .expression-block.layer-4 { z-index: 4; }
        .expression-block.layer-5 { z-index: 5; }

        /* 重叠阴影效果 */
        .expression-block.overlapped .mahjong-shadow {
            opacity: 0.6;
            transform: translateZ(-2px) translateX(4px) translateY(4px);
        }

        @keyframes correctDrop {
            0% { 
                transform: scale(1.2); 
                opacity: 1; 
            }
            30% { 
                transform: scale(1.5); 
                opacity: 0.9; 
                filter: brightness(1.3) drop-shadow(0 0 20px var(--success));
            }
            100% { 
                transform: scale(0) rotate(360deg); 
                opacity: 0; 
            }
        }

        @keyframes wrongDrop {
            0% { transform: translateX(0) rotate(0deg); }
            20% { transform: translateX(-15px) rotate(-5deg); filter: brightness(1.2) hue-rotate(10deg); }
            40% { transform: translateX(15px) rotate(5deg); filter: brightness(1.1) hue-rotate(-10deg); }
            60% { transform: translateX(-10px) rotate(-3deg); filter: brightness(1.05); }
            80% { transform: translateX(5px) rotate(2deg); filter: brightness(1.02); }
            100% { transform: translateX(0) rotate(0deg); filter: brightness(1); }
        }

        /* 散落分布的木质公示牌结果卡片 */
        .result-cards-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 5;
        }

        .result-cards-container.disabled {
            pointer-events: none;
        }

        /* 卡通风格木质公示牌 */
        .result-card {
            position: absolute;
            pointer-events: auto;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 130px;
            min-height: 120px; /* 增加高度以容纳支撑柱 */
            display: flex;
            align-items: center;
            justify-content: center;
            
            /* 3D变换容器 */
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        .result-card.disabled {
            pointer-events: none;
            opacity: 0.7;
        }

        /* 木质公示牌主体结构 */
        .wooden-sign {
            position: relative;
            width: 100%;
            height: 85%; /* 为底部支撑柱留出空间 */
            transform-style: preserve-3d;
            transition: all 0.3s ease;
        }

        /* 木质背景板 */
        .wooden-board {
            position: relative;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--wood-medium) 0%, var(--wood-dark) 100%);
            border-radius: 12px;
            border: 4px solid var(--wood-dark);
            box-shadow: 
                0 8px 20px var(--wood-shadow),
                inset 0 2px 0 var(--wood-highlight),
                inset 0 -2px 0 var(--wood-grain);
            
            /* 木纹纹理 */
            background-image: 
                repeating-linear-gradient(
                    90deg,
                    transparent,
                    transparent 2px,
                    rgba(78, 52, 46, 0.1) 2px,
                    rgba(78, 52, 46, 0.1) 4px
                ),
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 8px,
                    rgba(78, 52, 46, 0.05) 8px,
                    rgba(78, 52, 46, 0.05) 12px
                );
            
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 1.8em;
            color: var(--white);
            text-shadow: 
                0 2px 4px rgba(0,0,0,0.6),
                0 1px 0 rgba(255,255,255,0.1);
        }

        /* 木桩装饰 - 四个角 */
        .wooden-stake {
            position: absolute;
            width: 16px;
            height: 16px;
            background: radial-gradient(circle, var(--wood-light) 30%, var(--wood-dark) 70%);
            border-radius: 50%;
            border: 2px solid var(--wood-grain);
            box-shadow: 
                inset 0 1px 0 var(--wood-highlight),
                0 2px 4px rgba(0,0,0,0.3);
        }

        .wooden-stake.top-left {
            top: -8px;
            left: -8px;
        }

        .wooden-stake.top-right {
            top: -8px;
            right: -8px;
        }

        .wooden-stake.bottom-left {
            bottom: -8px;
            left: -8px;
        }

        .wooden-stake.bottom-right {
            bottom: -8px;
            right: -8px;
        }

        /* 底部支撑柱 */
        .support-posts {
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 20px;
        }

        .support-post {
            width: 12px;
            height: 20px;
            background: linear-gradient(180deg, var(--wood-medium) 0%, var(--wood-dark) 100%);
            border-radius: 6px 6px 2px 2px;
            border: 1px solid var(--wood-grain);
            box-shadow: 
                0 2px 4px rgba(0,0,0,0.4),
                inset 0 1px 0 var(--wood-highlight);
            
            /* 木纹效果 */
            background-image: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(78, 52, 46, 0.1) 2px,
                rgba(78, 52, 46, 0.1) 3px
            );
        }

        /* 复古边框装饰 */
        .wooden-board::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 8px;
            right: 8px;
            bottom: 8px;
            border: 2px solid rgba(161, 136, 127, 0.6);
            border-radius: 8px;
            pointer-events: none;
        }

        /* 木质纹理细节 */
        .wooden-board::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(ellipse at 20% 30%, rgba(78, 52, 46, 0.1) 2px, transparent 2px),
                radial-gradient(ellipse at 80% 70%, rgba(78, 52, 46, 0.1) 1px, transparent 1px),
                radial-gradient(ellipse at 60% 20%, rgba(161, 136, 127, 0.1) 1px, transparent 1px);
            border-radius: 8px;
            pointer-events: none;
        }

        /* 悬停效果 */
        .result-card:hover:not(.disabled) {
            transform: scale(1.1) translateY(-4px);
        }

        .result-card:hover:not(.disabled) .wooden-sign {
            transform: rotateX(-5deg) rotateY(5deg) translateZ(4px);
        }

        .result-card:hover:not(.disabled) .wooden-board {
            box-shadow: 
                0 12px 28px var(--wood-shadow),
                inset 0 2px 0 var(--wood-highlight),
                inset 0 -2px 0 var(--wood-grain),
                0 0 20px rgba(161, 136, 127, 0.3);
        }

        /* 拖拽悬停效果 */
        .result-card.drag-over {
            transform: scale(1.25) translateY(-8px);
        }

        .result-card.drag-over .wooden-sign {
            transform: rotateX(-8deg) rotateY(8deg) translateZ(8px);
        }

        .result-card.drag-over .wooden-board {
            background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
            border-color: var(--success);
            box-shadow: 
                0 16px 36px rgba(46, 125, 50, 0.6),
                inset 0 2px 0 rgba(255,255,255,0.3),
                0 0 30px var(--success);
        }

        /* 正确匹配动画 */
        .result-card.correct-match .wooden-board {
            animation: correctWoodenMatch 0.8s ease-out;
        }

        .result-card.wrong-match .wooden-board {
            animation: wrongWoodenMatch 0.6s ease-out;
        }

        @keyframes correctWoodenMatch {
            0% { 
                background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
                border-color: var(--success);
            }
            50% { 
                background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
                border-color: var(--success);
                transform: scale(1.4) translateZ(8px);
                box-shadow: 0 0 40px var(--success);
            }
            100% { 
                background: linear-gradient(135deg, var(--wood-medium) 0%, var(--wood-dark) 100%);
                border-color: var(--wood-dark);
                transform: scale(1) translateZ(0);
            }
        }

        @keyframes wrongWoodenMatch {
            0% { 
                background: linear-gradient(135deg, #ffcdd2 0%, #ef9a9a 100%);
                border-color: var(--danger);
            }
            50% { 
                background: linear-gradient(135deg, #f44336 0%, #e57373 100%);
                border-color: var(--danger);
                transform: scale(1.35) translateZ(6px);
                box-shadow: 0 0 40px var(--danger);
            }
            100% { 
                background: linear-gradient(135deg, var(--wood-medium) 0%, var(--wood-dark) 100%);
                border-color: var(--wood-dark);
                transform: scale(1) translateZ(0);
            }
        }

        /* 成功特效 */
        .success-particle {
            position: absolute;
            width: 12px;
            height: 12px;
            background: var(--warning);
            border-radius: 50%;
            pointer-events: none;
            animation: particle 1.2s ease-out forwards;
        }

        @keyframes particle {
            0% {
                transform: scale(1) translate(0, 0);
                opacity: 1;
            }
            100% {
                transform: scale(0) translate(var(--dx), var(--dy));
                opacity: 0;
            }
        }

        /* 胜利界面 */
        .victory-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }

        .victory-screen.show {
            opacity: 1;
            pointer-events: auto;
        }

        .victory-content {
            background: var(--card-bg);
            border-radius: 32px;
            padding: 48px;
            text-align: center;
            box-shadow: 0 32px 64px rgba(0,0,0,0.3);
            backdrop-filter: blur(20px);
            border: 3px solid var(--primary);
            max-width: 500px;
            width: 90%;
        }

        .victory-title {
            font-family: 'Fredoka One', cursive;
            font-size: 3em;
            color: var(--primary);
            margin-bottom: 24px;
            text-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .victory-stats {
            font-size: 1.2em;
            font-weight: 600;
            color: var(--dark);
            margin-bottom: 32px;
            line-height: 1.6;
        }

        .victory-btn {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            border: none;
            padding: 16px 32px;
            font-size: 1.2em;
            font-weight: 700;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 8px 24px rgba(56, 142, 60, 0.3);
            font-family: 'Nunito', sans-serif;
        }

        .victory-btn:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 12px 32px rgba(56, 142, 60, 0.4);
        }

        /* 响应式设计 */
        @media (max-width: 1024px) {
            .game-container {
                grid-template-rows: 60px 70px 1fr 1fr;
            }
            
            .game-controls {
                padding: 10px 15px;
            }
            
            .control-btn {
                font-size: 1em;
                padding: 10px 20px;
                min-width: 120px;
            }
            
            .game-header {
                padding: 10px 15px;
            }
            
            .game-title {
                font-size: 1.5em;
            }
            
            .expression-block {
                font-size: 1.3em;
                min-width: 140px;
                min-height: 80px;
            }
            
            .result-card {
                min-width: 115px;
                min-height: 105px;
            }
            
            .wooden-board {
                font-size: 1.6em;
            }
        }

        @media (max-width: 768px) {
            .game-container {
                padding: 5px;
                gap: 5px;
                grid-template-rows: 55px 60px 1fr 1fr;
            }
            
            .game-controls {
                padding: 8px 12px;
                gap: 15px;
            }
            
            .control-btn {
                font-size: 0.9em;
                padding: 8px 16px;
                min-width: 100px;
            }
            
            .game-header {
                padding: 8px 12px;
            }
            
            .game-title {
                font-size: 1.3em;
            }
            
            .stat-item {
                padding: 6px 10px;
            }
            
            .timer {
                font-size: 1.1em;
                padding: 6px 12px;
            }
            
            .expression-block {
                font-size: 1.2em;
                min-width: 130px;
                min-height: 75px;
            }
            
            .result-card {
                min-width: 105px;
                min-height: 95px;
            }
            
            .wooden-board {
                font-size: 1.4em;
            }
            
            .wooden-stake {
                width: 12px;
                height: 12px;
            }
            
            .support-post {
                width: 10px;
                height: 16px;
            }
            
            .overlay-text {
                font-size: 2em;
            }
        }

        @media (max-width: 480px) {
            .game-stats {
                gap: 10px;
            }
            
            .control-btn {
                font-size: 0.8em;
                padding: 6px 12px;
                min-width: 90px;
            }
            
            .expression-block {
                font-size: 1.1em;
                min-width: 120px;
                min-height: 70px;
            }
            
            .result-card {
                min-width: 95px;
                min-height: 85px;
            }
            
            .wooden-board {
                font-size: 1.3em;
            }
            
            .victory-content {
                padding: 32px 24px;
            }
            
            .victory-title {
                font-size: 2.2em;
            }
            
            .overlay-text {
                font-size: 1.8em;
            }
        }