/* ============================================================
   C’est la vie. · 微缩回忆房间（V2）
   手工模型感：正面剖切、纸板厚度、可见接缝。
   ============================================================ */

:root {
  --paper: #f6eed9;
  --paper-2: #efe3cd;
  --ink: #2b2419;
  --ink-soft: #5b4f3d;
  --ink-faint: #8a7c65;
  --red: #a5342a;
  --wood: #a87f52;
  --wood-d: #7a5a3a;
  --f-serif: "Songti SC", "STSong", "Noto Serif CJK SC", "SimSun", serif;
  --f-hand: "Hannotate SC", "HanziPen SC", "Kaiti SC", "STKaiti", "KaiTi", cursive;
  --f-sans: "PingFang SC", "Hiragino Sans GB", -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #241d16;
  overscroll-behavior: none;
}

body {
  font-family: var(--f-serif);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.app {
  position: relative;
  height: 100dvh;
  overflow: hidden;
}

/* ---------------- HUD ---------------- */
.hud {
  position: absolute; left: 0; right: 0; top: 0;
  z-index: 40;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  pointer-events: none;
}
.hud-title { display: flex; flex-direction: column; gap: 3px; }
.hud-mark {
  font-family: var(--f-serif); font-size: 13px; letter-spacing: .06em;
  color: rgba(60, 44, 28, .9);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.hud-sub {
  font-family: var(--f-sans); font-size: 9.5px; letter-spacing: .16em;
  color: rgba(90, 72, 48, .68);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.hud-actions { pointer-events: auto; display: flex; align-items: center; gap: 8px; }

.found {
  font-family: var(--f-sans); font-size: 10px;
  color: rgba(70, 54, 34, .75);
  background: rgba(255, 250, 238, .72);
  border: 1px solid rgba(120, 96, 60, .22);
  border-radius: 12px;
  padding: 4px 9px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.found b { font-size: 12px; color: var(--red); }

.mus {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 10px 0 8px;
  border-radius: 14px;
  border: 1px solid rgba(120, 96, 60, .24);
  background: rgba(255, 250, 238, .72);
  color: rgba(70, 54, 34, .82);
  font-family: var(--f-sans); font-size: 10px; letter-spacing: .04em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mus .slash { opacity: 1; transition: opacity .2s; }
.mus.is-playing .slash { opacity: 0; }
.mus.is-playing { border-color: rgba(176, 138, 62, .55); color: #7a5a2a; }

/* ---------------- 房间 ---------------- */
.viewport {
  position: absolute; inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.viewport:active { cursor: grabbing; }

.room {
  position: absolute; inset: 0;
  will-change: transform;
}
/* 左右边缘渐隐：提示房间比屏幕宽，可以拖动 */
.viewport::before,
.viewport::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 42px;
  z-index: 20; pointer-events: none;
}
.viewport::before { left: 0; background: linear-gradient(90deg, rgba(238, 226, 203, .72), transparent); }
.viewport::after { right: 0; background: linear-gradient(270deg, rgba(238, 226, 203, .72), transparent); }
.room-inner {
  position: absolute; inset: 0;
  --px: 0px;
}
.room-svg {
  width: 100%; height: 100%;
  display: block;
}

/* 三层视差：墙 0.35 / 家具 0.75 / 前景 1.15 */
.lyr { transition: transform .1s linear; }
.lyr-back { transform: translateX(calc(var(--px, 0px) * 0.35)); }
.lyr-mid { transform: translateX(calc(var(--px, 0px) * 0.75)); }
.lyr-front { transform: translateX(calc(var(--px, 0px) * 1.15)); }

/* 未发现物件的呼吸光 */
.halo { transition: opacity .5s; }
.halo.breath {
  animation: haloBreath 2.8s ease-in-out infinite;
}
@keyframes haloBreath {
  0%, 100% { opacity: 0; }
  50% { opacity: .30; }
}

/* 可点区域 */
.spot { cursor: pointer; }
.spot:focus { outline: none; }

/* 台灯 */
.lamp .lamp-glow { transition: opacity .5s; }
.lamp.on .lamp-glow { opacity: .9; }

/* 窗 */
.sky-night { transition: opacity .8s; }

/* 抽屉 */
.drawer { cursor: pointer; }
.drawer-in { transition: opacity .35s; }
.drawer.open { transform: translateX(26px); }
.drawer { transition: transform .45s cubic-bezier(.2,.8,.2,1); }

/* 抱枕弹一下 */
.pillow-moon { transform-origin: center; }
.spot.bounce .pillow-moon { animation: pillowBounce .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes pillowBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  70% { transform: scale(.97); }
  100% { transform: scale(1); }
}

/* 唱片机 */
.vinyl { transform-origin: center; }
.turntable.playing .vinyl { animation: spin 3.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 日光 / 夜 / 灯光覆盖层 */
.light-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  transition: background 1s, opacity 1s;
  background: transparent;
}
.light-overlay.lamp-off {
  background: linear-gradient(180deg, rgba(40, 34, 48, .18), rgba(30, 26, 40, .26));
}
.light-overlay.lamp-on {
  background: radial-gradient(80% 50% at 64% 42%, rgba(255, 214, 140, .38), rgba(255, 200, 120, .10) 55%, transparent 78%);
}
.light-overlay.night {
  background: linear-gradient(180deg, rgba(24, 34, 62, .42), rgba(20, 26, 46, .5));
}
.light-overlay.night.lamp-on {
  background:
    radial-gradient(60% 40% at 64% 44%, rgba(255, 214, 140, .42), rgba(255, 200, 120, .12) 55%, transparent 76%),
    linear-gradient(180deg, rgba(24, 34, 62, .40), rgba(20, 26, 46, .48));
}

/* 底部提示 */
.hint {
  position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 30;
  text-align: center;
  font-family: var(--f-sans); font-size: 9.5px; letter-spacing: .14em;
  color: rgba(255, 248, 232, .72);
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
  pointer-events: none;
  transition: opacity .6s;
}

/* ---------------- 特写层 ---------------- */
.closeup {
  position: fixed; inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}
.closeup.on { visibility: visible; pointer-events: auto; }

.cu-backdrop {
  position: absolute; inset: 0;
  background: rgba(28, 22, 16, .5);
  backdrop-filter: blur(9px) saturate(.8);
  -webkit-backdrop-filter: blur(9px) saturate(.8);
  opacity: 0;
  transition: opacity .4s;
}
.closeup.on .cu-backdrop { opacity: 1; }

.cu-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  top: calc(env(safe-area-inset-top, 0px) + 54px);
  background: var(--paper);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.35);
  transform: translateY(calc(100% + var(--pull, 0px)));
  transition: transform .45s cubic-bezier(.2,.85,.2,1);
  overflow: hidden;
}
.closeup.on .cu-panel { transform: translateY(var(--pull, 0px)); }
.cu-panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(176,138,62,.5), transparent);
}

.cu-close {
  position: absolute; right: 12px; top: 12px; z-index: 5;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(120, 96, 60, .25);
  background: rgba(255, 252, 244, .9);
  color: rgba(70, 54, 34, .8);
  display: grid; place-items: center;
}

.cu-grab {
  position: absolute; left: 50%; bottom: 6px;
  width: 38px; height: 4px; margin-left: -19px;
  border-radius: 2px;
  background: rgba(120, 96, 60, .25);
  z-index: 5;
  pointer-events: none;
}

.cu-scroll {
  position: absolute; inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 20px 34px;
  overscroll-behavior: contain;
}

.cu-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-right: 34px;
}
.cu-kicker {
  font-family: var(--f-sans); font-size: 8.5px; letter-spacing: .18em;
  color: rgba(110, 92, 64, .8);
}
.cu-num {
  font-family: var(--f-hand); font-size: 10px;
  color: rgba(140, 118, 82, .8);
}
.cu-title {
  margin: 8px 0 0;
  font-family: var(--f-serif); font-size: 21px; line-height: 1.34;
  font-weight: 600;
  letter-spacing: .01em;
}
.cu-hook {
  margin: 7px 0 0;
  font-family: var(--f-sans); font-size: 11px; line-height: 1.6;
  color: var(--ink-soft);
}
.cu-body { margin-top: 14px; }
.cu-foot {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px dashed rgba(120, 96, 60, .28);
}
.cu-src {
  font-family: var(--f-sans); font-size: 7.5px; line-height: 1.55;
  color: rgba(130, 114, 88, .72);
  word-break: break-all;
}
.cu-credit {
  margin-top: 6px;
  font-family: var(--f-sans); font-size: 7.5px; line-height: 1.5;
  color: rgba(130, 114, 88, .55);
}

/* 通用内容块 */
.cu-gif {
  border: 6px solid #fff;
  box-shadow: 0 4px 14px -6px rgba(50,34,16,.5);
  background: #fff;
  transform: rotate(-.6deg);
}
.cu-gif img { width: 100%; display: block; }
.cu-gif.small { width: 52%; margin: 0 auto; }
.cu-photo {
  border: 6px solid #fff;
  box-shadow: 0 4px 14px -6px rgba(50,34,16,.5);
  transform: rotate(.5deg);
}
.cu-photo img { width: 100%; display: block; }

.cu-chats { margin-top: 12px; }
.cu-chat {
  display: flex; align-items: baseline; gap: 7px;
  padding: 5px 0;
  border-bottom: 1px dotted rgba(120, 96, 60, .18);
  font-family: var(--f-serif); font-size: 12.5px; line-height: 1.5;
}
.cu-who {
  flex: 0 0 auto;
  font-family: var(--f-sans); font-size: 8px;
  color: #fff;
  background: rgba(90, 110, 140, .8);
  border-radius: 3px;
  padding: 1px 4px;
}
.cu-chat.her .cu-who { background: rgba(150, 80, 100, .82); }
.cu-txt { flex: 1 1 auto; }
.cu-chat.punch .cu-txt { font-family: var(--f-hand); font-size: 14.5px; color: var(--red); }
.cu-at {
  flex: 0 0 auto;
  font-family: var(--f-sans); font-size: 7.5px;
  color: rgba(130, 114, 88, .7);
}

.cu-note {
  margin: 10px 0 0;
  font-family: var(--f-sans); font-size: 9px; line-height: 1.65;
  color: rgba(96, 80, 56, .8);
}

.cu-next {
  display: block; width: 100%;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px dashed rgba(120, 96, 60, .4);
  border-radius: 4px;
  background: rgba(255, 252, 244, .7);
  font-family: var(--f-sans); font-size: 10px; letter-spacing: .04em;
  color: #6b5436;
  text-align: left;
}

/* 牛：计数条 */
.cu-bars { margin-top: 12px; }
.cu-bar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
  font-family: var(--f-sans); font-size: 9px;
  color: var(--ink-soft);
}
.cu-bar span { width: 14px; flex: 0 0 auto; }
.cu-bar i {
  flex: 1 1 auto; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #5a6e8c, #7a8ea8);
  max-width: 100%;
}
.cu-bar.her i { background: linear-gradient(90deg, #c9567a, #e08aa4); }
.cu-bar b { width: 26px; text-align: right; font-weight: 600; }

/* 斗图：卡片堆 */
.cu-deck {
  position: relative;
  height: 132px;
  margin-top: 6px;
}
.cu-card {
  position: absolute; left: 0; right: 0; top: 0;
  height: 112px;
  border: 1px solid rgba(90, 72, 46, .3);
  border-radius: 4px;
  background: linear-gradient(160deg, #f8f1df, #ede0c8);
  box-shadow: 0 3px 8px -4px rgba(50,34,16,.45);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 3px; padding: 12px 14px;
  transition: transform .45s cubic-bezier(.3,.8,.2,1), opacity .4s;
}
.cu-card:nth-child(2) { transform: translateY(6px) scale(.985); }
.cu-card:nth-child(3) { transform: translateY(12px) scale(.97); }
.cu-card:nth-child(4) { transform: translateY(18px) scale(.955); }
.cu-card:nth-child(5) { transform: translateY(24px) scale(.94); }
.cu-card.gone { transform: translate(120%, -30px) rotate(18deg); opacity: 0; }
.cc-i {
  position: absolute; right: 10px; top: 8px;
  font-family: var(--f-serif); font-size: 11px;
  color: rgba(110, 92, 64, .5);
}
.cc-t { font-family: var(--f-serif); font-size: 12.5px; }
.cc-m { font-family: var(--f-sans); font-size: 8px; color: rgba(110, 92, 64, .7); }
.cc-g {
  position: absolute; right: 44px; top: 50%; margin-top: -18px;
  width: 36px; height: 36px;
  background: #4a5a78; opacity: .18;
  clip-path: polygon(22% 4%, 78% 4%, 96% 40%, 84% 96%, 16% 96%, 4% 40%);
}
.cu-deck-out {
  margin-top: 14px;
  padding: 12px 14px;
  background: #f5e39a;
  font-family: var(--f-hand); font-size: 14px; line-height: 1.5;
  transform: rotate(-.6deg);
  box-shadow: 0 3px 10px -5px rgba(50,34,16,.5);
  opacity: 0; transform: translateY(6px) rotate(-.6deg);
  transition: opacity .5s, transform .5s;
}
.cu-deck-out.on { opacity: 1; transform: translateY(0) rotate(-.6deg); }
.cu-deck-out span { font-family: var(--f-sans); font-size: 9px; color: rgba(70,54,34,.75); }

/* 奶茶：点 20 次 */
.cu-tea {
  position: relative;
  margin-top: 4px;
  padding: 14px 0 8px;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, rgba(232,69,124,.06), transparent);
  border-radius: 8px;
  cursor: pointer;
}
.tea-cup { position: relative; width: 74px; height: 104px; }
.tea-lid {
  position: absolute; left: -4px; top: 0; width: 82px; height: 12px;
  border-radius: 4px;
  background: linear-gradient(180deg, #f6d0e0, #e8a8c2);
}
.tea-body {
  position: absolute; left: 2px; top: 12px; width: 70px; height: 92px;
  border-radius: 4px 4px 10px 10px;
  background: linear-gradient(180deg, #f6e2ea, #e8c4d4);
  box-shadow: inset -6px 0 10px rgba(180,120,140,.2);
}
.tea-body::after {
  content: "";
  position: absolute; left: 10px; right: 10px; bottom: 12px; height: 30px;
  border-radius: 6px;
  background: repeating-linear-gradient(180deg, rgba(140,90,70,.22) 0 4px, transparent 4px 8px);
}
.tea-count {
  position: absolute; left: 0; right: 0; bottom: -18px;
  text-align: center;
  font-family: var(--f-sans); font-size: 9px;
  color: rgba(110, 92, 64, .8);
}
.tea-tap {
  margin-top: 24px;
  font-family: var(--f-sans); font-size: 9px; letter-spacing: .1em;
  color: rgba(110, 92, 64, .7);
}
.cu-tea-reveal {
  margin-top: 12px;
  text-align: center;
  font-family: var(--f-hand); font-size: 20px;
  color: var(--red);
  opacity: 0;
  transition: opacity .6s;
}
.cu-tea-reveal span {
  display: block;
  margin-top: 3px;
  font-family: var(--f-sans); font-size: 8px;
  color: rgba(110, 92, 64, .7);
}

/* 夸奖机 */
.cu-machine {
  margin-top: 4px;
  padding: 14px;
  border: 1px solid rgba(100, 78, 44, .32);
  border-radius: 5px;
  background: linear-gradient(170deg, #e8d9b8, #dcc9a2);
}
.cm-strip {
  min-height: 62px;
  background: #fbf6e8;
  padding: 10px 12px;
  font-family: var(--f-hand); font-size: 15px; line-height: 1.5;
  box-shadow: 0 2px 6px -3px rgba(50,34,16,.4);
}
.cm-btn {
  margin-top: 10px;
  padding: 7px 16px;
  border-radius: 16px;
  border: 1.5px solid #8b7754;
  background: radial-gradient(circle at 36% 30%, #f0e2c2, #cbb894 70%);
  font-family: var(--f-serif); font-size: 11px; color: #5a4830;
}
.cm-note {
  margin-top: 8px;
  font-family: var(--f-sans); font-size: 8.5px; line-height: 1.6;
  color: rgba(96, 78, 48, .8);
}

/* 刮刮卡 */
.cu-scratch {
  position: relative;
  height: 108px;
  margin-top: 4px;
  border: 1px solid rgba(100, 80, 50, .28);
  overflow: hidden;
  background: #f7f0dd;
}
.cs-under {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.cs-under b { font-family: var(--f-hand); font-size: 26px; color: var(--red); }
.cs-under span { font-family: var(--f-sans); font-size: 8.5px; color: rgba(110,92,64,.8); }
.cs-cover {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(135deg, #b9b2a4 0 6px, #ada698 6px 12px);
  color: rgba(255,255,255,.75);
  font-family: var(--f-sans); font-size: 10px; letter-spacing: .16em;
  transition: opacity .35s;
}

/* 音符 */
.cu-notes { margin-top: 4px; }
.cn-row {
  display: flex; gap: 6px; justify-content: space-between;
}
.cn-btn {
  flex: 1 1 0;
  height: 46px;
  border: 1px solid rgba(100, 80, 50, .3);
  border-radius: 4px;
  background: linear-gradient(180deg, #fbf5e5, #efe3ca);
  font-family: var(--f-serif); font-size: 12px;
  color: #3a2f1e;
  transition: transform .15s, background .2s;
}
.cn-btn.on { background: #f0d79a; transform: translateY(-2px); }
.cn-hint {
  margin-top: 8px;
  font-family: var(--f-sans); font-size: 8.5px;
  color: rgba(110, 92, 64, .75);
  text-align: center;
}
.cn-all {
  display: block; margin: 8px auto 0;
  padding: 6px 16px;
  border-radius: 14px;
  border: 1px solid rgba(100, 80, 50, .3);
  background: #f6eed9;
  font-family: var(--f-serif); font-size: 10.5px;
  color: #4a3d2a;
}
.cu-scene {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(100, 80, 50, .2);
  border-radius: 4px;
  background: rgba(255, 252, 244, .6);
}
.cs-date {
  display: flex; justify-content: space-between;
  font-family: var(--f-sans); font-size: 8px;
  color: rgba(110, 92, 64, .8);
  margin-bottom: 6px;
}
.cs-line {
  font-family: var(--f-serif); font-size: 12px; line-height: 1.6;
  color: #3a2f1e;
}
.cs-line em {
  font-family: var(--f-sans); font-size: 8px; font-style: normal;
  color: var(--red); margin-left: 6px;
}

/* 信封 */
.cu-env {
  position: relative;
  margin-top: 6px;
  min-height: 150px;
  cursor: pointer;
}
.ce-letter {
  position: absolute; left: 0; right: 0; top: 0;
  padding: 12px 14px;
  background: #fdf8ea;
  border: 1px solid rgba(100, 80, 50, .22);
  transform: translateY(46px) scale(.96);
  opacity: 0;
  transition: transform .5s, opacity .4s;
  z-index: 1;
}
.cu-env.open .ce-letter { transform: translateY(0) scale(1); opacity: 1; }
.ce-env {
  position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
  z-index: 2;
  background: linear-gradient(180deg, #e8dcc4, #dccfb2);
  border: 1px solid rgba(100, 80, 50, .28);
  clip-path: polygon(0 0, 50% 42%, 100% 0, 100% 100%, 0 100%);
  display: grid; place-items: center;
}
.ce-env span {
  margin-top: 46px;
  font-family: var(--f-hand); font-size: 11px;
  color: rgba(110, 92, 64, .8);
}
.cu-env.open .ce-env { transform: translateY(58px); opacity: 0; transition: transform .5s, opacity .4s; }

.cu-gap {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid rgba(165, 52, 42, .55);
  background: rgba(165, 52, 42, .05);
}
.cu-gap b {
  display: block;
  font-family: var(--f-serif); font-size: 12.5px;
  color: var(--red);
}
.cu-gap p {
  margin: 6px 0 0;
  font-family: var(--f-sans); font-size: 9px; line-height: 1.7;
  color: rgba(96, 80, 56, .85);
}
.cu-apparatus {
  margin-top: 12px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-sans); font-size: 8.5px;
  color: rgba(110, 92, 64, .7);
}
.cu-apparatus i {
  font-style: normal;
  font-family: var(--f-serif); font-size: 22px;
  color: rgba(110, 92, 64, .5);
}

/* 四张晴天卡 */
.cu-sun { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.cs-card {
  padding: 9px 10px;
  background: linear-gradient(180deg, #fdf6e4, #f7ecd4);
  border: 1px solid rgba(100, 80, 50, .2);
  border-radius: 3px;
  box-shadow: 0 2px 6px -4px rgba(50,34,16,.5);
}
.cs-d {
  font-family: var(--f-sans); font-size: 7.5px;
  color: rgba(110, 92, 64, .8);
  margin-bottom: 4px;
}

/* 无障碍：减少动效 */
@media (prefers-reduced-motion: reduce) {
  .halo.breath { animation: none; opacity: .16; }
  .turntable.playing .vinyl { animation: none; }
  .spot.bounce .pillow-moon { animation: none; }
  .lyr { transition: none; }
}

@media (max-height: 700px) {
  .cu-panel { top: 46px; }
  .cu-title { font-size: 19px; }
}