:root{--color-bg-primary:#0a0e17;--color-bg-secondary:#121826;--color-bg-elevated:#1a2235;--color-bg-glass:#121826d9;--color-bg-glass-hover:#1a2235eb;--color-accent-primary:#6c63ff;--color-accent-secondary:#00d4aa;--color-accent-warm:#ff6b6b;--color-accent-gold:#ffd93d;--gradient-primary:linear-gradient(135deg, #6c63ff 0%, #4ecdc4 100%);--gradient-warm:linear-gradient(135deg, #ff6b6b 0%, #ffd93d 100%);--gradient-cool:linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-glass:linear-gradient(135deg, #6c63ff1a 0%, #4ecdc40d 100%);--color-text-primary:#e8eaf6;--color-text-secondary:#9aa5b4;--color-text-muted:#5c6b7f;--color-text-accent:#6c63ff;--color-border:#6c63ff33;--color-border-hover:#6c63ff66;--color-border-active:#6c63ff99;--font-primary:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-display:"Space Grotesk", "Inter", sans-serif;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.5rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--shadow-sm:0 2px 8px #0000004d;--shadow-md:0 4px 16px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-glow:0 0 20px #6c63ff4d;--shadow-glow-green:0 0 20px #00d4aa4d;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease;--transition-spring:.5s cubic-bezier(.34, 1.56, .64, 1);--z-game:1;--z-hud:10;--z-panel:20;--z-modal:30;--z-tooltip:40;--z-loading:100}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;font-family:var(--font-primary);background:var(--color-bg-primary);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-border-hover)}.glass{background:var(--color-bg-glass);-webkit-backdrop-filter:blur(20px)saturate(1.5);border:1px solid var(--color-border)}.glass-hover:hover{background:var(--color-bg-glass-hover);border-color:var(--color-border-hover)}.app-container{width:100%;height:100%;position:relative}.game-layer{z-index:var(--z-game);position:absolute;inset:0}.ui-layer{z-index:var(--z-hud);pointer-events:none;position:absolute;inset:0}.ui-layer>*{pointer-events:auto}.loading-screen{z-index:var(--z-loading);background:var(--color-bg-primary);justify-content:center;align-items:center;gap:var(--space-6);transition:opacity var(--transition-slow), visibility var(--transition-slow);flex-direction:column;display:flex;position:fixed;inset:0}.loading-screen.fade-out{opacity:0;visibility:hidden}.loading-title{font-family:var(--font-display);font-size:var(--text-4xl);background:var(--gradient-primary);-webkit-text-fill-color:transparent;letter-spacing:-.02em;-webkit-background-clip:text;background-clip:text;font-weight:700}.loading-subtitle{color:var(--color-text-secondary);font-size:var(--text-lg);font-weight:300}.loading-bar-container{background:var(--color-bg-elevated);border-radius:var(--radius-full);width:280px;height:4px;overflow:hidden}.loading-bar-fill{background:var(--gradient-primary);border-radius:var(--radius-full);height:100%;transition:width var(--transition-base)}.loading-tip{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-4)}.hud{padding:var(--space-4);pointer-events:none;flex-direction:column;justify-content:space-between;display:flex;position:absolute;inset:0}.hud>*{pointer-events:auto}.hud-top{justify-content:space-between;align-items:flex-start;display:flex}.hud-bottom{justify-content:center;align-items:flex-end;display:flex}.hud-scene-badge{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:500;display:inline-flex}.hud-stats{gap:var(--space-3);display:flex}.hud-stat{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);display:inline-flex}.hud-stat:hover{transform:scale(1.05)}.hud-controls{gap:var(--space-3);padding:var(--space-3) var(--space-5);border-radius:var(--radius-lg);font-size:var(--text-xs);color:var(--color-text-muted);display:flex}.hud-key{min-width:24px;height:24px;padding:0 var(--space-2);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--color-text-primary);margin-right:var(--space-1);justify-content:center;align-items:center;font-weight:600;display:inline-flex}.interaction-prompt{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);font-size:var(--text-sm);z-index:var(--z-tooltip);font-weight:500;animation:2s ease-in-out infinite prompt-bounce;display:flex;position:absolute;bottom:120px;left:50%;transform:translate(-50%)}@keyframes prompt-bounce{0%,to{transform:translate(-50%)translateY(0)}50%{transform:translate(-50%)translateY(-6px)}}.word-panel{width:340px;max-height:80vh;z-index:var(--z-panel);border-radius:var(--radius-xl) 0 0 var(--radius-xl);background:var(--color-bg-glass);-webkit-backdrop-filter:blur(24px)saturate(1.6);border:1px solid var(--color-border);box-shadow:-8px 0 40px #0006, var(--shadow-glow);pointer-events:auto;border-right:none;animation:.4s cubic-bezier(.34,1.56,.64,1) panel-slide-in;position:fixed;top:50%;right:0;overflow:hidden auto;transform:translateY(-50%)}@keyframes panel-slide-in{0%{transform:translateY(-50%)translate(calc(100% + 40px))}to{transform:translateY(-50%)translate(0)}}.word-panel-top{padding:var(--space-4) var(--space-5) var(--space-2);justify-content:space-between;align-items:center;display:flex}.word-panel-word{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-text-primary);font-weight:700;line-height:1.2}.word-panel-actions{gap:var(--space-1);display:flex}.word-panel-btn{border-radius:var(--radius-full);width:30px;height:30px;color:var(--color-text-secondary);cursor:pointer;font-size:var(--text-base);transition:all var(--transition-fast);background:#ffffff14;border:none;justify-content:center;align-items:center;display:flex}.word-panel-btn:hover{color:var(--color-text-primary);background:#ffffff2e;transform:scale(1.1)}.word-panel-btn.is-fav{background:#ffd70033}.word-panel-meta{align-items:center;gap:var(--space-3);padding:0 var(--space-5) var(--space-3);display:flex}.word-panel-pos{padding:2px var(--space-2);border-radius:var(--radius-full);color:var(--color-accent-primary);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;background:#6c63ff26;font-weight:600;display:inline-block}.word-panel-phonetic{align-items:center;gap:var(--space-1);color:var(--color-text-secondary);font-size:var(--text-sm);cursor:pointer;padding:2px var(--space-2);border-radius:var(--radius-sm);transition:all var(--transition-fast);display:inline-flex}.word-panel-phonetic:hover{color:var(--color-accent-primary);background:#6c63ff1f}.word-panel-phonetic.speaking{color:var(--color-accent-primary);animation:.6s ease-in-out infinite pulse-speak}@keyframes pulse-speak{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.word-panel-definition{padding:0 var(--space-5) var(--space-3);color:var(--color-text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-3);border-bottom:1px solid #6c63ff1a;line-height:1.6}.word-panel-sentences{padding:0 var(--space-5)}.word-panel-sentence{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border-left:2px solid var(--color-accent-primary);margin-bottom:var(--space-2);cursor:pointer;transition:background var(--transition-fast);background:#6c63ff0a}.word-panel-sentence:hover{background:#6c63ff1a}.word-panel-sentence-en{font-size:var(--text-sm);color:var(--color-text-primary);margin-bottom:2px;line-height:1.4}.word-panel-sentence-cn{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.4}.word-panel-tags{gap:var(--space-1);padding:var(--space-3) var(--space-5) var(--space-4);flex-wrap:wrap;display:flex}.word-panel-tag{padding:2px var(--space-2);border-radius:var(--radius-full);color:var(--color-accent-secondary);background:#00d4aa1a;font-size:.65rem;font-weight:500}.word-panel-difficulty{padding:2px var(--space-2);border-radius:var(--radius-full);font-size:.65rem;font-weight:700}.word-panel-difficulty.a1{color:#00d4aa;background:#00d4aa26}.word-panel-difficulty.a2{color:#6c63ff;background:#6c63ff26}.word-panel-difficulty.b1{color:#ff6b6b;background:#ff6b6b26}.word-panel-difficulty.b2{color:#ffd93d;background:#ffd93d26}.word-panel-timer{background:var(--gradient-primary);transform-origin:0;height:3px;animation:12s linear forwards timer-shrink}.word-panel-timer.paused{animation-play-state:paused}@keyframes timer-shrink{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.word-card-close{border-radius:var(--radius-full);width:32px;height:32px;color:var(--color-text-secondary);cursor:pointer;font-size:var(--text-lg);transition:all var(--transition-fast);background:#ffffff1a;border:none;justify-content:center;align-items:center;display:flex}.word-card-close:hover{color:var(--color-text-primary);background:#fff3}.world-map-overlay{z-index:var(--z-modal);animation:fade-in var(--transition-base);background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.world-map{border-radius:var(--radius-xl);width:min(1500px,90vw);max-width:90vw;max-height:85vh;overflow:hidden}.world-map-header{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.world-map-title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700}.world-map-body{padding:var(--space-5) var(--space-6) var(--space-6);max-height:65vh;overflow-y:auto}.world-map-section-title{font-size:var(--text-sm);color:var(--color-text-muted);margin:var(--space-3) 0;letter-spacing:.03em;font-weight:600}.world-map-grid{gap:var(--space-4);margin-bottom:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(170px,1fr));display:grid}.world-map-scene{padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-bg-elevated);border:1px solid var(--color-border);cursor:pointer;transition:all var(--transition-base);text-align:center;position:relative}.world-map-scene:hover:not(.locked){border-color:var(--color-accent-primary);box-shadow:var(--shadow-glow);transform:translateY(-4px)}.world-map-scene.active{border-color:var(--color-accent-secondary);box-shadow:var(--shadow-glow-green)}.world-map-scene.locked{opacity:.4;cursor:not-allowed}.world-map-scene-icon{margin-bottom:var(--space-3);font-size:2.5rem}.world-map-scene-name{font-weight:600;font-size:var(--text-base);margin-bottom:var(--space-1)}.world-map-scene-label{font-size:var(--text-xs);color:var(--color-text-muted)}.world-map-scene-badge{top:var(--space-2);right:var(--space-2);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;position:absolute}.world-map-scene-badge.current{color:var(--color-accent-secondary);background:#00d4aa26}.world-map-scene-badge.coming{color:var(--color-accent-gold);background:#ffd93d26}.favorites-overlay{z-index:var(--z-panel);animation:fade-in var(--transition-fast);justify-content:flex-end;display:flex;position:fixed;inset:0}.favorites-backdrop{background:#0000004d;position:absolute;inset:0}.favorites-panel{border-left:1px solid var(--color-border);width:380px;max-width:100vw;height:100%;animation:slide-in-right var(--transition-base);flex-direction:column;display:flex;position:relative}.favorites-header{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;display:flex}.favorites-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700}.favorites-count{color:var(--color-text-muted);font-size:var(--text-sm)}.favorites-list{padding:var(--space-4);flex:1;overflow-y:auto}.favorites-empty{height:200px;color:var(--color-text-muted);justify-content:center;align-items:center;gap:var(--space-3);flex-direction:column;display:flex}.favorites-empty-icon{opacity:.5;font-size:3rem}.fav-item{align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);margin-bottom:var(--space-2);display:flex}.fav-item:hover{background:var(--color-bg-elevated)}.fav-item-word{font-weight:600;font-size:var(--text-base);flex:1}.fav-item-phonetic{color:var(--color-text-muted);font-size:var(--text-sm)}.fav-item-speak{border-radius:var(--radius-full);width:28px;height:28px;color:var(--color-accent-primary);cursor:pointer;font-size:var(--text-sm);transition:all var(--transition-fast);background:#6c63ff1a;border:none;justify-content:center;align-items:center;display:flex}.fav-item-speak:hover{background:#6c63ff33;transform:scale(1.1)}.fav-item-remove{border-radius:var(--radius-full);width:28px;height:28px;color:var(--color-text-muted);cursor:pointer;font-size:var(--text-sm);transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.fav-item-remove:hover{color:var(--color-accent-warm);background:#ff6b6b26}.scene-transition{z-index:var(--z-modal);justify-content:center;align-items:center;gap:var(--space-3);background:var(--color-bg-primary);opacity:0;pointer-events:none;flex-direction:column;transition:opacity .35s;display:flex;position:fixed;inset:0}.scene-transition.visible{opacity:1;pointer-events:auto}.scene-transition-icon{font-size:4rem;animation:1.2s ease-in-out infinite float}.scene-transition-name{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-text-secondary);font-weight:600}.crosshair{pointer-events:none;width:8px;height:8px;z-index:var(--z-hud);transition:all var(--transition-fast);border:2px solid #ffffff80;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.crosshair.active{border-color:var(--color-accent-primary);width:12px;height:12px;box-shadow:var(--shadow-glow)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes card-slide-up{0%{opacity:0;transform:translateY(30px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes glow-pulse{0%,to{box-shadow:0 0 10px #6c63ff33}50%{box-shadow:0 0 25px #6c63ff80}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.btn{justify-content:center;align-items:center;gap:var(--space-2);border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);font-family:var(--font-primary);cursor:pointer;transition:all var(--transition-fast);border:none;font-weight:500;display:inline-flex}.btn-primary{background:var(--gradient-primary);color:#fff}.btn-primary:hover{box-shadow:var(--shadow-glow);transform:translateY(-1px)}.btn-ghost{color:var(--color-text-secondary);border:1px solid var(--color-border);background:0 0}.btn-ghost:hover{border-color:var(--color-border-hover);color:var(--color-text-primary)}.game-layer{touch-action:none}body{overscroll-behavior:none}.word-panel{width:min(340px,88vw)}.favorites-panel{width:min(380px,92vw)}.loading-bar-container{width:min(280px,80vw)}@media (width<=768px){.world-map-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.hud{padding:.6rem}.hud-stats{gap:.4rem}.hud-stat{padding:.3rem .5rem;font-size:.8rem}.hud-scene-badge{font-size:.85rem}.hud-controls{flex-wrap:wrap;gap:.5rem;max-width:90vw;font-size:.65rem}.word-panel{max-height:62vh}}.touch-controls{pointer-events:none;z-index:var(--z-hud);position:absolute;inset:0}.touch-joystick{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:auto;touch-action:none;background:#12182659;border:2px solid #6c63ff66;border-radius:50%;justify-content:center;align-items:center;width:132px;height:132px;display:flex;position:absolute;bottom:32px;left:28px}.touch-joystick-thumb{will-change:transform;background:#6c63ffb3;border:2px solid #e8eaf699;border-radius:50%;width:58px;height:58px}.touch-buttons{pointer-events:none;grid-template-columns:repeat(2,66px);grid-auto-rows:66px;gap:12px;display:grid;position:absolute;bottom:32px;right:24px}.touch-btn{width:66px;height:66px;color:var(--color-text-primary);font-family:var(--font-primary);pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;background:#1218268c;border:2px solid #6c63ff66;border-radius:50%;justify-content:center;align-items:center;font-size:1rem;font-weight:600;display:flex}.touch-btn:active{background:#6c63ff80}.touch-btn-jump{font-size:1.05rem}.touch-btn-run.active{background:#00d4aa73;border-color:#00d4aab3}.hud-audio{align-items:center;gap:.5rem;display:flex}.hud-audio-btn{cursor:pointer;color:inherit;background:0 0;border:none;padding:0;font-size:1rem;line-height:1}.hud-volume{cursor:pointer;width:84px;height:4px;accent-color:var(--color-accent-secondary)}@media (width<=768px){.hud-volume{width:60px}}