/* V1.4: simplify the child-facing view while keeping V1.3 data and interactions. */
.hero-title-en{font-family:inherit;letter-spacing:.08em;font-size:clamp(13px,1.8vw,18px);color:#5d7653}
@media(max-width:700px){.hero-title-en{font-size:13px;letter-spacing:.08em}}

/* Remove explanatory chrome; keep the same panel titles and align them. */
.tray-heading{min-height:30px;justify-content:flex-start}
.tray-heading>div{gap:0!important}
.tray-heading .step-number,.tray-heading p,.tray-heading>.tray-count{display:none!important}
.tray-heading h2{font-size:18px!important;line-height:1.2}
.category-host-heading{display:none!important}
.category-host-heading strong{font-size:14px}
.initial-category-host{margin-top:4px;padding:8px 6px 5px}
.initial-category-host .category-tabs{gap:5px}
.initial-category-host .category-tab{min-height:44px;font-size:10px;line-height:1.1}
.final-tray>.category-tabs{display:none!important}
.final-bowl{display:block;min-height:0;margin:0;padding:2px 0;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important}
.final-list{display:grid;width:100%;min-height:0;grid-template-columns:repeat(3,48px);grid-auto-rows:48px;justify-content:center;align-content:center;gap:5px 4px;padding:0}
.final-list .bubble{animation:none}
.final-bubble{width:48px;height:48px;min-width:48px;min-height:48px;flex:none;font-size:19px}
.tray-controls{display:flex;align-items:center;justify-content:flex-end;min-height:44px;margin-top:auto;padding-top:2px}
.final-count-proxy{display:none!important}
.tray-controls .pager{position:static;display:flex;align-items:center;gap:7px;font-size:11px}
.pager button{width:44px;height:44px;font-size:25px}
#pageLabel{min-width:64px;text-align:center;white-space:nowrap}
.initial-tray,.final-tray{display:flex;flex-direction:column;min-height:0}
.initial-list{flex:0 0 auto}
.initial-category-host{margin-top:auto}
.bubble-trays{align-items:stretch}

/* Hide visible teaching/debug prose while preserving its data and live-region nodes. */
.stage-heading,.drag-hint,footer{display:none!important}
.slot-label,#statusMessage{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#resultInfo,#toneArea{display:none!important}
.debug-view #resultInfo:not([hidden]),.debug-view #toneArea:not([hidden]){display:flex!important}
.slot{width:72px;height:72px}
.result-bubble{font-size:clamp(42px,7vw,62px)}
.equals-sign{font-size:20px;color:#bd9b58}
.stage-actions{margin-top:7px}
.listen-button{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.listen-button .audio-icon{display:block;width:18px;height:18px;object-fit:contain;opacity:.68}
.listen-button:disabled{opacity:.62}
.variant-heading{justify-content:flex-start}
.variant-heading p,.variant-heading>.tray-count{display:none!important}
.medial-heading .step-number,.medial-heading p,.medial-heading>.tray-count{display:none!important}
#debugPanel:not([hidden]){display:block}

@media(max-width:700px){
  .page-shell{width:calc(100% - 24px);padding-bottom:10px}
  .scene-hero{height:140px;min-height:0;margin-bottom:7px}
  .mode-tabs{margin-bottom:6px}
  .group-tabs{margin-bottom:6px}
  .bubble-trays{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:8px}
  .tray{min-height:0;padding:10px 6px 8px;border-radius:17px}
  .tray-heading{min-height:24px;margin-bottom:3px}
  .tray-heading h2{font-size:17px!important}
  .initial-list{grid-template-columns:repeat(2,48px);gap:6px 4px;min-height:108px;padding:6px 0}
  .initial-list .bubble{width:48px;height:48px;flex-basis:48px}
  .initial-category-host{margin-top:auto;padding:7px 4px 4px;border-top:1px solid rgba(216,208,186,.78);border-radius:11px;background:linear-gradient(145deg,rgba(246,246,235,.79),rgba(255,253,248,.72))}
  .initial-category-host .category-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .initial-category-host .category-tab{flex:none;min-width:0;min-height:42px;padding:0 3px;font-size:9px;white-space:normal}
  .initial-category-host .category-tab:first-child{grid-column:1 / -1}
  .final-list{grid-template-columns:repeat(3,48px);grid-auto-rows:48px;gap:5px 3px}
  .final-tray{min-height:0}
  .tray-controls{min-height:44px}
  .reading-stage{margin-top:8px;padding:11px 8px 9px}
  .combination{padding-top:4px}
  .phoneme-line{min-height:67px}
  .reading-result-line{min-height:59px}
  .stage-actions button{min-height:44px}
  .variant-tray{margin-top:7px;padding:8px}
}
@media(max-width:380px){
  .page-shell{width:calc(100% - 20px)}
  .bubble-trays{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:6px}
  .tray{padding-inline:5px}
  .initial-list{grid-template-columns:repeat(2,46px);gap:5px 3px}
  .initial-list .bubble{width:46px;height:46px;min-width:46px;min-height:46px;flex-basis:46px}
  .final-list{grid-template-columns:repeat(3,48px);column-gap:2px}
  .initial-category-host .category-tab{font-size:8px}
  .hero-lockup h1{font-size:26px}
  .hero-title-en{font-size:12px}
}
@media(min-width:701px){
  .initial-tray,.final-tray{min-height:278px}
  .initial-list{min-height:128px}
  .final-list{grid-template-columns:repeat(3,58px);grid-auto-rows:58px;gap:8px 8px}
  .final-bubble{width:58px;height:58px;min-width:48px;min-height:48px}
  .initial-category-host{margin-top:auto}
}
@media(min-width:701px){.phoneme-line{gap:clamp(8px,1.4vw,18px)}.phoneme-line .slot{width:72px;height:72px}.reading-result-line{min-height:74px}}
/* Author display rules must not override the HTML hidden attribute. */
[hidden]{display:none!important}
@media(max-width:700px){.initial-category-host{transform:translateY(15px)}}
@media(max-width:380px){.initial-category-host{transform:translateY(20px)}}
@media(min-width:701px){.initial-category-host{transform:translateY(42px)}}