/* ScreenBuddy (web) — phòng chung kiểu nhà búp bê (room.js). */

/* =====================================================================
 * Chủ đề phòng (theo "ảnh nền" của phòng chung). Mặc định = Phòng ấm.
 * ===================================================================== */
.room-world {
  --wall-a: #f7e6d1;
  --wall-b: #efd3b3;
  --wall-pattern: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 3px, transparent 3px 48px);
  --wains: #e2bb93;
  --trim: #fff6ea;
  --side-a: #efd4b3;
  --side-b: #d6b28b;
  --floor-a: #cf9b6e;
  --floor-b: #a06f47;
  --plank: rgba(70, 35, 10, 0.2);
  --wood: #b27d51;
  --wood-d: #8a5a35;
  --wood-l: #cd9a6b;
  --sofa: #86a9c9;
  --sofa-l: #9fbfdb;
  --sofa-d: #6a8caa;
  --pillow: #f4b7a7;
  --pillow-2: #ff8fab;
  --rug: #edb9a5;
  --rug-2: #fff4ea;
  --curtain: #f6f1e7;
  --lamp: #e07a5f;
  --label: #ff8fab;
  --sun: 0.2;
  --plx: 0;
  --ply: 0;
}

.room-world.theme-sunset {
  --wall-a: #ffe6da;
  --wall-b: #fbcdbd;
  --wall-pattern: radial-gradient(circle, rgba(255, 255, 255, 0.45) 1.6px, transparent 2.2px) 0 0 / 26px 26px;
  --wains: #f1a78e;
  --side-a: #fbd5c6;
  --side-b: #e9ae98;
  --sofa: #e98a7d;
  --sofa-l: #f4a597;
  --sofa-d: #c96d62;
  --pillow: #ffd8a8;
  --rug: #f7d0ae;
  --curtain: #fff3e8;
  --label: #ffb86b;
  --sun: 0.26;
}

.room-world.theme-sky {
  --wall-a: #edf6ff;
  --wall-b: #d8eafb;
  --wall-pattern: radial-gradient(circle, rgba(255, 255, 255, 0.7) 1.6px, transparent 2.2px) 0 0 / 30px 30px;
  --wains: #b8d6f0;
  --side-a: #dcecfb;
  --side-b: #b9d2ea;
  --floor-a: #d2aa82;
  --floor-b: #a98059;
  --sofa: #f2b8a2;
  --sofa-l: #f7cbb9;
  --sofa-d: #d59882;
  --pillow: #fff1a8;
  --rug: #fbe3a6;
  --label: #5fa8e8;
  --sun: 0.24;
}

.room-world.theme-night {
  --wall-a: #30346a;
  --wall-b: #262a56;
  --wall-pattern: radial-gradient(circle, rgba(255, 255, 255, 0.12) 1.3px, transparent 2px) 0 0 / 34px 34px;
  --wains: #3b3f7a;
  --trim: #4d5294;
  --side-a: #2c3062;
  --side-b: #20234a;
  --floor-a: #6b5140;
  --floor-b: #45342a;
  --plank: rgba(0, 0, 0, 0.28);
  --wood: #8a6246;
  --wood-d: #684832;
  --wood-l: #a07656;
  --sofa: #7b6fc4;
  --sofa-l: #9087d6;
  --sofa-d: #5f55a3;
  --pillow: #ffd166;
  --pillow-2: #ff8fab;
  --rug: #5d4f9a;
  --rug-2: #b6a9ff;
  --curtain: #4b4f8e;
  --label: #ffd166;
  --sun: 0.08;
}

.room-world.theme-sakura {
  --wall-a: #fff1f6;
  --wall-b: #ffdde9;
  --wall-pattern: radial-gradient(circle, rgba(255, 150, 185, 0.35) 2px, transparent 2.6px) 0 0 / 28px 28px;
  --wains: #f6bfd2;
  --side-a: #ffe3ed;
  --side-b: #f0bccd;
  --floor-a: #d8ad8b;
  --floor-b: #b38363;
  --sofa: #f39ab9;
  --sofa-l: #f8b6cc;
  --sofa-d: #d67b9b;
  --pillow: #ffffff;
  --rug: #fff5f8;
  --rug-2: #f6a5c0;
  --curtain: #ffffff;
  --label: #ff7aa2;
}

