/* ============================================================
   room.css — 小屋首页（v3：卡片式布局）
   ------------------------------------------------------------
   结构：
     .page-head      标题 + 副标题
     .room-card      带边框的"房间画框"（核心）
     .panel          下方信息面板（天数 / 今日份 / 入口说明）
   ============================================================ */

body {
  background: #f4ece0;
  transition: background var(--t-slow) ease;
}
html[data-theme="dusk"] body { background: #f0e4d4; }
html[data-theme="night"] body { background: #2b2540; }

/* ---------- 页面容器 ---------- */
.page-wrap {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 18px 16px calc(26px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- 顶部标题 ---------- */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}
.page-head .titles .kicker {
  font-size: 10px;
  letter-spacing: 2px;
  color: #b3a08c;
  font-weight: 700;
  text-transform: uppercase;
}
.page-head .titles h1 {
  margin: 4px 0 0;
  font-size: 21px;
  letter-spacing: 1px;
  color: #4a5c58;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color var(--t-slow) ease;
}
html[data-theme="night"] .page-head .titles h1 { color: #e6dcf4; }
.page-head .titles h1 .hh {
  font-size: 17px;
  color: #e08a9a;
}
.page-head .sub {
  font-size: 11px;
  color: #9d8b78;
  margin-top: 5px;
  line-height: 1.5;
  transition: color var(--t-slow) ease;
}
html[data-theme="night"] .page-head .sub { color: #a397bd; }
html[data-theme="night"] .page-head .titles .kicker { color: #8d80a6; }
/* 右上角昼夜指示 */
.theme-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #6d7d78;
  background: #fff;
  border: 1.5px solid #d8e4de;
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(120,150,140,0.16);
  transition: background var(--t-slow) ease, color var(--t-slow) ease, border-color var(--t-slow) ease;
}
html[data-theme="night"] .theme-chip {
  background: #453e60;
  border-color: #5d5580;
  color: #ded4ee;
  box-shadow: 0 2px 0 rgba(0,0,0,0.3);
}

/* ============================================================
   房间卡片：带木框的一幅"画"
   ============================================================ */
.room-card {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3.15;
  border-radius: 10px;
  overflow: hidden;
  background: #bcd8d0;
  /* 双层木框 */
  border: 5px solid #c99a6c;
  box-shadow:
    0 0 0 2px #a87c54,
    inset 0 0 0 2px rgba(255,255,255,0.32),
    0 10px 22px rgba(120,90,60,0.26);
  transition: box-shadow var(--t-slow) ease, border-color var(--t-slow) ease;
}
html[data-theme="night"] .room-card {
  border-color: #6a6288;
  box-shadow:
    0 0 0 2px #4e4870,
    inset 0 0 0 2px rgba(255,255,255,0.14),
    0 10px 26px rgba(0,0,0,0.45);
}

/* 房间内部的坐标基准 */
.room-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* 墙（上 52%） */
.r-wall {
  position: absolute;
  inset: 0 0 48% 0;
  background-image: url("assets/art/wall.jpg");
  background-size: cover;
  background-position: center bottom;
}
/* 昼夜染色 */
.r-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  transition: background var(--t-slow) ease;
}
html[data-theme="dusk"] .r-wall::after { background: rgba(255,150,80,0.20); }
html[data-theme="night"] .r-wall::after { background: rgba(30,28,68,0.78); }

/* 地板（下 48%） */
.r-floor {
  position: absolute;
  inset: 52% 0 0 0;
  background-image: url("assets/art/floor.jpg");
  background-size: cover;
  background-position: center top;
}
.r-floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  transition: background var(--t-slow) ease;
}
html[data-theme="dusk"] .r-floor::after { background: rgba(255,150,80,0.20); }
html[data-theme="night"] .r-floor::after { background: rgba(30,28,68,0.74); }

/* 踢脚线 */
.r-skirt {
  position: absolute;
  left: 0; right: 0;
  top: 52%;
  height: 7px;
  margin-top: -7px;
  background-image: url("assets/art/skirting.png");
  background-size: 100% 100%;
  z-index: 3;
}
html[data-theme="night"] .r-skirt { filter: brightness(0.55) saturate(0.7); }

/* 屋顶射灯串 */
.r-lights {
  position: absolute;
  left: 0; right: 0; top: 0;
  width: 100%;
  z-index: 4;
  pointer-events: none;
}
html[data-theme="night"] .r-lights { filter: brightness(1.12) saturate(1.1); }

/* 窗光洒在地上 */
.r-sun {
  position: absolute;
  left: -2%;
  top: 52%;
  width: 52%;
  height: 48%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,250,226,0.42), rgba(255,248,220,0.08) 62%, transparent 92%);
  clip-path: polygon(8% 0, 40% 0, 88% 100%, -8% 100%);
  filter: blur(5px);
  transition: background var(--t-slow) ease;
}
html[data-theme="dusk"] .r-sun {
  background: linear-gradient(180deg, rgba(255,206,152,0.38), rgba(255,190,130,0.07) 62%, transparent 92%);
}
html[data-theme="night"] .r-sun {
  background: linear-gradient(180deg, rgba(188,198,255,0.14), rgba(188,198,255,0.03) 62%, transparent 92%);
}

/* ---------- 房间里的元素，统一用百分比定位 ---------- */
.r-el {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
}
.r-el img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 4px rgba(80,60,40,0.20));
  transition: filter var(--t-slow) ease;
}
/* 定了高度的盒子：图片等比缩放填满 */
.r-el[style*="height"] img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}
/* 贴墙家具：底边对齐 y */
.r-el.floor-anchor { transform: translate(-50%, -100%); }

