/* ============================================================
   scene2.css — 惊喜房间
   ============================================================ */

.room {
  background:
    radial-gradient(90% 60% at 50% 12%, rgba(255, 236, 200, 0.5) 0%, rgba(255, 236, 200, 0) 60%),
    linear-gradient(180deg, #f3dfc2 0%, #eccfa9 46%, #d9b183 100%);
  transition: background 1.4s ease, filter 1.4s ease;
}

/* 关灯后 */
.room.is-dim {
  background:
    radial-gradient(70% 50% at 50% 62%, rgba(255, 196, 110, 0.55) 0%, rgba(255, 170, 80, 0.12) 40%, rgba(20, 12, 8, 0) 72%),
    linear-gradient(180deg, #241a13 0%, #1b1310 52%, #120c09 100%);
}

.room__stage {
  position: absolute;
  inset: 0;
  padding: calc(var(--sat) + 54px) 0 calc(var(--sab) + 96px);
}

.room__stage::after {
  /* 地面 */
  z-index: 1;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  border-top: 7px solid #f0e2c8;
  background:
    repeating-linear-gradient(180deg, rgba(120, 70, 30, 0.13) 0 1.5px, rgba(0, 0, 0, 0) 1.5px 24px),
    repeating-linear-gradient(90deg, rgba(120, 70, 30, 0.07) 0 1.5px, rgba(0, 0, 0, 0) 1.5px 86px),
    linear-gradient(180deg, #d6a978 0%, #bd8b5c 100%);
  box-shadow:
    inset 0 8px 18px rgba(120, 70, 30, 0.22),
    0 -2px 0 rgba(120, 70, 30, 0.16);
  transition: background 1.4s ease;
}

.room.is-dim .room__stage::after {
  border-top-color: #3f2d1e;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0 1.5px, rgba(0, 0, 0, 0) 1.5px 24px),
    linear-gradient(180deg, #3a2718 0%, #24170f 100%);
}

/* ---------------- 窗 + 窗帘 ---------------- */
.window-area {
  position: absolute;
  top: calc(var(--sat) + 8%);
  left: 50%;
  transform: translateX(-50%);
  width: min(62vw, 260px);
  aspect-ratio: 1 / 1.02;
  z-index: 2;
}

.window-area::after {
  content: "";
  position: absolute;
  left: -7%;
  right: -7%;
  bottom: -9px;
  height: 15px;
  border-radius: 5px;
  background: linear-gradient(180deg, #fffdf6 0%, #f2e4cd 62%, #dfcbae 100%);
  box-shadow:
    0 7px 14px rgba(110, 60, 25, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  outline: 1.5px solid var(--line);
  outline-offset: -1.5px;
  z-index: 4;
}

.window {
  position: absolute;
  inset: 0;
  border-radius: 10px 10px 6px 6px;
  overflow: hidden;
  background: linear-gradient(180deg, #cfe6ef 0%, #a9cfe0 55%, #8fbdd2 100%);
  box-shadow:
    inset 0 0 0 7px #fff6e6,
    inset 0 0 0 9px rgba(150, 110, 70, 0.35),
    0 14px 30px rgba(120, 70, 30, 0.22);
  transition: background 1.4s ease;
}

.room.is-dim .window {
  background: linear-gradient(180deg, #21364a 0%, #1a2a3a 55%, #14212e 100%);
}

.window__mullion {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 7px;
  margin-left: -3.5px;
  background: #fff6e6;
  box-shadow: 0 0 0 1px rgba(150, 110, 70, 0.3);
}

.window__bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 7px;
  margin-top: -3.5px;
  background: #fff6e6;
  box-shadow: 0 0 0 1px rgba(150, 110, 70, 0.3);
}

/* 月亮（关灯后出现） */
.window__moon {
  position: absolute;
  top: 14%;
  right: 16%;
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fffbe8, #ffe9b8 62%, #f6d998);
  box-shadow: 0 0 26px 8px rgba(255, 235, 175, 0.55);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 1.6s ease 0.4s, transform 1.6s var(--ease-pop) 0.4s;
}

.room.is-dim .window__moon {
  opacity: 1;
  transform: scale(1);
}

/* 帘 */
.curtain {
  position: absolute;
  top: -6%;
  bottom: -4%;
  width: 44%;
  z-index: 3;
  border-radius: 6px 6px 40% 40% / 6px 6px 8% 8%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 6px, rgba(0, 0, 0, 0) 6px 18px),
    linear-gradient(180deg, #e8897f 0%, #d4726a 100%);
  box-shadow: inset 0 0 18px rgba(120, 40, 30, 0.25), 0 6px 16px rgba(120, 60, 30, 0.25);
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.curtain--left {
  left: -4%;
  transform-origin: left top;
}

.curtain--right {
  right: -4%;
  transform-origin: right top;
}

.is-curtain-open .curtain--left {
  transform: translateX(-58%) scaleX(0.62);
}

.is-curtain-open .curtain--right {
  transform: translateX(58%) scaleX(0.62);
}

/* 从窗帘后掉出来的钥匙 */
.key-drop {
  position: absolute;
  left: 62%;
  top: 80%;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  z-index: 5;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-40px) scale(0.7) rotate(-16deg);
  transition: opacity 0.3s ease, transform 0.5s var(--ease-pop);
  pointer-events: none;
}

.key-drop.is-shown {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(-8deg);
  pointer-events: auto;
  animation: key-bob 2.2s ease-in-out infinite 0.4s;
}

@keyframes key-bob {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-6px) rotate(-2deg); }
}

/* 道具图标（纯 CSS 画） */
.icon-key {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.icon-key::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 12%;
  width: 46%;
  aspect-ratio: 1;
  margin-left: -23%;
  border-radius: 50%;
  border: 5px solid #f0c05a;
  box-shadow: 0 0 10px rgba(255, 200, 90, 0.6);
}

.icon-key::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 5px;
  height: 44%;
  margin-left: -2.5px;
  background: #f0c05a;
  border-radius: 3px;
  box-shadow:
    -7px 12px 0 0 #f0c05a,
    -7px 20px 0 0 #f0c05a,
    0 0 10px rgba(255, 200, 90, 0.5);
}

/* ---------------- 抽屉柜 ---------------- */
.drawer-unit {
  position: absolute;
  left: 2%;
  bottom: calc(26% + 2px);
  width: min(25vw, 104px);
  z-index: 4;
}

.drawer-cabinet {
  position: relative;
  border-radius: 8px;
  padding: 10px 9px 9px;
  background: linear-gradient(180deg, #b98254, #96633a);
  box-shadow:
    inset 0 0 0 2px rgba(90, 50, 20, 0.35),
    0 10px 22px rgba(110, 60, 25, 0.3);
}

.drawer {
  position: relative;
  height: 34px;
  margin-bottom: 7px;
  border: none;
  padding: 0;
  width: 100%;
  border-radius: 5px;
  background: linear-gradient(180deg, #d8a271, #bd8452);
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 210, 0.55),
    inset 0 -3px 6px rgba(90, 50, 20, 0.28);
  cursor: pointer;
  transition: transform 0.35s var(--ease-soft);
  overflow: visible;
}

.drawer:last-child {
  margin-bottom: 0;
}

.drawer__handle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26%;
  height: 5px;
  margin: -2.5px 0 0 -13%;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffe3ad, #c39a52);
  box-shadow: 0 1px 2px rgba(60, 30, 10, 0.4);
}

/* 上层抽屉是上锁的 */
.drawer--locked .drawer__handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  width: 11px;
  height: 10px;
  margin-left: -5.5px;
  border-radius: 3px 3px 1px 1px;
  background: #6b4a2a;
  box-shadow: 0 0 0 1px rgba(40, 20, 5, 0.4);
}

.drawer.is-open {
  transform: translateY(6px) scaleY(0.94);
}

.drawer-note {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-pop);
  z-index: 6;
  pointer-events: none;
}

.drawer-note.is-shown {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

/* 火柴盒图标 */
.icon-match {
  position: relative;
  display: block;
  width: 46px;
  height: 30px;
  border-radius: 4px;
  background: linear-gradient(180deg, #f2d3a0, #d9ab6f);
  box-shadow: 0 0 0 2px rgba(120, 80, 40, 0.35), 0 6px 14px rgba(0, 0, 0, 0.3);
}

.icon-match::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 8px;
  margin-top: -4px;
  border-radius: 2px;
  background: #b5563f;
}

.icon-match::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -10px;
  width: 16px;
  height: 6px;
  border-radius: 3px;
  background: #e8d6bb;
  transform: rotate(-24deg);
  box-shadow: 14px -3px 0 -0px #b5563f;
}

/* ---------------- 桌子 ---------------- */
.table-area {
  position: absolute;
  left: 46%;
  bottom: calc(26% + 62px);
  transform: translateX(-50%);
  width: min(54vw, 202px);
  z-index: 5;
}

.table-top {
  position: relative;
  height: 26px;
  border-radius: 50% / 42%;
  background: linear-gradient(180deg, #e2b284 0%, #cf9a6a 52%, #b9865a 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 244, 222, 0.55),
    0 7px 0 #9c6b41,
    0 12px 20px rgba(110, 60, 25, 0.26);
}

.table-leg {
  position: absolute;
  top: 22px;
  width: 20px;
  height: 66px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg, #b9865a, #8f6039);
}

.table-leg--l { left: calc(50% - 10px); }
.table-leg--r { left: calc(50% - 7px); opacity: 0; }

/* 桌面上的一排东西 */
.table-items {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 0 2%;
}

/* 相机 */
.camera {
  position: relative;
  width: 56px;
  height: 42px;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.22s var(--ease-pop);
}

.camera:active {
  transform: scale(0.94);
}

.camera__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 31px;
  border-radius: 7px;
  background: linear-gradient(180deg, #4c453f, #2f2a26);
  box-shadow: 0 6px 12px rgba(60, 35, 15, 0.35);
}

.camera__top {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 4px;
  height: 14px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #e9edf0, #a9b2b8);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}

.camera__lens {
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #9fb6c4 0%, #4a5a66 42%, #1d2429 72%);
  box-shadow: 0 0 0 3px #cfd6da, 0 0 0 4px rgba(0, 0, 0, 0.3);
}

.camera__flash {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 10px;
  height: 6px;
  border-radius: 2px;
  background: #f4e6c8;
}

/* 餐盘 + 罩 */
.platter {
  position: relative;
  width: 86px;
  height: 58px;
}

.platter__base {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #dcd6cc);
  box-shadow: 0 6px 12px rgba(60, 35, 15, 0.28);
}

.cloche {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 5px;
  height: 54px;
  border-radius: 60px 60px 8px 8px / 46px 46px 6px 6px;
  background:
    radial-gradient(90% 70% at 34% 22%, rgba(255, 255, 255, 0.95) 0%, rgba(230, 228, 222, 0.9) 45%, rgba(188, 186, 180, 0.95) 100%);
  box-shadow:
    inset -6px -4px 14px rgba(120, 120, 120, 0.35),
    0 8px 16px rgba(60, 35, 15, 0.3);
  transform-origin: 50% 100%;
  transition: transform 0.85s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.5s ease;
}

.cloche::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  width: 16px;
  height: 12px;
  margin-left: -8px;
  border-radius: 50% 50% 6px 6px;
  background: linear-gradient(180deg, #fff, #cfcbc2);
}

.platter.is-revealed .cloche {
  transform: translateY(-26px) rotate(-14deg) scale(0.94);
  opacity: 0;
}

/* 热气 */
.steam {
  position: absolute;
  left: 50%;
  bottom: 60px;
  width: 4px;
  height: 34px;
  margin-left: -2px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 250, 240, 0.8));
  opacity: 0;
  filter: blur(2px);
}

.platter.is-revealed .steam {
  animation: steam-up 2.4s ease-out 0.35s infinite;
}

@keyframes steam-up {
  0% { opacity: 0; transform: translateY(10px) scaleY(0.6); }
  35% { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-22px) scaleY(1.2); }
}

/* ---------------- 物品栏 ---------------- */
.inventory {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px calc(var(--sab) + 12px);
  background: linear-gradient(180deg, rgba(30, 20, 14, 0) 0%, rgba(30, 20, 14, 0.5) 45%, rgba(30, 20, 14, 0.72) 100%);
  transition: opacity 0.4s ease;
}

.slot {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: none;
  padding: 0;
  background: rgba(253, 246, 233, 0.1);
  box-shadow: inset 0 0 0 1.5px rgba(253, 246, 233, 0.28);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.18s var(--ease-pop), background 0.2s ease, box-shadow 0.2s ease;
}

.slot.is-empty {
  cursor: default;
  opacity: 0.55;
}

.slot.is-empty .icon-key,
.slot.is-empty .icon-match {
  opacity: 0;
}

.slot .icon-key,
.slot .icon-match {
  transition: opacity 0.3s ease;
}

.slot.is-selected {
  background: rgba(253, 246, 233, 0.26);
  box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(246, 196, 106, 0.55);
  transform: translateY(-6px);
}

.slot.is-arriving {
  animation: slot-pop 0.5s var(--ease-pop);
}

@keyframes slot-pop {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

.slot .icon-key,
.slot .icon-match {
  transform: scale(0.82);
}

/* 桌上的小蜡烛 */
.table-candle {
  position: relative;
  width: 22px;
  height: 54px;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
  margin-bottom: 2px;
}

.table-candle__stick {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 9px;
  height: 34px;
  margin-left: -4.5px;
  border-radius: 3px;
  background: repeating-linear-gradient(-45deg, #fff5e6 0 5px, #f6c46a 5px 10px);
  box-shadow: inset -2px 0 3px rgba(160, 110, 40, 0.3);
}

.table-candle__base {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 24px;
  height: 9px;
  margin-left: -12px;
  border-radius: 6px 6px 4px 4px;
  background: linear-gradient(180deg, #d8b57e, #a67c47);
  box-shadow: 0 3px 6px rgba(80, 45, 15, 0.35);
}

.table-candle__flame {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: 14px;
  height: 22px;
  margin-left: -7px;
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 68%, #fff 0%, #ffeaa8 26%, #ffc247 52%, rgba(255, 130, 40, 0.85) 74%, rgba(255, 110, 30, 0) 88%);
  opacity: 0;
  transform: scale(0.2);
  transform-origin: 50% 100%;
  transition: opacity 0.35s ease, transform 0.5s var(--ease-pop);
  box-shadow: 0 0 18px 7px rgba(255, 180, 80, 0.4);
}

.table-candle.is-lit .table-candle__flame {
  opacity: 1;
  transform: scale(1);
  animation: flicker 1.6s ease-in-out infinite;
}

/* 罩子里的小蛋糕 */
.mini-cake {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 62px;
  height: 34px;
  margin-left: -31px;
  border-radius: 8px 8px 5px 5px;
  background: linear-gradient(180deg, #fff4e2 0%, #f7dfc4 55%, #eec9a4 100%);
  box-shadow: inset 0 -5px 10px rgba(200, 150, 110, 0.3);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.6s ease 0.25s, transform 0.6s var(--ease-pop) 0.25s;
}

.mini-cake::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 5px;
  height: 12px;
  margin-left: -2.5px;
  border-radius: 2px;
  background: repeating-linear-gradient(-45deg, #fff5e6 0 3px, #f6c46a 3px 6px);
}

.mini-cake::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -14px;
  width: 8px;
  height: 12px;
  margin-left: -4px;
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 68%, #fff, #ffeaa8 30%, #ffc247 60%, rgba(255, 140, 50, 0) 88%);
  opacity: 0;
  transition: opacity 0.5s ease 0.6s;
}

.platter.is-revealed .mini-cake {
  opacity: 1;
  transform: scale(1);
}

.platter.is-revealed .mini-cake::after {
  opacity: 1;
  animation: flicker 1.8s ease-in-out infinite;
}

.platter.is-cake-ready {
  cursor: pointer;
}

/* 提示气泡 */
.toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sab) + 88px);
  z-index: 30;
  transform: translate(-50%, 12px);
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(24, 16, 11, 0.82);
  color: var(--cream);
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-soft);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  max-width: 86vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================
   屋子里的零碎：挂钟 / 小相框 / 猫 / 地毯
   ============================================================ */

/* 挂钟 */
.wall-clock {
  position: absolute;
  left: 6%;
  top: 47%;
  width: 56px;
  height: 56px;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  z-index: 3;
}

.wall-clock__face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fffdf6 0%, #f4e8d4 62%, #e6d5bb 100%);
  box-shadow:
    inset 0 0 0 4px #c0925f,
    inset 0 0 0 5px rgba(255, 240, 210, 0.6),
    0 6px 14px rgba(110, 60, 25, 0.28);
}

