/* AW Chinese V6.5.2 — responsive restoration for subfolder deployment. */
:root{--mobile-hit:44px}
*,*::before,*::after{box-sizing:border-box}
html{max-width:100%;-webkit-text-size-adjust:100%}
body{max-width:100%;margin:0}
img,svg,video,canvas,iframe{max-width:100%}
img,video{height:auto}
pre,code{white-space:pre-wrap;overflow-wrap:anywhere}
:where(.shell,.game-main,.pinyin-panel,.card,.play-card,.setup-card,.summary-card,.context,.topbar,.header-actions,.game-header,.game-header-links,.lesson-item,.lesson-item .label,.pinyin-chart-rows,.pinyin-chart-details,.pinyin-syllables,.grid-2,.grid-3,.grid-4,.answers,.answer-btn){min-width:0}
:where(.card,.play-card,.setup-card,.summary-card,.lesson-item,.pinyin-lesson-detail,.game-main) {max-width:100%}
:where(h1,h2,h3,p,.description,.question-text,.answer-btn,.lesson-item,.pinyin-lesson-detail){overflow-wrap:break-word}
:where(input,select,textarea){max-width:100%;min-width:0}
:where(button,[role=button]){touch-action:manipulation}
:where(.responsive-table,.table-wrap,.table-responsive){max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Tablets + phones: collapse desktop shell regardless of old stylesheet load order. */
@media(max-width:900px){
  #sidebar{display:none!important}
  .shell{margin-left:0!important;width:100%!important;max-width:100%!important}
  .topbar{padding:10px 16px!important;min-height:60px;height:auto!important;flex-wrap:wrap}
  .context-wrap{padding:10px 16px!important}
  .context{flex-wrap:wrap!important;gap:8px!important}
  .context label{flex:1 1 125px;min-width:0}
  .context select{width:100%}
  .context .refresh-btn{margin-left:0}
  main:not(.game-main){padding:20px 16px calc(94px + env(safe-area-inset-bottom))!important;max-width:100%!important}
  .page-head{flex-wrap:wrap;align-items:flex-start}
  .hero{grid-template-columns:minmax(0,1fr)!important;padding:22px!important}
  .grid-2,.grid-3,.grid-4,.practice-grid,.tool-grid,.avatar-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v6-mobile-nav{display:flex!important;bottom:0;left:0;right:0;z-index:90}
  .game-header{min-height:62px;height:auto!important;padding:10px 14px!important;gap:8px!important;flex-wrap:wrap}
  .game-brand{font-size:14px;white-space:normal}
  .game-header-links{gap:12px!important;flex-wrap:wrap;justify-content:flex-end}
  .game-header-links a{font-size:12px}
  .game-main{padding:18px 14px calc(82px + env(safe-area-inset-bottom))!important;margin-inline:auto;width:100%!important}
  .game-top{flex-wrap:wrap;align-items:flex-start}
  .setup-card,.setup-card.pro-setup,.pinyin-setup{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .setup-card>*{min-width:0}
  .setup-card button[type=submit],.setup-card .primary-btn{min-height:48px}
  .pinyin-panel{padding-inline:0;max-width:100%}
  .pinyin-chart-row{grid-template-columns:1fr!important}
  .pinyin-chart-tools{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,130px)!important;gap:8px}
  .pinyin-chart-tools label{min-width:0}
  .pinyin-syllables{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(70px,1fr))!important;min-width:0}
  .pinyin-syllable{min-height:64px;min-width:0;white-space:normal}
}
@media(max-width:600px){
  .grid-2,.grid-3,.grid-4,.practice-grid,.tool-grid,.avatar-grid{grid-template-columns:minmax(0,1fr)!important}
  .tool-card{min-height:unset}
  .header-actions{gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .topbar{gap:6px}
  .topbar .breadcrumb{flex:1 1 100px;min-width:0}
  main:not(.game-main){padding:16px 12px calc(94px + env(safe-area-inset-bottom))!important}
  .hero{padding:18px!important}
  .hero h2{font-size:clamp(21px,6vw,28px)}
  .game-main{padding:14px 12px calc(78px + env(safe-area-inset-bottom))!important}
  .game-top h1{font-size:clamp(23px,6vw,28px)}
  .setup-card,.setup-card.pro-setup,.pinyin-setup{grid-template-columns:minmax(0,1fr)!important;padding:14px!important}
  .setup-card>*,.setup-card.pro-setup>*,.pinyin-setup>*{grid-column:1/-1!important;grid-row:auto!important;width:100%;min-width:0}
  .answers,.options-grid,.lesson-items,.pinyin-examples{grid-template-columns:minmax(0,1fr)!important}
  .answer-btn{min-height:54px;white-space:normal}
  .pinyin-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px}
  .pinyin-tab{min-width:0;padding:10px 5px;white-space:normal;font-size:12px}
  .pinyin-chart-details{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  .pinyin-chart-details>*{grid-column:1!important;grid-row:auto!important;min-width:0!important}
  .pinyin-chart-details .listen-btn{width:100%}
  .pinyin-syllables{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .pinyin-chart-tools{grid-template-columns:minmax(0,1fr) 104px!important}
  input,select,textarea{font-size:16px!important}
  .button,.btn,.primary-btn,.pinyin-panel button{min-height:44px}
}
@media(max-width:355px){.pinyin-chart-tools{grid-template-columns:1fr!important}.game-brand small{display:none}.game-header-links{gap:7px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:0.01ms!important}}