/* 高度受限的元素：用 max-height 约束，避免长条物品冲出卡片 */
.r-el.h-limited img {
  width: auto;
  max-height: 100%;
  margin: 0 auto;
}
.r-el.h-limited {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* 传入 --maxh 时，按卡片高度百分比限制 */
.r-el[style*="--maxh"] img {
  max-height: var(--maxh);
}

/* 昼夜滤镜 */
html[data-theme="dusk"] .r-el img { filter: drop-shadow(0 3px 4px rgba(80,60,40,0.2)) brightness(0.94) sepia(0.14); }
html[data-theme="night"] .r-el img { filter: drop-shadow(0 3px 5px rgba(0,0,0,0.4)) brightness(0.62) saturate(0.78) hue-rotate(-6deg); }

/* 窗户：随主题切换图片 */
.r-window img { display: none; }
html[data-theme="day"]   .r-window img.w-day   { display: block; }
html[data-theme="dusk"]  .r-window img.w-dusk  { display: block; }
html[data-theme="night"] .r-window img.w-night { display: block; }
html[data-theme="night"] .r-window img {
  filter: drop-shadow(0 0 16px rgba(255,232,168,0.34)) drop-shadow(0 3px 5px rgba(0,0,0,0.35));
}

/* 小人：稍微大一点，带呼吸动画 */
.r-couple {
  z-index: 12;
  display: flex;
  align-items: flex-end;
  gap: 2%;
  transform: translate(-50%, -100%);
}
.r-couple .p {
  transform-origin: bottom center;
  animation: bob 3.2s ease-in-out infinite;
}
.r-couple .p.him { animation-delay: 0.8s; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.r-couple img { filter: drop-shadow(0 3px 4px rgba(80,60,40,0.24)); }

/* 点击小人的热区 */
.r-couple-hit {
  position: absolute;
  z-index: 13;
  transform: translate(-50%, -50%);
  cursor: pointer;
  border-radius: 14px;
}
.r-couple-hit:active { transform: translate(-50%, -50%) scale(0.96); }

/* ---------- 可点击的入口物品 ---------- */
.r-item {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 10;
  cursor: pointer;
  pointer-events: auto;
  transition: transform var(--t-fast);
  /* 宽高都用卡片百分比给定，图片在盒子里等比缩放 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.r-item:active { transform: translate(-50%, -50%) scale(0.92); }
.r-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(70,50,30,0.28));
}
html[data-theme="dusk"] .r-item img { filter: drop-shadow(0 3px 5px rgba(70,50,30,0.28)) brightness(0.95) sepia(0.12); }
html[data-theme="night"] .r-item img { filter: drop-shadow(0 0 10px rgba(255,220,150,0.24)) brightness(0.72) saturate(0.86); }

/* 物品下的木牌标签：很轻，不喧宾夺主 */
.r-item .tag {
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%);
  font-size: 8.5px;
  font-weight: 700;
  color: #6b5a48;
  background: rgba(255,252,244,0.94);
  border: 1.2px solid rgba(196,158,116,0.85);
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
  line-height: 1.35;
}
html[data-theme="night"] .r-item .tag {
  color: #ded4ee;
  background: rgba(74,66,100,0.94);
  border-color: rgba(120,110,160,0.85);
}

/* 未读小红点 */
.r-item .dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ee7d8c;
  border: 1.5px solid #fffdf8;
  animation: blink 1.9s ease-in-out infinite;
  z-index: 3;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ---------- 情话气泡（浮在卡片上） ---------- */
.r-speech {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%) scale(0.8);
  z-index: 20;
  max-width: 82%;
  padding: 8px 13px;
  background: rgba(255,253,247,0.97);
  border: 2px solid #d3a87c;
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #5a4a3c;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(120,90,60,0.22);
  transition: opacity var(--t-mid), transform var(--t-mid) cubic-bezier(.34,1.56,.64,1);
}
.r-speech.show { opacity: 1; transform: translateX(-50%) scale(1); }
.r-speech::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -8px;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #d3a87c;
}
html[data-theme="night"] .r-speech {
  background: rgba(78,70,104,0.97);
  border-color: #8a80b4;
  color: #ece4f6;
}
html[data-theme="night"] .r-speech::after { border-top-color: #8a80b4; }

/* 漂浮爱心 */
.r-hearts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 19;
  overflow: hidden;
}

