/* 30 Million · 景甜模拟器 — 样式 */
:root{
  --ink:#0a0d12; --ink2:#101620; --paper:#e9e6df; --dim:#8a94a3;
  --gold:#c9a86a; --rose:#e08a97; --teal:#3d7a86;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --serif:'Noto Serif SC','Songti SC',serif;
  --sans:'Noto Sans SC','PingFang SC',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  background:var(--ink); color:var(--paper); font-family:var(--sans);
  font-size:15px; line-height:1.7; user-select:none;
}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{display:block}

/* ---------- 通用屏幕 ---------- */
.screen{position:fixed;inset:0;display:none;opacity:0;transition:opacity .45s}
.screen.on{display:block;opacity:1}
.bgfx{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.34) saturate(.85)}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,13,18,.25),rgba(10,13,18,.88))}

/* ---------- 标题 ---------- */
#screen-title .title-wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px}
.kicker{letter-spacing:.55em;font-size:11px;color:var(--gold);text-transform:uppercase;margin-bottom:14px}
.title-h1{font-family:var(--serif);font-weight:700;font-size:clamp(44px,9vw,92px);letter-spacing:.08em;text-shadow:0 6px 40px rgba(0,0,0,.7)}
.title-h1 small{display:block;font-size:clamp(15px,2.4vw,22px);letter-spacing:.5em;color:var(--paper);opacity:.85;margin-top:10px;font-weight:500}
.title-sub{margin-top:18px;color:var(--dim);font-size:13px;letter-spacing:.2em}
.menu{margin-top:44px;display:flex;flex-direction:column;gap:14px;width:min(320px,84vw)}
.menu button{
  border:1px solid rgba(233,230,223,.22); padding:13px 20px; letter-spacing:.42em; font-size:14px;
  background:rgba(10,13,18,.45); backdrop-filter:blur(6px); transition:.25s;
}
.menu button:hover{border-color:var(--gold);color:var(--gold);letter-spacing:.5em}
#continue-btn{border-color:rgba(201,168,106,.5);color:var(--gold)}
.foot{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:rgba(138,148,163,.75);font-size:11px;letter-spacing:.12em;z-index:2}
.foot a{color:rgba(201,168,106,.8);text-decoration:none}

/* ---------- 章节目录 ---------- */
#screen-select{background:var(--ink)}
.select-wrap{position:relative;z-index:2;height:100%;max-width:760px;margin:0 auto;padding:44px 22px 90px;display:flex;flex-direction:column}
.select-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px}
.select-head h2{font-family:var(--serif);font-size:24px;letter-spacing:.2em}
.select-head .stats{color:var(--dim);font-size:12px;letter-spacing:.1em}
#chapter-list{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:10px;padding-bottom:20px;scrollbar-width:thin}
.ch-item{
  display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;text-align:left;
  border:1px solid rgba(233,230,223,.14);background:rgba(16,22,32,.72);padding:14px 18px;transition:.2s;
}
.ch-item:hover{border-color:var(--gold);transform:translateX(4px)}
.ch-item.locked{opacity:.45;cursor:default}
.ch-item.done{border-color:rgba(201,168,106,.35)}
.ch-no{color:var(--gold);font-size:15px}
.ch-name{font-family:var(--serif);font-size:16px;letter-spacing:.08em}
.ch-sub{color:var(--dim);font-size:11px;letter-spacing:.15em}
.back-title{position:absolute;top:20px;left:22px;z-index:3;color:var(--dim);letter-spacing:.3em;font-size:12px}
.back-title:hover{color:var(--gold)}

/* ---------- VN ---------- */
#screen-vn{background:#000}
#vn-stage{position:absolute;inset:0;overflow:hidden}
.vn-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06);
  filter:saturate(.92) brightness(.88);opacity:0;transition:opacity .9s ease, transform 8s linear}
.vn-bg.on{opacity:1;transform:scale(1)}
.vn-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,0) 46%,rgba(2,4,8,.9) 82%)}
.vn-topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:14px 18px;z-index:5}
#vn-chapter{font-family:var(--serif);letter-spacing:.24em;font-size:14px;color:var(--gold)}
#vn-back{margin-left:auto;color:var(--dim);font-size:12px;letter-spacing:.3em}
#vn-back:hover{color:var(--paper)}
.hud{display:flex;gap:14px;font-size:12px;letter-spacing:.1em;color:var(--paper)}
.hud span{border:1px solid rgba(233,230,223,.18);padding:3px 10px;background:rgba(0,0,0,.35);border-radius:2px}
#vn-cash{color:var(--gold);border-color:rgba(201,168,106,.4)}
#vn-heart{color:var(--rose);border-color:rgba(224,138,151,.4)}
#vn-dialog{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(880px,94vw);
  padding:22px 26px 30px;z-index:4;
}
.vn-name{
  display:inline-block;font-family:var(--serif);font-size:15px;letter-spacing:.3em;color:var(--gold);
  border-left:3px solid var(--gold);padding-left:12px;margin-bottom:10px;
}
.vn-name.narrator{color:var(--dim);border-color:var(--dim)}
.vn-name.her{color:var(--rose);border-color:var(--rose)}
#vn-text{
  font-size:clamp(16px,2.3vw,19px);line-height:1.95;min-height:4.2em;letter-spacing:.04em;
  text-shadow:0 2px 14px rgba(0,0,0,.9);
}
#vn-next{
  position:absolute;right:18px;bottom:14px;color:var(--dim);font-size:11px;letter-spacing:.25em;
  animation:pulse 1.6s infinite;
}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.95}}
#vn-progress{position:absolute;bottom:0;left:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--rose));width:0;transition:width .3s;z-index:6}

