/* ============================================================
   狄公案 · 合集启动器 v2 「文房案头」
   设计定稿：策划文档/通用/启动器三案改版/灰模.html（2026-08-15 作者验收）
   链路：封面(墨滴吞屏) → 灭灯案头(掌灯) → 点堆散卷(可滚动) → 取卷(墨滴)入案
   素材：img/desk/*（作者监修定稿 B1~B10 + A1 墨滴 18 帧）
   ============================================================ */

@font-face {
    font-family: 'YanZhenQing';
    src: url('../fonts/YanZhenQingFaShu-subset.woff2?v=4') format('woff2');
    font-display: swap;
}

:root {
    --ink: #2a1a0a;
    --gold: #c9a84c;
    --red: #8b2020;
    --font-title: 'YanZhenQing', 'Noto Serif SC', 'SimSun', serif;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { width:100%; height:100%; overflow:hidden; background:#000; font-family:var(--font-title); }

#stage {
    /* 手机满屏；宽屏按 9:19.5 竖条居中两侧黑边 */
    position:relative;
    height:100vh; height:100dvh;
    width:100vw;
    width:min(100vw, calc(100dvh * 9 / 19.5), 500px);
    margin:0 auto; overflow:hidden; background:#120c06;
    user-select:none; -webkit-user-select:none;
}

/* ===== 桌面（B1 定稿）===== */
#desk { position:absolute; inset:0; }
.desk-wood {
    position:absolute; inset:0;
    background:url('../img/desk/desk-b1.webp') center/cover no-repeat #2a1c0d;
}
.desk-wood::after {
    content:''; position:absolute; inset:0; opacity:.22; mix-blend-mode:multiply; pointer-events:none;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.35'/></svg>");
    background-size:200px 200px;
}

/* ===== 灯光层（光位对齐 B1 右下光晕）===== */
#lamplight {
    position:absolute; inset:0; z-index:40; pointer-events:none;
    background:
        radial-gradient(ellipse 85% 65% at 84% 66%,
            rgba(255,190,90,.24) 0%, rgba(255,170,70,.10) 30%,
            rgba(20,10,4,.28) 62%, rgba(8,4,2,.60) 100%);
    animation:flick 4.5s ease-in-out infinite alternate;
}
@keyframes flick { 0%{filter:brightness(1)} 44%{filter:brightness(1.05)} 100%{filter:brightness(.97)} }

/* ===== 黑场：灭灯案头（点击掌灯 → 烛光晕开）===== */
#darkness {
    position:absolute; inset:0; z-index:60; cursor:pointer;
    background:
        radial-gradient(ellipse 72% 52% at 50% 44%, rgba(90,64,32,.14) 0%, transparent 72%),
        rgba(2,1,0,.93);
    display:flex; align-items:center; justify-content:center;
    transition:opacity 1.8s ease, visibility 0s 1.8s;
}
#darkness .hint {
    color:rgba(232,214,180,.88); font-size:21px; letter-spacing:10px; margin-left:10px;
    opacity:0;
}
body.font-loaded #darkness .hint { animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.25} 50%{opacity:1} }
body.lit #darkness { opacity:0; visibility:hidden; pointer-events:none; }

/* ===== 封面 splash（原版视觉 + 墨滴转场）===== */
#splash {
    position:absolute; inset:0; z-index:65; cursor:pointer; overflow:hidden;
    background:#f6efde;
    --splash-x: 31.5vw; --splash-y: 6.5vh; --splash-size: 23.5vw; --splash-rot: 0deg;
}
@media (max-width: 768px) {
    #splash { --splash-x: 17.5vw; --splash-y: 5vh; --splash-size: 65vw; }
}
#splash.gone { display:none; }
.splash-bg {
    position:absolute; inset:0;
    background:url('../img/launcher-bg.webp') center/contain no-repeat;
    animation:splashBreath 14s ease-in-out infinite alternate;
}
@media (max-width: 600px) { .splash-bg { background-size:cover; } }
@keyframes splashBreath { 0%{transform:scale(1)} 100%{transform:scale(1.04)} }
.splash-vignette {
    position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse 100% 100% at 50% 46%, transparent 58%, rgba(40,26,10,.34) 100%);
}
.splash-content { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .8s ease; }
body.font-loaded .splash-content { opacity:1; }
.splash-title {
    position:absolute;
    left:var(--splash-x); top:var(--splash-y);
    transform:rotate(var(--splash-rot));
}
.splash-title-image {
    width:var(--splash-size); display:block;
    filter:drop-shadow(0 4px 14px rgba(0,0,0,.4));
}
.splash-tap {
    position:absolute; top:54%; left:50%; transform:translate(-50%,-50%);
    color:rgba(42,26,10,.95); font-size:19px; letter-spacing:4px; white-space:nowrap;
    text-shadow:0 0 8px rgba(255,255,255,.98), 0 0 18px rgba(255,255,255,.85),
        0 0 28px rgba(255,255,255,.55), 0 1px 2px rgba(255,255,255,.6);
    opacity:0;
}
body.font-loaded .splash-tap { animation:pulse 2.8s ease-in-out infinite; }