/* ============================================================
   下方信息面板
   ============================================================ */
.panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 天数卡 */
.days-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(160deg, #fffdf8, #fbf3e6);
  border: 2px solid #e8d9c4;
  border-radius: 12px;
  box-shadow: 0 3px 0 rgba(180,150,120,0.16);
}
html[data-theme="night"] .days-card {
  background: linear-gradient(160deg, #4a4368, #3e3859);
  border-color: #615a84;
  box-shadow: 0 3px 0 rgba(0,0,0,0.3);
}
.days-card .left .num {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: #e0808f;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}
html[data-theme="night"] .days-card .left .num { color: #f0a3b4; }
.days-card .left .cap {
  font-size: 10.5px;
  color: #a8988a;
  margin-top: 5px;
  letter-spacing: 0.4px;
}
html[data-theme="night"] .days-card .left .cap { color: #b0a4c8; }
.days-card .right {
  text-align: right;
  font-size: 10.5px;
  color: #a8988a;
  line-height: 1.65;
}
html[data-theme="night"] .days-card .right { color: #b0a4c8; }
.days-card .right b { color: #7d6b58; font-weight: 700; }
html[data-theme="night"] .days-card .right b { color: #ded4ee; }

/* 今日份 */
.today-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffe9ec, #ffd9df);
  border: 2px solid #f7c2cb;
  box-shadow: 0 3px 0 rgba(214,130,144,0.2);
  cursor: pointer;
  transition: transform var(--t-fast);
}
.today-card:active { transform: translateY(2px); }
.today-card .ic {
  flex: 0 0 auto;
  font-size: 17px;
  animation: beat 1.7s ease-in-out infinite;
}
@keyframes beat {
  0%,100% { transform: scale(1); }
  18% { transform: scale(1.2); }
  36% { transform: scale(1); }
  54% { transform: scale(1.12); }
}
.today-card .tx { flex: 1; min-width: 0; }
.today-card .tx .a {
  font-size: 12.5px;
  font-weight: 700;
  color: #c2606e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.today-card .tx .b {
  font-size: 10.5px;
  color: #d08e99;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.today-card .go { flex: 0 0 auto; font-size: 15px; color: #e09aa6; }
html[data-theme="night"] .today-card {
  background: linear-gradient(135deg, #5a4a6e, #4c3f60);
  border-color: #75638c;
}
html[data-theme="night"] .today-card .tx .a { color: #f4b8c6; }
html[data-theme="night"] .today-card .tx .b { color: #c3a8c8; }
html[data-theme="night"] .today-card .go { color: #b79ac0; }

/* 房间入口快览（对应房间里的物品） */
.entries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 11px 6px 10px;
  background: #fffdf8;
  border: 2px solid #ece0cf;
  border-radius: 11px;
  box-shadow: 0 3px 0 rgba(180,150,120,0.14);
  cursor: pointer;
  transition: transform var(--t-fast);
  text-align: center;
}
.entry:active { transform: translateY(2px); }
.entry img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: auto;
}
.entry .n {
  font-size: 10px;
  font-weight: 700;
  color: #7d6b58;
  line-height: 1.3;
}
.entry .s {
  font-size: 8.5px;
  color: #b3a08c;
  line-height: 1.3;
}
html[data-theme="night"] .entry {
  background: #453e60;
  border-color: #5d5580;
}
html[data-theme="night"] .entry .n { color: #ded4ee; }
html[data-theme="night"] .entry .s { color: #a397bd; }
html[data-theme="night"] .entry img { filter: brightness(0.78) saturate(0.85); }

/* 底部控制条 */
.controls {
  display: flex;
  gap: 9px;
}
.ctrl {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 10px;
  border-radius: 11px;
  background: #fffdf8;
  border: 2px solid #ece0cf;
  box-shadow: 0 3px 0 rgba(180,150,120,0.14);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  color: #7d6b58;
  transition: transform var(--t-fast);
}
.ctrl:active { transform: translateY(3px); box-shadow: none; }
html[data-theme="night"] .ctrl {
  background: #453e60;
  border-color: #5d5580;
  color: #ded4ee;
}
html[data-theme="night"] .ctrl.lamp-on {
  box-shadow: 0 3px 0 rgba(0,0,0,0.3), 0 0 16px rgba(255,220,150,0.34);
}

/* 页脚小字 */
.foot {
  text-align: center;
  font-size: 9.5px;
  color: #c0b0a0;
  letter-spacing: 0.6px;
  padding: 2px 0 4px;
}
html[data-theme="night"] .foot { color: #8d80a6; }

/* ============================================================
   弹层
   ============================================================ */
.sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(60,45,32,0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid), visibility var(--t-mid);
}
.sheet-mask.show { opacity: 1; visibility: visible; }
.sheet {
  width: 100%;
  max-width: 480px;
  max-height: 84vh;
  overflow-y: auto;
  background: #fffdf8;
  border-radius: 18px 18px 0 0;
  padding: 22px 20px calc(26px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform var(--t-mid) cubic-bezier(.22,1,.36,1);
  border-top: 3px solid #e9a6b0;
}
html[data-theme="night"] .sheet { background: #3e3859; color: #ece4f6; }
.sheet-mask.show .sheet { transform: translateY(0); }
.sheet h2 { margin: 0 0 6px; font-size: 18px; color: #c2606e; }
html[data-theme="night"] .sheet h2 { color: #f0a3b4; }
.sheet .date { font-size: 11.5px; color: #b3a08c; margin-bottom: 15px; }
.sheet p { font-size: 14px; line-height: 1.8; white-space: pre-wrap; margin: 0 0 13px; color: #5a4a3c; }
html[data-theme="night"] .sheet p { color: #ded4ee; }
.sheet .close {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #e08a9a;
  border: none;
  border-radius: 10px;
  box-shadow: 0 3px 0 #c26b7c;
  cursor: pointer;
}
.sheet .close:active { transform: translateY(3px); box-shadow: none; }

.upcoming-list { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; }
.upcoming-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  background: #fbf3e6;
  border-radius: 9px;
  border: 1.5px solid #ece0cf;
}
html[data-theme="night"] .upcoming-item { background: #4a4368; border-color: #5d5580; }
.upcoming-item .d {
  font-size: 18px; font-weight: 800; color: #e0808f;
  font-variant-numeric: tabular-nums; min-width: 42px; text-align: center; line-height: 1;
}
.upcoming-item .d span { font-size: 10px; font-weight: 600; color: #b3a08c; display: block; margin-top: 2px; }
.upcoming-item .info { flex: 1; }
.upcoming-item .t { font-size: 13px; font-weight: 700; color: #5a4a3c; }
html[data-theme="night"] .upcoming-item .t { color: #ece4f6; }
.upcoming-item .s { font-size: 10.5px; color: #b3a08c; margin-top: 2px; }

/* ============================================================
   入场动画
   ============================================================ */
.room-intro {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: linear-gradient(170deg, #f6eee2, #ecdfcc);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  transition: opacity 0.7s ease, visibility 0.7s;
}
html[data-theme="night"] .room-intro { background: linear-gradient(170deg, #3a3352, #2b2540); }
.room-intro.done { opacity: 0; visibility: hidden; pointer-events: none; }
.room-intro .hh { font-size: 30px; color: #e597a4; animation: beat 1.5s ease-in-out infinite; }
.room-intro .t { font-size: 18px; font-weight: 700; letter-spacing: 3px; color: #5a4a3c; }
html[data-theme="night"] .room-intro .t { color: #ece4f6; }
.room-intro .n { font-size: 11px; letter-spacing: 4px; color: #a8988a; }
html[data-theme="night"] .room-intro .n { color: #b0a4c8; }