.room-world.theme-beach {
  --wall-a: #f0fbf9;
  --wall-b: #dcf2ee;
  --wall-pattern: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0 12px, transparent 12px 38px);
  --wains: #a4dbd2;
  --side-a: #e1f4f0;
  --side-b: #b9ddd6;
  --floor-a: #e3cba1;
  --floor-b: #c3a473;
  --plank: rgba(90, 60, 20, 0.16);
  --wood: #c49a6c;
  --wood-d: #9d7550;
  --wood-l: #dcb88b;
  --sofa: #f6c56a;
  --sofa-l: #f9d58f;
  --sofa-d: #d9a84d;
  --pillow: #7cc6d6;
  --rug: #86cfdd;
  --rug-2: #ffffff;
  --label: #2fa3c9;
  --sun: 0.28;
}

.room-world.theme-forest {
  --wall-a: #eef6ea;
  --wall-b: #d9e9d0;
  --wall-pattern: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0 2px, transparent 2px 22px);
  --wains: #a7c898;
  --side-a: #dcebd4;
  --side-b: #b4cda8;
  --floor-a: #a88060;
  --floor-b: #7c5a3e;
  --sofa: #d98f5f;
  --sofa-l: #e6a97f;
  --sofa-d: #b87548;
  --pillow: #f2e8cf;
  --rug: #cfe3b8;
  --rug-2: #7fae6a;
  --label: #5aa469;
}

.room-world.theme-lavender {
  --wall-a: #f5efff;
  --wall-b: #e6dbff;
  --wall-pattern: radial-gradient(circle, rgba(255, 255, 255, 0.6) 1.6px, transparent 2.2px) 0 0 / 24px 24px;
  --wains: #c7b4f0;
  --side-a: #ebe2ff;
  --side-b: #cbbbee;
  --floor-a: #c49f80;
  --floor-b: #9c785b;
  --sofa: #a08ae0;
  --sofa-l: #b8a6ec;
  --sofa-d: #8470c4;
  --pillow: #ffd6e8;
  --rug: #f3d9ff;
  --rug-2: #a08ae0;
  --label: #b18cff;
}

/* Màu dùng trong SVG (thuộc tính fill/stroke không nhận var() trực tiếp). */
.f-wood { fill: var(--wood); }
.f-wood-d { fill: var(--wood-d); }
.f-wood-l { fill: var(--wood-l); }
.s-wood { stroke: var(--wood); }
.s-wood-d { stroke: var(--wood-d); }
.f-sofa { fill: var(--sofa); }
.f-sofa-l { fill: var(--sofa-l); }
.f-sofa-d { fill: var(--sofa-d); }
.f-pillow { fill: var(--pillow); }
.f-pillow-2 { fill: var(--pillow-2); }
.f-rug { fill: var(--rug); }
.s-rug-2 { stroke: var(--rug-2); }
.f-trim { fill: var(--trim); }
.f-lamp { fill: var(--lamp); }
.f-label { fill: var(--label); }
.stop-floor-a { stop-color: var(--floor-a); }
.stop-floor-b { stop-color: var(--floor-b); }
.stop-side-a { stop-color: var(--side-a); }
.stop-side-b { stop-color: var(--side-b); }
.sun-a { stop-opacity: var(--sun); }
.plank-line { stroke: var(--plank); stroke-width: 1.2; }
.plank-joint { stroke: var(--plank); stroke-width: 1; opacity: 0.8; }

/* =====================================================================
 * Các lớp: tường sau (0) · sàn + tường bên (1) · đồ trang trí (2) · TV/đồng hồ (3)
 *          · nhân vật + đồ đạc xếp theo độ sâu (5) · cây phía trước (8)
 * ===================================================================== */
.room-world {
  position: absolute;
  inset: 0;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.45s ease;
}

.room-art {
  display: none;
}

.room-on .room-art {
  display: block;
}