/* 选项 */
#vn-choice{
  position:absolute;inset:0;z-index:8;display:none;align-items:center;justify-content:center;
  background:rgba(4,6,10,.6);backdrop-filter:blur(3px);
}
#vn-choice.on{display:flex}
.choice-box{width:min(560px,90vw);display:flex;flex-direction:column;gap:14px}
#vn-q{font-family:var(--serif);font-size:17px;letter-spacing:.1em;text-align:center;margin-bottom:10px;color:var(--paper)}
.opt{
  border:1px solid rgba(233,230,223,.28);background:rgba(10,13,18,.8);padding:16px 20px;text-align:left;transition:.2s;
  display:flex;flex-direction:column;gap:4px;
}
.opt:hover{border-color:var(--gold);transform:translateY(-2px)}
.opt-label{font-size:15px;letter-spacing:.06em}
.opt-fx{font-size:11px;color:var(--dim);letter-spacing:.18em}

/* 章末卡 & 结局卡 */
.overlay{
  position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;
  background:rgba(4,6,10,.82);backdrop-filter:blur(8px);padding:20px;
}
.overlay.on{display:flex}
.card{
  width:min(640px,94vw);max-height:88vh;overflow-y:auto;background:var(--ink2);
  border:1px solid rgba(201,168,106,.35);padding:34px 34px 28px;box-shadow:var(--shadow);
}
.card h3{font-family:var(--serif);letter-spacing:.3em;font-size:18px;color:var(--gold);margin-bottom:14px}
.card p{color:#c7cdd6;font-size:14px;margin-bottom:10px}
.card-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.card-btns button{border:1px solid rgba(233,230,223,.3);padding:10px 18px;font-size:13px;letter-spacing:.2em;transition:.2s}
.card-btns button:hover{border-color:var(--gold);color:var(--gold)}
#ending-line{font-family:var(--serif);font-size:22px;letter-spacing:.12em;margin:6px 0 14px}
#ending-sub{color:var(--rose);font-size:13px;letter-spacing:.08em;margin-bottom:16px}
.ledger{border-top:1px dashed rgba(233,230,223,.25);margin-top:8px}
.ledger .row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px dashed rgba(233,230,223,.12);font-size:12.5px}
.ledger .row span{color:var(--dim)}
.ledger .row b{font-weight:500;color:var(--paper);text-align:right}
#pk-hint{margin-top:14px;font-size:12px;color:var(--gold);letter-spacing:.15em}

