:root{color-scheme:light;--background: #F5F1E6;--surface: #FFFDF7;--surface-elevated: #FFFFFF;--surface-hover: #F2EDDF;--surface-sunken: #EDE7D6;--text-primary: #20241F;--text-secondary: #5B6058;--text-muted: #63675F;--text-disabled: #A9ABA2;--text-inverse: #FBF8F0;--border: #D9D0BA;--border-subtle: #E7E0CD;--border-strong: #BFB49A;--primary: #2F6F5E;--primary-hover: #275C4E;--primary-active: #1E4A3F;--primary-soft: #E7F0EC;--primary-border: #B9D3C9;--on-primary: #F7F4EA;--success: #2F6F5E;--success-soft: #E7F0EC;--success-border: #B9D3C9;--warning: #8A6009;--warning-soft: #FAF1DC;--warning-border: #E3CD97;--danger: #A63D2E;--danger-soft: #FBEAE6;--danger-border: #E8BDB3;--info: #35526E;--info-soft: #E9EFF5;--info-border: #BACBDC;--accent: #A63D2E;--font-ui: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-hanzi: "Noto Serif SC", "Songti SC", "SimSun", serif;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;--text-2xs: 11px;--text-xs: 12px;--text-sm: 13px;--text-base: 15px;--text-md: 16px;--text-lg: 18px;--text-xl: 21px;--text-2xl: 25px;--text-3xl: 30px;--leading-tight: 1.25;--leading-normal: 1.55;--leading-relaxed: 1.75;--leading-hanzi: 2;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--space-8: 40px;--space-9: 56px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--radius-full: 999px;--shadow-sm: 0 1px 2px rgba(32, 36, 31, .06);--shadow-md: 0 2px 8px rgba(32, 36, 31, .08);--shadow-lg: 0 8px 24px rgba(32, 36, 31, .1);--shadow-focus: 0 0 0 3px rgba(47, 111, 94, .28);--transition-fast: .12s ease;--transition-normal: .22s cubic-bezier(.4, 0, .2, 1);--container-max: 780px;--nav-height: 62px;--tap-target: 44px;--sidebar-width: 232px;--c-paper: var(--background);--c-paper-2: var(--surface-sunken);--c-ink: var(--text-primary);--c-ink-soft: var(--text-secondary);--c-jade: var(--primary);--c-jade-dark: var(--primary-active);--c-seal: var(--danger);--c-gold: var(--warning);--c-gray: var(--text-disabled);--c-line: var(--border)}:root[data-theme=dark]{color-scheme:dark;--background: #16181A;--surface: #1E2124;--surface-elevated: #262A2E;--surface-hover: #2C3135;--surface-sunken: #131517;--text-primary: #EDEAE1;--text-secondary: #B3B8B1;--text-muted: #949A93;--text-disabled: #6B716E;--text-inverse: #16181A;--border: #383D41;--border-subtle: #2B3034;--border-strong: #4C5257;--primary: #6FBFA6;--primary-hover: #85CDB6;--primary-active: #9BD9C4;--primary-soft: #1E2E29;--primary-border: #2F4A42;--on-primary: #0E1D19;--success: #6FBFA6;--success-soft: #1E2E29;--success-border: #2F4A42;--warning: #E0B667;--warning-soft: #2E2718;--warning-border: #4E4227;--danger: #EA9284;--danger-soft: #2E1D1A;--danger-border: #4E312B;--info: #91B4D8;--info-soft: #1B242D;--info-border: #2F3E4C;--accent: #EA9284;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);--shadow-md: 0 2px 8px rgba(0, 0, 0, .45);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--shadow-focus: 0 0 0 3px rgba(111, 191, 166, .35)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}html{-webkit-text-size-adjust:100%}body{background:var(--background);color:var(--text-primary);font-family:var(--font-ui);font-size:var(--text-base);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background var(--transition-normal),color var(--transition-normal)}h1,h2,h3,h4{line-height:var(--leading-tight);margin:0;font-weight:700}p{margin:0 0 var(--space-3)}button{font-family:inherit;cursor:pointer}img,svg,video{max-width:100%}.hanzi{font-family:var(--font-hanzi);letter-spacing:.02em}:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.app-shell{min-height:100%;position:relative;padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom,0px))}.app-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-4);width:100%}.app-main{padding-bottom:var(--space-8)}.stack{display:flex;flex-direction:column}.stack-2{gap:var(--space-2)}.stack-3{gap:var(--space-3)}.stack-4{gap:var(--space-4)}.row{display:flex;align-items:center;gap:var(--space-2)}.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.row-wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.chip-scroller{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-2);scrollbar-width:thin;-webkit-overflow-scrolling:touch}.chip-scroller::-webkit-scrollbar{height:4px}.chip-scroller::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-full)}.divider{height:1px;background:var(--border-subtle);margin:var(--space-6) 0;border:none}.section-heading{font-size:var(--text-sm);font-weight:700;color:var(--text-secondary);letter-spacing:.01em;margin:0 0 var(--space-3);display:flex;align-items:center;gap:var(--space-2)}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:inherit;font-weight:600;border-radius:var(--radius-md);border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-sm{font-size:var(--text-sm);padding:8px 12px;min-height:36px}.btn-md{font-size:var(--text-base);padding:11px 18px;min-height:var(--tap-target)}.btn-lg{font-size:var(--text-md);padding:14px 24px;min-height:52px}.btn-block{width:100%}.btn-variant-primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}.btn-variant-primary:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover)}.btn-variant-secondary{background:var(--surface);color:var(--text-primary);border-color:var(--border)}.btn-variant-secondary:hover:not(:disabled){background:var(--surface-hover);border-color:var(--border-strong)}.btn-variant-outline{background:transparent;color:var(--primary);border-color:var(--primary-border)}.btn-variant-outline:hover:not(:disabled){background:var(--primary-soft);border-color:var(--primary)}.btn-variant-ghost{background:transparent;color:var(--text-secondary);border-color:transparent}.btn-variant-ghost:hover:not(:disabled){background:var(--surface-hover);color:var(--text-primary)}.btn-variant-danger{background:transparent;color:var(--danger);border-color:var(--danger-border)}.btn-variant-danger:hover:not(:disabled){background:var(--danger-soft);border-color:var(--danger)}.btn-variant-success{background:transparent;color:var(--success);border-color:var(--success-border)}.btn-variant-success:hover:not(:disabled){background:var(--success-soft);border-color:var(--success)}.btn-icon{padding:0;width:var(--tap-target);height:var(--tap-target);min-height:var(--tap-target);flex-shrink:0}.btn-icon.btn-sm{width:36px;height:36px;min-height:36px}.btn-label-hide{display:none}@media (min-width: 420px){.btn-label-hide{display:inline}}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);background:var(--primary);color:var(--on-primary);border:1.5px solid var(--primary);border-radius:var(--radius-md);padding:11px 18px;min-height:var(--tap-target);font-size:var(--text-base);font-weight:600;transition:background var(--transition-fast)}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);background:var(--surface);color:var(--text-primary);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:11px 18px;min-height:var(--tap-target);font-size:var(--text-base);font-weight:600;transition:background var(--transition-fast),border-color var(--transition-fast)}.btn-secondary:hover:not(:disabled){background:var(--surface-hover);border-color:var(--border-strong)}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast)}.card-default{padding:var(--space-4)}.card-compact{padding:var(--space-3)}.card-elevated{box-shadow:var(--shadow-md);border-color:transparent;background:var(--surface-elevated);padding:var(--space-4)}.card-outlined{background:transparent;border-color:var(--border);padding:var(--space-4)}.card-interactive{padding:var(--space-4);width:100%;text-align:left;display:block;background:var(--surface);cursor:pointer;font:inherit;color:inherit}.card-interactive:hover{border-color:var(--primary-border);box-shadow:var(--shadow-sm)}.card-interactive:active{transform:translateY(1px)}.card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}.card-title{font-size:var(--text-md);font-weight:700;margin:0}.card-footer{margin-top:var(--space-4);display:flex;gap:var(--space-2);flex-wrap:wrap}.card-tone-success{background:var(--success-soft);border-color:var(--success-border)}.card-tone-danger{background:var(--danger-soft);border-color:var(--danger-border)}.card-tone-warning{background:var(--warning-soft);border-color:var(--warning-border)}.card-tone-info{background:var(--info-soft);border-color:var(--info-border)}.card-tone-primary{background:var(--primary-soft);border-color:var(--primary-border)}.reading-card{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-3)}.explanation-card{border-radius:var(--radius-lg);padding:var(--space-4);margin-top:var(--space-4);border:1.5px solid var(--border);background:var(--surface)}.explanation-card.correct{border-color:var(--success-border);background:var(--success-soft)}.explanation-card.wrong{border-color:var(--danger-border);background:var(--danger-soft)}.word-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-2);border-bottom:1px solid var(--border-subtle);background:none;border-left:none;border-right:none;border-top:none;width:100%;text-align:left;border-radius:var(--radius-md);transition:background var(--transition-fast)}.word-row:hover{background:var(--surface-hover)}.word-row:hover .hanzi{color:var(--primary)}.word-row[role=button]{cursor:pointer}.word-row-hanzi{font-size:var(--text-2xl);min-width:56px;font-weight:500}.word-row-pinyin{font-size:var(--text-sm);color:var(--text-secondary)}.word-row-meaning{font-size:var(--text-base);overflow-wrap:anywhere}.tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);padding:4px 10px;border-radius:var(--radius-full);border:1px solid var(--border);color:var(--text-secondary);white-space:nowrap;background:transparent}.chip{display:inline-flex;align-items:center;gap:var(--space-1);white-space:nowrap;font-family:inherit;font-size:var(--text-sm);font-weight:600;padding:8px 14px;min-height:36px;border-radius:var(--radius-full);border:1.5px solid var(--border);background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.chip:hover{border-color:var(--border-strong);color:var(--text-primary)}.chip[aria-pressed=true]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}.field{position:relative;display:block;width:100%}.field-input,input[type=text],input[type=number],input[type=search],textarea,select{font-family:inherit;font-size:var(--text-base);padding:12px var(--space-4);border-radius:var(--radius-md);border:1.5px solid var(--border);width:100%;background:var(--surface);color:var(--text-primary);min-height:var(--tap-target);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.field-input:focus,input[type=text]:focus,input[type=number]:focus,input[type=search]:focus,textarea:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:var(--shadow-focus)}input::placeholder,textarea::placeholder{color:var(--text-muted)}.field-with-icon .field-input{padding-left:44px}.field-with-clear .field-input{padding-right:44px}.field-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;display:flex}.field-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-full)}.field-clear:hover{background:var(--surface-hover);color:var(--text-primary)}input[type=range]{width:100%;height:36px;accent-color:var(--primary);cursor:pointer;background:transparent;touch-action:manipulation}.field-label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--text-secondary);margin-bottom:var(--space-2)}.field-hint{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-2)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:38px;cursor:pointer}.select-wrap{position:relative;display:inline-flex;align-items:center;width:100%}.select-wrap .field-caret{position:absolute;right:12px;pointer-events:none;color:var(--text-muted);display:flex}.select-wrap.select-auto{width:auto}.select-wrap.select-auto select{width:auto;min-width:84px}.mc-option{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left;padding:var(--space-4);border-radius:var(--radius-md);border:1.5px solid var(--border);background:var(--surface);font-size:var(--text-md);font-family:inherit;color:var(--text-primary);margin-bottom:var(--space-2);min-height:52px;transition:border-color var(--transition-fast),background var(--transition-fast)}.mc-option:hover:not(:disabled){border-color:var(--border-strong);background:var(--surface-hover)}.mc-key{flex-shrink:0;width:26px;height:26px;border-radius:var(--radius-sm);border:1.5px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:700;color:var(--text-secondary)}.mc-text{flex:1;min-width:0;overflow-wrap:anywhere}.mc-option.correct{border-color:var(--success);background:var(--success-soft)}.mc-option.correct .mc-key{border-color:var(--success);color:var(--success)}.mc-option.wrong{border-color:var(--danger);background:var(--danger-soft)}.mc-option.wrong .mc-key{border-color:var(--danger);color:var(--danger)}.mc-option.chosen{border-color:var(--info);background:var(--info-soft)}.mc-mark{margin-left:auto;display:flex;flex-shrink:0}.flip-card{background:var(--surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-5);text-align:center;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);box-shadow:var(--shadow-md)}.progress-bar-track{height:8px;background:var(--surface-sunken);border-radius:var(--radius-full);overflow:hidden}.progress-bar-fill{height:100%;border-radius:var(--radius-full);transition:width var(--transition-normal)}.info-box{background:var(--info-soft);border:1px solid var(--info-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);color:var(--text-secondary);display:flex;gap:var(--space-3);align-items:flex-start}.notice{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);border:1px solid transparent}.notice-info{background:var(--info-soft);border-color:var(--info-border);color:var(--text-secondary)}.notice-success{background:var(--success-soft);border-color:var(--success-border);color:var(--primary-active)}.notice-warning{background:var(--warning-soft);border-color:var(--warning-border);color:var(--warning)}.notice-danger{background:var(--danger-soft);border-color:var(--danger-border);color:var(--danger)}.state-block{padding:var(--space-8) var(--space-4);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.state-icon{width:52px;height:52px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;background:var(--surface-sunken);color:var(--text-muted);flex-shrink:0}.state-title{font-size:var(--text-md);font-weight:700}.state-text{font-size:var(--text-sm);color:var(--text-secondary);max-width:42ch;margin:0}.skeleton{background:linear-gradient(90deg,var(--surface-sunken) 25%,var(--surface-hover) 37%,var(--surface-sunken) 63%);background-size:400% 100%;animation:skeleton-shimmer 1.4s ease infinite;border-radius:var(--radius-sm)}@keyframes skeleton-shimmer{0%{background-position:100% 50%}to{background-position:0 50%}}.topbar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5) 0 var(--space-3);min-height:64px}.topbar-title{font-size:var(--text-xl);font-weight:700;margin:0;overflow-wrap:anywhere}.topbar-eyebrow{font-size:var(--text-sm);color:var(--text-secondary)}.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:20;background:var(--surface-elevated);border-top:1px solid var(--border-subtle);display:flex;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -1px 8px #20241f0d}.nav-btn{background:none;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-muted);font-size:var(--text-2xs);font-weight:600;padding:var(--space-2) var(--space-1);flex:1;min-height:var(--nav-height);transition:color var(--transition-fast);-webkit-tap-highlight-color:transparent}.nav-btn.active{color:var(--primary)}.nav-dot{width:4px;height:4px;border-radius:50%;background:transparent}.nav-btn.active .nav-dot{background:var(--primary)}.sidebar{display:none}@media (min-width: 1024px){.app-shell{padding-bottom:0;padding-left:var(--sidebar-width)}.bottom-nav{display:none}.app-container{padding:0 var(--space-6)}.sidebar{display:flex;flex-direction:column;gap:2px;position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-width);background:var(--surface);border-right:1px solid var(--border-subtle);padding:var(--space-5) var(--space-3);overflow-y:auto;z-index:20}.sidebar-brand{padding:0 var(--space-3) var(--space-4)}.sidebar-brand-name{font-size:var(--text-md);font-weight:700;line-height:1.2}.sidebar-brand-sub{font-size:var(--text-xs);color:var(--text-muted)}.sidebar-section{font-size:var(--text-xs);font-weight:700;letter-spacing:.01em;color:var(--text-muted);padding:var(--space-4) var(--space-3) var(--space-2)}.sidebar-link{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:10px var(--space-3);border-radius:var(--radius-md);border:none;background:none;color:var(--text-secondary);font-size:var(--text-base);font-weight:600;text-align:left;transition:background var(--transition-fast),color var(--transition-fast)}.sidebar-link:hover{background:var(--surface-hover);color:var(--text-primary)}.sidebar-link.active{background:var(--primary-soft);color:var(--primary-active)}}@media (max-width: 480px){.topbar h1{font-size:var(--text-xl)}}@media (max-width: 380px){:root{--text-base: 14px;--text-2xl: 22px}.app-container{padding:0 var(--space-3)}.mc-option{padding:var(--space-3);font-size:var(--text-base)}.word-row-hanzi{min-width:46px;font-size:var(--text-xl)}}@keyframes audio-spin{to{transform:rotate(360deg)}}@keyframes audio-pulse{0%,to{opacity:1}50%{opacity:.45}}.audio-spin{animation:audio-spin .9s linear infinite}button[data-audio-state]{min-width:40px;min-height:40px;touch-action:manipulation}button[data-audio-state=playing]{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}button[data-audio-state=error]{background:var(--danger-soft);border-color:var(--danger-border);color:var(--danger)}@keyframes fade-up{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.animate-in{animation:fade-up var(--transition-normal) both}@keyframes toast-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.toast-viewport{position:fixed;left:50%;transform:translate(-50%);bottom:calc(var(--nav-height) + var(--space-4) + env(safe-area-inset-bottom,0px));z-index:50;display:flex;flex-direction:column;gap:var(--space-2);width:min(440px,calc(100vw - var(--space-7)));pointer-events:none}.toast{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--surface-elevated);border:1px solid var(--border);box-shadow:var(--shadow-lg);font-size:var(--text-sm);color:var(--text-primary);animation:toast-in var(--transition-normal) both;pointer-events:auto}.toast-success{border-color:var(--success-border);background:var(--success-soft)}.toast-warning{border-color:var(--warning-border);background:var(--warning-soft)}.toast-danger{border-color:var(--danger-border);background:var(--danger-soft)}@media (min-width: 1024px){.toast-viewport{bottom:var(--space-6);left:calc(50% + var(--sidebar-width) / 2)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}@media print{.bottom-nav,.sidebar,.toast-viewport{display:none!important}.app-shell{padding:0}}.game-hud{position:sticky;top:0;z-index:5;background:var(--background);padding:var(--space-2) 0 var(--space-3);margin-bottom:var(--space-2);border-bottom:1px solid var(--border-subtle)}.game-hud-score{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-lg)}.game-hud-combo{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-sm);font-weight:600;color:var(--warning);background:var(--warning-soft);padding:3px 9px;border-radius:var(--radius-full)}.game-hud-meta{font-size:var(--text-xs);color:var(--text-secondary);margin-top:var(--space-2);gap:var(--space-3)}.game-hud-meta>span{display:inline-flex;align-items:center;gap:4px}.game-prompt-label{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-2);text-align:center}.game-prompt{display:flex;align-items:center;justify-content:center;min-height:132px;padding:var(--space-5) var(--space-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);text-align:center}.game-icon{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--primary-soft);color:var(--primary)}.game-options{border:none;padding:0;margin:0}.game-option{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:56px;padding:var(--space-3);background:var(--surface);color:inherit;font:inherit;text-align:left;border:1.5px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--transition),background var(--transition)}.game-option:hover{border-color:var(--primary)}.game-option.selected{border-color:var(--primary);background:var(--primary-soft)}.game-record{text-align:center}.game-record-value{font-size:var(--text-xl);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15}.game-record-label{font-size:var(--text-xs);color:var(--text-secondary);margin-top:2px}.game-result-badge{width:60px;height:60px;border-radius:var(--radius-full);margin:0 auto var(--space-3);display:flex;align-items:center;justify-content:center}.game-result-badge.tone-success{background:var(--success-soft);color:var(--success)}.game-result-badge.tone-warning{background:var(--warning-soft);color:var(--warning)}.game-result-badge.tone-danger{background:var(--danger-soft);color:var(--danger)}.game-result-badge.tone-info{background:var(--primary-soft);color:var(--primary)}.game-result-score{font-size:40px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;margin-top:var(--space-2)}.game-result-score-unit{font-size:var(--text-sm);font-weight:400;color:var(--text-secondary);margin-left:6px}.game-hint{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);padding:var(--space-3);background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-secondary)}.game-hint-static{font-size:var(--text-sm);color:var(--text-secondary);text-align:center;margin:0 0 var(--space-3)}.match-board{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-2)}.match-col{display:flex;flex-direction:column;gap:var(--space-2)}.match-cell{position:relative;min-height:56px;padding:var(--space-3) var(--space-2);display:flex;align-items:center;justify-content:center;text-align:center;background:var(--surface);color:inherit;font:inherit;font-size:var(--text-base);line-height:1.3;border:1.5px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--transition),background var(--transition),opacity var(--transition)}.match-cell.hanzi{font-size:var(--text-lg)}.match-cell:disabled{cursor:default}.match-cell.selected{border-color:var(--primary);background:var(--primary-soft)}.match-cell.matched{opacity:.32;border-style:dashed}.match-cell.flash-ok{border-color:var(--success);background:var(--success-soft)}.match-cell.flash-bad{border-color:var(--danger);background:var(--danger-soft)}.match-mark{position:absolute;top:4px;right:5px;display:flex}.achievement{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3);background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}.achievement.unlocked{border-color:var(--success);background:var(--success-soft)}.achievement-icon{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--background);color:var(--text-muted)}.achievement.unlocked .achievement-icon{background:var(--surface);color:var(--success)}.achievement-title{display:block;font-weight:600;font-size:var(--text-base)}.achievement-desc{display:block;font-size:var(--text-sm);color:var(--text-secondary);margin-top:2px}.achievement-progress{display:block;font-size:var(--text-xs);color:var(--text-muted);margin-top:3px;font-variant-numeric:tabular-nums}.activity-chart{display:flex;align-items:flex-end;gap:2px;height:72px;margin-bottom:var(--space-3)}.activity-bar-wrap{flex:1;height:100%;display:flex;align-items:flex-end}.activity-bar{width:100%;border-radius:2px;background:var(--border);transition:height var(--transition)}.activity-bar.on{background:var(--primary)}.dash-stats{font-size:var(--text-sm);color:var(--text-secondary);gap:var(--space-3);row-gap:4px}.dash-empty{font-size:var(--text-sm);color:var(--text-secondary);margin:0}.mastery-bar{display:flex;height:10px;border-radius:var(--radius-full);overflow:hidden;background:var(--border)}.mastery-bar>div{transition:width var(--transition)}.mastery-legend{font-size:var(--text-xs);color:var(--text-secondary);gap:var(--space-3);row-gap:4px;margin-top:var(--space-2)}.mastery-legend>span{display:inline-flex;align-items:center;gap:5px}.mastery-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}.dash-topic-row{width:100%;gap:var(--space-2);min-height:40px;background:none;border:none;color:inherit;font:inherit;padding:var(--space-1) 0;cursor:pointer}@media (max-width: 359px){.match-cell{min-height:50px;font-size:var(--text-sm)}.match-cell.hanzi{font-size:var(--text-base)}.game-result-score{font-size:34px}}.related-word{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;padding:var(--space-2) var(--space-3);min-height:44px;background:var(--surface);color:inherit;font:inherit;text-align:left;border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--transition),background var(--transition)}.related-word:hover{border-color:var(--primary);background:var(--primary-soft)}.related-word .hanzi{font-size:var(--text-md);line-height:1.2}.related-word-meaning{font-size:var(--text-xs);color:var(--text-secondary);max-width:15ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.usage-row{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:40px;padding:var(--space-2) 0;background:none;border:none;color:inherit;font:inherit;font-size:var(--text-sm);text-align:left;cursor:pointer}.conn-dot{width:9px;height:9px;border-radius:var(--radius-full);display:inline-block;flex-shrink:0}.conn-dot.on{background:var(--success)}.conn-dot.off{background:var(--text-muted)}.stack-1>*+*{margin-top:var(--space-1)}.listen-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--border-subtle)}.listen-item:last-child{border-bottom:none}.listen-num{min-width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:700;background:var(--primary-soft);color:var(--primary)}.listen-reveal{display:inline-flex;align-items:center;gap:6px;min-height:40px;background:none;border:none;color:var(--text-secondary);font:inherit;font-size:var(--text-sm);cursor:pointer;padding:0}.listen-reveal:hover{color:var(--primary)}.review-choice{display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-height:62px;padding:var(--space-3);background:var(--surface);color:inherit;font:inherit;text-align:left;border:1.5px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--transition),background var(--transition)}.review-choice:hover{border-color:var(--primary)}.review-choice.selected{border-color:var(--primary);background:var(--primary-soft)}.review-choice-label{font-size:var(--text-xs);color:var(--text-secondary)}.review-choice-value{font-size:var(--text-md);font-weight:600}.review-option{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}.review-option.candidate{border-color:var(--warning);background:var(--warning-soft)}