.room-back {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.room-back,
.room-on .sbs-items,
.room-on .act-layer {
  transform: translate3d(calc(var(--plx) * 4px), calc(var(--ply) * 1.5px), 0);
}

.room-shell {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.room-shell svg {
  position: absolute;
  left: 0;
  top: 0;
}

.room-depth {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.room-depth > * {
  pointer-events: auto;
}

.room-front {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  transform: translate3d(calc(var(--plx) * -12px), calc(var(--ply) * -4px), 0);
}

.room-on .sbs-bg {
  display: none;
}

.room-on .sbs-items {
  z-index: 2;
}

/* Đang trang trí: đồ trang trí nổi lên trên TV → món nào lỡ nằm sau TV vẫn kéo ra được. */
.stage-wrap.editing .room-on .sbs-items {
  z-index: 4;
}

/* Phòng quá nhỏ: TV + bảng đếm giờ nổi lên trên đồ đạc và nhân vật (YouTube cấm che khung phát). */
.room-compact .act-layer {
  z-index: 6;
}

/* ---------------- Tường sau ---------------- */
.room-wallpaper {
  position: absolute;
  background: var(--wall-pattern), linear-gradient(180deg, var(--wall-a), var(--wall-b));
}

.room-wainscot {
  position: absolute;
  border-top: 5px solid var(--trim);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 66px),
    linear-gradient(180deg, var(--wains), color-mix(in srgb, var(--wains) 84%, #000000));
  box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.05);
}

.room-lights {
  position: absolute;
}

.room-lights svg {
  display: block;
  overflow: visible;
}

.room-lights .bulb {
  filter: drop-shadow(0 0 3px currentColor);
  animation: room-twinkle 3s ease-in-out infinite;
}

.theme-night .room-lights .bulb {
  filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 2px currentColor);
}

@keyframes room-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Cửa sổ: cảnh bên ngoài trôi xa hơn tường → có chiều sâu */
.room-window {
  position: absolute;
}

.room-pane {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 10px 10px 4px 4px;
  background: #bfe3ff;
}

.room-sky {
  position: absolute;
  inset: -16px;
  background-position: center;
  background-size: cover;
  transform: translate3d(calc(var(--plx) * 10px), calc(var(--ply) * 5px), 0);
}

.room-sky.loading {
  animation: sbs-shimmer 1.4s ease-in-out infinite;
}

.room-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.3) 0 16%, transparent 16% 28%, rgba(255, 255, 255, 0.14) 28% 34%, transparent 34%);
  pointer-events: none;
}

.room-frame {
  position: absolute;
  inset: -7px;
  border: 7px solid var(--trim);
  border-radius: 14px 14px 6px 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.room-frame::before,
.room-frame::after {
  content: "";
  position: absolute;
  background: var(--trim);
}

.room-frame::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 6px;
  transform: translateX(-50%);
}

.room-frame::after {
  top: 44%;
  left: 0;
  right: 0;
  height: 6px;
}

.room-sill {
  position: absolute;
  left: -16px;
  right: -16px;
  bottom: -17px;
  height: 10px;
  border-radius: 4px;
  background: var(--trim);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.14);
}

.room-rod {
  position: absolute;
  left: -30%;
  right: -30%;
  top: -18px;
  height: 5px;
  border-radius: 3px;
  background: var(--wood-d);
}

