/* 遊ぶ画面の配置。色・形・開く演出は theme.css と theme.js（見た目）が持つ。
   画面いっぱいに場面の絵、中央に語り部の立ち絵、その下に会話の窓。左上にお題、その下に質問帳。右上にわかったこと */
main.stage { position: relative; min-height: 0; overflow: hidden; display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr) minmax(250px, 330px);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "bar bar bar" "odai stand ledger" "qbook stand ledger" "qbook win ledger";
  gap: 14px 22px; padding: 14px 24px 18px; }
/* 場面の絵（/img/bg/station があれば一番上に重ねる。無ければ見た目の色だけ） */
.scene { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--scene-img, none), var(--scene, none); background-size: cover; background-position: center; }
main.stage > :not(.scene) { position: relative; z-index: 1; min-width: 0; }

.stagebar { grid-area: bar; display: flex; align-items: center; gap: 14px; }
.stagebar h1 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qcount { margin-left: auto; display: flex; align-items: center; gap: .5em; white-space: nowrap; }

.odai { grid-area: odai; max-height: 36vh; overflow-y: auto; }
.qbook { grid-area: qbook; min-height: 0; display: flex; flex-direction: column; }
.qbook > .plab { align-self: flex-start; }
#qlog { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; list-style: none; margin: 0; padding: 0 4px 0 0; }
.qrow { display: grid; grid-template-columns: 2.3em minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ledger { grid-area: ledger; align-self: start; max-height: 100%; overflow-y: auto; }
#found { list-style: none; margin: 0; padding: 0; }

/* 語り部の立ち絵。透過の立ち絵（webp・png）はそのまま立たせ、四角い絵（jpg・svg）は額に入れる */
.stand { grid-area: stand; margin: 0; min-height: 0; display: flex; align-items: flex-end; justify-content: center; }
.stand img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.stand.framed { align-items: center; }
.stand.framed img { max-height: calc(100% - 12px); aspect-ratio: 3 / 4; object-fit: cover; }
.stand #big { position: absolute; right: 8%; top: 4%; z-index: 2; }

/* 会話の窓（ノベルゲームの文章窓） */
.window { grid-area: win; justify-self: center; width: 100%; max-width: 860px; max-height: 60vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; }
.nameplate { align-self: flex-start; }
.wline { display: flex; align-items: center; gap: 16px; }
.wline .wsay { flex: 1; min-width: 0; }
/* 窓の下の帯（ボタン・入力欄・終わりの列）。窓の中が長くて送られても、帯は窓の下に常に見える。背景の色は見た目（theme.css）が付ける */
.wfoot { position: sticky; bottom: 0; z-index: 1; margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px 0 16px; }
.wacts { display: flex; justify-content: center; gap: 12px; }
.wacts:not(:has(button:not([hidden]))) { display: none; }
#ask { display: flex; gap: 8px; align-items: center; }
#ask[hidden] { display: none; }

@media (max-width: 900px) {
  main.stage { display: flex; flex-direction: column; overflow: visible; gap: 12px; padding: 12px; }
  .stagebar { order: 0; flex-wrap: wrap; }
  .odai { order: 1; max-height: none; }
  .stand { order: 2; height: 200px; flex: none; }
  .window { order: 3; max-height: none; }
  .odai, .ledger, .qbook, .window { align-self: stretch; } /* 箱の幅をそろえる */
  .ledger { order: 4; max-height: none; }
  .qbook { order: 5; }
  #qlog { max-height: 45vh; }
}