/* 午夜当铺 · 样式：冷蓝灰 + 纸 + 一点朱红 */
:root {
  --night: #121820; --ink: #151b23; --deep: #1c242e; --slate: #2a3541; --steel: #3d4a58;
  --mist: #5d6c7b; --fog: #8a97a4; --pale: #b9c3cc; --moon: #dbe5ec;
  --paper: #e4e1d7; --paper2: #d3d0c5; --txt: #26303b;
  --verm: #c4412a; --vermL: #df6446;
  --serif: 'Noto Serif SC', 'Source Han Serif SC', 'Noto Serif CJK SC', 'Songti SC', 'SimSun', serif;
  --kai: 'STKaiti', 'KaiTi', 'Kaiti SC', '楷体', serif;
  --hud: 52px; --bottom: 132px;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .55 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  --fiber: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .32  0 0 0 0 .36  0 0 0 .22 0'/></filter><rect width='400' height='400' filter='url(%23f)'/></svg>");
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--pale); font-family: var(--serif); overflow: hidden; user-select: none; -webkit-user-select: none; }
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column;
  background: radial-gradient(ellipse at 50% 40%, #1b2430 0%, #0d1117 75%); }
#app::before { content: ''; position: absolute; inset: 0; background: var(--noise); opacity: .25; mix-blend-mode: overlay; pointer-events: none; }

/* ---------- 顶栏 ---------- */
#hud { height: var(--hud); flex: none; display: flex; align-items: center; gap: 12px; padding: 0 max(12px, env(safe-area-inset-left)); position: relative; z-index: 5; }
.badge { background: transparent; color: var(--pale); border: 1px solid #3d4a58; border-radius: 3px; padding: 6px 12px; font-size: 14px; letter-spacing: 2px; transition: all .3s; position: relative; }
.badge:hover { border-color: var(--fog); }
.badge.boss { color: #f1d8cf; border-color: var(--verm); background: rgba(196, 65, 42, .18); }
body.holding .badge { border-style: dashed; }
.badge.target { animation: breathe 1.6s ease-in-out infinite; }
#clock { font-size: 13px; color: var(--fog); letter-spacing: 2px; flex: 1; }
.hud-r { display: flex; gap: 6px; }
.hud-r button { background: rgba(255, 255, 255, .03); color: var(--pale); border: 1px solid #2f3a46; border-radius: 3px; padding: 6px 12px; font-size: 14px; position: relative; transition: border-color .2s, color .2s; }
.hud-r button:hover { border-color: var(--fog); color: var(--moon); }
#btnLamp { color: #e9d9c8; }
#btnNote.pulse::after { content: ''; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--verm); box-shadow: 0 0 8px var(--verm); }

/* ---------- 舞台 ---------- */
#stageWrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 8px; }
#stage { position: relative; aspect-ratio: 16 / 9; width: min(100%, calc((100dvh - var(--hud) - var(--bottom) - 8px) * 16 / 9)); overflow: hidden;
  border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(185, 195, 204, .08); background: #0e1319; }
#bg, #ov { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#bg { transition: opacity .35s, filter .35s; }
.paper-tex { position: absolute; inset: 0; background: var(--fiber), var(--noise); background-size: 400px 400px, 240px 240px; mix-blend-mode: soft-light; opacity: .9; pointer-events: none; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, transparent 52%, rgba(6, 9, 13, .55) 85%, rgba(4, 6, 9, .85) 100%); }
#stage.leaving #bg, #stage.leaving #ov { opacity: 0; filter: blur(6px); transition: opacity .3s, filter .3s; }
#stage.arriving #bg, #stage.arriving #ov { animation: inkIn .5s ease-out; }
@keyframes inkIn { from { opacity: 0; filter: blur(8px) brightness(.6); } to { opacity: 1; filter: none; } }

/* 可点的东西 */
.hot { cursor: pointer; }
.hot .hit { fill: transparent; stroke: var(--vermL); stroke-width: 3; stroke-opacity: 0; stroke-dasharray: 3 10; stroke-linecap: round; transition: stroke-opacity .25s; }
.hot:hover .hit { stroke-opacity: .8; animation: march 1.4s linear infinite; }
@media (hover: none) { .hot:hover .hit { stroke-opacity: 0; animation: none; } }
#stage.reveal .hot .hit { stroke-opacity: .9; animation: march 1.4s linear infinite, fadeHit 1.8s ease-in forwards; }
@keyframes march { to { stroke-dashoffset: -26; } }
@keyframes fadeHit { 0%, 60% { stroke-opacity: .9; } 100% { stroke-opacity: 0; } }
.hot:hover > g:first-child { filter: brightness(1.15); }
body.holding #ov { cursor: crosshair; }
.flame { animation: flick 2.4s ease-in-out infinite; transform-origin: 1330px 560px; }
@keyframes flick { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(.92, 1.08); } 60% { transform: scale(1.05, .95); } }
.motes circle { animation: mote 6s ease-in-out infinite; opacity: .0; }
@keyframes mote { 0%, 100% { opacity: 0; transform: translate(0, 0); } 50% { opacity: .7; transform: translate(6px, -10px); } }
.beam-out { animation: beamIn .5s ease-out; }
@keyframes beamIn { from { opacity: 0; } }
.mirror-rot { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.shadow-on-wall { animation: shadowIn 1.6s ease-out; }
@keyframes shadowIn { from { opacity: 0; } }
.papercut { animation: sway 5s ease-in-out infinite; transform-origin: 1000px 0; }
@keyframes sway { 0%, 100% { transform: rotate(-.4deg); } 50% { transform: rotate(.4deg); } }
.bell { transition: transform .2s; }
.bell.ring { animation: swing .9s ease-out; }
@keyframes swing { 0% { transform: rotate(0); } 15% { transform: rotate(9deg); } 35% { transform: rotate(-7deg); } 55% { transform: rotate(4deg); } 75% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
.crab-legs { transform-origin: 0 6px; }
.crab-legs.wig { animation: wig .12s linear 5; }
@keyframes wig { 0% { transform: scaleX(1); } 50% { transform: scaleX(1.18) translateY(2px); } 100% { transform: scaleX(1); } }

/* 旁白 */
#say { position: fixed; left: 50%; bottom: calc(var(--bottom) + 18px); z-index: 45; transform: translate(-50%, 10px); width: min(86%, 760px); padding: 14px 22px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(14, 19, 25, .88), rgba(14, 19, 25, .94)); border: 1px solid rgba(185, 195, 204, .14);
  color: #dbe2e8; font-size: clamp(14px, 1.7vw, 18px); line-height: 1.75; letter-spacing: 1px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#say.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; }
#say p { margin: 0; }
#say .more { position: absolute; right: 14px; bottom: 10px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--verm); animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }

/* ---------- 底栏 ---------- */
#bottom { flex: none; height: var(--bottom); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 8px max(8px, env(safe-area-inset-bottom)); }
#nav { display: flex; gap: 6px; }
.nav-b { background: transparent; color: var(--fog); border: none; border-bottom: 1px solid transparent; padding: 4px 14px; font-size: 14px; letter-spacing: 3px; }
.nav-b.cur { color: var(--moon); border-bottom-color: var(--verm); }
.nav-b.locked { color: #3a4552; cursor: default; }
.nav-b:not(.locked):not(.cur):hover { color: var(--pale); }
#inv { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding: 2px 4px 4px; scrollbar-width: none; }
#inv::-webkit-scrollbar { display: none; }
.slot-item, .slot-empty { flex: none; width: 70px; height: 74px; border-radius: 4px; border: 1px solid #2c3743; background: rgba(28, 36, 46, .7); position: relative; }
.slot-empty { background: rgba(20, 26, 33, .4); border-style: dashed; border-color: #222b35; }
.slot-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 2px; color: var(--pale); transition: transform .15s, border-color .2s, box-shadow .2s; }
.slot-item:hover { border-color: var(--mist); transform: translateY(-2px); }
.slot-item .icon { width: 40px; height: 40px; }
.slot-item span { font-size: 11px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 66px; letter-spacing: 0; }
.slot-item.sel { border-color: var(--verm); box-shadow: 0 0 0 1px var(--verm), 0 0 18px rgba(196, 65, 42, .45); transform: translateY(-4px); }
.slot-item.red { background: rgba(70, 30, 26, .45); }
.slot-item.new { animation: pop .8s ease-out; }
@keyframes pop { 0% { transform: scale(1.3); box-shadow: 0 0 24px rgba(223, 100, 70, .8); } 100% { transform: none; } }
.fly { position: fixed; width: 80px; height: 80px; z-index: 50; pointer-events: none; transition: transform .7s cubic-bezier(.5, -0.2, .4, 1), opacity .7s; filter: drop-shadow(0 0 12px rgba(223, 100, 70, .6)); }
.fly .icon { width: 100%; height: 100%; }

/* toast */
#toasts { position: fixed; top: calc(var(--hud) + 6px); right: 12px; z-index: 40; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; }
.toast { background: rgba(14, 19, 25, .92); border-left: 2px solid var(--verm); color: #cfd7de; font-size: 13px; padding: 6px 12px; animation: toastIn .3s ease-out; transition: opacity .5s, transform .5s; }
.toast.out { opacity: 0; transform: translateX(10px); }
@keyframes toastIn { from { opacity: 0; transform: translateX(16px); } }

/* ---------- 细看（纸） ---------- */
#modal { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5, 8, 11, .62); opacity: 0; transition: opacity .22s; }
#modal.show { opacity: 1; }
.sheet { position: relative; width: min(860px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 30px 30px 24px; color: var(--txt);
  background: var(--fiber), var(--noise), linear-gradient(180deg, #e8e5dc, #dcd8cd); background-size: 400px 400px, 240px 240px, auto;
  border-radius: 2px; box-shadow: 0 30px 80px rgba(0, 0, 0, .65), inset 0 0 60px rgba(92, 108, 123, .25);
  transform: translateY(8px) scale(.985); transition: transform .25s; }
#modal.show .sheet { transform: none; }
.sheet::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(38, 48, 59, .14); pointer-events: none; }
.sheet.shake { animation: shake .35s; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.x { position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 26px; color: #5d6c7b; z-index: 2; line-height: 1; padding: 4px 8px; }
.x:hover { color: var(--verm); }
.body .art { width: 100%; height: auto; display: block; max-height: 52dvh; }
.cap { color: #3e4955; font-size: 15px; line-height: 1.8; text-align: center; margin: 12px 0 4px; }
.big { font-size: 22px; text-align: center; letter-spacing: 2px; margin: 18px 0; color: #1d242c; }
.center { display: flex; justify-content: center; }
.center .art { max-width: 520px; }
.split { display: flex; gap: 24px; align-items: center; }
.split .col { flex: 1; min-width: 0; }
.split .col:last-child { flex: 0 1 auto; max-width: 48%; display: flex; flex-direction: column; justify-content: center; }
.btns { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.btns button, .menu button, .title-btns button, .hint button { background: transparent; border: 1px solid #5d6c7b; color: #26303b; padding: 8px 20px; font-size: 15px; letter-spacing: 2px; border-radius: 2px; transition: all .2s; }
.btns button:hover:not(:disabled) { background: rgba(38, 48, 59, .08); border-color: #26303b; }
.btns button.primary { border-color: var(--verm); color: var(--verm); }
.btns button.primary:hover:not(:disabled) { background: var(--verm); color: #f6ece6; }
.btns button:disabled { opacity: .4; cursor: default; }

.paper { padding: 10px 6px; }
.hand { font-family: var(--kai); }
.paper.hand p { font-size: 22px; line-height: 1.9; margin: 0; color: #1d242c; }
.paper.hand p:first-child { margin-bottom: 6px; }

/* 当票：竖排 */
.ticket { writing-mode: vertical-rl; background: linear-gradient(90deg, #ece6d6, #e2dccb); border: 1px solid #b7ae98; padding: 18px 14px; height: 330px; position: relative;
  box-shadow: 2px 3px 10px rgba(0, 0, 0, .18); color: #2b2a26; font-size: 15px; letter-spacing: 2px; display: flex; gap: 10px; }
.ticket::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(143, 45, 29, .35); pointer-events: none; }
.t-in { display: flex; flex-direction: column; gap: 6px; }
.t-no { font-size: 22px; font-weight: 700; color: #8f2d1d; margin-left: 6px; }
.t-row b { color: #8f2d1d; font-weight: 400; margin-bottom: 8px; display: inline-block; }
.t-row.how { color: #1d242c; }
.sz { font-size: 22px; font-family: var(--serif); }
.blank { border-left: 1px solid #a49c86; }
.t-seal { writing-mode: horizontal-tb; position: absolute; left: 12px; bottom: 14px; width: 44px; height: 44px; border: 2px solid var(--verm); color: var(--verm); font-size: 13px; line-height: 1.15; text-align: center; padding-top: 6px; transform: rotate(-8deg); opacity: .85; border-radius: 3px; }

/* 规矩牌 */
.plaque { background: linear-gradient(180deg, #2b343e, #232b34); color: #cfd6dc; padding: 26px 34px 18px; border: 8px solid #141a21; box-shadow: inset 0 0 30px rgba(0, 0, 0, .5); }
.plaque h3 { text-align: center; letter-spacing: 12px; font-size: 26px; margin: 0 0 18px; color: #e3e8ec; font-weight: 700; }
.plaque p { font-size: 18px; line-height: 2; margin: 0; }
.small-print { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: #8a97a4; }
.flower { background: none; border: none; color: #c97a5c; padding: 2px; display: inline-flex; transition: color .3s; }
.flower.red { color: var(--verm); filter: drop-shadow(0 0 4px rgba(196, 65, 42, .6)); }
.flower.twitch svg { animation: twitch .4s; }
@keyframes twitch { 0% { transform: rotate(0) scale(1); } 20% { transform: rotate(-24deg) scale(.82); } 40% { transform: rotate(18deg) scale(1.1); } 60% { transform: rotate(-10deg) scale(.95); } 80% { transform: rotate(5deg); } 100% { transform: none; } }
.flower-say { text-align: center; min-height: 20px; font-size: 13px; color: #df8a70; margin-top: 4px; }

/* 锁 */
.lock { display: flex; justify-content: center; gap: 14px; margin: 20px 0 6px; padding: 24px 28px; background: linear-gradient(180deg, #a49d83, #8a836b); border-radius: 10px; width: fit-content; margin-left: auto; margin-right: auto; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 8px 20px rgba(0, 0, 0, .25); }
.dial { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dial button { background: rgba(30, 30, 25, .15); border: none; color: #2b2a26; width: 44px; height: 30px; border-radius: 3px; font-size: 14px; }
.dial button:hover { background: rgba(30, 30, 25, .3); }
.dv { width: 58px; height: 70px; display: flex; align-items: center; justify-content: center; font-size: 36px; background: linear-gradient(180deg, #1b1f24, #2c3138 50%, #1b1f24); color: #e7e2d4; border-radius: 4px; box-shadow: inset 0 0 10px rgba(0, 0, 0, .8); }
.lock.sym .dv { font-size: 32px; }

/* 怀表 */
.watch-ctl { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.watch-ctl span { color: #4a5560; margin: 0 2px 0 10px; }
.watch-ctl button { width: 40px; height: 34px; border: 1px solid #5d6c7b; background: transparent; color: #26303b; font-size: 18px; border-radius: 2px; }
.hand { transition: transform .25s; }
.body .split .art { max-width: 360px; margin: 0 auto; }

/* 八音盒 */
.tooth { transition: fill .15s; }
.tooth.lit { fill: #df6446; }

/* 信 */
.envelope { position: relative; background: linear-gradient(180deg, #ddd8ca, #d2ccbc); border: 1px solid #aaa28c; height: 170px; padding: 26px 30px; box-shadow: 2px 4px 12px rgba(0, 0, 0, .2); color: #1d242c; }
.env-to { font-size: 18px; }
.env-name { font-size: 40px; text-align: center; margin: 12px 0 0; min-height: 52px; letter-spacing: 8px; }
.blot { display: inline-block; width: 120px; height: 40px; background: radial-gradient(ellipse, #1d242c 30%, rgba(29, 36, 44, .6) 55%, transparent 72%); filter: blur(1px); }
.env-tail { position: absolute; right: 30px; bottom: 20px; font-size: 18px; }
.env-seal { position: absolute; left: 24px; bottom: 18px; width: 30px; height: 30px; border-radius: 50%; background: var(--verm); opacity: .85; }
.tray { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.type { width: 46px; height: 46px; font-size: 22px; background: linear-gradient(180deg, #8e8b7f, #6f6c61); color: #f1eee5; border: none; border-radius: 3px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); transition: transform .15s; }
.type:hover { transform: translateY(-2px); }
.type.on { background: var(--verm); }

/* 滑块 */
.slide-wrap { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.slide { display: grid; grid-template-columns: repeat(3, 1fr); width: min(360px, 78vw); aspect-ratio: 1; background: #0e1319; padding: 4px; gap: 3px; border-radius: 3px; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.tile { padding: 0; border: none; background: #1b232c; aspect-ratio: 1; transition: transform .12s; }
.tile:hover { transform: scale(.97); }
.tile.blank { background: #0e1319; }
.tile-art { width: 100%; height: 100%; display: block; }
.slide-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.thumb { width: 150px; height: 150px; border: 3px solid #1b232c; }
.chk { font-size: 13px; color: #4a5560; }
.slide-side button { background: transparent; border: 1px solid var(--verm); color: var(--verm); padding: 6px 12px; font-size: 13px; }

/* 药柜 */
.cab { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.drw { background: linear-gradient(180deg, #3a4550, #2e3740); border: 1px solid #1c242e; color: #d6dbe0; padding: 12px 6px 10px; border-radius: 2px; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .2); transition: transform .15s; }
.drw b { font-size: 22px; background: #d3d0c5; color: #26303b; width: 34px; height: 34px; line-height: 34px; text-align: center; font-weight: 400; }
.drw small { font-size: 12px; color: #aab5bf; text-align: center; line-height: 1.4; min-height: 34px; }
.drw:hover { transform: translateY(2px); }
.drw.opened { background: linear-gradient(180deg, #1c232b, #161c22); }

/* 钟 / 铜牌 */
.plate { background: linear-gradient(180deg, #a19c86, #8a846e); color: #2a2924; padding: 14px 18px; font-size: 16px; line-height: 1.9; text-align: center; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 10px rgba(0, 0, 0, .2); }
.split .col:last-child .cap { text-align: left; }
.wallbox .art { max-width: 460px; border-radius: 2px; }

/* 箱子 */
.chest-art .slot { cursor: pointer; }
.chest-art .slot:hover path { stroke: var(--vermL); }

/* 道具细看 */
.inv-look { text-align: center; }
.big-icon .icon { width: 120px; height: 120px; }
.inv-look h3 { margin: 6px 0; letter-spacing: 4px; }
.inv-look p { line-height: 1.9; font-size: 16px; color: #3e4955; }
.book h3 { text-align: center; letter-spacing: 3px; font-size: 18px; margin: 0 0 14px; }
.ros { display: flex; gap: 14px; padding: 10px 4px; border-bottom: 1px dashed #b7b2a3; line-height: 1.8; }
.ros b { font-size: 20px; flex: none; width: 56px; color: #1d242c; }
.ros span { font-size: 15px; color: #3e4955; }
.led { padding: 8px 4px; border-bottom: 1px dashed #b7b2a3; font-size: 15px; display: flex; justify-content: space-between; }
.led i { color: var(--verm); font-style: normal; }
.led.zero { display: block; border: 1px solid rgba(196, 65, 42, .45); background: rgba(196, 65, 42, .06); margin-top: 14px; padding: 12px; line-height: 1.9; color: #1d242c; }

/* ---------- 侧栏 ---------- */
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: 30; display: flex; flex-direction: column; color: var(--txt);
  background: var(--fiber), var(--noise), linear-gradient(180deg, #e6e3d9, #d9d5ca); background-size: 400px 400px, 240px 240px, auto;
  box-shadow: -20px 0 60px rgba(0, 0, 0, .55); animation: panelIn .25s ease-out; }
@keyframes panelIn { from { transform: translateX(30px); opacity: 0; } }
.phead { padding: 16px 20px; font-size: 18px; letter-spacing: 4px; border-bottom: 1px solid rgba(38, 48, 59, .15); display: flex; justify-content: space-between; align-items: center; }
.px { background: none; border: none; font-size: 24px; color: #5d6c7b; }
.pbody { flex: 1; overflow: auto; padding: 14px 20px 30px; }
.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tabs button { flex: 1; background: transparent; border: none; border-bottom: 2px solid transparent; padding: 8px; font-size: 15px; color: #5d6c7b; }
.tabs button.on { color: #1d242c; border-bottom-color: var(--verm); }
.first { font-size: 20px; color: #1d242c; border-bottom: 1px dashed #b7b2a3; padding-bottom: 10px; }
.clue { padding: 10px 0; border-bottom: 1px dashed #c4bfb0; }
.clue b { font-size: 15px; color: #8f2d1d; font-weight: 400; }
.clue p { margin: 4px 0 0; font-size: 14px; line-height: 1.8; color: #36414c; }
.clue.mem { cursor: pointer; }
.clue.mem:hover b { color: var(--verm); }
.dim { color: #6b7783; font-size: 13px; line-height: 1.8; }
.hint { padding: 12px 0; border-bottom: 1px dashed #c4bfb0; }
.hint b { font-size: 16px; display: block; }
.hint .tier { font-size: 14px; line-height: 1.8; margin: 6px 0; padding-left: 10px; border-left: 2px solid #8a97a4; }
.hint .tier.t2 { border-left-color: var(--verm); }
.hint button { margin-top: 6px; padding: 5px 14px; font-size: 13px; }
.menu { display: flex; flex-direction: column; gap: 10px; }
.menu button.danger { border-color: var(--verm); color: var(--verm); }

/* ---------- 记忆 ---------- */
#memory { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 18px;
  background: radial-gradient(ellipse at 50% 50%, rgba(96, 26, 16, .55), rgba(6, 8, 11, .92) 70%); opacity: 0; transition: opacity .4s; }
#memory.show { opacity: 1; }
.mem-card { width: min(620px, 100%); max-height: calc(100dvh - 36px); overflow: auto; padding: 34px 38px 28px; color: #f3e6df; position: relative;
  background: linear-gradient(160deg, rgba(150, 46, 28, .92), rgba(104, 30, 18, .94)); box-shadow: 0 30px 90px rgba(0, 0, 0, .7), inset 0 0 80px rgba(0, 0, 0, .3);
  border-radius: 2px; }
.mem-card::after { content: ''; position: absolute; inset: 0; background: var(--noise); opacity: .35; mix-blend-mode: overlay; pointer-events: none; }
.mem-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 18px; letter-spacing: 3px; }
.mem-head i { font-style: normal; margin-left: auto; font-size: 14px; opacity: .8; }
.mem-seal { border: 1px solid #f3e6df; padding: 2px 8px; font-size: 13px; }
.mem-card p { margin: 0 0 8px; font-size: clamp(15px, 2vw, 18px); line-height: 1.85; opacity: 0; animation: lineIn .8s ease-out forwards; }
@keyframes lineIn { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.mem-ok { display: block; margin: 20px auto 0; background: transparent; border: 1px solid #f3e6df; color: #f3e6df; padding: 8px 30px; font-size: 15px; letter-spacing: 4px; opacity: 0; animation: lineIn .6s forwards; position: relative; z-index: 1; }
.mem-ok:hover { background: #f3e6df; color: #8f2d1d; }

/* ---------- 开场 / 标题 / 结局 ---------- */
#intro, #ending { position: fixed; inset: 0; z-index: 70; background: #07090c; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .9s, background 3s; }
#intro.out { opacity: 0; }
#intro p, .end-line { font-size: clamp(18px, 3vw, 28px); letter-spacing: 4px; color: #cfd7de; animation: lineIn 1.2s ease-out; text-align: center; padding: 0 24px; line-height: 1.8; }
.skip { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #4a5560; letter-spacing: 3px; }
#ending::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 3.5s ease;
  background: radial-gradient(ellipse at 50% 115%, rgba(223, 100, 70, .35), transparent 45%), linear-gradient(180deg, #8ea1b2 0%, #c9d3da 55%, #e7e1d5 100%); }
#ending::after { content: ''; position: absolute; inset: 0; background: var(--fiber), var(--noise); background-size: 400px 400px, 240px 240px; mix-blend-mode: soft-light; pointer-events: none; }
#ending > * { position: relative; z-index: 1; }
#ending > .skip { position: absolute; }
#ending.dawn::before { opacity: 1; }
#ending .end-line { transition: color 2.5s; }
#ending.dawn .end-line { color: #1d242c; }
#ending.dawn .skip { color: #5d6c7b; }
.end-line.hand { font-family: var(--kai); font-size: clamp(22px, 3.4vw, 32px); }
.end-card { text-align: center; color: #1d242c; animation: lineIn 1.4s ease-out; padding: 20px; }
.end-card h2 { letter-spacing: 8px; font-size: clamp(24px, 4vw, 36px); margin: 18px 0; }
.end-seal { width: 76px; height: 76px; margin: 0 auto; border: 3px solid var(--verm); color: var(--verm); font-size: 44px; line-height: 70px; transform: rotate(-6deg); border-radius: 4px; }
.end-card .btns button { color: #1d242c; border-color: #5d6c7b; }
.end-card .btns button.primary { color: var(--verm); border-color: var(--verm); }

#title { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 60% 35%, rgba(219, 229, 236, .14), transparent 40%), radial-gradient(ellipse at 50% 50%, #1b2430, #07090c 80%); }
#title::before { content: ''; position: absolute; inset: 0; background: var(--fiber), var(--noise); background-size: 400px 400px, 240px 240px; mix-blend-mode: overlay; opacity: .8; }
#title::after { content: ''; position: absolute; width: 180px; height: 180px; border-radius: 50%; top: 14%; right: 18%; background: radial-gradient(circle, #e2eaef 0%, #b8c8d4 45%, rgba(184, 200, 212, 0) 70%); filter: blur(2px); opacity: .55; }
.title-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }

.title-in h1 { position: relative; writing-mode: vertical-rl; font-size: clamp(48px, 9vh, 84px); letter-spacing: 18px; margin: 0; color: #dfe6eb; font-weight: 700; text-shadow: 0 0 30px rgba(185, 195, 204, .25); animation: lineIn 2s ease-out; }
.title-in h1::after { content: '当'; writing-mode: horizontal-tb; position: absolute; font-size: 20px; letter-spacing: 0; border: 2px solid var(--verm); color: var(--verm); width: 34px; height: 34px; line-height: 30px; text-align: center; left: -46px; bottom: 4px; transform: rotate(-8deg); }
.sub { color: var(--fog); letter-spacing: 6px; font-size: 14px; margin: 0; }
.title-btns { display: flex; gap: 12px; }
.title-btns button { color: var(--pale); border-color: #3d4a58; background: rgba(0, 0, 0, .2); }
.title-btns button.primary { border-color: var(--verm); color: #f0d6cc; }
.title-btns button:hover { background: rgba(196, 65, 42, .2); }
.title-tip { font-size: 12px; color: #4a5560; letter-spacing: 3px; }

@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(196, 65, 42, .0); } 50% { box-shadow: 0 0 0 4px rgba(196, 65, 42, .35); } }

/* ---------- 窄屏 ---------- */
@media (max-width: 760px) {
  :root { --hud: 46px; --bottom: 122px; }
  #hud { gap: 6px; }
  .badge { padding: 5px 8px; font-size: 12px; letter-spacing: 1px; }
  #clock { font-size: 11px; letter-spacing: 0; }
  .hud-r button { padding: 5px 8px; font-size: 13px; }
  .split { flex-direction: column; }
  .ticket { writing-mode: horizontal-tb; height: auto; width: 100%; flex-direction: column; }
  .t-seal { left: auto; right: 12px; top: 10px; bottom: auto; }
  .t-row b { margin: 0 8px 0 0; }
  .sheet { padding: 26px 16px 18px; }
  .cab { grid-template-columns: repeat(3, 1fr); }
  .slot-item, .slot-empty { width: 60px; height: 66px; }
  .slot-item .icon { width: 34px; height: 34px; }
  .lock { padding: 16px; gap: 8px; }
  .dv { width: 46px; height: 58px; font-size: 28px; }
  .plaque { padding: 20px 18px 14px; }
  .plaque p { font-size: 16px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  :root { --hud: 40px; --bottom: 92px; }
  #nav { position: absolute; left: 10px; bottom: 30px; flex-direction: column; }
  #bottom { flex-direction: row; justify-content: center; }
  .slot-item, .slot-empty { width: 54px; height: 60px; }
  .slot-item span { display: none; }
}

@media (max-width: 760px) { .split .col:last-child { max-width: 100%; width: 100%; } }

.mem-card.fast p, .mem-card.fast .mem-ok { animation-delay: 0s !important; animation-duration: .3s; }
body.modal-open #say { bottom: auto; top: 14px; transform: translate(-50%, -10px); }
body.modal-open #say.on { transform: translate(-50%, 0); }
#ending .end-line.turn { animation: lineIn 1.2s ease-out, turnDark 3.5s ease forwards; }
@keyframes turnDark { from { color: #cfd7de; } to { color: #1d242c; } }


/* ---------- 镜旁转钮 ---------- */
.hot.turn:hover circle:first-child { fill: #f0ece2; }

/* ---------- 横向卷动（竖屏用） ---------- */
#stageWrap { position: relative; }
#pan { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pan-hint { display: none; }

@media (orientation: portrait) {
  :root { --bottom: 150px; }
  #stageWrap { display: block; padding: 0; }
  #pan { display: flex; align-items: center; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; height: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  #pan::-webkit-scrollbar { display: none; }
  #stage { flex: none; width: auto; height: min(100%, 92vw); aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none; }
  .pan-hint { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 34px; height: 64px; border: none; color: #e4e1d7; font-size: 30px; line-height: 1; opacity: 0; pointer-events: none; transition: opacity .3s;
    background: rgba(12, 16, 21, .55); }
  .pan-hint.l { left: 0; border-radius: 0 6px 6px 0; }
  .pan-hint.r { right: 0; border-radius: 6px 0 0 6px; }
  #stageWrap.can-left .pan-hint.l, #stageWrap.can-right .pan-hint.r { opacity: .85; pointer-events: auto; animation: nudge 2.4s ease-in-out infinite; }
  #stageWrap::after { content: '左右拖动看整间房'; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-size: 11px; letter-spacing: 3px; color: #4a5560; pointer-events: none; }
  #bottom { height: var(--bottom); justify-content: center; }
  #inv { flex-wrap: wrap; justify-content: center; max-width: 640px; }
  .slot-item, .slot-empty { width: 74px; height: 78px; }
}
@media (orientation: portrait) and (max-width: 500px) {
  :root { --bottom: 168px; }
  .slot-item, .slot-empty { width: 56px; height: 60px; }
  .slot-item span { font-size: 10px; }
}
@keyframes nudge { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(-50%) translateX(var(--nx, 3px)); } }
.pan-hint.l { --nx: -3px; }