.room-curtain {
  position: absolute;
  top: -16px;
  bottom: -14px;
  width: 30%;
  background: repeating-linear-gradient(90deg, var(--curtain) 0 8px, color-mix(in srgb, var(--curtain) 80%, #000000) 8px 11px, var(--curtain) 11px 16px);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.14));
}

.room-curtain.l {
  left: -24%;
  clip-path: polygon(0 0, 100% 0, 88% 40%, 58% 58%, 82% 100%, 0 100%);
}

.room-curtain.r {
  right: -24%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%, 42% 58%, 12% 40%);
}

/* Đồng hồ treo tường (ẩn khi đang Pomodoro — bảng đếm giờ thế chỗ) */
.room-clock {
  position: absolute;
  width: 60px;
  height: 60px;
  transform: scale(var(--k, 1));
  transform-origin: 50% 0;
}

.room-clock svg,
.room-shelf svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.room-clock .clock-h,
.room-clock .clock-m {
  transform-box: view-box;
  transform-origin: 30px 30px;
}

.pomo-on .room-clock {
  display: none;
}

.room-shelf {
  position: absolute;
  width: 150px;
  height: 80px;
  transform: scale(var(--k, 1));
  transform-origin: 0 0;
}

/* ---------------- Nút đổi cỡ giá vẽ / bảng ghim (khi trang trí) ---------------- */
.furn-size {
  position: absolute;
  z-index: 9;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 3px 5px 3px 8px;
  border-radius: 999px;
  background: rgba(22, 24, 38, 0.86);
  color: #ffffff;
  font: 600 12px/1 "Segoe UI", system-ui, sans-serif;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.stage-wrap.editing .room-on .furn-size {
  display: inline-flex;
}

.furn-size button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font: 700 15px/24px "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}

.furn-size button:hover {
  background: #6366f1;
}

.furn-size-label {
  min-width: 36px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------------- 📌 Bảng ghim ---------------- */
.room-cork {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
  border: 6px solid var(--wood);
  border-radius: 6px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  cursor: zoom-in;
  transition: box-shadow 0.2s ease;
}

.room-cork:hover {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.75), 0 8px 18px rgba(0, 0, 0, 0.28);
}

.cork-surface {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 30% 30%, rgba(90, 50, 20, 0.28) 0.9px, transparent 1.4px) 0 0 / 7px 7px,
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.2) 0.9px, transparent 1.4px) 3px 2px / 9px 9px,
    #cfa06d;
}

.room-cork .cork-surface {
  overflow: hidden;
}

/* Giấy nhớ trên bảng ghim: ghim đỏ thay cho băng dính */
.cork-surface .sbs-note::before {
  top: 3cqw;
  width: 13cqw;
  height: 13cqw;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 35%, #ff9d9d, #d63c3c 60%, #a82222);
  box-shadow: 0 1.5cqw 2.5cqw rgba(0, 0, 0, 0.35);
}

.room-cork .sbs-h {
  display: none !important;
}

.cork-count {
  position: absolute;
  top: -12px;
  right: -12px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #ef4444;
  color: #ffffff;
  font: 700 11px/20px "Segoe UI", system-ui, sans-serif;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.cork-count[hidden] {
  display: none;
}

.room-cork.pulse {
  animation: cork-pulse 0.7s ease 3;
}

@keyframes cork-pulse {
  50% { box-shadow: 0 0 0 6px rgba(255, 214, 102, 0.85), 0 8px 18px rgba(0, 0, 0, 0.28); }
}

.cork-zoom {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: 8px;
}

.cork-zoom[hidden] {
  display: none;
}

.cork-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.cork-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 14px;
  border-radius: 999px;
  background: rgba(22, 24, 38, 0.86);
  color: #ffffff;
  font: 600 13px/1.2 "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.cork-sub {
  opacity: 0.7;
  font-weight: 400;
}

.cork-btn {
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font: 600 12.5px/1.2 "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}

.cork-btn:hover {
  background: rgba(255, 255, 255, 0.26);
}

.cork-btn.primary {
  background: #6366f1;
}

.cork-btn.primary:hover {
  background: #5458e8;
}

.cork-big {
  position: relative;
  aspect-ratio: 25 / 18;
  border: 12px solid #b27d51;
  border-radius: 12px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.cork-big .cork-surface {
  position: absolute;
  inset: 0;
}

/* Giấy nhớ cũ (dán khi còn là sân khấu phẳng) khá nhỏ → trên bảng lớn luôn đủ to để đọc. */
.cork-big .sbs-item.kind-note {
  min-width: 118px;
}

.cork-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(70, 35, 10, 0.7);
  font: 600 15px/1.4 "Segoe UI", system-ui, sans-serif;
  pointer-events: none;
}

.cork-empty[hidden] {
  display: none;
}

.cork-hint {
  color: #ffffff;
  font: 12px/1.3 "Segoe UI", system-ui, sans-serif;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ---------------- Máy quay tiến vào đồ vật (bảng ghim, giá vẽ) ---------------- */
.room-focus .room-world {
  transform: scale(1.06);
  filter: blur(2.5px) brightness(0.68) saturate(0.85);
}

.room-focus .hug-btn {
  display: none;
}

/* ---------------- Đồ đạc trên sàn ---------------- */
.room-furn {
  position: absolute;
  transform-origin: 50% 100%;
}

.room-depth > .room-furn {
  pointer-events: none;
}

.room-furn svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.room-depth > .furn-easel,
.room-depth > .furn-vinyl,
.room-depth > .furn-album,
.room-depth > .furn-plant {
  pointer-events: auto;
  cursor: pointer;
}

.furn-easel:hover,
.furn-vinyl:hover,
.furn-album:hover,
.furn-plant:hover {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.9));
}