.wall-clock__face::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 1.5px, rgba(150, 110, 70, 0.85) 1.4px, transparent 1.8px),
    radial-gradient(circle at 50% calc(100% - 1.5px), rgba(150, 110, 70, 0.85) 1.4px, transparent 1.8px),
    radial-gradient(circle at 1.5px 50%, rgba(150, 110, 70, 0.85) 1.4px, transparent 1.8px),
    radial-gradient(circle at calc(100% - 1.5px) 50%, rgba(150, 110, 70, 0.85) 1.4px, transparent 1.8px);
}

.wall-clock__hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  border-radius: 2px;
  background: #6b4a2a;
}

.wall-clock__hand--h {
  width: 3.5px;
  height: 15px;
  margin-left: -1.75px;
  transform: rotate(332deg);
}

.wall-clock__hand--m {
  width: 2.5px;
  height: 21px;
  margin-left: -1.25px;
  transform: rotate(30deg);
}

.wall-clock__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #8a5c3b;
}

.wall-clock.is-spinning .wall-clock__hand--m {
  animation: clock-spin 1.1s cubic-bezier(0.3, 0.7, 0.4, 1);
}

@keyframes clock-spin {
  from { transform: rotate(30deg); }
  to { transform: rotate(390deg); }
}

/* 小相框 */
.wall-frames {
  position: absolute;
  left: 3%;
  top: 17%;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 3;
  align-items: flex-end;
}

