/* kit skeleton.css — 画面の骨格(規格書 §5)。縦 1 列が標準、幅 760px 以上で脇の列(任意)。 */

:where(#app) {
  max-width: 420px; height: 100vh; height: 100dvh; height: var(--vvh, 100dvh);
  margin: 0 auto; background: var(--bg); display: flex; flex-direction: column; position: relative; overflow: hidden;
}

/* 舞台 */
:where(#scene) {
  position: relative; flex: none; overflow: hidden; border-bottom: var(--bd3) solid var(--line);
  background: var(--scene-bg, #6b5a3a); aspect-ratio: var(--scene-ar, auto);   /* 比は、ゲームが --scene-ar で決める(絵の大きさで決まるゲームは何も指定しない) */
}
:where(#scene canvas, #scene img) { display: block; width: 100%; }
:where(#scene[data-win="small"]) { aspect-ratio: var(--scene-ar-small, var(--scene-ar, auto)); }
:where(#scene[data-win="small"] .plate) { font-size: 10px; padding: 0 4px; }
:where(#scene[data-win="small"] #pMoney b) { font-size: 13px; }
:where(#scene[data-win="small"] #pEvent small) { display: none; }
/* 舞台の絵を畳み、札を絵の外に並べる */
:where(#scene[data-win="none"]) { aspect-ratio: auto; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--bg); }
:where(#scene[data-win="none"] .plate) { position: static; max-width: none; max-height: none; }

/* 状況のチップ */
:where(#stat) { flex: none; display: flex; gap: 5px; padding: 4px 6px; flex-wrap: wrap; }

/* ログ箱(残りの高さを全部使い、ログだけがスクロールする) */
:where(#logBox) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0 6px; background: var(--paper); border: var(--bd2) solid var(--line); border-radius: var(--r2); }
:where(#log) { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 8px; overscroll-behavior: contain; }

/* 操作の列 */
:where(#ctl) { flex: none; padding: 5px 6px calc(6px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 5px; }

/* 脇の列(広い画面だけ。無ければ出ない) */
:where(#colL, #colR) { display: none; }

/* 全面画面の下地(タイトルなど。#app の外に置く場合) */
:where(#title) { position: fixed; inset: 0; z-index: var(--z-title); display: none; align-items: center; justify-content: center; padding: 16px; }
:where(#title.show) { display: flex; }

/* 狭い画面(旅籠夜話の対応表) */
@media (max-width: 440px) {
  :where(#unitSel button) { min-width: 40px; padding: 6px 5px; }
  :where(#speedBtns) { gap: 3px; }
  :where(#speedBtns button) { min-width: 40px; padding: 6px 2px; }
}
@media (max-width: 389px) {
  :where(#speedBar) { gap: 3px; }
  :where(#unitSel button) { min-width: 34px; padding: 6px 3px; }
  :where(#speedBtns) { gap: 2px; }
  :where(#speedBtns button) { min-width: 34px; padding: 6px 1px; }
}
@media (max-width: 359px) {
  :where(#acts button) { font-size: 14px; padding: 4px 1px; }
  :where(#unitSel button:not(.on)) { display: none; }
  :where(#unitSel button.on) { border-radius: var(--r2); margin: 0; min-width: 52px; }
}
:where(html:not([lang="ja"]) #acts button) { font-size: 14px; padding-left: 2px; padding-right: 2px; }

/* 低い画面(kit.js が html.h700 / html.h600 を付ける) */
:where(html.h700 .chip) { padding: 0 6px; font-size: var(--fs-xs); flex: none; }
:where(html.h700 #goalLine) { font-size: var(--fs-xs); padding: 0 6px; }
:where(html.h700 #ctl) { gap: 3px; padding-top: 3px; }
:where(html.h700 .full h1) { font-size: 24px; }
:where(html.h600 .full .col) { gap: 8px; }
:where(html.h600 .full .sub) { margin-bottom: 14px; }

/* 広い画面(≥760px)。脇の列があるゲームは kit.js が html.has-cols を付ける */
@media (min-width: 760px) {
  :where(#app) { max-width: 1024px; }
  :where(html.has-cols #app) {
    display: grid; grid-template-columns: 230px minmax(0, 1fr) 250px; grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "scene scene scene" "stat stat stat" "colL logBox colR" "ctl ctl ctl"; column-gap: 8px;
  }
  :where(html.has-cols #scene) { grid-area: scene; }
  :where(html.has-cols #stat) { grid-area: stat; }
  :where(html.has-cols #logBox) { grid-area: logBox; margin: 0; }
  :where(html.has-cols #ctl) { grid-area: ctl; }
  :where(html.has-cols #colL) { grid-area: colL; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding-left: 6px; }
  :where(html.has-cols #colR) { grid-area: colR; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding-right: 6px; }
}