:root{--bg: #f6f4ef;--bg-soft: #fbfaf7;--surface: #ffffff;--pinyin: #4f9df7;--pinyin-2: #6fb2ff;--hanzi: #37c390;--hanzi-2: #5ad6a8;--math: #ff9d3d;--math-2: #ffb463;--think: #9887ff;--think-2: #b1a4ff;--correct: #37c390;--wrong: #ff7a90;--ink: #2f3440;--ink-soft: #8a8f9c;--r-sm: 14px;--r-md: 20px;--r-lg: 28px;--r-pill: 999px;--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-5: 24px;--s-6: 32px;--shadow-sm: 0 2px 6px rgba(47, 52, 64, .08);--shadow-md: 0 8px 22px rgba(47, 52, 64, .1);--shadow-lg: 0 16px 40px rgba(47, 52, 64, .14);--shadow-color: 0 10px 24px rgba(79, 157, 247, .28);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}html,body{margin:0;padding:0;min-height:100%}body{font-family:PingFang SC,HarmonyOS Sans SC,Microsoft YaHei,system-ui,-apple-system,Segoe UI,sans-serif;background:radial-gradient(120% 90% at 50% 0%,var(--bg-soft),var(--bg));background-attachment:fixed;color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}#app{min-height:100dvh;display:flex;flex-direction:column;align-items:center}.home{width:100%;max-width:880px;padding:calc(var(--safe-top) + 28px) var(--s-4) calc(var(--safe-bottom) + 56px);text-align:center}.home__title{font-size:clamp(34px,8vw,56px);font-weight:800;letter-spacing:1px;margin:var(--s-3) 0 var(--s-1);background:linear-gradient(120deg,var(--pinyin),var(--think));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.home__subtitle{font-size:clamp(14px,3.5vw,18px);color:var(--ink-soft);margin-bottom:var(--s-6)}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4)}.card{position:relative;border:none;border-radius:var(--r-lg);padding:var(--s-5) var(--s-4);color:#fff;cursor:pointer;box-shadow:var(--shadow-md);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;display:flex;flex-direction:column;align-items:center;gap:var(--s-2);overflow:hidden;isolation:isolate}.card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(160deg,#ffffff47,#fff0);z-index:-1}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.card:active{transform:scale(.97);box-shadow:var(--shadow-sm)}.card__emoji{font-size:clamp(46px,13vw,72px);line-height:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.12))}.card__name{font-size:clamp(19px,5vw,26px);font-weight:700}.card__desc{font-size:clamp(12px,3vw,14px);opacity:.92}.card__stars{margin-top:var(--s-1);font-size:13px;font-weight:600;background:#ffffff3d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);padding:3px 14px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:5px}.card--pinyin{background:linear-gradient(150deg,var(--pinyin-2),var(--pinyin))}.card--hanzi{background:linear-gradient(150deg,var(--hanzi-2),var(--hanzi))}.card--math{background:linear-gradient(150deg,var(--math-2),var(--math))}.card--think{background:linear-gradient(150deg,var(--think-2),var(--think))}.home__title--sub{font-size:clamp(26px,7vw,40px);-webkit-text-fill-color:initial;background:none;color:var(--ink);margin:var(--s-1) 0}.game{width:100%;max-width:680px;padding:0 var(--s-4) calc(var(--safe-bottom) + 40px);display:flex;flex-direction:column;align-items:center;min-height:100dvh}.game__topbar{position:sticky;top:0;z-index:10;width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:calc(var(--safe-top) + 12px) 0 var(--s-3);background:linear-gradient(180deg,var(--bg-soft) 70%,rgba(246,244,239,0))}.btn-back{border:none;background:var(--surface);color:var(--ink);font-size:15px;font-weight:600;padding:10px 20px;min-height:44px;border-radius:var(--r-pill);box-shadow:var(--shadow-sm);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:transform .12s ease,box-shadow .12s ease}.btn-back:active{transform:scale(.95)}.hud{font-size:15px;font-weight:700;color:var(--ink-soft);background:var(--surface);padding:8px 16px;border-radius:var(--r-pill);box-shadow:var(--shadow-sm)}.game__title{font-size:clamp(22px,6vw,30px);font-weight:800;margin:var(--s-4) 0 var(--s-5)}.prompt{font-size:clamp(30px,9vw,54px);font-weight:800;line-height:1.25;margin:var(--s-3) 0 var(--s-5);min-height:1.2em}.prompt small{display:block;font-size:.5em;font-weight:600;color:var(--ink-soft)}.prompt b{color:var(--pinyin)}.options{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4);width:100%;max-width:520px}.option{border:2px solid rgba(47,52,64,.06);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font-size:clamp(26px,8vw,42px);font-weight:800;padding:var(--s-5) var(--s-2);min-height:88px;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .12s ease,box-shadow .12s ease,background .15s ease,color .15s ease,border-color .15s ease}.option small{display:block;font-size:.42em;font-weight:600;color:var(--ink-soft)}.option:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.option:active{transform:scale(.96)}.option.correct{background:var(--correct);border-color:var(--correct);color:#fff;box-shadow:0 10px 24px #37c39052}.option.correct small{color:#ffffffd9}.option.wrong{background:var(--wrong);border-color:var(--wrong);color:#fff;animation:shake .32s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#1e222c6b;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:30;padding:var(--s-4);animation:fade .2s ease}@keyframes fade{0%{opacity:0}to{opacity:1}}.dialog{background:var(--surface);border-radius:var(--r-lg);padding:var(--s-6) var(--s-5);text-align:center;max-width:340px;width:100%;box-shadow:var(--shadow-lg);animation:pop .28s cubic-bezier(.2,.9,.3,1.3)}@keyframes pop{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.dialog__stars{font-size:46px;display:flex;justify-content:center;gap:8px}.dialog__title{font-size:26px;font-weight:800;margin:var(--s-3) 0 var(--s-1);color:var(--ink)}.dialog__text{color:var(--ink-soft);margin-bottom:var(--s-5)}.dialog__buttons{display:flex;gap:var(--s-3);justify-content:center}.btn{border:none;border-radius:var(--r-pill);padding:13px 24px;min-height:48px;font-size:16px;font-weight:700;color:#fff;cursor:pointer;box-shadow:var(--shadow-sm);display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:transform .12s ease,box-shadow .12s ease}.btn:active{transform:scale(.95)}.btn--primary{background:linear-gradient(150deg,var(--hanzi-2),var(--hanzi))}.btn--ghost{background:linear-gradient(150deg,var(--pinyin-2),var(--pinyin))}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);width:100%;max-width:460px}.tile{aspect-ratio:1;border:none;border-radius:var(--r-md);background:linear-gradient(150deg,var(--pinyin-2),var(--pinyin));font-size:clamp(28px,9vw,44px);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:transform .15s ease,background .2s ease,box-shadow .15s ease}.tile:active{transform:scale(.95)}.tile.flipped{background:var(--surface);box-shadow:var(--shadow-md)}.tile.matched{background:linear-gradient(150deg,var(--hanzi-2),var(--hanzi));box-shadow:0 8px 20px #37c3904d}.tile__face{visibility:hidden}.tile.flipped .tile__face,.tile.matched .tile__face{visibility:visible}.bubbles{position:relative;width:100%;max-width:560px;height:min(58dvh,460px);border-radius:var(--r-lg);background:linear-gradient(180deg,#eaf6ff,#d7ecff);box-shadow:inset 0 2px 12px #2f344014;overflow:hidden}.bubble{position:absolute;border:none;border-radius:50%;width:84px;height:84px;font-size:32px;font-weight:800;color:#fff;cursor:pointer;box-shadow:inset 0 -6px 10px #00000026,0 6px 14px #2f34402e}.picture{font-size:clamp(88px,30vw,156px);margin:var(--s-2) 0 var(--s-5);filter:drop-shadow(0 6px 10px rgba(47,52,64,.14))}.count-emoji{font-size:clamp(30px,8vw,46px);line-height:1.45;max-width:520px;margin:var(--s-3) auto var(--s-5);word-break:break-word}.emoji-seq{font-size:clamp(30px,8vw,48px);letter-spacing:8px;margin:var(--s-4) 0 var(--s-5)}.match-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);width:100%;max-width:460px}.match-tile{aspect-ratio:1;border:2px solid rgba(47,52,64,.06);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font-weight:800;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .12s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease}.match-tile--char{font-size:clamp(24px,8vw,38px)}.match-tile--py{font-size:clamp(16px,5vw,24px);color:var(--ink-soft)}.match-tile:active{transform:scale(.94)}.match-tile.sel{border-color:var(--pinyin);box-shadow:0 0 0 3px #4f9df740,var(--shadow-md);transform:translateY(-2px)}.match-tile.wrong{background:var(--wrong);color:#fff;animation:shake .32s ease}.match-tile.matched{visibility:hidden}.maze{display:grid;width:min(90vw,420px);aspect-ratio:1;margin:var(--s-3) auto 0;background:#fff;border:3px solid var(--ink);border-radius:var(--r-sm);overflow:hidden}.maze-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.7em;box-sizing:border-box;border:0 solid var(--ink)}.maze-cell .emoji-icon svg{width:80%;height:80%}.maze-cell.w-n{border-top-width:2px}.maze-cell.w-e{border-right-width:2px}.maze-cell.w-s{border-bottom-width:2px}.maze-cell.w-w{border-left-width:2px}.maze-pad{display:grid;grid-template-columns:repeat(3,60px);grid-auto-rows:60px;gap:var(--s-2);margin:var(--s-5) auto 0}.maze-btn{border:none;border-radius:var(--r-md);background:var(--surface);color:var(--ink);font-size:24px;cursor:pointer;box-shadow:var(--shadow-sm)}.maze-btn:active{transform:scale(.92)}.maze-btn--empty{background:transparent;box-shadow:none}.diff-grid{display:flex;flex-direction:column;gap:var(--s-4);width:100%;max-width:420px;margin:var(--s-4) auto 0}.diff-btn{border:3px solid transparent;border-radius:var(--r-md);background:var(--surface);color:var(--ink);padding:var(--s-4) var(--s-5);min-height:72px;cursor:pointer;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:var(--s-4);font-size:22px;font-weight:800;transition:transform .12s ease,box-shadow .12s ease,border-color .15s ease}.diff-btn__emoji{font-size:34px;line-height:1}.diff-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.diff-btn:active{transform:scale(.97)}.diff-btn--easy.diff-btn--active{border-color:var(--hanzi)}.diff-btn--normal.diff-btn--active{border-color:var(--math)}.diff-btn--hard.diff-btn--active{border-color:var(--wrong)}.diff-btn--active{box-shadow:var(--shadow-md)}.mute-btn{position:fixed;right:calc(env(safe-area-inset-right,0px) + 14px);bottom:calc(var(--safe-bottom) + 14px);z-index:40;width:48px;height:48px;border:none;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-md);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,color .15s ease}.mute-btn:active{transform:scale(.9)}.mute-btn--off{color:var(--ink-soft)}.mute-btn .ui-icon svg{width:22px;height:22px}.emoji-icon,.ui-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.15em;line-height:0}.emoji-icon svg{width:1em;height:1em;display:block}.ui-icon svg{width:1.1em;height:1.1em;display:block;stroke:currentColor}.star--off svg{filter:grayscale(1);opacity:.32}.card__emoji .emoji-icon svg{filter:drop-shadow(0 4px 6px rgba(0,0,0,.14))}@media (min-width: 700px){.grid{gap:var(--s-5)}}@media (hover: none){.card:hover,.option:hover{transform:none;box-shadow:var(--shadow-md)}.option:hover{box-shadow:var(--shadow-sm)}}