/* ===== 墨滴转场（A1 定稿 18 帧雪碧图，从点击坐标晕开）===== */
#inkfx {
    position:absolute; left:var(--ix,50%); top:var(--iy,50%); width:100px; height:100px; z-index:78;
    transform:translate(-50%,-50%) scale(.5);
    background:url('../img/desk/ink-sprite.webp') 0 0 / 1800% 100% no-repeat;
    pointer-events:none; opacity:0; transition:opacity .55s ease;
}
#inkfx.fade { opacity:0; }
#inkfx.go {
    opacity:1;
    animation:
        inkFrames 1.35s steps(17) forwards,
        inkSwell  1.35s cubic-bezier(.5,.1,.6,1) forwards;
}
@keyframes inkFrames { from { background-position-x:0; } to { background-position-x:100%; } }
@keyframes inkSwell  { from { transform:translate(-50%,-50%) scale(.5); }
                       to   { transform:translate(-50%,-50%) scale(1.12); } }

/* ===== 卷宗堆（B2 定稿）===== */
#pile {
    position:absolute; left:50%; top:43%; transform:translate(-50%,-50%);
    width:90%; aspect-ratio:1.4/1; cursor:pointer; z-index:10;
    transition:opacity .5s ease, transform .5s ease;
}
#pile img {
    width:100%; height:100%; object-fit:contain; display:block;
    filter:drop-shadow(10px 14px 16px rgba(0,0,0,.65)) sepia(.08) brightness(.94);
}
body.spread #pile { opacity:0; transform:translate(-50%,-50%) scale(1.06); pointer-events:none; }
#pile .hint {
    position:absolute; bottom:-10%; left:50%; transform:translateX(-50%);
    color:rgba(238,220,182,.92); font-size:19px; letter-spacing:9px; white-space:nowrap;
    text-shadow:0 1px 4px #000, 0 0 12px rgba(0,0,0,.8);
    opacity:0;
}
body.font-loaded #pile .hint { animation:pulse 3s ease-in-out infinite; }

/* ===== 卷宗列（散开后·可滚动）===== */
#folders {
    position:absolute; left:4%; right:4%; top:9.5%; bottom:15.5%;
    display:flex; flex-direction:column; justify-content:flex-start;
    z-index:11; pointer-events:none;
    overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:none; -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 3.5%, #000 95%, transparent 100%);
    mask-image:linear-gradient(180deg, transparent 0, #000 3.5%, #000 95%, transparent 100%);
    padding:3.5vh 0 2vh 0;
}
#folders::-webkit-scrollbar { display:none; width:0; }
body.spread #folders { pointer-events:auto; }
body.spread .folder { pointer-events:auto; opacity:1; }

