/* ===========================================================
   蛊真人 · 青茅山  —  水墨 / 暗金 / 蛊火
   =========================================================== */
:root{
  --ink:#0a0908;
  --ink2:#12100c;
  --ink3:#1a1712;
  --panel:rgba(22,19,15,.88);
  --panel2:rgba(30,26,20,.92);
  --line:rgba(201,162,39,.24);
  --line-strong:rgba(201,162,39,.55);
  --gold:#c9a227;
  --gold2:#e8cf8a;
  --gold3:#8f7220;
  --jade:#7fb3a0;
  --blood:#a33a3a;
  --text:#d9d0c0;
  --muted:#8f8474;
  --white:#f2ead9;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",STSong,"SimSun",serif;
  --sans:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(201,162,39,.10), transparent 60%),
    radial-gradient(900px 600px at 0% 100%, rgba(58,92,80,.10), transparent 65%),
    linear-gradient(180deg,#0b0a08 0%,#090806 60%,#060504 100%);
  color:var(--text);
  font-family:var(--sans);
  overflow-x:hidden;
}
button{font-family:inherit;color:inherit;cursor:pointer;}
.hidden{display:none !important;}

/* 纸纹 */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.22'/></svg>");
  mix-blend-mode:overlay;
}

.screen{position:relative;z-index:1;min-height:100vh;}

/* ===========================================================
   标题页
   =========================================================== */
#titleScreen{display:flex;align-items:center;justify-content:center;padding:48px 20px 64px;overflow:hidden;}
.title-sky{position:absolute;inset:0;z-index:-1;opacity:.95;}
.title-sky svg{width:100%;height:100%;}
.title-sky::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,7,6,.15) 0%,rgba(8,7,6,.55) 60%,rgba(8,7,6,.96) 100%);
}
.title-inner{position:relative;width:min(760px,100%);text-align:center;margin-top:40px;}
.eyebrow{
  font-size:12px;letter-spacing:.42em;color:var(--gold);
  text-transform:uppercase;margin:0 0 18px;opacity:.85;
}
.main-title{
  margin:0;display:flex;justify-content:center;gap:14px;
  font-family:var(--serif);font-weight:700;color:var(--gold2);
  font-size:clamp(64px,12vw,128px);line-height:1;
  text-shadow:0 0 50px rgba(201,162,39,.28),0 4px 0 rgba(0,0,0,.5);
}
.main-title span{
  display:inline-block;padding:10px 6px;
  border-top:1px solid rgba(201,162,39,.35);
  border-bottom:1px solid rgba(201,162,39,.35);
  animation:riseIn .9s cubic-bezier(.2,.7,.2,1) both;
}
.main-title span:nth-child(2){animation-delay:.12s;transform:translateY(-6px);}
.main-title span:nth-child(3){animation-delay:.24s;}
.subtitle{
  font-family:var(--serif);font-size:clamp(18px,3vw,30px);
  letter-spacing:.7em;color:var(--text);margin:22px 0 10px;opacity:.9;
  text-indent:.7em;
}
.tagline{font-family:var(--serif);color:var(--muted);font-size:14px;letter-spacing:.18em;margin:0 0 34px;}
.title-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:14px;}

