/* A画面専用。出口ドアを含む画面だけに適用します。
   家具のボタン位置・大きさ・クリック処理は変更しません。
   背景差し替え：--room-a-image を url("images/room-a.jpg") にします。
   家具も描かれた画像なら --room-a-furniture-opacity を 0 にします。
   このCSSの読み込みを外せば、以前の仮表示に戻せます。 */
.scene:has(> .door) {
  --room-a-image: url("images/room-a.png");
  --room-a-furniture-opacity: 0;
  background-color: #46392e;
  background-image:
    var(--room-a-image),
    radial-gradient(ellipse at 24% 15%, #f6d49836, transparent 65%),
    linear-gradient(180deg, #65604c 0%, #494c3c 61%, #a38a59 61%, #a38a59 62%, #3b2b20 62%, #3b2b20 65%, #67503b 65%, #352a22 100%);
  /* renderRoomの共通cover指定より優先し、画像の切り抜きによる位置ずれを防ぐ。 */
  background-size: 100% 100% !important;
  border-color: #877557;
}
.scene:has(> .door)::before {
  pointer-events: none;
  opacity: var(--room-a-furniture-opacity);
  background:
    linear-gradient(90deg, #1616104d, transparent 18%, transparent 80%, #16161055),
    repeating-linear-gradient(90deg, transparent 0 12%, #c1a77322 12% 12.2%, #171a1326 12.2% 12.6%, transparent 12.6% 24%);
  box-shadow: inset 0 12px 0 #312b22, inset 0 15px 0 #ae956254, inset 0 -22px 45px #160f0b55;
}
.scene:has(> .door)::after {
  pointer-events: none;
  opacity: var(--room-a-furniture-opacity);
  top: 14%;
  left: 8%;
  color: #e2d2aa;
  border-block: 1px solid #d2bd8470;
  padding: 10px 6px;
  font-size: clamp(13px, 2vw, 22px);
  text-shadow: 0 2px 3px #1119;
}
/* 名札・ホバー・フォーカスは cafe-common.css に共通化。 */
.scene:has(> .door) .drawing { opacity: var(--room-a-furniture-opacity); }

/* 深い木色の框と曇りガラス、真鍮の取っ手。 */
.scene:has(> .door) .door .drawing {
  border: clamp(5px, 1vw, 10px) solid #3c291d;
  border-radius: 3px 3px 0 0;
  background:
    linear-gradient(#71807755, #273e37bb) center 12% / 72% 51% no-repeat,
    linear-gradient(90deg, #c8a27430, transparent 25%, #180e0940 80%),
    repeating-linear-gradient(90deg, #65452c 0 3px, #614129 3px 7px, #6c4930 7px 9px);
  box-shadow: inset 0 0 0 2px #b3895266, inset 0 -3px 9px #100a0766, 5px 6px 12px #17120d77;
}
.scene:has(> .door) .door .drawing::before {
  position: absolute;
  top: 36%;
  padding: 5px 6px;
  background: #27352e;
  border-color: #c3a778;
  color: #eadcb5;
  font-size: clamp(10px, 1.5vw, 15px);
  box-shadow: 1px 3px 4px #0005;
}
.scene:has(> .door) .door .drawing::after {
  width: 8%;
  height: 4%;
  background: radial-gradient(circle at 30% 25%, #fae5ac, #b08946 65%, #654920);
  box-shadow: 0 3px 3px #20170dcc;
}

/* 針の角度は既存のまま（長針12、短針7）。 */
.scene:has(> .door) .clock-face {
  flex: 0 0 auto;
  width: min(100%, 112px);
  border-width: clamp(4px, .7vw, 7px);
  border-color: #503322;
  background: radial-gradient(circle, #fcf0cd 55%, #d5c393);
  box-shadow: 0 0 0 2px #b39a6b, 3px 7px 10px #19150e77, inset 0 0 6px #7c623a66;
  color: #322d23;
  text-shadow: none;
}
.scene:has(> .door) .clock-face::before,
.scene:has(> .door) .clock-face::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font: 12px Georgia, serif;
}
.scene:has(> .door) .clock-face::before { content: "9"; left: 3%; }
.scene:has(> .door) .clock-face::after { content: "3"; right: 3%; }
.scene:has(> .door) .clock-face b { font-size: clamp(10px, 1.3vw, 14px); line-height: 1; }
.scene:has(> .door) .hand { background: #252820; width: 2px; z-index: 1; }
.scene:has(> .door) .hand.hour { width: 3px; height: 27%; }

/* 木の丸テーブル。脚と天板は元の操作領域内で描画。 */
.scene:has(> .door) .table .drawing {
  border-color: var(--cafe-wood);
  border-width: clamp(3px, .6vw, 6px);
  background:
    radial-gradient(ellipse at 35% 25%, #d9b17b55, transparent 70%),
    repeating-linear-gradient(5deg, #91653e 0 3px, #946940 3px 5px, #885d36 5px 7px);
  box-shadow: inset 0 0 0 2px #d5af724d, 0 7px 0 #452d1b, 3px 17px 15px #23170e55;
}
.scene:has(> .door) .table .drawing::after {
  background: linear-gradient(90deg, #352519, #765033 45%, #3d291a);
  box-shadow: 5px 7px 7px #25180e55;
}

/* 既存の3要素を、間隔のある木製・深緑の座面の椅子に。 */
.scene:has(> .door) .chairs .drawing { gap: 9%; align-items: flex-start; padding-top: 3%; }
.scene:has(> .door) .chair {
  flex: 0 0 24%;
  height: 70%;
  border: clamp(3px, .55vw, 6px) solid #4d3422;
  border-bottom: 0;
  border-top-width: clamp(12px, 2vw, 23px);
  border-radius: 7px 7px 0 0;
  background: linear-gradient(#8d634040, transparent 50%);
  box-shadow: 2px 1px 0 #b590544d, inset 2px 0 #b5905433;
}
.scene:has(> .door) .chair::after {
  left: -3px;
  right: -3px;
  height: clamp(8px, 1.3vw, 14px);
  background: linear-gradient(#61715a, #344c3e);
  border-radius: 4px;
  box-shadow: 0 4px 0 #4d3422, 3px 9px 6px #1a140f55;
}