.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;position:relative;overflow-x:hidden}.app:before{content:"";position:fixed;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(255,255,255,.1) 0%,transparent 50%);animation:float 20s ease-in-out infinite;pointer-events:none;z-index:0}@keyframes float{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(30px,-30px) rotate(120deg)}66%{transform:translate(-20px,20px) rotate(240deg)}}.app>*{position:relative;z-index:1}.btn{padding:14px 28px;font-size:16px;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);font-weight:600;min-width:120px;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.3);transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:hover:before{width:300px;height:300px}.btn:active{transform:scale(.98)}.btn-primary{background:var(--primary-gradient);color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.btn-primary:active{transform:translateY(-1px) scale(.98)}.btn-secondary{background:var(--bg-white);color:var(--primary-color);border:2px solid var(--primary-color);box-shadow:var(--shadow-sm)}.btn-secondary:hover{background:var(--primary-gradient);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:transparent}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.card{background:var(--bg-white);border-radius:var(--radius-xl);padding:32px;box-shadow:var(--shadow-lg);max-width:600px;width:100%;transition:all var(--transition-base);position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.card:hover:before{left:100%}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}.card-title{font-size:28px;font-weight:700;color:var(--text-primary);margin-bottom:24px;text-align:center;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.difficulty-badge{display:inline-block;padding:6px 14px;border-radius:var(--radius-full);font-size:12px;font-weight:600;margin-left:8px;transition:all var(--transition-base)}.difficulty-badge:hover{transform:scale(1.1)}.difficulty-easy{background:linear-gradient(135deg,#d4edda 0%,#c3e6cb 100%);color:#155724;box-shadow:0 2px 8px #15572433}.difficulty-medium{background:linear-gradient(135deg,#fff3cd 0%,#ffeaa7 100%);color:#856404;box-shadow:0 2px 8px #85640433}.difficulty-hard{background:linear-gradient(135deg,#f8d7da 0%,#f5c6cb 100%);color:#721c24;box-shadow:0 2px 8px #721c2433}@keyframes pageEnter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.page-enter{animation:pageEnter var(--transition-base)}@media (max-width: 768px){.app{padding:12px}.card{padding:24px 20px;border-radius:var(--radius-lg)}.card-title{font-size:24px;margin-bottom:20px}.btn{padding:12px 24px;font-size:15px;min-width:100px}.difficulty-badge{padding:5px 12px;font-size:11px}}@media (max-width: 480px){.app{padding:8px}.card{padding:20px 16px;border-radius:var(--radius-md)}.card-title{font-size:20px;margin-bottom:16px}.btn{padding:10px 20px;font-size:14px;min-width:80px}.difficulty-badge{padding:4px 10px;font-size:10px}}.difficulty-selector{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;animation:pageEnter .4s ease}.difficulty-card{background:white;border-radius:var(--radius-xl);padding:40px;box-shadow:var(--shadow-lg);max-width:600px;width:100%;animation:cardSlideIn .5s ease;position:relative;overflow:hidden}.back-btn{background:none;border:none;color:#667eea;font-size:16px;cursor:pointer;margin-bottom:24px;padding:8px;transition:all .2s ease}.back-btn:hover{transform:translate(-4px)}.difficulty-title{font-size:28px;font-weight:700;color:#333;text-align:center;margin-bottom:8px}.difficulty-subtitle{font-size:14px;color:#666;text-align:center;margin-bottom:32px}.difficulty-options{display:flex;flex-direction:column;gap:16px}.difficulty-option{display:flex;align-items:center;gap:20px;background:white;border:2px solid var(--border-color);border-radius:var(--radius-md);padding:24px;cursor:pointer;transition:all var(--transition-base);text-align:left;position:relative;overflow:hidden}.difficulty-option:before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--primary-gradient);opacity:.05;transition:width var(--transition-base)}.difficulty-option:hover:before{width:100%}.difficulty-option:hover{border-color:var(--primary-color);transform:translateY(-3px);box-shadow:var(--shadow-md);border-left-width:4px}.difficulty-icon{font-size:32px;flex-shrink:0}.difficulty-info{flex:1}.difficulty-name{font-size:20px;font-weight:600;color:#333;margin-bottom:4px}.difficulty-desc{font-size:14px;color:#666;margin:0}.question-order-section{margin-top:32px;padding-top:24px;border-top:1px solid var(--border-color)}.advanced-toggle{background:none;border:none;color:#667eea;font-size:16px;font-weight:600;cursor:pointer;padding:12px 0;width:100%;text-align:left;display:flex;align-items:center;gap:8px;transition:color .2s ease}.advanced-toggle:hover{color:#5568d3}.question-order-options{margin-top:16px;animation:slideDown .3s ease}.order-subtitle{font-size:14px;color:#666;margin-bottom:16px;text-align:center}.order-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}.order-option{display:flex;flex-direction:column;align-items:center;gap:8px;background:white;border:2px solid var(--border-color);border-radius:var(--radius-md);padding:16px 12px;cursor:pointer;transition:all var(--transition-base);position:relative;text-align:center}.order-option:hover{border-color:var(--primary-color);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.order-option.selected{border-color:var(--primary-color);background:linear-gradient(135deg,rgba(102,126,234,.1),rgba(118,75,162,.1));border-width:2px}.order-icon{font-size:24px}.order-info{flex:1;width:100%}.order-name{font-size:14px;font-weight:600;color:#333;margin-bottom:4px}.order-desc{font-size:11px;color:#666;margin:0;line-height:1.3}.check-mark{position:absolute;top:8px;right:8px;color:var(--primary-color);font-size:18px;font-weight:700}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.difficulty-selector{padding:20px 12px 12px;align-items:flex-start}.difficulty-card{padding:24px 20px;border-radius:var(--radius-lg)}.back-btn{font-size:14px;margin-bottom:20px;padding:6px}.difficulty-title{font-size:24px;margin-bottom:6px}.difficulty-subtitle{font-size:13px;margin-bottom:24px}.difficulty-options{gap:12px}.difficulty-option{padding:20px 16px;gap:16px}.difficulty-option:hover{transform:translateY(-2px)}.difficulty-icon{font-size:28px}.difficulty-name{font-size:18px}.difficulty-desc{font-size:13px}.question-order-section{margin-top:24px;padding-top:20px}.advanced-toggle{font-size:14px;padding:10px 0}.order-subtitle{font-size:13px;margin-bottom:12px}.order-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.order-option{padding:14px 10px;gap:6px}.order-icon{font-size:20px}.order-name{font-size:13px}.order-desc{font-size:10px}.check-mark{top:6px;right:6px;font-size:16px}}@media (max-width: 480px){.difficulty-selector{padding:16px 8px 8px}.difficulty-card{padding:20px 16px;border-radius:var(--radius-md)}.back-btn{font-size:13px;margin-bottom:16px}.difficulty-title{font-size:20px}.difficulty-subtitle{font-size:12px;margin-bottom:20px}.difficulty-options{gap:10px}.difficulty-option{padding:16px 12px;gap:12px}.difficulty-icon{font-size:24px}.difficulty-name{font-size:16px}.difficulty-desc{font-size:12px}.question-order-section{margin-top:20px;padding-top:16px}.advanced-toggle{font-size:13px;padding:8px 0}.order-subtitle{font-size:12px;margin-bottom:10px}.order-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}.order-option{padding:12px 8px;gap:4px}.order-icon{font-size:18px}.order-name{font-size:12px}.order-desc{font-size:9px}.check-mark{top:4px;right:4px;font-size:14px}}.audio-settings-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.audio-settings-panel{background:#fff;border-radius:16px;padding:0;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px #0003;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.audio-settings-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid #e0e0e0}.audio-settings-header h2{margin:0;font-size:24px;color:#333;font-weight:600}.close-btn{background:none;border:none;font-size:32px;color:#999;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.close-btn:hover{background:#f5f5f5;color:#333}.audio-settings-content{padding:24px}.audio-setting-item{margin-bottom:32px}.audio-setting-item:last-child{margin-bottom:0}.setting-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.setting-label label{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:500;color:#333;cursor:pointer}.setting-label input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:#667eea}.volume-value{font-size:16px;font-weight:600;color:#667eea;min-width:50px;text-align:right}.setting-description{margin:8px 0 0;font-size:14px;color:#666;line-height:1.5}.volume-slider{width:100%;height:6px;border-radius:3px;background:#e0e0e0;outline:none;-webkit-appearance:none;margin:16px 0;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer;transition:all .2s}.volume-slider::-webkit-slider-thumb:hover{background:#5568d3;transform:scale(1.1)}.volume-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#667eea;cursor:pointer;border:none;transition:all .2s}.volume-slider::-moz-range-thumb:hover{background:#5568d3;transform:scale(1.1)}.test-sound-btn{margin-top:12px;padding:8px 16px;background:#f5f5f5;border:1px solid #e0e0e0;border-radius:8px;font-size:14px;color:#666;cursor:pointer;transition:all .2s}.test-sound-btn:hover:not(:disabled){background:#667eea;color:#fff;border-color:#667eea}.test-sound-btn:disabled{opacity:.5;cursor:not-allowed}.audio-setting-hint{margin-top:24px;padding:16px;background:#f0f7ff;border-radius:8px;border-left:4px solid #667eea}.audio-setting-hint p{margin:0;font-size:14px;color:#555;line-height:1.6}.audio-settings-footer{padding:24px;border-top:1px solid #e0e0e0;display:flex;justify-content:flex-end}.audio-settings-footer .btn{padding:12px 32px;font-size:16px;font-weight:500}@media (max-width: 600px){.audio-settings-panel{width:95%;max-height:95vh}.audio-settings-header{padding:20px}.audio-settings-header h2{font-size:20px}.audio-settings-content{padding:20px}.audio-setting-item{margin-bottom:24px}}.game-menu{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;animation:pageEnter .5s ease}.game-menu-card{background:white;border-radius:var(--radius-xl);padding:48px;box-shadow:var(--shadow-xl);max-width:800px;width:100%;position:relative;overflow:hidden;animation:cardSlideIn .6s ease}.game-menu-card:after{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(102,126,234,.1) 0%,transparent 70%);animation:rotate 20s linear infinite;pointer-events:none}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes cardSlideIn{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.game-header{text-align:center;margin-bottom:40px;padding-bottom:24px;border-bottom:2px solid rgba(102,126,234,.1);animation:fadeInUp .6s ease .2s both}.game-title{font-size:42px;font-weight:800;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;margin-bottom:12px;line-height:1.2;letter-spacing:-.5px}.game-subtitle{font-size:18px;color:#666;text-align:center;line-height:1.6;max-width:600px;margin:0 auto}.game-modes{display:flex;flex-direction:column;gap:16px;margin-bottom:32px;animation:fadeInUp .6s ease .4s both}.game-mode-btn{background:white;border:2px solid var(--border-color);border-left:5px solid;border-radius:var(--radius-md);padding:24px;text-align:left;cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden}.game-mode-btn:before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--primary-gradient);opacity:.05;transition:width var(--transition-base)}.game-mode-btn:hover:before{width:100%}.game-mode-btn:hover{transform:translate(6px) translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary-color);border-left-width:6px}.mode-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.mode-title{font-size:20px;font-weight:600;color:#333}.mode-difficulty{font-size:18px;color:#ff9800}.mode-description{font-size:14px;color:#666;margin:0}.menu-footer{display:flex;flex-direction:column;gap:20px;align-items:center;animation:fadeInUp .6s ease .6s both}.footer-primary-section{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;width:100%}.footer-secondary-section{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;width:100%;padding-top:12px;border-top:1px solid rgba(102,126,234,.1)}.footer-settings-section{display:flex;justify-content:center;width:100%;padding-top:8px}.btn-featured{background:var(--primary-gradient);color:#fff;font-weight:700;font-size:18px;padding:16px 32px;min-width:160px;box-shadow:var(--shadow-md)}.btn-featured:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.btn-featured:active{transform:translateY(-1px) scale(.98)}.audio-settings-btn{position:relative}.audio-settings-btn:hover{transform:scale(1.05)}@media (max-width: 768px){.game-menu{padding:20px 12px 12px;align-items:flex-start}.game-menu-card{padding:24px 20px;border-radius:var(--radius-lg)}.game-header{margin-bottom:32px;padding-bottom:20px}.game-title{font-size:28px;margin-bottom:10px;line-height:1.3}.game-subtitle{font-size:15px;margin-bottom:0}.game-modes{gap:12px;margin-bottom:24px}.game-mode-btn{padding:18px 16px;border-left-width:4px}.game-mode-btn:hover{transform:translate(4px) translateY(-1px);border-left-width:5px}.mode-header{margin-bottom:6px}.mode-title{font-size:17px}.mode-difficulty{font-size:16px}.mode-description{font-size:13px;line-height:1.5}.menu-footer{gap:16px}.footer-primary-section{flex-direction:column;gap:12px}.footer-secondary-section{flex-direction:column;gap:10px;padding-top:16px}.footer-settings-section{padding-top:12px}.btn-featured{width:100%;padding:14px 24px;font-size:16px;min-width:auto}.menu-footer .btn{width:100%;padding:14px 20px;font-size:15px;min-width:auto}}@media (max-width: 480px){.game-menu{padding:16px 8px 8px}.game-menu-card{padding:20px 16px;border-radius:var(--radius-md)}.game-header{margin-bottom:24px;padding-bottom:16px}.game-title{font-size:24px;margin-bottom:8px}.game-subtitle{font-size:13px;margin-bottom:0}.game-modes{gap:10px;margin-bottom:20px}.game-mode-btn{padding:16px 14px;border-left-width:3px}.game-mode-btn:hover{transform:translate(3px);border-left-width:4px}.mode-title{font-size:15px}.mode-difficulty{font-size:14px}.mode-description{font-size:12px}.menu-footer{gap:12px}.footer-primary-section{gap:10px}.footer-secondary-section{gap:8px;padding-top:12px}.footer-settings-section{padding-top:8px}.btn-featured{padding:12px 20px;font-size:15px}.menu-footer .btn{padding:12px 18px;font-size:14px}}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #667eea;--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--secondary-color: #764ba2;--success-color: #4CAF50;--error-color: #f44336;--warning-color: #FF9800;--info-color: #2196F3;--text-primary: #333;--text-secondary: #666;--text-light: #999;--bg-white: #ffffff;--bg-light: #f9f9f9;--bg-gray: #f5f5f5;--border-color: #e0e0e0;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);--shadow-md: 0 4px 16px rgba(0, 0, 0, .12);--shadow-lg: 0 10px 40px rgba(0, 0, 0, .15);--shadow-xl: 0 20px 60px rgba(0, 0, 0, .2);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-base: .3s ease;--transition-slow: .5s ease}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--primary-gradient);background-attachment:fixed;min-height:100vh;color:var(--text-primary)}#root{min-height:100vh}html{scroll-behavior:smooth}::selection{background:rgba(102,126,234,.3);color:var(--text-primary)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:rgba(255,255,255,.1);border-radius:5px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:5px;transition:background var(--transition-base)}::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5)}@media (max-width: 768px){body{font-size:15px}::-webkit-scrollbar{width:6px;height:6px}}@media (max-width: 480px){body{font-size:14px}::-webkit-scrollbar{width:4px;height:4px}}@media (hover: none) and (pointer: coarse){button,.btn,.game-mode-btn,.option-btn,.property-tag,.back-btn{min-height:44px;min-width:44px}button:hover,.btn:hover,.game-mode-btn:hover,.option-btn:hover{transform:none}button:active,.btn:active,.game-mode-btn:active,.option-btn:active{transform:scale(.95);opacity:.8}}