.folder {
    position:relative; height:23vh; min-height:132px; flex:none; display:block;
    margin-bottom:4vh; pointer-events:none; cursor:pointer;
    transform:rotate(var(--rot,0deg));
    opacity:0; text-decoration:none; color:inherit;
    filter:drop-shadow(6px 9px 8px rgba(0,0,0,.55));
}
.folder:last-child { margin-bottom:1vh; }
body.spread .folder { animation:fin .55s cubic-bezier(.2,.7,.2,1) both; }
body.spread .folder:nth-child(1){ animation-delay:.05s }
body.spread .folder:nth-child(2){ animation-delay:.2s }
body.spread .folder:nth-child(3){ animation-delay:.35s }
body.spread .folder:nth-child(4){ animation-delay:.5s }
@keyframes fin {
    0%{ opacity:0; transform:rotate(var(--rot)) translateY(14px) scale(.96); }
    100%{ opacity:1; transform:rotate(var(--rot)) translateY(0) scale(1); }
}
.folder.pending { cursor:default; }
.folder.pending .f-body {
    background:linear-gradient(120deg,#cfc2a0 0%,#c2b391 55%,#ab9a74 100%);
    filter:grayscale(.35) brightness(.9);
}
.folder.pending .f-slip {
    color:rgba(50,32,12,.55); font-size:clamp(10px,2.8vw,13px); letter-spacing:0;
    background:linear-gradient(180deg,#e3d6b4 0%,#d6c69e 80%,#c3af82 100%);
}
.folder.pending .f-stamp-grey {
    position:absolute; right:3%; top:14%; z-index:5; transform:rotate(5deg);
    border:2.5px solid rgba(90,80,60,.65); border-radius:3px;
    color:rgba(90,80,60,.75); font-size:13px; font-weight:800; letter-spacing:2px;
    padding:4px 6px; background:rgba(220,208,180,.25);
}
@keyframes nope { 0%,100%{transform:rotate(var(--rot)) translateX(0)}
    25%{transform:rotate(var(--rot)) translateX(-5px)} 75%{transform:rotate(var(--rot)) translateX(5px)} }
.folder.pending.no { animation:nope .3s ease !important; opacity:1; }

/* 通用点击回弹 */
@keyframes tapFb {
    0%   { transform:rotate(var(--rot,0deg)) scale(.92); filter:brightness(.9); }
    55%  { transform:rotate(var(--rot,0deg)) scale(1.045); }
    100% { transform:rotate(var(--rot,0deg)) scale(1); }
}
.tap-fb { animation:tapFb .28s cubic-bezier(.3,1.4,.5,1) !important; }

/* 卷宗本体（B3 定稿） */
.f-body {
    position:absolute; inset:0;
    background:url('../img/desk/case-b3.webp') 0 0 / 100% 100% no-repeat;
    border-radius:4px; overflow:hidden; border:none;
}
.f-body::after {
    content:''; position:absolute; inset:0; mix-blend-mode:multiply; opacity:.3; pointer-events:none;
    background:
        radial-gradient(ellipse 40% 55% at 92% 90%, rgba(140,95,40,.30) 0%, transparent 70%),
        radial-gradient(ellipse 100% 100% at 50% 50%, transparent 66%, rgba(80,55,25,.28) 100%);
    background-size:cover;
}
/* 公文味：编号戳 + 骑缝半印 */
.f-num {
    position:absolute; left:22%; bottom:6%; z-index:2;
    color:rgba(60,35,12,.55); font-size:11px; letter-spacing:3px;
    transform:rotate(-1.5deg); font-weight:700; pointer-events:none;
}
.f-halfseal {
    position:absolute; right:-15px; top:50%; transform:translateY(-50%) rotate(3deg);
    width:30px; height:30px; z-index:2;
    border:2.5px solid rgba(150,40,30,.7); border-radius:2px;
    color:rgba(150,40,30,.78); font-size:15px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    mix-blend-mode:multiply; pointer-events:none;
}
/* 签条：竖排案名 */
.f-slip {
    position:absolute; left:4.5%; top:-3%; bottom:auto;
    height:auto; min-height:106%; padding:10px 0;
    width:15%; min-width:44px; z-index:3;
    background:linear-gradient(180deg,#f6ecd0 0%,#eee0ba 80%,#dcc999 100%);
    border:1px solid rgba(90,60,25,.4); border-top:none;
    box-shadow:2px 3px 5px rgba(0,0,0,.3);
    display:flex; align-items:center; justify-content:center;
    writing-mode:vertical-rl; text-orientation:upright;
    color:var(--ink); font-weight:800; letter-spacing:2px;
    font-size:clamp(13px,3.6vw,19px); white-space:nowrap;
}
.f-slip small { font-size:.62em; color:#6b4c26; letter-spacing:1px; }
/* 半掀露画：封面画页 */
.f-page {
    position:absolute; right:20%; top:8%; width:34%; height:84%; z-index:2;
    background:#f2e9d2; border:1px solid rgba(90,60,25,.35);
    transform:rotate(-3.5deg); transform-origin:bottom left;
    box-shadow:3px 4px 7px rgba(0,0,0,.35); overflow:hidden;
}
.f-page img { width:100%; height:100%; object-fit:cover; display:block;
    filter:sepia(.12) saturate(.85) brightness(.97); }
/* 朱印 + 进度 */
.f-seal { position:absolute; right:2.5%; top:-12%; width:44px; height:58px; z-index:5; transform:rotate(6deg); }
.folder:nth-child(2) .f-seal { transform:rotate(-7deg); }
.folder:nth-child(3) .f-seal { transform:rotate(4deg); }
.f-seal img { width:100%; height:100%; display:block; filter:drop-shadow(0 2px 4px rgba(120,0,0,.4)); }
.f-seal span {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:12px; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.7);
}
/* 流苏 */
.f-tassel { position:absolute; left:23%; top:-14px; height:46px; z-index:4;
    filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));
    transform-origin:top center; animation:sway 5s ease-in-out infinite alternate; }
@keyframes sway { 0%{transform:rotate(-2deg)} 100%{transform:rotate(2deg)} }
/* 状态件：狼毫（B4·续办）/ 字签 / 绳封（B5·卷四）/ 铜镇纸（B10·卷一） */
.f-brush {
    position:absolute; left:28%; right:16%; top:42%; height:auto; aspect-ratio:563/56; z-index:6;
    background:url('../img/desk/brush-b4.webp') 0 0 / 100% 100% no-repeat;
    transform:rotate(-2deg);
    filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));
    pointer-events:none;
}
.f-tag {
    position:absolute; left:31%; top:-9px; z-index:6;
    background:#8b2020; color:#f5e6c8; font-size:11px; letter-spacing:2px;
    padding:2px 7px 1px; border-radius:2px; box-shadow:0 2px 4px rgba(0,0,0,.5);
    pointer-events:none;
}
.f-tag.new { background:#8a5a1e; color:#f5e6c8; }
.f-cord {
    position:absolute; left:-1%; right:-1%; top:50%; transform:translateY(-50%) rotate(1deg);
    height:auto; aspect-ratio:563/101; z-index:6;
    background:url('../img/desk/cord-b5.webp') 0 0 / 100% 100% no-repeat;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));
    pointer-events:none;
}
.f-wax {
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:7;
    color:#f0d9b0; font-size:13px; font-weight:800; letter-spacing:0;
    text-shadow:0 1px 2px rgba(0,0,0,.6); pointer-events:none;
}
.f-weight {
    position:absolute; right:22%; bottom:6%; width:20%; height:auto; aspect-ratio:640/360; z-index:6;
    background:url('../img/desk/paperweight-b10.webp') center/contain no-repeat;
    transform:rotate(-7deg);
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));
    pointer-events:none;
}