/* ---------- PK ---------- */
#screen-pk{background:radial-gradient(120% 90% at 50% 0%,#131c2a 0%,#070a10 70%)}
.pk-wrap{position:relative;z-index:2;height:100%;max-width:900px;margin:0 auto;padding:18px 18px 12px;display:flex;flex-direction:column;gap:10px}
.pk-head{display:flex;align-items:center;gap:14px}
.pk-head h2{font-family:var(--serif);font-size:20px;letter-spacing:.24em;color:var(--gold)}
#pk-turn{color:var(--dim);font-size:12px;letter-spacing:.2em}
#pk-back{margin-left:auto;color:var(--dim);font-size:12px;letter-spacing:.3em}
#pk-back:hover{color:var(--paper)}
.pk-arena{flex:1;display:grid;grid-template-columns:1fr 150px 1fr;gap:8px;align-items:stretch;min-height:0}
.fighter{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative;border:1px solid rgba(233,230,223,.12);overflow:hidden;background:rgba(10,14,20,.5)}
.fighter .art{position:absolute;inset:0;background-size:cover;background-position:top center;filter:brightness(.8)}
.fighter.me .art{filter:brightness(.75) saturate(.8)}
.hp-zone{position:relative;z-index:2;width:100%;padding:10px 12px;background:linear-gradient(180deg,rgba(7,10,16,0),rgba(7,10,16,.92) 60%)}
.hp-name{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.2em;margin-bottom:6px}
.fighter.foe .hp-name b{color:var(--rose)}
.fighter.me .hp-name b{color:var(--teal)}
.hp-bar{height:7px;background:rgba(233,230,223,.14);border-radius:4px;overflow:hidden}
.hp-bar i{display:block;height:100%;border-radius:4px;transition:width .45s}
.fighter.foe .hp-bar i{background:linear-gradient(90deg,#a04a58,var(--rose))}
.fighter.me .hp-bar i{background:linear-gradient(90deg,#2f5d68,#5fa3b0)}
#pk-shield{position:absolute;top:12px;left:12px;z-index:3;font-size:11px;color:var(--teal);border:1px solid rgba(95,163,176,.5);padding:2px 8px;background:rgba(0,0,0,.4)}
.vs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.vs .vs-word{font-family:var(--serif);font-size:30px;color:rgba(233,230,223,.4);letter-spacing:.1em}
.res{display:flex;flex-direction:column;gap:6px;align-items:center}
.res img{width:54px;height:54px;border-radius:50%;border:1px solid rgba(201,168,106,.5);object-fit:cover}
.res span{font-size:11px;color:var(--dim);letter-spacing:.15em}
#pk-cash{color:var(--gold);font-size:15px;letter-spacing:.08em}
#pk-log{
  min-height:44px;border:1px solid rgba(233,230,223,.14);background:rgba(7,10,16,.7);
  display:flex;align-items:center;padding:8px 16px;font-size:13.5px;color:#c7cdd6;letter-spacing:.03em;
}
#pk-hand{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-bottom:4px}
.pcard{
  border:1px solid rgba(233,230,223,.2);background:linear-gradient(180deg,rgba(22,30,44,.9),rgba(10,14,20,.9));
  padding:10px 12px;display:flex;flex-direction:column;gap:5px;text-align:left;transition:.18s;min-height:104px;
}
.pcard:not(.dim):hover{border-color:var(--gold);transform:translateY(-3px)}
.pcard.dim{opacity:.5}
.pcard b{font-family:var(--serif);font-size:14.5px;letter-spacing:.06em}
.pcard .pcost{font-size:10.5px;color:var(--gold);letter-spacing:.1em}
.pcard i{font-style:normal;font-size:11px;color:var(--dim);line-height:1.5;flex:1}
.pcard .pfx{font-size:11px;color:var(--rose);letter-spacing:.08em}
@media (max-width:700px){
  .pk-arena{grid-template-columns:1fr 70px 1fr}
  #pk-hand{grid-template-columns:repeat(2,1fr)}
  .pcard{min-height:92px}
  .pk-wrap{padding:14px 12px 10px}
}

/* ---------- 回廊 ---------- */
#screen-gallery{background:var(--ink)}
.gallery-wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;padding:44px 22px 18px;max-width:1200px;margin:0 auto}
.gallery-head{display:flex;align-items:baseline;gap:16px;margin-bottom:16px}
.gallery-head h2{font-family:var(--serif);font-size:22px;letter-spacing:.22em}
#gallery-count{color:var(--dim);font-size:12px;letter-spacing:.15em}
#gallery-free{margin-left:auto;border:1px solid rgba(201,168,106,.5);color:var(--gold);padding:6px 14px;font-size:12px;letter-spacing:.2em}
#gallery-grid{overflow-y:auto;flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;padding-bottom:16px;scrollbar-width:thin}
.g-tile{position:relative;aspect-ratio:16/9.6;overflow:hidden;border:1px solid rgba(233,230,223,.12);text-align:left}
.g-tile .g-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s}
.g-tile:hover .g-img{transform:scale(1.05)}
.g-tile.locked .g-img{filter:blur(14px) brightness(.4)}
.g-tile .g-cap{position:absolute;inset:auto 0 0 0;padding:22px 12px 10px;background:linear-gradient(180deg,transparent,rgba(4,6,10,.92));z-index:2}
.g-cap b{display:block;font-family:var(--serif);font-size:14px;letter-spacing:.08em;font-weight:600}
.g-cap span{font-size:11px;color:var(--dim);letter-spacing:.1em}
#gsv-overlay{z-index:30}
.gsv-box{width:min(960px,96vw)}
.gsv-img{aspect-ratio:16/8.2;background-size:cover;background-position:center;border:1px solid rgba(233,230,223,.2);margin-bottom:14px}
.gsv-meta{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.gsv-meta b{font-family:var(--serif);font-size:19px;letter-spacing:.14em}
.gsv-meta i{font-style:normal;color:var(--gold);font-size:12px;letter-spacing:.22em}
.gsv-meta p{color:#c7cdd6;font-size:13.5px}
.gsv-btns{display:flex;gap:12px}
.gsv-btns a,.gsv-btns button{border:1px solid rgba(233,230,223,.3);padding:9px 16px;font-size:12px;letter-spacing:.18em;text-decoration:none;color:var(--paper)}
.gsv-btns a:hover{border-color:var(--gold);color:var(--gold)}

/* 空护心徽章隐藏 */
#pk-shield:empty{display:none}
@media (max-width:700px){
  .hp-name b{font-size:10.5px;white-space:nowrap}
  .hp-name span{font-size:10px;white-space:nowrap}
  .res span{font-size:9.5px;letter-spacing:.06em;white-space:nowrap}
  .res img{width:44px;height:44px}
  #pk-cash{font-size:12.5px;white-space:nowrap}
  .vs{gap:6px}
  .vs .vs-word{font-size:22px}
}