.mode-tabs{gap:24px}.mode-tabs button{white-space:nowrap}.repeat{display:flex;gap:13px;letter-spacing:1px}.repeat span{padding:3px 5px;border-radius:8px;transition:background .12s,color .12s}.spoken{background:#dde9c7!important;color:#386641!important}.beat-dots{display:flex;justify-content:center;gap:15px;margin:13px 0 7px}.beat-dots i{width:12px;height:12px;background:#d9dfc7;border-radius:50%;transition:background .1s,transform .1s}.beat-dots i.active{background:#659456;transform:scale(1.3)}#play-status{color:#638252;font-size:13px;text-align:center;min-height:25px}.chant-controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px;margin-top:13px}.chant-controls .soft-button{padding:9px 14px;border:1px solid #dfdfc8;background:#fffdf5;border-radius:12px;font-size:12px}.chant-controls label{display:flex;align-items:center;gap:5px;font-size:11px;color:#8c826d}.chant-controls select{background:#fffdf5;border:1px solid #ded9c7;border-radius:8px;padding:7px;font:inherit;color:inherit}.chant-controls input,.parent-notes input{accent-color:var(--green)}.card-parent{margin:0 24px 18px;padding:12px 15px;border:1px dashed #ded6c5;border-radius:13px;font-size:11px;color:#99846e;line-height:1.9}.card-parent summary{cursor:pointer}.card-parent p{margin:8px 0}.card-parent .soft-button{background:#f2e9db;padding:6px 12px;border-radius:8px;font-size:11px}.tone-trace{margin:0 24px 20px;background:#fcf7ec;padding:13px 15px;border-radius:13px}.tone-trace>b{font-size:11px;color:#9b8165}.tone-trace p{font-size:10px;color:#a38e76;margin:10px 0 0}#tone-paths{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}#tone-paths>div{display:flex;flex-direction:column;text-align:center;align-items:center}#tone-paths svg{width:100%;max-width:160px;background:#fffdf7;border:1px solid #ede2ce;border-radius:10px;touch-action:none;cursor:crosshair;color:#bd9876}.tone-guide{fill:none;stroke:#cbbca6;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 12}.tone-ink{fill:none;stroke:#719b65;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}#tone-paths circle{fill:#bd9876}#tone-paths span{font-family:'Comic Sans MS',sans-serif;font-size:17px;color:#87644a;margin-top:4px}#tone-paths small{font-size:9px;color:#ac9680;margin-top:3px}.game-card{position:relative;min-height:335px;padding:28px 26px;background:#fffefa;border:1px solid var(--line);border-radius:25px;text-align:center;box-shadow:0 8px 30px #8c604b07}.game-card h3{font-size:22px;margin:16px 0 15px}.game-card p{font-size:13px;line-height:1.9;color:#9b866f;max-width:450px;margin:10px auto 20px}.game-card .primary-button{font-size:15px;padding:13px 28px}.game-card .soft-button{font-size:12px;padding:12px 16px}.game-flower{display:block;font-size:90px;line-height:1.1;color:#dca552;text-shadow:2px 3px #f8e4bf}.sound-symbol{display:block;font-size:54px;color:#829c68;margin:12px auto}.round-progress{display:flex;justify-content:center;gap:10px}.round-progress i{width:10px;height:10px;background:#eadfce;border-radius:50%}.round-progress i.done{background:#769e67}.round-progress i.now{outline:2px solid #bfa77b;outline-offset:3px}.answer-options{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:580px;margin:22px auto}.answer-options button{font-family:'Comic Sans MS',sans-serif;font-size:48px;background:#fff5de;border:2px solid #e9d6b2;border-radius:20px;padding:22px 10px;color:#866548;min-height:103px}.answer-options button:hover{background:#e9f1db;border-color:#8baa72}.game-bottom{display:flex;gap:10px;justify-content:center;border-top:1px solid #eee4d4;margin-top:26px;padding-top:14px}.game-note{text-align:center;font-size:10px;color:#b49d83;margin:14px 0 26px}.game-card .art-window{margin:18px auto;max-width:210px;width:50%}#guess-answer>b,#feedback-pinyin{display:block;font-family:'Comic Sans MS',sans-serif;font-size:51px;color:#84613d;letter-spacing:4px;margin:12px 0}.answer-ratings{display:flex;gap:10px;justify-content:center}.answer-ratings button{padding:12px 22px;background:#f6e9d6;border-radius:13px;font-size:14px}.answer-ratings button:last-child{background:#3d7856;color:white}#round-sounds{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:20px 0}#round-sounds span{font-family:'Comic Sans MS',sans-serif;font-size:28px;background:#f3efd9;border-radius:12px;padding:10px 18px}.round-end{background:linear-gradient(135deg,#fffdf6,#f5f5e2)}.round-end .tiny-label{display:block;margin-top:10px}.round-end h3{font-size:28px;color:#9b7644}.bounce{animation:letter-hop .32s ease-out}@keyframes letter-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-8px)}}.no-motion *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.no-motion .beat-dots i.active{transform:none}.rating-area{margin-top:0}.record-panel{margin-top:25px}@media(max-width:780px){.intro{margin-bottom:14px}.intro h1{font-size:23px}.eyebrow{font-size:9px}.mode-tabs{gap:0;justify-content:space-between}.mode-tabs button{font-size:12px;padding:10px 0 12px}#categories{gap:5px;margin-bottom:14px}#categories button{flex:1 0 calc((100% - 15px)/4);padding:7px 5px;font-size:10px}#categories button small{margin-left:2px;font-size:9px}.learning-stage{padding:12px;gap:10px}.illustration-panel{min-height:170px}.letter-panel .pinyin-grid{height:91px}.letter-panel #pinyin{font-size:72px}.tone-row{font-size:18px;gap:6px}.mnemonic-box{padding:12px 13px;margin:0 12px 13px}#mnemonic{font-size:22px}.repeat{font-size:24px;gap:5px}.repeat span{padding:2px 4px}#play-status{font-size:11px}.chant-controls{gap:7px}.chant-controls .soft-button{padding:9px 12px;font-size:11px}.chant-controls label{font-size:10px}.beat-dots{margin:10px 0 5px;gap:13px}.beat-dots i{width:10px;height:10px}.card-parent{margin:0 12px 12px;padding:10px 12px;font-size:10px}.tone-trace{margin:0 12px 13px;padding:10px 12px}#tone-paths{gap:6px}.tone-trace p{font-size:9px}.game-card{padding:22px 16px;min-height:340px;border-radius:20px}.game-card h3{font-size:18px}.game-card p{font-size:12px}.game-flower{font-size:75px}.answer-options{gap:9px;margin:16px auto}.answer-options button{font-size:38px;min-height:85px;padding:17px 5px;border-radius:15px}.game-bottom{gap:2px;margin-top:20px}.game-card .soft-button{font-size:11px;padding:11px 13px}.answer-ratings{gap:7px}.answer-ratings button{flex:1;padding:12px 8px;font-size:13px}#guess-answer>b{font-size:35px;letter-spacing:2px}.game-card .art-window{max-width:155px;margin:15px auto}.round-end h3{font-size:24px}#round-sounds span{font-size:24px;padding:9px 14px}.record-panel{margin-top:18px}}@media(max-width:370px){.intro h1{font-size:20px}.mode-tabs button{font-size:11px}.repeat{font-size:22px;gap:2px}#mnemonic{font-size:20px}.answer-options button{font-size:34px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.beat-dots i.active{transform:none}}

.listen-button{min-height:32px;padding:4px 10px;border-radius:10px;background:#e6edd9;color:#507242;font-weight:600;font-size:11px}.chant-controls button{min-height:30px}
.game #round-progress{display:none}
.game-journey{display:flex;gap:12px;justify-content:center;align-items:center;margin:0 auto 22px;position:relative;max-width:450px}
.game-journey:before{content:'';position:absolute;left:20px;right:20px;top:50%;border-top:3px dashed #d9d9b5;z-index:0}
.game-journey span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#f5f0e0;font-size:27px;position:relative;border:2px solid #e5ddc5}
.game-journey .arrived{background:#e6f1dd;border-color:#91b47d}
.game-journey .current-stop{background:#fff0d0;border-color:#d6a756;box-shadow:0 0 0 4px #fff4dd}
.train-scene{display:flex;justify-content:center;align-items:center;gap:17px;margin:14px 0 20px}
.train-driver{display:grid;place-items:center;font-size:56px;background:#f3ebd9;width:90px;height:90px;border-radius:24px;border:2px solid #e3d2b4}
.scene-label{color:#73945c;font-size:12px;letter-spacing:2px;font-weight:600}
.train-scene h3{font-size:20px;margin:9px 0 0}.train-scene>div{text-align:left}
.train-options{position:relative;gap:18px;padding-bottom:18px;margin:20px auto 14px}
.train-options:after{content:'';position:absolute;left:0;right:0;bottom:0;border-top:4px double #aa9a7f}
.train-options button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#edf3e3;border:2px solid #a2bc87;padding:18px 8px;border-radius:16px;min-height:118px;opacity:1}
.train-options button:nth-child(2){background:#fff0d5;border-color:#dabb7c}.train-options button:nth-child(3){background:#e8eff6;border-color:#a4bacd}
.train-options button:before,.train-options button:after{content:'';width:17px;height:17px;background:#7f735f;border:4px solid #d8c9b2;border-radius:50%;position:absolute;bottom:-10px;left:19%}.train-options button:after{left:auto;right:19%}
.train-options b{font-weight:600;line-height:1.15}.train-options small{font-family:inherit;font-size:11px;font-weight:400;letter-spacing:1px;margin-top:8px;color:#9d8a70}
.train-options button:disabled{filter:grayscale(.25);color:#a6957f;opacity:.65}.train-options .missed{border-style:dashed;box-shadow:inset 0 0 0 3px #df977c40}
.train-options button:not(:disabled):hover{transform:translateY(-4px);box-shadow:0 5px 12px #8eaa7730}
.puzzle-picture{--puzzle-inner:190px;position:relative;display:grid;place-items:center;width:200px;height:200px;margin:16px auto 12px;border:5px solid #f0d3ac;border-radius:23px;overflow:hidden;background:#fffdfa}
.game-card .puzzle-picture .art-window{margin:0;width:min(100%,calc(var(--puzzle-inner) * var(--ratio,1)));max-width:none;aspect-ratio:var(--ratio,1);height:auto}
.picture-covers{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:3px;pointer-events:none}
.picture-covers span{display:grid;place-items:center;background:#90ad77;color:#fffdf0;font-family:'Comic Sans MS',sans-serif;font-size:45px;transition:opacity .25s,transform .25s}
.picture-covers span:nth-child(2){background:#dab272}.picture-covers span:nth-child(3){background:#d68d73}.picture-covers span:nth-child(4){background:#91adb5}
.picture-covers[data-open="1"] span:nth-child(1),.picture-covers[data-open="2"] span:nth-child(-n+2),.picture-covers[data-open="3"] span:nth-child(-n+3){opacity:0;transform:scale(.8)}
#guess-hint{min-height:26px;margin:10px auto;font-size:12px;color:#759159}#guess-phrase{font-size:24px;margin:13px 0 0;color:#76573f}#guess-instruction{margin:8px auto 14px}
#guess-pinyin{display:flex;justify-content:center;gap:16px;margin:10px 0 12px;font-size:44px}
.feedback-cheer{display:block;font-size:19px;color:#4a8053;font-weight:600;margin-top:12px}#answer-feedback .art-window{width:180px;max-width:180px}#feedback-pinyin{font-size:48px;margin:8px 0}#feedback-phrase{margin:8px auto 15px}#answer-feedback .primary-button{margin-left:8px}
.game-card .game-bottom{margin-top:22px}.game-card .game-flower{font-size:80px;margin:10px 0 22px}
@media(max-width:780px){.game-journey{gap:9px;margin-bottom:18px}.game-journey span{width:41px;height:41px;font-size:23px}.train-scene{gap:12px;margin:10px 0 18px}.train-driver{width:66px;height:66px;font-size:40px;border-radius:18px}.train-scene h3{font-size:16px}.scene-label{font-size:10px;letter-spacing:1px}.train-options{gap:10px;margin-top:20px}.train-options button{padding:17px 4px;min-height:100px;font-size:36px}.train-options small{font-size:9px;letter-spacing:0}.train-options button:before,.train-options button:after{width:15px;height:15px;border-width:3px}.puzzle-picture{--puzzle-inner:160px;width:170px;height:170px;margin-top:12px}#guess-phrase{font-size:22px}#guess-pinyin{font-size:35px;gap:9px}.feedback-cheer{font-size:16px}.game-card h3{line-height:1.5}#answer-feedback .art-window{width:145px;max-width:145px}#answer-feedback .primary-button{display:flex;margin:12px auto 0}.game-bottom .soft-button{padding:10px 8px}.game-card{padding:20px 14px}}
@media(max-width:780px){
 .intro .progress-pill{display:none}.intro h1{font-size:21px}.intro{margin-bottom:12px}
 #categories{display:none}
 .mode-tabs{margin-bottom:14px}.section-bar{margin-bottom:12px}
 .learning-stage{grid-template-columns:1fr;gap:12px;padding:12px}
 .illustration-panel{min-height:auto;padding:14px 10px}
 .art-window{max-width:210px;margin:0 auto}
 .letter-panel{padding:15px 12px}
 .letter-panel .pinyin-grid{height:88px}
 .letter-panel #pinyin{font-size:74px}
 .listen-button{font-size:11px;min-height:32px;padding:4px 10px}
 .mnemonic-header{letter-spacing:0}
 .mnemonic-line{margin-top:4px}
 #play-status{margin-top:5px;min-height:18px}
 .chant-controls{gap:6px;margin-top:8px}
 .chant-controls .soft-button{min-height:34px;padding:6px 10px;font-size:11px}
}
.pinyin-grid{cursor:pointer;user-select:none;transition:transform .12s,background-color .15s}
.pinyin-grid:hover{background-color:#f9edd8}
.pinyin-grid:active{transform:scale(.98)}
.pinyin-grid::after{content:'🔊';position:absolute;top:4px;right:8px;font-size:12px;opacity:.5;transition:opacity .15s,transform .15s;pointer-events:none}
.pinyin-grid:hover::after{opacity:1;transform:scale(1.2)}
.tone-row span{cursor:pointer;user-select:none;padding:2px 7px;border-radius:7px;transition:background-color .15s,color .15s,transform .12s}
.tone-row span:hover{background:#f3e8d5;transform:translateY(-2px)}
.tone-row span:active{transform:scale(.95)}
.tone-row span.active-tone{background:#dde9c7!important;color:#386641!important;font-weight:700;transform:scale(1.18)}
.mnemonic-box{cursor:pointer;user-select:none;transition:transform .12s,background-color .15s,border-color .15s,box-shadow .15s}
.mnemonic-box:hover{background-color:#fbf5e8;border-color:#dfcdb3;box-shadow:0 4px 16px rgba(140,96,75,0.08)}
.mnemonic-box:active{transform:scale(.99)}
.mnemonic-box.playing{background-color:#f8faf2;border-color:#9cb88d;box-shadow:0 4px 18px rgba(101,148,86,0.14)}
.mnemonic-badge{font-size:11px;color:#507242;display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:10px;background:#eef4e6;transition:background-color .15s,color .15s}
.mnemonic-box.playing .mnemonic-badge{background:#659456;color:#fff}
.mnemonic-box.concealed{cursor:default}
.mnemonic-box.concealed .mnemonic-badge{visibility:hidden}
.chant-controls{cursor:default}
.chant-controls label,.chant-controls select,.chant-controls input{cursor:pointer}
.view-toggles{display:flex;gap:6px;align-items:center}
.view-toggles .soft-button{padding:6px 12px;font-size:12px;border-radius:10px;border:1px solid #e0d5c1;background:#fffdf7;color:#856f57;cursor:pointer;transition:all .15s}
.view-toggles .soft-button:hover{background:#f6eedd;border-color:#cfbeaa}
.view-toggles .soft-button.active{background:#659456;color:#fff;border-color:#568248;font-weight:600;box-shadow:0 2px 8px rgba(101,148,86,0.25)}
.thumb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:14px 0 28px}
.thumb-card{display:flex;flex-direction:column;background:#fffefa;border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:0 4px 16px rgba(140,96,75,0.06);transition:transform .15s,box-shadow .15s,border-color .15s,background-color .15s}
.thumb-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(140,96,75,0.1);border-color:#dfcdb3}
.thumb-card.playing{border-color:#729766;background:#f8faf2;box-shadow:0 6px 24px rgba(101,148,86,0.2)}
:root{--thumb-h:190px}
.thumb-art{position:relative;overflow:hidden;border-radius:14px;background:#fdfaf3;border:1px solid #ebdccb;cursor:pointer;user-select:none;height:var(--thumb-h);width:calc(var(--thumb-h) * var(--ratio, 1));max-width:100%;margin:0 auto;transition:transform .12s,filter .15s,box-shadow .15s}
.thumb-art img{position:absolute;pointer-events:none;transition:transform .2s}
.thumb-art:hover{filter:brightness(1.02)}
.thumb-art:hover img{transform:scale(1.03)}
.thumb-art:active{transform:scale(0.98)}
.thumb-card.playing .thumb-art{border-color:#729766;box-shadow:0 0 0 3px rgba(114,151,102,0.35)}
.thumb-play-tag{position:absolute;right:8px;bottom:8px;background:rgba(255,255,255,0.92);backdrop-filter:blur(4px);color:#507242;padding:4px 10px;border-radius:10px;font-size:11px;font-weight:600;display:flex;align-items:center;gap:4px;box-shadow:0 2px 10px rgba(0,0,0,0.1);pointer-events:none;transition:background .15s,color .15s}
.thumb-card.playing .thumb-play-tag{background:#659456;color:#fff}
.thumb-card[data-id="rule-易混字母"] .thumb-play-tag{left:50%;right:auto;transform:translateX(-50%);bottom:3px;white-space:nowrap}
.thumb-body{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.thumb-title-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.thumb-visual{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;min-width:0}
.thumb-visual .thumb-art{margin:0;height:auto;width:100%;max-width:calc(var(--thumb-h) * var(--ratio,1));justify-self:center}
.thumb-py{font-family:'Comic Sans MS',sans-serif;font-size:clamp(48px,5vw,80px);font-weight:700;color:#84613d;cursor:pointer;transition:color .12s;min-width:72px;padding:6px;line-height:1.2;text-align:center}
.thumb-rule .thumb-py{font-family:inherit;font-size:24px;max-width:110px;min-width:0}
.thumb-py:hover{color:#507242}
.thumb-mnemonic{font-size:14px;font-weight:600;color:#4f3f30;line-height:1.4;flex:1;text-align:center}
.thumb-tones{font-size:15px;color:#8c826d;display:flex;gap:7px;flex-wrap:wrap;padding:2px 0}
.thumb-tones span{cursor:pointer;padding:2px 6px;border-radius:6px;transition:background .12s,color .12s}
.thumb-tones span:hover{background:#f1e6d4;color:#386641}
.thumb-tones span.active-tone{background:#dde9c7!important;color:#386641!important;font-weight:700}
.thumb-bottom-row{display:flex;justify-content:flex-end;align-items:center;margin-top:6px;padding-top:6px;border-top:1px dashed #eee3d3}
.thumb-detail-btn{background:none;border:none;font-size:11px;color:#9c8a74;cursor:pointer;padding:3px 6px;border-radius:6px;transition:all .12s}
.thumb-detail-btn:hover{background:#f5ece0;color:#6a4f38}
@media(max-width:780px){
  :root{--thumb-h:135px}
  .thumb-grid{grid-template-columns:1fr;gap:10px;margin:10px 0 20px}
  .thumb-card{padding:10px;border-radius:15px}
  .thumb-py{font-size:56px;min-width:76px}
  .thumb-visual{gap:12px}
  .thumb-mnemonic{font-size:12px}
  .thumb-tones{font-size:13px;gap:4px}
  .thumb-tones span{padding:1px 4px}
  .thumb-play-tag{padding:3px 7px;font-size:10px;right:5px;bottom:5px}
  .view-toggles .soft-button{padding:5px 9px;font-size:11px}
}
@media(max-width:370px){
  :root{--thumb-h:110px}
  .thumb-grid{gap:7px}
  .thumb-card{padding:8px}
  .thumb-py{font-size:48px;min-width:66px}
  .thumb-mnemonic{font-size:11px}
  .thumb-tones{font-size:12px;gap:2px}
}