/* ============ v4：橫向（手機/iPad 橫放、投影到電視）版面 ============
   直放維持原本的單欄。橫放時遊戲畫面分成左右兩欄：
   左欄＝按鈕列、題目、情境圖；右欄＝答案卡或主要遊戲區。
   尺寸改用螢幕「高度」計算，確保一個畫面放得下、不用捲動。 */
.lside,.lmain{min-width:0}
/* 舊問題修正：卡片不會被內容撐得比螢幕寬（排順序遊戲在手機直放時會超出畫面） */
.cards > .card, .seq-tray > .card{min-width:0}
.card .kid{max-width:100%}

@media (orientation: landscape) and (min-width: 640px){
  #game{--ah:calc(100vh - 64px); --ah:calc(100dvh - 64px)}
  #game.screen.active{display:grid; max-width:1500px; padding-block:10px 14px;
    grid-template-columns:minmax(0,38fr) minmax(0,62fr); grid-template-rows:auto auto minmax(0,1fr);
    grid-template-areas:"bar main" "prompt main" "side main"; column-gap:clamp(14px,2.6vw,36px); align-items:start;
    min-height:calc(100vh - 34px); min-height:calc(100dvh - 34px)}
  #game .bar{grid-area:bar; margin-bottom:8px}
  #game .prompt-row{grid-area:prompt; margin-bottom:10px; grid-template-columns:clamp(52px,11vh,78px) 1fr}
  #game .prompt .en{font-size:clamp(1.15rem,5vh,2.2rem)}
  #stage{display:contents}
  #stage > .lside{grid-area:side}
  #stage > .lmain{grid-area:main; align-self:center; display:grid; gap:12px; max-height:var(--ah)}

  /* 按鈕列在左欄，縮小一點並讓星星可以縮 */
  #game .progress{display:flex; flex:1; min-width:0; justify-content:center}
  #game .progress span, #game .progress.many span{flex:1 1 0; min-width:0; max-width:30px; width:auto}

  /* 左欄：情境圖依高度縮放 */
  .lside .situation{min-height:0; margin-bottom:0; padding:10px}
  .lside .sit-icon{width:min(130px,22vh)}
  .lside .skywin{width:min(150px,26vh)}
  .lside .sit-line{font-size:clamp(.95rem,3.6vh,1.25rem)}
  .lside .talk-scene{margin-bottom:0}
  .lside .speaker{width:min(150px,24vh)}
  .lside .bubble{font-size:clamp(1.05rem,4.6vh,2rem)}
  .lside .story-scene{max-width:calc((var(--ah) - 120px) * 1.6); margin:0 auto}
  .lside .house{margin-bottom:0}
  .lside .roof{height:min(46px,6vh)}
  .lside .hroom .hpic{width:min(100%,17vh)}
  .lside .hroom{padding:min(8px,1.2vh) 4px}
  .lside .hroom .hname{font-size:clamp(.75rem,3vh,1.1rem); line-height:1.1; white-space:nowrap}
  .lside .week{padding-top:min(30px,6vh)}
  .lside .daycar{padding:min(10px,1.6vh) 0 min(12px,2vh)}
  .lside .week-sing{margin-top:min(14px,2vh)}
  .lside .seq-slots{margin-bottom:0}
  .lside .count-grid{gap:min(10px,1.6vh)}
  .lside .count-grid > span{width:min(66px,13vw,11vh)}
  /* 有瀏海/動態島的 iPhone 橫放：左右避開感測器區域 */
  .screen{padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
  #game.screen.active{overflow-x:clip}

  /* 右欄：答案卡排成一列，大小跟著螢幕高度 */
  .lmain .cards{grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); grid-template-columns:none!important; align-items:stretch}
  .lmain .card .kid{width:min(220px,28vh,100%)}
  .lmain .card .word{font-size:clamp(.95rem,3.6vh,1.3rem)}
  .lmain .answers{gap:min(12px,2vh)}
  .lmain .answer .e{width:min(60px,11vh)}
  .lmain .scene{width:min(100%, calc(var(--ah) * 4 / 3)); margin:0 auto}
  .lmain .house{max-width:min(100%, calc(var(--ah) * 1.05))}
  .lmain .house .hroom .hpic{width:min(100%,26vh)}
  .lmain .mem{max-width:min(520px, calc(var(--ah) * 1.45)); width:100%}
  .lmain .mem.m12{max-width:min(520px, var(--ah))}
  .lmain .body-fig{width:min(270px, calc((var(--ah) - 30px) * .66))}
  .lmain .body-wrap{padding:10px}
  .lmain .snack{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:center}
  .lmain .friend{width:min(170px,24vh)}
  .lmain .friend-bubble{font-size:clamp(1rem,4.4vh,1.7rem); margin-bottom:min(40px,6vh)}
  .lmain .tray{grid-template-columns:repeat(2,1fr)!important}
  .lmain .abc-board{grid-template-columns:repeat(auto-fill,minmax(min(96px,15vh),1fr))}
  .lmain .abc-tile .ltr{font-size:clamp(2rem,9vh,4.4rem)}
  .lmain .flash-ltr .ltr{font-size:clamp(4rem,24vh,11rem)}
  .lmain .flash-pic{width:min(170px,22vh)}
  .lmain .flash-word{font-size:clamp(1.5rem,6vh,3rem)}
  .lmain .flash-card{padding:10px 14px 12px}
  .lmain .flash-nav .play{width:min(76px,13vh); height:min(76px,13vh)}
  .lmain .story-text{margin:0}
  .lmain .line{font-size:clamp(1rem,4.6vh,2.1rem); padding:8px 12px}
  .lmain .story-nav{margin-top:0}
  .lmain .nav-btn{width:min(64px,12vh); height:min(64px,12vh); padding:min(18px,3vh)}
  .lmain .seq-tray .card .kid{width:min(120px,20vh)}

  /* 其他畫面變寬，教室卡片多排幾欄 */
  #home.screen,#cat.screen,#book.screen{max-width:1100px}

  /* 答對後的「下一題」列：放在左欄下方，不擋住答案 */
  .nextbar{left:max(16px, env(safe-area-inset-left,0px), calc((100vw - 1500px) / 2 + 16px)); right:auto; bottom:12px; width:calc((min(100vw,1500px) - 32px) * .36); max-width:none; margin:0;
    border-radius:24px; flex-direction:column; padding:10px 12px}
  .nextbar .nb-next{align-self:stretch; justify-content:center}
  body.has-next #game{padding-bottom:14px}

  .ch-card{max-width:720px}
}

