:root{--primary-red:#d32f2f;--primary-red-dark:#b71c1c;--accent-gold:#f9a825;--accent-gold-light:#ffd54f;--primary-blue:#1a237e;--secondary-blue:#3949ab;--bg-color:#f8fafc;--bg-light:#f1f5f9;--card-bg:#fff;--card-border:#00000014;--text-main:#333;--text-muted:#666;--accent-color:var(--primary-red);--accent-hover:var(--primary-red-dark);--accent-secondary:var(--accent-gold);--accent-primary:var(--primary-blue);--accent-primary-rgb:26, 35, 126;--success:#10b981;--danger:var(--primary-red);--font-sans:"Plus Jakarta Sans", system-ui, sans-serif;--font-zh:"Noto Sans SC", sans-serif}.theme-mandarin{--primary-blue:#b71c1c;--accent-primary:#b71c1c;--secondary-blue:#d32f2f}.theme-cantonese{--primary-blue:#1a237e;--accent-primary:#1a237e;--secondary-blue:#3949ab}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-color);color:var(--text-main);-webkit-font-smoothing:antialiased;min-height:100vh}.glass-panel{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--card-border);border-radius:16px;box-shadow:0 10px 25px -5px #0000000d,0 8px 10px -6px #00000003}.card-transition-wrapper{animation-duration:.4s;animation-timing-function:cubic-bezier(.175,.885,.32,1.275);animation-fill-mode:forwards}.card-transition-wrapper.slide-left{animation-name:slideLeftIn}.card-transition-wrapper.slide-right{animation-name:slideRightIn}.card-transition-wrapper.slide-in{animation-name:slideUpIn}@keyframes slideLeftIn{0%{opacity:0;transform:translate(50px)scale(.95)}to{opacity:1;transform:translate(0)scale(1)}}@keyframes slideRightIn{0%{opacity:0;transform:translate(-50px)scale(.95)}to{opacity:1;transform:translate(0)scale(1)}}@keyframes slideUpIn{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.flashcard-scene{perspective:1000px;width:100%;max-width:400px;min-height:580px;margin:0 auto;position:relative}@media (width<=480px){.flashcard-scene{min-height:520px}.zh-text{font-size:3rem!important}.pinyin-text{font-size:1.2rem!important}}.flashcard-shadow{background:var(--card-bg);border:1px solid var(--card-border);z-index:-1;border-radius:16px;width:100%;height:100%;transition:all .3s cubic-bezier(.175,.885,.32,1.275);position:absolute;top:0;left:0}.flashcard-shadow.layer-1{opacity:.8;transform:translateY(12px)scale(.97);box-shadow:0 4px 10px #0000000d}.flashcard-shadow.layer-2{opacity:.6;transform:translateY(24px)scale(.94);box-shadow:0 4px 10px #0000000d}.flashcard-shadow.layer-3{opacity:.4;transform:translateY(36px)scale(.91);box-shadow:0 4px 10px #0000000d}.flashcard{width:100%;height:auto;min-height:670px;transform-style:preserve-3d;cursor:pointer;grid-template-areas:"card";transition:transform .8s cubic-bezier(.175,.885,.32,1.275);display:grid;position:relative}.flashcard.is-flipped{transform:rotateY(180deg)}.flashcard-face{backface-visibility:hidden;text-align:center;flex-direction:column;grid-area:card;justify-content:center;align-items:center;width:100%;min-height:670px;padding:2.5rem 1.5rem;display:flex;position:relative}.flashcard-front{background:linear-gradient(135deg,#fff,#f8fafc);border:1px solid #00000008;box-shadow:0 4px 15px #0000000d}.flashcard-back{background:var(--card-bg);border:2px solid var(--accent-gold);transform:rotateY(180deg);box-shadow:0 10px 30px #f9a82526}.zh-text{font-family:var(--font-zh);color:var(--primary-blue);text-shadow:none;margin-bottom:.5rem;font-size:3rem;font-weight:700}.pinyin-text{color:var(--secondary-blue);margin-bottom:2rem;font-size:1.25rem;font-weight:600}.pt-text{color:var(--text-main);margin-bottom:1rem;font-size:2.2rem;font-weight:600}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 20px #38bdf84d}50%{transform:scale(1.05);box-shadow:0 0 40px #38bdf899}to{transform:scale(1);box-shadow:0 0 20px #38bdf84d}}.recording-active{animation:1.5s ease-in-out infinite pulse;box-shadow:0 0 15px #ef444499;color:var(--text-main)!important;border-color:var(--accent-color)!important;background-color:#ef444480!important}.btn{background:var(--card-bg);border:1px solid var(--card-border);color:var(--text-main);cursor:pointer;border-radius:8px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-weight:600;transition:all .2s;display:flex;box-shadow:0 2px 4px #00000005}.btn:hover{background:#00000008;transform:translateY(-2px);box-shadow:0 4px 8px #0000000d}.btn-primary{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.btn-primary:hover{background:var(--accent-hover);color:#fff}.action-bar{gap:1rem;margin-top:2rem;display:flex}.icon-btn{border:1px solid var(--card-border);cursor:pointer;width:50px;height:50px;color:var(--text-main);background:#00000008;border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;transition:all .2s;display:flex}.icon-btn:hover{background:#00000014;transform:scale(1.1)}.app-container{flex-direction:column;width:100%;max-width:1200px;min-height:100vh;margin:0 auto;padding-top:30px;display:flex}.main-layout{flex:1;align-items:flex-start;gap:2rem;padding:0 2rem;display:flex;position:relative}.content-area{flex:1}.sidebar{background-color:var(--bg-light);border:1px solid var(--card-border);border-radius:20px;flex-shrink:0;width:260px;padding:1.5rem}@media (width<=768px){.main-layout{flex-direction:column-reverse}.sidebar{width:100%}}.dialect-switch{background:var(--bg-light);border:1px solid var(--card-border);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:20px;width:150px;height:28px;margin-top:8px;padding:2px;display:flex;position:relative}.switch-thumb{background:var(--primary-blue);border-radius:18px;width:calc(50% - 2px);transition:transform .3s cubic-bezier(.4,0,.2,1);position:absolute;top:2px;bottom:2px;left:2px;box-shadow:0 2px 6px #1a237e33}.switch-thumb.norte{transform:translate(0)}.switch-thumb.sul{transform:translate(100%)}.switch-label{z-index:1;text-align:center;color:var(--text-muted);flex:1;font-size:.65rem;font-weight:700;line-height:24px;transition:color .3s}.switch-label.active{color:#fff}.tooltip-trigger{position:relative}.tooltip-trigger:after{content:attr(data-tooltip);color:#fff;text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;opacity:0;z-index:10000;white-space:normal;background:#0f172af2;border:1px solid #ffffff1a;border-radius:12px;width:380px;max-width:85vw;padding:12px 18px;font-size:.72rem;font-weight:500;line-height:1.5;transition:all .3s cubic-bezier(.4,0,.2,1);position:absolute;bottom:120%;left:50%;transform:translate(-50%)translateY(10px);box-shadow:0 10px 25px #0003}.tooltip-trigger:before{content:"";pointer-events:none;opacity:0;z-index:10000;border:6px solid #0000;border-top-color:#0f172af2;transition:all .3s cubic-bezier(.4,0,.2,1);position:absolute;bottom:105%;left:50%;transform:translate(-50%)translateY(10px)}.tooltip-trigger:hover:after,.tooltip-trigger:hover:before{opacity:1;transform:translate(-50%)translateY(0)}.mobile-drawer-header .tooltip-trigger:after{top:140%;bottom:auto}.mobile-drawer-header .tooltip-trigger:before{border-top-color:#0000;border-bottom-color:#0f172ae6;top:125%;bottom:auto}.mobile-drawer-header{display:none}.header{border-bottom:1px solid var(--card-border);z-index:1000;background:#fff;width:100%;margin-bottom:0;position:sticky;top:0;box-shadow:0 4px 6px -1px #0000000d,0 2px 4px -1px #00000008}.top-stats-bar{border-bottom:1px solid var(--card-border);z-index:999;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff;flex-direction:column;align-items:center;margin-bottom:2rem;padding:0;display:flex;position:sticky;top:96px}.stats-container{color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;justify-content:center;align-items:center;gap:1.2rem;width:100%;max-width:1200px;padding:8px 1.5rem;font-size:.65rem;font-weight:800;display:flex;overflow-x:auto}@media (width<=1024px){.top-stats-bar{margin-bottom:1.5rem;top:86px}.stats-container{justify-content:flex-start;gap:.8rem;font-size:.6rem}}.profile-clickable{border-radius:8px;padding:4px 8px;transition:all .2s cubic-bezier(.4,0,.2,1)}.profile-clickable:hover{background:rgba(var(--accent-primary-rgb), .08);transform:translateY(-1px)}.profile-clickable:active{transform:scale(.98)}.stats-container::-webkit-scrollbar{display:none}.stat-item{cursor:default;flex-shrink:0;align-items:center;gap:5px;transition:all .2s;display:flex}.stat-item span{color:var(--text-main)}.stat-item.clickable{cursor:pointer}.stat-item.clickable:hover{color:var(--primary-blue);transform:translateY(-1px)}.stat-divider{background:var(--card-border);width:1px;height:10px}.xp-thin-bar{background:var(--bg-light);width:100%;height:2px;overflow:hidden}.xp-thin-fill{background:linear-gradient(90deg,#4facfe 0%,#00f2fe 100%);height:100%;transition:width .6s cubic-bezier(.34,1.56,.64,1)}.header-container{grid-template-columns:280px 1fr 280px;align-items:center;gap:2rem;max-width:1400px;margin:0 auto;padding:1.25rem 2rem;display:grid}.brand-group{flex-direction:column;gap:2px;display:flex}.brand-logo{align-items:center;gap:12px;margin:0;display:flex}.logo-image{width:auto;height:62px;display:block}.header-nav{justify-content:center;align-self:flex-end;padding-bottom:4px;display:flex}.nav-links{align-items:center;gap:2.5rem;display:flex}.header-actions{justify-content:flex-end;align-items:center;display:flex}.header-right.desktop-only{flex-direction:column;align-items:flex-end;gap:12px;display:flex}.user-profile-header{align-items:center;gap:1.5rem;display:flex}.user-info-group{cursor:pointer;align-items:center;gap:12px;transition:opacity .2s;display:flex}.user-info-group:hover{opacity:.8}.user-text-details{text-align:right}.user-placeholder{background:var(--bg-light);border:1px solid var(--card-border);border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.5rem;display:flex}.mobile-drawer-header,.mobile-user-section,.mobile-nav-close{display:none}@media (width<=1100px){.header-container{grid-template-columns:auto 1fr auto;gap:1.5rem}}@media (width<=1024px){.app-container{padding-top:0}html,body{overflow-x:hidden}.header-container{justify-content:space-between;padding:1rem 1.5rem;display:flex}.custom-scroll-hidden::-webkit-scrollbar{display:none}.level-name-full{display:none}.level-selector-bar{gap:4px!important;padding:.25rem 0!important}.level-btn{padding:4px 10px!important;font-size:.7rem!important}.header-nav{background:var(--bg-color);z-index:2000;border-left:1px solid var(--card-border);flex-direction:column;justify-content:flex-start;width:300px;max-width:85vw;height:100vh;padding:6rem 2rem 3rem;transition:transform .4s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;right:0;overflow-y:auto;transform:translate(101%);box-shadow:-10px 0 40px #0003}.header-nav.open{transform:translate(0)}.mobile-drawer-header{border-bottom:1px solid var(--card-border);flex-direction:column;align-items:flex-end;gap:1.5rem;width:100%;margin-bottom:2rem;padding-bottom:2rem;display:flex}.mobile-nav-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:0;font-size:1.8rem;line-height:1;transition:color .2s;display:block}.mobile-nav-close:hover{color:var(--primary-blue)}.nav-links{flex-direction:column;align-items:flex-end;gap:.5rem;width:100%}.nav-item{text-align:right;justify-content:flex-end;width:100%;padding:1rem 0;font-size:1.1rem}.nav-item:after{display:none}.mobile-user-section{border-top:1px solid var(--card-border);width:100%;margin-top:auto;padding-top:2rem;display:block}.user-profile-drawer{flex-direction:column;align-items:flex-end;gap:1.5rem;display:flex}.btn-logout-full,.btn-primary-full{background:var(--bg-light);border:1px solid var(--card-border);border-radius:10px;justify-content:center;width:100%;padding:.8rem;font-size:.9rem}.mobile-menu-toggle{display:block}.desktop-only{display:none!important}}.nav-item{color:var(--text-muted);letter-spacing:.3px;cursor:pointer;white-space:nowrap;background:0 0;border:none;align-items:center;gap:.5rem;padding:.5rem 0;font-size:.95rem;font-weight:600;transition:all .3s;display:flex;position:relative}.nav-item:after{content:"";background:var(--primary-blue);width:0;height:2px;transition:width .3s;position:absolute;bottom:-2px;left:0}.nav-item:hover,.nav-item.active{color:var(--primary-blue);background:0 0}.nav-item.active:after{width:100%}.header-actions{align-items:center;gap:1.5rem;display:flex}.mobile-menu-toggle,.mobile-sidebar-toggle{color:var(--primary-blue);cursor:pointer;background:0 0;border:none;padding:0;font-size:1.8rem;line-height:1;display:none}.mobile-sidebar-close{cursor:pointer;color:var(--text-muted);background:0 0;border:none;font-size:1.5rem;display:none;position:absolute;top:1.5rem;right:1.5rem}.drawer-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:998;background:#0000004d;width:100vw;height:100vh;position:fixed;top:0;left:0}.user-info-text{text-align:right}.username-group{align-items:center;gap:8px;display:flex}.username{color:var(--primary-blue);font-size:.95rem;font-weight:700}.user-stats{color:var(--text-muted);font-size:.75rem}.streak-badge{color:#f97316;white-space:nowrap;background:#f973161a;border:1px solid #f9731633;border-radius:6px;align-items:center;padding:2px 6px;font-size:.6rem;font-weight:700;display:inline-flex}.user-avatar{border:1px solid var(--card-border);background:#fff;border-radius:50%;width:38px;height:38px;box-shadow:0 2px 8px #0000000d}.btn-logout{background:var(--bg-light);border:1px solid var(--card-border);padding:6px 12px;font-size:.8rem}.mobile-sidebar-toggle-content{background:var(--bg-light);border:1px solid var(--card-border);color:var(--primary-blue);cursor:pointer;border-radius:10px;align-items:center;gap:.5rem;width:fit-content;margin-bottom:1.5rem;padding:.8rem 1.2rem;font-weight:600;display:none;box-shadow:0 2px 8px #0000000d}.brand-subtitle{color:var(--text-muted);letter-spacing:.5px;opacity:.7;margin-top:2px;font-size:.65rem;font-weight:500}.streak-badge{color:#f97316;text-shadow:0 0 8px #f9731666;font-size:.6rem}@media (width<=1024px){.mobile-sidebar-toggle-content{display:flex}.header-nav{background:var(--bg-color);z-index:2000;border-left:1px solid var(--card-border);-webkit-overflow-scrolling:touch;flex-direction:column;width:280px;max-width:85vw;height:100vh;padding:6rem 2rem 3rem;transition:transform .4s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;right:0;overflow-y:auto;transform:translate(101%);box-shadow:-10px 0 40px #0003}.header-nav.open{transform:translate(0)}.nav-links{flex-direction:column;gap:.8rem;width:100%;margin-bottom:2rem;display:flex}.nav-item{justify-content:flex-end;width:100%;padding:.8rem 0;font-size:1.1rem}.nav-item:after{left:auto;right:0}.mobile-user-section{border-top:1px solid var(--card-border);width:100%;margin-top:auto;padding-top:1.5rem;display:block}.mobile-menu-toggle{display:block}.desktop-only{display:none!important}.sidebar{z-index:2000;-webkit-overflow-scrolling:touch;flex-direction:column;max-width:85vw;height:100vh;top:0;overflow-y:auto;transform:translate(-101%);box-shadow:10px 0 40px #0003;background:var(--bg-color)!important;border:none!important;width:300px!important;margin:0!important;padding:5rem 1.5rem 2rem!important;transition:transform .4s cubic-bezier(.4,0,.2,1)!important;display:flex!important;position:fixed!important;left:0!important}.sidebar.open{transform:translate(0)!important}.mobile-sidebar-toggle{display:none}.mobile-sidebar-close{display:block}.main-layout{gap:0}.content-area{width:100%}}.header h1{color:var(--primary-blue);font-size:1.8rem;font-weight:800}.category-list-container{flex-direction:column;gap:1rem;display:flex}.category-list-header{z-index:10;align-items:center;gap:.5rem;padding:.5rem 0;display:flex;position:sticky;top:0}.search-box{flex:1;position:relative}.search-icon{opacity:.5;font-size:.8rem;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.search-input{border:1px solid var(--card-border);background:#fff;border-radius:20px;outline:none;width:100%;padding:8px 8px 8px 30px;font-size:.75rem;transition:border-color .2s}.search-input:focus{border-color:var(--primary-blue)}.view-toggle{background:#00000008;border-radius:10px;gap:2px;padding:2px;display:flex}.toggle-btn{cursor:pointer;opacity:.4;background:0 0;border:none;border-radius:8px;padding:4px 8px;font-size:.8rem;transition:all .2s}.ios-switch{cursor:pointer;background:#e2e8f0;border:1px solid #0000000d;border-radius:20px;width:44px;height:24px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}.ios-switch.on{background:#22c55e}.switch-handle{background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .3s cubic-bezier(.4,0,.2,1);position:absolute;top:2px;left:2px;box-shadow:0 2px 4px #0000001a}.ios-switch.on .switch-handle{transform:translate(20px)}.category-grid{grid-template-columns:repeat(2,1fr);gap:.8rem;margin-bottom:2rem;display:grid}.category-list-compact{flex-direction:column;gap:.2rem;margin-bottom:2rem;display:flex}.category-item{text-align:center;cursor:pointer;aspect-ratio:1;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:.8rem;transition:all .3s;display:flex}.category-item.item-list{aspect-ratio:auto;border-radius:12px;flex-direction:row;justify-content:flex-start;padding:.6rem 1rem}.category-item.item-list .category-icon{font-size:1.1rem}.category-item.item-list .category-name{text-align:left;font-size:.85rem}.category-item:hover,.category-item.active{background:rgba(var(--accent-primary-rgb), .05);border-color:var(--primary-blue);box-shadow:0 4px 12px rgba(var(--accent-primary-rgb), .1);transform:translateY(-2px)}.category-icon{justify-content:center;align-items:center;font-size:1.5rem;display:flex}.category-name{color:var(--text-main);font-size:.8rem;font-weight:700}.delete-category-btn{color:#ef4444;cursor:pointer;z-index:5;background:#ef44441a;border:none;border-radius:4px;padding:2px 6px;font-size:.7rem;transition:all .2s;position:absolute;top:5px;right:5px}.delete-category-btn:hover{color:#fff;background:#ef4444}.no-results{text-align:center;color:var(--text-muted);padding:2rem;font-size:.85rem}.mode-menu{flex-wrap:wrap;justify-content:center;gap:1rem;width:100%;margin-bottom:2rem;display:flex}.mode-tab{border:1px solid var(--card-border);color:var(--text-muted);cursor:pointer;background:#00000008;border-radius:20px;padding:.6rem 1.2rem;font-weight:600;transition:all .2s}.mode-tab:hover:not(.disabled){color:var(--text-main);background:#0000000f}.mode-tab.active{background:var(--primary-blue);color:#fff;border-color:var(--primary-blue)}.mode-tab.disabled{opacity:.5;cursor:not-allowed}.dictation-input{text-align:center;border:2px solid var(--card-border);width:100%;color:var(--text-main);font-size:1.5rem;font-family:var(--font-sans);background:#ffffff80;border-radius:12px;outline:none;margin-bottom:2rem;padding:1rem}.dictation-input:focus{border-color:var(--accent-secondary)}.char-correct{color:var(--success)}.char-warning{color:var(--accent-secondary)}.char-error{color:var(--danger);opacity:.8}.feedback-box{border-radius:8px;width:100%;margin-top:1.5rem;padding:1rem;font-size:.9rem}.feedback-success{border:1px solid var(--success);color:var(--success);background:#10b9811a}.feedback-error{border:1px solid var(--danger);color:var(--danger);background:#ef44441a}.success-tone{box-shadow:0 0 15px #10b98166;background:var(--success)!important;border-color:var(--success)!important;color:#fff!important}.error-tone{animation:.4s ease-in-out shake;background:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.new-badge{color:#fff;vertical-align:middle;background:linear-gradient(135deg,#f59e0b,#ea580c);border-radius:4px;margin-left:5px;padding:2px 6px;font-size:.6rem;font-weight:700;box-shadow:0 2px 4px #ea580c4d}�� � � .arena-container{text-align:center;border-radius:16px;max-width:900px;margin:0 auto;padding:2rem;transition:background-color .3s,box-shadow .3s;position:relative}.arena-container.searching{flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;min-height:60vh;display:flex}.radar-spinner{border:4px solid rgba(var(--accent-primary-rgb,10, 132, 255), .2);border-top-color:var(--accent-primary);border-radius:50%;width:80px;height:80px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.arena-title{background:linear-gradient(135deg,#ef4444,#f59e0b);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:1rem;font-size:3rem}.arena-desc{color:var(--text-muted);margin-bottom:2rem;font-size:1.1rem}.arena-join-btn{background:linear-gradient(135deg,#dc2626,#ea580c);border:none;border-radius:50px;padding:1rem 3rem;font-size:1.5rem;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 15px #dc262666}.arena-join-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #dc262699}.hud{border:1px solid var(--card-border);background:#0003;border-radius:12px;justify-content:space-between;align-items:center;margin-bottom:3rem;padding:1.5rem;display:flex}.player-stats{text-align:left;flex:1;position:relative}.player-stats.opponent{text-align:right}.player-stats h3{color:var(--text-primary);margin:0 0 .5rem;font-size:1.2rem}.hp-bar-bg{background:#ffffff1a;border-radius:12px;width:100%;height:25px;position:relative;overflow:hidden;box-shadow:inset 0 2px 5px #0000004d}.hp-bar-fill{height:100%;transition:width .3s cubic-bezier(.25,.8,.25,1)}.hp-bar-fill.green{background:linear-gradient(90deg,#16a34a,#22c55e);box-shadow:0 0 10px #22c55e80}.hp-bar-fill.red{background:linear-gradient(90deg,#b91c1c,#ef4444);box-shadow:0 0 10px #ef444480}.opponent .hp-bar-fill{float:right}.hp-text{color:var(--text-primary);margin-top:.5rem;font-size:1rem;font-weight:700;display:inline-block}.vs-badge{color:#fff;background:var(--accent-danger);border-radius:4px;margin-top:10px;padding:.5rem 1rem;font-size:1.5rem;font-weight:900;transform:rotate(-10deg);box-shadow:0 0 15px #ef444480}.arena-timer-center{flex-direction:column;justify-content:center;align-items:center;width:100px;display:flex}.timer-circle-container{justify-content:center;align-items:center;width:60px;height:60px;display:flex;position:relative}.timer-svg{width:60px;height:60px;position:absolute;transform:rotate(-90deg)}.timer-svg circle{fill:none;stroke:var(--accent-primary);stroke-width:4px;stroke-dasharray:175;transition:stroke-dashoffset 1s linear,stroke .3s}.timer-number{color:#fff;z-index:2;font-size:1.4rem;font-weight:700}.timer-number.critical{color:var(--accent-danger);animation:.2s infinite critical-shake}.timer-number.critical+.timer-svg circle{stroke:var(--accent-danger)}@keyframes critical-shake{0%{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}to{transform:translate(0)}}.combo-badge{color:#fff;white-space:nowrap;z-index:10;background:linear-gradient(135deg,#f59e0b,#ef4444);border-radius:10px;padding:2px 10px;font-size:.75rem;font-weight:700;animation:.3s cubic-bezier(.175,.885,.32,1.275) combo-pop;position:absolute;top:-20px;left:50%;transform:translate(-50%);box-shadow:0 0 10px #f59e0b80}@keyframes combo-pop{0%{opacity:0;transform:translate(-50%)scale(.5)}to{opacity:1;transform:translate(-50%)scale(1)}}.battle-center{flex-direction:column;justify-content:center;align-items:center;min-height:40vh;display:flex;position:relative}.battle-action-log{color:#fbbf24;pointer-events:none;font-size:1.5rem;font-weight:700;animation:2s forwards floatUp;position:absolute;top:-2rem}@keyframes floatUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-50px)}}.question-card{background:var(--surface);border:1px solid var(--card-border);box-shadow:var(--shadow-lg);border-radius:16px;width:100%;max-width:600px;padding:2.5rem}.question-card h2{color:var(--text-muted);margin-bottom:1rem;font-size:1.2rem}.flashcard-content{margin-bottom:2rem}.zh-text{font-size:4rem;font-weight:700;font-family:var(--font-zh);color:var(--text-primary);display:block}.pinyin-text{color:var(--accent-primary);font-size:1.5rem}.options-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.option-btn{background:var(--surface-light);border:2px solid var(--card-border);color:var(--text-primary);padding:1.2rem;font-size:1.1rem;transition:all .2s}.option-btn:hover{border-color:var(--accent-primary);background:rgba(var(--accent-primary-rgb,10, 132, 255), .1);transform:translateY(-2px)}.option-btn.selected{border-color:var(--accent-primary);background:rgba(var(--accent-primary-rgb,10, 132, 255), .2);opacity:.8}.option-btn.correct-reveal{font-weight:700;transform:scale(1.05);box-shadow:0 0 15px #22c55e99;color:#fff!important;background:#16a34a!important;border-color:#22c55e!important}.option-btn.wrong-reveal{opacity:.7;text-decoration:line-through;color:#fff!important;background:#dc2626!important;border-color:#ef4444!important}.flash-red{animation:.5s ease-out flashRed}@keyframes flashRed{0%{box-shadow:inset 0 0 100px #ef4444cc}to{box-shadow:inset 0 0 #ef444400}}.flash-green{animation:.5s ease-out flashGreen}@keyframes flashGreen{0%{box-shadow:inset 0 0 100px #22c55ecc}to{box-shadow:inset 0 0 #22c55e00}}.question-loading{opacity:.7;font-size:1.5rem;animation:1s infinite alternate pulseOpacity}@keyframes pulseOpacity{0%{opacity:.5}to{opacity:1}}.avatar-editor-container{flex-direction:column;gap:20px;height:100%;display:flex}.avatar-preview-section{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#00000008;border-radius:20px;flex-direction:column;align-items:center;padding:20px;display:flex}.avatar-tabs{background:#0000000d;border-radius:15px;justify-content:space-around;margin-bottom:20px;padding:10px;display:flex}.avatar-tab{cursor:pointer;border:2px solid #0000;border-radius:12px;flex-direction:column;align-items:center;padding:8px 15px;transition:all .3s;display:flex}.avatar-tab.active{background:var(--accent-primary);color:#3d3d3d;transform:translateY(-2px);box-shadow:0 4px 15px #0000001a}.avatar-tab-icon{font-size:1.2rem}.avatar-tab-label{margin-top:4px;font-size:.75rem;font-weight:600}.carousel-wrapper{align-items:center;width:100%;display:flex;position:relative}.carousel-btn{z-index:10;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#c9c9c9;cursor:pointer;background:#0000000d;border:1px solid #0000001a;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex;position:absolute;box-shadow:0 4px 10px #0000001a}.carousel-btn:hover{background:var(--accent-primary);transform:scale(1.1)}.carousel-btn.left{left:5px}.carousel-btn.right{right:5px}.avatar-options-carousel{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;flex-wrap:nowrap;gap:15px;padding:15px 40px;display:flex;overflow-x:auto}.avatar-options-carousel::-webkit-scrollbar{display:none}.avatar-options-carousel{-ms-overflow-style:none;scrollbar-width:none}.avatar-option-card{cursor:pointer;scroll-snap-align:center;background:#00000008;border:2px solid #0000;border-radius:15px;flex-direction:column;flex:0 0 100px;justify-content:center;align-items:center;padding:10px;transition:all .2s;display:flex;position:relative}.avatar-option-card:hover{background:#00000014;transform:scale(1.05)}.avatar-option-card.active{border-color:var(--accent-primary);background:rgba(var(--accent-primary-rgb), .1)}.avatar-option-label{text-align:center;white-space:nowrap;text-overflow:ellipsis;width:100%;margin-top:8px;font-size:.7rem;overflow:hidden}.color-picker-grid{grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:10px;padding:10px;display:grid}.color-circle{cursor:pointer;border:3px solid #0000;border-radius:50%;width:40px;height:40px;transition:all .2s}.color-circle.active{border-color:#fff;transform:scale(1.1);box-shadow:0 0 10px #0000004d}.category-title{color:var(--accent-primary);margin:15px 0 10px 10px;font-size:.9rem;font-weight:700}.avatar-editor-main{flex-direction:column;flex:1;display:flex}.custom-scroll::-webkit-scrollbar{width:6px}.custom-scroll::-webkit-scrollbar-track{background:0 0}.custom-scroll::-webkit-scrollbar-thumb{background:#0000001a;border-radius:10px}.culture-container{max-width:1200px;margin:0 auto;padding:2rem;animation:.5s ease-out fadeIn}.library-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem;margin-top:2rem;display:grid}.book-card{border:1px solid var(--card-border);cursor:pointer;background:#00000008;border-radius:16px;flex-direction:column;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.book-card:hover{border-color:var(--accent-primary);background:#0000000d;transform:translateY(-8px);box-shadow:0 20px 40px -12px #00000080}.book-cover{object-fit:cover;border-bottom:1px solid var(--card-border);width:100%;height:200px}.book-info{padding:1.5rem}.book-title{color:var(--text-main);margin-bottom:.5rem;font-size:1.25rem;font-weight:700}.book-subtitle{color:var(--text-muted);margin-bottom:1rem;font-size:.9rem}.book-meta{justify-content:space-between;align-items:center;font-size:.8rem;display:flex}.difficulty-badge{color:var(--accent-primary);background:#38bdf81a;border-radius:4px;padding:2px 8px;font-weight:600}.reader-layout{background:var(--card-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--card-border);border-radius:24px;flex-direction:column;gap:2rem;min-height:80vh;padding:2rem;display:flex}.reader-header{border-bottom:1px solid var(--card-border);justify-content:space-between;align-items:center;padding-bottom:1rem;display:flex}.reader-content{grid-template-columns:1fr 1fr;align-items:start;gap:3rem;display:grid}@media (width<=900px){.reader-content{grid-template-columns:1fr}.reader-image-section{position:relative}}.reader-image-section{position:sticky}.reader-image{border:1px solid var(--card-border);border-radius:16px;width:100%;box-shadow:0 10px 30px #0000001a}.reader-text-section{flex-direction:column;gap:2rem;display:flex}.focus-area{border:1px solid var(--card-border);background:#00000008;border-radius:20px;flex-direction:column;align-items:center;margin-bottom:2rem;padding:2rem;animation:.8s ease-out fadeIn;display:flex;box-shadow:inset 0 0 20px #0000000d}.focus-zh{color:var(--accent-primary);text-shadow:0 0 30px #38bdf84d;margin-bottom:.5rem;font-size:6rem;font-weight:700;line-height:1}.focus-pinyin{color:#f472b6;margin-bottom:.5rem;font-size:1.8rem;font-weight:500}.focus-pt{color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;font-size:1.2rem;font-weight:400}.vocabulary-section{border-top:1px dashed var(--card-border);margin-top:2rem;padding-top:1.5rem}.vocabulary-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:1rem;font-size:.9rem;font-weight:600}.interactive-text{flex-wrap:wrap;justify-content:flex-start;gap:8px;padding:.5rem 0;display:flex}.word-block{cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid var(--card-border);background:#00000008;border-radius:6px;flex-direction:column;align-items:center;padding:4px 8px;transition:all .2s;display:flex;position:relative}.reader-layout.mobile-fluid{min-height:auto;padding:1rem}.fluid-page-section{flex-direction:column;gap:2rem;margin-bottom:2rem;padding-bottom:3rem;display:flex}.section-divider{background:linear-gradient(to right, transparent, var(--card-border), transparent);width:100%;height:2px;margin:2rem 0}.mobile-fluid .reader-image-section{position:relative!important;top:0!important}.mobile-fluid .focus-zh{font-size:clamp(3rem,15vw,5rem)!important}.mobile-fluid .reader-controls{flex-wrap:wrap;justify-content:center}.reader-image.clickable{cursor:pointer;transition:transform .3s,filter .3s}.reader-image.clickable:hover{filter:brightness(1.1);transform:scale(1.02)}.image-lightbox{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999;background:#000000e6;justify-content:center;align-items:center;width:100vw;height:100vh;padding:2rem;animation:.3s ease-out fadeIn;display:flex;position:fixed;top:0;left:0}.lightbox-content{justify-content:center;align-items:center;max-width:90%;max-height:90%;display:flex;position:relative}.lightbox-content img{object-fit:contain;border-radius:12px;max-width:100%;max-height:90vh;box-shadow:0 0 50px #00000080}.lightbox-close{cursor:pointer;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.5rem;transition:all .2s;display:flex;position:absolute;top:-40px;right:-40px;box-shadow:0 0 20px #0000004d}.lightbox-close:hover{background:var(--accent-primary);color:#fff;transform:scale(1.1)}@media (width<=768px){.lightbox-close{top:-50px;right:0}.lightbox-content{max-width:100%}}.practice-icon{opacity:.3;font-size:.6rem;transition:all .2s;position:absolute;top:2px;right:2px}.word-block:hover .practice-icon{opacity:1;transform:scale(1.1)}.practice-icon.recording{opacity:1;color:#ef4444;animation:1s infinite pulse}.word-block:hover{border-color:var(--accent-primary);background:#00000014}.word-block.active{background:#ef44441a;border-color:#ef4444;color:#ef4444!important}.word-zh{font-size:1.2rem;font-weight:500}.word-pinyin{color:var(--text-muted);font-size:.7rem}.word-block.active .word-pinyin{color:#fca5a5}.full-text-pt{color:var(--text-main);border-left:4px solid var(--accent-primary);background:#00000008;border-radius:12px;padding:1.5rem;font-size:1.1rem;line-height:1.6}.explanation-box{color:var(--text-muted);border-top:1px dashed var(--card-border);padding-top:1.5rem;font-size:.95rem;font-style:italic}.reader-controls{justify-content:center;gap:1.5rem;margin-top:auto;padding-top:2rem;display:flex}.pagination-controls{align-items:center;gap:1rem;margin-top:1rem;display:flex}.page-indicator{color:var(--text-muted);font-size:.9rem}.dictionary-term{cursor:help;color:inherit;border-bottom:2px dotted #38bdf866;font-weight:500;transition:all .2s}.dictionary-term:hover{color:var(--accent-primary);border-bottom-color:var(--accent-primary);background:#38bdf81a;border-radius:4px}.culture-tooltip{z-index:1000;background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none;text-align:center;border:1px solid #38bdf84d;border-radius:12px;width:200px;padding:1.2rem;animation:.2s ease-out tooltipScale;position:fixed;transform:translate(-50%,-110%);box-shadow:0 10px 25px -5px #00000080}.tooltip-zh{color:var(--accent-primary);margin-bottom:.5rem;font-size:2.5rem;line-height:1.2}.tooltip-pinyin{color:#f472b6;margin-bottom:.8rem;font-size:1rem;font-weight:500}.tooltip-desc{color:var(--text-muted);font-size:.9rem;line-height:1.4}.tooltip-arrow{border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--card-bg);width:0;height:0;position:absolute;bottom:-8px;left:50%;transform:translate(-50%)}@keyframes tooltipScale{0%{opacity:0;transform:translate(-50%,-100%)scale(.9)}to{opacity:1;transform:translate(-50%,-110%)scale(1)}}.dialog-container{background:var(--surface-light);border:1px solid var(--card-border);max-width:800px;box-shadow:var(--shadow-sm);border-radius:12px;flex-direction:column;height:auto;min-height:60vh;margin:0 auto;padding:1rem;display:flex}.list-view{box-shadow:none;background:0 0;border:none;padding:0}.dialog-header-enhanced{background:var(--surface);border:1px solid var(--card-border);text-align:center;box-shadow:var(--shadow-sm);border-radius:12px;margin-bottom:2rem;padding:2rem}.dialog-header-enhanced h2{background:linear-gradient(135deg, var(--text-primary) 0%, var(--accent-primary) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.5rem;font-size:2rem}.subtitle{color:var(--text-muted);margin-bottom:1.5rem}.dialog-filters-enhanced{background:#ffffff05;border-radius:8px;flex-wrap:wrap;justify-content:center;align-items:center;gap:2rem;padding:1rem;display:flex}.filter-group{align-items:center;gap:.5rem;display:flex}.filter-group label{color:var(--text-muted);font-size:.9rem;font-weight:500}.enhanced-select{background:var(--surface-light);border:1px solid var(--card-border);color:var(--text-primary);cursor:pointer;border-radius:6px;outline:none;min-width:150px;padding:.5rem 1rem}.enhanced-select:hover{border-color:var(--accent-primary)}.level-selector{align-items:center;gap:8px;display:flex}.level-btn.compact{border:1px solid var(--card-border);color:var(--text-muted);cursor:pointer;background:#ffffff05;border-radius:4px;flex-direction:row;justify-content:center;align-items:center;min-width:auto;min-height:28px;padding:4px 12px;transition:all .2s;display:flex}.level-btn.compact:hover{background:#ffffff0d}.level-btn.compact.active{background:var(--surface-light);border-color:var(--accent-primary);color:var(--accent-primary);font-weight:700}.level-iniciante.active{color:#4ade80!important;border-color:#4ade80!important}.level-intermediário.active{color:#fbbf24!important;border-color:#fbbf24!important}.level-avançado.active{color:#f87171!important;border-color:#f87171!important}.level-name{letter-spacing:.5px;font-size:.6rem;font-weight:800}.filter-stats{color:var(--text-muted);font-size:.65rem;font-weight:700}.badge-count{background:var(--accent-primary);color:#fff;border-radius:12px;padding:.2rem .6rem;font-weight:700}.enhanced-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;padding-bottom:2rem;display:grid}.enhanced-card{background:var(--surface);border:1px solid var(--card-border);cursor:pointer;border-radius:12px;flex-direction:column;padding:2rem;transition:all .3s cubic-bezier(.25,.8,.25,1);display:flex;position:relative;overflow:hidden}.enhanced-card:before{content:"";background:0 0;width:100%;height:4px;transition:all .3s;position:absolute;top:0;left:0}.enhanced-card:hover{box-shadow:var(--shadow-lg);border-color:rgba(var(--accent-primary-rgb,10, 132, 255), .5);transform:translateY(-5px)}.enhanced-card:hover:before{background:var(--accent-primary)}.card-top{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.dialog-card-icon{background:#ffffff0d;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;font-size:2.5rem;display:flex}.diff-badge{text-transform:uppercase;border-radius:12px;padding:.3rem .8rem;font-size:.75rem;font-weight:700}.diff-iniciante{color:#4ade80;background:#22c55e33}.diff-intermediário{color:#fbbf24;background:#f59e0b33}.diff-avançado{color:#f87171;background:#ef444433}.dialog-card-title{color:var(--text-primary);margin-bottom:.5rem;font-size:1.3rem}.dialog-card-desc{color:var(--text-muted);flex:1;margin-bottom:1.5rem;font-size:.9rem}.dialog-card-meta{border-top:1px solid var(--card-border);justify-content:space-between;align-items:center;padding-top:1rem;display:flex}.dialog-search-container{gap:10px;width:100%;margin-bottom:1.5rem;animation:.4s ease-out fadeIn;display:flex}.dialog-search-box{flex:1;align-items:center;display:flex;position:relative}.dialog-search-input{border:1px solid var(--card-border);background:var(--card-bg);width:100%;color:var(--text-main);border-radius:12px;padding:.8rem 1rem .8rem 2.5rem;font-size:.9rem;transition:all .2s;box-shadow:0 2px 8px #00000005}.dialog-search-input:focus{border-color:var(--accent-primary);box-shadow:0 4px 12px rgba(var(--accent-primary-rgb), .1);outline:none}.dialog-search-icon{opacity:.5;font-size:.9rem;position:absolute;left:1rem}.cat-badge{color:var(--text-muted);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:4px;padding:.3rem .6rem;font-size:.8rem}.small-btn{padding:.4rem 1rem;font-size:.85rem}.empty-state{text-align:center;background:var(--surface);border:1px dashed var(--card-border);color:var(--text-muted);border-radius:12px;grid-column:1/-1;padding:4rem}.chat-window{flex-direction:column;flex:1;display:flex;overflow:hidden}.chat-header{border-bottom:1px solid var(--card-border);justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:1rem;display:flex}.chat-messages{flex-direction:column;flex:1;gap:1rem;padding:1rem .5rem;display:flex;overflow-y:auto}.chat-bubble-container{gap:.5rem;max-width:80%;display:flex}.chat-bubble-container.left{align-self:flex-start}.chat-bubble-container.right{flex-direction:row-reverse;align-self:flex-end}.chat-avatar{background:var(--surface);border:1px solid var(--card-border);border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:2rem;display:flex}.chat-bubble{background:var(--surface);border:1px solid var(--card-border);border-radius:12px;flex-direction:column;gap:.5rem;padding:1rem;display:flex;position:relative}.chat-bubble-container.left .chat-bubble{background:#ffffff08;border-top-left-radius:0}.chat-bubble-container.right .chat-bubble{background:rgba(var(--accent-primary-rgb,10, 132, 255), .1);border-color:rgba(var(--accent-primary-rgb,10, 132, 255), .3);border-top-right-radius:0}.chat-zh{font-size:1.4rem;font-family:var(--font-zh);color:var(--text-primary)}.chat-pinyin{color:var(--accent-primary);font-family:inherit;font-size:.9rem}.chat-pt{color:var(--text-muted);border-top:1px dashed #ffffff1a;padding-top:.5rem;font-size:.95rem;font-style:italic}.chat-actions{gap:.5rem;margin-top:.2rem;display:flex}.chat-controls{background:var(--surface);border:1px solid var(--card-border);border-radius:8px;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1rem;padding:1rem;display:flex}.roleplay-selector{flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.roleplay-avatar-btn{cursor:pointer;background:0 0;border:2px solid #0000;border-radius:50%;padding:.5rem;font-size:3rem;transition:all .2s}.roleplay-avatar-btn:hover{transform:scale(1.1)}.roleplay-avatar-btn.selected{border-color:var(--accent-primary);background:rgba(var(--accent-primary-rgb,10, 132, 255), .2)}.mic-btn{background:var(--accent-danger,#ef4444);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;margin:0 auto;font-size:1.5rem;transition:all .2s;display:flex;box-shadow:0 0 10px #ef444480}.mic-btn.active{background:#dc2626;animation:1.5s infinite pulse}.mode-selector{justify-content:center;gap:1rem;margin-bottom:2rem;display:flex}.mode-card{background:var(--surface);border:1px solid var(--card-border);cursor:pointer;text-align:center;border-radius:8px;width:200px;padding:2rem;transition:all .2s}.mode-card:hover{border-color:var(--accent-primary);transform:translateY(-2px)}.mode-card-icon{margin-bottom:1rem;font-size:2.5rem}@media (width<=768px){.dialog-container{max-width:100%;height:auto;min-height:70vh;box-shadow:none;background:0 0;border:none;border-radius:0;margin:0;padding:.5rem}.chat-window{flex-direction:column;height:calc(100vh - 140px);display:flex}.dialog-header-enhanced{border-radius:12px;margin-bottom:1.5rem;padding:1.5rem 1rem}.dialog-header-enhanced h2{font-size:1.5rem;line-height:1.2}.dialog-filters-enhanced{flex-direction:column;align-items:stretch;gap:1.2rem;padding:1.2rem}.filter-group{flex-wrap:wrap;justify-content:space-between;width:100%}.enhanced-select{min-width:unset;flex:1;font-size:.9rem}.level-selector{flex-wrap:wrap;justify-content:flex-start;gap:6px}.level-btn.compact{padding:6px 10px;font-size:.75rem}.enhanced-grid{grid-template-columns:1fr;gap:1rem}.enhanced-card{padding:1.5rem}.dialog-card-icon{width:50px;height:50px;font-size:2rem}.chat-bubble-container{max-width:92%}.chat-zh{font-size:1.25rem}.chat-pinyin{font-size:.85rem}.chat-pt{padding-top:.4rem;font-size:.85rem}.chat-controls{flex-direction:column;align-items:center;gap:1rem;padding:1rem}.roleplay-selector{border-bottom:1px solid var(--card-border);flex-direction:row;justify-content:space-around;width:100%;margin-bottom:.5rem;padding-bottom:1rem}.roleplay-avatar-btn{font-size:2.8rem}.mic-btn{width:60px;height:60px;font-size:1.8rem}}.profile-container{flex-direction:column;gap:1.5rem;max-width:900px;height:100%;margin:0 auto;display:flex}.profile-header{border-radius:12px;padding:1rem 1.5rem}.profile-tabs{gap:1rem;margin:0;display:flex}.profile-tabs .tab-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;padding:.8rem 1.5rem;font-size:1.1rem;font-weight:500;transition:all .2s}.profile-tabs .tab-btn:hover{color:var(--text-primary)}.profile-tabs .tab-btn.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary)}.profile-content{background:var(--card-bg);border-radius:16px;flex:1;padding:2rem;overflow-y:auto}.profile-form{flex-direction:column;gap:1.5rem;display:flex}.form-section-title{color:var(--text-main);border-bottom:1px solid var(--card-border);align-items:center;gap:.5rem;margin-bottom:.5rem;padding-bottom:.8rem;font-size:1.3rem;font-weight:700;display:flex}.mt-4{margin-top:2rem}.mt-3{margin-top:1rem}.form-row{gap:1.5rem;display:flex}.flex-1{flex:1}.form-group{flex-direction:column;gap:.5rem;display:flex;position:relative}.form-group label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-left:.2rem;font-size:.85rem;font-weight:600}.form-control{border:1px solid var(--card-border);width:100%;color:var(--text-main);font-size:1rem;font-family:var(--font-sans);background:#ffffff80;border-radius:12px;padding:1rem 1rem 1rem 3rem;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:inset 0 2px 4px #0000001a}.form-group .input-icon{color:var(--text-muted);pointer-events:none;font-size:1.2rem;transition:color .3s;position:absolute;top:2.3rem;left:1rem}.form-control:focus{border-color:var(--accent-primary,#3b82f6);background:#fffc;outline:none;box-shadow:0 0 0 4px #3b82f626,inset 0 2px 4px #0000001a}.form-control:focus+.input-icon,.form-control:not(:placeholder-shown)+.input-icon{color:var(--accent-primary,#3b82f6)}textarea.form-control{resize:vertical;min-height:100px;padding-left:1rem}select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-position:right 1rem center;background-repeat:no-repeat;background-size:1.2rem;padding-left:3rem}input[type=date]::-webkit-calendar-picker-indicator{filter:invert();opacity:.5;cursor:pointer}input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}.form-actions.right{justify-content:flex-end;margin-top:2rem;display:flex}.btn-large{padding:.8rem 2rem;font-size:1.1rem;font-weight:700}.system-toast{z-index:1000;border-radius:8px;padding:1rem 2rem;font-weight:700;animation:.3s ease-out fadeInDown;position:absolute;top:20px;left:50%;transform:translate(-50%)}.system-toast.success{color:#fff;background:#16a34a}.system-toast.error{color:#fff;background:#dc2626}.system-toast.loading{color:#000;background:#fbbf24}@keyframes fadeInDown{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}.avatar-editor{gap:3rem;height:100%;display:flex}.avatar-preview-container{border:1px solid var(--card-border);background:#00000008;border-radius:16px;flex-direction:column;flex:0 0 280px;justify-content:flex-start;align-items:center;padding:2rem;display:flex}.avatar-image-wrapper{background:linear-gradient(135deg,#0000000d,#0000);border-radius:50%;margin-bottom:1.5rem;padding:10px;position:relative;box-shadow:0 8px 32px #0000001a}.avatar-controls{flex-direction:column;flex:1;gap:1.5rem;padding-right:15px;display:flex}.avatar-controls h3{color:var(--text-main);align-items:center;gap:.5rem;margin-top:1rem;margin-bottom:.5rem;font-size:1.1rem;font-weight:600;display:flex}.avatar-controls h3:before{content:"";background:var(--accent-primary,#3b82f6);border-radius:50%;width:8px;height:8px;display:inline-block}.color-picker-row{border:1px solid var(--card-border);background:#0000000d;border-radius:12px;flex-wrap:wrap;gap:12px;padding:1rem;display:flex}.color-swatch{cursor:pointer;border:3px solid #0000001a;border-radius:50%;width:38px;height:38px;transition:all .2s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 2px 8px #0000001a}.color-swatch:hover{transform:scale(1.1)}.color-swatch.selected{border-color:var(--accent-primary);transform:scale(1.15)}.action-buttons-fixed{border-top:1px solid var(--card-border);margin-top:2rem;padding-top:1.5rem}.w-100{width:100%}@media (width<=768px){.form-row{flex-direction:column;gap:1rem}.avatar-editor{flex-direction:column;align-items:center}.avatar-preview-container{flex:none;padding-top:0}}.ranking-sidebar{height:100%;color:var(--text-primary);flex-direction:column;display:flex}.ranking-header{border-bottom:1px solid #ffffff1a;margin-bottom:1.5rem;padding-bottom:2rem}.ranking-header h2{background:linear-gradient(135deg,#fbbf24,#f59e0b);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.2rem;font-size:1.2rem}.ranking-header p{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-size:.75rem}.ranking-list{flex-direction:column;flex:1;gap:.8rem;padding-right:5px;display:flex;overflow-y:auto}.ranking-item{background:#ffffff08;border:1px solid #ffffff0d;border-radius:8px;align-items:center;gap:1rem;padding:.8rem;transition:all .2s;display:flex}.ranking-item:hover{background:#ffffff0f;transform:translate(5px)}.ranking-item.me{border-color:var(--accent-primary);background:rgba(var(--accent-primary-rgb,10, 132, 255), .1)}.rank-pos{text-align:center;width:30px;font-size:1.1rem;font-weight:700}.player-info{flex-direction:column;display:flex}.player-name{font-size:.95rem;font-weight:500}.player-wins{color:var(--text-muted);font-size:.75rem}.user-position-footer{border-top:1px solid var(--card-border);background:linear-gradient(#0000,#0006);border-radius:0 0 12px 12px;margin-top:auto;padding:1.5rem}.footer-label{text-transform:uppercase;color:var(--text-muted);margin-bottom:.5rem;font-size:.7rem}.footer-stats{justify-content:space-between;align-items:baseline;display:flex}.footer-stats .pos{color:var(--accent-primary);font-size:1.5rem;font-weight:900}.footer-stats .wins{color:var(--text-primary);font-size:.9rem}.empty-msg{text-align:center;color:var(--text-muted);margin-top:2rem;font-style:italic}.loading-spinner{text-align:center;color:var(--text-muted);padding:2rem}.ci-playground{border:4px solid var(--card-border);background:radial-gradient(circle,#fffc 0%,#f0f0f0cc 100%);border-radius:24px;width:100%;height:600px;position:relative;overflow:hidden;box-shadow:0 0 20px #0000000d}.ci-stars{opacity:.5;background-image:radial-gradient(1px 1px at 20px 30px,#0003,#0000),radial-gradient(1px 1px at 40px 70px,#0003,#0000),radial-gradient(1.5px 1.5px at 50px 160px,#0000004d,#0000),radial-gradient(1px 1px at 80px 120px,#0003,#0000),radial-gradient(1.5px 1.5px at 110px 210px,#0000004d,#0000),radial-gradient(1px 1px at 150px 240px,#0003,#0000);background-repeat:repeat;background-size:200px 200px;animation:120s linear infinite moveStars;position:absolute;inset:0}@keyframes moveStars{0%{background-position:0 0}to{background-position:0 1000px}}.ci-ship{clip-path:polygon(50% 0%,0% 100%,100% 100%);will-change:transform;background:#38bdf8;width:50px;height:40px;position:absolute;bottom:20px;box-shadow:0 5px 15px #38bdf899}.ci-ship:after{content:"";filter:blur(5px);background:#f43f5e;width:10px;height:15px;animation:.1s infinite alternate thruster;position:absolute;bottom:-10px;left:50%;transform:translate(-50%)}@keyframes thruster{0%{opacity:.5;height:10px}to{opacity:1;height:20px}}.ci-bullet{background:var(--accent-color);width:4px;height:15px;box-shadow:0 0 10px var(--accent-color);will-change:transform;border-radius:2px;position:absolute}.ci-invader{will-change:transform;background:#0000000d;border:1px solid #0000001a;border-radius:8px;flex-direction:row;justify-content:center;align-items:center;padding:5px;display:flex;position:absolute}.ci-invader-hanzi{font-family:var(--font-zh);color:var(--text-main);text-shadow:0 0 8px #0000001a;text-align:center;font-size:1.2rem}.ci-hit-label{pointer-events:none;z-index:15;flex-direction:column;align-items:center;animation:1.2s forwards floatUpFade;display:flex;position:absolute}.ci-hit-pinyin{color:var(--accent-color);font-size:1.1rem;font-weight:700}.ci-hit-pt{color:var(--text-main);border:1px solid var(--card-border);background:#fffc;border-radius:4px;padding:2px 8px;font-size:.9rem}@keyframes floatUpFade{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-40px)}}.ci-hud{z-index:20;justify-content:space-between;display:flex;position:absolute;top:15px;left:20px;right:20px}.ci-stat{color:var(--text-main);border:1px solid var(--card-border);font-family:var(--font-sans);background:#fffc;border-radius:8px;padding:6px 12px;font-size:1rem}.ci-overlay{background:var(--card-bg);z-index:30;text-align:center;color:var(--text-main);flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;display:flex;position:absolute;inset:0}.ci-controls-hint{opacity:.7;gap:2rem;margin-top:1rem;font-size:.85rem;display:flex}.key-cap{border:1px solid var(--text-muted);border-radius:4px;padding:2px 8px}.gm-container{color:#1e293b;width:100%;height:600px;font-family:var(--font-sans);background:#f8fafc;border-radius:24px;flex-direction:column;display:flex;position:relative;overflow:hidden}.gm-passenger-panel{z-index:10;background:#fff;border-bottom:2px solid #e2e8f0;align-items:center;gap:1.5rem;padding:1.5rem 2rem;display:flex}.gm-avatar{background:#cbd5e1;border:4px solid #f1f5f9;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;font-size:2rem;display:flex}.gm-speech-bubble{background:#f1f5f9;border-radius:12px 12px 12px 0;flex:1;padding:1rem 1.5rem;position:relative}.gm-pinyin{color:#64748b;font-size:.9rem}.gm-hanzi{color:#0f172a;margin:4px 0;font-size:1.5rem;font-weight:700}.gm-translation{color:#94a3b8;font-size:.8rem;font-style:italic}.gm-map-view{background:#f1f5f9 radial-gradient(#cbd5e1 1px,#0000 0) 0 0/40px 40px;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.gm-landmark-pin{flex-direction:column;align-items:center;transition:all .5s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;transform:translate(-50%,-50%)}.gm-pin-icon{filter:drop-shadow(0 4px 6px #0000001a);font-size:3rem;animation:3s ease-in-out infinite gm-float}@keyframes gm-float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.gm-pin-label{background:#fff;border-radius:4px;margin-top:5px;padding:2px 10px;font-size:.8rem;font-weight:700;box-shadow:0 2px 4px #0000000d}.gm-dashboard{z-index:20;background:#fff;border-top:2px solid #e2e8f0;justify-content:center;gap:1.5rem;padding:2rem;display:flex}.gm-choice-btn{cursor:pointer;background:#fff;border:2px solid #e2e8f0;border-radius:16px;flex-direction:column;align-items:center;min-width:140px;padding:1rem 2rem;transition:all .2s;display:flex}.gm-choice-btn:hover{background:#f0f9ff;border-color:#38bdf8;transform:translateY(-2px)}.gm-btn-hanzi{color:#0f172a;font-size:1.8rem;font-weight:700}.gm-btn-pinyin{color:#64748b;font-size:.9rem}.gm-hud{flex-direction:column;gap:10px;display:flex;position:absolute;top:100px;right:20px}.gm-stat-pill{background:#ffffffe6;border-radius:100px;align-items:center;gap:8px;padding:8px 16px;font-weight:700;display:flex;box-shadow:0 4px 6px #0000000d}.gm-overlay{z-index:100;text-align:center;background:#fffffff2;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.gm-title{color:#0f172a;margin-bottom:1rem;font-size:3.5rem;font-weight:900}.gm-btn-start{color:#fff;cursor:pointer;background:#0f172a;border:none;border-radius:12px;padding:1rem 3rem;font-size:1.2rem;font-weight:700;box-shadow:0 10px 15px #0f172a33}.gm-btn-start:hover{background:#1e293b;transform:scale(1.05)}.gm-feedback{z-index:50;pointer-events:none;font-size:4rem;font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.gs-container{perspective:1000px;width:100%;height:600px;font-family:var(--font-sans);background:#000;border-radius:24px;position:relative;overflow:hidden}.gs-world{background:linear-gradient(#0f172a 0%,#020617 100%);justify-content:center;align-items:flex-end;display:flex;position:absolute;inset:0}.gs-road{transform-origin:bottom;background:linear-gradient(90deg,#0000 0%,#38bdf833 1%,#0000 1.1% 33%,#ffffff1a 33.1%,#0000 33.2% 66%,#ffffff1a 66.1%,#0000 66.2% 98.9%,#38bdf833 100%) 0 0/100% 100%,repeating-linear-gradient(#1e293b 0 50px,#334155 50px 100px) 0 0/100% 200px;width:1200px;height:2000px;position:relative;transform:rotateX(75deg);box-shadow:inset 0 0 100px #38bdf81a}.gs-road-animate{animation:linear infinite gs-road-scroll}@keyframes gs-road-scroll{0%{background-position:0 0,0 0}to{background-position:0 0,0 1000px}}.gs-player{z-index:10;background:linear-gradient(#38bdf8,#818cf8);border-radius:12px;width:80px;height:120px;transition:transform .2s cubic-bezier(.175,.885,.32,1.275);position:absolute;bottom:50px;box-shadow:0 0 30px #38bdf8,0 10px #1e40af}.gs-lane-0{left:calc(50% - 200px)}.gs-lane-1{left:calc(50% - 40px)}.gs-lane-2{left:calc(50% + 120px)}.gs-gate-group{pointer-events:none;width:100%;height:100px;transform-style:preserve-3d;justify-content:center;gap:20px;display:flex;position:absolute}.gs-portal{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f172acc;border:4px solid #a855f7;border-radius:16px;justify-content:center;align-items:center;width:140px;height:100%;font-size:1.5rem;font-weight:700;display:flex;box-shadow:0 0 20px #a855f780}.gs-portal.correct{border-color:#22c55e;box-shadow:0 0 30px #22c55e80}.gs-portal.wrong{border-color:#f43f5e;box-shadow:0 0 30px #f43f5e80}.gs-hud{z-index:20;pointer-events:none;flex-direction:column;align-items:center;padding:2rem;display:flex;position:absolute;top:0;left:0;right:0}.gs-sentence-box{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);text-align:center;background:#000000b3;border:1px solid #ffffff1a;border-radius:20px;min-width:600px;margin-bottom:2rem;padding:1.5rem 3rem;box-shadow:0 20px 50px #00000080}.gs-sentence-main{color:#fff;margin-bottom:.5rem;font-size:2rem}.gs-sentence-sub{color:var(--accent-secondary);opacity:.8;font-size:1rem}.gs-stats{gap:2rem;display:flex}.gs-stat{background:#0f172acc;border:1px solid #ffffff1a;border-radius:12px;padding:.5rem 1.5rem;font-size:1.2rem}.gs-stat.score{color:#22c55e}.gs-stat.speed{color:#eab308}.gs-overlay{z-index:50;text-align:center;background:#020617f2;flex-direction:column;justify-content:center;align-items:center;padding:3rem;display:flex;position:absolute;inset:0}.gs-title{background:linear-gradient(135deg,#38bdf8,#a855f7);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:1.5rem;font-size:4rem;font-weight:900}.gs-controls{gap:2rem;margin-bottom:3rem;display:flex}.gs-control-item{flex-direction:column;align-items:center;gap:.5rem;display:flex}.gs-key{border:2px solid #38bdf8;border-radius:12px;justify-content:center;align-items:center;width:50px;height:50px;font-size:1.2rem;display:flex}@keyframes gs-hit-flash{0%{box-shadow:0 0 #22c55e}50%{box-shadow:0 0 100px #22c55e}to{box-shadow:0 0 #22c55e}}.gs-hit-success{animation:.5s ease-out gs-hit-flash}.hanzidraw-container{max-width:900px;margin:0 auto;padding:2rem;animation:.5s ease-out fadeIn}.hanzidraw-header{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.hanzidraw-title{color:var(--text-main);font-size:1.4rem;font-weight:700}.hanzidraw-stats{align-items:center;gap:1.5rem;display:flex}.stat-chip{border:1px solid var(--card-border);background:#00000008;border-radius:12px;flex-direction:column;align-items:center;min-width:60px;padding:.4rem 1rem;display:flex}.stat-chip .stat-value{color:var(--accent-primary);font-size:1.3rem;font-weight:700}.stat-chip .stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-size:.65rem}.lives-display{gap:4px;font-size:1.4rem;display:flex}.life-icon{transition:transform .2s,opacity .2s}.life-icon.lost{opacity:.2;filter:grayscale();transform:scale(.8)}.hanzidraw-arena{grid-template-columns:1fr 1fr;align-items:start;gap:2.5rem;display:grid}@media (width<=700px){.hanzidraw-arena{grid-template-columns:1fr}}.target-card{border:1px solid var(--card-border);background:#00000008;border-radius:20px;flex-direction:column;align-items:center;gap:.75rem;padding:2rem;display:flex;position:sticky;top:2rem}.target-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;font-size:.75rem}.target-zh{color:var(--accent-primary);text-shadow:0 0 30px #38bdf84d;font-size:5rem;line-height:1}.target-pinyin{color:#f472b6;font-size:1.5rem;font-weight:500}.target-pt{color:var(--text-muted);letter-spacing:1px;font-size:1rem}.target-strokes{color:var(--text-muted);border:1px solid var(--card-border);border-radius:20px;padding:2px 10px;font-size:.8rem}.mode-tabs{gap:.5rem;width:100%;margin-top:1rem;display:flex}.mode-tab-btn{border:1px solid var(--card-border);color:var(--text-muted);cursor:pointer;background:#00000008;border-radius:8px;flex:1;padding:.5rem;font-size:.8rem;transition:all .2s}.mode-tab-btn.active{background:var(--accent-primary);color:#fff;border-color:#0000;font-weight:700}.mode-tab-btn:hover:not(.active){color:var(--text-main);background:#0000000f}.animate-btn{width:100%;color:var(--accent-primary);cursor:pointer;background:#38bdf814;border:1px solid #38bdf84d;border-radius:8px;margin-top:.5rem;padding:.6rem;font-size:.9rem;transition:all .2s}.animate-btn:hover{background:#38bdf833}.canvas-panel{flex-direction:column;align-items:center;gap:1rem;display:flex}.canvas-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:2px;align-self:flex-start;font-size:.75rem}.canvas-wrapper{border:2px solid var(--card-border);background:#ffffff80;border-radius:16px;transition:border-color .3s;position:relative;overflow:hidden;box-shadow:0 8px 24px #0000001a}.canvas-wrapper.flash-success{border-color:#22c55e;box-shadow:0 0 20px #22c55e4d}.canvas-wrapper.flash-error{border-color:#ef4444;box-shadow:0 0 20px #ef44444d}#hanzi-writer-target svg{display:block}.calligraphy-grid{pointer-events:none;position:absolute;inset:0}.calligraphy-grid:before,.calligraphy-grid:after{content:"";background:#0000000d;position:absolute}.calligraphy-grid:before{height:1px;top:50%;left:0;right:0}.calligraphy-grid:after{width:1px;top:0;bottom:0;left:50%}.calligraphy-diag{pointer-events:none;position:absolute;inset:0;overflow:hidden}.calligraphy-diag:before,.calligraphy-diag:after{content:"";background:#0000000d;width:141%;height:1px;position:absolute;top:50%;left:-20%}.calligraphy-diag:before{transform:rotate(45deg)}.calligraphy-diag:after{transform:rotate(-45deg)}.feedback-bar{text-align:center;border-radius:10px;justify-content:center;align-items:center;gap:.5rem;width:100%;min-height:48px;padding:.75rem 1.25rem;font-size:.95rem;font-weight:600;transition:all .3s;display:flex}.feedback-bar.neutral{color:var(--text-muted);border:1px solid var(--card-border);background:#00000008}.feedback-bar.success{color:#4ade80;background:#22c55e26;border:1px solid #22c55e4d;animation:.4s ease-out feedbackPulse}.feedback-bar.error{color:#f87171;background:#ef444426;border:1px solid #ef44444d;animation:.4s ease-out feedbackPulse}.stroke-progress{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.stroke-dot{background:#0000000d;border:1px solid #0000001a;border-radius:50%;width:10px;height:10px;transition:all .3s}.stroke-dot.done{background:#22c55e;border-color:#22c55e;box-shadow:0 0 6px #22c55e80}.canvas-controls{gap:.75rem;width:100%;display:flex}.result-overlay{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--card-border);text-align:center;border-radius:20px;flex-direction:column;align-items:center;gap:1.5rem;padding:3rem 2rem;animation:.4s ease-out fadeIn;display:flex}.result-emoji{font-size:4rem;animation:.5s ease-out bounceIn}.result-score-gained{color:#4ade80;font-size:2rem;font-weight:700}.result-score-lost{color:#f87171}.intro-screen{border:1px solid var(--card-border);text-align:center;background:#00000008;border-radius:24px;flex-direction:column;align-items:center;gap:1.5rem;max-width:550px;margin:0 auto;padding:3rem 2.5rem;display:flex}.intro-icon{font-size:5rem}.intro-title{color:var(--text-main);font-size:2rem;font-weight:700}.intro-desc{color:var(--text-muted);font-size:1rem;line-height:1.7}.intro-rules{text-align:left;background:#0000000d;border-radius:12px;flex-direction:column;gap:.5rem;width:100%;padding:1rem 1.25rem;display:flex}.intro-rules li{color:var(--text-muted);font-size:.9rem}@keyframes feedbackPulse{0%{transform:scale(1)}40%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.5)}70%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.ic-container{flex-direction:column;align-items:center;gap:2rem;width:100%;max-width:800px;margin:0 auto;display:flex}.ic-header-info{justify-content:space-between;align-items:center;width:100%;padding:0 1rem;display:flex}.ic-target-count{border:1px solid var(--card-border);background:#ffffff1a;border-radius:20px;padding:.4rem 1rem;font-size:.9rem}.ic-image-frame{aspect-ratio:1;background:var(--card-bg);border:4px solid var(--card-border);border-radius:32px;width:100%;max-width:500px;position:relative;overflow:hidden;box-shadow:0 20px 50px #0006}.ic-image{object-fit:cover;width:100%;height:100%;transition:transform .5s}.ic-image-frame:hover .ic-image{transform:scale(1.05)}.ic-tags-grid{flex-wrap:wrap;justify-content:center;gap:1rem;padding:1rem;display:flex}.ic-tag-btn{background:var(--card-bg);border:1px solid var(--card-border);cursor:pointer;border-radius:12px;flex-direction:column;align-items:center;padding:.8rem 1.5rem;transition:all .2s cubic-bezier(.175,.885,.32,1.275);display:flex}.ic-tag-zh{font-family:var(--font-zh);color:var(--text-main);font-size:1.8rem;font-weight:700}.ic-tag-pinyin{color:var(--accent-secondary);margin-top:4px;font-size:.75rem}.ic-tag-pt{color:#e2e8f0;opacity:1;margin-top:2px;font-size:.8rem;font-weight:500}.ic-tag-btn:hover:not(:disabled){border-color:var(--accent-secondary);background:#ffffff0d;transform:translateY(-5px)}.ic-tag-btn.selected{border-color:var(--accent-secondary);background:#38bdf833;box-shadow:0 0 15px #38bdf84d}.ic-tag-btn.correct{transform:scale(1.1);background:#10b9814d!important;border-color:#10b981!important}.ic-tag-btn.wrong{box-shadow:0 0 15px #ef444466;background:#ef444480!important;border-color:#ef4444!important}.error-shake{animation:.5s shake;border-color:#ef4444!important}.ic-progress-info{opacity:.8;align-items:center;gap:1rem;font-size:1rem;display:flex}.ic-check-badge{color:#10b981;font-weight:700;animation:.3s forwards popIn}@keyframes popIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@media (width<=600px){.ic-image-frame{max-width:100%}.ic-tag-zh{font-size:1.5rem}}.mkt-container{width:100%;height:600px;font-family:var(--font-sans);background:snow;border-radius:20px;flex-direction:column;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 30px #0000001a}.mkt-stall-header{color:#fff;background:#b91c1c;justify-content:center;align-items:center;gap:2rem;padding:1rem;display:flex;box-shadow:0 4px 10px #b91c1c4d}.mkt-stall-header h1{letter-spacing:2px;margin:0;font-size:1.5rem;font-weight:900}.mkt-lantern{font-size:1.8rem;animation:3s ease-in-out infinite mkt-swing}@keyframes mkt-swing{0%,to{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}.mkt-gameplay{background:#fef2f2;flex-direction:column;flex:1;padding:1.5rem;display:flex}.mkt-customer-zone{align-items:center;gap:1.5rem;margin-bottom:2rem;padding:1rem;display:flex}.mkt-customer-avatar{filter:drop-shadow(0 4px 6px #0000001a);font-size:4rem}.mkt-speech-bubble{background:#fff;border:2px solid #fee2e2;border-radius:20px 20px 20px 0;flex:1;padding:1.5rem 2rem;position:relative;box-shadow:0 8px 20px #0000000d}.mkt-bubble-content{justify-content:space-between;align-items:center;gap:15px;display:flex}.mkt-replay-btn{cursor:pointer;background:#fee2e2;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:45px;height:45px;font-size:1.3rem;transition:all .2s;display:flex;box-shadow:0 4px 6px #0000000d}.mkt-replay-btn:hover{background:#fecaca;transform:scale(1.1);box-shadow:0 6px 12px #0000001a}.mkt-replay-btn:active{transform:scale(.95)}.mkt-sentence{color:#1e293b;font-size:2.2rem;font-weight:700;font-family:var(--font-zh);flex-wrap:wrap;flex:1;align-items:center;gap:10px;display:flex}.mkt-slot{text-align:center;color:#b91c1c;border-bottom:4px dashed #cbd5e1;min-width:80px;display:inline-block}.mkt-slot.active{color:#ef4444;animation:1s infinite mkt-pulse}.mkt-slot.correct{color:#059669;border:none}.mkt-slot.wrong{color:#dc2626;border:none;animation:.4s mkt-shake}.mkt-translation{color:#94a3b8;border-top:1px solid #fee2e2;margin-top:10px;padding-top:5px;font-size:1rem;font-style:italic}.mkt-shelf{background:#78350f;border-radius:16px;flex-direction:column;flex:1;gap:1rem;padding:1.5rem;display:flex;box-shadow:inset 0 4px 10px #0003}.mkt-shelf-label{color:#fde68a;text-align:center;letter-spacing:1px;font-size:.8rem}.mkt-options-grid{grid-template-columns:repeat(4,1fr);gap:1rem;display:grid}.mkt-box-btn{cursor:pointer;color:#fff;background:#d97706;border:none;border-bottom:6px solid #b45309;border-radius:8px;flex-direction:column;align-items:center;padding:1rem .5rem;transition:all .2s;display:flex}.mkt-box-btn:hover{background:#f59e0b;transform:scale(1.05)}.mkt-box-btn:active{border-bottom-width:2px;transform:translateY(4px)}.mkt-box-zh{font-size:2.2rem;font-weight:700;font-family:var(--font-zh)}.mkt-box-pinyin{opacity:.8;font-size:.8rem}.mkt-status{justify-content:center;gap:2rem;margin-top:1rem;display:flex}.mkt-pill{color:#b91c1c;background:#fff;border-radius:100px;padding:6px 20px;font-weight:900;box-shadow:0 4px 10px #0000000d}.mkt-overlay{z-index:100;text-align:center;background:#fef2f2f2;justify-content:center;align-items:center;padding:2rem;display:flex;position:absolute;inset:0}.mkt-card.intro{max-width:500px}.mkt-btn-primary{color:#fff;cursor:pointer;background:#b91c1c;border:none;border-radius:12px;padding:1rem 3rem;font-size:1.2rem;font-weight:700;transition:all .3s;box-shadow:0 10px 20px #b91c1c33}.mkt-btn-primary:hover{background:#991b1b;transform:translateY(-4px)scale(1.05)}@keyframes mkt-pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@keyframes mkt-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.mkt-loader{color:#b91c1c;justify-content:center;align-items:center;height:500px;font-weight:700;display:flex}.memory-grid{justify-items:center;gap:1.2rem;width:100%;margin:1rem auto;padding:1rem;display:grid}.memory-card-scene{aspect-ratio:3/4;perspective:1500px;cursor:pointer;width:100%}.memory-card{width:100%;height:100%;transform-style:preserve-3d;border-radius:16px;transition:transform .6s cubic-bezier(.175,.885,.32,1.275);position:relative}.memory-card.is-flipped{transform:rotateY(180deg)}.memory-card-face{backface-visibility:hidden;border:2px solid var(--card-border);text-align:center;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:.8rem;transition:all .3s;display:flex;position:absolute;overflow:hidden}.memory-card-front{color:var(--accent-secondary);background:linear-gradient(145deg,#1e293be6,#0f172af2);font-size:3rem;box-shadow:0 8px 32px #00000080}.memory-card-front:after{content:"🧠";opacity:.2;font-size:1.5rem}.memory-card-back{background:var(--card-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transform:rotateY(180deg);box-shadow:0 8px 32px #0006}.memory-card:hover .memory-card-face{border-color:var(--accent-secondary)}.memory-card.is-matched .memory-card-back{border-color:var(--success);background:#10b98126;animation:1.5s infinite matchPulse;box-shadow:0 0 25px #10b98166}@keyframes matchPulse{0%,to{transform:rotateY(180deg)scale(1)}50%{transform:rotateY(180deg)scale(1.05)}}.memory-card.error .memory-card-back{border-color:var(--error);animation:.4s cardShake}@keyframes cardShake{0%,to{transform:rotateY(180deg)translate(0)}25%{transform:rotateY(180deg)translate(-5px)}75%{transform:rotateY(180deg)translate(5px)}}.memory-card-hanzi{font-family:var(--font-zh);color:var(--text-main);text-shadow:0 0 15px #fff3;font-size:clamp(2rem,5vw,3.5rem);font-weight:700}.memory-card-meaning{color:var(--text-main);margin-bottom:4px;font-size:1rem;font-weight:600}.memory-card-pinyin{color:var(--accent-secondary);background:#38bdf81a;border-radius:4px;padding:2px 8px;font-size:.8rem;font-weight:500}.memory-selection-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem;display:grid}.memory-selection-card{background:var(--card-bg);border:1px solid var(--card-border);cursor:pointer;border-radius:20px;flex-direction:column;align-items:center;gap:1rem;padding:2rem;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:flex}.memory-selection-card:hover{border-color:var(--accent-secondary);background:#ffffff0d;transform:translateY(-8px)}.memory-selection-icon{font-size:2.5rem}.memory-selection-label{font-size:1.2rem;font-weight:700}@media (width<=768px){.memory-grid{gap:.5rem;padding:.5rem}.memory-selection-grid{grid-template-columns:1fr}}.nc-container{width:100%;height:600px;font-family:var(--font-sans);background:#020617;border-radius:24px;position:relative;overflow:hidden}.nc-sky{background:linear-gradient(#0f172a 0%,#1e1b4b 100%);height:40%;position:absolute;top:0;left:0;right:0;overflow:hidden}.nc-stars{background-image:radial-gradient(1px 1px at 20px 30px,#fff,#0000),radial-gradient(1px 1px at 40px 70px,#fff,#0000),radial-gradient(2px 2px at 50px 160px,#38bdf8,#0000),radial-gradient(2px 2px at 90px 40px,#fff,#0000);background-size:200px 200px;position:absolute;inset:0}.nc-mountains{background:conic-gradient(from 120deg at 50% 100%, #1e293b 0 60deg, transparent 61deg) 0 100% / 200px 80px, conic-gradient(from 120deg at 50% 100%, #0f172a 0 60deg, transparent 61deg) 100px 100% / 250px 100px;filter:blur(1px);background-repeat:repeat-x;width:calc(100% + 200px);height:120px;transition:transform .2s ease-out;position:absolute;bottom:0;left:-100px}.nc-scene{perspective:200px;background:#111827;justify-content:center;display:flex;position:absolute;inset:40% 0 0}.nc-road{transform-origin:top;background:#1e293b;width:100%;height:100%;position:relative;overflow:hidden;transform:rotateX(80deg);box-shadow:0 0 100px #3abef933}.nc-road-surface{background:linear-gradient(90deg,#ef4444 0% 2%,#fff 2% 4%,#0000 4% 96%,#fff 96% 98%,#ef4444 98% 100%) 0 0/100% 100%,repeating-linear-gradient(0deg,#0003 0 50px,#0000 50px 100px) 0 0/100% 100px;width:100%;height:100%}.nc-road-animate{animation:.1s linear infinite nc-asphalt-flicker}@keyframes nc-asphalt-flicker{0%{background-position:0 0,0 0}to{background-position:0 0,0 100px}}.nc-lane-line{background:repeating-linear-gradient(0deg,#fde047 0 60px,#0000 60px 120px);width:8px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.nc-sprite-layer{pointer-events:none;position:absolute;inset:0;overflow:hidden}.nc-sprite{will-change:transform, opacity;flex-direction:column;align-items:center;display:flex;position:absolute;transform:translate(-50%,-100%)}.nc-sprite-icon{filter:drop-shadow(0 20px 40px #0009);font-size:8rem;line-height:1;animation:2s ease-in-out infinite alternate nc-sway}@keyframes nc-sway{0%{transform:rotate(-2deg)}to{transform:rotate(2deg)}}.nc-sprite-label{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;white-space:nowrap;background:#000c;border:2px solid #38bdf8;border-radius:12px;margin-top:10px;padding:6px 16px;font-weight:700;box-shadow:0 0 20px #38bef966}.nc-sprite-hanzi{font-size:1.5rem}.nc-dashboard{z-index:50;background:linear-gradient(#0000 0%,#02061780 30%,#020617 100%);border-top:1px solid #38bef933;justify-content:center;align-items:flex-end;height:160px;padding-bottom:20px;display:flex;position:absolute;bottom:0;left:0;right:0}.nc-instruction-card{text-align:center;background:#0f172ae6;border:3px solid #38bdf8;border-radius:20px;min-width:400px;padding:1.2rem 3rem;transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 0 40px #38bef94d}.active-zone{border-color:#fde047;transform:scale(1.05);box-shadow:0 0 60px #fde04780}.nc-hanzi{color:#fff;font-size:2.5rem;line-height:1.2}.nc-pinyin{color:#38bdf8;margin-bottom:5px;font-size:1.2rem}.nc-hud-top{z-index:60;pointer-events:none;justify-content:space-between;display:flex;position:absolute;top:20px;left:20px;right:20px}.nc-pill{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;background:#0009;border:1px solid #ffffff1a;border-radius:100px;padding:8px 20px;font-size:1.2rem;font-weight:700}.nc-score{color:#22c55e;border-color:#22c55e}.nc-lives{color:#f43f5e;border-color:#f43f5e}.nc-overlay{z-index:100;text-align:center;background:#020617f2;flex-direction:column;justify-content:center;align-items:center;padding:3rem;display:flex;position:absolute;inset:0}.nc-big-title{letter-spacing:-2px;background:linear-gradient(#fde047,#f59e0b);-webkit-text-fill-color:transparent;text-shadow:0 10px 30px #f59e0b4d;-webkit-background-clip:text;margin-bottom:1rem;font-size:4.5rem;font-weight:900}.nc-start-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#38bdf8,#818cf8);border:none;border-radius:16px;padding:1.2rem 4rem;font-size:1.5rem;font-weight:700;transition:all .2s;box-shadow:0 10px 30px #38bdf980}.nc-start-btn:hover{transform:translateY(-5px);box-shadow:0 15px 40px #38bdf9b3}.nc-wheel{z-index:100;pointer-events:none;opacity:.8;border:30px solid #111827;border-radius:50%;width:250px;height:250px;transition:transform .2s;position:absolute;bottom:-60px}.nc-wheel:after{content:"";background:#111827;height:30px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.rh-container{gap:2rem;width:100%;max-width:1000px;min-height:500px;margin:0 auto;display:flex}.rh-sidebar{text-align:center;flex-direction:column;flex:0 0 300px;justify-content:center;align-items:center;padding:2rem;display:flex}.rh-target-box{border:2px solid var(--accent-secondary);background:#ffffff0d;border-radius:20px;width:100%;margin-bottom:2rem;padding:2rem;box-shadow:0 0 30px #38bdf81a}.rh-target-radical{font-family:var(--font-zh);color:var(--accent-secondary);text-shadow:0 0 20px #38bdf866;font-size:5rem;font-weight:700;line-height:1}.rh-target-meaning{color:var(--text-main);margin-top:1rem;font-size:1.2rem;font-weight:600}.rh-main{flex-direction:column;flex:1;gap:1.5rem;display:flex}.rh-grid{grid-template-columns:repeat(4,1fr);gap:1rem;padding:1rem;display:grid}.rh-char-card{aspect-ratio:1;background:var(--card-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--card-border);font-family:var(--font-zh);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:12px;justify-content:center;align-items:center;font-size:2.5rem;transition:all .2s cubic-bezier(.175,.885,.32,1.275);display:flex}.rh-char-card:hover:not(.status-correct):not(.status-wrong){border-color:var(--accent-secondary);background:#ffffff1a;transform:scale(1.05)}.rh-char-card.status-correct{color:#10b981;cursor:default;background:#10b98133;border-color:#10b981}.rh-char-card.status-wrong{color:#ef4444;background:#ef44441a;border-color:#ef4444;animation:.4s ease-in-out rh-shake}@keyframes rh-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.rh-progress-container{background:#ffffff0d;border-radius:6px;width:100%;height:12px;overflow:hidden}.rh-progress-bar{background:var(--accent-secondary);height:100%;transition:width .4s;box-shadow:0 0 10px #38bdf880}.rh-success-overlay{text-align:center;padding:2rem;animation:.5s ease-out fadeIn}@media (width<=768px){.rh-container{flex-direction:column}.rh-sidebar{flex:none}.rh-grid{grid-template-columns:repeat(3,1fr)}}.sentence-builder-container{flex-direction:column;gap:2rem;width:100%;max-width:800px;margin:0 auto;padding:1rem;display:flex}.sb-question-box{text-align:center;padding:2rem}.sb-pt-sentence{color:var(--text-main);margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.sb-instructor{color:var(--text-muted);font-size:.9rem}.sb-construction-area{border:2px dashed var(--card-border);background:#ffffff08;border-radius:16px;flex-wrap:wrap;justify-content:center;align-items:center;gap:.8rem;min-height:120px;padding:1.5rem;transition:all .3s;display:flex}.sb-bank-area{flex-wrap:wrap;justify-content:center;gap:.8rem;padding:1.5rem;display:flex}.sb-token{background:var(--card-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--card-border);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:12px;flex-direction:column;align-items:center;min-width:60px;padding:.8rem 1.2rem;transition:all .2s cubic-bezier(.175,.885,.32,1.275);display:flex;box-shadow:0 4px 10px #0003}.sb-token:hover{border-color:var(--accent-secondary);background:#ffffff1a;transform:translateY(-5px)}.sb-token:active{transform:scale(.95)}.sb-token-zh{font-family:var(--font-zh);color:var(--text-main);font-size:1.8rem;font-weight:700}.sb-token-pinyin{color:var(--accent-secondary);opacity:.8;margin-top:4px;font-size:.7rem}.sb-token-meaning{color:#fff;opacity:.7;margin-top:2px;font-size:.7rem;animation:.3s ease-out fadeIn}.sb-token-status-correct{background:#10b98133!important;border-color:#10b981!important}.sb-token-status-wrong{box-shadow:0 0 10px #ef44444d;background:#ef44441a!important;border-color:#ef4444!important}.sb-play-btn{border:1px solid var(--card-border);cursor:pointer;background:#ffffff1a;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:45px;height:45px;font-size:1.2rem;transition:all .2s;display:flex}.sb-play-btn:hover{border-color:var(--accent-secondary);background:#fff3;transform:scale(1.1)}.sb-play-btn:active{transform:scale(.95)}.sb-feedback-correct{border-color:var(--success)!important;background:#10b9811a!important}.sb-feedback-error{animation:.4s ease-in-out sb-shake;border-color:var(--danger)!important;background:#ef44441a!important}@keyframes sb-shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.sb-controls{justify-content:center;gap:1rem;margin-top:1rem;display:flex}.sb-next-btn{animation:2s infinite sb-glow}@keyframes sb-glow{0%{box-shadow:0 0 5px var(--accent-primary-glow)}50%{box-shadow:0 0 20px var(--accent-primary-glow)}to{box-shadow:0 0 5px var(--accent-primary-glow)}}@media (width<=600px){.sb-token-zh{font-size:1.4rem}.sb-token{padding:.6rem 1rem}}.sn-container{width:100%;height:650px;font-family:var(--font-sans);background:#020617;border-radius:24px;flex-direction:column;align-items:center;display:flex;position:relative;overflow:hidden}.sn-gps-panel{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:10;background:#0f172acc;border-bottom:2px solid #38bdf84d;justify-content:center;width:100%;padding:1.5rem;display:flex}.sn-instruction-card{text-align:center;background:#00000080;border:1px solid #38bdf880;border-radius:16px;min-width:400px;padding:1rem 2.5rem;transition:transform .3s;box-shadow:0 0 20px #38bdf833}.sn-instruction-card.mission-active{border-color:#fde047;transform:scale(1.02);box-shadow:0 0 30px #fde0474d}.sn-hanzi{color:#fff;font-size:2rem;font-weight:700}.sn-pinyin{color:#38bdf8;font-size:1.1rem}.sn-translation{color:#94a3b8;font-size:.9rem}.sn-map-area{flex:1;justify-content:center;align-items:center;width:100%;padding:20px;display:flex;position:relative}.sn-grid{background:#0f172a80;border:4px solid #1e293b;grid-template-rows:repeat(20,1fr);grid-template-columns:repeat(20,1fr);width:500px;height:500px;display:grid;position:relative;box-shadow:0 0 50px #00000080}.sn-cell{border:1px solid #ffffff08;position:relative}.sn-snake-segment{z-index:5;background:linear-gradient(135deg,#38bdf8,#818cf8);border-radius:4px;width:100%;height:100%;position:absolute;box-shadow:0 0 10px #38bdf880}.sn-snake-head{z-index:6;background:#fde047;box-shadow:0 0 15px #fde047}.sn-direction-hints{color:#000;pointer-events:none;justify-content:space-between;align-items:center;padding:0 2px;font-size:.6rem;font-weight:900;display:flex;position:absolute;inset:0}.sn-hint-l,.sn-hint-r{animation:1s infinite sn-blink}@keyframes sn-blink{0%,to{opacity:.3}50%{opacity:1}}.sn-landmark{z-index:4;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.5rem;display:flex;position:absolute}.sn-landmark.active-target{animation:1s infinite alternate sn-pulse-target}@keyframes sn-pulse-target{0%{filter:brightness();transform:scale(1)}to{filter:brightness(1.5)drop-shadow(0 0 10px #fde047);transform:scale(1.3)}}.sn-stats{gap:15px;display:flex;position:absolute;top:20px;right:20px}.sn-pill{color:#fff;background:#000000b3;border:1px solid #ffffff1a;border-radius:100px;padding:6px 16px;font-weight:700}.sn-overlay{z-index:100;text-align:center;background:#020617f2;flex-direction:column;justify-content:center;align-items:center;padding:2rem;display:flex;position:absolute;inset:0}.sn-title{background:linear-gradient(135deg,#38bdf8,#818cf8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:2rem;font-size:3.5rem;font-weight:900}.sn-feedback{pointer-events:none;z-index:200;font-size:3rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sn-success{color:#22c55e;animation:.5s ease-out forwards sn-pop}.sn-error{color:#f43f5e;animation:.5s ease-in-out sn-shake}@keyframes sn-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.5)}50%{opacity:1;transform:translate(-50%,-50%)scale(1.2)}to{opacity:0;transform:translate(-50%,-50%)scale(1)}}@keyframes sn-shake{0%,to{transform:translate(-50%,-50%)translate(0)}25%{transform:translate(-50%,-50%)translate(-20px)}75%{transform:translate(-50%,-50%)translate(20px)}}.tn-playground{border:4px solid var(--card-border);cursor:crosshair;-webkit-user-select:none;user-select:none;background:#00000008;border-radius:24px;width:100%;height:600px;position:relative;overflow:hidden}.tn-canvas{pointer-events:none;z-index:10;position:absolute;top:0;left:0}.tn-object{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:2px solid var(--card-border);transform-origin:50%;background:#00000008;border-radius:50%;justify-content:center;align-items:center;width:100px;height:100px;display:flex;position:absolute;box-shadow:0 0 20px #0000001a}.tn-object-pinyin{color:var(--text-main);text-shadow:0 0 10px #0000000d;font-size:1.8rem;font-weight:700}.tn-object.is-sliced{box-shadow:none;background:0 0;border:none}.tn-sliced-part{justify-content:center;align-items:center;width:100%;height:100%;transition:transform .5s ease-out,opacity .5s ease-out;display:flex;position:absolute}.tn-hud{z-index:20;justify-content:space-between;display:flex;position:absolute;top:20px;left:20px;right:20px}.tn-stat{border:1px solid var(--card-border);font-family:var(--font-sans);color:var(--text-main);background:#fffc;border-radius:12px;padding:10px 20px}.tn-score{color:#22c55e;font-size:1.5rem}.tn-lives{color:var(--primary-red);font-size:1.5rem}.tn-guide{border:1px solid var(--card-border);z-index:20;background:#fffc;border-radius:50px;gap:1.5rem;padding:10px 20px;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.tn-guide-item{opacity:.8;color:var(--text-main);flex-direction:column;align-items:center;font-size:.8rem;display:flex}.tn-guide-gesture{color:var(--primary-blue);margin-bottom:2px;font-size:1.2rem}.tn-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:30;color:var(--text-main);background:#fff6;flex-direction:column;justify-content:center;align-items:center;padding:2rem;display:flex;position:absolute;inset:0}.tn-intro-card{background:var(--card-bg);border:1px solid var(--card-border);text-align:center;border-radius:24px;flex-direction:column;align-items:center;gap:1.5rem;max-width:550px;padding:3rem 2.5rem;display:flex;box-shadow:0 10px 30px #0000000d}.tn-start-title{color:var(--text-main);margin-bottom:1rem;font-size:4rem}@keyframes slashFade{0%{opacity:1;stroke-dashoffset:0}to{opacity:0;stroke-dashoffset:100px}}.slash-path{fill:none;stroke:var(--accent-primary);stroke-width:6px;stroke-linecap:round;filter:drop-shadow(0 0 8px #0003)}.tp-container{flex-direction:column;align-items:center;gap:2rem;width:100%;max-width:700px;margin:0 auto;display:flex}.tp-sequence-display{border:1px solid var(--card-border);background:#ffffff0d;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;width:100%;min-height:200px;padding:2rem;display:flex}.tp-play-btn{background:var(--accent-secondary);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;font-size:2rem;transition:all .2s cubic-bezier(.175,.885,.32,1.275);display:flex;box-shadow:0 0 20px #38bdf84d}.tp-play-btn:hover{transform:scale(1.1);box-shadow:0 0 30px #38bdf880}.tp-play-btn:active{transform:scale(.95)}.tp-play-btn.playing{opacity:.7;animation:1s infinite pulse}.tp-path-visualizer{justify-content:center;align-items:center;gap:1rem;height:80px;display:flex}.tp-tone-node{opacity:0;background:#ffffff1a;border-radius:12px;justify-content:center;align-items:center;width:60px;height:60px;font-size:2rem;font-weight:700;animation:.3s cubic-bezier(.175,.885,.32,1.275) forwards tp-pop;display:flex;transform:translateY(10px)}@keyframes tp-pop{to{opacity:1;transform:translateY(0)}}.tp-controls{grid-template-columns:repeat(4,1fr);gap:1rem;width:100%;display:grid}.tp-tone-btn{background:var(--card-bg);border:1px solid var(--card-border);cursor:pointer;border-radius:16px;flex-direction:column;align-items:center;gap:.5rem;padding:1.5rem 1rem;transition:all .2s;display:flex}.tp-tone-btn:hover:not(:disabled){border-color:var(--accent-secondary);background:#ffffff1a;transform:translateY(-5px)}.tp-tone-icon{align-items:center;height:40px;font-size:2rem;display:flex}.tp-tone-label{opacity:.7;text-transform:uppercase;font-size:.8rem}.tone-color-1{color:#38bdf8}.tone-color-2{color:#c084fc}.tone-color-3{color:#f59e0b}.tone-color-4{color:#f472b6}.tp-feedback{text-align:center;height:40px;font-weight:700}.tp-reveal{text-align:center;animation:.5s forwards fadeIn}.tp-reveal-zh{font-family:var(--font-zh);margin-bottom:.5rem;font-size:3rem}.tp-reveal-pinyin{color:var(--accent-secondary);letter-spacing:5px;font-size:1.5rem}@media (width<=600px){.tp-controls{grid-template-columns:repeat(2,1fr)}.tp-tone-node{width:50px;height:50px;font-size:1.5rem}}.rain-container{border:1px solid var(--card-border);background:#00000008;border-radius:20px;flex-direction:column;width:100%;height:600px;display:flex;position:relative;overflow:hidden}.rain-scene{flex:1;width:100%;position:relative}.falling-word{background:var(--card-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--card-border);text-align:center;will-change:transform;border-radius:12px;min-width:80px;padding:.8rem 1.2rem;transition:transform .1s linear;position:absolute;box-shadow:0 4px 15px #0000001a}.falling-word-text{font-family:var(--font-zh);color:var(--text-main);font-size:2.2rem;font-weight:700;line-height:1}.rain-ui{background:var(--card-bg);border-top:1px solid var(--card-border);z-index:10;flex-direction:column;gap:1.2rem;padding:1.5rem;display:flex}.rain-stats{justify-content:space-between;align-items:center;font-size:1rem;display:flex}.rain-lives{color:var(--primary-red);gap:5px;font-size:1.2rem;display:flex}.rain-options{grid-template-columns:repeat(3,1fr);gap:1rem;display:grid}.rain-option-btn{border:1px solid var(--card-border);background:#00000008;justify-content:center;min-height:60px;padding:1rem;font-size:1.1rem;font-weight:600;transition:all .2s cubic-bezier(.175,.885,.32,1.275)}.rain-option-btn:hover:not(:disabled){border-color:var(--primary-blue);background:#00000014;transform:translateY(-3px)scale(1.02)}.rain-option-btn:active{transform:scale(.98)}.rain-overlay{background:var(--card-bg);z-index:100;text-align:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:var(--text-main);flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;display:flex;position:absolute;inset:0}.score-popup{color:var(--success);pointer-events:none;font-size:1.5rem;font-weight:700;animation:.8s ease-out forwards floatUp;position:absolute}@keyframes shakeScreen{0%,to{transform:translate(0)}25%{transform:translate(-5px,5px)}50%{transform:translate(5px,-5px)}75%{transform:translate(-5px,-5px)}}.shake{animation:.2s ease-in-out 2 shakeScreen}.main-footer{color:var(--text-main);border-top:1px solid var(--card-border);background:#fff;width:100%;margin-top:6rem;padding:5rem 0 3rem}.main-footer h4{color:var(--text-main);margin-bottom:1.5rem;font-size:1.1rem;font-weight:600}.main-footer p{color:var(--text-muted);line-height:1.6}.main-footer ul{list-style:none}.main-footer ul li{color:var(--text-muted);cursor:pointer;margin-bottom:.75rem;font-size:.95rem;transition:all .2s}.main-footer ul li:hover{color:var(--accent-color);transform:translate(5px)}.footer-bottom{border-top:1px solid var(--card-border);color:var(--text-muted);justify-content:space-between;align-items:center;margin-top:4rem;padding-top:2rem;font-size:.9rem;display:flex}.footer-container{max-width:1400px;margin:0 auto;padding:0 2rem}.footer-grid{grid-template-columns:2fr 1fr 1fr 1.5fr;gap:3rem;margin-bottom:3rem;display:grid}.footer-brand{flex-direction:column;gap:1.5rem;display:flex}.footer-logo{filter:grayscale(.2);width:auto;height:90px}.footer-description{color:var(--text-muted);max-width:300px;font-size:.95rem;line-height:1.6}.footer-links h4,.footer-contact h4{color:var(--text-main);margin-bottom:1.5rem;font-size:1.1rem;font-weight:700}.footer-links ul{flex-direction:column;gap:.8rem;padding:0;list-style:none;display:flex}.footer-links li{color:var(--text-muted);cursor:pointer;font-size:.9rem;transition:all .2s}.footer-links li:hover{color:var(--accent-primary);transform:translate(5px)}.footer-contact p{color:var(--text-muted);margin-top:1rem;font-size:.9rem}.social-links{gap:1rem;display:flex}.social-icon{border:1px solid var(--card-border);cursor:pointer;background:#00000008;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.2rem;transition:all .3s;display:flex}.social-icon:hover{background:var(--accent-primary);color:#fff;transform:translateY(-3px);box-shadow:0 10px 20px -5px #0000001a}.footer-bottom{border-top:1px solid var(--card-border);color:var(--text-muted);justify-content:space-between;align-items:center;padding-top:2rem;font-size:.85rem;display:flex}.credits{align-items:center;gap:4px;display:flex}.mandaly-brand{color:var(--primary-blue);letter-spacing:.5px;font-weight:700}.heart{color:#ef4444;animation:1.5s ease-in-out infinite heartBeat;display:inline-block}@keyframes heartBeat{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}@media (width<=900px){.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}.footer-brand{text-align:center;grid-column:span 2;align-items:center}}@media (width<=600px){.footer-grid{text-align:center;grid-template-columns:1fr}.footer-links ul{align-items:center}.footer-brand{grid-column:span 1}.footer-bottom{text-align:center;flex-direction:column;gap:1rem}.social-links{justify-content:center}}.xp-bar-container{background:#0000000d;border:1px solid #00000005;border-radius:4px;width:120px;height:8px;margin-top:4px;overflow:hidden}.xp-bar-fill{background:linear-gradient(90deg,#10b981,#34d399);height:100%;transition:width .5s cubic-bezier(.4,0,.2,1)}.level-badge{background:var(--accent-gold);color:#fff;text-transform:uppercase;border-radius:12px;padding:2px 8px;font-size:.7rem;font-weight:800;display:inline-block;box-shadow:0 2px 4px #f9a8254d}.streak-badge{color:#fff;background:linear-gradient(135deg,#ff4d00,#ff9500);border-radius:12px;align-items:center;gap:4px;padding:2px 10px;font-size:.75rem;font-weight:800;animation:2s infinite pulse-fire;display:inline-flex;box-shadow:0 2px 8px #ff4d0066}.freeze-badge{color:#fff;cursor:pointer;background:linear-gradient(135deg,#00d2ff,#3a7bd5);border-radius:12px;align-items:center;gap:4px;padding:2px 8px;font-size:.7rem;transition:transform .2s;display:inline-flex;box-shadow:0 2px 6px #00d2ff4d}.freeze-badge:hover{transform:scale(1.05)}@keyframes pulse-fire{0%{transform:scale(1)}50%{transform:scale(1.05);box-shadow:0 4px 12px #ff4d0099}to{transform:scale(1)}}.xp-popup{color:#10b981;pointer-events:none;z-index:9999;text-shadow:0 2px 10px #10b9814d;font-size:1.5rem;font-weight:800;animation:1.2s ease-out forwards xpFloatUp;position:fixed}@keyframes xpFloatUp{0%{opacity:0;transform:translateY(0)}20%{opacity:1}to{opacity:0;transform:translateY(-100px)}}.level-up-overlay{z-index:10000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000d9;flex-direction:column;justify-content:center;align-items:center;animation:.5s fadeIn;display:flex;position:fixed;inset:0}.level-up-card{text-align:center;background:#fff;border-radius:32px;padding:3rem;animation:.6s cubic-bezier(.175,.885,.32,1.275) forwards popScale;position:relative;transform:scale(.8);box-shadow:0 20px 50px #0000004d}.level-up-card h2{color:var(--accent-gold);margin-bottom:.5rem;font-size:3rem}.level-up-card p{color:var(--text-muted);font-size:1.2rem}@keyframes popScale{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.coin-badge{color:var(--accent-gold);background:#f9a8251a;border-radius:8px;align-items:center;gap:4px;padding:2px 8px;font-size:.85rem;font-weight:700;display:flex}.footer-description{margin:0 auto}.animated-fade-in-up{animation:.5s ease-out forwards fadeInUp}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.home-landing{flex-direction:column;gap:4rem;padding-bottom:4rem;display:flex}.hero-section{text-align:center;background:radial-gradient(circle,#0a84ff1a 0%,#0000 70%);border-radius:24px;padding:4rem 1rem;position:relative;overflow:hidden}.hero-content{z-index:2;max-width:800px;margin:0 auto;position:relative}.hero-badge{color:#fbbf24;letter-spacing:.5px;text-transform:uppercase;background:linear-gradient(135deg,#ffd70026,#ff8c001a);border:1px solid #ffd70066;border-radius:30px;align-items:center;gap:8px;margin-bottom:2rem;padding:.6rem 1.2rem;font-size:.9rem;font-weight:700;display:inline-flex;box-shadow:0 4px 20px #ffd70026}.hero-title{letter-spacing:-1px;text-shadow:0 10px 30px #00000080;margin-bottom:1.5rem;font-size:4rem;font-weight:900;line-height:1.15}@media (width<=768px){.hero-title{font-size:2.8rem}}.hero-subtitle{color:var(--text-muted);margin-bottom:2.5rem;font-size:1.2rem;line-height:1.6}.hero-actions{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.pulse-animation{animation:2s infinite pulse-soft}@keyframes pulse-soft{0%{box-shadow:0 0 #0a84ff66}70%{box-shadow:0 0 0 15px #0a84ff00}to{box-shadow:0 0 #0a84ff00}}.bento-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;display:grid}.bento-card{background:var(--surface);border:1px solid var(--card-border);border-radius:20px;padding:2rem;transition:all .3s}.bento-card.clickable{cursor:pointer}.bento-card.clickable:hover{border-color:var(--accent-primary);transform:translateY(-5px);box-shadow:0 10px 30px #0000001a}.feature-card{flex-direction:column;align-items:flex-start;gap:1rem;display:flex}.feature-icon{border-radius:12px;justify-content:center;align-items:center;width:50px;height:50px;font-size:1.5rem;display:flex}.bg-blue{color:#60a5fa;background:#3b82f633}.bg-green{color:#34d399;background:#10b98133}.bg-purple{color:#a78bfa;background:#8b5cf633}.bg-orange{color:#fb923c;background:#f9731633}.levels-grid{text-align:left;grid-template-columns:repeat(3,1fr);gap:1.5rem;max-width:1200px;margin:0 auto;padding:2rem 0;display:grid}@media (width<=1024px){.levels-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.levels-grid{grid-template-columns:1fr}}.home-dashboard{flex-direction:column;gap:2rem;display:flex}.dashboard-header{margin-bottom:1rem}.dashboard-header h2{margin-bottom:.5rem;font-size:2.2rem}.dashboard-header p{color:var(--text-muted);font-size:1.1rem}.dashboard-grid{grid-template-rows:auto auto;grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.progress-card{color:#fff;border:none;grid-column:1/-1;padding:2.5rem;position:relative;overflow:hidden}.progress-card h3{color:#fff;margin-bottom:.5rem;font-size:1.8rem}.progress-card p{opacity:.9;font-size:1.1rem}.quick-action-card .bento-icon,.arena-card .bento-icon{margin-bottom:1rem;font-size:2.5rem}.culture-card{border:1px solid #dc262633;border-left:4px solid var(--accent-danger);background:#dc26260d;grid-column:1/-1}.culture-badge{color:#f87171;background:#dc262633;border-radius:12px;padding:.3rem .8rem;font-size:.8rem;font-weight:700;display:inline-block}@media (width<=768px){.hero-title{font-size:2.5rem}.dashboard-grid{grid-template-columns:1fr}.step-connector{width:30px}}.welcome-text h2{margin-top:2rem;font-size:1.6rem}