/* D·IARY —— 房间（渲染版）的样式
   图是离线渲的，网页只管**叠**和**摆热区**。
   所有位置都用百分比：anchors.json 里存的是 0–1 的相对坐标，
   图缩到多大都对得上（这是分层这条路的关键，见 DESIGN.md）。 */

.room2 {
  position: relative;
  width: 100%;
  background: #1b1a18;
  overflow: hidden;
}
.r2-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;                 /* 渲染出来就是这个比例，别拉伸 */
}
.r2-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;                 /* 图只是背景，点的是热区 */
  user-select: none; -webkit-user-drag: none;
}
.r2-fan { transition: opacity .05s linear; }

/* 整屏进屋：屋子铺满窗口。
   **不能用 object-fit: cover 去裁图** —— 一裁，图和热区就错位了
   （热区是按 0–1 的相对坐标摆在 .r2-stage 上的）。
   正确的做法是让 stage 整体放大到"至少盖住窗口"，多出来的部分由外面 overflow 裁掉：
   stage 是一个整体，图和热区一起缩放，永远对得上。 */
body.inroom .room2 {
  position: fixed; inset: 0; z-index: 1;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.inroom .room2::-webkit-scrollbar { display: none; }
/* 高度铺满、宽度按 16:9 撑出去，**横着拖能看全屋** —— 手机竖屏上
   "铺满"意味着只看得见 26% 的屋子，热区大半在屏外；letterbox 又只剩中间一条。
   所以给它一条横向滚动：图和热区一起走，位置永远对得上。 */
body.inroom .room2 .r2-stage {
  /* 按这套图自己的比例（--ar）撑到"至少盖住窗口"，多出来的由外面裁掉。
     竖屏那套是 9:16，手机上只裁掉一点点，**不留黑边**。 */
  width: max(100vw, calc(100vh * var(--ar, 1.7778)));
  height: 100%; aspect-ratio: auto;
}
/* 竖屏那套是 4:3：铺满高度之后左右还多出将近两屏，**拖着看全屋** */

/* ── 书架上的本子：一根书脊 ── */
.r2-spine {
  position: absolute;
  width: 1.15%;
  padding: 0; border: 0; cursor: pointer;
  background: var(--cv, #C8B9A6);
  border-radius: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45), inset -1px 0 0 rgba(0, 0, 0, .18);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  transform-origin: 50% 100%;
}
.r2-spine span {                        /* 书名：立起来写，太小就不显示 */
  position: absolute; inset: 0;
  writing-mode: vertical-rl;
  font-size: 6px; line-height: 1.1;
  color: rgba(255, 255, 255, .82);
  overflow: hidden; padding: 2px 0;
}
.r2-spine:hover, .r2-spine:focus-visible {
  transform: translateY(-6%) scaleY(1.04);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .55);
  outline: none;
}
.r2-spine:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* ── 热区：**一个框都不画** ──
   以前是往家具外面套一个半透明长方形，家具是什么形状它都是个方块，很难看。
   现在热区本身完全透明（只管接点击），亮的是家具那一层图自己。 */
.r2-hot {
  position: absolute;
  border: 0; padding: 0; cursor: pointer;
  background: transparent;
}
.r2-hot:focus-visible { outline: none; }

/* 指过去/按下去：那一层图自己亮起来。
   `brightness` 走的是图的像素，**透明的地方还是透明的**——
   所以亮起来的边界就是家具真正的轮廓。
   影子和灯晕是烤在同一张图里的，提亮一点点看不出来，
   要是改用 drop-shadow 描边，就会连着影子和灯晕一起描出一团糊的光圈。 */
.r2-lay { transition: filter .18s var(--ease); }
.r2-lay.lit { filter: brightness(1.26) saturate(1.06); }
/* 夜里屋子整体压暗，同样的提亮看着不明显，给多一点 */
.room2.night .r2-lay.lit { filter: brightness(1.5) saturate(1.05); }
/* 灯那一层夜里带着一大团糊开的暖光，跟着一起提亮反而更像"灯开大了"，正好 */
.r2-tag {
  position: absolute; left: 50%; top: -2px;
  transform: translate(-50%, -100%);
  padding: 3px 9px; border-radius: var(--r-chip, 999px);
  background: rgba(32, 28, 24, .82); color: #fff;
  font-size: var(--fs-xs); white-space: nowrap;
  opacity: 0; transition: opacity .2s var(--ease);
  pointer-events: none;
}
.r2-hot:hover .r2-tag, .r2-hot:focus-visible .r2-tag { opacity: 1; }
/* 触屏没有 hover：**不画那道边**（那就是用户嫌丑的那个方框），
   改成名字牌一直露着——知道有什么能点就够了，按下去还会亮一下。 */