.mini-frame {
  width: 50px;
  padding: 4px 4px 8px;
  border: none;
  background: #fffdf7;
  box-shadow: 0 6px 14px rgba(90, 50, 20, 0.3);
  cursor: pointer;
  transform: rotate(3deg);
  transition: transform 0.25s var(--ease-pop);
}

.mini-frame:active {
  transform: rotate(3deg) scale(0.94);
}

.mini-frame--2 {
  width: 46px;
  transform: rotate(-3deg);
}

.mini-frame--2:active {
  transform: rotate(-3deg) scale(0.94);
}

.mini-frame--3 {
  width: 48px;
  transform: rotate(4deg);
}

.mini-frame--3:active {
  transform: rotate(4deg) scale(0.94);
}

.mini-frame__img,
.mini-frame__blank {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: linear-gradient(155deg, #f6e7d0, #e2c6a6);
}

/* 猫 */
.cat {
  position: absolute;
  left: 4%;
  bottom: 17%;
  width: 76px;
  height: 62px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  z-index: 3;
}

.cat__body {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 38px;
  border-radius: 52% 52% 44% 44% / 62% 62% 40% 40%;
  background: linear-gradient(180deg, #fffdf8 0%, #f2e7d6 62%, #e6d8c4 100%);
  box-shadow: inset 0 -6px 10px rgba(196, 168, 132, 0.28);
}

.cat__body::after {
  content: "";
  position: absolute;
  left: 22%;
  bottom: 0;
  width: 52%;
  height: 66%;
  border-radius: 50% 50% 38% 38%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 246, 236, 0.9));
}

