/* タブレット対応(SKTL-7・2026-10)。電話(〜599px)は1行も変えない: ここのルールは全部 min-width:600px の中だけ。
   ・縦長のタブレット(600px〜): 中身の列を 440px → 600px に広げ、盤面を少し高くする。ボタン・タイルは列の幅に合わせて自然に大きくなる
   ・横長のタブレット(900px〜・横向き): 対戦の画面だけ左に盤面・右に手札と操作の2列にして、スクロールしなくても盤面と手札が両方見えるようにする
   index.html の <style> のあとに読む(同じ強さのルールはこちらが勝つ) */
@media (min-width:600px){
  .app{max-width:600px}
  .dk-foot{max-width:600px}
  .board{height:clamp(340px,54vw,500px)}
  .sheet{max-width:520px}
  .art-ov img{max-width:min(92vw,560px)}
  #gtBody{max-width:420px}
  .title-menu{max-width:420px}
  .note,.acct-line{max-width:420px}
}
@media (min-width:900px) and (orientation:landscape){
  .app{max-width:600px}
  .app:has(#scGame:not([hidden])){max-width:min(1120px,calc(100vw - 32px))}
  .app:has(#scGame:not([hidden])) .dk-foot{max-width:none}
  #scGame:not([hidden]){display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto auto auto auto auto auto auto 1fr auto;column-gap:16px;align-items:start;padding-bottom:12px;
    grid-template-areas:"top top" "net net" "scores scores" "info info" "board panel" "board handh" "board hand" "board bar" "log log"}
  #scGame>.g-top{grid-area:top}
  #scGame>.net-bar{grid-area:net}
  #scGame>.scores{grid-area:scores}
  #scGame>.info{grid-area:info}
  #scGame>.board-wrap{grid-area:board}
  #scGame>.panel{grid-area:panel;margin-top:0}
  #scGame>.hand-h{grid-area:handh;width:100%}
  #scGame>.hand{grid-area:hand;width:100%;min-width:0;flex-wrap:wrap;overflow-x:visible;min-height:0}
  #scGame>.bar{grid-area:bar;width:100%}
  #scGame>.logline{grid-area:log}
  .board{height:clamp(340px,calc(100vh - 250px),640px)}
}