@font-face{font-family:"CodexSerif";src:url("fonts/SerifR.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"CodexSerif";src:url("fonts/SerifB.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"CodexSans";src:url("fonts/LatinR.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0020-00FF}
@font-face{font-family:"CodexSans";src:url("fonts/LatinB.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0020-00FF}
/* 《诡秘之主》角色图鉴 · 移动优先 */
:root{
  --bg:#0a0a0c; --bg2:#101014; --panel:#14141a; --panel2:#17171e;
  --line:rgba(190,152,80,.22); --line2:rgba(190,152,80,.42);
  --gold:#e0ba6a; --gold2:#c9a75f; --dim:#8d6f38; --crimson:#a8353a; --crimson2:#c0484d;
  --txt:#cfc6b2; --muted:#8a8272; --ok:#6f9e6a;
  --serif:"CodexSerif","Songti SC","Noto Serif CJK SC","Source Han Serif SC","STSong",serif;
  --sans:"CodexSans","PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
  --sh:0 12px 40px rgba(0,0,0,.55);
}
[hidden]{display:none!important}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt)}
body{
  font-family:var(--sans);font-size:15px;line-height:1.65;
  background-image:linear-gradient(180deg,rgba(10,10,12,.92),rgba(10,10,12,.97)),url("assets/bg_page.jpg");
  background-size:auto,420px auto;background-attachment:scroll,fixed;background-repeat:repeat;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;margin:0;color:var(--gold);letter-spacing:.04em}
a{color:var(--gold2);text-decoration:none}
button,select,input{font:inherit;color:inherit}
img{display:block;max-width:100%}
.small{font-size:12px;color:var(--muted)}

/* 顶栏 */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));
  background:linear-gradient(180deg,rgba(8,8,10,.96),rgba(8,8,10,.86));backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;color:var(--gold)}
.mark{font-size:20px;color:var(--gold);filter:drop-shadow(0 0 8px rgba(224,186,106,.35))}
.bt{display:flex;flex-direction:column;line-height:1.15}
.bt b{font-family:var(--serif);font-size:16px;letter-spacing:.14em}
.bt i{font-style:normal;font-size:10px;color:var(--muted);letter-spacing:.08em}
.acts{display:flex;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:2px;
  border:1px solid var(--line2);background:rgba(224,186,106,.08);color:var(--gold);
  font-size:12.5px;letter-spacing:.04em;cursor:pointer;transition:.18s}
.btn:hover{background:rgba(224,186,106,.16);border-color:var(--gold)}
.btn.ghost{background:transparent;color:var(--gold2)}
.btn.sm{height:30px;padding:0 10px;font-size:12px}
.btn b{font-family:var(--serif)}

/* 进度面板 */
.progress{max-width:1180px;margin:0 auto;padding:14px 16px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(20,20,26,.72),rgba(10,10,12,.35))}
.prow{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.prow label{font-size:12px;letter-spacing:.16em;color:var(--dim)}
#chOut{font-family:var(--serif);color:var(--gold);font-size:15px}
input[type=range]{width:100%;height:26px;background:transparent;appearance:none;-webkit-appearance:none}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--crimson),var(--gold));border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-8px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f3d99b,#b98f3f);border:1px solid #2a2113;box-shadow:0 0 12px rgba(224,186,106,.5)}
input[type=range]::-moz-range-track{height:3px;background:linear-gradient(90deg,var(--crimson),var(--gold))}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#e0ba6a;border:none}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.chip{padding:4px 9px;border:1px solid var(--line);border-radius:2px;font-size:12px;color:var(--muted);
  cursor:pointer;background:rgba(255,255,255,.015);transition:.15s}