/* Bàn làm việc: laptop hiện khi có người ngồi (Pomodoro), đèn bàn sáng khi làm việc / trời tối */
.desk-laptop {
  display: none;
}

.furn-desk.busy .desk-laptop.l,
.furn-desk.busy.seats-2 .desk-laptop.r {
  display: inline;
}

.laptop-logo {
  fill: rgba(255, 255, 255, 0.75);
}

.furn-desk.busy .laptop-logo {
  fill: #ffffff;
  filter: drop-shadow(0 0 2px #b9e4ff);
}

.desk-bulb {
  fill: #e9e2cf;
}

.furn-desk.lamp-on .desk-bulb {
  fill: #fff7cc;
  filter: drop-shadow(0 0 4px #ffd970);
}

.desk-glow {
  position: absolute;
  left: -70px;
  top: -150px;
  width: 280px;
  height: 250px;
  background: radial-gradient(ellipse 42% 50% at 46% 64%, rgba(255, 222, 150, 0.6), rgba(255, 210, 130, 0.2) 55%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

.furn-desk.lamp-on .desk-glow {
  opacity: 1;
}

/* Giá vẽ: tranh vẽ chung hiện ngay trên khung */
.easel-canvas {
  position: absolute;
  left: 8.4%;
  top: 8.4%;
  width: 83.2%;
  height: 40.4%;
  overflow: hidden;
  border-radius: 2px;
}

.easel-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.easel-brush {
  position: absolute;
  top: -6px;
  right: -8px;
  display: none;
  font: 26px/1 "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  animation: easel-brush 0.5s ease-in-out infinite alternate;
  pointer-events: none;
}

.furn-easel.drawing .easel-brush {
  display: block;
}

@keyframes easel-brush {
  from { transform: rotate(-18deg) translateY(0); }
  to { transform: rotate(10deg) translateY(4px); }
}

.furn-easel .board-badge {
  top: 28%;
  right: -26px;
  bottom: auto;
  font-size: 14px;
  white-space: nowrap;
}

/* Máy hát: đĩa quay, cần đọc hạ xuống, nốt nhạc bay lên khi đang phát */
.vinyl-spin {
  transform-box: fill-box;
  transform-origin: center;
}

.furn-vinyl.playing .vinyl-spin {
  animation: vinyl-spin 1.8s linear infinite;
}

@keyframes vinyl-spin {
  to { transform: rotate(360deg); }
}

.vinyl-arm {
  transform-box: view-box;
  transform-origin: 91px 30px;
  transform: rotate(-32deg);
  transition: transform 0.8s ease;
}

.furn-vinyl.playing .vinyl-arm {
  transform: rotate(0deg);
}

.vinyl-notes {
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  height: 0;
  pointer-events: none;
}

.vinyl-note {
  position: absolute;
  bottom: 0;
  font: 800 24px/1 "Segoe UI Symbol", "Segoe UI", sans-serif;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  animation: vinyl-note 2.6s ease-out forwards;
}

@keyframes vinyl-note {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6) rotate(-10deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -70px) scale(1.15) rotate(-14deg); }
}

/* Cây phía trước (tiền cảnh, hơi nhoè) — góc trái, lật ngang */
.room-front .fg-plant {
  position: absolute;
  left: -22px;
  bottom: -18px;
  width: 150px;
  height: 120px;
  transform: scale(calc(-1 * var(--k, 1)), var(--k, 1));
  transform-origin: 30% 100%;
  filter: blur(1.4px);
  opacity: 0.95;
}

/* =====================================================================
 * 🎬 Rạp phim: đèn tối (tường + sàn tối hẳn, đồ đạc tối vừa, người vẫn rõ), màn chiếu giữa tường
 * (activities.css), ánh sáng màn chiếu hắt xuống sàn, hai ghế lười phía trước.
 * ===================================================================== */
.cin-dim,
.cin-glow {
  position: absolute;
  inset: -24px;
  z-index: 3;
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease;
  transform: translate3d(calc(var(--plx) * 4px), calc(var(--ply) * 1.5px), 0);
}

.room-on .cin-dim,
.room-on .cin-glow {
  display: block;
}

.cin-dim {
  background: radial-gradient(ellipse 64% 60% at 50% calc(var(--cin-cy, 180px) + 24px), rgba(8, 9, 26, 0.3), rgba(8, 9, 26, 0.74) 72%, rgba(5, 5, 16, 0.84));
}

.cin-glow {
  background: radial-gradient(ellipse 34% 24% at 50% calc(var(--cin-fy, 420px) + 24px), rgba(175, 198, 255, 0.3), transparent 72%);
  mix-blend-mode: screen;
}

.room-cinema .cin-dim {
  opacity: 1;
}

.room-cinema.cin-playing .cin-glow {
  opacity: 1;
  animation: cin-flicker 3.4s ease-in-out infinite;
}

@keyframes cin-flicker {
  0%, 100% { opacity: 1; }
  30% { opacity: 0.68; }
  55% { opacity: 0.95; }
  80% { opacity: 0.74; }
}

/* Màn chiếu nằm trên lớp đèn tối (vẫn dưới nhân vật). Phòng quá nhỏ → nổi lên trên cùng. */
.room-cinema .act-layer {
  z-index: 4;
}

.room-cinema.room-compact .act-layer {
  z-index: 6;
}

.room-cinema .room-depth > .room-furn,
.room-cinema .room-front {
  filter: brightness(0.6) saturate(0.85);
}

.room-cinema .actor .figure {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.22)) brightness(0.92);
}