/* ===== 底部文房道具（B6~B9 定稿）===== */
#props {
    position:absolute; left:2%; right:2%; bottom:2.6%; height:12%;
    display:flex; justify-content:space-evenly; align-items:flex-end; z-index:12;
}
.prop { position:relative; width:21%; height:100%; cursor:pointer; text-align:center;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.p-icon { width:min(58px,15vw); height:min(58px,15vw); position:relative; margin-bottom:4px;
    filter:drop-shadow(4px 5px 5px rgba(0,0,0,.55)); }
.p-label {
    color:#e4d3ab; font-size:12px; letter-spacing:2px;
    background:rgba(20,12,5,.55); padding:1px 7px; border-radius:2px;
    border:1px solid rgba(200,170,100,.25); white-space:nowrap;
}
.i-lamp { background:url('../img/desk/lamp-b6.webp') center/contain no-repeat; }
.i-lamp::after { content:''; position:absolute; left:44%; top:10%; width:12%; height:14%;
    background:rgba(255,239,192,.9); border-radius:50%;
    box-shadow:0 0 16px 9px rgba(255,200,100,.6);
    animation:flick 3s ease-in-out infinite alternate; }
.i-seal  { background:url('../img/desk/inkpad-b7.webp') center/contain no-repeat; }
.i-book  { background:url('../img/desk/roster-b8.webp') center/contain no-repeat; }
.i-gavel { background:url('../img/desk/gavel-b9.webp') center/contain no-repeat; }

/* ===== 覆盖页公共 ===== */
.ov { position:absolute; inset:0; z-index:70; display:none;
    background:rgba(5,3,1,.8); align-items:center; justify-content:center; }
.ov.on { display:flex; }
.ov-close {
    margin:12px auto 0; display:block; background:transparent; border:1px solid #6e3a24;
    color:#4a3318; padding:5px 22px; letter-spacing:4px; font-family:var(--font-title);
    font-size:13px; cursor:pointer; border-radius:2px; position:relative; z-index:1;
}

/* ===== 名册＝摊开册页（古籍版式）===== */
.ov-book { position:relative; width:88%; }
.book-page {
    position:relative; margin-left:26px;
    background:
        radial-gradient(ellipse 90% 70% at 50% 28%, rgba(120,80,30,.09) 0%, transparent 70%),
        linear-gradient(160deg, #eee1c0 0%, #e4d5ae 55%, #d4c194 100%);
    border:2.5px solid #6e3a24;
    box-shadow: inset 0 0 0 6px rgba(110,58,36,0), inset 0 0 0 7px rgba(110,58,36,.5),
        0 14px 34px rgba(0,0,0,.7);
    display:flex; flex-direction:column; padding:16px 14px 12px;
}
.book-page::after {
    content:''; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:.5;
    background:
        radial-gradient(ellipse 36% 22% at 90% 90%, rgba(140,95,40,.25) 0%, transparent 65%),
        radial-gradient(ellipse 100% 100% at 50% 50%, transparent 62%, rgba(80,55,25,.2) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='210' height='210'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' seed='11'/></filter><rect width='210' height='210' filter='url(%23n)' opacity='0.35'/></svg>");
    background-size:cover, cover, 190px 190px;
}
.page-title {
    text-align:center; color:#3a2410; font-size:17px; letter-spacing:8px;
    font-weight:800; flex-shrink:0; position:relative; z-index:1;
}
.page-sub {
    text-align:center; color:#6e4a26; font-size:12px; letter-spacing:3px;
    flex-shrink:0; margin:4px 0 8px; font-weight:700; position:relative; z-index:1;
}
.page-cols {
    height:clamp(150px, 24vh, 195px); position:relative; z-index:1;
    writing-mode:vertical-rl; text-orientation:upright;
    padding:6px 4px; overflow-x:auto; scrollbar-width:none;
}
.page-cols::-webkit-scrollbar { display:none; }
.ecol {
    border-left:1px solid rgba(110,58,36,.28);
    padding:2px 3px; margin-block-end:0;
    font-size:clamp(16px,4.6vw,20px); letter-spacing:1px; line-height:1.15;
    white-space:nowrap;
}
.ecol:last-child { border-left:none; }
.ecol .no { margin-inline-end:6px; font-size:.75em; color:rgba(110,70,30,.6); }
.ecol.long { font-size:clamp(12px,3.3vw,14px); letter-spacing:0; }
.ecol.on { color:#241505; font-weight:700; }
.ecol.on .no { color:#8b2020; font-weight:800; }
.ecol.off { color:rgba(70,50,30,.42); }
.page-foot {
    flex-shrink:0; display:flex; justify-content:space-between; align-items:center;
    color:#6e4a26; font-size:12px; letter-spacing:2px; padding:6px 4px 0;
    border-top:1px dashed rgba(110,58,36,.35); position:relative; z-index:1;
}
.book-tabs { position:absolute; left:0; top:7%; width:26px; display:flex; flex-direction:column; gap:6px; }
.btab {
    writing-mode:vertical-rl; text-orientation:upright;
    padding:11px 3px; font-size:13px; letter-spacing:3px; color:#e0cba0;
    background:linear-gradient(90deg,#6e3a24,#50281a); border-radius:4px 0 0 4px;
    cursor:pointer; opacity:.72; border:1px solid rgba(40,20,10,.6); border-right:none;
    font-family:var(--font-title);
}
.btab.on {
    opacity:1; background:linear-gradient(90deg,#8b2020,#5a150d);
    color:#f5e6c8; font-weight:700;
}

/* ===== 考功（成就）===== */
.ach-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:9px 8px;
    padding:6px 2px; position:relative; z-index:1;
    max-height:46vh; overflow-y:auto; scrollbar-width:none;
}
.ach-grid::-webkit-scrollbar { display:none; }
.ach {
    display:flex; flex-direction:column; align-items:center; gap:4px;
    font-size:11px; color:rgba(70,50,30,.55); text-align:center; line-height:1.3;
}
.ach .medal {
    width:min(52px,13vw); height:min(52px,13vw); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 40% 35%, #cfc0a0, #b3a380);
    color:rgba(70,50,30,.5);
    border:2px solid rgba(90,60,25,.35); font-size:15px; font-weight:800;
    overflow:hidden;
}
.ach .medal img { width:100%; height:100%; object-fit:cover; display:block; }
/* 未解锁：图标糊化——看得见有东西、认不出是什么（作者定：比纯灰醒目） */
.ach:not(.on) .medal img {
    filter:blur(5px) grayscale(.6) brightness(.92);
    transform:scale(1.12);
}
.ach.on { color:#241505; font-weight:700; }
.ach.on .medal {
    background:radial-gradient(circle at 40% 35%, #b03a2a, #7a1f14); color:#f5e6c8;
    border-color:#5a150d; box-shadow:0 2px 6px rgba(120,0,0,.4);
}

/* ===== 灯火（设置）===== */
.set-row { display:flex; align-items:center; gap:10px; margin:14px 0 0; font-size:14px;
    letter-spacing:2px; color:#3a2410; position:relative; z-index:1; }
.set-row input[type=range]{ flex:1; accent-color:#8b2020; }
.set-btn { background:#efe2c0; border:1px solid #6e3a24; color:#8b2020; padding:6px 14px;
    font-family:var(--font-title); letter-spacing:2px; font-size:13px; cursor:pointer; border-radius:2px; }
.set-note { font-size:11px; color:#6e4a26; letter-spacing:1px; margin-top:8px;
    position:relative; z-index:1; }

/* ===== 惊堂木特效 ===== */
@keyframes shake { 0%,100%{transform:translate(0)} 20%{transform:translate(-7px,3px)}
    40%{transform:translate(6px,-4px)} 60%{transform:translate(-4px,2px)} 80%{transform:translate(3px,-2px)} }
#stage.pa #desk { animation:shake .32s linear; }
#slam { position:absolute; inset:0; z-index:75; display:none; align-items:center; justify-content:center;
    pointer-events:none; background:rgba(255,240,210,.10); }
#slam.on { display:flex; }
.slam-core { position:relative; display:flex; align-items:center; justify-content:center; }
#slam span { font-size:96px; color:#f5e6c8; font-weight:800; text-shadow:0 4px 20px #000;
    position:relative; z-index:2; }
#slam.on span { animation:paPop .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes paPop {
    0%   { transform:scale(2.3) rotate(-7deg); opacity:0; }
    45%  { transform:scale(.9) rotate(2deg); opacity:1; }
    100% { transform:scale(1) rotate(0); }
}
.slam-ring { position:absolute; left:50%; top:50%; width:150px; height:150px; margin:-75px 0 0 -75px;
    border:4px solid rgba(139,32,32,.85); border-radius:50%; opacity:0; z-index:1; display:block; }
#slam.on .slam-ring { animation:ringOut .55s ease-out both; }
#slam.on .slam-ring.r2 { animation-delay:.08s; border-width:2px; border-color:rgba(20,10,5,.75); }
@keyframes ringOut { 0%{ transform:scale(.35); opacity:.9; } 100%{ transform:scale(1.9); opacity:0; } }
.slam-rays { position:absolute; left:50%; top:50%; z-index:1; }
.slam-rays b { position:absolute; left:-3px; top:-72px; width:6px; height:34px;
    background:#241505; border-radius:3px; transform-origin:3px 72px; opacity:0; display:block; }
#slam.on .slam-rays b { animation:rayOut .45s ease-out both; }
@keyframes rayOut {
    0%   { transform:rotate(var(--a)) translateY(6px) scaleY(.4); opacity:.95; }
    100% { transform:rotate(var(--a)) translateY(-48px) scaleY(1); opacity:0; }
}

/* ===== 矮屏适配 ===== */
@media (max-height: 640px) {
    #folders { padding-top:2vh; }
    .folder { min-height:118px; }
    #props { height:13%; }
}

/* ===== 标题图调参器（?title-edit=1）===== */
#title-editor-panel {
    position:fixed; left:8px; bottom:8px; z-index:99999; width:300px;
    background:rgba(20,14,8,.94); border:1px solid #c9a84c; border-radius:8px;
    padding:10px 12px; color:#e8d6b4; font-size:12px;
    font-family:'Noto Serif SC',serif;
}
#title-editor-panel h4 { margin:0 0 8px; font-size:13px; color:#ffd966; }
#title-editor-panel .group-label { margin:6px 0 4px; color:#c9a84c; }
#title-editor-panel .row { display:flex; align-items:center; gap:6px; margin:4px 0; }
#title-editor-panel .row label { width:86px; flex:none; }
#title-editor-panel .row input[type=range] { flex:1; }
#title-editor-panel .row input[type=number] { width:58px; }
#title-editor-panel button { margin-top:8px; background:#3a2a15; color:#e8d6b4;
    border:1px solid #c9a84c; border-radius:4px; padding:4px 10px; cursor:pointer; }
#title-editor-panel pre { margin-top:8px; max-height:160px; overflow:auto;
    background:#0a0603; padding:6px; font-size:11px; }