.cat__head {
  position: absolute;
  right: 0;
  top: 4px;
  width: 40px;
  height: 36px;
  border-radius: 48% 48% 46% 46%;
  background: linear-gradient(180deg, #fffdf9 0%, #f8efe2 55%, #f0e2cf 100%);
  box-shadow: inset 0 -4px 8px rgba(196, 168, 132, 0.22);
  transform-origin: 50% 100%;
}

/* 鼻子 */
.cat__head::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 23px;
  width: 6px;
  height: 4px;
  margin-left: -3px;
  border-radius: 0 0 50% 50%;
  background: #e0a29a;
}

.cat__ear {
  position: absolute;
  top: -7px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid #e7ceb2;
}

.cat__ear--l { left: 2px; transform: rotate(-18deg); }
.cat__ear--r { right: 2px; transform: rotate(18deg); }

.cat__eye {
  position: absolute;
  top: 15px;
  width: 5.5px;
  height: 6.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #7fb0d4, #3d6d94 72%);
  box-shadow: 0 0 3px rgba(90, 150, 200, 0.5);
}

.cat__eye--l { left: 10px; }
.cat__eye--r { right: 10px; }

.cat__tail {
  position: absolute;
  left: -14px;
  bottom: 2px;
  width: 26px;
  height: 9px;
  border-radius: 6px 2px 2px 6px;
  background: linear-gradient(180deg, #fbf3e7, #e7ceb2);
  transform: rotate(-16deg);
  transform-origin: right center;
}

.cat.is-meowing .cat__head {
  animation: cat-nod 0.7s var(--ease-pop);
}

@keyframes cat-nod {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  35% { transform: rotate(-9deg) translateY(-4px); }
  70% { transform: rotate(4deg) translateY(-1px); }
}

/* 地毯 */
.rug {
  position: absolute;
  left: 17%;
  right: 4%;
  bottom: 15.5%;
  height: 128px;
  border-radius: 16px 16px 10px 10px;
  transform: perspective(420px) rotateX(63deg);
  transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 11px, rgba(0, 0, 0, 0) 11px 22px),
    linear-gradient(180deg, #eaa79a 0%, #d8897a 52%, #c4735f 100%);
  box-shadow:
    inset 0 0 0 6px rgba(255, 250, 240, 0.35),
    inset 0 0 24px rgba(150, 70, 55, 0.25);
  opacity: 0.95;
  z-index: 2;
  transition: background 1.4s ease, opacity 1.4s ease;
}

.room.is-dim .rug {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 10px, rgba(0, 0, 0, 0) 10px 20px),
    linear-gradient(180deg, #5a3a32, #432a24);
  opacity: 0.8;
}

.room.is-dim .cat__body,
.room.is-dim .cat__head {
  filter: brightness(0.55);
}

.room.is-dim .wall-clock__face,
.room.is-dim .mini-frame {
  filter: brightness(0.6);
}

/* 走廊门边的那只钟（要覆盖 .wall-clock 的绝对定位） */
.door-wrap .corridor-clock {
  position: relative;
  left: auto;
  top: auto;
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  display: block;
  cursor: pointer;
  transition: transform 0.2s var(--ease-pop);
}

.door-wrap .corridor-clock:active {
  transform: scale(0.94);
}

/* ============================================================
   手绘质感：统一描边 + 彩旗 / 书架 / 小植物
   ============================================================ */

.room .window,
.room .curtain,
.room .drawer-cabinet,
.room .drawer,
.room .table-top,
.room .table-leg,
.room .camera__body,
.room .camera__top,
.room .cloche,
.room .platter__base,
.room .mini-frame,
.room .wall-clock__face,
.room .cat__body,
.room .cat__head,
.room .table-candle__stick,
.room .table-candle__base,
.room .shelf__body,
.room .sill-plant__pot {
  outline: 1.5px solid var(--line);
  outline-offset: -1.5px;
}

/* 彩旗 */
.bunting {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--sat) + 6px);
  width: 100%;
  height: 52px;
  z-index: 6;
  pointer-events: none;
  opacity: 0.95;
}