/* Màn chiếu phóng to: đồ còn vướng thì tạm dạt hẳn ra ngoài */
.room-depth > .room-furn.cin-away {
  opacity: 0;
  pointer-events: none;
}

/* Lúc bật / tắt rạp: đồ đạc trượt sang chỗ mới */
.cin-anim .room-furn {
  transition: left 0.9s cubic-bezier(0.3, 0.8, 0.3, 1), top 0.9s cubic-bezier(0.3, 0.8, 0.3, 1), transform 0.9s ease, filter 0.9s ease, opacity 0.6s ease;
}

.room-furn {
  transition: opacity 0.35s ease;
}

/* Ghế lười */
.room-on .bean {
  display: none;
}

.room-on.room-cinema .bean {
  display: block;
  animation: bean-pop 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}

.room-on.room-cinema .bean-1 {
  animation-delay: 0.12s;
}

@keyframes bean-pop {
  from { opacity: 0; translate: 0 22px; }
}

.room-cinema .room-depth > .bean {
  filter: brightness(0.86) saturate(0.95);
}

.room-depth > .bean-front {
  pointer-events: auto;
  cursor: pointer;
}

.room-depth > .bean-front:hover {
  filter: brightness(1) drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

.bean-0 .f-bean { fill: #ff8fab; }
.bean-1 .f-bean { fill: #74c0fc; }

@media (prefers-reduced-motion: reduce) {
  .room-lights .bulb,
  .furn-vinyl.playing .vinyl-spin,
  .easel-brush,
  .room-cinema.cin-playing .cin-glow,
  .room-on.room-cinema .bean {
    animation: none;
  }
  .room-focus .room-world {
    transform: none;
  }
}