.notification-container{position:fixed;top:var(--spacing-lg);right:var(--spacing-lg);z-index:1000;display:flex;flex-direction:column;gap:var(--spacing-sm);max-width:400px}.notification{background:var(--bg-primary);border-radius:var(--border-radius-sm);box-shadow:var(--shadow-lg);padding:var(--spacing-md);cursor:pointer;transform:translate(400px);animation:slideInRight .3s ease-out forwards;border-left:4px solid var(--primary-color)}.notification.success{border-left-color:#2ecc71}.notification.warning{border-left-color:#f39c12}.notification.error{border-left-color:#e74c3c}.notification-title{font-weight:700;margin-bottom:var(--spacing-xs);color:var(--text-primary)}.notification-message{color:var(--text-secondary);font-size:var(--font-sm)}@keyframes slideInRight{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@media (max-width: 768px){.notification-container{top:var(--spacing-sm);right:var(--spacing-sm);left:var(--spacing-sm);max-width:none}.notification{transform:translateY(-100px);animation:slideInDown .3s ease-out forwards}}@keyframes slideInDown{0%{transform:translateY(-100px);opacity:0}to{transform:translateY(0);opacity:1}}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-sm)}.btn{background:var(--primary-color);color:var(--text-white);border:none;padding:12px 24px;border-radius:var(--border-radius-lg);cursor:pointer;font-size:var(--font-base);font-weight:700;transition:var(--transition);min-width:100px;text-align:center;text-decoration:none;display:inline-block;line-height:1}.btn:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-secondary{background:var(--text-secondary)}.btn-secondary:hover{background:var(--text-primary)}.btn-danger{background:#e74c3c}.btn-danger:hover{background:#c0392b}.btn-success{background:#2ecc71}.btn-success:hover{background:#27ae60}.card{background:var(--bg-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);padding:var(--spacing-xl);max-width:500px;width:100%;transition:var(--transition)}.card-large{max-width:600px}.card-small{max-width:400px;padding:var(--spacing-lg)}@media (max-width: 768px){.app{padding:var(--spacing-xs)}.card{padding:var(--spacing-lg)}.btn{padding:10px 20px;font-size:var(--font-sm)}}.game-card{border-radius:var(--spacing-md);padding:var(--spacing-xl) var(--spacing-lg);cursor:pointer;transition:var(--transition);color:var(--text-white);border:none;box-shadow:var(--shadow-md);text-align:center;width:100%;min-height:120px;display:flex;flex-direction:column;justify-content:center;align-items:center}.game-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #0000004d}.game-card .game-title{font-size:var(--font-xl);font-weight:700;margin-bottom:var(--spacing-sm)}.game-card .game-desc{font-size:var(--font-sm);opacity:.9;line-height:1.4}@media (max-width: 768px){.game-card{padding:var(--spacing-lg) var(--spacing-md);min-height:100px}.game-card .game-title{font-size:var(--font-lg)}.game-card .game-desc{font-size:var(--font-xs)}}.home-page{min-height:100vh;width:100%;display:flex;justify-content:center;align-items:center;padding:var(--spacing-sm)}.game-selection{background:var(--bg-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);padding:var(--spacing-xl);max-width:600px;width:100%;text-align:center}.main-title{font-size:var(--font-4xl);color:var(--text-primary);margin-bottom:var(--spacing-sm);font-weight:700}.main-subtitle{color:var(--text-secondary);font-size:var(--font-lg);margin-bottom:var(--spacing-xl)}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.audio-controls{display:flex;align-items:center;justify-content:center;gap:var(--spacing-lg);padding-top:var(--spacing-lg);border-top:1px solid #eee}.audio-btn{background:none;border:none;font-size:var(--font-xl);cursor:pointer;padding:var(--spacing-sm);border-radius:50%;transition:var(--transition);width:50px;height:50px;display:flex;align-items:center;justify-content:center}.audio-btn:hover{background:#0000001a}.audio-btn.muted{opacity:.5}.volume-control{display:flex;align-items:center;gap:var(--spacing-sm)}.volume-label{font-size:var(--font-sm);color:var(--text-secondary);white-space:nowrap}.volume-slider{width:100px;height:4px;background:#ddd;border-radius:2px;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{appearance:none;width:16px;height:16px;background:var(--primary-color);border-radius:50%;cursor:pointer}.volume-slider::-moz-range-thumb{width:16px;height:16px;background:var(--primary-color);border-radius:50%;cursor:pointer;border:none}.volume-value{font-size:var(--font-sm);color:var(--text-secondary);min-width:35px;text-align:right}@media (max-width: 768px){.home-page{padding:var(--spacing-xs)}.game-selection{padding:var(--spacing-lg);max-width:none;width:100%}.main-title{font-size:var(--font-3xl)}.main-subtitle{font-size:var(--font-base)}.games-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacing-md)}.audio-controls{flex-direction:column;gap:var(--spacing-md)}}.game-layout{min-height:100vh;width:100%;display:flex;flex-direction:column;background:var(--bg-secondary)}.game-navbar{position:sticky;top:0;z-index:100;background:var(--bg-primary);border-bottom:1px solid rgba(0,0,0,.1);box-shadow:0 1px 3px #0000001a;padding-top:env(safe-area-inset-top)}.navbar-content{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;min-height:56px;padding:0 var(--spacing-md);max-width:100%}.nav-back-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:transparent;border-radius:50%;color:var(--text-primary);cursor:pointer;transition:var(--transition);-webkit-tap-highlight-color:transparent}.nav-back-btn:hover{background:#0000000d}.nav-back-btn:active{background:#0000001a;transform:scale(.95)}.back-icon{width:24px;height:24px;stroke-width:2}.nav-title-area{text-align:center;overflow:hidden}.nav-title{font-size:var(--font-lg);font-weight:600;color:var(--text-primary);margin:0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.nav-subtitle{font-size:var(--font-xs);color:var(--text-secondary);margin:2px 0 0;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.nav-actions{display:flex;align-items:center;justify-content:flex-end}.nav-spacer{width:40px;height:40px}.game-main{flex:1;width:100%;overflow-y:auto;background:var(--bg-secondary)}.game-content-wrapper{min-height:calc(100vh - 56px);padding:var(--spacing-lg);padding-left:max(var(--spacing-lg),env(safe-area-inset-left));padding-right:max(var(--spacing-lg),env(safe-area-inset-right));padding-bottom:max(var(--spacing-lg),env(safe-area-inset-bottom))}@media (max-width: 768px){.navbar-content{min-height:56px;padding:0 var(--spacing-md)}.nav-title{font-size:var(--font-base)}.nav-subtitle{font-size:var(--font-xs)}.game-content-wrapper{padding:var(--spacing-md)}}@media (max-width: 480px){.navbar-content{min-height:52px;padding:0 var(--spacing-sm);grid-template-columns:44px 1fr 44px}.nav-back-btn{width:36px;height:36px}.back-icon{width:20px;height:20px}.nav-title{font-size:var(--font-sm)}.nav-subtitle{font-size:var(--font-xs)}.nav-spacer{width:36px;height:36px}.game-content-wrapper{padding:var(--spacing-sm);min-height:calc(100vh - 52px)}}.control-section{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-md);width:100%;padding:var(--spacing-md);background-color:var(--bg-secondary);border-radius:var(--border-radius-sm);margin-bottom:var(--spacing-md)}.primary-controls{display:flex;gap:var(--spacing-sm)}.status-info{display:flex;gap:var(--spacing-md)}.moves-counter{font-weight:700;color:var(--text-primary)}.game-instructions{width:100%;margin-bottom:var(--spacing-md)}.drag-instructions{text-align:center;color:var(--text-secondary);font-size:var(--font-sm);padding:var(--spacing-sm);background:#667eea1a;border-radius:var(--border-radius-sm);margin-bottom:var(--spacing-sm)}.backup-controls-btn{background:var(--primary-color);color:#fff;border:none;padding:4px 8px;border-radius:4px;font-size:var(--font-xs);cursor:pointer;margin-left:var(--spacing-sm)}.direction-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-xs);max-width:150px;margin:0 auto}.direction-btn{background:var(--primary-color);color:#fff;border:none;border-radius:4px;padding:8px;cursor:pointer;font-size:var(--font-base);transition:var(--transition)}.direction-btn:hover:not(:disabled){background:var(--primary-hover)}.direction-btn:disabled{opacity:.5;cursor:not-allowed}.game-board-container{width:100%;max-width:400px;aspect-ratio:4 / 5;position:relative;margin:0 auto;padding:var(--spacing-xl)}.game-board{width:100%;height:100%;background:#8b4513;border:4px solid #654321;border-radius:var(--border-radius-sm);position:relative;overflow:visible;box-sizing:border-box;margin:8px}.piece{position:absolute;border:2px solid #333;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--font-sm);cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;z-index:5;box-shadow:0 2px 4px #0003;touch-action:none}.piece:hover{transform:scale(1.05);z-index:10;box-shadow:0 4px 8px #0000004d}.piece.selected{border-color:gold;border-width:3px;box-shadow:0 0 15px #ffd700cc;z-index:15;transform:scale(1.05)}.piece.dragging{z-index:20;transform:scale(1.1);box-shadow:0 6px 12px #0006;transition:none}.piece.caocao{background:linear-gradient(45deg,#ff6b6b,#ff8e8e);color:#fff;font-size:var(--font-base);font-weight:900;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.piece.generals{background:linear-gradient(45deg,#4ecdc4,#44a08d);color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.piece.soldiers{background:linear-gradient(45deg,#45b7d1,#2e86ab);color:#fff;font-size:var(--font-xs);text-shadow:1px 1px 2px rgba(0,0,0,.5)}@media (max-width: 768px){.control-section{flex-direction:column;gap:var(--spacing-sm)}.primary-controls{justify-content:center}.game-board-container{max-width:350px}.piece{font-size:var(--font-xs)}.piece.caocao{font-size:var(--font-sm)}}.drag-instructions{text-align:center;color:var(--text-secondary);font-size:var(--font-sm);padding:var(--spacing-sm);background:#4ecdc41a;border-radius:var(--border-radius-sm);margin-bottom:var(--spacing-md)}.ai-mode-toggle{display:flex;justify-content:center;margin-bottom:var(--spacing-md)}.ai-toggle-btn{background:var(--text-secondary);color:#fff;border:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--border-radius-sm);cursor:pointer;font-size:var(--font-sm);transition:var(--transition)}.ai-toggle-btn:hover{background:var(--text-primary)}.ai-toggle-btn.active{background:var(--primary-color)}.difficulty-selector{margin-bottom:var(--spacing-md);text-align:center}.difficulty-title{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.difficulty-buttons{display:flex;justify-content:center;gap:var(--spacing-sm);flex-wrap:wrap}.difficulty-btn{background:var(--bg-secondary);color:var(--text-primary);border:2px solid transparent;padding:6px 12px;border-radius:var(--border-radius-sm);cursor:pointer;font-size:var(--font-xs);transition:var(--transition)}.difficulty-btn:hover{background:var(--primary-color);color:#fff}.difficulty-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-hover)}.gomoku-board{display:grid;grid-template-columns:repeat(15,1fr);gap:1px;background:#8b4513;padding:var(--spacing-sm);border-radius:var(--border-radius-sm);width:100%;max-width:400px;aspect-ratio:1;margin:0 auto}.gomoku-cell{background:#deb887;border:1px solid #8B4513;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:var(--transition-fast)}.gomoku-cell.playable:hover{background:#667eea33}.gomoku-stone{width:80%;height:80%;border-radius:50%;box-shadow:0 2px 4px #0000004d}.gomoku-stone.black{background:radial-gradient(circle at 30% 30%,#666,#000)}.gomoku-stone.white{background:radial-gradient(circle at 30% 30%,#fff,#ddd);border:1px solid #ccc}@media (max-width: 768px){.gomoku-board{max-width:350px}.difficulty-buttons{gap:var(--spacing-xs)}.difficulty-btn{padding:4px 8px;font-size:var(--font-xs)}.ai-toggle-btn{font-size:var(--font-xs);padding:var(--spacing-xs) var(--spacing-md)}}.number-keyboard{background:var(--bg-primary);border-radius:var(--border-radius);padding:var(--spacing-md);box-shadow:var(--shadow-md);-webkit-user-select:none;user-select:none;max-width:300px;margin:0 auto}.number-keyboard.disabled{opacity:.5;pointer-events:none}.keyboard-grid{display:flex;flex-direction:column;gap:var(--spacing-sm)}.keyboard-row{display:flex;gap:var(--spacing-sm);justify-content:center}.keyboard-btn{flex:1;min-height:50px;border:none;border-radius:var(--border-radius-sm);font-size:var(--font-lg);font-weight:700;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;min-width:0;box-shadow:var(--shadow-sm)}.keyboard-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md)}.keyboard-btn:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}.keyboard-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.number-btn{background:#f5f5f5;color:var(--text-primary);border:2px solid #e0e0e0}.number-btn:hover:not(:disabled){background:#eee;border-color:var(--primary-color)}.zero-btn{flex:2}.function-btn{background:#e3f2fd;color:#1976d2;border:2px solid #bbdefb}.function-btn:hover:not(:disabled){background:#bbdefb;border-color:#1976d2}.action-btn{background:var(--primary-color);color:var(--text-white);border:2px solid var(--primary-color)}.action-btn:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover)}.backspace-btn{flex:1}.confirm-btn{flex:2;background:#4caf50;border-color:#4caf50}.confirm-btn:hover:not(:disabled){background:#45a049;border-color:#45a049}.clear-btn{background:#ff9800;border-color:#ff9800;color:var(--text-white)}.clear-btn:hover:not(:disabled){background:#f57c00;border-color:#f57c00}.bottom-row{justify-content:space-between}.action-row{margin-top:var(--spacing-xs)}@media (max-width: 480px){.number-keyboard{max-width:none;width:100%}.keyboard-btn{min-height:45px;font-size:var(--font-base)}}@keyframes buttonPress{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}.keyboard-btn:active:not(:disabled){animation:buttonPress .1s ease-in-out}.number-keyboard.compact{padding:var(--spacing-sm)}.number-keyboard.compact .keyboard-btn{min-height:40px;font-size:var(--font-base)}.number-keyboard.large .keyboard-btn{min-height:60px;font-size:var(--font-xl)}.sudoku-game{width:100%;max-width:600px;margin:0 auto;padding:var(--spacing-lg);-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--spacing-md);background:linear-gradient(135deg,#667eea,#764ba2);border-radius:var(--border-radius-lg);min-height:calc(100vh - 120px);box-shadow:0 20px 40px #0003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.game-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) var(--spacing-lg);background:#ffffff26;border-radius:var(--border-radius);flex-wrap:wrap;gap:var(--spacing-sm);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.2);margin-bottom:var(--spacing-md)}.stat-item{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:#fff3;border-radius:var(--border-radius);min-width:80px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);transition:var(--transition)}.stat-item:hover{background:#ffffff4d;transform:translateY(-2px)}.stat-label{font-size:var(--font-xs);color:#ffffffe6;margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:var(--font-lg);font-weight:700;color:var(--text-white);text-shadow:0 1px 2px rgba(0,0,0,.3)}.game-controls{display:flex;gap:var(--spacing-sm);align-items:center;flex-wrap:wrap}.difficulty-selector{padding:var(--spacing-sm) var(--spacing-md);border:2px solid rgba(255,255,255,.4);border-radius:var(--border-radius);background:#ffffff26;color:var(--text-white);font-size:var(--font-sm);cursor:pointer;transition:var(--transition);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:500}.difficulty-selector:hover{background:#ffffff40;border-color:#fff9;transform:translateY(-1px)}.control-btn{padding:var(--spacing-sm) var(--spacing-md);background:linear-gradient(135deg,#ffffff40,#ffffff26);color:var(--text-white);border:1px solid rgba(255,255,255,.4);border-radius:var(--border-radius);font-size:var(--font-sm);cursor:pointer;transition:var(--transition);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.3)}.control-btn:hover{background:linear-gradient(135deg,#ffffff59,#ffffff40);transform:translateY(-2px);box-shadow:0 8px 16px #0003}.sudoku-board{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);gap:2px;background:#0000004d;border:3px solid rgba(255,255,255,.4);border-radius:var(--border-radius);width:100%;max-width:420px;aspect-ratio:1;margin:0 auto var(--spacing-lg) auto;position:relative;box-shadow:0 15px 35px #0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:4px}.sudoku-cell{background:linear-gradient(135deg,#fff,#f8f9fa);display:flex;align-items:center;justify-content:center;font-size:calc(var(--font-base) + 2px);font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;border-radius:6px;color:#2c3e50;border:1px solid rgba(108,117,125,.2);text-shadow:0 1px 2px rgba(0,0,0,.1)}.sudoku-cell:hover{background:linear-gradient(135deg,#e3f2fd,#bbdefb);transform:scale(1.08);box-shadow:0 8px 20px #2196f34d;z-index:2}.sudoku-cell.selected{background:linear-gradient(135deg,#2196f3,#1976d2);color:var(--text-white);box-shadow:0 0 25px #2196f399,0 8px 20px #0000004d;transform:scale(1.12);z-index:3;border:2px solid #ffffff;text-shadow:0 1px 3px rgba(0,0,0,.4)}.sudoku-cell.highlighted{background:linear-gradient(135deg,#e1f5fe,#b3e5fc);color:#01579b;box-shadow:0 4px 12px #2196f333}.sudoku-cell.selected.highlighted{background:linear-gradient(135deg,#2196f3,#1976d2);color:var(--text-white)}.sudoku-cell.fixed{background:linear-gradient(135deg,#37474f,#263238);color:var(--text-white);font-weight:900;cursor:default;text-shadow:0 1px 3px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.2)}.sudoku-cell.fixed:hover{transform:none;background:linear-gradient(135deg,#37474f,#263238)}.sudoku-cell.fixed.highlighted{background:linear-gradient(135deg,#455a64,#37474f);box-shadow:0 4px 12px #455a6466}.sudoku-cell.invalid{background:linear-gradient(135deg,#f44336,#d32f2f);color:var(--text-white);animation:shake .6s ease-in-out;box-shadow:0 0 20px #f4433699;text-shadow:0 1px 3px rgba(0,0,0,.5)}.sudoku-cell.invalid.selected{background:linear-gradient(135deg,#d32f2f,#b71c1c);color:var(--text-white)}.sudoku-cell.border-top{border-top:3px solid rgba(255,255,255,.8)}.sudoku-cell.border-left{border-left:3px solid rgba(255,255,255,.8)}@keyframes shake{0%,to{transform:translate(0) scale(1)}25%{transform:translate(-8px) scale(1.02)}75%{transform:translate(8px) scale(1.02)}50%{transform:translate(0) scale(1.05)}}.number-input-section{padding:var(--spacing-lg);background:#ffffff26;border-radius:var(--border-radius);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.25);margin-bottom:var(--spacing-md)}.sudoku-keyboard{max-width:380px;margin:0 auto}.action-panel{display:flex;justify-content:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);flex-wrap:wrap}.action-btn{padding:var(--spacing-md) var(--spacing-lg);border:2px solid rgba(255,255,255,.4);border-radius:var(--border-radius);font-size:var(--font-sm);font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);min-width:100px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);color:var(--text-white);text-shadow:0 1px 2px rgba(0,0,0,.3);position:relative;overflow:hidden}.action-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.action-btn:hover:before{left:100%}.hint-btn{background:linear-gradient(135deg,#4caf5066,#388e3c66)}.hint-btn:hover{background:linear-gradient(135deg,#4caf5099,#388e3c99);transform:translateY(-3px);box-shadow:0 12px 24px #4caf504d}.clear-btn{background:linear-gradient(135deg,#ff980066,#f57c0066)}.clear-btn:hover:not(:disabled){background:linear-gradient(135deg,#ff980099,#f57c0099);transform:translateY(-3px);box-shadow:0 12px 24px #ff98004d}.check-btn{background:linear-gradient(135deg,#2196f366,#1976d266)}.check-btn:hover:not(:disabled){background:linear-gradient(135deg,#2196f399,#1976d299);transform:translateY(-3px);box-shadow:0 12px 24px #2196f34d}.action-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:grayscale(50%)}.action-btn:disabled:before{display:none}.game-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#667eeaf2,#764ba2f2);display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.overlay-content{text-align:center;padding:var(--spacing-3xl);background:#fffffffa;border-radius:var(--border-radius-lg);box-shadow:0 25px 50px #0000004d;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:2px solid rgba(255,255,255,.8);max-width:400px;margin:var(--spacing-lg);animation:slideUp .6s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.win-text{background:linear-gradient(135deg,#4caf50,#43a047);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:var(--font-4xl);margin-bottom:var(--spacing-lg);font-weight:900;text-shadow:0 2px 4px rgba(0,0,0,.1)}.completion-stats{margin-bottom:var(--spacing-xl);font-size:var(--font-lg);color:var(--text-secondary)}.completion-stats p{margin-bottom:var(--spacing-sm);font-weight:600}.completion-stats strong{color:var(--primary-color);font-weight:700}.restart-btn{padding:var(--spacing-lg) var(--spacing-2xl);background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-hover) 100%);color:var(--text-white);border:none;border-radius:var(--border-radius);font-size:var(--font-lg);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-weight:600;box-shadow:0 8px 20px #0003;text-transform:uppercase;letter-spacing:1px}.restart-btn:hover{background:linear-gradient(135deg,var(--primary-hover) 0%,var(--primary-color) 100%);transform:translateY(-3px);box-shadow:0 12px 30px #0000004d}.game-instructions{background:linear-gradient(135deg,#fff3,#ffffff1a);border-radius:var(--border-radius);padding:var(--spacing-xl);margin-top:var(--spacing-lg);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.3)}.game-instructions h3{color:var(--text-white);margin-bottom:var(--spacing-lg);text-align:center;font-size:var(--font-xl);font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.3)}.rule-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);background:#ffffff26;border-radius:var(--border-radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);transition:var(--transition);color:var(--text-white)}.rule-item:hover{background:#ffffff40;transform:translateY(-2px);box-shadow:0 8px 20px #0003}.rule-icon{font-size:var(--font-2xl);min-width:40px;text-align:center;background:linear-gradient(135deg,#4caf50,#43a047);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tips{text-align:center;padding:var(--spacing-lg);background:#fff3;border-radius:var(--border-radius);border-left:4px solid #4caf50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 12px #00000026}.tips p{color:var(--text-white);font-size:var(--font-base);line-height:1.6;margin:0;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.3)}@media (max-width: 768px){.sudoku-game{padding:var(--spacing-md);min-height:auto;margin:var(--spacing-sm)}.game-header{flex-direction:column;gap:var(--spacing-md)}.game-stats{justify-content:center;gap:var(--spacing-sm)}.stat-item{min-width:70px;padding:var(--spacing-sm)}.game-controls{justify-content:center;flex-wrap:wrap}.sudoku-board{max-width:360px}.sudoku-cell{font-size:var(--font-sm)}.number-input-section{padding:var(--spacing-md)}.sudoku-keyboard{max-width:360px}.action-panel{gap:var(--spacing-sm)}.action-btn{padding:var(--spacing-sm) var(--spacing-md);min-width:80px;font-size:var(--font-xs)}.game-instructions{padding:var(--spacing-md)}.rules-grid{grid-template-columns:1fr;gap:var(--spacing-sm)}.rule-item{padding:var(--spacing-md);gap:var(--spacing-sm)}.overlay-content{padding:var(--spacing-xl);margin:var(--spacing-md)}.win-text{font-size:var(--font-2xl)}}@media (max-width: 480px){.sudoku-board{width:300px;height:300px}.number-panel{max-width:300px}.sudoku-cell,.number-btn{font-size:var(--font-base)}.game-stats{flex-wrap:wrap;gap:var(--spacing-sm)}.stat-item{min-width:70px;padding:var(--spacing-sm)}}@keyframes cellAppear{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.sudoku-cell:not(:empty){animation:cellAppear .2s ease-out}@keyframes shake{0%,20%,40%,60%,80%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-3px)}}.sudoku-cell.invalid{animation:shake .5s ease-in-out}@keyframes celebrate{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.overlay-content{animation:celebrate .6s ease-in-out}.game-2048{max-width:600px;margin:0 auto;padding:var(--spacing-lg);-webkit-user-select:none;user-select:none;position:relative}.score-container{display:flex;gap:var(--spacing-md)}.score-box{background:var(--bg-secondary);border-radius:var(--border-radius-sm);padding:var(--spacing-md);text-align:center;min-width:80px;box-shadow:var(--shadow-sm)}.score-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.score-value{font-size:var(--font-xl);font-weight:700;color:var(--primary-color)}.mode-selector{padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--primary-color);border-radius:var(--border-radius-sm);background:var(--bg-primary);color:var(--text-primary);font-size:var(--font-sm);cursor:pointer;transition:var(--transition)}.mode-selector:hover{background:var(--primary-color);color:var(--text-white)}.control-btn{padding:var(--spacing-sm) var(--spacing-md);background:var(--primary-color);color:var(--text-white);border:none;border-radius:var(--border-radius-sm);font-size:var(--font-sm);cursor:pointer;transition:var(--transition)}.control-btn:hover{background:var(--primary-hover);transform:translateY(-2px)}.game-board{display:grid;gap:8px;background:#bbada0;border-radius:var(--border-radius);padding:var(--spacing-md);margin-bottom:var(--spacing-xl);position:relative;touch-action:none}.board-4x4{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);width:320px;height:320px}.board-5x5{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);width:350px;height:350px}.board-6x6{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);width:380px;height:380px}.cell{background:#eee4da59;border-radius:var(--border-radius-sm);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--font-lg);color:var(--text-primary);transition:all .15s ease-in-out}.cell-empty{background:#eee4da59}.cell-2{background:#eee4da;color:#776e65}.cell-4{background:#ede0c8;color:#776e65}.cell-8{background:#f2b179;color:#f9f6f2}.cell-16{background:#f59563;color:#f9f6f2}.cell-32{background:#f67c5f;color:#f9f6f2}.cell-64{background:#f65e3b;color:#f9f6f2}.cell-128{background:#edcf72;color:#f9f6f2;font-size:var(--font-base)}.cell-256{background:#edcc61;color:#f9f6f2;font-size:var(--font-base)}.cell-512{background:#edc850;color:#f9f6f2;font-size:var(--font-base)}.cell-1024{background:#edc53f;color:#f9f6f2;font-size:var(--font-sm)}.cell-2048{background:#edc22e;color:#f9f6f2;font-size:var(--font-sm);box-shadow:0 0 20px #edc22e80}.cell-4096{background:#3c3a32;color:#f9f6f2;font-size:var(--font-sm)}.cell-8192{background:#3c3a32;color:#f9f6f2;font-size:var(--font-xs)}.cell[class*=cell-]:not(.cell-empty):not(.cell-2):not(.cell-4):not(.cell-8):not(.cell-16):not(.cell-32):not(.cell-64):not(.cell-128):not(.cell-256):not(.cell-512):not(.cell-1024):not(.cell-2048):not(.cell-4096):not(.cell-8192){background:#3c3a32;color:#f9f6f2;font-size:var(--font-xs)}.overlay-content{text-align:center;padding:var(--spacing-xl)}.win-text{color:#4caf50;font-size:var(--font-3xl);margin-bottom:var(--spacing-md)}.lose-text{color:#f44336;font-size:var(--font-3xl);margin-bottom:var(--spacing-md)}.final-score{font-size:var(--font-lg);color:var(--text-secondary);margin-bottom:var(--spacing-lg)}.restart-btn{padding:var(--spacing-md) var(--spacing-xl);background:var(--primary-color);color:var(--text-white);border:none;border-radius:var(--border-radius-sm);font-size:var(--font-lg);cursor:pointer;transition:var(--transition)}.restart-btn:hover{background:var(--primary-hover);transform:translateY(-2px)}.instructions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.instruction-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm);background:var(--bg-primary);border-radius:var(--border-radius-sm);text-align:center}.key{background:var(--primary-color);color:var(--text-white);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:var(--font-xs);font-weight:700}.game-rule{text-align:center;color:var(--text-secondary);font-size:var(--font-sm);line-height:1.5}@media (max-width: 768px){.game-2048{padding:var(--spacing-md)}.score-container,.game-controls{justify-content:center}.board-4x4{width:280px;height:280px}.board-5x5{width:300px;height:300px}.board-6x6{width:320px;height:320px}.game-board{margin:0 auto var(--spacing-lg)}.cell{font-size:var(--font-base)}.cell-128,.cell-256,.cell-512{font-size:var(--font-sm)}.cell-1024,.cell-2048{font-size:var(--font-xs)}.instructions-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.board-4x4{width:240px;height:240px}.board-5x5{width:260px;height:260px}.board-6x6{width:280px;height:280px}.score-box{min-width:70px;padding:var(--spacing-sm)}.score-value{font-size:var(--font-lg)}.instructions-grid{grid-template-columns:1fr}}@keyframes slideIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.cell:not(.cell-empty){animation:slideIn .2s ease-out}.cell-2048{animation:slideIn .3s ease-out,pulse .6s ease-in-out}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.idiom-game{max-width:900px;margin:0 auto;padding:var(--spacing-lg);-webkit-user-select:none;user-select:none;position:relative}.game-stats{display:flex;gap:var(--spacing-lg);flex-wrap:wrap}.current-idiom-section{background:var(--bg-secondary);border-radius:var(--border-radius);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);text-align:center}.current-idiom-section h3{color:var(--text-secondary);margin-bottom:var(--spacing-lg);font-size:var(--font-lg)}.current-idiom{background:var(--bg-primary);border-radius:var(--border-radius-sm);padding:var(--spacing-lg);margin-bottom:var(--spacing-md);box-shadow:var(--shadow-sm)}.idiom-text{font-size:var(--font-3xl);font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-md);letter-spacing:4px}.idiom-info{display:flex;flex-direction:column;gap:var(--spacing-sm)}.idiom-pinyin{font-size:var(--font-base);color:var(--text-secondary);font-style:italic}.idiom-meaning{font-size:var(--font-sm);color:var(--text-light);line-height:1.5;max-width:600px;margin:0 auto}.next-hint{background:#e3f2fd;color:#1976d2;padding:var(--spacing-md);border-radius:var(--border-radius-sm);font-size:var(--font-base);border-left:4px solid #2196f3}.highlight-char{background:#ffeb3b;color:#f57c00;padding:2px 6px;border-radius:4px;font-weight:700;font-size:var(--font-lg)}.hint-display{background:#fff3e0;color:#ef6c00;padding:var(--spacing-md);border-radius:var(--border-radius-sm);margin-bottom:var(--spacing-lg);text-align:center;border:2px solid #ffb74d;animation:slideIn .3s ease-out}.options-section{margin-bottom:var(--spacing-xl)}.options-section h3{text-align:center;color:var(--text-primary);margin-bottom:var(--spacing-lg);font-size:var(--font-lg)}.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-md);max-width:800px;margin:0 auto}.option-btn{background:var(--bg-primary);border:2px solid var(--primary-color);border-radius:var(--border-radius-sm);padding:var(--spacing-lg);cursor:pointer;transition:var(--transition);text-align:center;display:flex;flex-direction:column;gap:var(--spacing-sm);min-height:100px;justify-content:center}.option-btn:hover:not(:disabled){background:var(--primary-color);color:var(--text-white);transform:translateY(-3px);box-shadow:var(--shadow-md)}.option-btn:disabled{opacity:.6;cursor:not-allowed}.option-text{font-size:var(--font-xl);font-weight:700;letter-spacing:2px}.option-pinyin{font-size:var(--font-sm);font-style:italic;opacity:.8}.game-actions{display:flex;justify-content:center;gap:var(--spacing-lg);margin-bottom:var(--spacing-xl);flex-wrap:wrap}.hint-btn{background:#4caf50;color:var(--text-white)}.hint-btn:hover:not(:disabled){background:#45a049;transform:translateY(-2px)}.used-idioms-section{background:var(--bg-secondary);border-radius:var(--border-radius);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.used-idioms-section h3{color:var(--text-primary);margin-bottom:var(--spacing-md);text-align:center}.used-idioms-list{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:center;max-height:150px;overflow-y:auto}.used-idiom{background:var(--primary-color);color:var(--text-white);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:var(--font-sm);white-space:nowrap}.difficulty-info{background:var(--bg-primary);border-radius:var(--border-radius-sm);padding:var(--spacing-md);border-left:4px solid var(--primary-color)}.difficulty-info h4{color:var(--text-primary);margin-bottom:var(--spacing-sm);font-size:var(--font-base)}.difficulty-info ul{list-style:none;padding:0}.difficulty-info li{margin-bottom:var(--spacing-xs);color:var(--text-secondary);font-size:var(--font-sm);line-height:1.5}@media (max-width: 768px){.idiom-game{padding:var(--spacing-md)}.game-stats{justify-content:center;gap:var(--spacing-sm)}.stat-item{min-width:70px;padding:var(--spacing-sm)}.game-controls{justify-content:center}.idiom-text{font-size:var(--font-2xl);letter-spacing:2px}.options-grid{grid-template-columns:1fr;gap:var(--spacing-sm)}.option-btn{min-height:80px;padding:var(--spacing-md)}.game-actions{flex-direction:column;align-items:center}.action-btn{width:200px}.rules-grid{grid-template-columns:1fr}}@media (max-width: 480px){.current-idiom-section{padding:var(--spacing-md)}.idiom-text{font-size:var(--font-xl);letter-spacing:1px}.overlay-content{padding:var(--spacing-md)}.used-idioms-list{max-height:100px}}.option-btn{animation:slideIn .3s ease-out}@keyframes correctAnswer{0%{background:var(--bg-primary)}50%{background:#4caf50;color:var(--text-white);transform:scale(1.1)}to{background:var(--bg-primary);transform:scale(1)}}.option-btn.correct{animation:correctAnswer .6s ease-in-out}.math-game{max-width:800px;margin:0 auto;padding:var(--spacing-lg);-webkit-user-select:none;user-select:none;position:relative}.game-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);flex-wrap:wrap;gap:var(--spacing-md)}.game-stats{display:flex;gap:var(--spacing-md);flex-wrap:wrap}.stat-item{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-md);background:var(--bg-secondary);border-radius:var(--border-radius-sm);min-width:80px;box-shadow:var(--shadow-sm)}.stat-label{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.stat-value{font-size:var(--font-lg);font-weight:700;color:var(--primary-color)}.stat-value.warning{color:#ff5722;animation:pulse 1s infinite}.game-controls{display:flex;gap:var(--spacing-sm);align-items:center}.difficulty-selector{padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--primary-color);border-radius:var(--border-radius-sm);background:var(--bg-primary);color:var(--text-primary);font-size:var(--font-sm);cursor:pointer;transition:var(--transition)}.difficulty-selector:hover:not(:disabled){background:var(--primary-color);color:var(--text-white)}.difficulty-selector:disabled{opacity:.6;cursor:not-allowed}.control-btn{padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--border-radius-sm);font-size:var(--font-sm);font-weight:700;cursor:pointer;transition:var(--transition);min-width:80px}.start-btn{background:var(--primary-color);color:var(--text-white)}.start-btn:hover{background:var(--primary-hover);transform:translateY(-2px)}.pause-btn{background:#ff9800;color:var(--text-white)}.pause-btn:hover{background:#f57c00;transform:translateY(-2px)}.question-section{background:var(--bg-secondary);border-radius:var(--border-radius);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);text-align:center}.question-display{margin-bottom:var(--spacing-xl)}.question-text{font-size:var(--font-4xl);font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-md);font-family:Courier New,monospace;letter-spacing:2px}.question-meta{display:flex;justify-content:center;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.operation-type{background:#e3f2fd;color:#1976d2;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:var(--font-sm);font-weight:700}.question-number{background:#f3e5f5;color:#7b1fa2;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:var(--font-sm);font-weight:700}.answer-input{width:300px;padding:var(--spacing-lg);font-size:var(--font-2xl);text-align:center;border:3px solid var(--primary-color);border-radius:var(--border-radius-sm);background:var(--bg-primary);color:var(--text-primary);font-family:Courier New,monospace;transition:var(--transition);min-height:60px;display:flex;align-items:center;justify-content:center;cursor:default}.math-keyboard{margin-top:var(--spacing-md);max-width:400px}.answer-actions{display:flex;gap:var(--spacing-md)}.submit-btn{background:#4caf50;color:var(--text-white)}.skip-btn{background:#ff9800;color:var(--text-white)}.skip-btn:hover:not(:disabled){background:#f57c00;transform:translateY(-2px)}.result-display{margin-top:var(--spacing-lg);padding:var(--spacing-lg);border-radius:var(--border-radius-sm);font-size:var(--font-lg);font-weight:700;animation:slideIn .3s ease-out}.result-display.correct{background:#e8f5e8;border:2px solid #4caf50}.result-display.wrong{background:#ffebee;border:2px solid #f44336}.correct-result{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);color:#2e7d32}.wrong-result{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);color:#c62828}.streak-text{background:#ffeb3b;color:#f57c00;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:var(--font-sm);margin-left:var(--spacing-sm)}.game-progress{background:var(--bg-secondary);border-radius:var(--border-radius);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.progress-stats{display:flex;justify-content:center;gap:var(--spacing-xl);flex-wrap:wrap}.progress-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.progress-label{font-size:var(--font-sm);color:var(--text-secondary)}.progress-value{font-size:var(--font-xl);font-weight:700;color:var(--primary-color)}.game-overlay{position:absolute;inset:0;background:#fffffff2;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius);z-index:10}.overlay-content{text-align:center;padding:var(--spacing-xl);background:var(--bg-primary);border-radius:var(--border-radius);box-shadow:var(--shadow-lg);max-width:400px;width:90%}.overlay-content h2{margin-bottom:var(--spacing-lg);color:var(--text-primary)}.game-over-text{color:#f44336;font-size:var(--font-2xl)}.final-stats{margin-bottom:var(--spacing-lg);font-size:var(--font-base);color:var(--text-secondary)}.final-stats p{margin-bottom:var(--spacing-sm)}.new-record{color:#4caf50;font-weight:700;animation:pulse 1s infinite}.resume-btn,.restart-btn{padding:var(--spacing-md) var(--spacing-xl);background:var(--primary-color);color:var(--text-white);border:none;border-radius:var(--border-radius-sm);font-size:var(--font-lg);cursor:pointer;transition:var(--transition)}.resume-btn:hover,.restart-btn:hover{background:var(--primary-hover);transform:translateY(-2px)}.game-instructions{background:var(--bg-secondary);border-radius:var(--border-radius);padding:var(--spacing-lg);margin-top:var(--spacing-xl)}.game-instructions h3{color:var(--text-primary);margin-bottom:var(--spacing-md);text-align:center}.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.rule-item{display:flex;align-items:flex-start;gap:var(--spacing-sm);padding:var(--spacing-md);background:var(--bg-primary);border-radius:var(--border-radius-sm)}.rule-icon{font-size:var(--font-lg);min-width:30px}.difficulty-comparison{background:var(--bg-primary);border-radius:var(--border-radius-sm);padding:var(--spacing-md);margin-bottom:var(--spacing-md)}.difficulty-comparison h4{color:var(--text-primary);margin-bottom:var(--spacing-md);text-align:center}.difficulty-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacing-md)}.difficulty-card{background:var(--bg-secondary);border-radius:var(--border-radius-sm);padding:var(--spacing-md);text-align:center}.difficulty-card h5{color:var(--primary-color);margin-bottom:var(--spacing-sm);font-size:var(--font-base)}.difficulty-card ul{list-style:none;padding:0}.difficulty-card li{margin-bottom:var(--spacing-xs);color:var(--text-secondary);font-size:var(--font-sm)}.tips{text-align:center;padding:var(--spacing-md);background:var(--bg-primary);border-radius:var(--border-radius-sm);border-left:4px solid var(--primary-color)}.tips p{color:var(--text-secondary);font-size:var(--font-sm);line-height:1.5;margin:0}@media (max-width: 768px){.math-game{padding:var(--spacing-md)}.game-stats{justify-content:center;gap:var(--spacing-sm)}.stat-item{min-width:70px;padding:var(--spacing-sm)}.game-controls{justify-content:center}.question-text{font-size:var(--font-3xl)}.answer-input{width:250px;font-size:var(--font-xl)}.answer-actions{flex-direction:column;align-items:center}.action-btn{width:200px}.progress-stats{gap:var(--spacing-md)}.rules-grid,.difficulty-grid{grid-template-columns:1fr}}@media (max-width: 480px){.question-text{font-size:var(--font-2xl);letter-spacing:1px}.answer-input{width:200px;font-size:var(--font-lg);padding:var(--spacing-md)}.overlay-content{padding:var(--spacing-md)}.question-meta{flex-direction:column;gap:var(--spacing-sm);align-items:center}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.answer-input{animation:slideIn .3s ease-out}.mathmagic-game{max-width:900px;margin:0 auto;padding:var(--spacing-lg);-webkit-user-select:none;user-select:none}.player-status{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:var(--border-radius);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);box-shadow:var(--shadow-lg)}.level-info{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.level-badge{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-md);border-radius:var(--border-radius);min-width:80px;box-shadow:var(--shadow-md)}.level-icon{font-size:var(--font-2xl);margin-bottom:var(--spacing-xs)}.level-number{font-size:var(--font-sm);font-weight:700}.level-details h3{margin:0 0 var(--spacing-xs) 0;font-size:var(--font-xl)}.level-description{margin:0;opacity:.9;font-size:var(--font-sm)}.stats-grid{display:flex;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.stat-item{display:flex;flex-direction:column;align-items:center;background:#ffffff1a;border-radius:var(--border-radius-sm);padding:var(--spacing-md);min-width:80px}.stat-icon{font-size:var(--font-lg);margin-bottom:var(--spacing-xs)}.stat-value{font-size:var(--font-lg);font-weight:700;margin-bottom:var(--spacing-xs)}.stat-label{font-size:var(--font-xs);opacity:.8}.experience-bar{background:#ffffff1a;border-radius:var(--border-radius-sm);padding:var(--spacing-sm)}.exp-info{display:flex;justify-content:space-between;font-size:var(--font-sm);margin-bottom:var(--spacing-xs)}.exp-progress{height:8px;background:#fff3;border-radius:4px;overflow:hidden}.exp-fill{height:100%;transition:width .5s ease;border-radius:4px}.mode-selection{margin-bottom:var(--spacing-xl)}.mode-selection h3{text-align:center;color:var(--text-primary);margin-bottom:var(--spacing-lg)}.mode-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-md)}.mode-btn{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-lg);background:var(--bg-primary);border:3px solid transparent;border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);text-align:center}.mode-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}.mode-btn.active{border-color:currentColor;box-shadow:var(--shadow-lg)}.mode-icon{font-size:var(--font-2xl);margin-bottom:var(--spacing-sm)}.mode-name{font-size:var(--font-lg);font-weight:700;margin-bottom:var(--spacing-xs);color:var(--text-primary)}.mode-description{font-size:var(--font-sm);color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.mode-reward{font-size:var(--font-xs);background:#e3f2fd;color:#1976d2;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-weight:700}.question-area{background:var(--bg-secondary);border-radius:var(--border-radius);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);box-shadow:var(--shadow-sm)}.question-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md);border-bottom:2px solid #e0e0e0}.question-type{background:var(--primary-color);color:#fff;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:var(--font-sm);font-weight:700}.question-level{color:var(--text-secondary);font-size:var(--font-sm)}.question-content{text-align:center;margin-bottom:var(--spacing-xl)}.question-text{font-size:var(--font-2xl);color:var(--text-primary);margin-bottom:var(--spacing-lg);line-height:1.4}.hint-display{background:#fff3e0;color:#ef6c00;padding:var(--spacing-md);border-radius:var(--border-radius-sm);border:2px solid #ffb74d;font-size:var(--font-base);animation:slideIn .3s ease-out}.answer-section{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg)}.answer-display{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);width:100%}.answer-input{width:100%;max-width:300px;padding:var(--spacing-lg);font-size:var(--font-xl);text-align:center;border:3px solid var(--primary-color);border-radius:var(--border-radius-sm);background:var(--bg-primary);color:var(--text-primary);transition:var(--transition);min-height:60px;display:flex;align-items:center;justify-content:center;cursor:default}.answer-input.result-correct{border-color:#4caf50;background:#e8f5e8}.answer-input.result-wrong{border-color:#f44336;background:#ffebee}.mathmagic-keyboard{margin-top:var(--spacing-md);max-width:400px}.action-buttons{display:flex;gap:var(--spacing-md);flex-wrap:wrap;justify-content:center}.action-btn{padding:var(--spacing-md) var(--spacing-lg);border:none;border-radius:var(--border-radius-sm);font-size:var(--font-base);font-weight:700;cursor:pointer;transition:var(--transition);min-width:120px}.submit-btn{background:#4caf50;color:#fff}.submit-btn:hover:not(:disabled){background:#45a049;transform:translateY(-2px)}.hint-btn{background:#ff9800;color:#fff}.hint-btn:hover{background:#f57c00;transform:translateY(-2px)}.skip-btn{background:#9e9e9e;color:#fff}.skip-btn:hover{background:#757575;transform:translateY(-2px)}.action-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.result-section{margin-top:var(--spacing-lg);padding:var(--spacing-lg);border-radius:var(--border-radius-sm);text-align:center;animation:slideIn .3s ease-out}.result-section.correct{background:#e8f5e8;border:2px solid #4caf50}.result-section.wrong{background:#ffebee;border:2px solid #f44336}.correct-result,.wrong-result{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-size:var(--font-lg);font-weight:700}.correct-result{color:#2e7d32}.wrong-result{color:#c62828}.result-icon{font-size:var(--font-xl)}.streak-bonus{background:#ffeb3b;color:#f57c00;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:var(--font-sm);margin-left:var(--spacing-sm)}.explanation-section{margin-top:var(--spacing-lg);padding:var(--spacing-lg);background:#f3e5f5;border:2px solid #ba68c8;border-radius:var(--border-radius-sm);animation:slideIn .5s ease-out}.explanation-section h4{color:#7b1fa2;margin-bottom:var(--spacing-md);text-align:center}.explanation-text{color:var(--text-primary);line-height:1.6;margin-bottom:var(--spacing-lg);text-align:center}.next-question-btn{display:block;margin:0 auto;padding:var(--spacing-md) var(--spacing-xl);background:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius-sm);font-size:var(--font-base);font-weight:700;cursor:pointer;transition:var(--transition)}.next-question-btn:hover{background:var(--primary-hover);transform:translateY(-2px)}.achievements-section{background:var(--bg-secondary);border-radius:var(--border-radius);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.achievements-section h3{text-align:center;color:var(--text-primary);margin-bottom:var(--spacing-md)}.achievements-grid{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;justify-content:center}.achievement-item{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-md);background:var(--bg-primary);border:2px solid transparent;border-radius:var(--border-radius-sm);min-width:80px;transition:var(--transition)}.achievement-badge{font-size:var(--font-lg);margin-bottom:var(--spacing-xs)}.achievement-name{font-size:var(--font-xs);color:var(--text-secondary);text-align:center}.game-controls{text-align:center;margin-bottom:var(--spacing-xl)}.control-btn{padding:var(--spacing-md) var(--spacing-lg);background:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius-sm);font-size:var(--font-base);cursor:pointer;transition:var(--transition)}.reset-btn:hover{background:var(--primary-hover);transform:translateY(-2px)}.game-guide{background:var(--bg-secondary);border-radius:var(--border-radius);padding:var(--spacing-lg)}.game-guide h3{text-align:center;color:var(--text-primary);margin-bottom:var(--spacing-lg)}.guide-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.guide-section{background:var(--bg-primary);padding:var(--spacing-md);border-radius:var(--border-radius-sm)}.guide-section h4{color:var(--primary-color);margin-bottom:var(--spacing-sm);font-size:var(--font-base)}.guide-section ul{list-style:none;padding:0;margin:0}.guide-section li{color:var(--text-secondary);font-size:var(--font-sm);margin-bottom:var(--spacing-xs);padding-left:var(--spacing-md);position:relative}.guide-section li:before{content:"•";color:var(--primary-color);position:absolute;left:0}.tips{background:var(--bg-primary);border-radius:var(--border-radius-sm);padding:var(--spacing-md);border-left:4px solid var(--primary-color)}.tips p{color:var(--text-secondary);font-size:var(--font-sm);line-height:1.5;margin:var(--spacing-xs) 0}@media (max-width: 768px){.mathmagic-game{padding:var(--spacing-md)}.level-info{flex-direction:column;text-align:center;gap:var(--spacing-sm)}.stats-grid{justify-content:center;gap:var(--spacing-md)}.mode-buttons{grid-template-columns:1fr}.question-text{font-size:var(--font-xl)}.answer-input{font-size:var(--font-lg)}.action-buttons{flex-direction:column;align-items:center}.action-btn{width:200px}.question-header{flex-direction:column;gap:var(--spacing-sm);text-align:center}.guide-content{grid-template-columns:1fr}}@media (max-width: 480px){.player-status{padding:var(--spacing-md)}.level-badge,.stat-item{min-width:60px;padding:var(--spacing-sm)}.question-text{font-size:var(--font-lg)}.answer-input{font-size:var(--font-base);padding:var(--spacing-md)}.achievements-grid{flex-direction:column;align-items:center}.achievement-item{width:100%;max-width:200px}}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes levelUp{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.level-badge{animation:levelUp .6s ease-in-out}.answer-input.result-correct{animation:correctPulse .6s ease-in-out}.answer-input.result-wrong{animation:shake .5s ease-in-out}@keyframes correctPulse{0%{background:#e8f5e8;transform:scale(1)}50%{background:#c8e6c9;transform:scale(1.02)}to{background:#e8f5e8;transform:scale(1)}}@keyframes shake{0%,20%,40%,60%,80%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #667eea;--primary-hover: #5a67d8;--secondary-color: #764ba2;--accent-color: #f093fb;--main-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--huarong-gradient: linear-gradient(45deg, #FF6B6B, #FF8E8E);--gomoku-gradient: linear-gradient(45deg, #4ECDC4, #44A08D);--sudoku-gradient: linear-gradient(45deg, #45B7D1, #2E86AB);--puzzle2048-gradient: linear-gradient(45deg, #96CEB4, #FFEAA7);--idiom-gradient: linear-gradient(45deg, #f093fb, #f5576c);--math-gradient: linear-gradient(45deg, #667eea, #764ba2);--mathmagic-gradient: linear-gradient(45deg, #ffecd2, #fcb69f);--text-primary: #333;--text-secondary: #666;--text-light: #999;--text-white: #fff;--bg-primary: #fff;--bg-secondary: #f8f9fa;--bg-dark: rgba(0, 0, 0, .8);--border-radius: 20px;--border-radius-sm: 12px;--border-radius-lg: 25px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--shadow-md: 0 5px 15px rgba(0, 0, 0, .2);--shadow-lg: 0 20px 40px rgba(0, 0, 0, .1);--spacing-xs: 5px;--spacing-sm: 10px;--spacing-md: 15px;--spacing-lg: 20px;--spacing-xl: 30px;--font-xs: .75rem;--font-sm: .875rem;--font-base: 1rem;--font-lg: 1.125rem;--font-xl: 1.25rem;--font-2xl: 1.5rem;--font-3xl: 2rem;--font-4xl: 2.5rem;--transition: all .3s ease;--transition-fast: all .15s ease;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:var(--main-gradient);min-height:100vh;margin:0;color:var(--text-primary);position:relative}code{font-family:Fira Code,Consolas,Monaco,monospace}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-sm);position:relative}@media (max-width: 768px){.app{padding:var(--spacing-xs)}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff80}::selection{background:#667eea4d;color:var(--text-primary)}:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.fade-in{animation:fadeIn .3s ease-in-out}.slide-up{animation:slideUp .3s ease-out}.bounce{animation:bounce .6s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes bounce{0%,20%,53%,80%,to{transform:translateZ(0)}40%,43%{transform:translate3d(0,-10px,0)}70%{transform:translate3d(0,-5px,0)}90%{transform:translate3d(0,-2px,0)}}