@media (orientation: landscape) and (min-width: 900px){
  .rooms{grid-template-columns:repeat(4,1fr)}
  .cats{grid-template-columns:repeat(3,1fr)}
}

/* 手機橫放（高度很矮）：拿掉彩旗、壓縮間距 */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 520px){
  .bunting{display:none}
  .lside .hroom .hpic{width:min(100%,12vh)}
  .lmain .house .hroom .hpic{width:min(100%,19vh)}
  .lmain .house .hroom{padding:4px}
  .lmain .roof{height:5vh}
  .lside .roof{height:4vh}
  .lside .hgrid{gap:4px; padding:4px}
  .lside .situation{padding:6px}
  #game{--ah:calc(100vh - 24px); --ah:calc(100dvh - 24px)}
  #game.screen.active{padding-block:8px 8px; min-height:100vh; min-height:100dvh}
  #game .round-btn{width:46px; height:46px; padding:8px}
  #game .cheat-btn{width:46px; height:46px; padding:5px 5px 2px}
  #game .cheat-btn .ic{width:24px}
  #game .bar{margin-bottom:6px}
  #game .prompt{padding:8px 12px; border-radius:18px}
  #game .prompt .zh{font-size:.78rem; margin-top:2px}
  .lmain .card{padding:8px 4px}
  .nextbar .nb-tag{display:none}
  .nextbar .say-line{padding:2px}
  .nextbar .say-line b{font-size:.95rem}
  .nextbar .nb-next{font-size:1.1rem; padding:6px 12px}
  /* 過關畫面改成左右排 */
  .win{max-width:640px; display:grid; grid-template-columns:110px 1fr; grid-template-areas:"m t" "m z" "s mi" "s r"; column-gap:16px; align-items:center; padding:14px 18px; text-align:left}
  .win .mascot{grid-area:m; width:84px!important}
  .win .big{grid-area:s; width:64px!important; justify-self:center}
  .win h2{grid-area:t; font-size:1.8rem; margin:0}
  .win > .zh{grid-area:z}
  .win .mission{grid-area:mi; margin:6px 0 0}
  .win .row{grid-area:r; justify-content:flex-start; margin-top:8px}
  .sh-card{padding:12px}
  .sh-text{margin:4px 0 8px}
}