/* =====================================================================
   第8弾：部屋の画面（ui/room.js）と、上のバーの右がわ（ui/menu.js：時間と天気・手帳・メニュー）
   スマホ：画面の高さにおさまる1列（景色 → いる人 → 帯 → 部品 → ログ → コマンド → 発言欄。ページはスクロールしない）。
   PC（900px〜）：左に景色・いる人・コマンド、右に帯・部品（いちばん上）・ログ・発言欄
   景色は 192×96 のドット絵を整数倍（--k：2、ひろい画面は 3）で、左右につなげて横いっぱい
   ===================================================================== */

/* ---- 上のバーの右がわ ---- */
.tb-sky { flex: none; font-size: var(--fs-min, 14px); padding: 4px 10px; border-radius: 999px; background: rgba(120, 150, 230, .2); border: 1px solid rgba(150, 180, 255, .45); color: #e4ecff; white-space: nowrap; }
.tb-sky-ic { margin-right: 4px; }
@media (max-width: 899px) { .tb-sky-ic { margin: 0; } }
.tb-journal, .tb-menu {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px;
  padding: 0 10px; border-radius: 12px; border: 1.5px solid rgba(227, 179, 65, .7); background: rgba(8, 16, 12, .84); color: var(--text);
  font-weight: 700; font-size: var(--fs-min, 14px); -webkit-tap-highlight-color: transparent;
}
.tb-journal { padding: 0; width: 44px; }
.tb-journal img { display: block; width: 24px; height: 24px; image-rendering: pixelated; }
.tb-journal.deduce { border-color: #ffd84a; }
.tb-journal:active, .tb-menu:active { transform: translateY(1px); background: rgba(30, 48, 40, .9); }
.tb-mi { display: grid; gap: 3px; width: 16px; }
.tb-mi i { display: block; height: 2px; border-radius: 1px; background: var(--brass-hi); }
.tb-dot { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 2px #0b1310; }
.tb-dot[hidden], .tb-jbadge[hidden], .tb-jgift[hidden] { display: none; }
.tb-jbadge { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: #ffd84a; color: #3a2208; font-style: normal; font-weight: 900; font-size: var(--fs-min, 14px); line-height: 22px; text-align: center; box-shadow: 0 0 0 2px #0b1310; }
.tb-jgift { position: absolute; bottom: -7px; left: -7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 11px; background: #2a1a3e; border: 1.5px solid #ffd84a; font-style: normal; font-size: var(--fs-min, 14px); line-height: 1; box-shadow: 0 0 0 2px #0b1310; }
.tb-journal.glow { border-color: #ffd84a; background: rgba(64, 46, 8, .94); animation: tbGlow 2.6s ease-out both; }
@keyframes tbGlow {
  0% { box-shadow: none; transform: none; }
  12% { box-shadow: 0 0 0 4px rgba(255, 216, 74, .85), 0 0 24px 6px rgba(255, 216, 74, .6); transform: scale(1.14); }
  28% { transform: none; }
  100% { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .tb-journal.glow { animation: none; box-shadow: 0 0 0 3px rgba(255, 216, 74, .7); } }
@media (min-width: 900px) {
  .topbar .tb-stats { flex: 1; }
}
@media (max-width: 899px) {
  /* スマホ：1行目に 名前・お金・時間・手帳・メニュー、2行目に HP・MP など */
  .topbar { grid-template-columns: minmax(0, 1fr) auto auto auto auto; grid-template-areas: "who money sky journal menu" "stats stats stats stats stats"; }
  /* 長い職業の名前（けもの使い など）と5けたのお金でも、名前と職業はお金の札にかからない（入らない分は「…」）。第8弾 QA */
  .tb-who { overflow: hidden; }
  .tb-id { min-width: 0; }
  .tb-name, .tb-sub { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tb-sky { grid-area: sky; padding: 0; width: 40px; height: 40px; display: grid; place-items: center; font-size: 20px; }
  .tb-sky .tb-sky-t { display: none; }
  .tb-journal { grid-area: journal; }
  .tb-menu { grid-area: menu; width: 44px; padding: 0; }
  .tb-menu .tb-mt { display: none; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; grid-template-areas: "brand who money sky journal menu" "stats stats stats stats stats stats"; }
}
/* せまいスマホ（〜400px）：すき間とお金の札を少し小さく（名前と職業の場所をあける） */
@media (max-width: 400px) {
  .topbar { column-gap: 6px; padding-left: 10px; padding-right: 10px; }
  .tb-who { gap: 6px; }
  .tb-money { padding: 1px 7px; gap: 2px; }
}

/* ---- 部屋の画面のまわり（町の会話のらんは使わない：ログが部屋の会話） ---- */
/* 第8弾：右の会話のらん（.side）は無くなった。どの画面（部屋・ページ・冒険・ダンジョン）も1列 */
.shell { grid-template-columns: minmax(0, 1fr); }
body.room-on .side, body.room-on .side-open { display: none; }
body.room-on .shell { grid-template-columns: minmax(0, 1fr); max-width: 1280px; }
body.room-on .app-main { padding: 10px 12px 12px; }
body:has(#main .room) > .sr { top: 0; left: 0; } /* 読み上げ用の見えない1px（いちばん下にあると、ページが1pxのびてスクロールする） */
/* メニューの下の原案のクレジット（部屋の画面では、ページの下のクレジットを出さない） */
.wm-credit { margin: 10px 2px 0; text-align: center; color: var(--faint); font-size: var(--fs-min, 14px); line-height: 1.5; }
@media (min-width: 900px) { body.room-on .app-main { padding: 14px 18px 16px; } body.room-on .credit { display: none; } }

.room { --k: 2; --npc: #ff9ad0; display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 100%; } /* ほかの係の grid の中でも、長い名前で横にのびない */
.room .rm-l, .room .rm-r { display: contents; }
/* スマホの順：景色・いる人・帯（はじめの人の「つぎ」）・部品・ログ・コマンド・発言欄（第8弾 QA：部品はログの上） */
.rm-view { order: 1; }
.rm-sleep { order: 2; }
.rm-people { order: 3; }
.rm-strip { order: 4; }
.room-panel { order: 5; min-width: 0; }
.rm-log { order: 6; }
.rm-cmds { order: 7; }
.rm-say { order: 8; }
@media (min-width: 900px) {
  .room {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 16px; align-items: stretch;
    /* 上のバー（＋下の線1px）と、まわりのすき間（14px＋16px）をのぞいた高さ（ページがスクロールしないように） */
    height: calc(100vh - var(--tb-h) - 31px); height: calc(100dvh - var(--tb-h) - 31px); min-height: 520px;
  }
  .room .rm-l { display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow-y: auto; padding-right: 2px; }
  .room .rm-l > * { flex: none; } /* 高さが足りないときは、左の列ごとスクロール（いる人の列やボタンをつぶさない） */
  /* 右の列：帯 → 部品（いちばん上。高さの半分ほどまで、中だけスクロール）→ ログ（のこり全部）→ 発言欄 */
  .room .rm-r { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
  .room .rm-r > * { flex: none; }
  .room .room-panel { flex: 0 1 auto; min-height: 0; max-height: 52%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .room .rm-log { flex: 1 1 0; max-height: none; min-height: 140px; }
}
@media (min-width: 1180px) { .room { --k: 3; } }

/* ---- 景色（絵の上には何も重ねない：部屋の名前と主の札は、絵の下の帯） ---- */
.rm-view { flex: none; margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); background: rgba(8, 16, 12, .9); }
.rm-scene {
  position: relative; height: calc(96px * var(--k));
  background: #1b2a24 var(--scene) center bottom / auto calc(96px * var(--k)) repeat-x; image-rendering: pixelated; image-rendering: crisp-edges;
}
.rm-tint { position: absolute; inset: 0; pointer-events: none; transition: background 1.2s ease; }
.rm-scene[data-phase="morning"] .rm-tint { background: linear-gradient(180deg, rgba(255, 186, 150, .18), rgba(255, 214, 170, .06)); }
.rm-scene[data-phase="evening"] .rm-tint { background: linear-gradient(180deg, rgba(255, 128, 60, .26), rgba(130, 50, 110, .2)); mix-blend-mode: multiply; }
.rm-scene[data-phase="night"] .rm-tint { background: linear-gradient(180deg, rgba(10, 16, 60, .62), rgba(20, 20, 50, .5)); mix-blend-mode: multiply; }
.rm-scene.lit[data-phase="night"] .rm-tint { background: rgba(10, 16, 60, .1); mix-blend-mode: normal; }
/* 天気（data-wx。時間帯と天気が変わると room.js がその場で書きかえる）：
   くもり・雨の色と雨のすじは、外の景色（data-out：交流広場）だけ。店や家の中は、雨のとき明かりが少し暗くなるだけ（くもりは何もしない）。
   ひいらぎ館の部屋は天気を出さない（館の中の冒険） */
.rm-scene[data-out][data-wx="cloudy"] .rm-tint::after, .rm-scene[data-out][data-wx="rain"] .rm-tint::after { content: ''; position: absolute; inset: 0; background: rgba(90, 100, 120, .18); }
.rm-scene[data-out][data-wx="rain"] .rm-tint::after {
  background: repeating-linear-gradient(105deg, transparent 0 14px, rgba(200, 220, 255, .22) 14px 15px), rgba(80, 90, 120, .2);
  background-size: 60px 60px, auto; animation: rmRain .6s linear infinite;
}
.rm-scene:not([data-out])[data-wx="rain"] .rm-tint::after { content: ''; position: absolute; inset: 0; background: rgba(40, 50, 80, .1); }
.room.manor-room .rm-scene .rm-tint::after { content: none; }
@keyframes rmRain { from { background-position: 0 0, 0 0; } to { background-position: -12px 60px, 0 0; } }
@media (prefers-reduced-motion: reduce) { .rm-scene[data-wx="rain"] .rm-tint::after { animation: none; } .rm-hostfig img { animation: none !important; } }
/* 主の姿：景色の主の場所（--hx・--hy：景色のドット）に足もと */
.rm-hostfig {
  position: absolute; left: calc(50% + (var(--hx) - 96) * var(--k) * 1px); bottom: calc((96 - var(--hy)) * var(--k) * 1px);
  transform: translateX(-50%); padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rm-hostfig img { display: block; image-rendering: pixelated; transform-origin: 50% 100%; transform: scale(calc(var(--k) / 2)); animation: rmBob 2.6s ease-in-out infinite; }
.rm-hostfig.cold img { animation: none; }
@keyframes rmBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
.rm-hostfig:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; border-radius: 8px; }
/* 絵の下の帯：部屋の名前（1行。ひとことは小さく、はみ出したら …）と、主の札（顔と＠名前。押すと はなす） */
.rm-cap { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 6px 4px 12px; border-top: 1px solid var(--line-2); }
.rm-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 10px; line-height: 1.35; overflow: hidden; }
.rm-title b { flex: none; font-family: var(--font-dot); font-weight: 400; font-size: calc(18px * var(--fs-k, 1)); color: var(--brass-hi); white-space: nowrap; }
.rm-title small { min-width: 0; color: var(--muted); font-size: var(--fs-min, 14px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-host {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 46%; padding: 2px 10px 2px 2px;
  border-radius: 12px; border: 1.5px solid rgba(227, 179, 65, .6); background: rgba(5, 12, 9, .5); color: var(--npc); font-weight: 700; font-size: var(--fs-min, 14px);
}
.rm-host b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-host .rm-face { flex: none; width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: linear-gradient(180deg, #24392f, #16241f); }
.rm-host:active { transform: translateY(1px); }
.rm-host:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; }
/* ワールドボスの小さな札（景色の下の帯。景色の上に浮かぶ札は、部屋の画面では出さない：絵をかくさない）。第8弾 QA */
.rm-wb {
  flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 10px; border-radius: 999px;
  border: 1.5px solid var(--wb, #ff8a9a); background: rgba(80, 14, 30, .55); color: #ffe3e7; font-size: var(--fs-min, 14px); font-weight: 700; -webkit-tap-highlight-color: transparent;
}
.rm-wb b { font-family: var(--font-dot); font-weight: 400; }
.rm-wb:active { transform: translateY(1px); }
.rm-wb:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; }
body:has(#main .room .rm-wb) #soc-notes .sn-chip.k-wboss { display: none; }
.rm-sleep { margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(60, 70, 130, .3); border: 1px solid rgba(150, 170, 255, .4); color: #dfe6ff; font-size: var(--fs-min, 14px); }

/* ---- いる人 ---- */
.rm-people { display: flex; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 2px 4px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.rm-p { flex: none; scroll-snap-align: start; }
.rm-p.host { display: block; margin: 0; max-width: none; } /* 町の人の札の .host（flex・下のすき間）を持ちこまない（主だけ低くなって、列が14pxのびていた） */
.rm-pb {
  position: relative; display: grid; justify-items: center; gap: 2px; width: 84px; min-height: 96px; padding: 4px 2px 6px; border-radius: 12px;
  border: 1px solid transparent; background: rgba(5, 12, 9, .3); color: var(--text); -webkit-tap-highlight-color: transparent;
}
.rm-pb:active { background: rgba(227, 179, 65, .14); }
.rm-pb:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; }
.rm-p.me .rm-pb { border-color: rgba(227, 179, 65, .45); }
.rm-fig { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 62px; width: 100%; }
.rm-fig img { display: block; image-rendering: pixelated; }
.rm-fig-x { font-size: 30px; }
.rm-pn { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-min, 14px); font-weight: 700; line-height: 1.3; }
.rm-p.host .rm-pn { color: var(--npc); }
.rm-p.guest .rm-pn { color: #9fe0ff; }
.rm-req { position: absolute; top: 0; right: 10px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; font-style: normal; font-weight: 900; font-size: var(--fs-min, 14px); line-height: 22px; text-align: center; background: #ffd84a; color: #3a2208; box-shadow: 0 0 0 2px #0b1310; }
.rm-zz { position: absolute; top: 0; left: 8px; font-style: normal; font-size: 18px; line-height: 1; }
.rm-req.r-active { background: #c7d0c9; color: #1f2a25; }
.rm-req.r-ready { background: #7fe0a6; color: #08301a; }
.rm-bub { position: absolute; top: -2px; left: 50%; z-index: 1; transform: translateX(-50%); padding: 2px; border-radius: 10px; background: #fffaf0; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); line-height: 0; animation: rmPop .25s ease-out both; }
.rm-bub img { image-rendering: pixelated; }
@keyframes rmPop { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

/* ---- ログ ---- */
.rm-log {
  min-height: 150px; max-height: 38vh; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px; border-radius: 12px;
  border: 1px solid var(--line-2); background: rgba(5, 12, 9, .55); font-size: calc(15px * var(--fs-k, 1)); line-height: 1.65;
}
.rm-log:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.rl { margin: 0 0 3px; overflow-wrap: anywhere; }
.rl-who { font-weight: 700; }
.rl-sep { color: var(--faint); }
.rl.k-host .rl-who { color: var(--npc); }
.rl.k-host .rl-t { color: #ffe9f3; }
.rl.k-sys { color: var(--muted); font-size: var(--fs-min, 14px); }
.rl-mk { color: var(--brass); margin-right: 4px; font-size: var(--fs-min, 14px); }
.rl.k-amb { color: #b6c4b9; font-size: var(--fs-min, 14px); padding-left: 10px; border-left: 2px solid rgba(182, 196, 185, .3); }
.rl.k-emote .rl-t { color: var(--muted); margin-left: 4px; }
.rl-emo { vertical-align: -3px; margin: 0 2px 0 4px; image-rendering: pixelated; }
.rl-ic { vertical-align: -5px; margin-right: 6px; image-rendering: pixelated; }
.rl-fortune { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 6px; background: rgba(255, 216, 74, .2); border: 1px solid rgba(255, 216, 74, .6); color: #ffe7a0; font-weight: 700; font-size: var(--fs-min, 14px); }
.rl.k-whisper { color: var(--violet); }
.rl.k-whisper .rl-t { color: #e6dcff; }
.rl.self { background: rgba(227, 179, 65, .08); border-radius: 6px; padding: 0 4px; }
.rl-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; background: rgba(199, 173, 255, .18); color: var(--violet); font-size: var(--fs-min, 14px); font-weight: 700; line-height: 1.5; }
.rl.k-party .rl-tag { background: rgba(92, 200, 168, .18); color: var(--hp); }
.rl.k-guild .rl-tag { background: rgba(227, 179, 65, .18); color: var(--brass-hi); }
.rl-empty { margin: 0; color: var(--faint); font-size: var(--fs-min, 14px); }

/* ---- コマンド ---- */
.rm-cmds { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.rm-cmd {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; padding: 6px 4px;
  border-radius: 12px; border: 1.5px solid var(--line-2); background: rgba(5, 12, 9, .38); color: var(--text); -webkit-tap-highlight-color: transparent;
}
.rm-cmd .ic { font-size: 22px; line-height: 1.1; }
.rm-cmd b { font-size: calc(15px * var(--fs-k, 1)); white-space: nowrap; }
.rm-cmd.hot { border-color: var(--brass); background: linear-gradient(180deg, rgba(227, 179, 65, .22), rgba(227, 179, 65, .1)); }
.rm-cmd.hot b { color: var(--brass-hi); }
.rm-cmd.k-go, .rm-cmd.k-talk, .rm-cmd.k-look { border-style: dashed; }
.rm-cmd:active { transform: translateY(1px); background: rgba(227, 179, 65, .16); }
.rm-cmd:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; }
.rm-cmd[disabled] { opacity: .5; }
/* いまは使えない（押すと理由の一言。集合中の いどう・冒険をつくる・さんか など） */
.rm-cmd.off { opacity: .5; border-style: dashed; }
.rm-cmd.off:active { transform: none; background: rgba(5, 12, 9, .38); }
.room-panel:empty { display: none; }
/* 部品が中だけスクロールするとき（スマホ・PC）：枠は部品のがわに（中の欄の枠が途中で切れて見えないように） */
.room .room-panel { border-radius: 14px; }
.room .room-panel:has(> .ab-wrap) { border: 1.5px solid rgba(227, 179, 65, .35); background: linear-gradient(180deg, rgba(227, 179, 65, .08), rgba(5, 12, 9, .3) 60%); }
.room .room-panel:has(> .lb-wrap) { border: 1.5px solid rgba(92, 200, 168, .55); background: linear-gradient(180deg, rgba(92, 200, 168, .1), rgba(5, 12, 9, .3) 70%); }
.room .room-panel:has(> .lb-wrap.k-manor) { border-color: rgba(199, 173, 255, .55); }
.room .room-panel > .ab-wrap, .room .room-panel > .lb-wrap { border: 0; border-radius: 0; background: none; }

/* ---- はじめの人の「つぎ」の帯（1行。押すと「行ってみる」、✕ で閉じる） ---- */
.rm-strip { display: flex; align-items: stretch; min-width: 0; border-radius: 12px; border: 1.5px solid rgba(255, 216, 74, .55); background: linear-gradient(90deg, rgba(255, 216, 74, .16), rgba(255, 216, 74, .04)); overflow: hidden; }
.rm-strip-go {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 2px 6px 2px 12px;
  border: 0; background: none; color: var(--text); text-align: left; font-size: var(--fs-min, 14px); line-height: 1.35; -webkit-tap-highlight-color: transparent;
}
.rm-strip-go b { flex: none; color: #ffd84a; }
.rm-strip-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-strip-ar { flex: none; color: #ffd84a; }
.rm-strip-x { flex: none; width: 44px; min-height: 44px; border: 0; border-left: 1px solid rgba(255, 216, 74, .3); background: none; color: var(--muted); font-size: var(--fs-min, 14px); }
.rm-strip-go:active, .rm-strip-x:active { background: rgba(255, 216, 74, .14); }
.rm-strip-go:focus-visible, .rm-strip-x:focus-visible { outline: 3px solid var(--brass); outline-offset: -3px; }

/* ---- 発言欄 ---- */
.rm-say {
  position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 8px 0 calc(8px + var(--safe-b));
  background: linear-gradient(180deg, transparent, var(--bg) 30%);
}
.rm-say input { flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line-2); background: rgba(5, 12, 9, .7); color: var(--text); font-size: 16px; }
.rm-say input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(227, 179, 65, .25); }
.rm-emo { flex: none; width: 46px; height: 46px; border-radius: 12px; border: 1.5px solid var(--line-2); background: rgba(5, 12, 9, .5); font-size: 22px; line-height: 1; }
.rm-send { flex: none; min-height: 46px; }
@media (min-width: 900px) { .rm-say { position: static; padding: 0; background: none; } }

/* =====================================================================
   第8弾 QA：スマホ（〜899px・高さ540px〜）の部屋の画面は、画面の高さにおさまる1列（ページはスクロールしない）
   上のバーの下を、景色・いる人・帯・部品・ログ・コマンド・発言欄で分ける。
   ・景色：背の低い画面では低く（絵は下ぞろえなので上が切れる。床と主の姿は残る）。部品があると、さらに低く
   ・部品：高さの35%まで（中だけスクロール）。ログ：のこり全部（いちばん下が新しい行）。コマンド：4つずつ（8つまでなら2行）
   ・発言欄：ふつうの並び（下にはりつけない）。足りないときだけ、部屋の中がスクロールする（ページはしない）
   町の部屋（#room）も、ひいらぎ館の部屋（#quest-root.manor）も同じ。横向きのスマホ（高さ540px未満）は、いままでどおりページがスクロール
   ===================================================================== */
@media (max-width: 899px) and (min-height: 540px) {
  body:has(#main .room) .layout { height: 100vh; height: 100dvh; min-height: 0; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
  body:has(#main .room) .shell { grid-template-rows: minmax(0, 1fr); min-height: 0; }
  body:has(#main .room) .main-col { min-height: 0; }
  body:has(#main .room) .app-main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding: 8px 8px calc(6px + var(--safe-b)); }
  body:has(#main .room) .credit { display: none; }
  #main > .room-wrap, #main > .quest.manor { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  #main .room {
    --scene-cut: 418px; /* 景色の高さ ＝ 画面の高さ − 上のバー − これ（景色のほかの物とすき間） */
    flex: 1 1 0; min-height: 0; gap: 6px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  }
  #main .room.has-strip { --scene-cut: 468px; }
  #main .room.has-panel { --scene-cut: 628px; }
  #main .room.has-panel.has-strip { --scene-cut: 678px; }
  #main .room .rm-sleep, #main .room .rm-people, #main .room .rm-strip, #main .room .rm-cmds, #main .room .rm-say { flex: none; }
  /* 景色：目安の高さ（画面の高さから）。足りないときは、部品といっしょに少しずつ低くなる（118pxまで。絵の下の床と主は残る） */
  #main .room .rm-view { display: flex; flex-direction: column; flex: 0 .2 auto; min-height: 118px; }
  #main .room .rm-scene { flex: 1 1 auto; min-height: 0; height: clamp(72px, calc(100dvh - var(--tb-h) - var(--scene-cut)), calc(96px * var(--k))); }
  #main .room .rm-cap { flex: none; padding-top: 2px; padding-bottom: 2px; }
  #main .room .rm-sleep { padding: 6px 10px; line-height: 1.45; }
  /* いる人：1行（指で横にスクロール。スクロールバーは出さない）。少し小さく */
  #main .room .rm-people { gap: 2px; padding: 0 2px 2px; scrollbar-width: none; }
  #main .room .rm-people::-webkit-scrollbar { display: none; }
  #main .room .rm-pb { width: 70px; min-height: 0; gap: 0; padding: 2px 2px 3px; }
  #main .room .rm-fig { height: 50px; }
  #main .room .rm-pn { max-width: 66px; }
  /* 部品（酒場の冒険のパーティー・集合の欄・館の見取り図）：35%まで、中だけスクロール */
  #main .room .room-panel { flex: 0 1 auto; min-height: 72px; max-height: 35%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  /* ログ：のこり全部 */
  #main .room .rm-log { flex: 1 1 0; min-height: 96px; max-height: none; padding: 6px 10px; line-height: 1.55; }
  /* コマンド：4つずつ。6文字以上の名前（つくってもらう・仲間モンスター・冒険をつくる）は2つ分の幅（.wide。room.js）。
     どの部屋も8つ分までなら2行（酒場7つ＋冒険をつくる・預かり所7つ＋仲間モンスター・お店6つ＋つくってもらう）。名前は折り返さない */
  #main .room .rm-cmds { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  #main .room .rm-cmd { min-width: 0; min-height: 46px; gap: 0; padding: 3px 2px; border-radius: 10px; }
  #main .room .rm-cmd.wide { grid-column: span 2; }
  #main .room .rm-cmd .ic { font-size: 17px; line-height: 1.15; }
  /* 名前：14px（大きい文字は16px。360pxの幅でも5文字が入る）。もっとせまい画面（〜340px）だけ、幅に合わせて少し小さく */
  #main .room .rm-cmd b { max-width: 100%; font-size: min(var(--fs-min, 14px), 4.1vw); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
  /* 発言欄：ふつうの並び */
  #main .room .rm-say { position: static; z-index: auto; gap: 6px; padding: 0; background: none; }
  #main .room .rm-say input { min-height: 44px; }
  #main .room .rm-emo { width: 44px; height: 44px; }
  #main .room .rm-send { min-height: 44px; }
}
/* 背の低いスマホ（375×667 など）：部屋の名前の帯の主の札は出さない（主は景色の中といる人の列にいる。はなすボタンもある） */
@media (max-width: 899px) and (min-height: 540px) and (max-height: 700px) {
  body:has(#main .room) .app-main { padding: 6px 6px calc(5px + var(--safe-b)); }
  #main .room { gap: 5px; }
  #main .room .rm-cap { min-height: 32px; }
  #main .room .rm-host { display: none; }
  #main .room .rm-wb { min-height: 36px; }
  #main .room .rm-view { min-height: 104px; }
  #main .room .rm-log { min-height: 84px; }
  #main .room .rm-cmds { gap: 4px; }
}

/* ---- 小窓（いどう・しらべる・人・エモート）と、しらべるの札 ---- */
.modal.room-sheet { width: min(520px, 100%); }
.rs-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.rs-head h2 { margin: 0; font-family: var(--font-dot); font-weight: 400; font-size: calc(20px * var(--fs-k, 1)); }
.rs-sub { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-min, 14px); }
.rs-fig { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(180deg, #24392f, #16241f); }
.rs-fig img { image-rendering: pixelated; }
.rs-list { display: grid; gap: 8px; }
.rs-it {
  display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 14px; border-radius: 12px; border: 1.5px solid var(--line-2);
  background: rgba(5, 12, 9, .35); color: var(--text); text-align: left;
}
.rs-it .ic { font-size: 22px; width: 28px; text-align: center; }
.rs-l { display: grid; min-width: 0; line-height: 1.35; }
.rs-l b { font-size: calc(16px * var(--fs-k, 1)); }
.rs-l small { color: var(--muted); font-size: var(--fs-min, 14px); }
.rs-it.cur { border-color: var(--brass); background: rgba(227, 179, 65, .12); opacity: 1; }
.rs-it.hot { border-color: var(--brass); }
.rs-it[disabled]:not(.cur) { opacity: .55; }
.rs-it:not([disabled]):active { transform: translateY(1px); background: rgba(227, 179, 65, .16); }
.rs-it:focus-visible { outline: 3px solid var(--brass); outline-offset: 1px; }
.rs-here { flex: none; margin-left: auto; padding: 2px 8px; border-radius: 8px; background: var(--brass); color: var(--brass-ink); font-size: var(--fs-min, 14px); font-weight: 700; }
.rs-emote .rs-list { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
.rs-emote .rs-it { flex-direction: column; justify-content: center; gap: 2px; padding: 8px 4px; text-align: center; }
.rs-emote .rs-it .ic { display: none; }
.rs-emo { image-rendering: pixelated; }
.modal.room-look { width: min(520px, 100%); }
.rm-look h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--font-dot); font-weight: 400; font-size: calc(20px * var(--fs-k, 1)); }
.rm-look p { margin: 0 0 6px; line-height: 1.7; }