.chip:hover{color:var(--gold2);border-color:var(--line2)}
.chip.on{color:#0b0b0e;background:linear-gradient(180deg,#e6c377,#c9a75f);border-color:#e6c377;font-weight:600}
.pfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.switch{display:flex;align-items:center;gap:6px;cursor:pointer}
.switch input{accent-color:#c9a75f}
.hint{margin:10px 0 0;font-size:11.5px;line-height:1.6;color:#6f6958}

.onboard{position:relative;max-width:1180px;margin:16px auto 0;padding:14px 16px;border:1px solid rgba(190,152,80,.3);
  background:linear-gradient(180deg,rgba(168,53,58,.08),rgba(20,20,26,.6));}
.onboard b{display:block;font-family:var(--serif);color:var(--gold);font-size:15px;letter-spacing:.06em}
.onboard p{margin:5px 0 10px;font-size:12.5px;color:var(--muted)}
.obchips{display:flex;flex-wrap:wrap;gap:6px}
.obx{position:absolute;right:8px;top:6px;border:none;background:transparent;color:var(--muted);font-size:18px;cursor:pointer}

/* Hero */
.hero{max-width:1180px;margin:0 auto;padding:22px 16px 6px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.hero h1{font-size:30px;letter-spacing:.12em}
.hero-t p{margin:4px 0 0;font-size:12.5px;color:var(--muted);letter-spacing:.06em}
.hero-s{display:flex;gap:22px}
.hero-s div{display:flex;flex-direction:column;align-items:flex-end}
.hero-s b{font-family:var(--serif);font-size:22px;color:var(--gold);line-height:1.1}
.hero-s span{font-size:10.5px;color:var(--muted);letter-spacing:.12em}
.bar{flex:1 0 100%;height:2px;background:rgba(190,152,80,.14);margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--crimson),var(--gold));transition:width .35s}

/* 工具区 */
.tools{max-width:1180px;margin:0 auto;padding:16px 16px 4px}
.searchbox{position:relative;display:flex;align-items:center}
.si{position:absolute;left:12px;color:var(--dim);font-size:17px}
#q{width:100%;height:42px;padding:0 38px 0 34px;background:rgba(20,20,26,.85);border:1px solid var(--line);
  border-radius:2px;color:var(--txt);outline:none;font-size:14px}
#q:focus{border-color:var(--line2);box-shadow:0 0 0 3px rgba(224,186,106,.06)}
#q::placeholder{color:#5f5a4c}
.qclear{position:absolute;right:6px;width:30px;height:30px;border:none;background:transparent;color:var(--muted);font-size:18px;cursor:pointer}
.filters{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.chiprow{display:flex;flex-wrap:wrap;gap:5px}
.selrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
select{height:32px;padding:0 8px;background:rgba(20,20,26,.85);border:1px solid var(--line);border-radius:2px;
  color:var(--txt);font-size:12.5px;outline:none;max-width:46vw}

/* 网格 */
.grid{max-width:1180px;margin:0 auto;padding:14px 16px 40px;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.card{position:relative;border:1px solid var(--line);background:var(--panel);cursor:pointer;
  transition:transform .18s ease,border-color .18s,box-shadow .18s;overflow:hidden;border-radius:2px}
.card:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:var(--sh)}
.card .thumb{position:relative;aspect-ratio:3/4;overflow:hidden;background:#0d0d11}
.card .thumb img{width:100%;height:100%;object-fit:cover;object-position:center top;
  filter:saturate(.92) contrast(1.04);transition:transform .5s}
.card:hover .thumb img{transform:scale(1.045)}
.card .thumb::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,12,0) 42%,rgba(10,10,12,.88) 100%)}
.card .meta{position:relative;padding:8px 9px 10px;margin-top:-30px;z-index:2}
.card h3{font-size:15px;line-height:1.3;letter-spacing:.02em}
.card .role{font-size:11px;color:var(--muted);margin-top:2px;min-height:15px}
.card .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.card .tg{font-size:10px;color:#b9a273;border:1px solid rgba(190,152,80,.25);padding:1px 5px;border-radius:2px}
.card .badge{position:absolute;top:8px;right:8px;font-family:var(--serif);font-size:10.5px;color:#0d0d10;
  background:linear-gradient(180deg,#e6c377,#c9a75f);padding:2px 6px;border-radius:2px;z-index:3}
.card .no{position:absolute;left:8px;top:8px;font-family:var(--serif);font-size:12px;color:rgba(224,186,106,.75);z-index:3;
  text-shadow:0 1px 4px #000}
.card .corner{position:absolute;width:12px;height:12px;border:1px solid rgba(224,186,106,.55);z-index:3;opacity:.9}
.card .corner.tl{left:4px;top:4px;border-right:0;border-bottom:0}
.card .corner.br{right:4px;bottom:4px;border-left:0;border-top:0}

/* 未解锁 */
.card.locked{cursor:pointer}
.card.locked .thumb{background:
  radial-gradient(ellipse at 50% 38%,rgba(168,53,58,.16),transparent 60%),
  repeating-linear-gradient(135deg,rgba(190,152,80,.05) 0 1px,transparent 1px 9px),#0c0c10}
.lockbox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%}
.lockbox .lk{font-size:26px;color:rgba(190,152,80,.55)}
.lockbox .ch{font-family:var(--serif);font-size:12px;color:#8a7a56;letter-spacing:.06em}
.card.locked h3{color:#6b6353;letter-spacing:.16em}

/* 空态 */
.empty{max-width:1180px;margin:0 auto;padding:60px 20px;text-align:center;color:var(--muted)}

/* 详情 */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(4,4,6,.72);backdrop-filter:blur(4px)}
.sheet{position:relative;width:100%;max-width:1040px;max-height:94vh;overflow:auto;background:#101015;
  border-top:1px solid var(--line2);box-shadow:0 -20px 60px rgba(0,0,0,.7);animation:up .28s ease}
@keyframes up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.close{position:fixed;right:12px;top:calc(10px + env(safe-area-inset-top));z-index:90;width:36px;height:36px;border:1px solid var(--line);
  background:rgba(10,10,12,.7);color:var(--gold);font-size:20px;cursor:pointer;border-radius:2px}
.mbody{display:grid;grid-template-columns:1fr}
.mfig{position:relative;background:#08080a}
.mfig img{width:100%;max-height:62vh;object-fit:contain;background:#08080a}
.mfig .ph{aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(ellipse at 50% 40%,rgba(168,53,58,.18),transparent 62%),#0c0c10;color:var(--dim)}
.mfig .ph b{font-family:var(--serif);font-size:64px;color:rgba(224,186,106,.35)}
.mfig .zoom{position:absolute;right:10px;bottom:10px;padding:6px 10px;border:1px solid var(--line2);
  background:rgba(8,8,10,.78);color:var(--gold);font-size:12px;cursor:pointer;border-radius:2px}
.mtxt{padding:16px 16px 34px}
.mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-right:34px}
.mhead h2{font-size:24px;letter-spacing:.04em}
.mhead .alias{font-size:11.5px;color:var(--muted);margin-top:3px}
.mrole{font-size:12px;color:var(--crimson2);letter-spacing:.08em;margin-top:6px}
.mtags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.mtags span{font-size:11px;color:#c2a870;border:1px solid rgba(190,152,80,.32);padding:2px 7px;border-radius:2px;background:rgba(190,152,80,.05)}
.mch{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--dim);margin-top:8px}
.sec{margin-top:20px;padding-top:14px;border-top:1px solid rgba(190,152,80,.16)}
.sec h4{font-size:12px;letter-spacing:.2em;color:var(--dim);margin-bottom:9px;font-family:var(--sans);font-weight:600}
.stage{position:relative;padding:10px 0 12px 14px;border-left:1px solid rgba(190,152,80,.3)}
.stage::before{content:"";position:absolute;left:-4px;top:16px;width:7px;height:7px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 10px rgba(224,186,106,.6)}
.stage .sch{font-family:var(--serif);font-size:11px;color:var(--crimson2);letter-spacing:.08em}
.stage p{margin:4px 0 0;font-size:13.5px;line-height:1.78;color:#c8bfa9}
.stage.lockedSt{border-left-color:rgba(190,152,80,.12)}
.stage.lockedSt::before{background:#3a3428;box-shadow:none}
.stage.lockedSt .sch{color:#5f5a4c}
.stage.lockedSt p{color:#4e4a3f;filter:blur(3px);user-select:none}
.kv{display:grid;grid-template-columns:72px 1fr;gap:6px 10px;font-size:13px}
.kv .k{color:var(--dim);font-size:11px;letter-spacing:.1em}
.kv .v{color:#c6bda8}
ul.ab{margin:0;padding-left:0;list-style:none;display:grid;gap:6px}
ul.ab li{position:relative;padding-left:14px;font-size:13px;color:#c4bba6;line-height:1.7}
ul.ab li::before{content:"◆";position:absolute;left:0;top:2px;font-size:7px;color:var(--crimson)}
.scene{font-size:13px;line-height:1.8;color:#c4bba6;border-left:2px solid rgba(168,53,58,.5);padding-left:10px}
.quote{font-family:var(--serif);font-size:13px;line-height:1.85;color:#cdb98d}
.rel{display:flex;flex-wrap:wrap;gap:7px}
.rel a,.rel span{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:4px 8px;border-radius:2px;
  border:1px solid rgba(190,152,80,.25);background:rgba(255,255,255,.02);color:#c2b391}
.rel a:hover{border-color:var(--gold);color:var(--gold)}
.rel small{color:#6f6958;font-size:10px}
.rellist{display:grid;gap:6px}
.rellist a,.rellist span{display:flex;align-items:baseline;gap:8px;padding:7px 9px;border:1px solid rgba(190,152,80,.22);
  background:rgba(255,255,255,.02);border-radius:2px;min-width:0}
.rellist a:hover{border-color:var(--gold);background:rgba(224,186,106,.06)}
.rellist b{font-weight:600;color:#d6c69c;font-size:13px;white-space:nowrap}
.rellist .rt{font-size:10.5px;color:#c0484d;border:1px solid rgba(168,53,58,.42);padding:0 5px;border-radius:2px;white-space:nowrap}
.rellist em{font-style:normal;font-size:11.5px;color:#8a8272;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.rellist .rl{font-style:normal;font-size:10px;color:#6f6958;white-space:nowrap}
.pdfrow{margin-top:24px;display:flex;gap:8px;flex-wrap:wrap}

/* 灯箱 */
.lightbox{position:fixed;inset:0;z-index:120;background:#050506;display:flex;flex-direction:column}
.lbtop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;
  padding-top:calc(10px + env(safe-area-inset-top));border-bottom:1px solid rgba(190,152,80,.18);font-size:12px;color:var(--muted)}
.lbacts{display:flex;gap:6px;align-items:center}
.lbacts button,.lbacts a{height:30px;padding:0 9px;border:1px solid rgba(190,152,80,.28);background:transparent;
  color:var(--gold2);font-size:12px;cursor:pointer;border-radius:2px;display:inline-flex;align-items:center}
.lbstage{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab}
.lbstage img{max-width:none;max-height:none;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none}
.lbhint{margin:0;padding:6px 12px 12px;text-align:center;font-size:11px;color:#5e594c}

/* 其它 */
.totop{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:50;width:40px;height:40px;
  border-radius:50%;border:1px solid var(--line2);background:rgba(16,16,21,.9);color:var(--gold);font-size:16px;cursor:pointer}
.foot{max-width:1180px;margin:0 auto;padding:26px 16px 44px;border-top:1px solid var(--line);color:#6d6758;font-size:11.5px;line-height:1.8}
.foot a{color:var(--gold2)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:200;background:rgba(20,20,26,.96);
  border:1px solid var(--line2);color:var(--gold);padding:9px 14px;font-size:12.5px;border-radius:2px;box-shadow:var(--sh)}

@media (min-width:760px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:16px}
  .mbody{grid-template-columns:minmax(300px,42%) 1fr}
  .mfig{position:sticky;top:0;align-self:start}
  .mfig img{max-height:88vh;height:100%;object-fit:contain}
  .sheet{border:1px solid var(--line2);margin:3vh 0;max-height:94vh}
  .modal{align-items:center}
  .hero h1{font-size:36px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}