/* V1.5 isolated single-screen presentation layer. Natural scrolling remains available when a viewport is too short. */
:root{--v15-gap:6px}
html{min-height:100%;scroll-padding-top:env(safe-area-inset-top)}
body{min-height:100vh;min-height:100dvh}
.page-shell{padding-top:max(7px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
 .scene-hero{height:clamp(120px,14dvh,136px)!important;min-height:clamp(120px,14dvh,136px)!important;margin-bottom:5px!important;padding-top:7px!important;padding-bottom:5px!important;background-position:center,center 38%!important}
.scene-hero .topbar{height:100%;align-items:center}
 .scene-hero .hero-character-slot img{max-height:118px;width:auto;object-fit:contain;object-position:center bottom}
.mode-tabs{gap:6px;margin:0 0 5px}
.mode-tab{min-height:40px;padding-inline:12px}
.group-tabs{gap:5px;margin-bottom:5px}
.group-tab{min-height:40px}
.bubble-trays{gap:7px}
.tray{padding:7px 6px 6px;border-radius:16px}
.tray-heading{min-height:22px;margin-bottom:0}
.tray-heading h2{font-size:16px!important}
.initial-list{min-height:103px;padding:4px 0;gap:5px 3px}
.initial-list .bubble{width:48px;height:48px;min-width:48px;min-height:48px;flex-basis:48px;font-size:20px}
.initial-category-host{margin-top:4px;padding:4px 3px 2px;transform:none!important}
.initial-category-host .category-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.initial-category-host .category-tab{min-height:40px;padding:0 2px;font-size:9px;line-height:1.1;white-space:normal}
.initial-category-host .category-tab:first-child{grid-column:auto}
.final-list{grid-template-columns:repeat(3,48px);grid-auto-rows:48px;gap:4px 3px}
.tray-controls{min-height:40px}
.tray-controls .pager button{width:40px;height:40px}
.medial-picker{display:flex;align-items:center;gap:7px;margin-top:5px;padding:5px 8px;border-radius:14px}
.medial-heading{flex:0 0 auto}.medial-bubbles{justify-content:flex-start;gap:5px;min-height:48px;padding:0}
.medial-bubble{width:48px;height:48px;min-width:48px;min-height:48px;font-size:19px}
.direct-two-part{min-height:40px;padding:0 8px;font-size:10px}
.reading-stage{margin-top:6px;padding:7px 8px 8px;border-radius:17px;overflow:visible}
.reading-stage::before{top:4px}
.stage-heading{display:none!important}
.tray-connector{top:50%;transform:translate(-50%,-50%)}
.tray-connector span{display:block;width:auto;height:auto;border:0;border-radius:0;background:transparent;color:#9b865e;font-size:32px;line-height:1;font-weight:700;text-shadow:0 1px 5px rgba(255,255,255,.85)}
.tray-connector small{display:none!important}
.single-stage-operation{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px}
.phoneme-line{min-height:56px;justify-content:center;gap:clamp(3px,1vw,8px);padding:0;min-width:0}
.phoneme-line .slot{width:48px;height:48px;flex:0 0 48px}
.phoneme-line .slot-letter{font-size:20px}.phoneme-line .slot-label{display:none}
.phoneme-line .plus-sign{font-size:13px;flex:0 0 auto}
.equals-sign{font-size:20px}
.reading-result-line{display:flex;align-items:center;justify-content:center;gap:7px;min-height:53px;margin:1px 0}
.result-bubble{width:auto;height:auto;min-width:66px;min-height:0;padding:0 8px;border:0;border-radius:12px;background:radial-gradient(ellipse,#fff8df80,transparent 76%);box-shadow:none;font-size:clamp(37px,10vw,48px);line-height:1.12}
.result-bubble.has-result{background:radial-gradient(ellipse,#f7e7ab7a,transparent 76%)}
.stage-actions{flex-direction:row;gap:4px;margin:0}
.stage-actions button{min-height:44px;padding:0 9px;font-size:11px;border-radius:12px;white-space:nowrap}
.listen-button .audio-icon{width:16px;height:16px}
.drag-hint{display:none!important}
.learning-tones{display:grid;grid-template-columns:1fr;gap:4px;margin:4px 0 0;padding:6px 8px;border:1px solid rgba(224,207,157,.58);border-radius:12px;background:rgba(255,252,239,.7)}
.learning-tones[hidden]{display:none!important}.learning-heading{margin:0;color:#897658;font-size:10px;font-weight:900}.learning-tone-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.learning-tone-row{display:grid;grid-template-columns:minmax(76px,auto) 1fr auto;align-items:center;gap:6px;min-width:0;padding:2px 5px;border-radius:9px;background:rgba(255,255,255,.6)}.learning-audio-button{display:flex;align-items:center;justify-content:flex-start;gap:5px;min-width:0;min-height:36px;padding:0 5px;border:1px solid #dfd4c0;border-radius:9px;background:#fffdf7;color:#6c5f48;font-size:15px;font-weight:900;cursor:pointer;touch-action:manipulation}.learning-audio-button:disabled{cursor:not-allowed;opacity:.62}.learning-audio-button .audio-icon{width:17px;height:17px;object-fit:contain}.learning-example-word{min-width:0;overflow-wrap:anywhere;color:#4e6245;font-size:14px;font-weight:850}.learning-tone-label{color:#9a896d;font-size:9px;white-space:nowrap}.learning-empty,.audio-status{grid-column:1/-1;margin:0;color:#9b896b;font-size:10px;font-weight:700;text-align:center}.audio-status[hidden],.learning-empty[hidden]{display:none!important}
.variant-tray{margin:2px 0 0;padding:0;border:0;background:transparent;box-shadow:none}.variant-heading{display:none}.variant-choices{gap:4px}.variant-choice{flex:1;min-width:0;min-height:40px;padding:3px 5px}.variant-choice strong{font-size:15px}.variant-choice small{font-size:8px}
.variant-choices{display:flex;flex-wrap:wrap;gap:5px}
.variant-choice{min-width:66px;min-height:42px;padding:4px 7px}
.variant-choice small{font-size:9px}
#resultInfo,#toneArea{display:none!important}
.status-message{min-height:0;margin:2px 0 0;font-size:8px}
footer{display:none!important}
@media(max-width:380px){
 .page-shell{width:calc(100% - 16px);padding-top:max(5px,env(safe-area-inset-top))}
 .scene-hero{height:120px!important;min-height:120px!important;padding:7px 8px 5px!important;background-position:center,center 38%!important}
 .scene-hero .hero-character-slot img{max-height:108px}
 .mode-tab{min-height:38px;padding-inline:9px;font-size:10px}
 .group-tab{min-width:42px;min-height:38px;padding-inline:5px}
 .bubble-trays{gap:5px;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
 .tray{padding-inline:4px}
 .initial-list{grid-template-columns:repeat(2,46px)}
 .initial-list .bubble{width:46px;height:46px;min-width:46px;min-height:46px;flex-basis:46px}
 .final-list{grid-template-columns:repeat(3,46px);grid-auto-rows:46px;gap:3px 1px}
 .final-bubble{width:46px;height:46px;min-width:46px;min-height:46px;font-size:17px}
 .initial-category-host .category-tab{font-size:8px;min-height:38px}
 .phoneme-line{gap:2px}.phoneme-line .slot{width:46px;height:46px;flex-basis:46px}
 .phoneme-line .plus-sign{font-size:11px}
 .stage-actions button{padding-inline:6px;font-size:10px}.phoneme-line .slot{width:44px;height:44px;flex-basis:44px}
 .learning-tone-list{grid-template-columns:1fr}.learning-tone-row{grid-template-columns:minmax(70px,auto) 1fr auto}.learning-audio-button{min-height:36px;font-size:14px}
}
@media(max-height:780px) and (max-width:700px){
 .scene-hero{height:94px!important;min-height:94px!important;margin-bottom:3px!important;padding-top:5px!important;background-position:center,center 38%!important}
 .scene-hero .hero-character-slot img{max-height:86px}
 .mode-tabs{margin-bottom:3px}.group-tabs{margin-bottom:3px}
 .tray{padding-block:5px 4px}.tray-heading{min-height:20px}
 .initial-list{min-height:96px}.initial-category-host{padding-top:2px}
 .final-list{grid-auto-rows:46px;gap:3px}
 .final-bubble{height:46px;width:46px;min-width:46px;min-height:46px}
 .tray-controls{min-height:36px}.tray-controls .pager button{width:36px;height:36px}
 .reading-stage{margin-top:4px;padding-block:5px 6px}
 .phoneme-line{min-height:50px}.phoneme-line .slot{width:44px;height:44px;flex-basis:44px}
 .reading-result-line{min-height:44px}.result-bubble{font-size:36px}
 .stage-actions button{min-height:40px}
 .learning-tones{padding:4px 6px}.learning-audio-button{min-height:34px}
}
@media(min-width:701px){.scene-hero{height:auto!important;min-height:145px!important}.single-stage-operation{grid-template-columns:1fr auto}.learning-tones{max-width:520px;margin-inline:auto}}

/* Preview release notice and audio-safe missing states */
.preview-release-note{margin:-5px 0 9px;color:#9d927c;font-size:10px;font-weight:650;text-align:center;line-height:1.4}
.learning-tone-pinyin{display:flex;align-items:center;min-height:36px;padding:0 7px;color:#6c5f48;font-size:15px;font-weight:900}
.reading-audio-button{display:inline-flex;align-items:center;justify-self:end;gap:6px;min-height:38px;padding:0 12px;border:1px solid #dfd4c0;border-radius:99px;background:#fffdf7;color:#6c5f48;font-size:12px;font-weight:850;cursor:pointer;touch-action:manipulation}.reading-audio-button:disabled{opacity:.65;cursor:wait}.reading-audio-preview-tag{padding:2px 6px;border-radius:99px;background:#f3eddf;color:#9c8968;font-size:9px;font-weight:700}.reading-audio-button .audio-icon{width:18px;height:18px;object-fit:contain}
.reading-audio-button .audio-icon{width:18px;height:18px;object-fit:contain}