/* =====================================================================
   群相官网 · r2 质感层（示范，非产品代码）
   加载在 pm-design.css 之后。r2 回应用户样张反馈：纸色更丰富、背景有质感与装饰、
   醒梦切换改为隐藏式暗锁。位图（decor/）只做装饰层：不含文字、不承载结构与点击区（DEC-W041）。
   关闭：html.pm-tex-off 去掉全部纹理、插画与装饰件，只留色值（结构不变）。
   ===================================================================== */

/* ---------- T-03 r2：纸种与色值（每个房间一种纸） ---------- */
:root {
  --pm-paper: #E8DEC7;          /* 档案纸均值；纹理加载失败时的底色 */
  --pm-paper-2: #E2D5B8;
  --pm-card: #F6EFDE;
  --pm-field: #FBF6EA;
  --pm-field-line: #857661;
  --pm-line: #CDBE9C;
  --pm-ink-2: #554A3E;
  --pm-ink-3: #5E5347;
  --pm-link: #1D5560;
  --pm-match: #0F6F7C;
  --pm-danger: #922218;
  --pm-success: #2A5E33;
  --pm-warning: #744B00;
  --pm-btn-off: #E0D7C4;
  --pm-on-scene-2: #4A4136;
  --pm-paper-img: url("../assets/decor/paper-archive.webp");
  --pm-wall-img: url("../assets/decor/wall-hall.webp");
  --pm-accent: #5E4526;          /* 房间主色：页签、名牌、印章（不是红） */
  --pm-lamp: rgb(255 240 204 / .46);
  --pm-brass-grad: linear-gradient(180deg, #E2C78A 0%, #C3A262 52%, #A68645 100%);
}
[data-room="hall"]   { --pm-scene: #C5BBA5; --pm-wall-img: url("../assets/decor/wall-hall.webp");   --pm-paper-img: url("../assets/decor/paper-archive.webp"); --pm-paper: #E8DEC7; --pm-accent: #5E4526; }
[data-room="roster"] { --pm-scene: #C2B5B5; --pm-wall-img: url("../assets/decor/wall-roster.webp"); --pm-paper-img: url("../assets/decor/paper-album.webp");   --pm-paper: #ECE1D0; --pm-accent: #573C52; }
[data-room="skills"] { --pm-scene: #B8AC92; --pm-wall-img: url("../assets/decor/wall-skills.webp"); --pm-paper-img: url("../assets/decor/paper-tag.webp");     --pm-paper: #E6E3CD; --pm-accent: #2A5248; }
[data-room="tools"]  { --pm-scene: #A49A86; --pm-wall-img: url("../assets/decor/wall-tools.webp");  --pm-paper-img: url("../assets/decor/paper-tag.webp");     --pm-paper: #E6E3CD; --pm-accent: #2C4662; }
[data-room="post"]   { --pm-scene: #CBBC9F; --pm-wall-img: url("../assets/decor/wall-post.webp");   --pm-paper-img: url("../assets/decor/paper-manila.webp");  --pm-paper: #E5D5B1; --pm-accent: #5F3F28; }
[data-room="study"]  { --pm-scene: #BEC0B2; --pm-wall-img: url("../assets/decor/wall-study.webp");  --pm-paper-img: url("../assets/decor/paper-study.webp");   --pm-paper: #EAE3D1; --pm-accent: #3C4A36; }
[data-room="ledger"] { --pm-scene: #BFC5C2; --pm-wall-img: url("../assets/decor/wall-ledger.webp"); --pm-paper-img: url("../assets/decor/paper-ledger.webp");  --pm-paper: #E8E6D5; --pm-accent: #3A4246; }
[data-room="lost"]   { --pm-scene: #C5C0B5; --pm-wall-img: url("../assets/decor/wall-lost.webp");   --pm-paper-img: url("../assets/decor/paper-archive.webp"); --pm-paper: #E8DEC7; --pm-accent: #4A4540; }

/* ---------- D0 墙面：底材 + 房间图案 + 台灯光池 + 暗角 ---------- */
body {
  background-color: var(--pm-scene);
  background-image:
    radial-gradient(ellipse 62% 48% at 20% 0%, var(--pm-lamp), transparent 72%),              /* 台灯光池 */
    radial-gradient(ellipse 130% 95% at 50% 35%, transparent 52%, rgb(38 28 14 / .30) 100%),   /* 暗角 */
    var(--pm-motif, none),                                                                     /* 房间图案 */
    var(--pm-wall-img);
  background-size: 100% 100%, 100% 100%, var(--pm-motif-size, auto), 512px 512px;
  background-attachment: fixed;
}
/* 房间图案（我们自己的几何，SVG；浓度都很低） */
[data-room="hall"]   { --pm-motif: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96'><path d='M48 4 92 48 48 92 4 48Z' fill='none' stroke='%237A5F33' stroke-opacity='.16'/><circle cx='48' cy='48' r='2.2' fill='%237A5F33' fill-opacity='.22'/></svg>"); --pm-motif-size: 96px 96px; }
[data-room="roster"] { --pm-motif: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='140'><ellipse cx='60' cy='70' rx='22' ry='28' fill='none' stroke='%23573C52' stroke-opacity='.15' stroke-width='1.5'/><ellipse cx='60' cy='70' rx='17' ry='23' fill='none' stroke='%23573C52' stroke-opacity='.09'/><path d='M0 0h1M120 0' stroke='none'/></svg>"); --pm-motif-size: 120px 140px; }
[data-room="skills"] { --pm-motif: linear-gradient(180deg, transparent 0 236px, rgb(60 44 20 / .28) 236px 238px, rgb(255 246 220 / .20) 238px 240px, transparent 240px); --pm-motif-size: 100% 240px; }
[data-room="tools"]  { --pm-motif: linear-gradient(90deg, rgb(44 70 98 / .07) 1px, transparent 1px), linear-gradient(0deg, rgb(44 70 98 / .07) 1px, transparent 1px); --pm-motif-size: 32px 32px; }
[data-room="post"]   { --pm-motif: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><g fill='none' stroke='%235F3F28' stroke-opacity='.13'><circle cx='60' cy='60' r='34'/><circle cx='60' cy='60' r='28'/><path d='M100 52c14-8 28 8 42 0s28 8 42 0M100 62c14-8 28 8 42 0s28 8 42 0M100 72c14-8 28 8 42 0s28 8 42 0'/></g></svg>"); --pm-motif-size: 220px 220px; }
[data-room="study"]  { --pm-motif: repeating-linear-gradient(90deg, transparent 0 46px, rgb(60 74 54 / .05) 46px 48px); --pm-motif-size: auto; }
[data-room="ledger"] { --pm-motif: repeating-linear-gradient(0deg, transparent 0 27px, rgb(58 66 70 / .08) 27px 28px); --pm-motif-size: auto; }

/* 门厅台灯下的浮尘：慢速漂移，减少动效时静止 */
.pm-dust { position: fixed; inset: 0 auto auto 0; width: 60vw; height: 60vh; pointer-events: none; z-index: 0;
  background: url("../assets/decor/dust.png") 0 0 / 640px 640px; opacity: .35; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at 30% 10%, #000 30%, transparent 70%); mask-image: radial-gradient(ellipse at 30% 10%, #000 30%, transparent 70%);
  animation: pm-dust 90s linear infinite; }
@keyframes pm-dust { to { background-position: 640px 220px; } }
@media (prefers-reduced-motion: reduce) { .pm-dust { animation: none; } }
html.pm-motion-off .pm-dust { animation: none; }

/* ---------- D1 门楣：深色木纹 + 黄铜饰条 ---------- */
.pm-lintel {
  background: linear-gradient(180deg, rgb(255 255 255 / .05), transparent 30%), url("../assets/decor/lintel-wood.webp") 0 0 / 1024px 128px, var(--pm-lintel);
  border-bottom: 0;
  box-shadow: 0 1px 0 #6E5428, 0 2px 0 #D3B474, 0 3px 0 #8A6C3A, 0 8px 14px -6px rgb(0 0 0 / .45);
}

/* ---------- D2 纸面：纸种 + 磨损霉斑 + 内缘旧色 + 黄铜护角 ---------- */
.pm-sheet {
  background-color: var(--pm-paper);
  background-image: url("../assets/decor/foxing.png"), var(--pm-paper-img);
  background-size: 100% 100%, 512px 512px;
  border: 1px solid rgb(120 92 48 / .35);
  box-shadow: inset 0 0 0 1px rgb(255 250 236 / .45), inset 0 0 48px rgb(122 88 40 / .16), 0 18px 40px -26px rgb(40 28 12 / .55);
}
.pm-sheet::before { opacity: 1; background: none; /* r1 的 4% 噪声由纸纹位图取代 */
  /* 四个黄铜护角（只是装饰） */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><defs><linearGradient id='b' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23F1DDA4'/><stop offset='.5' stop-color='%23B8975A'/><stop offset='1' stop-color='%236E5428'/></linearGradient></defs><path d='M2 38V8a6 6 0 0 1 6-6h30v7H12a3 3 0 0 0-3 3v26z' fill='url(%23b)'/><circle cx='16' cy='16' r='2' fill='%236E5428'/><circle cx='15.4' cy='15.4' r='.9' fill='%23F1DDA4'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><defs><linearGradient id='b' x1='1' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23F1DDA4'/><stop offset='.5' stop-color='%23B8975A'/><stop offset='1' stop-color='%236E5428'/></linearGradient></defs><path d='M38 38V8a6 6 0 0 0-6-6H2v7h26a3 3 0 0 1 3 3v26z' fill='url(%23b)'/><circle cx='24' cy='16' r='2' fill='%236E5428'/><circle cx='23.4' cy='15.4' r='.9' fill='%23F1DDA4'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><defs><linearGradient id='b' x1='0' y1='1' x2='1' y2='0'><stop offset='0' stop-color='%236E5428'/><stop offset='.5' stop-color='%23B8975A'/><stop offset='1' stop-color='%23F1DDA4'/></linearGradient></defs><path d='M2 2v30a6 6 0 0 0 6 6h30v-7H12a3 3 0 0 1-3-3V2z' fill='url(%23b)'/><circle cx='16' cy='24' r='2' fill='%236E5428'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><defs><linearGradient id='b' x1='1' y1='1' x2='0' y2='0'><stop offset='0' stop-color='%236E5428'/><stop offset='.5' stop-color='%23B8975A'/><stop offset='1' stop-color='%23F1DDA4'/></linearGradient></defs><path d='M38 2v30a6 6 0 0 1-6 6H2v-7h26a3 3 0 0 0 3-3V2z' fill='url(%23b)'/><circle cx='24' cy='24' r='2' fill='%236E5428'/></svg>");
  background-position: -6px -6px, calc(100% + 6px) -6px, -6px calc(100% + 6px), calc(100% + 6px) calc(100% + 6px);
  background-repeat: no-repeat; inset: 0; z-index: 2; }
.pm-sheet > * { position: relative; z-index: 1; }

/* 投递处：纸面顶边的航空信封斜纹（墨蓝 + 棕，不用红） */
[data-room="post"] .pm-sheet { border-top: 0; padding-top: calc(var(--pm-s-6) + 10px); }
[data-room="post"] .pm-sheet::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; border-radius: 12px 12px 0 0;
  background: repeating-linear-gradient(135deg, #2C4662 0 14px, #E5D5B1 14px 22px, #5F3F28 22px 36px, #E5D5B1 36px 44px); opacity: .85; }
/* 书房：页面底部一排书脊（纯 CSS） */
.pm-shelf { height: 68px; margin-top: var(--pm-s-7); border-radius: 4px; position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, transparent 0 58px, #3A2A18 58px 62px, #6E5428 62px 63px, #2A1E12 63px),
    repeating-linear-gradient(90deg, #4B3A5A 0 18px, #2E3A2C 18px 30px, #6B4A2B 30px 52px, #2C4662 52px 64px, #7A6236 64px 80px, #3D2C24 80px 96px, #56604A 96px 108px, #5A3E3A 108px 126px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.pm-shelf::before { content: ""; position: absolute; inset: 0 0 10px; background: repeating-linear-gradient(90deg, transparent 0 7px, rgb(255 240 200 / .18) 7px 8px, transparent 8px 22px), linear-gradient(180deg, rgb(255 255 255 / .10), transparent 40%, rgb(0 0 0 / .25)); }

/* 页签、名牌用房间主色 */
.pm-tab { background: var(--pm-accent); color: #F6EFDE; box-shadow: 0 1px 0 rgb(0 0 0 / .2); }
.pm-section { border-top-color: rgb(120 92 48 / .3); }
.pm-gtitle::after { background: linear-gradient(90deg, var(--pm-brass), rgb(168 137 79 / .2)); }

/* ---------- D3 卡片：浅一号的卡纸（也有纹理） ---------- */
.pm-pcard, .pm-strip, .hall-room, .post-card, .pm-docframe, .dt-side, .pm-queue, .st-detail {
  background-color: var(--pm-card);
  background-image: linear-gradient(rgb(255 251 240 / .5), rgb(255 251 240 / .5)), url("../assets/decor/paper-album.webp");
  background-size: auto, 512px 512px;
}
.pm-pcard__body { background: transparent; }
.pm-strip__plate { background: rgb(232 222 199 / .7); }
/* 名片顶部的打孔（目录卡片的孔，装饰） */
.pm-pcard__cover::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgb(0 0 0 / .35), rgb(0 0 0 / .15) 60%, transparent 62%), var(--pm-scene); box-shadow: inset 0 1px 2px rgb(0 0 0 / .4); z-index: 1; }

/* ---------- 铜扣按钮：金属渐变 ---------- */
.pm-btn--primary {
  background: var(--pm-brass-grad); border-color: #6E5428;
  box-shadow: inset 0 1px 0 rgb(255 248 220 / .65), inset 0 -1px 0 rgb(80 58 24 / .35), 0 1px 0 rgb(0 0 0 / .15);
  text-shadow: 0 1px 0 rgb(255 240 200 / .35);
}
.pm-btn--primary:hover { box-shadow: inset 0 1px 0 rgb(255 248 220 / .65), 0 0 14px 2px rgb(226 199 138 / .6); }
.pm-btn--primary:active { background: linear-gradient(180deg, #A68645, #9A7A42); box-shadow: inset 0 2px 3px rgb(60 40 10 / .35); }

/* ---------- 梦：夜空（位图）+ 夜桌皮面 ---------- */
html[data-state="dream"] body {
  background-color: #0D1719;
  background-image: radial-gradient(ellipse 80% 60% at 50% 30%, transparent 40%, rgb(0 0 0 / .45)), url("../assets/decor/night-sky.webp");
  background-size: 100% 100%, cover; background-position: center, center top; background-attachment: fixed;
}
.pm-table {
  background-color: #182E30;
  background-image: radial-gradient(ellipse 70% 60% at 50% 20%, rgb(111 214 227 / .07), transparent 70%), url("../assets/decor/wall-night-table.webp");
  background-size: 100% 100%, 512px 512px;
  border: 1px solid #2E4A4A; box-shadow: inset 0 0 0 4px rgb(0 0 0 / .18), inset 0 0 60px rgb(0 0 0 / .45), 0 24px 50px -30px rgb(0 0 0 / .8);
}
.pm-read { background-color: #EFE4CC; background-image: url("../assets/decor/foxing.png"), url("../assets/decor/paper-night.webp"); background-size: 100% 100%, 512px 512px;
  box-shadow: inset 0 0 50px rgb(122 88 40 / .18), 0 30px 60px -30px rgb(0 0 0 / .8); }
.pm-workcard__plate { background-color: var(--pm-plate); background-image: linear-gradient(rgb(255 250 236 / .4), rgb(255 250 236 / .4)), url("../assets/decor/paper-night.webp"); background-size: auto, 512px 512px; }

/* ---------- 关闭纹理与装饰 ---------- */
html.pm-tex-off body, html.pm-tex-off .pm-sheet, html.pm-tex-off .pm-table, html.pm-tex-off .pm-read,
html.pm-tex-off .pm-pcard, html.pm-tex-off .pm-strip, html.pm-tex-off .pm-docframe, html.pm-tex-off .pm-lintel { background-image: none !important; }
html.pm-tex-off .pm-sheet::before, html.pm-tex-off .pm-sheet::after, html.pm-tex-off .pm-dust, html.pm-tex-off .pm-shelf { display: none; }

/* ======================= C-008 r2 暗锁 ======================= */
.pm-lock { position: relative; width: 44px; height: 44px; flex: none; }
.pm-lock__link { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  -webkit-user-drag: none; -webkit-user-select: none; user-select: none; touch-action: none; cursor: default; -webkit-tap-highlight-color: transparent; }
.pm-lock__rose { width: 36px; height: 36px; overflow: visible; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .6)); }
.pm-lock__rose .rim { fill: url(#pm-brass-g); }
.pm-lock__rose .rim-in { fill: none; stroke: url(#pm-brass-in); stroke-width: 1; }
.pm-lock__rose .stud { fill: #6E5428; }
.pm-lock__rose .core { fill: url(#pm-core-g); }
.pm-lock__rose .hole { fill: #0A0806; transition: fill 400ms linear; }
.pm-lock__rose .key { fill: url(#pm-brass-g); stroke: #5A4420; stroke-width: .6; }
html[data-state="dream"] .pm-lock__rose .rim, html[data-state="dream"] .pm-lock__rose .key { fill: url(#pm-silver-g); }
html[data-state="dream"] .pm-lock__rose .stud { fill: #4B6A6D; }
.pm-lock__link:hover .hole { fill: #3A2A10; }
.pm-lock[data-phase="holding"] .hole { fill: #E8C878; }            /* 按住时锁眼渐渐亮起：插入进度 */
.pm-lock__key { transform-box: view-box; transform-origin: 20px 20px; transform: rotate(var(--lock-deg, 0deg)); opacity: 0; transition: opacity 120ms; }
.pm-lock:is([data-phase="turning"], [data-phase="auto"], [data-phase="committing"], [data-phase="returning"]) .pm-lock__key { opacity: 1; }
.pm-lock[data-phase="returning"] .pm-lock__key { transition: transform var(--lock-return, 320ms) cubic-bezier(.2,.7,.2,1), opacity 120ms var(--lock-return, 320ms); }
.pm-lock__dial { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; pointer-events: none; opacity: 0; transition: opacity 160ms; z-index: 30; overflow: visible; }
.pm-lock:is([data-phase="turning"], [data-phase="auto"], [data-phase="committing"]) .pm-lock__dial { opacity: 1; }
.pm-lock__track { fill: rgb(13 17 18 / .55); stroke: rgb(168 137 79 / .55); stroke-width: 1; }
.pm-lock__tick { stroke: rgb(237 230 214 / .28); stroke-width: 2.2; stroke-linecap: round; transition: stroke 80ms; }
.pm-lock__tick[data-on="true"] { stroke: #6FD6E3; }
.pm-lock[data-ready="true"] .pm-lock__tick[data-on="true"] { stroke: #B8F1F7; filter: drop-shadow(0 0 3px #6FD6E3); }
.pm-lock[data-glint] .pm-lock__rose { animation: pm-glint 520ms ease-out; }
@keyframes pm-glint { 30% { filter: drop-shadow(0 0 6px rgb(241 221 164 / .9)) brightness(1.25); } }
.pm-lock__hint { position: absolute; right: -6px; top: 52px; white-space: nowrap; font-size: 12px; color: #EDE6D6; background: rgb(23 27 28 / .92);
  border: 1px solid #6E5428; border-radius: 6px; padding: 4px 8px; opacity: 0; transition: opacity 160ms; pointer-events: none; z-index: 31; }
.pm-lock__hint[data-show="true"] { opacity: 1; }
.pm-lock--l { width: 96px; height: 96px; }
.pm-lock--l .pm-lock__link { width: 96px; height: 96px; }
.pm-lock--l .pm-lock__rose { width: 84px; height: 84px; }
.pm-lock--l .pm-lock__dial { width: 220px; height: 220px; margin: -110px 0 0 -110px; }
.pm-lock--l .pm-lock__hint { right: auto; left: 50%; transform: translateX(-50%); top: 104px; }
@media (prefers-reduced-motion: reduce) { .pm-lock__key, .pm-lock[data-phase="returning"] .pm-lock__key { transition: opacity 80ms; } .pm-lock[data-glint] .pm-lock__rose { animation: none; } }

/* C-008 r4：第二次失败时锁眼里浮出钥匙的虚影（无字线索），700ms 沉进锁眼 */
.pm-lock__ghost { fill: #E8C878; opacity: 0; transform-box: view-box; transform-origin: 20px 20px; pointer-events: none; }
.pm-lock[data-ghost] .pm-lock__ghost { animation: pm-key-ghost 720ms cubic-bezier(.3, .6, .3, 1) both; }
@keyframes pm-key-ghost { 0% { opacity: 0; transform: translateY(-9px); } 30% { opacity: .55; } 100% { opacity: 0; transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .pm-lock[data-ghost] .pm-lock__ghost { animation: pm-key-ghost-fade 720ms linear both; } }
@keyframes pm-key-ghost-fade { 0%, 100% { opacity: 0; } 40% { opacity: .5; } }
html.pm-motion-off .pm-lock[data-ghost] .pm-lock__ghost { animation: pm-key-ghost-fade 720ms linear both; }
/* C-008 r4：红线文案只在钥匙插进去之后出现（刻度盘下方），发现了锁的人才看得见 */
.pm-lock__line { position: absolute; right: -10px; top: 78px; z-index: 5; display: grid; gap: 3px; justify-items: end; white-space: nowrap; pointer-events: none;
  padding: 6px 10px; border-radius: 3px; background: rgb(10 14 15 / .85); color: #DCE7E5; font: 12px/1.3 var(--pm-font-serif);
  opacity: 0; transform: translateY(-4px); transition: opacity 200ms, transform 200ms var(--pm-ease-out); }
.pm-lock__line small { font: 600 9px/1 var(--pm-font-sans); letter-spacing: .22em; color: #9FD8E8; }
.pm-lock:is([data-phase="turning"], [data-phase="auto"], [data-phase="committing"]) .pm-lock__line { opacity: 1; transform: none; }
.pm-lock--l .pm-lock__line { right: auto; left: 50%; transform: translate(-50%, -4px); top: 130px; justify-items: center; }
.pm-lock--l:is([data-phase="turning"], [data-phase="auto"], [data-phase="committing"]) .pm-lock__line { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .pm-lock__line { transition: opacity 80ms; transform: none; } }