.btn{
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg,rgba(201,162,39,.12),rgba(201,162,39,.03));
  color:var(--gold2);padding:13px 34px;font-size:15px;letter-spacing:.22em;
  font-family:var(--serif);transition:.25s;position:relative;border-radius:1px;
}
.btn:hover{background:rgba(201,162,39,.2);box-shadow:0 0 24px rgba(201,162,39,.22);transform:translateY(-1px);}
.btn-gold{background:linear-gradient(180deg,#d8b74f,#a9871f);color:#1a1408;border-color:#e8cf8a;font-weight:700;}
.btn-gold:hover{background:linear-gradient(180deg,#e8cd7c,#bf9a2b);}
.btn-ghost{color:var(--muted);border-color:rgba(201,162,39,.22);background:transparent;}
.btn-ghost:hover{color:var(--gold2);}
.title-foot{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:11px;color:#5f5749;letter-spacing:.18em;}

/* 建角 */
.creation{
  margin:10px auto 0;text-align:left;background:var(--panel);
  border:1px solid var(--line);padding:26px 26px 20px;max-width:640px;
  backdrop-filter:blur(8px);animation:fadeUp .5s ease both;
}
.create-head h2{font-family:var(--serif);color:var(--gold2);font-size:22px;letter-spacing:.18em;margin:0 0 8px;}
.create-head p{margin:0 0 20px;color:var(--muted);font-size:13px;line-height:1.7;}
.field{display:block;margin-bottom:16px;}
.field-label{display:block;font-size:12px;letter-spacing:.26em;color:var(--gold);margin-bottom:8px;}
.field input{
  width:100%;background:rgba(0,0,0,.35);border:1px solid var(--line);
  color:var(--white);padding:11px 13px;font-family:var(--serif);font-size:16px;
  letter-spacing:.12em;outline:none;transition:.2s;
}
.field input:focus{border-color:var(--gold);box-shadow:0 0 0 1px rgba(201,162,39,.2);}
.pick-row{display:flex;gap:8px;flex-wrap:wrap;}
.pick-row.stacked{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.pick{
  flex:1;min-width:64px;background:rgba(0,0,0,.28);border:1px solid var(--line);
  padding:10px 12px;color:var(--muted);font-size:14px;transition:.2s;font-family:var(--serif);
  text-align:left;line-height:1.5;
}
.pick b{display:block;color:var(--text);font-size:14px;letter-spacing:.08em;}
.pick small{display:block;font-family:var(--sans);font-size:11px;color:var(--muted);margin-top:3px;line-height:1.5;}
.pick.active{border-color:var(--gold);background:rgba(201,162,39,.12);color:var(--gold2);box-shadow:inset 0 0 18px rgba(201,162,39,.08);}
.pick.active b{color:var(--gold2);}
.field-note{font-size:11px;color:#6f6658;margin:7px 0 0;line-height:1.6;}
.trait-box{margin-top:8px;border:1px solid rgba(201,162,39,.22);background:rgba(0,0,0,.28);padding:10px 12px;line-height:1.65;}
.trait-box b{display:block;font-family:var(--serif);color:var(--gold2);font-size:14px;letter-spacing:.08em;}
.trait-box span{display:block;font-size:11px;color:#8b8171;margin-top:3px;}
.jue-pressure{margin-top:12px;padding:9px 10px;border:1px solid rgba(201,162,39,.25);background:rgba(201,162,39,.05);}
.jue-pressure .stat-head{margin-bottom:5px;}
.jue-pressure .mini{width:100%;margin-top:7px;font-size:10px;}
.bar-jue{display:block;height:100%;transition:width .35s ease,background .35s ease;}
.bar-jue.jue-low{background:linear-gradient(90deg,#5f8f7c,#9fb8a0);}
.bar-jue.jue-warm{background:linear-gradient(90deg,#9f8f5f,#c9a227);}
.bar-jue.jue-mid{background:linear-gradient(90deg,#b07a4a,#d99a6a);}
.bar-jue.jue-high{background:linear-gradient(90deg,#a34d4d,#d97070);animation:newPulse 1.1s ease-in-out infinite;}
.create-actions{display:flex;gap:10px;margin-top:20px;}
.adult-note{font-size:11px;color:#6a6153;line-height:1.7;margin:14px 0 0;border-top:1px dashed rgba(201,162,39,.16);padding-top:12px;}
.start-error{margin:10px 0 0;padding:9px 12px;border:1px solid rgba(180,80,80,.45);background:rgba(120,30,30,.12);color:#d99a9a;font-size:12px;line-height:1.7;}
.aftermath{margin:0 0 22px;padding:12px 15px 13px;border-left:2px solid var(--gold);background:rgba(201,162,39,.055);}
.aftermath-head{font-family:var(--serif);font-size:11px;letter-spacing:.22em;color:var(--gold2);margin-bottom:7px;}
.aftermath p{font-family:var(--serif);font-size:14.5px;line-height:2;color:#cfc6b5;margin:0 0 7px;}
.aftermath p:last-of-type{margin-bottom:0;}
.fx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.fx-chip{font-size:10.5px;line-height:1.4;padding:3px 7px;border:1px solid rgba(150,140,120,.22);color:#9d9484;background:rgba(0,0,0,.2);}
.fx-chip.up{color:#a9c0a3;border-color:rgba(120,160,120,.3);}
.fx-chip.down{color:#d99a9a;border-color:rgba(180,90,90,.3);}
.fx-chip.flag{color:#c9b27a;border-color:rgba(201,162,39,.3);}
.tut-dots{display:flex;gap:7px;justify-content:center;margin:18px 0 4px;}
.tut-dots i{width:18px;height:3px;background:rgba(201,162,39,.18);transition:.25s;}
.tut-dots i.on{background:var(--gold);box-shadow:0 0 10px rgba(201,162,39,.4);}

/* ===========================================================
   主界面
   =========================================================== */
#game{display:flex;flex-direction:column;height:100vh;overflow:hidden;}
#hud{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 20px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(18,16,12,.98),rgba(12,11,9,.92));
  z-index:5;
}
.hud-left{display:flex;align-items:center;gap:12px;min-width:200px;}
.hud-seal{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--line-strong);color:var(--gold2);
  font-family:var(--serif);font-size:20px;background:rgba(201,162,39,.06);
}
.hud-name{font-family:var(--serif);font-size:16px;letter-spacing:.12em;color:var(--white);}
.hud-sub{font-size:11px;color:var(--muted);letter-spacing:.08em;margin-top:2px;}
.hud-mid{text-align:center;flex:1;}
.hud-chapter{display:block;font-family:var(--serif);font-size:13px;letter-spacing:.24em;color:var(--gold2);}
.hud-day{font-size:11px;color:var(--muted);letter-spacing:.14em;}
.hud-right{display:flex;align-items:center;gap:10px;min-width:220px;justify-content:flex-end;}
.coin{font-size:11px;color:var(--muted);letter-spacing:.08em;border:1px solid rgba(201,162,39,.16);padding:6px 9px;}
.coin b{color:var(--gold2);font-size:13px;margin-left:4px;font-variant-numeric:tabular-nums;}
.coin.immortal b{color:var(--jade);}
.icon-btn{
  width:30px;height:30px;background:transparent;border:1px solid rgba(201,162,39,.2);
  color:var(--muted);font-size:12px;transition:.2s;font-family:var(--serif);
}
.icon-btn:hover{color:var(--gold2);border-color:var(--gold);}

#layout{
  flex:1;display:grid;grid-template-columns:270px minmax(0,1fr) 300px;
  gap:0;overflow:hidden;min-height:0;
}
#charPanel{
  border-right:1px solid var(--line);padding:22px 20px;overflow-y:auto;
  background:linear-gradient(180deg,rgba(16,14,11,.7),rgba(10,9,7,.55));
}
.portrait{position:relative;width:104px;height:104px;margin:4px auto 14px;display:grid;place-items:center;}
.portrait span{
  font-family:var(--serif);font-size:46px;color:var(--gold2);
  text-shadow:0 0 26px rgba(201,162,39,.3);z-index:1;
}
.portrait-ring{
  position:absolute;inset:0;border:1px solid rgba(201,162,39,.35);border-radius:50%;
  box-shadow:inset 0 0 28px rgba(201,162,39,.08),0 0 28px rgba(201,162,39,.05);
}
.portrait-ring::after{
  content:"";position:absolute;inset:9px;border:1px dashed rgba(201,162,39,.18);border-radius:50%;
  animation:spin 40s linear infinite;
}
#charPanel h2{
  text-align:center;font-family:var(--serif);font-size:20px;letter-spacing:.18em;
  color:var(--white);margin:0 0 4px;font-weight:600;
}
.char-title{text-align:center;font-size:11px;color:var(--muted);letter-spacing:.12em;margin:0 0 20px;}
.stat{margin-bottom:13px;}
.stat-head{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:5px;letter-spacing:.06em;}
.stat-head b{color:var(--text);font-weight:400;font-variant-numeric:tabular-nums;}
.bar{height:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.04);overflow:hidden;}
.bar i{display:block;height:100%;width:0;transition:width .45s ease;}
.bar-hp{background:linear-gradient(90deg,#5e1f1f,#b04b4b);}
.bar-ess{background:linear-gradient(90deg,#1e4a5e,#5fa7b8);}
.bar-exp{background:linear-gradient(90deg,#4a3a12,#c9a227);}
.stat-foot{font-size:10px;color:#6d6455;margin-top:5px;letter-spacing:.06em;}
.char-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:18px 0 14px;border:1px solid rgba(201,162,39,.14);background:rgba(201,162,39,.14);}
.char-grid div{background:#100e0b;padding:9px 10px;}
.char-grid span{display:block;font-size:10px;color:var(--muted);letter-spacing:.1em;margin-bottom:3px;}
.char-grid b{font-family:var(--serif);font-size:13px;color:var(--text);font-weight:500;}
.char-note{font-size:11px;line-height:1.8;color:#7d7363;border-left:2px solid rgba(201,162,39,.3);padding-left:10px;font-family:var(--serif);}

/* 舞台 */
#stage{
  padding:34px clamp(22px,4vw,58px) 26px;overflow-y:auto;position:relative;
  background:
    radial-gradient(700px 340px at 50% 0%,rgba(201,162,39,.05),transparent 70%);
}
.stage-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.chapter-tag{
  font-size:10px;letter-spacing:.24em;color:var(--gold);border:1px solid rgba(201,162,39,.3);
  padding:4px 8px;font-family:var(--serif);
}
.scene-tag{font-size:11px;color:#6f6658;letter-spacing:.16em;}
#sceneTitle{
  font-family:var(--serif);font-size:clamp(24px,3vw,34px);font-weight:600;
  color:var(--gold2);letter-spacing:.14em;margin:0 0 22px;line-height:1.4;
  text-shadow:0 0 40px rgba(201,162,39,.12);
}
.scene-text{font-family:var(--serif);font-size:16px;line-height:2.05;letter-spacing:.02em;color:#d6ccbb;}
.scene-text p{margin:0 0 1.05em;text-indent:2em;animation:fadeUp .6s ease both;}
.scene-text p:nth-child(1){animation-delay:.02s}
.scene-text p:nth-child(2){animation-delay:.08s}
.scene-text p:nth-child(3){animation-delay:.14s}
.scene-text p:nth-child(4){animation-delay:.2s}
.scene-text p:nth-child(5){animation-delay:.26s}
.scene-text p:nth-child(n+6){animation-delay:.3s}
.scene-text .em{color:var(--gold2);}
.scene-text .blood{color:#c36a6a;}
.scene-text .jade{color:var(--jade);}
.scene-text .whisper{color:var(--muted);font-style:italic;}
.scene-text .dialogue{text-indent:0;border-left:2px solid rgba(201,162,39,.28);padding-left:14px;color:#e3d9c6;}
.scene-text .sfx{text-align:center;text-indent:0;color:var(--gold3);letter-spacing:.4em;font-size:13px;margin:14px 0;}

.choices{display:flex;flex-direction:column;gap:9px;margin-top:26px;}
.choice{
  display:flex;align-items:flex-start;gap:12px;text-align:left;
  background:linear-gradient(90deg,rgba(201,162,39,.06),rgba(201,162,39,0));
  border:1px solid rgba(201,162,39,.2);border-left:2px solid rgba(201,162,39,.45);
  padding:12px 15px;color:var(--text);font-family:var(--serif);font-size:15px;
  transition:.22s;line-height:1.6;
}
.choice:hover:not(:disabled){background:rgba(201,162,39,.12);border-color:var(--gold);transform:translateX(3px);color:var(--white);}
.choice .num{font-size:11px;color:var(--gold3);margin-top:3px;font-family:var(--sans);}
.choice .ctext{flex:1;}
.choice .sub{display:block;font-size:11px;color:#776d5d;margin-top:4px;font-family:var(--sans);letter-spacing:.04em;}
.choice .cost{font-size:11px;color:var(--gold);white-space:nowrap;margin-top:3px;}
.choice:disabled{opacity:.4;cursor:not-allowed;border-left-color:#3a352c;}
.stage-foot{font-size:11px;color:#5f5749;margin-top:22px;letter-spacing:.08em;line-height:1.8;border-top:1px dashed rgba(201,162,39,.14);padding-top:12px;}

.scroll-cue{
  position:fixed;bottom:84px;right:318px;
  z-index:18;background:rgba(20,17,13,.95);border:1px solid var(--line-strong);
  color:var(--gold2);font-family:var(--serif);font-size:17px;letter-spacing:0;
  width:36px;height:36px;padding:0;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 8px 26px rgba(0,0,0,.55);
  animation:cuePulse 2.2s ease-in-out infinite;
}
@media (max-width:1180px){ .scroll-cue{right:272px;} }
.scroll-cue:hover{background:rgba(201,162,39,.16);}
@keyframes cuePulse{0%,100%{opacity:.72}50%{opacity:1}}

/* 侧栏 */
#sidePanel{border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:rgba(12,11,9,.5);}
.tabs{display:flex;border-bottom:1px solid var(--line);}
.tab{
  flex:1;background:transparent;border:0;border-bottom:1px solid transparent;
  color:var(--muted);font-size:12px;letter-spacing:.1em;padding:12px 0;transition:.2s;font-family:var(--serif);
}
.tab:hover{color:var(--gold2);}
.tab.active{color:var(--gold2);border-bottom-color:var(--gold);background:rgba(201,162,39,.05);}
.side-body{flex:1;overflow-y:auto;padding:14px;}

.gu-card,.person-card,.item-card,.lore-card{
  border:1px solid rgba(201,162,39,.15);background:rgba(0,0,0,.22);
  padding:11px 12px;margin-bottom:9px;transition:.2s;
}
.gu-card:hover,.person-card:hover,.item-card:hover{border-color:rgba(201,162,39,.4);}
.gu-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.gu-name{font-family:var(--serif);font-size:14px;color:var(--gold2);letter-spacing:.06em;}
.gu-rank{font-size:10px;color:var(--muted);border:1px solid rgba(201,162,39,.2);padding:1px 5px;white-space:nowrap;}
.gu-desc{font-size:11px;color:#8b8171;line-height:1.65;margin:6px 0 0;}
.gu-meta{display:flex;justify-content:space-between;font-size:10px;color:#6d6455;margin-top:7px;}
.gu-actions{display:flex;gap:6px;margin-top:8px;}
.mini{
  border:1px solid rgba(201,162,39,.25);background:transparent;color:var(--muted);
  font-size:11px;padding:4px 9px;transition:.2s;font-family:var(--serif);
}
.mini:hover{color:var(--gold2);border-color:var(--gold);}
.mini.on{color:#1a1408;background:var(--gold);border-color:var(--gold2);}
.mini.warn{color:#c98585;border-color:rgba(180,90,90,.35);}
.mini:disabled{opacity:.35;cursor:not-allowed;}

.person-head{display:flex;align-items:center;gap:9px;}
.person-glyph{
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  border:1px solid currentColor;font-family:var(--serif);font-size:15px;flex:none;
}
.person-name{font-family:var(--serif);font-size:14px;color:var(--text);letter-spacing:.05em;}
.person-title{font-size:10px;color:var(--muted);margin-top:2px;}
.fav-row{display:flex;align-items:center;gap:8px;margin-top:8px;}
.fav-bar{flex:1;height:4px;background:rgba(255,255,255,.05);}
.fav-bar i{display:block;height:100%;background:linear-gradient(90deg,#6d4a2f,#c9a227);transition:width .4s;}
.fav-num{font-size:10px;color:var(--gold);width:26px;text-align:right;font-variant-numeric:tabular-nums;}
.person-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}

.item-line{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed rgba(201,162,39,.1);font-size:12px;}
.item-line:last-child{border-bottom:0;}
.item-line .nm{color:var(--text);font-family:var(--serif);}
.item-line .qt{color:var(--muted);font-size:11px;}
.item-line .acts{display:flex;gap:5px;}

.lore-card h4{font-family:var(--serif);color:var(--gold2);font-size:13px;margin:0 0 6px;letter-spacing:.1em;}
.lore-card p{font-size:11px;line-height:1.85;color:#8b8171;margin:0;}
.empty{font-size:11px;color:#5f5749;text-align:center;padding:24px 6px;line-height:1.9;}

/* 动作条 */
#actionBar{
  display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);z-index:5;
}
.act{
  background:#0e0c09;border:0;padding:11px 6px 12px;transition:.2s;text-align:center;position:relative;
}
.act.is-new{background:rgba(201,162,39,.08);box-shadow:inset 0 0 0 1px rgba(201,162,39,.35);}
.act.is-new b{color:var(--gold2);}
.act.is-new::after{
  content:"";position:absolute;top:7px;right:calc(50% - 30px);width:7px;height:7px;border-radius:50%;
  background:var(--gold2);box-shadow:0 0 10px var(--gold);animation:newPulse 1.4s ease-in-out infinite;
}
.tab.is-new{color:var(--gold2);}
.tab.is-new::after{
  content:"";position:absolute;top:8px;right:10px;width:6px;height:6px;border-radius:50%;
  background:var(--gold2);box-shadow:0 0 8px var(--gold);animation:newPulse 1.4s ease-in-out infinite;
}
.tab{position:relative;}
@keyframes newPulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
#layout.no-side{grid-template-columns:270px minmax(0,1fr) 0;}
@media (max-width:960px){ #layout.no-side{grid-template-columns:1fr;} }
.act b{display:block;font-family:var(--serif);font-size:14px;color:var(--text);letter-spacing:.12em;font-weight:500;}
.act small{display:block;font-size:10px;color:#6b6254;margin-top:3px;letter-spacing:.04em;}
.act:hover{background:#17140f;}
.act:hover b{color:var(--gold2);}
.act.primary b{color:var(--gold2);}
.act:disabled{opacity:.4;cursor:not-allowed;}
.mobile-stats{display:none;grid-column:1/-1;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 12px;background:#0b0a08;border-bottom:1px solid rgba(201,162,39,.12);
  font-size:10px;letter-spacing:.06em;color:var(--muted);}
.mobile-stats b{color:var(--text);font-weight:400;font-variant-numeric:tabular-nums;}
.mobile-stats .ms-realm{color:var(--gold2);font-family:var(--serif);letter-spacing:.1em;}

/* 五域舆图 */
.world-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.world-card{border:1px solid rgba(201,162,39,.18);background:rgba(0,0,0,.24);padding:12px 13px;}
.world-card.current{border-color:var(--gold);box-shadow:inset 0 0 22px rgba(201,162,39,.08);}
.world-card.locked{opacity:.48;}
.world-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.world-name{font-family:var(--serif);font-size:15px;color:var(--gold2);letter-spacing:.08em;}
.world-sub{font-size:10px;color:var(--muted);margin-top:2px;}
.world-desc{font-size:11px;color:#8b8171;line-height:1.7;margin:8px 0;}
.world-meta{display:flex;justify-content:space-between;font-size:10px;color:#6d6455;margin-bottom:8px;}
.world-actions{display:flex;gap:6px;flex-wrap:wrap;}
@media (max-width:700px){ .world-grid{grid-template-columns:1fr;} }

/* ===========================================================
   弹窗
   =========================================================== */
.modal-root{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;}
.modal-backdrop{position:absolute;inset:0;background:rgba(4,3,2,.78);backdrop-filter:blur(4px);animation:fadeIn .2s ease;}
.modal{
  position:relative;width:min(720px,100%);max-height:86vh;overflow-y:auto;
  background:linear-gradient(180deg,#171410,#0e0c09);
  border:1px solid var(--line-strong);box-shadow:0 30px 90px rgba(0,0,0,.7),inset 0 0 60px rgba(201,162,39,.03);
  padding:24px 26px;animation:modalIn .28s cubic-bezier(.2,.8,.2,1) both;
}
.modal.wide{width:min(920px,100%);}
.modal h2{font-family:var(--serif);color:var(--gold2);font-size:20px;letter-spacing:.14em;margin:0 0 6px;font-weight:600;}
.modal-sub{font-size:11px;color:var(--muted);letter-spacing:.1em;margin:0 0 18px;line-height:1.7;}
.modal-close{position:absolute;right:14px;top:12px;width:26px;height:26px;background:transparent;border:1px solid rgba(201,162,39,.2);color:var(--muted);font-size:13px;}
.modal-close:hover{color:var(--gold2);border-color:var(--gold);}
.modal-body{font-size:13px;line-height:1.9;color:var(--text);}
.modal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}

.market-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.market-tab{
  border:1px solid rgba(201,162,39,.2);background:transparent;color:var(--muted);
  padding:6px 12px;font-size:12px;font-family:var(--serif);letter-spacing:.08em;
}
.market-tab.active{color:#1a1408;background:var(--gold);border-color:var(--gold2);}
.market-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.shop-card{border:1px solid rgba(201,162,39,.16);padding:10px 11px;background:rgba(0,0,0,.2);display:flex;flex-direction:column;gap:5px;}
.shop-card .top{display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
.shop-card .nm{font-family:var(--serif);font-size:13px;color:var(--gold2);}
.shop-card .pr{font-size:11px;color:var(--gold);white-space:nowrap;}
.shop-card .ds{font-size:10.5px;color:#847a6a;line-height:1.65;min-height:2.8em;}
.shop-card .foot{display:flex;justify-content:space-between;align-items:center;margin-top:2px;}
.shop-card .tag{font-size:9.5px;color:#6d6455;letter-spacing:.08em;}

/* 战斗 */
.battle-enemy{text-align:center;padding:10px 0 14px;border-bottom:1px solid rgba(201,162,39,.14);margin-bottom:12px;}
.battle-enemy .nm{font-family:var(--serif);font-size:20px;color:#d99a9a;letter-spacing:.14em;}
.battle-enemy .ds{font-size:11px;color:var(--muted);margin-top:4px;}
.battle-bars{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:10px 0;}
.battle-bars .lbl{font-size:10px;color:var(--muted);margin-bottom:4px;display:flex;justify-content:space-between;}
.battle-log{
  height:150px;overflow-y:auto;background:rgba(0,0,0,.3);border:1px solid rgba(201,162,39,.12);
  padding:9px 11px;font-size:11.5px;line-height:1.8;color:#a99e8c;margin:10px 0;
}
.battle-log p{margin:0;}
.battle-log .me{color:#9fc9b8;}
.battle-log .foe{color:#d99a9a;}
.battle-log .sys{color:var(--gold);}
.battle-skills{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.skill-btn{
  text-align:left;border:1px solid rgba(201,162,39,.22);background:rgba(201,162,39,.05);
  padding:8px 10px;transition:.18s;
}
.skill-btn:hover:not(:disabled){background:rgba(201,162,39,.13);border-color:var(--gold);}
.skill-btn:disabled{opacity:.35;cursor:not-allowed;}
.skill-btn b{display:block;font-family:var(--serif);font-size:13px;color:var(--gold2);font-weight:500;}
.skill-btn small{display:block;font-size:10px;color:var(--muted);margin-top:2px;}

/* 提示 */
.toasts{position:fixed;right:18px;bottom:76px;z-index:80;display:flex;flex-direction:column;gap:7px;pointer-events:none;}
.toast{
  background:rgba(20,17,13,.96);border:1px solid rgba(201,162,39,.35);border-left:2px solid var(--gold);
  color:var(--gold2);font-size:12px;padding:9px 14px;letter-spacing:.04em;
  animation:toastIn .3s ease both;box-shadow:0 8px 24px rgba(0,0,0,.5);max-width:300px;line-height:1.6;
}
.toast.out{animation:toastOut .3s ease both;}

/* 滚动条 */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(201,162,39,.18);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:rgba(201,162,39,.35);}

/* 动画 */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(16px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===========================================================
   响应式
   =========================================================== */
@media (max-width:1180px){
  #layout{grid-template-columns:230px minmax(0,1fr) 260px;}
  .scene-text{font-size:15px;}
}
@media (max-width:960px){
  #game{height:auto;min-height:100vh;overflow:visible;}
  .mobile-stats{display:flex;}
  #layout{grid-template-columns:1fr;overflow:visible;}
  #charPanel{display:none;}
  #sidePanel{border-left:0;border-top:1px solid var(--line);max-height:340px;}
  #stage{overflow:visible;padding:26px 20px 20px;}
  #hud{flex-wrap:wrap;gap:8px;padding:9px 12px;}
  .hud-mid{order:3;flex-basis:100%;text-align:left;display:flex;gap:12px;align-items:center;}
  .hud-right{min-width:0;gap:6px;}
  .coin{font-size:10px;padding:4px 6px;}
  #actionBar{position:sticky;bottom:0;}
  .act small{display:none;}
  .modal-root{padding:10px;}
  .modal{max-height:92vh;padding:20px 16px;}
  .market-grid{grid-template-columns:1fr;}
  .pick-row.stacked{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .main-title{font-size:70px;gap:8px;}
  .subtitle{letter-spacing:.5em;}
  .btn{padding:12px 22px;font-size:14px;}
  .title-actions{flex-direction:column;align-items:stretch;}
  .hud-name{font-size:14px;}
  .hud-sub{font-size:10px;}
  #sceneTitle{font-size:23px;}
  .scene-text{font-size:14.5px;line-height:1.95;}
  .choice{font-size:14px;padding:11px 12px;}
  .battle-bars{grid-template-columns:1fr;}
  .battle-skills{grid-template-columns:1fr;}
  .act{padding:10px 2px;}
  .act b{font-size:12px;letter-spacing:.02em;white-space:nowrap;}
}

/* ===========================================================
   对话 · 心意 · 夜话
   =========================================================== */
.talk-line{
  font-family:var(--serif);
  font-size:14.5px;
  line-height:2.05;
  color:#d6ccbb;
  margin:0 0 12px;
  letter-spacing:.01em;
}
.talk-line:last-child{margin-bottom:0;}
.modal-body .dialogue{color:#eadfc8;}
.talk-you{
  font-size:12.5px;
  line-height:1.95;
  color:#93897a;
  border-left:1px solid rgba(201,162,39,.22);
  padding-left:11px;
  margin:0 0 12px;
}
.heart-hint{
  font-size:11.5px;
  line-height:1.9;
  color:var(--gold2);
  border-top:1px dashed rgba(201,162,39,.22);
  padding-top:10px;
  margin:14px 0 0;
  letter-spacing:.04em;
}
.heart-state{
  font-size:10px;
  letter-spacing:.08em;
  color:#6f6658;
  margin-top:6px;
}
.heart-state.on{color:var(--gold2);}
@media (max-width:560px){
  .talk-line{font-size:14px;line-height:1.95;}
}

/* ===========================================================
   手机版 · 底部动作条 / 侧栏抽屉 / 全屏弹窗
   =========================================================== */
#btnSheet{display:none;}
#sideBackdrop{display:none;}
@keyframes sheetIn{from{opacity:.55;transform:translateY(34px)}to{opacity:1;transform:none}}

@media (max-width:960px){
  html{-webkit-text-size-adjust:100%;}
  body{overscroll-behavior-y:contain;}
  button,.choice,.tab,.act{touch-action:manipulation;}
  #game{height:auto;min-height:100dvh;overflow:visible;}
  #titleScreen{min-height:100dvh;height:auto;overflow-y:auto;}

  #hud{
    position:sticky;top:0;z-index:30;
    flex-wrap:wrap;gap:6px;padding:8px 10px;
    padding-top:calc(8px + env(safe-area-inset-top));
    background:rgba(10,9,8,.94);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(201,162,39,.18);
  }
  .hud-left{gap:8px;flex:1;min-width:0;}
  .hud-seal{width:34px;height:34px;font-size:18px;flex:0 0 auto;}
  .hud-name{font-size:14px;letter-spacing:.08em;}
  .hud-sub{font-size:9.5px;line-height:1.5;}
  .hud-mid{order:4;flex-basis:100%;text-align:left;display:flex;gap:10px;align-items:center;padding-top:2px;}
  .hud-chapter{font-size:10px;letter-spacing:.14em;}
  .hud-day{font-size:9.5px;letter-spacing:.08em;}
  .hud-right{gap:5px;min-width:0;flex:0 0 auto;justify-content:flex-end;}
  .coin{font-size:9.5px;padding:4px 5px;min-height:32px;display:flex;align-items:center;letter-spacing:.02em;}
  .coin b{font-size:12px;margin-left:3px;}
  .icon-btn{width:34px;height:34px;font-size:12px;flex:0 0 auto;}
  #btnSheet{display:grid;}

  #layout{display:block;overflow:visible;min-height:0;}
  #charPanel{display:none;}
  #stage{padding:20px 16px 168px;overflow:visible;}

  /* 侧栏变成底部抽屉 */
  #sidePanel{
    position:fixed;left:0;right:0;bottom:0;z-index:46;
    max-height:78dvh;min-height:0;
    display:flex;flex-direction:column;
    border-top:1px solid var(--line-strong);
    border-left:0;
    background:linear-gradient(180deg,#171410 0%,#0b0a08 100%);
    box-shadow:0 -22px 60px rgba(0,0,0,.65);
    transform:translateY(105%);
    visibility:hidden;
    transition:transform .28s cubic-bezier(.2,.8,.2,1),visibility .28s;
    padding-bottom:env(safe-area-inset-bottom);
    border-radius:16px 16px 0 0;
  }
  #sidePanel.open{transform:none;visibility:visible;}
  #sidePanel .tabs{
    position:sticky;top:0;z-index:2;flex:0 0 auto;
    background:#171410;border-bottom:1px solid var(--line);
    overflow-x:auto;scrollbar-width:none;
  }
  #sidePanel .tabs::-webkit-scrollbar{display:none;}
  #sidePanel .tab{flex:1 0 auto;min-width:58px;padding:13px 7px;font-size:11.5px;}
  #sidePanel .side-body{padding:14px 14px 24px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  #sideBackdrop{
    display:block;position:fixed;inset:0;z-index:45;
    background:rgba(4,3,2,.66);
    opacity:0;pointer-events:none;transition:opacity .25s;
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  }
  #sideBackdrop.open{opacity:1;pointer-events:auto;}
  body.sheet-open{overflow:hidden;}

  /* 底部动作条 */
  #actionBar{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    grid-auto-rows:minmax(48px,auto);
    gap:1px;
    background:rgba(10,9,8,.97);
    border-top:1px solid var(--line-strong);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .act{min-height:48px;padding:6px 2px 7px;}
  .act b{font-size:12.5px;letter-spacing:.06em;white-space:normal;line-height:1.3;}
  .act.is-new::after{top:4px;right:10px;}
  .mobile-stats{padding:5px 10px;font-size:9.5px;min-height:26px;gap:6px;cursor:pointer;}
  .mobile-stats span{white-space:nowrap;}

  /* 弹窗：底部整页 Sheet */
  .modal-root{padding:0;align-items:flex-end;}
  .modal{
    width:100%;max-width:100%;max-height:92dvh;
    border-radius:16px 16px 0 0;
    padding:22px 18px calc(14px + env(safe-area-inset-bottom));
    animation:sheetIn .3s cubic-bezier(.2,.8,.2,1) both;
  }
  .modal.wide{width:100%;}
  .modal h2{font-size:20px;}
  .modal-sub{font-size:10.5px;margin-bottom:14px;}
  .modal-close{width:34px;height:34px;right:10px;top:10px;font-size:15px;}
  .modal-actions{
    position:sticky;bottom:calc(-14px - env(safe-area-inset-bottom));
    z-index:2;
    padding:12px 0 4px;
    background:linear-gradient(180deg,rgba(14,12,9,0),#0e0c09 38%);
  }
  .modal-actions .btn{flex:1 1 120px;min-width:0;padding:12px 14px;font-size:13.5px;}
  .modal-body{font-size:14px;line-height:1.95;}
  .market-grid{grid-template-columns:1fr;}
  .pick-row.stacked{grid-template-columns:1fr;}

  .scroll-cue{
    display:grid;right:14px;bottom:calc(158px + env(safe-area-inset-bottom));
    width:42px;height:42px;font-size:18px;
  }
  .toasts{right:10px;bottom:calc(174px + env(safe-area-inset-bottom));max-width:calc(100vw - 20px);z-index:45;}
  .toast{max-width:100%;font-size:11.5px;}
}

@media (max-width:560px){
  .main-title{font-size:clamp(58px,18vw,72px);gap:6px;}
  .title-inner{padding:0 18px;}
  .title-actions{flex-direction:column;gap:10px;}
  .title-actions .btn{width:100%;}
  .title-foot{font-size:10px;padding:0 14px;}
  .creation{padding:0 2px;}
  .field-label{font-size:12px;}
  .create-head h2{font-size:22px;}
  #stage{padding:16px 16px 170px;}
  #sceneTitle{font-size:22px;line-height:1.45;}
  .stage-top{gap:8px;}
  .chapter-tag,.scene-tag{font-size:10px;}
  .scene-text{font-size:15px;line-height:1.95;}
  .scene-text p{margin-bottom:1em;}
  .scene-text .dialogue{padding-left:12px;}
  .choices{margin-top:20px;gap:8px;}
  .choice{font-size:14.5px;line-height:1.65;min-height:52px;padding:12px 13px;}
  .choice .sub{font-size:10.5px;}
  .choice .num{font-size:10px;}
  .stage-foot{font-size:10.5px;margin-top:18px;}
  .person-actions .mini{min-height:36px;padding:7px 10px;font-size:11px;}
  .person-name{font-size:14px;}
  .person-title{font-size:9.5px;}
  .tabs .tab{min-width:62px;font-size:11.5px;padding:13px 8px;}
  .modal h2{font-size:19px;}
  .talk-line{font-size:14.5px;line-height:1.95;}
  .talk-you{font-size:12px;}
  .heart-hint{font-size:11px;}
  .fx-chip{font-size:10px;}
}

@media (max-width:380px){
  .hud-name{font-size:13px;}
  .hud-sub{font-size:9px;}
  .coin{font-size:9px;padding:3px 4px;}
  .coin b{font-size:11px;}
  .icon-btn{width:32px;height:32px;}
  .act b{font-size:11.5px;}
  #stage{padding-left:14px;padding-right:14px;}
  .scene-text{font-size:14.5px;}
}

/* 手机角色面板 */
#sideTabs .tab[data-tab="char"]{display:none;}
@media (max-width:960px){
  #sideTabs .tab[data-tab="char"]{display:block;}
}
.char-sheet{font-size:12px;}
.cs-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.cs-glyph{
  width:58px;height:58px;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid var(--line-strong);color:var(--gold2);
  font-family:var(--serif);font-size:28px;background:rgba(201,162,39,.06);
}
.cs-id b{display:block;font-family:var(--serif);font-size:19px;color:var(--white);letter-spacing:.08em;}
.cs-id small{display:block;font-size:10px;color:var(--muted);line-height:1.7;margin-top:3px;}
.char-sheet .stat{margin-bottom:11px;}
.char-sheet .stat-head{font-size:11px;}
.char-sheet .stat-head b{font-size:11.5px;}
.char-sheet .stat-foot{font-size:9.5px;color:var(--muted);margin-top:3px;line-height:1.6;}
.char-sheet .bar{height:6px;}
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px;}
.cs-grid div{border:1px solid rgba(201,162,39,.14);background:rgba(0,0,0,.22);padding:8px 10px;}
.cs-grid span{display:block;font-size:9.5px;color:#6f6658;letter-spacing:.06em;}
.cs-grid b{display:block;font-family:var(--serif);font-size:13px;color:var(--text);font-weight:500;margin-top:2px;line-height:1.4;}
.cs-note{font-size:10.5px;line-height:1.9;color:#8b8171;border-top:1px dashed rgba(201,162,39,.16);padding-top:10px;margin:14px 0 0;}
.cs-jue{margin:12px 0 4px;padding:10px 11px;border:1px solid rgba(201,162,39,.14);background:rgba(0,0,0,.18);}
.cs-jue .stat-foot{margin-bottom:6px;}
.cs-jue .mini{width:100%;margin-top:6px;}
.cs-actions{display:grid;gap:8px;margin-top:16px;}
.cs-actions .btn{width:100%;padding:11px;font-size:13px;letter-spacing:.08em;}
.cs-break{margin:8px 0 12px;}
.cs-break .btn{width:100%;padding:12px;font-size:13.5px;letter-spacing:.1em;}
.act.break b{color:var(--gold2);}
.act.break{background:rgba(201,162,39,.09);box-shadow:inset 0 0 0 1px rgba(201,162,39,.28);}

/* 横屏：动作条压成一行，正文留出更多高度 */
@media (max-width:960px) and (orientation:landscape) and (max-height:520px){
  #actionBar{grid-template-columns:repeat(7,minmax(0,1fr)) !important;}
  .mobile-stats{display:none;}
  .act{min-height:44px;padding:4px 2px;}
  .act b{font-size:11.5px;}
  #stage{padding-bottom:96px;}
  .hud-mid{display:none;}
  #hud{padding:5px 10px;}
  .scroll-cue{bottom:calc(64px + env(safe-area-inset-bottom));}
  .toasts{bottom:calc(64px + env(safe-area-inset-bottom));}
}