/* B・C専用。小物の既存ボタンは移動・拡縮しません。
   画像へ置換する場合は各画面のimageとfurniture-opacityを設定します。 */
.scene:has(> .cups) {
  --room-b-image: url("images/room-b.png");
  --room-b-furniture-opacity: 0;
  --room-image: var(--room-b-image);
  --furniture-opacity: var(--room-b-furniture-opacity);
}
.scene:has(> .plant) {
  --room-c-image: url("images/room-c.png");
  --room-c-furniture-opacity: 0;
  --room-image: var(--room-c-image);
  --furniture-opacity: var(--room-c-furniture-opacity);
}
.scene:has(> .cups), .scene:has(> .plant) {
  background-color: #46392e;
  background-image: var(--room-image),
    radial-gradient(ellipse at 24% 15%, #f6d49836, transparent 65%),
    linear-gradient(#65604c, var(--cafe-wall) 61%, #a38a59 61% 62%, #3b2b20 62% 65%, #67503b 65%, #352a22);
  background-size: 100% 100% !important;
  border-color: #877557;
}
.scene:has(> .cups)::before, .scene:has(> .plant)::before {
  pointer-events: none;
  opacity: var(--furniture-opacity);
  background: linear-gradient(90deg, #1616104d, transparent 18% 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 #312b22, inset 0 15px #ae956254, inset 0 -22px 45px #160f0b55;
}
.scene:has(> .cups)::after, .scene:has(> .plant)::after {
  pointer-events: none;
  opacity: var(--furniture-opacity);
  color: #e2d2aa;
  text-shadow: 0 2px 3px #1119;
}
.scene:has(> .plant)::after { left: 9%; top: 11%; font-size: clamp(12px, 1.8vw, 18px); }
.scene:has(> .cups) .drawing, .scene:has(> .plant) .drawing,
.scene:has(> .cups) .counter-decor, .scene:has(> .plant) .window-decor {
  opacity: var(--furniture-opacity);
}

/* B：磨かれた木のカウンター。 */
.scene:has(> .cups) .counter-decor {
  pointer-events: none;
  border-top-color: #ab8254;
  border-top-width: clamp(7px, 1.3vw, 14px);
  background: repeating-linear-gradient(90deg, #65462e 0 23.5%, #392819 23.5% 24%, #b1844f55 24% 24.3%, #65462e 24.3% 25%);
  box-shadow: inset 0 3px #e0b97c66, inset 0 12px 15px #20130966, 0 12px 18px #160f0955;
}
/* 4個の既存要素をそのまま使う。持ち手が隣のカップに重ならない間隔。 */
.scene:has(> .cups) .cup-row { gap: 8%; transform: translateY(-8%); }
.scene:has(> .cups) .cup {
  flex: 0 0 16%;
  height: clamp(24px, 3.5vw, 39px);
  border-top: 3px solid #d5c5a0;
  background: linear-gradient(90deg, #cebea0, #fff1ce 40%, #e6d6b3);
  border-radius: 2px 2px 35% 35%;
  box-shadow: 0 4px #baa984, 0 7px 0 3px #e7d9b8, 2px 10px 6px #20160d66;
}
.scene:has(> .cups) .cup::after {
  width: 24%; height: 46%; right: -24%; top: 12%;
  border: 2px solid #e6d6b3;
}
.scene:has(> .cups) .drawer .drawing {
  border: clamp(3px, .5vw, 5px) solid var(--cafe-wood);
  background: repeating-linear-gradient(4deg, #825b36 0 4px, #89613b 4px 6px, #7e5532 6px 9px);
  box-shadow: inset 0 0 0 1px #c29c5e77, inset 0 4px 7px #34211366, 2px 3px 3px #20130966;
}
.scene:has(> .cups) .drawer .drawing::after {
  height: 7px;
  background: linear-gradient(#ebd099, #9a7037);
  box-shadow: 0 3px 3px #382516;
}
.scene:has(> .cups) .drawer .drawing::before {
  content: ""; position: absolute; left: 49%; top: 62%; width: 4px; height: 7px;
  border-radius: 50% 50% 2px 2px; background: #302317;
}
.scene:has(> .cups) .register .drawing {
  border-width: clamp(3px, .5vw, 5px);
  border-color: #27332c;
  background: linear-gradient(135deg, #71806b, #42574a 55%, #2b3b32);
  box-shadow: inset 0 0 0 1px #b3b08a77, 4px 6px 9px var(--cafe-shadow);
}
.scene:has(> .cups) .register .drawing::before {
  background: #d3d0a9; color: #263b2f; border: 2px solid #233b2e;
  font: clamp(16px, 2vw, 23px) monospace; padding: 2px 14%;
}
.scene:has(> .cups) .register .drawing::after {
  content: ""; position: absolute; left: 22%; right: 22%; top: 52%; height: 19%;
  background: repeating-linear-gradient(90deg, #e2d5b7 0 19%, transparent 19% 27%);
  border-bottom: 3px solid #23382e;
}
.scene:has(> .cups) .can-row {
  border-bottom-color: var(--cafe-wood);
  border-bottom-width: clamp(5px, .8vw, 9px);
  box-shadow: 0 3px #b38b5155, 0 8px 8px #23190f55;
}
.scene:has(> .cups) .can {
  height: clamp(45px, 6.5vw, 74px);
  border-top-color: #c0b798;
  border-bottom: 4px solid #b2a684;
  box-shadow: inset 4px 0 8px #fff2, inset -5px 0 8px #0002, 2px 2px 4px #241a1266;
  text-shadow: 0 1px #fff5;
}
/* 黄・赤・青は元の順序と色名を維持し、暗くしすぎない。 */
.scene:has(> .cups) .can.yellow { background-color: #e1bd55; }
.scene:has(> .cups) .can.red { background-color: #c77b67; }
.scene:has(> .cups) .can.blue { background-color: #84aebf; }

/* C：夜の窓と木枠。 */
.scene:has(> .plant) .window-decor {
  pointer-events: none;
  border-width: clamp(5px, .8vw, 9px);
  border-color: #745236;
  background: linear-gradient(90deg, transparent 48%, #977249 48% 52%, transparent 52%),
    linear-gradient(transparent 48%, #977249 48% 52%, transparent 52%),
    radial-gradient(ellipse at 20% 10%, #66807b55, transparent 60%), linear-gradient(#192c37, #0e2029);
  box-shadow: inset 0 0 12px #050e17aa, 0 4px 0 #bc966255, 4px 7px 12px var(--cafe-shadow);
}
.scene:has(> .plant) .window-decor::after { font-size: clamp(27px, 5vw, 50px); }
.scene:has(> .plant) .side-table .drawing {
  border-color: var(--cafe-wood);
  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 #452d1b, 3px 17px 15px #23170e55;
}
.scene:has(> .plant) .side-table .drawing::after {
  background: linear-gradient(90deg, #352519, #765033 45%, #3d291a);
}
.scene:has(> .plant) .menu .drawing {
  color: #57482c;
  background: linear-gradient(90deg, #d4c29a, #f2e5c1 16%, #e4d1a6);
  border-color: #887046;
  box-shadow: 2px 4px 4px #2c211755;
  text-shadow: none;
  font-size: clamp(12px, 1.8vw, 18px);
  letter-spacing: .08em;
}
.scene:has(> .plant) .sugar .drawing {
  border-top-color: #b9a887;
  background: linear-gradient(90deg, #c7bc9e, #fff1d1 45%, #dbd0b3);
  box-shadow: inset 0 -4px #a6987644, 2px 5px 5px #21170e66;
}
/* 絵文字を隠し、同じ操作領域内に葉と鉢を描く。鉢の後ろに鍵を隠せる陰。 */
.scene:has(> .plant) .plant .drawing { font-size: 0; filter: none; }
.scene:has(> .plant) .plant .drawing::before {
  content: ""; position: absolute; inset: 2% 4% 22%;
  background:
    radial-gradient(ellipse at 32% 25%, #6e8453 0 16%, transparent 17%),
    radial-gradient(ellipse at 70% 42%, #73835a 0 19%, transparent 20%),
    radial-gradient(ellipse at 24% 64%, #536e45 0 20%, transparent 21%),
    radial-gradient(ellipse at 68% 76%, #415f40 0 20%, transparent 21%),
    linear-gradient(90deg, transparent 47%, #716342 48% 52%, transparent 53%);
}
.scene:has(> .plant) .plant .drawing::after {
  content: ""; position: absolute; left: 26%; right: 24%; bottom: 12%; height: 29%;
  background: linear-gradient(90deg, #694630, #ab8055 40%, #65432e);
  border-top: 6px solid #bc9364;
  border-radius: 3px 3px 24% 24%;
  box-shadow: 4px 6px 8px #19130b88, inset 0 4px 3px #3a2d2055;
}
.scene:has(> .plant) .box .drawing {
  border-width: clamp(3px, .5vw, 5px); border-color: var(--cafe-wood);
  background: repeating-linear-gradient(5deg, #90613b 0 4px, #9c6d43 4px 7px);
  box-shadow: inset 0 9px #b18754, inset 0 11px #4f351f, 3px 6px 8px var(--cafe-shadow);
}
.scene:has(> .plant) .box .drawing::after {
  content: "0 0 0";
  background: #302c22; color: #f1deb5; border-color: #c5a775;
  font: clamp(12px, 1.8vw, 18px) monospace; padding: 3px 5px;
  border-radius: 3px; text-shadow: none;
}