/* 书架 */
.shelf {
  position: absolute;
  right: 2%;
  bottom: calc(26% + 2px);
  width: 20%;
  min-width: 72px;
  max-width: 92px;
  z-index: 3;
}

.shelf__body {
  position: relative;
  padding: 7px 6px 8px;
  border-radius: 3px;
  background: linear-gradient(180deg, #cba073, #b07f52);
  box-shadow: 0 10px 22px rgba(110, 60, 25, 0.28);
}

.shelf__row {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 40px;
  padding: 0 2px;
  margin-bottom: 5px;
  border-bottom: 3px solid #8f6039;
  box-shadow: 0 1px 0 rgba(255, 238, 205, 0.35);
}

.shelf__row--short {
  height: 30px;
  margin-bottom: 0;
}

.book {
  width: 8px;
  border-radius: 1.5px 1.5px 0 0;
  box-shadow: inset -1.5px 0 0 rgba(70, 45, 25, 0.22);
  flex: 0 0 auto;
}

/* 柜子上的小植物 */
.sill-plant {
  position: absolute;
  left: 2%;
  bottom: calc(26% + 100px);
  width: 34px;
  height: 42px;
  z-index: 5;
  pointer-events: none;
}

.sill-plant__pot {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 26px;
  height: 18px;
  margin-left: -13px;
  border-radius: 3px 3px 7px 7px;
  background: linear-gradient(180deg, #e0a487, #c9825f);
}

.sill-plant__leaf {
  position: absolute;
  bottom: 16px;
  left: 50%;
  width: 12px;
  height: 22px;
  border-radius: 50% 50% 40% 40%;
  background: linear-gradient(180deg, #9db88f, #7d9c70);
  transform-origin: 50% 100%;
}

.sill-plant__leaf--1 { transform: translateX(-13px) rotate(-26deg); }
.sill-plant__leaf--2 { transform: translateX(-6px) rotate(-4deg); height: 26px; }
.sill-plant__leaf--3 { transform: translateX(1px) rotate(20deg); }

/* 抽屉里夹着的照片 */
.drawer-photo {
  position: absolute;
  left: -12px;
  top: 10px;
  width: 44px;
  height: 56px;
  padding: 3px 3px 9px;
  border: none;
  background: #fffdf7;
  box-shadow: 0 6px 14px rgba(90, 50, 20, 0.32);
  outline: 1.4px solid var(--line);
  outline-offset: -1.4px;
  opacity: 0;
  pointer-events: none;
  transform: rotate(-7deg) translateY(8px);
  transition: opacity 0.4s ease, transform 0.5s var(--ease-pop);
  z-index: 6;
  cursor: pointer;
}

.drawer-photo.is-shown {
  opacity: 1;
  pointer-events: auto;
  transform: rotate(-7deg) translateY(0);
}

.drawer-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #efe2c9;
}

/* 书架可以点：抽出一本书 */
.shelf {
  cursor: pointer;
}

.shelf:active .shelf__body {
  transform: translateY(-2px);
}

.shelf__body {
  transition: transform 0.25s var(--ease-pop);
}

.shelf__row .book:nth-child(4) {
  transform: translateY(-5px);
  box-shadow: 0 4px 6px rgba(60, 35, 15, 0.35), inset -1.5px 0 0 rgba(70, 45, 25, 0.22);
}

/* ---------------- 打开的一本书 ---------------- */
.bookview {
  position: absolute;
  inset: 0;
  z-index: 76;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 14, 10, 0.6);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s;
}

.bookview.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.bookview__spread {
  position: relative;
  display: flex;
  width: min(100%, 380px);
  aspect-ratio: 1.42;
  border-radius: 6px;
  background: linear-gradient(90deg, #fdf7ea 0 49.6%, #e8dcc6 49.6% 50.4%, #fdf7ea 50.4% 100%);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(150, 120, 85, 0.3);
  transform: rotate(-0.8deg) scale(0.96);
  transition: transform 0.45s var(--ease-pop);
}

.bookview.is-open .bookview__spread {
  transform: rotate(-0.8deg) scale(1);
}

.bookview__page {
  position: relative;
  flex: 1;
  padding: 18px;
}

.bookview__page--right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding-bottom: 30px;
  opacity: 0.5;
}

.bookview__line {
  display: block;
  height: 1.5px;
  border-radius: 1px;
  background: rgba(150, 120, 85, 0.28);
}

.bookview__line--short {
  width: 62%;
}

.bookview__photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transform: rotate(-1.6deg);
  box-shadow: 0 8px 18px rgba(60, 35, 15, 0.35);
  outline: 6px solid #fffdf7;
  outline-offset: -6px;
  background: #efe2c9;
}