.game-hud{display:grid;gap:.08rem;min-width:5.4rem;padding:.38rem .58rem;border:1px solid var(--line,rgba(255,255,255,.16));border-radius:999px;background:var(--panel,#17221d);color:var(--text,#eef4ef);font:inherit;cursor:pointer}
.game-hud-level{font-size:.72rem;font-weight:800;line-height:1}
.game-hud-flow{color:var(--accent,#e6a15c);font-size:.57rem;letter-spacing:.08em;white-space:nowrap}
.game-hud.floating{position:fixed;z-index:20;top:1rem;right:1rem}
.game-center{width:min(92vw,620px);max-height:88vh;padding:clamp(1.25rem,4vw,2rem);border:1px solid var(--line,rgba(255,255,255,.16));border-radius:1.6rem;background:var(--panel,#17221d);color:var(--text,#eef4ef);box-shadow:0 28px 90px rgba(0,0,0,.45)}
.game-center::backdrop{background:rgba(4,10,7,.7);backdrop-filter:blur(7px)}
.game-center h2{margin:.2rem 2rem 1.2rem 0;font-size:clamp(1.55rem,5vw,2.2rem)}
.game-center-close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;border:1px solid var(--line,rgba(255,255,255,.16));border-radius:50%;background:transparent;color:inherit;font-size:1.5rem;cursor:pointer}
.game-level-line{display:grid;grid-template-columns:auto 1fr auto;gap:.65rem;align-items:baseline}
.game-level-line span{color:var(--muted,#9aa9a0)}
.game-level-line small{font-weight:700;color:var(--accent,#e6a15c)}
.game-level-track{height:.7rem;margin:.55rem 0 1.2rem;overflow:hidden;border-radius:999px;background:rgba(128,145,135,.18)}
.game-level-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#237866,#e1a255)}
.journey-seals{display:grid;grid-template-columns:repeat(8,1fr);gap:.4rem;margin:1.2rem 0}
.journey-seal{display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--line,rgba(255,255,255,.16));border-radius:50%;color:var(--muted,#9aa9a0);opacity:.42}
.journey-seal.earned{border-color:var(--accent,#e6a15c);background:rgba(216,139,61,.13);color:var(--accent,#e6a15c);opacity:1;box-shadow:0 0 22px rgba(216,139,61,.12)}
.game-center-section{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line,rgba(255,255,255,.16))}
.game-center-section h3,.game-center-section p{margin:.25rem 0}
.game-center-section p,.game-center-note{color:var(--muted,#9aa9a0)}
.intensity-options{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin-top:1rem}
.intensity-options button{display:grid;gap:.2rem;padding:.75rem .45rem;border:1px solid var(--line,rgba(255,255,255,.16));border-radius:1rem;background:transparent;color:inherit;font:inherit;font-weight:750;cursor:pointer}
.intensity-options button small{color:var(--muted,#9aa9a0);font-size:.7rem;font-weight:500}
.intensity-options button.selected{border-color:var(--accent,#e6a15c);background:rgba(216,139,61,.13)}
.game-center-note{margin:1.2rem 0 0;font-size:.85rem}
.game-toast{position:fixed;z-index:100;left:50%;bottom:1.4rem;max-width:min(90vw,32rem);padding:.8rem 1.1rem;border:1px solid rgba(230,161,92,.55);border-radius:999px;background:#17221d;color:#f4eee2;font-weight:750;box-shadow:0 18px 55px rgba(0,0,0,.34);opacity:0;transform:translate(-50%,18px);transition:.28s ease}
.game-toast.visible{opacity:1;transform:translate(-50%,0)}
.microgame-view{max-width:780px;margin:0 auto;animation:game-arrival .35s ease both}
.microgame-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.microgame-header h1{margin:.12rem 0}
.microgame-symbol{display:grid;place-items:center;width:4rem;height:4rem;border:1px solid rgba(216,139,61,.38);border-radius:1.25rem;background:rgba(216,139,61,.11);color:var(--accent,#e6a15c);font-family:"Noto Serif SC","Songti SC",serif;font-size:2rem}
.microgame-progress{margin:1rem 0 1.35rem;padding:.75rem 1rem;border:1px solid var(--line,rgba(255,255,255,.13));border-radius:1rem;background:rgba(128,145,135,.05)}
.microgame-progress .game-level-track{margin:.38rem 0 0;height:.42rem}
.microgame-body{display:grid;justify-items:center;gap:1rem;text-align:center}
.microgame-body h2{margin:.3rem 0 0;font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(2rem,10vw,5rem)}
.microgame-prompt{margin:0;color:var(--muted,#9aa9a0)}
/* A standing instruction, not the content. Sized as a headline it was the largest thing
   on screen - above the character the learner has to act on - and pushed the answers
   into the bottom third. Games whose heading really is the content keep the large form. */
.microgame-body h2.microgame-instruction{margin:.1rem 0 0;font-family:inherit;font-size:clamp(1.15rem,4.4vw,1.5rem);font-weight:750;line-height:1.25}
.microgame-feedback{min-height:1.5rem;margin:.1rem 0;color:var(--text,#eef4ef);font-weight:650}
.rhythm-track{--beat-ms:625ms;position:relative;width:min(100%,31rem);height:2.65rem;overflow:hidden;border:1px solid var(--line,rgba(255,255,255,.16));border-radius:999px;background:linear-gradient(90deg,rgba(35,120,102,.08),rgba(230,161,92,.12),rgba(35,120,102,.08));transition:border-color .12s ease,box-shadow .12s ease}
.rhythm-track::before{content:"";position:absolute;z-index:1;top:.28rem;bottom:.28rem;left:50%;width:2px;border-radius:2px;background:var(--accent,#e6a15c);box-shadow:0 0 16px rgba(230,161,92,.55)}
.rhythm-track i{position:absolute;inset:50% .8rem auto;height:1px;background:rgba(128,145,135,.28)}
.rhythm-track span{position:absolute;top:50%;left:.75rem;width:1rem;height:1rem;border-radius:50%;background:var(--jade,#237866);box-shadow:0 0 0 .3rem rgba(35,120,102,.14);transform:translateY(-50%)}
.rhythm-track.running span{animation:rhythm-runner var(--beat-ms) linear infinite}
.rhythm-track.is-beat{border-color:rgba(230,161,92,.7);box-shadow:0 0 0 .2rem rgba(230,161,92,.08)}
.rhythm-tone-grid{display:grid;grid-template-columns:repeat(5,minmax(4rem,1fr));gap:.5rem;width:100%}
.rhythm-tone-grid button,.rhythm-word-grid button,.rhythm-piece-grid button{display:grid;place-items:center;gap:.3rem;min-height:5rem;padding:.65rem;border:1px solid var(--line,rgba(255,255,255,.16));border-radius:1rem;background:rgba(128,145,135,.06);color:inherit;font:inherit;cursor:pointer}
.rhythm-tone-grid button:hover,.rhythm-word-grid button:hover,.rhythm-piece-grid button:hover{border-color:var(--accent,#e6a15c)}
.rhythm-tone-grid svg{width:100%;height:2.6rem}.rhythm-tone-grid svg path{stroke:rgba(128,145,135,.3)}.rhythm-tone-grid svg polyline{fill:none;stroke:var(--accent,#e6a15c);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.rhythm-tone-grid small,.rhythm-word-grid small,.rhythm-piece-grid small{color:var(--muted,#9aa9a0);font-size:.72rem}
.rhythm-word-grid,.rhythm-piece-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;width:min(100%,34rem)}
.rhythm-word-grid b,.rhythm-piece-grid b{font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(1.75rem,8vw,3rem)}
.rhythm-sentence-slots{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;min-height:4rem}
.rhythm-sentence-slots span{display:grid;place-items:center;min-width:3.2rem;min-height:3.2rem;padding:.25rem .55rem;border-bottom:2px solid rgba(128,145,135,.35);color:var(--muted,#9aa9a0);font-family:"Noto Serif SC","Songti SC",serif;font-size:2rem;transition:.2s ease}
.rhythm-sentence-slots span.filled{border-color:var(--accent,#e6a15c);color:var(--text,#eef4ef);transform:translateY(-.15rem)}
.rhythm-shadow-pinyin{margin:0;color:var(--accent,#e6a15c);font-size:clamp(1.25rem,5vw,1.75rem);font-weight:750}
.rhythm-shadow-contours{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;width:100%}
.rhythm-shadow-contours>div{display:grid;grid-template-rows:auto 2.2rem auto;place-items:center;min-width:5rem;padding:.45rem .65rem;border:1px solid var(--line,rgba(255,255,255,.14));border-radius:.85rem}
.rhythm-shadow-contours>div{transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
.rhythm-shadow-contours>div.is-speaking{transform:translateY(-.18rem) scale(1.04);border-color:var(--accent,#e6a15c);background:rgba(230,161,92,.14);box-shadow:0 .45rem 1.4rem rgba(230,161,92,.14)}
.rhythm-shadow-contours>div.is-speaking b,.rhythm-shadow-contours>div.is-speaking small{color:var(--accent,#e6a15c)}
.rhythm-shadow-contours>div.is-speaking svg polyline{stroke:var(--accent,#e6a15c)}
.rhythm-shadow-contours b{font-family:"Noto Serif SC","Songti SC",serif;font-size:1.6rem}.rhythm-shadow-contours svg{width:4.5rem;height:2.2rem}.rhythm-shadow-contours svg path{stroke:rgba(128,145,135,.25)}.rhythm-shadow-contours svg polyline{fill:none;stroke:var(--jade,#237866);stroke-width:5;stroke-linecap:round}.rhythm-shadow-contours small{color:var(--muted,#9aa9a0)}
.rhythm-shadow-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.spitfire-beat-card{display:grid;place-items:center;gap:.35rem;width:min(100%,30rem);min-height:16rem;padding:1.2rem;border:1px solid var(--line,rgba(255,255,255,.16));border-radius:1.5rem;background:radial-gradient(circle at 50% 35%,rgba(230,161,92,.12),transparent 55%),rgba(128,145,135,.05);color:inherit;font:inherit;cursor:pointer}
.spitfire-beat-card>small,.spitfire-beat-card>span{color:var(--muted,#9aa9a0)}
.spitfire-beat-card>strong{font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(5rem,24vw,9rem);line-height:1}
.spitfire-beat-card>div{display:grid;gap:.3rem}.spitfire-beat-card>div b{color:var(--accent,#e6a15c);font-size:1.35rem}.spitfire-beat-card>div span{font-size:1.1rem}.spitfire-beat-card>div small{max-width:24rem;color:var(--muted,#9aa9a0);line-height:1.45}
.rhythm-arcade{width:min(100%,760px);margin:0 auto;padding:.25rem;animation:game-arrival .35s ease both}
.rhythm-arcade>header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.rhythm-arcade>header h1{margin:.15rem 0;font-family:var(--serif);font-size:clamp(2.2rem,9vw,4.2rem)}
.rhythm-arcade>header p:not(.eyebrow){max-width:34rem;margin:.35rem 0;color:var(--muted,#9aa9a0);line-height:1.55}
.rhythm-arcade>header>span{display:grid;place-items:center;width:4.5rem;aspect-ratio:1;border:1px solid rgba(230,161,92,.4);border-radius:1.25rem;background:rgba(230,161,92,.1);color:var(--accent,#e6a15c);font-family:"Noto Serif SC","Songti SC",serif;font-size:2.3rem}
.rhythm-arcade-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}
.rhythm-arcade-grid button{display:grid;grid-template-columns:3.1rem 1fr;grid-template-rows:auto auto;gap:.15rem .8rem;align-items:center;min-height:6rem;padding:.85rem 1rem;border:1px solid var(--line,rgba(255,255,255,.16));border-radius:1.1rem;background:rgba(128,145,135,.05);color:inherit;font:inherit;text-align:left;cursor:pointer}
.rhythm-arcade-grid button:not(:disabled):hover{border-color:var(--accent,#e6a15c);transform:translateY(-1px)}
.rhythm-arcade-grid button:disabled{cursor:not-allowed;opacity:.42}
.rhythm-arcade-grid i{grid-row:1/3;display:grid;place-items:center;width:3.1rem;aspect-ratio:1;border-radius:.9rem;background:rgba(35,120,102,.14);color:var(--jade,#49a88f);font-family:"Noto Serif SC","Songti SC",serif;font-size:1.4rem;font-style:normal}
.rhythm-arcade-grid b{font-size:1rem}.rhythm-arcade-grid small{color:var(--muted,#9aa9a0);line-height:1.35}
.number-lab{width:min(100%,760px);margin:0 auto;animation:game-arrival .35s ease both}
.number-lab>header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.number-lab>header h1{margin:.15rem 0;font-family:var(--serif);font-size:clamp(2.2rem,9vw,4.2rem)}
.number-lab>header p:not(.eyebrow){max-width:34rem;margin:.35rem 0;color:var(--muted,#9aa9a0);line-height:1.55}
.number-lab>header>span{display:grid;place-items:center;width:4.5rem;aspect-ratio:1;border:1px solid rgba(230,161,92,.4);border-radius:1.25rem;background:rgba(230,161,92,.1);color:var(--accent,#e6a15c);font-family:"Noto Serif SC","Songti SC",serif;font-size:2.3rem}
.number-key{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem;margin:1rem 0 1.25rem}
.number-key button{display:grid;place-items:center;gap:.12rem;min-height:5.3rem;padding:.45rem .25rem;border:1px solid var(--line,rgba(255,255,255,.16));border-radius:.9rem;background:rgba(128,145,135,.05);color:inherit;font:inherit;cursor:pointer}
.number-key button:hover{border-color:var(--accent,#e6a15c)}.number-key b{font-family:"Noto Serif SC","Songti SC",serif;font-size:1.8rem}.number-key small{color:var(--accent,#e6a15c);font-size:.7rem}.number-key span{color:var(--muted,#9aa9a0);font-size:.67rem}
.number-lab-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
.microgame-body h2:has(.number-token){display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.25em;font-size:clamp(2.2rem,12vw,5.4rem)}
.microgame-body h2:has(.number-token)>small{color:var(--accent,#e6a15c);font-family:inherit;font-size:.3em;font-weight:750}
.number-token{display:inline-block;min-width:.75em;font-family:"Noto Serif SC","Songti SC",serif}
.number-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(4.4rem,1fr));gap:.65rem;width:min(100%,34rem)}
.number-choice-grid button{display:grid;place-items:center;gap:.3rem;min-height:6.2rem;padding:.7rem;border:1px solid var(--line,rgba(255,255,255,.16));border-radius:1rem;background:rgba(128,145,135,.06);color:inherit;font:inherit;cursor:pointer}
.number-choice-grid button:hover{border-color:var(--accent,#e6a15c)}.number-choice-grid b{font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(2.2rem,10vw,3.6rem)}.number-choice-grid small{color:var(--accent,#e6a15c);font-size:.82rem}
@keyframes rhythm-runner{0%{left:.75rem;transform:translateY(-50%) scale(.82)}50%{left:calc(50% - .5rem);transform:translateY(-50%) scale(1.25)}100%{left:calc(100% - 1.75rem);transform:translateY(-50%) scale(.82)}}
@media(max-width:560px){.rhythm-tone-grid{grid-template-columns:repeat(3,1fr)}.rhythm-word-grid,.rhythm-piece-grid,.rhythm-arcade-grid{grid-template-columns:1fr}.rhythm-arcade>header>span,.number-lab>header>span{width:3.7rem}.spitfire-beat-card{min-height:13rem}.number-key{grid-template-columns:repeat(4,1fr)}.number-choice-grid{grid-template-columns:repeat(2,1fr)}}
.microgame-footer{display:flex;justify-content:center;margin-top:1rem}
.microgame-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;width:100%}
.microgame-choices button,.phrase-piece-grid button{min-height:4.5rem;padding:.75rem;border:1px solid var(--line,rgba(255,255,255,.16));border-radius:1.1rem;background:var(--panel,#17221d);color:var(--text,#eef4ef);font:inherit;font-weight:700;cursor:pointer}
.microgame-choices button.right-choice,.phrase-piece-grid button.right-choice{border-color:#4cae89;background:rgba(76,174,137,.15)}
.microgame-choices button.try-again,.phrase-piece-grid button.try-again{border-color:var(--accent,#e6a15c);animation:gentle-nudge .28s ease}
.hanzi-game-choices b{display:block;font-family:"Noto Serif SC","Songti SC",serif;font-size:2.4rem}
.hanzi-game-choices small{display:block;color:var(--accent,#e6a15c)}
.game-audio-orb{margin:.25rem auto}
.tone-character-cue{display:grid;justify-items:center;gap:.12rem;margin:.1rem auto .35rem}
.tone-character-cue small{color:var(--muted,#9aa9a0);font-size:.72rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.tone-character-cue strong{font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(4rem,18vw,7rem);font-weight:600;line-height:1}
.tone-character-cue span{color:var(--muted,#9aa9a0)}
.tone-trail-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;width:100%}
.tone-trail-choices button{padding:.55rem;border:1px solid var(--line,rgba(255,255,255,.16));border-radius:1rem;background:var(--panel,#17221d);color:inherit;cursor:pointer}
.tone-trail-choices svg{display:block;width:100%;height:auto}
.tone-trail-choices svg path{fill:none;stroke:rgba(128,145,135,.23);stroke-width:2}
.tone-trail-choices svg polyline{fill:none;stroke:var(--accent,#e6a15c);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.tone-trail-choices small{color:var(--muted,#9aa9a0)}
.tone-trail-choices button.right-choice{border-color:#4cae89;background:rgba(76,174,137,.15)}
.tone-trail-choices button.try-again{opacity:.55}
.tone-pair-cue{display:grid;justify-items:center;gap:.12rem;margin:.1rem auto .35rem}
.tone-pair-cue strong{font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(3.2rem,15vw,5.6rem);font-weight:600;line-height:1}
.tone-pair-cue span{color:var(--muted,#9aa9a0)}
.tone-pair-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;width:100%}
.tone-pair-choices button{padding:.6rem;border:1px solid var(--line,rgba(255,255,255,.16));border-radius:1rem;background:var(--panel,#17221d);color:inherit;cursor:pointer}
.tone-pair-glyphs{display:grid;grid-template-columns:1fr 1fr;gap:.3rem;align-items:center}
.tone-pair-choices svg{display:block;width:100%;height:auto}
.tone-pair-choices svg path{fill:none;stroke:rgba(128,145,135,.23);stroke-width:2}
.tone-pair-choices svg polyline{fill:none;stroke:var(--accent,#e6a15c);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.tone-pair-choices small{display:block;margin-top:.3rem;color:var(--muted,#9aa9a0);font-variant-numeric:tabular-nums}
.tone-pair-choices button.right-choice{border-color:#4cae89;background:rgba(76,174,137,.15)}
.tone-pair-choices button.try-again{opacity:.55}
.memory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;width:100%}
.memory-card{position:relative;min-height:7rem;padding:.7rem;border:1px solid var(--line,rgba(255,255,255,.16));border-radius:1.1rem;background:linear-gradient(145deg,rgba(35,120,102,.2),rgba(216,139,61,.1));color:var(--text,#eef4ef);cursor:pointer;transform-style:preserve-3d;transition:transform .25s,border-color .25s}
.memory-cover,.memory-value{position:absolute;inset:0;display:grid;place-items:center;padding:.55rem;backface-visibility:hidden}
.memory-cover{font-size:2rem;color:var(--accent,#e6a15c)}
.memory-value{opacity:0;transform:rotateY(180deg);font-weight:750}
.memory-value.hanzi{box-sizing:border-box;max-width:100%;overflow:hidden;white-space:nowrap;font-family:"Noto Serif SC","Songti SC",serif;font-size:2.7rem;line-height:1}
.memory-card.revealed,.memory-card.matched{transform:rotateY(180deg)}
.memory-card.revealed .memory-cover,.memory-card.matched .memory-cover{opacity:0}
.memory-card.revealed .memory-value,.memory-card.matched .memory-value{opacity:1}
.memory-card.matched{border-color:#4cae89;background:rgba(76,174,137,.14)}
.forged-phrase{min-height:1.3em;font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(2.2rem,10vw,4.8rem);color:var(--accent,#e6a15c)}
.phrase-piece-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:.65rem;width:100%}
.phrase-piece-grid button{display:grid;gap:.12rem;min-width:7rem}
.phrase-piece-grid b{font-family:"Noto Serif SC","Songti SC",serif;font-size:2rem}
.phrase-piece-grid small{color:var(--muted,#9aa9a0)}
.game-form-grid{width:100%}
@keyframes game-arrival{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:660px){
  .game-hud{min-width:4.6rem;padding:.34rem .42rem}
  .game-hud-flow{font-size:.5rem}
  .intensity-options{grid-template-columns:repeat(2,1fr)}
  .journey-seals{grid-template-columns:repeat(4,1fr)}
  .tone-trail-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .memory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .memory-card{min-height:6rem}
}
@media(prefers-reduced-motion:reduce){
  .microgame-view,.game-toast,.memory-card{animation:none;transition:none}
}
.mode-nav .practice-variety-button{grid-column:1/-1;grid-template-columns:auto minmax(0,1fr);align-items:center;width:100%;min-width:0;padding:.7rem .8rem;border-radius:.85rem;text-align:left}
.mode-nav .practice-variety-button .game-hud-symbol{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.65rem;background:rgba(216,139,61,.14);color:var(--accent,#e6a15c);font-family:"Noto Serif SC","Songti SC",serif;font-size:1.15rem}
.mode-nav .practice-variety-button .game-hud-label{display:grid;gap:.1rem;min-width:0}
.mode-nav .practice-variety-button .game-hud-label small{color:var(--muted,#9aa9a0);font-size:.72rem;font-weight:500}

/* Compact, touch-first rhythm rounds shared by Android and the web app. */
.microgame-view{box-sizing:border-box;width:min(100%,780px)}
.microgame-header{min-height:3.5rem;margin-bottom:.35rem}
.microgame-header h1{margin:0;font-family:var(--serif,"Noto Serif SC",serif);font-size:clamp(1.65rem,6vw,2.35rem);line-height:1.1}
.microgame-symbol{flex:0 0 auto;width:3.35rem;height:3.35rem;border-radius:1rem;font-size:1.65rem}
.microgame-body{gap:.8rem}
.microgame-prompt{max-width:34rem;font-size:clamp(.98rem,3.5vw,1.08rem);line-height:1.4}
.microgame-feedback{display:grid;place-items:center;width:100%;min-height:2.2rem;margin:0;font-size:clamp(.94rem,3.3vw,1.05rem);line-height:1.35}
.rhythm-game-view .microgame-body>h2{margin:.1rem 0 0;font-family:inherit;font-size:clamp(1.2rem,4.5vw,1.55rem);font-weight:800;line-height:1.2}
.rhythm-game-view .microgame-footer{margin-top:.25rem}
.rhythm-round{display:grid;gap:.7rem;width:min(100%,42rem)}
.rhythm-round-status{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:2.35rem;padding:.35rem .65rem;border:1px solid var(--line,rgba(255,255,255,.16));border-radius:.8rem;background:rgba(128,145,135,.055);font-size:.86rem;font-variant-numeric:tabular-nums}
.rhythm-round-status strong{color:var(--accent,#e6a15c);font-size:.96rem;text-align:center}
.rhythm-round-status span:last-child{text-align:right}
.rhythm-note-stage{position:relative;height:clamp(11rem,31vh,15rem);overflow:hidden;border:1px solid var(--line,rgba(255,255,255,.16));border-radius:1.15rem;background:linear-gradient(180deg,rgba(35,120,102,.035),rgba(230,161,92,.09));box-shadow:inset 0 -3.8rem 4rem rgba(230,161,92,.035)}
.rhythm-stage-lanes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--lane-count),minmax(0,1fr));pointer-events:none}
.rhythm-stage-lanes i{border-right:1px solid rgba(128,145,135,.1)}
.rhythm-stage-lanes i:last-child{border-right:0}
.rhythm-hit-line{position:absolute;z-index:1;right:.7rem;bottom:1.25rem;left:.7rem;height:2px;background:linear-gradient(90deg,transparent,var(--accent,#e6a15c) 15%,var(--accent,#e6a15c) 85%,transparent);box-shadow:0 0 16px rgba(230,161,92,.35)}
.rhythm-hit-line span{position:absolute;right:.3rem;bottom:.35rem;color:var(--accent,#e6a15c);font-size:.66rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.rhythm-falling-note{position:absolute;z-index:2;top:.7rem;left:50%;display:grid;place-items:center;gap:.12rem;width:min(76%,19rem);min-height:4.15rem;padding:.55rem .85rem;border:1px solid rgba(230,161,92,.48);border-radius:1rem;background:color-mix(in srgb,var(--panel,#17221d) 92%,var(--accent,#e6a15c));box-shadow:0 12px 32px rgba(0,0,0,.24);opacity:0;transform:translateX(-50%);will-change:top,transform,opacity}
.rhythm-falling-note small{color:var(--muted,#9aa9a0);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.rhythm-falling-note strong{max-width:100%;overflow-wrap:anywhere;line-height:1.1;text-align:center}
.rhythm-falling-note .rhythm-cue-hanzi{font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(2.6rem,12vw,4.25rem);font-weight:600}
.rhythm-falling-note .rhythm-cue-pinyin{color:var(--accent,#e6a15c);font-size:clamp(1.45rem,6vw,2.15rem)}
.rhythm-falling-note .rhythm-cue-meaning{font-size:clamp(1.2rem,5vw,1.7rem)}
.rhythm-falling-note.falling{animation:rhythm-note-fall var(--note-ms,1780ms) linear forwards}
.rhythm-falling-note.matched{animation-play-state:paused;border-color:#4cae89;background:rgba(76,174,137,.18);box-shadow:0 0 0 .22rem rgba(76,174,137,.12),0 12px 32px rgba(0,0,0,.22)}
.rhythm-falling-note.missed{animation-play-state:paused;border-color:#e06b52;opacity:.62}
.rhythm-falling-note.round-complete{top:50%;opacity:1;transform:translate(-50%,-50%);border-color:#4cae89;background:rgba(76,174,137,.14)}
.rhythm-falling-note.round-complete strong{font-size:clamp(2rem,9vw,3.3rem)}
.rhythm-falling-note.rhythm-countdown{top:50%;opacity:1;transform:translate(-50%,-50%);border-color:rgba(230,161,92,.55);background:color-mix(in srgb,var(--panel,#17221d) 88%,var(--accent,#e6a15c))}
.rhythm-falling-note.rhythm-countdown strong{color:var(--accent,#e6a15c);font-size:clamp(3.4rem,16vw,5.4rem);line-height:1}
.rhythm-pad-grid{display:grid;grid-template-columns:repeat(var(--lane-count),minmax(0,1fr));gap:.5rem;width:100%}
.rhythm-pad-grid button{position:relative;display:grid;place-items:center;min-width:0;min-height:6.4rem;padding:1.1rem .42rem .55rem;overflow:hidden;border:1px solid var(--line,rgba(255,255,255,.16));border-bottom-width:.34rem;border-radius:.9rem;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(128,145,135,.045));color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;transition:transform .08s ease,border-color .12s ease,background .12s ease,box-shadow .12s ease}
.rhythm-pad-grid button:nth-child(1){border-bottom-color:#49a88f}.rhythm-pad-grid button:nth-child(2){border-bottom-color:#e18a58}.rhythm-pad-grid button:nth-child(3){border-bottom-color:#d8b34e}.rhythm-pad-grid button:nth-child(4){border-bottom-color:#5b9dbc}.rhythm-pad-grid button:nth-child(5){border-bottom-color:#7fbf8b}
.rhythm-pad-grid button:active,.rhythm-pad-grid button.hit{transform:translateY(.2rem);border-color:#4cae89;background:rgba(76,174,137,.2);box-shadow:0 0 0 .18rem rgba(76,174,137,.11)}
.rhythm-pad-grid button.wrong-key{border-color:#e06b52;background:rgba(224,107,82,.16);animation:gentle-nudge .24s ease}
.rhythm-pad-grid button.miss-answer{border-color:var(--accent,#e6a15c);background:rgba(230,161,92,.18);box-shadow:0 0 0 .18rem rgba(230,161,92,.1)}
.rhythm-pad-grid button:focus-visible{outline:3px solid var(--accent,#e6a15c);outline-offset:2px}
.rhythm-pad-grid kbd{position:absolute;top:.32rem;left:.4rem;display:grid;place-items:center;width:1.35rem;height:1.35rem;border:0;border-radius:.35rem;background:rgba(128,145,135,.13);color:var(--muted,#9aa9a0);font:800 .7rem/1 inherit;box-shadow:none}
.rhythm-pad-value{display:grid;place-items:center;width:100%;overflow-wrap:anywhere;line-height:1.12}
.rhythm-pad-value.mode-hanzi{font-family:"Noto Serif SC","Songti SC",serif;font-size:clamp(1.8rem,8vw,3rem);font-weight:600}
.rhythm-pad-value.mode-pinyin{color:var(--accent,#e6a15c);font-size:clamp(1rem,4vw,1.3rem);font-weight:800}
.rhythm-pad-value.mode-meaning{font-size:clamp(.9rem,3.4vw,1.08rem);font-weight:750}
.rhythm-key-hint{margin:0;color:var(--muted,#9aa9a0);font-size:.82rem;line-height:1.3;text-align:center}
.rhythm-tone-pads button{min-height:5.9rem;padding:.55rem .3rem;border-radius:50% 50% .9rem .9rem}
.rhythm-tone-pads svg{width:100%;max-width:4.8rem;height:2.75rem}.rhythm-tone-pads svg path{fill:none;stroke:rgba(128,145,135,.28);stroke-width:2}.rhythm-tone-pads svg polyline{fill:none;stroke:var(--accent,#e6a15c);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.rhythm-tone-pads .rhythm-pad-value>small{color:var(--muted,#9aa9a0);font-size:.72rem;font-weight:800}
.rhythm-speed{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));align-items:center;gap:.42rem;margin:0 0 1rem;padding:.42rem;border:1px solid var(--line,rgba(255,255,255,.14));border-radius:1rem;background:rgba(128,145,135,.045)}
.rhythm-speed>span{padding:0 .45rem;color:var(--muted,#9aa9a0);font-size:.8rem;font-weight:800}
.rhythm-speed button{min-height:2.6rem;padding:.4rem .55rem;border:1px solid transparent;border-radius:.7rem;background:transparent;color:inherit;font:inherit;font-size:.86rem;font-weight:750;cursor:pointer}
.rhythm-speed button.selected{border-color:rgba(230,161,92,.42);background:rgba(230,161,92,.13);color:var(--accent,#e6a15c)}
.rhythm-arcade>header{align-items:center;margin-bottom:.75rem}.rhythm-arcade>header h1{font-size:clamp(2rem,8vw,3.5rem)}.rhythm-arcade>header p:not(.eyebrow){margin:.2rem 0;font-size:1rem}.rhythm-arcade-grid button{min-height:6.4rem}.rhythm-arcade-grid b{font-size:1.08rem}.rhythm-arcade-grid small{font-size:.82rem}
@keyframes rhythm-note-fall{0%{top:.7rem;opacity:.25;transform:translateX(-50%) scale(.9)}12%{opacity:1}72%{top:calc(100% - 5.35rem);transform:translateX(-50%) scale(1)}100%{top:calc(100% - 4.65rem);opacity:.9;transform:translateX(-50%) scale(1.025)}}
@media(max-width:560px){
  .microgame-header{min-height:3rem}.microgame-symbol{width:2.85rem;height:2.85rem;border-radius:.85rem;font-size:1.4rem}
  .rhythm-game-view .microgame-body{gap:.58rem}.rhythm-note-stage{height:clamp(10rem,27vh,12.5rem)}
  .rhythm-round{gap:.5rem}.rhythm-round-status{min-height:2.1rem;padding:.25rem .48rem;font-size:.78rem}.rhythm-round-status strong{font-size:.84rem}
  .rhythm-pad-grid{gap:.3rem}.rhythm-pad-grid button{min-height:5.45rem;padding:.55rem .22rem .4rem;border-radius:.72rem}.rhythm-pad-grid kbd{display:none}
  .rhythm-pad-value.mode-meaning{font-size:clamp(.85rem,3.4vw,1rem)}.rhythm-pad-value.mode-pinyin{font-size:clamp(1rem,4.4vw,1.22rem)}
  .rhythm-tone-pads button{min-height:5.2rem}.rhythm-tone-pads svg{height:2.25rem}.rhythm-key-hint{font-size:.75rem}
  .rhythm-speed{grid-template-columns:repeat(3,1fr)}.rhythm-speed>span{grid-column:1/-1;padding:.1rem .3rem;text-align:left}
  .rhythm-arcade-grid{grid-template-columns:1fr}.rhythm-arcade-grid button{min-height:5.7rem}
}
@media(max-width:360px){
  .rhythm-pad-grid button{min-height:5rem}.rhythm-tone-pads svg{height:2rem}.rhythm-falling-note{width:82%;min-height:3.75rem}.rhythm-key-hint{display:none}
}
@media(prefers-reduced-motion:reduce){
  .rhythm-falling-note.falling{top:calc(100% - 4.9rem);opacity:1;animation:rhythm-note-pulse var(--note-ms,1780ms) ease-in-out forwards}
  .rhythm-pad-grid button{transition:none}
}
@keyframes rhythm-note-pulse{0%,100%{transform:translateX(-50%) scale(.96)}60%{transform:translateX(-50%) scale(1.04)}}