.tone-shell{width:min(100%,760px);margin:0 auto;padding:calc(13px + env(safe-area-inset-top)) 22px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:13px}.tone-topbar{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;min-height:68px}.tone-back{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:0 11px;border:1px solid #e8deca;border-radius:14px;background:#fffaf0;color:#89765c;text-decoration:none;font-size:11px;font-weight:900;white-space:nowrap}.tone-brand{text-align:center}.tone-brand span{color:#b29979;font-size:8px;font-weight:900;letter-spacing:.2em}.tone-brand h1{margin:2px 0 0;font-size:clamp(18px,4vw,23px)}.tone-top-tools{display:flex;align-items:center;gap:7px}.tone-cat-panel,.tone-question-card,.tone-choice-card{background:rgba(255,253,247,.9);border:1px solid rgba(236,225,206,.88);border-radius:22px;box-shadow:0 5px 0 rgba(222,209,187,.3),0 10px 24px rgba(112,91,63,.045)}.tone-cat-panel{display:flex;align-items:center;gap:15px;min-height:92px;padding:9px 17px;background:linear-gradient(100deg,#f2f1e4,#fffaf0)}.tone-cat-frame{width:79px;height:72px;flex:0 0 auto;overflow:hidden;display:grid;place-items:center}.tone-cat-frame img{width:100%;height:100%;object-fit:contain}.tone-cat-copy{display:flex;flex-direction:column;gap:5px}.tone-cat-copy span{color:#a99578;font-size:10px;font-weight:900}.tone-cat-copy strong{color:#6d5942;font-size:13px;line-height:1.5}.tone-cat-panel[data-state="wrong"] .tone-cat-copy strong{color:#9e725d}.tone-cat-panel[data-state="correct"] .tone-cat-copy strong{color:#687e58}.tone-question-card{display:grid;grid-template-columns:45% 55%;min-height:196px;overflow:hidden}.tone-picture{min-height:196px;display:grid;place-items:center;padding:13px;background:linear-gradient(145deg,#e8eedc,#f9f0dd)}.tone-picture img{display:block;width:100%;height:170px;object-fit:contain;filter:drop-shadow(0 7px 6px #66573a18)}.tone-image-fallback{width:100%;height:140px;display:grid;place-items:center;border:1px dashed #cdbc9e;border-radius:18px;background:#fffaf0;color:#927b58;font-size:12px;font-weight:800}.tone-image-fallback[hidden]{display:none}.tone-word{display:flex;flex-direction:column;align-items:center;justify-content:center}.tone-word h2{margin:3px 0 0;color:#5b4837;font-size:clamp(58px,15vw,78px);line-height:1.15}.tone-choice-card{padding:17px 20px 16px}.tone-choice-card .section-heading{margin-bottom:13px}.tone-choice-card .section-heading h2{font-size:17px}.tone-dots{color:#e5d9c5;font-size:12px;letter-spacing:4px}.tone-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.tone-options .pinyin-card{height:88px;min-height:88px}.tone-options .pinyin-card__text{inset:21% 8% 15%}.tone-options .pinyin-card__value{font-size:clamp(34px,9vw,45px)}.tone-options .pinyin-card.is-correct{filter:drop-shadow(0 0 7px #a7c485);transform:translateY(-2px)}.tone-options .pinyin-card.is-wrong{animation:tone-shake .34s ease;border-radius:19px}.tone-options.is-locked .pinyin-card{pointer-events:none}.tone-feedback{min-height:22px;margin:11px 0;color:#8c795f;font-size:13px;font-weight:800;text-align:center}.tone-actions{display:flex;gap:10px}.tone-actions:empty{display:none}.tone-actions[hidden],.tone-actions button[hidden]{display:none}.tone-actions button{min-height:50px;flex:1}.tone-actions .audio-action-button{display:inline-flex;align-items:center;justify-content:center;gap:8px}.tone-actions .audio-ui-icon{width:21px;height:17px}.tone-actions a{display:flex;align-items:center;justify-content:center;flex:1;text-decoration:none}.tone-settlement[hidden]{display:none}.tone-settlement .settlement-cat{height:110px;margin:0 auto 6px}.tone-settlement .settlement-cat img{height:100%;width:160px;object-fit:contain}.tone-settlement p{margin:8px 0;color:#907c62}.tone-settlement .settlement-actions{margin-top:16px}.tone-return{display:flex;align-items:center;justify-content:center;flex:1;min-height:54px;border:1px solid #f1e0bd;border-bottom:4px solid #e7d1a7;border-radius:16px;background:#fff3df;color:#9a7946;font-size:14px;font-weight:900}.tone-storage-note{padding:10px 12px;border-radius:12px;background:#fff3df;color:#8f6845;font-size:11px;text-align:center}.tone-storage-note[hidden]{display:none}.tone-shell.is-settled .tone-cat-panel,.tone-shell.is-settled .tone-question-card,.tone-shell.is-settled .tone-choice-card{display:none}.tone-shell.is-settled .tone-settlement{display:block}.tone-shell a:focus-visible,.tone-shell button:focus-visible{outline:3px solid #d7ad57;outline-offset:3px}@keyframes tone-shake{0%,100%{transform:translateX(0)}30%{transform:translateX(-5px)}65%{transform:translateX(4px)}}@media(max-width:600px){.tone-shell{padding-inline:13px;gap:11px}.tone-topbar{grid-template-columns:auto 1fr auto;grid-template-areas:"back brand stars" "tools tools tools";row-gap:5px;min-height:83px}.tone-back{grid-area:back;padding-inline:9px}.tone-brand{grid-area:brand}.tone-top-tools{grid-area:tools;justify-self:center}.tone-topbar>.star-counter{grid-area:stars;min-width:59px;height:39px;padding-inline:9px}.tone-cat-panel{min-height:79px;padding:6px 12px;gap:10px}.tone-cat-frame{width:67px;height:64px}.tone-cat-copy strong{font-size:12px}.tone-question-card{min-height:166px;grid-template-columns:43% 57%}.tone-picture{min-height:166px;padding:9px}.tone-picture img{height:145px}.tone-word h2{font-size:clamp(55px,16vw,68px)}.tone-choice-card{padding:14px 14px 13px}.tone-choice-card .section-heading h2{font-size:15px}.tone-options{gap:9px}.tone-options .pinyin-card{height:78px;min-height:78px}.tone-options .pinyin-card__value{font-size:clamp(32px,10vw,40px)}}@media(max-width:360px){.tone-shell{padding-inline:10px}.tone-topbar{gap:6px}.tone-back{font-size:10px}.tone-topbar>.star-counter{min-width:53px}.tone-options{gap:6px}.tone-options .pinyin-card{height:71px;min-height:71px}.tone-cat-frame{width:58px}.tone-word h2{font-size:54px}}
.round-badge-result{padding:10px 12px;border-radius:14px;background:#f5eedb;color:#786342!important;font-weight:800}
.round-badge-result img{vertical-align:middle;object-fit:contain;margin-right:8px}

/* Tone-play layout refinements: keep the counter in the upper-right and center image/text equally. */
.tone-topbar{grid-template-columns:auto minmax(0,1fr) auto auto auto}
.question-progress{justify-self:end;white-space:nowrap;padding:6px 9px;border:1px solid #eadfcd;border-radius:12px;background:#fffaf0;color:#806a4d;font-size:11px;font-weight:900}
.tone-question-card{position:relative;grid-template-columns:repeat(2,minmax(0,1fr))}
.tone-question-card.is-text-only{grid-template-columns:minmax(0,1fr);min-height:166px}
.tone-question-card.is-text-only .tone-picture{display:none}
.tone-question-card.is-text-only .tone-word{grid-column:1;min-height:166px}
@media(max-width:600px){
  .tone-topbar{grid-template-columns:auto minmax(0,1fr) max-content;grid-template-areas:"back brand stars" "tools tools progress";min-height:86px}
  .tone-top-tools{grid-area:tools;justify-self:start}
  .question-progress{grid-area:progress;align-self:center;font-size:10px;padding:5px 7px}
  .tone-question-card{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Give long tone options a larger, proportionate storybook card so the full
   syllable stays inside its paper frame on narrow screens. */
.tone-options .pinyin-card--extra-long {
  width: min(100%, 260px);
  height: auto;
  min-height: 0;
  aspect-ratio: 1484 / 1060;
  justify-self: center;
}
.tone-options .pinyin-card--extra-long .pinyin-card__text { inset: 21% 7% 15%; }
.tone-options .pinyin-card--extra-long .pinyin-card__value {
  font-size: clamp(22px, 3.8vw, 30px);
  letter-spacing: -.025em;
}
@media (max-width: 600px) {
  .tone-options .pinyin-card--extra-long { width: 100%; }
  .tone-options .pinyin-card--extra-long .pinyin-card__value { font-size: clamp(18px, 5.5vw, 22px); }
}

/* Lite tone practice header aligns hall/audio controls with the title. */
.tone-topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:52px 32px;grid-template-areas:"brand actions" "progress progress";min-height:88px;gap:2px 8px;}
.tone-brand{grid-area:brand;text-align:left;min-width:0;}
.tone-header-actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;}
.tone-header-actions .tone-back{min-height:36px;padding-inline:9px;font-size:10px;}
.tone-header-actions .sound-toggle{min-height:36px;padding:5px 8px;}
.tone-topbar>#toneProgress{grid-area:progress;justify-self:center;align-self:center;}
.tone-settlement .round-badge-result{margin:0 auto 14px;}
.tone-settlement .settlement-progress{margin:0 auto 12px!important;}
.tone-settlement .settlement-actions{margin-top:22px;}
.tone-settlement .settlement-actions .tone-return{min-height:54px;text-decoration:none;}
.tone-settlement #resultStars{display:none!important;}
.tone-shell.is-settled .tone-topbar,.tone-shell.is-settled .practice-note,.tone-shell.is-settled .tone-storage-note{display:none!important;}
@media(max-width:600px){.tone-topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:48px 30px;grid-template-areas:"brand actions" "progress progress";min-height:82px;gap:2px 5px;}.tone-brand h1{font-size:clamp(16px,4.5vw,20px);}.tone-header-actions{gap:4px;}.tone-header-actions .tone-back{min-height:34px;padding-inline:7px;font-size:10px;}.tone-header-actions .sound-toggle{min-height:34px;padding:4px 6px;font-size:10px;}.tone-header-actions .audio-ui-icon{width:16px;height:14px;}.tone-settlement{padding:24px 18px!important;}.tone-settlement .settlement-actions{flex-direction:column;}}

.tone-feedback:empty{display:none}