/* ============ 06：手機橫放＋AirPlay 投到電視 ============
   只在「橫放而且螢幕很矮」（手機橫放，高度 ≤ 560px）時生效，直放和平板不受影響。
   原則：一個畫面放得下、不用捲動；從沙發看得清楚，所以圖和字依「螢幕高度」放大。 */
@media (orientation: landscape) and (max-height: 560px){

  /* ---------- 1. 載入頁：左邊 Sunny 和標題，右邊進度與按鈕 ---------- */
  #kload{padding:calc(12px + env(safe-area-inset-top,0px)) max(24px, env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(24px, env(safe-area-inset-left,0px))}
  .kl-box{display:grid; max-width:820px; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); column-gap:clamp(20px,5vw,48px); row-gap:min(12px,2.6vh); align-items:center;
    grid-template-areas:"mascot road" "mascot num" "title go" "sub skip" "sub msg"}
  .kl-mascot{grid-area:mascot; width:min(150px,34vh); justify-self:center; align-self:end}
  .kl-title{grid-area:title; font-size:clamp(1.6rem,9vh,2.4rem)}
  .kl-sub{grid-area:sub; align-self:start}
  .kl-road{grid-area:road; padding-top:min(44px,11vh)}
  .kl-bus{width:min(58px,13vh)}
  .kl-num{grid-area:num}
  .kl-go{grid-area:go; justify-self:stretch; padding-block:min(14px,3vh)}
  .kl-skip{grid-area:skip; justify-self:center}
  .kl-msg{grid-area:msg; min-height:0}

  /* ---------- 2. 首頁：縮小橫幅，分類卡一進來就看得到 ---------- */
  #home.screen.active{display:grid; grid-template-columns:minmax(0,1fr) auto auto; column-gap:12px; align-items:center; padding-block:6px 20px; max-width:1100px;
    grid-template-areas:"title tools tools" "stickers book diff" "cats cats cats" "review review review" "settings settings settings"}
  #home #bookOpen{grid-area:book; margin:6px 0; padding:4px 12px 4px 6px; font-size:.9rem}
  #home #bookOpen .ic{width:30px}
  #home .hero{display:none}
  #home .title{grid-area:title; font-size:clamp(1.5rem,8.6vh,2.3rem); margin:2px 0 0; text-align:left; white-space:nowrap}
  #home .sub{display:none}
  #home .tool-row{grid-area:tools; margin:0; justify-content:flex-end}
  #home .tool-row .fs-btn{padding:5px 12px 5px 7px}
  #home .tool-row .fs-ico{width:24px}
  #home .stickers{grid-area:stickers; justify-content:flex-start; min-height:0; margin:0; font-size:1.2rem}
  #home .stickers .sticker{width:32px}
  #home .diff{grid-area:diff; margin:6px 0}
  #home .diff button{padding:5px 14px; font-size:.95rem}
  #home .cats{grid-area:cats; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:4px}
  #home .cat{flex-direction:row; justify-content:flex-start; align-items:center; gap:10px; padding:10px 12px; text-align:left; border-radius:22px 22px 22px 8px}
  #home .cat.wide{grid-column:span 2; padding:10px 14px}
  #home .cat .ico, #home .cat.wide .ico{width:min(60px,15vh); height:min(60px,15vh); padding:7px; margin:0; flex:none}
  #home .cat-txt, #home .cat.wide .cat-txt{align-items:flex-start; gap:1px; min-width:0}
  #home .cat b, #home .cat.wide b{font-size:clamp(1rem,4.6vh,1.25rem)}
  #home .cat .zh{font-size:.8rem}
  #home .cat .prog{margin-top:3px; padding:1px 8px; font-size:.72rem}
  #home .start-tag{top:-9px; right:12px; font-size:.75rem; padding:2px 10px}
  #home .review{grid-area:review; margin-top:10px; padding:8px 14px}
  #home .review .ico{width:46px; height:46px; padding:6px}
  #home #settings{grid-area:settings}

  /* 分類頁：教室卡片改成橫的、一排 4 張 */
  #cat .rooms{grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
  #cat .room{flex-direction:row; justify-content:flex-start; text-align:left; gap:8px; padding:10px; min-height:0}
  #cat .room .ico{width:min(52px,13vh); height:min(52px,13vh); padding:6px; margin:0; flex:none}
  #cat .room b{font-size:clamp(.92rem,4.2vh,1.08rem)}
  #cat .room .zh{font-size:.72rem}
  #cat .abc-groups{margin-bottom:8px}
  #cat .abc-groups button{padding:4px 12px}

  /* ---------- 3. 描字母：描字板依高度縮放，按鈕放旁邊 ---------- */
  .lmain .tr-wrap{flex-direction:row; justify-content:center; align-items:center; gap:14px}
  .lmain .tr-pad{width:auto; height:calc(var(--ah) - 12px); aspect-ratio:100/108; padding:6px}
  .lmain .tr-svg{width:auto; height:100%; margin:0 auto}
  .lmain .tr-tools{flex-direction:column}
  .lmain .tr-tools button{padding:8px 12px 8px 8px}

  /* 聽音辨位：左邊的圖和格子縮到放得下 */
  .lside .sp-wrap{gap:6px}
  .lside .sp-pic{width:min(120px,26vh)}
  .lside .sp-slot{width:min(58px,14vh)}

  /* ---------- 4. 答案卡依剩下的高度放大 ---------- */
  .lmain .card .kid{width:min(100%,40vh)}
  .lmain .cards.cols4 .card .kid, .lmain .cards.cols5 .card .kid{width:min(100%,34vh)}
  .lmain .card{padding:10px 6px}
  .lmain .card .word{font-size:clamp(1rem,5.2vh,1.4rem)}
  .lmain .ltr-card .ltr{font-size:min(5.2rem,24vh)}
  .lmain .num-big{font-size:min(5.4rem,24vh)}
  .lmain .sw{font-size:min(3.2rem,14vh)}
  .lmain .mo-card .sw{font-size:min(1.8rem,8vh)!important}
  .lmain .cards.cols4 .mo-card .sw{font-size:min(1.5rem,7vh,2.5vw)!important}
  .lmain .answer{padding:min(14px,3vh) 18px}
  .lmain .answer span:last-child{font-size:clamp(1.1rem,6vh,1.7rem)}
  /* 圖很多的關卡（I spy）：維持 3 欄的格子，不要擠成一排 */
  .lmain .cards.grid-keep{grid-auto-flow:row!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px}
  .lmain .cards.grid-keep .card{padding:6px}
  .lmain .cards.grid-keep .card .kid{width:min(100%,24vh)}
  .lmain .cards.grid-keep.n6 .card .kid{width:min(100%,30vh)}

  /* ---------- 5. ABC Board：字母分幾排、字放大 ---------- */
  .lmain .abc-board{grid-template-columns:repeat(var(--abc-cols,4),minmax(0,1fr)); gap:8px; align-content:center}
  .lmain .abc-tile{padding:4px; border-radius:16px; min-width:0; overflow:hidden}
  .lmain .abc-tile .ltr small{margin-left:1px}
  .lmain .abc-tile .ltr{font-size:var(--abc-font,min(4.4rem,18vh))}
  .lmain .chant{margin-bottom:6px}

  /* ---------- 6. 左欄的情境圖放大，從遠處也數得清楚 ---------- */
  .lside .sit-icon{width:min(170px,36vh)}
  .lside .count-grid{gap:8px}
  .lside .count-grid > span{width:min(84px,18vh)}
  .lside .tf-wrap{gap:6px}
  .lside .tf{width:min(100%,56vh)}
  .lside .eq-grp{width:44%}
  .lside .eq-grp > span{width:calc(33.3% - 2px)}
  .lside .eq-grp.one{width:92%}
  .lside .eq-grp.one > span{width:calc(20% - 2px)}
  .lside .eq{font-size:clamp(1.6rem,10vh,2.4rem)}
  .lside .pt-row{gap:6px}
  .lside .pt-row > span{width:calc(25% - 6px); max-width:80px}
  .lside .rh-pic, .lside .liv-pic .p{width:min(150px,32vh)}
  .lside .plant-pic{width:min(220px,48vh)}
  .lside .letter{font-size:min(7rem,30vh)}
  .lside .seq-ltr .ltr, .lside .seq-ltr .hole{font-size:min(4.4rem,18vh)}
  .lside .bl-tile{width:min(96px,22vh)}
  .lside .bl-tile .ltr{font-size:min(4rem,16vh)}
  .lside .sw-sent .sw-pic{width:min(110px,24vh)}
  .lside .sw-line{font-size:clamp(1.3rem,7vh,2rem)}

  /* ---------- 7. 背景裝飾只留天空：底部的字母方塊和地面不會壓到內容 ---------- */
  #scenery > :not(.sc-top){display:none}
}