:root{--color-primary:#14b8a6;--color-primary-dark:#0d9488;--color-primary-light:#5eead4;--color-primary-bg:#f0fdfa;--color-accent:#fb7185;--color-accent-dark:#e11d48;--color-gold:#fbbf24;--color-gold-dark:#f59e0b;--color-streak:#f97316;--color-purple:#a78bfa;--color-blue:#60a5fa;--color-success:#10b981;--color-success-bg:#ecfdf5;--color-error:#ef4444;--color-error-bg:#fef2f2;--color-warning:#f59e0b;--color-warning-bg:#fffbeb;--color-bg:#fafaf9;--color-bg-secondary:#f5f5f4;--color-surface:#fff;--color-surface-elevated:#fff;--color-surface-dark:#1e293b;--color-text:#1e293b;--color-text-secondary:#64748b;--color-text-muted:#94a3b8;--color-text-inverse:#fff;--color-border:#e2e8f0;--color-border-strong:#cbd5e1;--color-border-active:#14b8a6;--shadow-xs:0 1px 2px #0f172a0a;--shadow-sm:0 2px 8px #0f172a0f;--shadow-md:0 4px 16px #0f172a14;--shadow-lg:0 8px 28px #0f172a1a;--shadow-xl:0 12px 40px #0f172a1f;--shadow-2xl:0 20px 56px #0f172a29;--shadow-primary:0 4px 16px #14b8a640;--shadow-accent:0 4px 16px #fb718540;--shadow-success:0 4px 16px #10b98140;--shadow-error:0 4px 16px #ef444440;--radius-xs:8px;--radius-sm:12px;--radius-md:16px;--radius-lg:20px;--radius-xl:28px;--radius-2xl:36px;--radius-full:999px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--space-4xl:80px;--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-smooth:cubic-bezier(.4, 0, .2, 1);--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--transition-fast:.15s var(--ease-smooth);--transition-medium:.25s var(--ease-smooth);--transition-slow:.4s var(--ease-out);--transition-spring:.3s var(--ease-spring);--font-primary:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--font-heading:"Outfit", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-primary);background-color:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.02em;font-weight:700;line-height:1.2}button,input,select{font-family:inherit;font-size:inherit}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-xs)}.container{max-width:1200px;padding:0 var(--space-lg);margin:0 auto}@media (width<=600px){.container{padding:0 var(--space-md)}}.wavv-app{flex-direction:column;min-height:100vh;display:flex}.navbar{z-index:100;-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);transition:var(--transition-fast);background-color:#fafaf9d9;padding:14px 0;position:sticky;top:0}.navbar-container{justify-content:space-between;align-items:center;gap:var(--space-lg);display:flex}.navbar-logo{font-family:var(--font-heading);color:var(--color-text);cursor:pointer;letter-spacing:-.04em;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font-size:26px;font-weight:800;display:flex}.navbar-logo span{background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);width:36px;height:36px;box-shadow:var(--shadow-primary);justify-content:center;align-items:center;font-size:20px;font-weight:800;display:inline-flex;transform:rotate(-8deg)}.navbar-menu{gap:var(--space-lg);list-style:none;display:flex}.navbar-item{color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-fast);border-radius:var(--radius-xs);padding:8px 4px;font-size:15px;font-weight:600;position:relative}.navbar-item:after{content:"";background-color:var(--color-primary);border-radius:var(--radius-full);width:0;height:3px;transition:var(--transition-medium);position:absolute;bottom:2px;left:50%;transform:translate(-50%)}.navbar-item:hover{color:var(--color-text)}.navbar-item:hover:after,.navbar-item.active:after{width:100%}.navbar-item.active{color:var(--color-primary);font-weight:700}.navbar-cta{background-color:var(--color-primary);color:#fff;border-radius:var(--radius-full);cursor:pointer;transition:var(--transition-spring);box-shadow:var(--shadow-primary);border:none;padding:12px 24px;font-size:14px;font-weight:700}.navbar-cta:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 6px 20px #14b8a659}.navbar-cta:active{transform:translateY(0)scale(.98)}@media (width<=768px){.navbar-menu,.navbar-cta{display:none}.navbar{padding:12px 0}.navbar-logo{font-size:22px}}.bottom-nav{-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--color-border);width:100%;padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px));z-index:100;background-color:#fffffff2;justify-content:space-around;align-items:center;display:none;position:fixed;bottom:0;left:0}.bottom-nav-item{cursor:pointer;transition:var(--transition-spring);border-radius:var(--radius-md);color:var(--color-text-muted);flex-direction:column;align-items:center;gap:4px;padding:8px 16px;font-size:11px;font-weight:600;display:flex;position:relative}.bottom-nav-item.active{color:var(--color-primary);font-weight:700}.bottom-nav-item.active .bottom-nav-icon-wrap{background-color:var(--color-primary-bg);box-shadow:var(--shadow-primary);transform:translateY(-4px)}.bottom-nav-icon-wrap{border-radius:var(--radius-md);width:48px;height:48px;transition:var(--transition-spring);justify-content:center;align-items:center;display:flex}.bottom-nav-item:active .bottom-nav-icon-wrap{transform:scale(.92)}@media (width<=768px){.bottom-nav{display:flex}.home-view,.learn-view,.ar-screen{padding-bottom:80px}}.btn-primary{background:var(--color-primary);color:#fff;border-radius:var(--radius-full);cursor:pointer;transition:var(--transition-spring);box-shadow:var(--shadow-primary);border:none;justify-content:center;align-items:center;gap:8px;padding:16px 36px;font-size:16px;font-weight:700;display:inline-flex}.btn-primary:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 8px 24px #14b8a659}.btn-primary:active{box-shadow:var(--shadow-sm);transform:translateY(0)scale(.98)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{background-color:var(--color-surface);color:var(--color-text);border:2px solid var(--color-border-strong);border-radius:var(--radius-full);cursor:pointer;transition:var(--transition-spring);justify-content:center;align-items:center;gap:8px;padding:16px 36px;font-size:16px;font-weight:700;display:inline-flex}.btn-secondary:hover{border-color:var(--color-primary);color:var(--color-primary);box-shadow:var(--shadow-sm);transform:translateY(-2px)}.btn-secondary:active{transform:translateY(0)scale(.98)}.hero{padding:var(--space-3xl) 0 var(--space-4xl);position:relative;overflow:hidden}.hero-grid{align-items:center;gap:var(--space-2xl);grid-template-columns:1.1fr .9fr;display:grid}.hero-badge{background-color:var(--color-primary-bg);color:var(--color-primary-dark);border-radius:var(--radius-full);margin-bottom:var(--space-lg);border:1px solid #14b8a633;align-items:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:700;display:inline-flex}.hero-badge-icon{color:var(--color-streak)}.hero-title{color:var(--color-text);margin-bottom:var(--space-lg);letter-spacing:-.03em;font-size:60px;font-weight:800;line-height:1.05}.hero-title span{background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.hero-desc{color:var(--color-text-secondary);margin-bottom:var(--space-xl);max-width:540px;font-size:18px}.hero-buttons{gap:var(--space-md);flex-wrap:wrap;display:flex}.hero-visual{justify-content:center;align-items:center;display:flex;position:relative}.waving-hand-showcase{background-color:var(--color-surface);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);aspect-ratio:1;width:100%;max-width:420px;transition:var(--transition-spring);justify-content:center;align-items:center;padding:20px;display:flex;position:relative;overflow:hidden}.waving-hand-showcase:hover{box-shadow:var(--shadow-2xl);transform:translateY(-6px)rotate(-1deg)}.waving-hand-gif{object-fit:cover;border-radius:var(--radius-xl);width:100%;height:100%}@media (width<=968px){.hero-grid{gap:var(--space-2xl);text-align:center;grid-template-columns:1fr}.hero-title{font-size:42px}.hero-desc{margin-left:auto;margin-right:auto;font-size:16px}.hero-buttons{justify-content:center}.hero-badge{margin-left:auto;margin-right:auto}}@media (width<=600px){.hero{padding:var(--space-2xl) 0 var(--space-3xl)}.hero-title{font-size:32px}.waving-hand-showcase{max-width:320px}}.features-section{padding:var(--space-3xl) 0;background-color:var(--color-bg-secondary)}.section-header{text-align:center;margin-bottom:var(--space-2xl);max-width:600px;margin-left:auto;margin-right:auto}.section-title{color:var(--color-text);margin-bottom:var(--space-md);font-size:36px;font-weight:800}.section-subtitle{color:var(--color-text-secondary);font-size:16px}.bento-grid{gap:var(--space-lg);grid-template-columns:repeat(3,1fr);grid-auto-rows:240px;display:grid}.bento-item{background-color:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-xl);transition:var(--transition-spring);box-shadow:var(--shadow-sm);border:1px solid var(--color-border);position:relative;overflow:hidden}.bento-item:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px)}.bento-item.col-2{grid-column:span 2}.bento-item.row-2{grid-row:span 2}.bento-flex-col{flex-direction:column;display:flex}.bento-desc-spaced{margin-bottom:var(--space-lg)}.bento-icon{border-radius:var(--radius-md);width:48px;height:48px;margin-bottom:var(--space-lg);color:#fff;justify-content:center;align-items:center;font-size:24px;display:flex}.bento-icon-sage{background:linear-gradient(135deg,#10b981,#34d399)}.bento-icon-blue{background:linear-gradient(135deg,#0ea5e9,#38bdf8)}.bento-icon-lavender{background:linear-gradient(135deg,#8b5cf6,#a78bfa)}.bento-icon-coral{background:linear-gradient(135deg,#f43f5e,#fb7185)}.bento-title{margin-bottom:var(--space-sm);color:var(--color-text);font-size:20px;font-weight:700}.bento-desc{color:var(--color-text-secondary);font-size:14px;line-height:1.5}.bg-education{background:linear-gradient(135deg,#ecfdf5 0%,#f0fdfa 100%)}.bg-conversation{background:linear-gradient(135deg,#fff7ed 0%,#fffbeb 100%)}.bg-sound-watch{background:linear-gradient(135deg,#f5f3ff 0%,#ede9fe 100%)}.bg-safety{background:linear-gradient(135deg,#fef2f2 0%,#fff1f2 100%)}.bento-milestones{gap:var(--space-sm);flex-direction:column;margin-top:auto;display:flex}.milestone-badge{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);color:var(--color-text);transition:var(--transition-spring);align-items:center;gap:8px;padding:12px 18px;font-size:14px;font-weight:700;display:flex}.milestone-badge:hover{box-shadow:var(--shadow-sm);transform:translate(4px)}@media (width<=968px){.bento-grid{grid-template-columns:1fr;grid-auto-rows:auto}.bento-item.col-2{grid-column:span 1}.bento-item{min-height:200px}}.learn-view{padding:var(--space-xl) 0;flex:1}.learn-grid{gap:var(--space-2xl);grid-template-columns:2.8fr 1.2fr;align-items:start;display:grid}.learn-main-panel{flex-direction:column;align-items:center;display:flex}.stats-bar{background-color:var(--color-surface);border-radius:var(--radius-lg);width:100%;max-width:500px;margin-bottom:var(--space-lg);box-shadow:var(--shadow-sm);border:1px solid var(--color-border);justify-content:space-around;align-items:center;padding:14px 20px;display:none}.stats-bar-item{align-items:center;gap:6px;font-size:15px;font-weight:700;display:flex}.stats-bar-item .stat-icon{align-items:center;display:flex}.stats-bar-item.xp{color:var(--color-gold-dark)}.stats-bar-item.streak{color:var(--color-streak)}.stats-bar-item.hearts{color:var(--color-accent)}@media (width<=768px){.stats-bar{display:flex}}.map-header-card{background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);border-radius:var(--radius-xl);width:100%;max-width:600px;padding:var(--space-lg) var(--space-xl);align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl);box-shadow:var(--shadow-primary);color:#fff;display:flex}.map-header-icon{border-radius:var(--radius-full);background-color:#fff3;flex-shrink:0;justify-content:center;align-items:center;width:56px;height:56px;font-size:28px;display:flex}.map-header-info h3{color:#fff;margin-bottom:2px;font-size:18px}.map-header-info p{color:#ffffffd9;font-size:13px}.ar-practice-banner{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:100%;max-width:600px;padding:var(--space-md) var(--space-lg);margin-bottom:var(--space-xl);cursor:pointer;transition:var(--transition-spring);box-shadow:var(--shadow-sm);justify-content:space-between;align-items:center;display:flex}.ar-practice-banner:hover{box-shadow:var(--shadow-md);border-color:var(--color-primary);transform:translateY(-3px)}.ar-practice-info h4{margin-bottom:2px;font-size:15px}.ar-practice-info p{color:var(--color-text-secondary);font-size:12px}.ar-practice-btn{background-color:var(--color-primary-bg);color:var(--color-primary-dark);border-radius:var(--radius-full);border:none;padding:10px 16px;font-size:12px;font-weight:700}.map-tree{width:100%;max-width:600px;padding:var(--space-lg) 0;flex-direction:column;align-items:center;display:flex}.map-node-wrapper{width:100%;margin-bottom:var(--space-md);justify-content:center;display:flex;position:relative;transform:translate(0)}.map-connector{background:repeating-linear-gradient(to bottom, var(--color-border-strong) 0, var(--color-border-strong) 4px, transparent 4px, transparent 8px);width:6px;height:32px;margin:0 auto;position:absolute;top:100%;left:50%;transform:translate(-50%)}.map-connector.unlocked{background:repeating-linear-gradient(to bottom, var(--color-primary) 0, var(--color-primary) 4px, transparent 4px, transparent 8px)}.map-node{border-radius:var(--radius-full);background-color:var(--color-surface);border:3px solid var(--color-border);cursor:not-allowed;width:80px;height:80px;transition:var(--transition-spring);opacity:.5;box-shadow:var(--shadow-xs);justify-content:center;align-items:center;display:flex;position:relative}.map-node.unlocked{border-color:var(--color-primary);cursor:pointer;opacity:1;box-shadow:var(--shadow-primary);animation:2.5s ease-in-out infinite nodePulse}.map-node.unlocked:hover{transform:scale(1.1);box-shadow:0 8px 28px #14b8a659}.map-node.unlocked:active{transform:scale(.95)}.map-node.completed{border-color:var(--color-success);background:linear-gradient(135deg, var(--color-success) 0%, #34d399 100%);cursor:pointer;opacity:1;box-shadow:var(--shadow-success)}.map-node.completed:hover{transform:scale(1.08)}.map-node.completed:active{transform:scale(.95)}.map-node-icon{justify-content:center;align-items:center;font-size:32px;display:flex}.map-node.unlocked .map-node-icon{filter:none}.map-node.completed .map-node-icon{color:#fff;font-size:28px}.map-node-tooltip{background-color:var(--color-text);color:#fff;border-radius:var(--radius-full);white-space:nowrap;pointer-events:none;opacity:0;transition:var(--transition-fast);z-index:5;padding:4px 10px;font-size:11px;font-weight:600;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%)}.map-node.unlocked:hover .map-node-tooltip,.map-node.completed:hover .map-node-tooltip{opacity:1;transform:translate(-50%)translateY(-2px)}.map-node-status{border-radius:var(--radius-full);background-color:var(--color-surface);box-shadow:var(--shadow-sm);white-space:nowrap;padding:3px 8px;font-size:10px;font-weight:700;position:absolute;top:-6px;right:-6px}.map-node-status.locked{background-color:var(--color-bg-secondary);color:var(--color-text-muted)}.map-node-status.start{background-color:var(--color-primary);color:#fff}.map-node-status.done{background-color:var(--color-success);color:#fff}.learn-sidebar{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-sm);position:sticky;top:90px}.sidebar-title{margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--color-border);font-size:18px}.stat-row{margin-bottom:var(--space-md);justify-content:space-between;align-items:center;display:flex}.stat-label{color:var(--color-text-secondary);align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex}.stat-value{font-size:16px;font-weight:800}.stat-value.xp{color:var(--color-gold-dark)}.stat-value.streak{color:var(--color-streak)}.stat-value.hearts{color:var(--color-accent)}.flame-icon{color:var(--color-streak)}.heart-icon{color:var(--color-accent)}.xp-level-section{margin-top:var(--space-lg)}.xp-level-header{color:var(--color-text-secondary);justify-content:space-between;margin-bottom:6px;font-size:13px;font-weight:600;display:flex}.xp-progress-bar{background-color:var(--color-bg-secondary);border-radius:var(--radius-full);width:100%;height:10px;overflow:hidden}.xp-progress-fill{background:linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);border-radius:var(--radius-full);height:100%;transition:width .6s var(--ease-out)}.refill-hearts-btn{background-color:var(--color-error-bg);width:100%;color:var(--color-accent-dark);border:2px dashed var(--color-accent);border-radius:var(--radius-md);margin-top:var(--space-md);cursor:pointer;transition:var(--transition-spring);padding:12px;font-weight:700}.refill-hearts-btn:hover{background-color:#fb71851f;transform:translateY(-2px)}@media (width<=968px){.learn-grid{grid-template-columns:1fr}.learn-sidebar{display:none}}.game-overlay{background-color:var(--color-bg);z-index:1000;width:100vw;height:100vh;animation:slideUp .3s var(--ease-out);position:fixed;top:0;left:0;overflow-y:auto}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.game-header{padding:14px var(--space-lg);padding-top:calc(14px + env(safe-area-inset-top,0px));background-color:var(--color-surface);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;gap:var(--space-md);z-index:10;display:flex;position:sticky;top:0}.game-close-btn{cursor:pointer;color:var(--color-text-secondary);border-radius:var(--radius-full);width:40px;height:40px;transition:var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.game-close-btn:hover{background-color:var(--color-bg-secondary);color:var(--color-text)}.game-title{color:var(--color-text);text-align:center;flex:1;font-size:16px;font-weight:700}.game-hearts-container{background-color:var(--color-error-bg);border-radius:var(--radius-full);flex-shrink:0;align-items:center;gap:4px;padding:6px 14px;display:flex}.game-heart{color:var(--color-accent);align-items:center;display:flex}.game-hearts-count{color:var(--color-accent-dark);font-size:14px;font-weight:800}.game-progress-bar-container{max-width:600px;margin:var(--space-lg) auto 0;padding:0 var(--space-lg)}.game-progress-bar-text{color:var(--color-text-muted);justify-content:space-between;margin-bottom:6px;font-size:12px;font-weight:600;display:flex}.game-progress-bar{background-color:var(--color-bg-secondary);border-radius:var(--radius-full);width:100%;height:10px;overflow:hidden}.game-progress-fill{background:linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);border-radius:var(--radius-full);height:100%;transition:width .4s var(--ease-out)}.exercise-viewport{max-width:600px;margin:var(--space-xl) auto;padding:0 var(--space-lg) 100px;animation:exerciseEnter .35s var(--ease-out)}@keyframes exerciseEnter{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.exercise-prompt{text-align:center;margin-bottom:var(--space-md);color:var(--color-text);font-size:24px;font-weight:800}.exercise-subprompt{color:var(--color-text-secondary);text-align:center;margin-top:-8px;margin-bottom:var(--space-lg);font-size:14px}.recognition-image-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-lg);width:240px;height:240px;margin:0 auto var(--space-xl);box-shadow:var(--shadow-md);animation:bounceIn .4s var(--ease-spring);justify-content:center;align-items:center;display:flex}.recognition-image-card img{object-fit:contain;max-width:100%;max-height:100%}.mcq-hint-btn{margin:0 auto var(--space-xl);border:2px solid var(--color-border-strong);color:var(--color-text-secondary);border-radius:var(--radius-full);cursor:pointer;transition:var(--transition-spring);background:0 0;justify-content:center;align-items:center;gap:6px;padding:10px 20px;font-size:13px;font-weight:700;display:flex}.mcq-hint-btn:hover{border-color:var(--color-primary);color:var(--color-primary);transform:translateY(-2px)}.options-grid{gap:var(--space-md);grid-template-columns:1fr 1fr;display:grid}.option-btn{background-color:var(--color-surface);border:2px solid var(--color-border-strong);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-spring);color:var(--color-text);box-shadow:var(--shadow-xs);justify-content:center;align-items:center;min-height:60px;padding:20px;font-size:16px;font-weight:700;display:flex}.option-btn:hover:not(.disabled){border-color:var(--color-primary);color:var(--color-primary-dark);box-shadow:var(--shadow-sm);transform:translateY(-3px)}.option-btn:active:not(.disabled){transform:scale(.97)}.option-btn.selected-correct{background-color:var(--color-success);border-color:var(--color-success);color:#fff;box-shadow:var(--shadow-success);animation:scaleBounce .4s var(--ease-spring)}.option-btn.selected-wrong{background-color:var(--color-error);border-color:var(--color-error);color:#fff;box-shadow:var(--shadow-error);animation:.4s cubic-bezier(.36,.07,.19,.97) both shake}.option-btn.other-correct{background-color:var(--color-success-bg);border-color:var(--color-success);color:var(--color-success)}.option-btn.disabled{cursor:default}.matching-row{gap:var(--space-md);grid-template-columns:1fr 1fr;display:grid}.matching-column{gap:var(--space-sm);flex-direction:column;display:flex}.matching-item{background-color:var(--color-surface);border:2px solid var(--color-border-strong);border-radius:var(--radius-lg);padding:var(--space-md);cursor:pointer;transition:var(--transition-spring);color:var(--color-text);justify-content:space-between;align-items:center;font-weight:600;display:flex}.matching-item.word-item{justify-content:center;height:200px;font-size:20px}.matching-item.img-item{justify-content:center;height:200px;padding:12px}.matching-item.img-item video{object-fit:cover;border-radius:var(--radius-md);width:100%;height:100%}.matching-item.img-item img{object-fit:contain;max-width:100%;height:100%}.matching-item:hover:not(.matched):not(.selected){border-color:var(--color-primary);box-shadow:var(--shadow-sm);transform:translateY(-2px)}.matching-item.selected{background-color:var(--color-primary-bg);border-color:var(--color-primary);box-shadow:var(--shadow-primary)}.matching-item.matched{background-color:var(--color-success-bg);border-color:var(--color-success);color:var(--color-success);cursor:default;box-shadow:none;transform:none}.matching-item.wrong{background-color:var(--color-error-bg);border-color:var(--color-error);animation:.4s cubic-bezier(.36,.07,.19,.97) both shake}.matched-check{color:var(--color-success);flex-shrink:0}.audio-speaker-card{border-radius:var(--radius-full);background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);width:140px;height:140px;margin:0 auto var(--space-xl);cursor:pointer;box-shadow:var(--shadow-primary);transition:var(--transition-spring);color:#fff;border:none;flex-direction:column;justify-content:center;align-items:center;display:flex}.audio-speaker-card:hover{transform:translateY(-4px)scale(1.05);box-shadow:0 8px 28px #14b8a666}.audio-speaker-card:active{transform:scale(.95)}.audio-speaker-card.speaking{animation:1.2s infinite alternate pulseGlow}.audio-speaker-card p{margin-top:6px;font-size:11px;font-weight:700}.audio-options-row{justify-content:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.audio-option-card{background-color:var(--color-surface);border:2px solid var(--color-border-strong);border-radius:var(--radius-lg);width:130px;height:130px;padding:var(--space-sm);cursor:pointer;transition:var(--transition-spring);box-shadow:var(--shadow-xs);justify-content:center;align-items:center;display:flex;position:relative}.audio-option-card:hover:not(.disabled){border-color:var(--color-primary);box-shadow:var(--shadow-sm);transform:translateY(-3px)}.audio-option-card:active:not(.disabled){transform:scale(.96)}.audio-option-card img{object-fit:contain;max-width:100%;max-height:100%}.audio-option-card.selected-correct{border-color:var(--color-success);box-shadow:var(--shadow-success);background-color:var(--color-success-bg)}.audio-option-card.selected-wrong{border-color:var(--color-error);box-shadow:var(--shadow-error);background-color:var(--color-error-bg);animation:.4s cubic-bezier(.36,.07,.19,.97) both shake}.audio-option-card.disabled{cursor:default}.success-check-badge{background-color:var(--color-success);color:#fff;border-radius:var(--radius-full);width:24px;height:24px;box-shadow:var(--shadow-sm);justify-content:center;align-items:center;display:flex;position:absolute;top:-6px;right:-6px}.camera-prompt-row{align-items:center;gap:var(--space-md);background-color:var(--color-surface);border:1px solid var(--color-border);padding:var(--space-md);border-radius:var(--radius-lg);margin-bottom:var(--space-lg);box-shadow:var(--shadow-sm);display:flex}@media (width<=600px){.camera-prompt-row{text-align:center;flex-direction:column}}.camera-hint-img{background-color:var(--color-primary-bg);border-radius:var(--radius-lg);flex-shrink:0;justify-content:center;align-items:center;width:160px;height:160px;padding:8px;display:flex}.camera-hint-img img{object-fit:contain;max-height:100%}.camera-hint-info h5{margin-bottom:4px;font-size:15px}.camera-hint-info p{color:var(--color-text-secondary);font-size:13px}.camera-viewport{background-color:var(--color-surface-dark);border-radius:var(--radius-xl);width:100%;height:300px;box-shadow:var(--shadow-md);margin-bottom:var(--space-lg);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.camera-viewport.recording{border:3px solid var(--color-error);box-shadow:var(--shadow-error)}.camera-viewport.success{border:3px solid var(--color-success);box-shadow:var(--shadow-success)}.webcam-stream{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.camera-fallback{text-align:center;color:#fff;padding:40px}.camera-fallback-icon{margin:0 auto var(--space-md);opacity:.6;display:block}.camera-fallback-text{color:#fff9;font-size:13px}.camera-fallback-spaced{margin-top:50px}.camera-indicator-rec{background-color:var(--color-error);color:#fff;border-radius:var(--radius-full);box-shadow:var(--shadow-sm);align-items:center;gap:6px;padding:6px 14px;font-size:11px;font-weight:700;display:flex;position:absolute;top:16px;left:16px}.rec-dot{border-radius:var(--radius-full);background-color:#fff;width:8px;height:8px;animation:1s infinite alternate pulseDot}.camera-success-overlay{color:#fff;background-color:#10b981e6;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;animation:.3s ease-out fadeIn;display:flex;position:absolute;top:0;left:0}.camera-analyzing-overlay{color:#fff;background-color:#14b8a6e6}.analyzing-sparkle{margin-bottom:var(--space-sm);animation:2s ease-in-out infinite floatSpin}.analyzing-title{font-size:18px}.analyzing-subtitle{opacity:.8;font-size:12px}.camera-success-icon{width:64px;height:64px;color:var(--color-success);border-radius:var(--radius-full);margin-bottom:var(--space-sm);animation:scaleBounce .4s var(--ease-spring);background-color:#fff;justify-content:center;align-items:center;display:flex}.camera-success-title{font-size:22px;font-weight:800}.camera-success-subtitle{opacity:.9;font-size:12px}.camera-action-btn{background:var(--color-primary);color:#fff;border-radius:var(--radius-full);cursor:pointer;transition:var(--transition-spring);box-shadow:var(--shadow-primary);border:none;align-items:center;gap:8px;margin:0 auto;padding:16px 32px;font-weight:700;display:flex}.camera-action-btn:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 8px 24px #14b8a659}.camera-action-btn:active{transform:scale(.97)}.camera-action-full{width:100%}.game-bottom-bar{background-color:var(--color-surface);border-top:1px solid var(--color-border);width:100%;padding:var(--space-md) var(--space-lg) calc(var(--space-md) + env(safe-area-inset-bottom,0px));z-index:1100;animation:slideUpFade .3s var(--ease-out);justify-content:center;display:flex;position:fixed;bottom:0;left:0}@keyframes slideUpFade{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.game-continue-btn{justify-content:center;align-items:center;gap:8px;width:100%;max-width:400px;display:flex}.ar-screen{padding:var(--space-xl) 0;flex:1}.ar-section-header{margin-bottom:var(--space-2xl)}.ar-grid{gap:var(--space-2xl);grid-template-columns:1.2fr .8fr;align-items:start;display:grid}.ar-viewer-container{background-color:var(--color-surface-dark);border:1px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);height:500px;position:relative;overflow:hidden}.ar-3d-model{--background-color:#1e293b;--poster-color:transparent;width:100%;height:100%}.ar-viewer-overlay-top{top:var(--space-md);left:var(--space-lg);color:#fff;z-index:10;position:absolute}.ar-viewer-overlay-top h3{align-items:center;gap:8px;font-size:18px;display:flex}.ar-viewer-overlay-top p{color:#fff9;font-size:12px}.ar-details-panel{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-md)}.ar-select-title{margin-bottom:var(--space-md);font-size:18px}.ar-model-tabs{background-color:var(--color-bg-secondary);border-radius:var(--radius-full);margin-bottom:var(--space-lg);gap:6px;padding:6px;display:flex}.ar-model-tab{border-radius:var(--radius-full);cursor:pointer;color:var(--color-text-secondary);transition:var(--transition-spring);background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:4px;padding:12px 8px;font-size:13px;font-weight:700;display:flex}.ar-model-tab.active{background-color:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-sm)}.ar-model-tab span{font-size:20px}.ar-model-info{margin-bottom:var(--space-xl)}.ar-model-info h4{margin-bottom:var(--space-sm);font-size:20px}.ar-model-info p{color:var(--color-text-secondary);font-size:14px}.btn-ar-action{background:var(--color-primary);color:#fff;border-radius:var(--radius-md);cursor:pointer;width:100%;box-shadow:var(--shadow-primary);transition:var(--transition-spring);border:none;justify-content:center;align-items:center;gap:10px;padding:16px;font-size:16px;font-weight:700;display:flex}.btn-ar-action:hover{transform:translateY(-2px);box-shadow:0 8px 24px #14b8a659}.ar-btn-caption{color:var(--color-text-muted);text-align:center;margin-top:var(--space-sm);font-size:11px}.ghost-practice-box{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-xl);box-shadow:var(--shadow-md);margin-top:var(--space-2xl)}.ghost-practice-title{margin-bottom:var(--space-sm);font-size:20px}.ghost-practice-desc{color:var(--color-text-secondary);margin-bottom:var(--space-lg);font-size:13px}.ghost-grid{gap:var(--space-xl);grid-template-columns:1.1fr .9fr;align-items:center;display:grid}.ghost-viewport-container{border-radius:var(--radius-xl);background-color:var(--color-surface-dark);height:320px;position:relative;overflow:hidden}.ghost-cam-stream{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.ghost-image-overlay{pointer-events:none;mix-blend-mode:screen;filter:contrast(1.1)brightness(1.05);width:80%;height:80%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ghost-image-overlay video,.ghost-image-overlay img{width:100%;height:100%;object-fit:contain!important}.ghost-controls-panel{gap:var(--space-lg);flex-direction:column;display:flex}.ghost-slider-box{gap:var(--space-sm);flex-direction:column;display:flex}.slider-header{color:var(--color-text-secondary);justify-content:space-between;font-size:13px;font-weight:600;display:flex}.ghost-slider{-webkit-appearance:none;border-radius:var(--radius-full);background:var(--color-bg-secondary);outline:none;width:100%;height:6px}.ghost-slider::-webkit-slider-thumb{appearance:none;border-radius:var(--radius-full);background:var(--color-primary);cursor:pointer;width:22px;height:22px;box-shadow:var(--shadow-primary)}.ghost-slider::-moz-range-thumb{border-radius:var(--radius-full);background:var(--color-primary);cursor:pointer;border:none;width:22px;height:22px}.ghost-sign-label{color:var(--color-text-secondary);font-size:14px;font-weight:600}.ghost-tabs{gap:var(--space-sm);flex-wrap:wrap;display:flex}.ghost-tab{background-color:var(--color-surface);border:2px solid var(--color-border-strong);border-radius:var(--radius-full);color:var(--color-text);cursor:pointer;transition:var(--transition-spring);padding:8px 16px;font-size:13px;font-weight:700}.ghost-tab:hover{border-color:var(--color-primary);transform:translateY(-2px)}.ghost-tab.active{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}@media (width<=968px){.ar-grid,.ghost-grid{grid-template-columns:1fr}.ar-viewer-container{height:380px}}.dialog-overlay{z-index:1200;-webkit-backdrop-filter:blur(8px);background-color:#0f172a80;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.dialog-card{background-color:var(--color-surface);border-radius:var(--radius-2xl);padding:var(--space-2xl);width:90%;max-width:440px;box-shadow:var(--shadow-2xl);text-align:center;animation:bounceIn .4s var(--ease-spring);position:relative}.dialog-close-btn{top:var(--space-md);right:var(--space-md);border-radius:var(--radius-full);background:var(--color-bg-secondary);width:36px;height:36px;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-fast);border:none;justify-content:center;align-items:center;font-size:16px;font-weight:700;display:flex;position:absolute}.dialog-close-btn:hover{background:var(--color-bg);color:var(--color-text)}.dialog-emoji{margin-bottom:var(--space-md);font-size:56px}.dialog-title{margin-bottom:var(--space-sm);font-size:24px}.dialog-title-error{color:var(--color-error)}.dialog-desc{color:var(--color-text-secondary);margin-bottom:var(--space-lg);font-size:14px}.dialog-btn{background:var(--color-primary);color:#fff;border-radius:var(--radius-full);cursor:pointer;width:100%;transition:var(--transition-spring);box-shadow:var(--shadow-primary);border:none;padding:14px 28px;font-weight:700}.dialog-btn:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 8px 24px #14b8a659}.animated-overlay{-webkit-backdrop-filter:blur(12px);z-index:1200;animation:fadeInOverlay .3s var(--ease-smooth) forwards;justify-content:center;align-items:center;display:flex;background-color:#14b8a633!important}.celebration-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);width:90%;max-width:500px;padding:var(--space-2xl);text-align:center;box-shadow:var(--shadow-2xl);position:relative}.success-pop{animation:successCardPop .5s var(--ease-spring) forwards}.crown-container{margin-bottom:var(--space-md);font-size:72px;line-height:1}.crown-emoji{font-size:72px;display:inline-block}.crown-float{animation:2s ease-in-out infinite crownFloating;display:inline-block}.celebration-title{color:var(--color-text);margin-bottom:var(--space-sm);font-size:28px;font-weight:800;font-family:var(--font-heading)}.celebration-subtitle{color:var(--color-text-secondary);margin-bottom:var(--space-xl);font-size:15px;line-height:1.6}.celebration-metrics{gap:var(--space-sm);margin-bottom:var(--space-xl);grid-template-columns:1fr;display:grid}@media (width>=480px){.celebration-metrics{grid-template-columns:repeat(3,1fr)}}.metric-pill{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-sm);align-items:center;gap:var(--space-sm);box-shadow:var(--shadow-sm);opacity:0;flex-direction:column;display:flex;transform:translateY(20px)}.metric-pill.anim-delay-1{animation:slideUpMetric .4s var(--ease-spring) .2s forwards;background:linear-gradient(135deg,#fffbeb,#fef3c7)}.metric-pill.anim-delay-2{animation:slideUpMetric .4s var(--ease-spring) .35s forwards;background:linear-gradient(135deg,#fff7ed,#ffedd5)}.metric-pill.anim-delay-3{animation:slideUpMetric .4s var(--ease-spring) .5s forwards;background:linear-gradient(135deg,#fef2f2,#ffe4e6)}.metric-icon{font-size:28px}.metric-text{flex-direction:column;display:flex}.metric-val{color:var(--color-text);font-size:16px;font-weight:800}.metric-lbl{color:var(--color-text-secondary);font-size:11px;font-weight:500}.celebration-footer{margin-top:var(--space-lg);padding-top:var(--space-md)}.btn-celebration{width:100%}.footer{background-color:var(--color-text);color:#fff;padding:var(--space-3xl) 0 var(--space-xl);margin-top:auto}.footer-grid{gap:var(--space-2xl);margin-bottom:var(--space-xl);grid-template-columns:1.5fr 1fr;display:grid}.footer-logo{font-family:var(--font-heading);color:#fff;margin-bottom:var(--space-md);align-items:center;gap:8px;font-size:28px;font-weight:800;display:flex}.footer-logo span{background-color:var(--color-primary);color:#fff;border-radius:var(--radius-sm);justify-content:center;align-items:center;width:32px;height:32px;font-size:18px;display:inline-flex;transform:rotate(-8deg)}.footer-desc{color:#fff9;max-width:400px;font-size:14px}.footer-column-title{font-family:var(--font-heading);margin-bottom:var(--space-lg);text-transform:uppercase;letter-spacing:.05em;font-size:15px;font-weight:700}.footer-links{gap:var(--space-sm);flex-direction:column;list-style:none;display:flex}.footer-link{color:#fff9;transition:var(--transition-fast);cursor:pointer;font-size:14px}.footer-link:hover{color:#fff;padding-left:4px}.footer-bottom{padding-top:var(--space-lg);color:#fff6;border-top:1px solid #ffffff1a;justify-content:space-between;font-size:13px;display:flex}@media (width<=600px){.footer-grid{gap:var(--space-lg);grid-template-columns:1fr}.footer-bottom{gap:var(--space-sm);text-align:center;flex-direction:column}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes scaleBounce{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}@keyframes pulseDot{0%{opacity:.5;transform:scale(.85)}to{opacity:1;transform:scale(1.15)}}@keyframes pulseGlow{0%{box-shadow:0 0 10px #14b8a666}to{box-shadow:0 0 30px #14b8a6b3}}@keyframes nodePulse{0%,to{box-shadow:0 4px 16px #14b8a640}50%{box-shadow:0 4px 24px #14b8a673}}@keyframes crownFloating{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-12px)rotate(5deg)}to{transform:translateY(0)rotate(0)}}@keyframes successCardPop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes slideUpMetric{to{opacity:1;transform:translateY(0)}}@keyframes floatSpin{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-8px)rotate(180deg)}}.floating{animation:2s ease-in-out infinite floatSpin}body{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}@media (width<=600px){.section-title{font-size:28px}.exercise-viewport{padding:0 var(--space-md) 100px;margin:var(--space-md) auto}.exercise-prompt{font-size:20px}.options-grid{grid-template-columns:1fr}.matching-row{gap:var(--space-sm)}.matching-item.word-item{height:160px;font-size:16px}.matching-item.img-item{height:160px}.audio-options-row{gap:var(--space-sm)}.audio-option-card{width:110px;height:110px}.audio-speaker-card{width:120px;height:120px}.recognition-image-card{width:200px;height:200px}.camera-viewport{height:260px}.camera-hint-img{width:120px;height:120px}.celebration-title{font-size:24px}.crown-container,.crown-emoji{font-size:56px}.ar-viewer-container{height:300px}.ghost-viewport-container{height:260px}.map-header-card{padding:var(--space-md)}.map-header-icon{width:48px;height:48px;font-size:24px}.map-node{width:72px;height:72px}.map-node-icon{font-size:28px}}