:root{--body-bg:#10202b;--text-color:#eaf1f8;--canvas-bg:#142831;--canvas-border:#3a5362;--ui-bg:#1b303a;--ui-shadow:0 12px 35px #15253412;--button-bg:#8aacf1;--button-color:#10233c;--panel-bg:#1b303a;--panel-border:#3a5362;--panel-text:#d8e5ed;--menu-title:#eef4fb;--overlay-bg:#10202bf5;--badge-bg:transparent;--hud-bg:#1b303a;--hud-border:#3a5362;--hud-text:#eaf1f8;--panel-link:#9dc0ff}
body.theme-light{color-scheme:light;--body-bg:#f8f9fc;--text-color:#25334c;--canvas-bg:#edf5fc;--canvas-border:#e0e7f0;--ui-bg:#fff;--button-bg:#527fe6;--button-color:#fff;--panel-bg:#fff;--panel-border:#e0e7f0;--panel-text:#36465f;--menu-title:#25334c;--overlay-bg:#f8f9fc;--hud-bg:#ffffffed;--hud-border:#e0e7f0;--hud-text:#25334c;--panel-link:#527fe6;--tone-button-bg:#edf3ff;--tone-button-color:#3a5ba1;--tone-button-border:#d8e4fc;--tone-button-active-bg:#d8e7ff;background:#f8f9fc;color:#25334c}
html{padding:0;display:block}body{width:100%;height:auto;min-height:100vh;padding:24px 32px 20px;background:var(--body-bg);font-family:'Segoe UI','Microsoft YaHei',sans-serif}body::before{display:none}.brand-bar{width:100%;max-width:1120px;display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.brand{display:flex;gap:11px;align-items:center;color:var(--text-color);text-decoration:none;font-size:23px;font-weight:750;letter-spacing:1px}.brand small{display:block;color:#94a1b3;font-size:9px;letter-spacing:2px;margin-top:3px;font-weight:500}.brand-mark{display:grid;place-items:center;background:#537fe6;color:#fff;width:42px;height:42px;border-radius:14px;font-size:26px}.brand-note{color:#94a1b3;font-size:12px;letter-spacing:2px}.cta-inline{width:100%;max-width:1120px;margin:0 0 14px;justify-content:space-between}.lang-toggle{border:1px solid var(--panel-border);background:var(--ui-bg);border-radius:30px;padding:3px;gap:0}.lang-toggle button{background:transparent;border:none;padding:6px 14px;color:#8290a7;font-size:12px}.lang-toggle button.active{background:#edf3ff;color:#527fe6}.cta-button{background:transparent!important;border:none!important;box-shadow:none!important;color:var(--panel-link)!important;font-size:12px!important;padding:8px!important;text-transform:none!important}.topbar-spacer{display:none}
.ui{max-width:1120px;gap:12px;padding:12px 16px;border:1px solid var(--panel-border);border-radius:16px;background:var(--ui-bg);box-shadow:none;backdrop-filter:none}.primary-controls{gap:7px}.ui button,.ui select{border-radius:9px;font-size:12px;min-height:34px;padding:7px 10px}.primary-controls button{background:#eef2f8;color:#52637b}#startBtn{background:#527fe6;color:white}.secondary-controls{flex:1;justify-content:flex-end;gap:9px}.secondary-controls label{font-size:11px;color:#8090a4;gap:5px}.secondary-controls select{background:var(--body-bg);color:var(--text-color);border:1px solid var(--panel-border);max-width:110px}#replayBtn{background:#fff2e7;color:#af744d}.ui input{accent-color:#527fe6}.game-wrapper{width:100%;max-width:1120px;margin-top:16px;border:1px solid var(--panel-border);border-radius:22px;overflow:hidden;box-shadow:0 12px 40px #20304b09}#game{width:100%;max-width:100%;height:auto;margin:0;border:0;box-shadow:none;touch-action:none}.game-hud{top:14px;left:16px;right:16px;justify-content:space-between;gap:0;background:var(--hud-bg);border:1px solid var(--hud-border);color:var(--hud-text);border-radius:13px;padding:10px 16px;backdrop-filter:none;box-shadow:none;pointer-events:none}.game-hud .badge{background:transparent;border:0;box-shadow:none;gap:8px;padding:0;color:#8796aa;font-size:11px}.game-hud .badge span:last-child{font-size:19px;font-weight:700;color:var(--text-color);font-variant-numeric:tabular-nums}#lives{color:#ec9a92!important;font-size:15px!important;letter-spacing:2px}#message{top:auto;bottom:18px;left:50%;transform:translateX(-50%);padding:9px 19px;border-radius:30px;background:#fff;border:1px solid #dce6f2;box-shadow:0 6px 20px #445d7610;color:#526987;font-size:13px;max-width:80%;pointer-events:none}
.practice-strip{width:100%;max-width:1120px;display:flex;gap:32px;align-items:center;margin-top:14px;padding:15px 20px;background:var(--ui-bg);border:1px solid var(--panel-border);border-radius:14px;box-sizing:border-box}.practice-strip>div{display:flex;align-items:center;gap:14px}.strip-label{font-size:11px;color:#94a0b0}.practice-strip strong{font-size:18px;color:#527fe6}.practice-strip .progress-cell{flex:1;flex-direction:column;align-items:stretch;gap:7px}.practice-track{height:4px;border-radius:8px;background:#e8edf4;overflow:hidden}.practice-track span{display:block;width:0;height:100%;background:#9bb7ed;border-radius:8px;transition:width .3s}.game-footer{display:flex;justify-content:space-between;max-width:1120px;width:100%;margin-top:16px;color:#a3aeba;font-size:9px;letter-spacing:1px}
#startMenu{position:fixed;inset:0;overflow-y:auto;background:var(--overlay-bg);padding:30px 24px;box-sizing:border-box;align-items:center}#menuBox{position:relative;width:min(1080px,100%);max-width:none;border:0;box-shadow:none;background:transparent;border-radius:0;color:var(--text-color);padding:10px 18px;text-align:left;backdrop-filter:none}.menu-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:60px}.menu-brand{display:flex;align-items:center;gap:8px;font-weight:750;font-size:24px;letter-spacing:1px}.menu-brand>span{display:grid;place-items:center;width:40px;height:40px;color:#fff;background:#527fe6;border-radius:13px;font-size:25px}.recording-pill{font-size:11px;color:#8797aa;background:#edf2f9;padding:9px 15px;border-radius:30px}.menu-hero{padding:12px 0 28px;max-width:560px}.menu-eyebrow{font-size:12px;letter-spacing:3px;color:#7d94b9;margin-bottom:18px}#menuBox h2{font-size:54px;letter-spacing:-1px;line-height:1.35;max-width:430px;font-weight:800;margin:0 0 18px;color:var(--text-color)}.menu-intro{font-size:15px;color:#8391a6;line-height:2;margin:0}.menu-art{position:absolute;top:95px;right:40px;width:365px;height:270px}.art-orbit{position:absolute;inset:14px 10px;border:1px dashed #d5e2f2;border-radius:50%;transform:rotate(-20deg)}.art-word{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;width:112px;height:128px;background:#fff;border:1px solid #e2e8f0;border-radius:26px;color:#3c5574;font-size:57px;font-weight:650;box-shadow:0 18px 35px #425c7c10}.art-word small{font-size:12px;color:#a3b0c0;margin-top:5px;font-weight:400}.art-word.one{left:15px;top:7px;transform:rotate(-8deg)}.art-word.two{right:17px;top:38px;background:#e4efff;border-color:#d8e5f8;color:#527fe6;transform:rotate(9deg)}.art-word.three{left:125px;bottom:0;background:#fff0e6;border-color:#f5e4d7;color:#c18960;transform:rotate(-3deg)}.art-dot{position:absolute;top:10px;left:190px;color:#9bb7e8;font-size:40px;transform:rotate(-12deg)}.mode-options{display:flex;gap:18px;margin-top:28px}.mode-choice{position:relative;flex:1;border:1px solid var(--panel-border);background:var(--panel-bg);border-radius:20px;padding:25px 24px 22px 79px;box-sizing:border-box;box-shadow:0 8px 25px #24426104}.mode-symbol{position:absolute;left:22px;top:23px;font-size:29px;color:#628ce7;background:#edf3ff;width:42px;height:42px;display:grid;place-items:center;border-radius:14px}.mode-choice:nth-child(2) .mode-symbol{color:#bd8865;background:#fff2e8}#menuBox .mode-choice button{display:block;margin:0;width:100%;padding:0;text-align:left;font-size:19px;font-weight:700;color:var(--text-color);background:transparent;border:0;box-shadow:none}#menuBox .mode-choice button::after{content:'↗';float:right;color:#9ab0d3;font-size:24px}.mode-detail{font-size:12px;color:#8a98ac;margin:10px 0 0}.mode-choice:has(button:hover){border-color:#9db9f0;transform:translateY(-2px);transition:transform .2s,border-color .2s}.menu-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:24px}#menuBox #customVocabBtn{width:auto;margin:0;padding:8px 0;border:0;background:transparent;font-size:12px;color:#8f9db0}.menu-tips{display:flex;gap:16px;font-size:10px;color:#a4afbc}.tone-controls{gap:12px;padding:12px}.tone-controls button{min-width:70px;padding:12px;border-radius:12px}.drawer-panel,#datasetBox,#importBox{border:1px solid var(--panel-border);border-radius:22px;background:var(--panel-bg);max-height:85vh;overflow:auto;box-shadow:0 20px 70px #182b4318}#datasetPicker,#importPanel{position:fixed;inset:0}#datasetBox{width:min(720px,90vw);box-sizing:border-box;padding:28px}#datasetList{padding:0;list-style:none}.dataset-group{list-style:none;margin:18px 0}.dataset-group h4{color:#7e91ad;margin:0 0 10px;font-size:12px}.dataset-option{display:block;width:100%;background:var(--body-bg);border:1px solid var(--panel-border);padding:13px 16px;margin:8px 0;border-radius:12px;color:var(--text-color);box-shadow:none;text-align:left}.dataset-option strong{font-size:14px}.dataset-meta{display:block;font-size:10px;color:#91a0b5;margin-top:5px}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #9cbaf3;outline-offset:4px}body.theme-dark .primary-controls button{background:#2a4351;color:#d8e5ed}body.theme-dark #startBtn{background:#8aacf1;color:#10233c}body.theme-dark #message{background:#1b303a;color:#c5d5e8;border-color:#4a6479}
@media(max-width:1100px){.ui{flex-wrap:wrap}.secondary-controls{justify-content:flex-start}.menu-art{right:0;width:320px}#menuBox h2{font-size:48px;max-width:360px}}
@media(max-width:720px){body{padding:16px 12px}.brand{font-size:19px}.brand-note{display:none}.ui{flex-direction:row;padding:10px;gap:8px}.primary-controls{flex-direction:row;flex:1;flex-wrap:wrap;gap:5px}.primary-controls button{width:auto;flex:1;font-size:11px;padding:8px 5px}.more-btn{width:auto!important;font-size:11px!important;padding:8px!important}.game-hud{left:8px;right:8px;top:8px;padding:7px 8px;gap:2px}.game-hud .badge{font-size:9px;gap:3px}.game-hud .badge span:last-child{font-size:13px}#lives{font-size:10px!important;letter-spacing:0}.game-wrapper{border-radius:18px}.practice-strip{gap:20px;padding:13px;flex-wrap:wrap}.practice-strip>div{gap:8px}.practice-strip .progress-cell{order:3;flex-basis:100%}.game-footer{font-size:8px}.game-footer span:last-child{display:none}#message{font-size:11px;bottom:12px;padding:8px 12px;min-width:120px;text-align:center}#startMenu{padding:22px 16px;align-items:flex-start}#menuBox{padding:0;max-width:440px}.menu-topline{margin-bottom:32px}.menu-brand{font-size:19px}.menu-brand>span{width:34px;height:34px;font-size:23px}.recording-pill{font-size:9px;padding:8px 10px}.menu-hero{max-width:none;padding:0}.menu-eyebrow{font-size:10px;margin-bottom:12px;letter-spacing:2px}#menuBox h2{font-size:37px;max-width:330px;margin-bottom:12px}.menu-intro{font-size:12px;line-height:1.8}.menu-art{position:relative;top:auto;right:auto;width:100%;height:162px;margin:22px 0 18px}.art-word{width:74px;height:86px;border-radius:18px;font-size:39px}.art-word.one{left:12%;top:8px}.art-word.two{right:12%;top:18px}.art-word.three{left:41%;bottom:0}.art-word small{font-size:10px}.art-dot{left:49%;top:0;font-size:28px}.art-orbit{inset:10px 25px}.mode-options{flex-direction:column;gap:12px;margin-top:10px}.mode-choice{padding:21px 18px 19px 72px;border-radius:17px}.mode-symbol{left:18px;top:19px}#menuBox .mode-choice button{font-size:17px}.mode-detail{font-size:11px;margin-top:8px}.menu-bottom{margin-top:16px;align-items:flex-start;gap:8px;flex-direction:column}.menu-tips{gap:13px;font-size:9px}.drawer-body .secondary-controls{display:flex!important;flex-wrap:wrap}#datasetBox{padding:20px}.secondary-controls{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}