:root{--bg:#fffdf8;--surface:#f5f0e6;--text:#1f1b16;--muted:#6b6258;--border:#ddd5c8;--border-strong:#8c8478;--correct:#1f7a5c;--present:#a8761c;--absent:#7a736b;--accent:#1f7a5c;--on-color:#fff;--overlay:#fffdf899;--shadow:0 8px 30px #00000026;--tile:min(3.6rem, calc((100vw - 32px - (var(--cols,2) - 1) * 6px) / var(--cols,2)));--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#16140f;--surface:#221f1a;--text:#f3efe8;--muted:#a39a8d;--border:#3b362f;--border-strong:#6e665a;--correct:#24886a;--present:#a67822;--absent:#45403a;--accent:#24886a;--overlay:#0009;--shadow:0 8px 30px #00000080;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans SC,PingFang SC,sans-serif}[lang^=zh],.tile,.chip{font-family:Noto Sans SC,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}.app{max-width:500px;min-height:100dvh;padding:0 16px max(24px, env(safe-area-inset-bottom));flex-direction:column;margin:0 auto;display:flex}.header{border-bottom:1px solid var(--border);grid-template-columns:44px 1fr 44px;align-items:center;padding:8px 0;display:grid}.header h1{text-align:center;letter-spacing:.02em;margin:0;font-size:1.5rem}.header-side.right{justify-content:flex-end;display:flex}.icon-btn{border:2px solid var(--border-strong);width:36px;height:36px;color:var(--text);cursor:pointer;background:0 0;border-radius:50%;font-size:1.1rem;font-weight:700;line-height:1}.progress{justify-content:center;gap:8px;padding:12px 0 4px;display:flex}.dot{border:2px solid var(--border-strong);border-radius:50%;width:10px;height:10px}.dot.current{border-color:var(--text);transform:scale(1.2)}.dot.solved{background:var(--correct);border-color:var(--correct)}.dot.failed{background:var(--absent);border-color:var(--absent)}.game{flex-direction:column;align-items:center;gap:16px;padding-top:8px;display:flex}.clue{text-align:center;letter-spacing:.1em;-webkit-user-select:all;user-select:all;font-size:clamp(3rem,16vw,4.5rem);line-height:1.2}.board{gap:6px;display:grid}.row{justify-content:center;gap:6px;display:flex}.tile{width:var(--tile);height:var(--tile);border:2px solid var(--border);font-size:calc(var(--tile) * .55);-webkit-user-select:none;user-select:none;color:var(--text);place-items:center;font-weight:700;display:grid}.tile.filled{border-color:var(--border-strong);animation:.1s ease-out pop}.tile.correct,.tile.present,.tile.absent{color:var(--on-color);border-color:#0000;animation:none}.tile.correct{--c:var(--correct);background:var(--correct)}.tile.present{--c:var(--present);background:var(--present)}.tile.absent{--c:var(--absent);background:var(--absent)}.tile.flip{animation:.5s ease-in-out both flip}.example .tile{--tile:2.6rem}@keyframes flip{0%{border-color:var(--border-strong);color:var(--text);background:0 0;transform:rotateX(0)}49%{border-color:var(--border-strong);color:var(--text);background:0 0}50%{background:var(--c);color:var(--on-color);border-color:#0000;transform:rotateX(-90deg)}to{background:var(--c);color:var(--on-color);border-color:#0000;transform:rotateX(0)}}@keyframes pop{50%{transform:scale(1.1)}}.row.pending .tile{animation:.9s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.45}}.row.shake{animation:.4s ease-in-out shake}@keyframes shake{20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.guess-form{gap:8px;width:100%;display:flex}.guess-input{border:2px solid var(--border-strong);background:var(--bg);min-width:0;color:var(--text);border-radius:8px;outline:none;flex:1;padding:12px 14px;font-size:1.25rem}.guess-input:focus{border-color:var(--text)}.guess-input::placeholder{color:var(--muted);font-size:1rem}.btn{font:inherit;cursor:pointer;background:var(--surface);color:var(--text);border:none;border-radius:8px;padding:12px 20px;font-weight:700;text-decoration:none;display:inline-block}.btn.primary{background:var(--accent);color:var(--on-color)}.btn:disabled{opacity:.6;cursor:default}.btn.wide{width:100%}.btn:focus-visible,.icon-btn:focus-visible{outline:3px solid var(--present);outline-offset:2px}.tried{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.chip{text-align:center;min-width:2rem;color:var(--on-color);border-radius:6px;padding:4px 6px;font-weight:700}.chip.correct{background:var(--correct)}.chip.present{background:var(--present)}.chip.absent{background:var(--absent);opacity:.7}.guesses-left{font-size:.85rem}.muted{color:var(--muted)}.reveal{text-align:center;background:var(--surface);border-radius:12px;width:100%;padding:20px;animation:.35s ease-out both rise}.reveal-head{font-size:1.1rem;font-weight:700}.reveal-head .muted{font-size:.95rem;font-weight:400}.reveal-answer{margin-top:8px;font-size:3rem;font-weight:700}.reveal-pinyin{color:var(--muted);font-size:1.2rem}.reveal-meaning{margin:10px 0 18px}@keyframes rise{0%{opacity:0;transform:translateY(12px)}}.summary{padding-top:8px}.summary h2{text-align:center;margin:8px 0 16px}.summary h3{margin:28px 0 8px}.share-preview{background:var(--surface);white-space:pre-wrap;word-break:break-word;-webkit-user-select:all;user-select:all;border-radius:12px;margin:0 0 12px;padding:14px 16px;font-family:inherit;font-size:1rem;line-height:1.5}.answers{margin:0;padding:0;list-style:none}.answers li{border-bottom:1px solid var(--border);grid-template-columns:auto 1fr auto;grid-template-areas:"emoji answer badge""emoji pinyin pinyin""emoji meaning meaning";align-items:center;column-gap:12px;padding:12px 0;display:grid}.answers .emoji{grid-area:emoji;font-size:1.8rem}.answers .answer{grid-area:answer;font-size:1.4rem;font-weight:700}.answers .pinyin{color:var(--muted);grid-area:pinyin}.answers .meaning{color:var(--muted);grid-area:meaning;font-size:.9rem}.badge{color:var(--on-color);border-radius:999px;grid-area:badge;padding:2px 8px;font-size:.85rem;font-weight:700}.badge.ok{background:var(--correct)}.badge.miss{background:var(--absent)}.overlay{background:var(--overlay);z-index:10;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal{background:var(--bg);box-shadow:var(--shadow);border-radius:12px;width:100%;max-width:420px;max-height:calc(100dvh - 32px);padding:24px;position:relative;overflow-y:auto}.modal h2{margin-top:0}.modal .close{border:none;font-size:1.6rem;position:absolute;top:12px;right:12px}.example{margin:12px 0}.example .row{justify-content:flex-start}.example p{margin:6px 0 12px}.toast{background:var(--text);color:var(--bg);z-index:20;text-align:center;border-radius:8px;max-width:calc(100vw - 32px);padding:12px 16px;font-weight:700;animation:.2s ease-out rise;position:fixed;top:72px;left:50%;transform:translate(-50%)}.center{text-align:center;padding:48px 0}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:1ms!important;animation-delay:0s!important}}