/* KAZAAAN!!／HYOZAAAN!! 共通のレイアウト：操作パネル（BET・発射・オート・演出）は、画面の下に固定して、どの画面の大きさでも、必ず見えて、押せるようにする。
 * 台の絵と円盤は、パネルの高さを引いた「残りの場所」に収まる（画面が小さいときは、縮む。ボタンが優先）。
 *   縦向き：上から  台の絵 → 段の表示 → 円盤 → メッセージ、下に操作パネル（固定）
 *   横向き（高さが小さい画面）：左に 台の絵と円盤、右に 操作パネル */
:root{--panel-h:176px}
html,body{height:100%}
body.machine{overflow:hidden;touch-action:manipulation}
#app{position:fixed;left:0;right:0;top:calc(44px + env(safe-area-inset-top));bottom:0;display:flex;flex-direction:column}
#stage{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:4px;padding:2px 8px 0;overflow:hidden;align-items:center}
#stage h1{flex:none;margin:0;text-align:center;font-size:clamp(15px,3.6vh,24px);line-height:1.2}
#tiers{flex:none;width:min(100%,520px)}
#visual{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:flex-start}
#cabwrap{flex:1 1 46%;min-height:110px;width:100%;display:flex;justify-content:center;align-items:stretch;min-width:0}
#cab{width:100%;max-width:520px;height:100%;border-radius:14px;border:2px solid #ffffff22;display:block}
#dishwrap{flex:1 1 50%;min-height:120px;width:100%;display:flex;justify-content:center;align-items:center;min-width:0}
#dish{height:100%;max-height:100%;aspect-ratio:1/1;max-width:100%;width:auto}
#msg{flex:none;text-align:center;font-weight:900;font-size:clamp(13px,2.4vh,17px);min-height:1.5em;line-height:1.3;color:#ffe14a;text-shadow:0 2px 4px #000}
#hud,#chain{flex:none}
/* 操作パネル（下に固定） */
#panel{flex:none;position:relative;z-index:20;background:linear-gradient(#0c1228f2,#050810);border-top:2px solid #ffffff33;padding:6px 10px calc(8px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px;align-items:center;box-shadow:0 -6px 18px #000a}
#panel .row{display:flex;gap:5px;flex-wrap:wrap;align-items:center;justify-content:center;width:100%;max-width:520px;min-width:0}
#panel .row .btn{white-space:nowrap}
#panel .row.bets{gap:5px}
#panel .btn{flex:0 1 auto;font-size:15px;padding:.42em .7em;min-height:40px;margin:0;min-width:0}
#panel .q{min-width:2.2em;padding:.42em .4em}
#panel #bet{font-size:24px;font-weight:900;color:#ffe14a;min-width:2.1em;text-align:center}
#panel #go{flex:1 1 9.5em;font-size:19px;min-height:48px;max-width:260px;min-width:8em;white-space:nowrap}
#panel #auto,#panel #fast,#panel #more{font-size:12px;padding:.4em .5em}
#info{flex:none;width:min(100%,520px);max-height:0;overflow:hidden}
/* 説明・きろくは、パネルの上に出さず、「きろく」ボタンで開く（画面を狭くしない） */
#sheet{position:fixed;left:0;right:0;bottom:0;top:calc(44px + env(safe-area-inset-top));z-index:30;background:#070b18f4;overflow:auto;padding:12px 12px calc(90px + env(safe-area-inset-bottom));display:none}
#sheet.on{display:block}
#sheet .box{max-width:560px;margin:0 auto 10px}
#sheetclose{position:fixed;right:12px;bottom:calc(90px + env(safe-area-inset-bottom));z-index:31;display:none}
#sheet.on ~ #sheetclose{display:block}
/* 低い画面（縦向きでも、小さい端末）：台の絵を、少し縮めて、円盤を優先 */
@media (max-height:700px){ #cabwrap{flex-basis:34%} #stage h1{display:none} }
/* 横向き（高さが小さい画面）：左に台と円盤、右に操作パネル */
@media (orientation:landscape) and (max-height:600px){
  #app{flex-direction:row}
  #stage{flex:1 1 auto;min-width:0;padding:2px 6px}
  #stage h1{display:none}
  #visual{flex-direction:row;align-items:stretch}
  #cabwrap{flex:1 1 42%;min-width:0;min-height:0}
  #dishwrap{flex:1 1 52%;min-width:0;min-height:0}
  #panel{flex:0 0 min(46vw,330px);border-top:0;border-left:2px solid #ffffff33;padding:6px 10px calc(6px + env(safe-area-inset-bottom));justify-content:center;gap:7px;box-shadow:-6px 0 18px #000a}
  #panel .row{flex-wrap:wrap}
  #panel #go{max-width:none;width:100%}
}
/* 大きい画面：余白を広く */
@media (min-height:900px) and (orientation:portrait){ #stage{gap:8px;padding-top:6px} }