@media (hover: none) {
  .r2-tag { opacity: .88; }
}

/* ── 浇水：几滴水落下去 ── */
.r2-water { position: absolute; pointer-events: none; }
.r2-water i {
  position: absolute; top: 4%;
  width: 3px; height: 8px; border-radius: 60% 60% 50% 50%;
  background: linear-gradient(180deg, rgba(150, 200, 225, .95), rgba(110, 170, 205, .7));
  animation: r2drop 1.1s cubic-bezier(.4, 0, .8, .5) forwards;
}
@keyframes r2drop {
  0% { transform: translateY(0) scaleY(.7); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(240%) scaleY(1.5); opacity: 0; }
}
.r2-stage.watering { filter: saturate(1.06) brightness(1.02); transition: filter .5s; }

/* ── 近景挑本子 / 挑散页 ── */
.r2-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.r2-pickone {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 12px; cursor: pointer; text-align: left;
  border: var(--bw) solid var(--line); border-radius: var(--r-card);
  background: var(--surface);
  border-left: 5px solid var(--cv, var(--accent));
}
.r2-pickone:hover { background: var(--surface-2); }
.r2-pickone b { font-size: var(--fs-sm); }
.r2-pickone span { font-size: var(--fs-xs); color: var(--muted); }
.r2-pickone.paper { border-left-width: var(--bw); padding: 8px; }
.r2-pickone.paper img,
.r2-pickone.paper .ph {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  background: var(--surface-2); border-radius: 4px;
}

/* 竖屏取景框不进来的那几件（桌面、绿植…）：收成一排小标签，别变成点不到 */
.r2-off {
  position: absolute; left: 0; right: 0; bottom: calc(76px + env(safe-area-inset-bottom));
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  padding: 0 12px; pointer-events: none; z-index: 3;
}
.r2-offbtn {
  pointer-events: auto; cursor: pointer;
  min-height: 34px; padding: 6px 14px; border: 0;
  border-radius: var(--r-chip, 999px);
  background: rgba(32, 28, 24, .74); color: #fff;
  font-size: var(--fs-xs);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.r2-offbtn:hover { background: rgba(32, 28, 24, .9); }

/* 「拖着看」的一次性提示 */
.r2-pan {
  position: fixed; left: 50%; bottom: calc(124px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 8px 16px; border-radius: var(--r-chip, 999px);
  background: rgba(32, 28, 24, .78); color: #fff;
  font-size: var(--fs-xs); white-space: nowrap; z-index: 4;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: r2panin .5s var(--ease, ease) both;
  pointer-events: none;
}
@keyframes r2panin { from { opacity: 0; transform: translate(-50%, 8px) } }
.r2-pan.gone { opacity: 0; transition: opacity .35s; }
@media (prefers-reduced-motion: reduce) { .r2-pan { animation: none } }

/* ── 布置房间（渲染版）── */
.r2-dress { display: flex; flex-direction: column; gap: 14px; }
.r2-dslot { display: flex; align-items: flex-start; gap: 12px; }
.r2-dslot > b { flex: none; width: 48px; padding-top: 7px; font-size: var(--fs-xs);
  color: var(--muted); letter-spacing: var(--ls-label); }
.r2-drow { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.r2-dtip { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 620px) {
  .r2-dslot { flex-direction: column; gap: 4px; }
  .r2-dslot > b { width: auto; padding-top: 0; }
}

/* 夜里名字牌压暗一点，别在暗房里刺眼 */
.room2.night .r2-tag { background: rgba(24, 20, 16, .8); }

/* ── 收纳框里压着的碎片 ──
   预渲的是一个空框，装什么是你的数据（和书架上那些本子一个道理）。
   位置吃 anchors.json 里的 frameBox 四角。 */
.r2-scraps {
  position: absolute; pointer-events: none;
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center;
  gap: 5%;
  /* **别在这儿写百分比 padding**：这块是绝对定位的，百分比内边距算的是
     **包含块（整个舞台）的宽**，不是它自己的宽——3% 就是 53px，
     把 108px 的框整个吃光，碎片全被挤成 0.4px。留白改成让 JS 把框往里收。 */
  padding: 0;
}
/* 选择器必须比上面那条 `.r2-stage img{inset:0;width:100%}` **更具体**，
   否则每一块碎片都会被撑成整块舞台那么大（踩过，框里糊成一坨）。 */
.r2-stage .r2-scraps img.r2-scrap {
  position: static; inset: auto;
  width: 26%; height: 40%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .28));
}