/* ============================================================
   墟上妄仙 · MVP  —— 视觉样式
   配色：霜白 / 雾霾蓝 / 深墨 / 暗紫 / 赭石赤茶
   ============================================================ */

:root{
  --ink:      #0a0c12;
  --ink-2:    #11141d;
  --frost:    #e7e4dc;
  --frost-dim:#b9bcbf;
  --haze:     #8ea3ba;
  --haze-deep:#5d7288;
  --violet:   #6b5a8c;
  --rust:     #96604a;
  --line:     rgba(231,228,220,.14);
  --line-soft:rgba(231,228,220,.08);
  --paper:    rgba(231,228,220,.045);

  --sky1:#161c26; --sky2:#232c3a; --sky3:#2c3746;
  --glow:rgba(180,205,228,.20);
  --ridge:#101620; --ridge2:#0c1119;
  --fog-color:rgba(150,170,195,.075);
  --tint: transparent;

  --serif: "Songti SC","STSong","STZhongsong","Noto Serif SC","Source Han Serif SC","Source Han Serif CN","SimSun","FangSong","KaiTi",serif;
  --sans:  "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--ink);
  color:var(--frost);
  font-family:var(--serif);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
.hidden{display:none !important;}

/* ---------- 场景配色（body[data-scene]） ---------- */
body[data-scene="cloud"]{ --scene-tint:rgba(150,190,230,.30);
  --sky1:#151d29; --sky2:#22303f; --sky3:#33455a;
  --glow:rgba(186,212,235,.26);
  --ridge:#101823; --ridge2:#0b1118;
  --fog-color:rgba(196,215,235,.075);
}
body[data-scene="rift"]{ --scene-tint:rgba(160,115,210,.34);
  --sky1:#171122; --sky2:#241a33; --sky3:#2e2140;
  --glow:rgba(133,105,178,.26);
  --ridge:#0f0a16; --ridge2:#0a070f;
  --fog-color:rgba(146,116,186,.10);
}
body[data-scene="ferry"]{ --scene-tint:rgba(226,152,104,.30);
  --sky1:#241719; --sky2:#3a2523; --sky3:#4a2f28;
  --glow:rgba(200,134,94,.22);
  --ridge:#150d10; --ridge2:#0d080a;
  --fog-color:rgba(190,150,140,.085);
}
body[data-scene="siege"]{ --scene-tint:rgba(150,172,200,.24);
  --sky1:#181a1e; --sky2:#26292f; --sky3:#33373e;
  --glow:rgba(170,182,196,.20);
  --ridge:#0f1114; --ridge2:#0a0b0e;
  --fog-color:rgba(180,190,205,.06);
}
body[data-scene="yard"]{ --scene-tint:rgba(150,180,205,.24);
  --sky1:#141a20; --sky2:#1e2830; --sky3:#28343d;
  --glow:rgba(176,198,210,.20);
  --ridge:#0d1216; --ridge2:#090d11;
  --fog-color:rgba(180,200,215,.06);
}
body[data-scene="road"]{ --scene-tint:rgba(200,175,140,.24);
  --sky1:#1a1a1c; --sky2:#2a2724; --sky3:#3a342c;
  --glow:rgba(190,170,140,.16);
  --ridge:#100f0e; --ridge2:#0a0908;
  --fog-color:rgba(180,170,155,.055);
}
body[data-scene="abyss"]{ --scene-tint:rgba(180,130,220,.34);
  --sky1:#0d0a14; --sky2:#1a1026; --sky3:#251433;
  --glow:rgba(160,110,200,.30);
  --ridge:#07050b; --ridge2:#040307;
  --fog-color:rgba(170,120,210,.11);
}

/* ============================ 舞台 ============================ */
#stage{position:fixed; inset:0; overflow:hidden;}

.bg-layer{
  position:absolute; inset:0; background:#07090d;
  transition:opacity .9s ease;
}
.bg-layer svg{width:100%; height:100%; display:block;}
.bg-grain{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.16'/></svg>");
  mix-blend-mode:overlay;
}

#fog{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.9;}

.vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 38%, rgba(4,5,8,.55) 82%, rgba(3,4,6,.9) 100%);
}

/* ---------- 立绘 ---------- */
.portrait{
  position:absolute; bottom:-1vh; height:80vh;
  opacity:0; transform:translateY(18px);
  transition:opacity .75s ease, transform .75s ease, filter .5s ease;
  pointer-events:none; will-change:transform, opacity;
}
.portrait.show{opacity:1; transform:translateY(0);}
.portrait img{
  height:100%; width:auto; display:block;
  filter:drop-shadow(0 18px 45px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(140,170,210,.16)) drop-shadow(0 0 12px rgba(190,215,245,.22)) brightness(.94) contrast(1.06) saturate(.9) sepia(.05);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 82%, rgba(0,0,0,.55) 94%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 82%, rgba(0,0,0,.55) 94%, transparent 100%);
}
.portrait--right{right:4vw;}
.portrait--left{left:3vw;}
.portrait.dim{filter:brightness(.62) saturate(.8);}

.imprint{
  position:absolute; left:44.5%; top:47.5%; width:46px; height:46px;
  margin:-23px 0 0 -23px; border-radius:50%; display:none;
  background:radial-gradient(circle, rgba(176,142,214,.55) 0%, rgba(150,110,200,.16) 45%, transparent 70%);
  box-shadow:0 0 22px rgba(160,120,215,.35);
  animation:pulse 3.4s ease-in-out infinite;
}
.imprint.on{display:block;}
@keyframes pulse{
  0%,100%{opacity:.35; transform:scale(.9);}
  50%{opacity:.95; transform:scale(1.15);}
}

/* ============================ 标题页 ============================ */
#titleScreen{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(90% 70% at 50% 38%, rgba(120,150,180,.14), transparent 65%),
    linear-gradient(180deg,#0b0e14 0%,#101722 55%,#080a0e 100%);
  transition:opacity 1s ease;
}
#titleScreen::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.14'/></svg>");
  mix-blend-mode:overlay;
}
.title-veil{
  position:absolute; inset:0;
  background:radial-gradient(60% 50% at 50% 55%, rgba(255,255,255,.05), transparent 70%);
}
.title-inner{position:relative; text-align:center; z-index:2; padding:0 24px;}
.title-seal{
  font-size:11px; letter-spacing:.55em; color:rgba(200,205,214,.5);
  margin-bottom:26px; padding-left:.55em;
}
.title-mark{
  font-size:clamp(46px, 7.4vw, 96px);
  font-weight:400; letter-spacing:.22em; padding-left:.22em;
  color:#efeee8;
  text-shadow:0 0 45px rgba(150,180,210,.28), 0 0 90px rgba(120,150,190,.15);
}
.title-sub{
  margin-top:20px; font-size:clamp(13px,1.35vw,16px);
  letter-spacing:.4em; padding-left:.4em; color:rgba(190,197,208,.72);
}
.title-rule{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:34px auto 40px; width:min(340px,64vw); opacity:.5;
}
.title-rule i{flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line));}
.title-rule i:last-child{background:linear-gradient(270deg,transparent,var(--line));}
.title-rule b{width:5px; height:5px; border:1px solid rgba(231,228,220,.5); transform:rotate(45deg);}

.title-nav{display:flex; flex-direction:column; gap:1px; align-items:center;}
.tbtn{
  width:230px; padding:14px 0; font-size:15px; letter-spacing:.26em;
  color:rgba(225,224,218,.82); border:1px solid transparent;
  transition:all .35s ease; position:relative;
}
.tbtn:hover{color:#fff; letter-spacing:.34em; border-color:var(--line); background:rgba(231,228,220,.035);}
.tbtn::before{
  content:""; position:absolute; left:-1px; top:50%; width:0; height:1px;
  background:rgba(190,205,225,.6); transition:width .35s ease; transform:translateY(-50%);
}
.tbtn:hover::before{width:16px;}
.title-note{
  margin-top:44px; font-size:11px; letter-spacing:.16em;
  color:rgba(170,178,190,.42);
}

/* ============================ HUD ============================ */
#game{position:fixed; inset:0;}
#game.hidden + #hud{display:none;}
#hud{
  position:fixed; top:0; left:0; right:0; z-index:32;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 3.2vw 14px;
  background:linear-gradient(180deg, rgba(4,6,9,.88) 0%, rgba(4,6,9,.55) 55%, rgba(4,6,9,0) 100%);
  font-size:12px; letter-spacing:.12em;
}
.hud-left{display:flex; align-items:center; gap:16px;}
.hud-seal{
  font-size:12px; letter-spacing:.3em; color:rgba(231,228,220,.55);
  border:1px solid var(--line); padding:4px 9px 4px 11px;
}
.hud-turn{color:rgba(231,228,220,.85); font-size:13px; letter-spacing:.2em;}
.hud-mid{display:flex; align-items:center; gap:9px;}
.hud-ap{display:flex; align-items:center; gap:7px; color:rgba(200,206,216,.7);}
.hud-ap .dot{
  width:7px; height:7px; border-radius:50%; border:1px solid rgba(190,205,222,.55);
  transition:all .3s ease;
}
.hud-ap .dot.on{background:rgba(196,214,236,.9); box-shadow:0 0 10px rgba(180,205,235,.6);}
.hud-ap .dot.off{opacity:.25;}
.hud-right{display:flex; align-items:center; gap:18px;}
.stat{color:rgba(200,206,216,.72); letter-spacing:.1em;}
.stat i{font-style:normal; color:rgba(160,170,184,.6); margin-right:6px; font-size:11px;}
.stat b{font-weight:400; color:#e4e2db; font-size:13px;}
.icon-btn{
  font-size:11.5px; letter-spacing:.16em; color:rgba(200,206,216,.66);
  padding:5px 10px; border:1px solid var(--line-soft); transition:all .3s ease;
}
.icon-btn:hover{color:#fff; border-color:var(--line); background:rgba(231,228,220,.05);}

/* ============================ 对白 ============================ */
#dialogue{
  position:absolute; left:0; right:0; bottom:0; z-index:15;
  padding:0 4vw 3.4vh;
  opacity:0; transform:translateY(10px);
  transition:opacity .45s ease, transform .45s ease;
}
#dialogue.show{opacity:1; transform:translateY(0);}
.dlg-frame{
  position:relative; max-width:1080px; margin:0 auto;
  padding:26px 40px 34px;
  background:
    linear-gradient(180deg, rgba(10,13,19,.52) 0%, rgba(8,10,15,.86) 100%);
  border-top:1px solid rgba(231,228,220,.16);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  box-shadow:0 -18px 60px rgba(0,0,0,.42);
  min-height:168px;
}
.dlg-frame::before{
  content:""; position:absolute; left:0; top:-1px; width:120px; height:1px;
  background:linear-gradient(90deg, rgba(200,215,235,.75), transparent);
}
.dlg-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.1'/></svg>");
  mix-blend-mode:overlay;
}
.dlg-speaker{
  font-size:13px; letter-spacing:.28em; color:var(--haze);
  margin-bottom:14px; min-height:16px;
  display:flex; align-items:center; gap:12px;
}
.dlg-speaker::after{
  content:""; flex:0 0 42px; height:1px; background:linear-gradient(90deg, rgba(190,205,222,.45), transparent);
}
.dlg-speaker:empty{display:none;}
.dlg-speaker.who-fer{color:#b9a8d8;}
.dlg-speaker.who-me{color:#9fbcd4;}
.dlg-speaker.who-pei{color:#d8cfc0;}
.dlg-speaker.who-elder{color:#c08a6e;}
.dlg-speaker.who-master{color:#cfd8e4;}
.dlg-label{
  display:inline-block; margin-bottom:12px;
  font-size:10.5px; letter-spacing:.38em;
  color:rgba(176,146,214,.85);
  padding:3px 10px 3px 12px;
  border-left:1px solid rgba(168,132,212,.5);
  background:linear-gradient(90deg, rgba(140,100,190,.14), transparent);
}
.dlg-text{
  font-size:clamp(15px,1.32vw,18.5px); line-height:2.15; letter-spacing:.05em;
  color:#dcd9d2; min-height:2.2em; max-width:960px;
}
.dlg-text.narration{color:#a6adbb; letter-spacing:.07em;}
.dlg-text.inner{color:#9db4c9; letter-spacing:.07em;}
.dlg-text.fer{color:#ded9e6;}
.dlg-text.warn{color:#c8967a;}
.dlg-next{
  position:absolute; right:26px; bottom:14px; font-size:12px; color:rgba(200,210,222,.5);
  animation:bob 1.6s ease-in-out infinite; opacity:0; transition:opacity .3s;
}
.dlg-next.on{opacity:1;}
@keyframes bob{0%,100%{transform:translateY(0); opacity:.35;} 50%{transform:translateY(4px); opacity:.85;}}

/* 幻象特效：文字轻微浮动 */
.dlg-frame.illusion{
  border-top-color:rgba(150,110,200,.4);
  box-shadow:0 -18px 60px rgba(0,0,0,.42), 0 0 70px rgba(120,80,170,.14) inset;
}
.dlg-frame.illusion .dlg-text{color:#c3b2d8; text-shadow:0 0 14px rgba(150,110,200,.28);}

/* ============================ 选项 ============================ */
#choices{
  position:absolute; left:4vw; bottom:calc(var(--dlg-h, 210px) + 14px); z-index:16;
  display:flex; flex-direction:column; gap:9px; align-items:flex-start;
  max-width:min(620px, 56vw);
  opacity:0; transition:opacity .35s ease;
}
#choices.show{opacity:1;}
.choice{
  position:relative; text-align:left;
  padding:14px 20px 14px 46px; min-width:280px; max-width:100%;
  font-size:14.5px; letter-spacing:.06em; line-height:1.65;
  color:rgba(228,226,219,.9);
  background:linear-gradient(90deg, rgba(14,17,25,.86), rgba(14,17,25,.66));
  border:1px solid rgba(231,228,220,.12);
  border-left:1px solid rgba(200,215,235,.28);
  backdrop-filter:blur(4px);
  transition:all .3s ease;
}
.choice::before{
  content:attr(data-idx); position:absolute; left:16px; top:50%; transform:translateY(-50%);
  font-size:12px; color:rgba(190,205,222,.5); letter-spacing:0;
}
.choice:hover{
  color:#fff; border-color:rgba(210,222,238,.4);
  background:linear-gradient(90deg, rgba(28,34,46,.94), rgba(18,22,31,.7));
  transform:translateX(4px);
  box-shadow:0 6px 26px rgba(0,0,0,.4);
}
.choice .cost{
  display:inline-block; margin-left:10px; font-size:11px; letter-spacing:.1em;
  color:rgba(160,190,215,.75); border:1px solid rgba(140,170,200,.3);
  padding:1px 6px; vertical-align:1px;
}
.choice .cost.none{color:rgba(180,180,180,.45); border-color:rgba(160,160,160,.16);}
.choice.locked{opacity:.42;}
.choice.locked:hover{transform:none; border-color:rgba(231,228,220,.12);}
.choice .hint{
  display:block; margin-top:6px; font-size:11.5px; letter-spacing:.04em;
  color:rgba(160,172,188,.58);
}

/* ============================ 行动面板 ============================ */
#panelLayer{
  position:absolute; inset:0; z-index:18;
  display:flex; align-items:center; justify-content:flex-start;
  padding:0 6vw;
  background:radial-gradient(78% 90% at 28% 50%, rgba(6,8,12,.62), rgba(4,5,8,.38));
  backdrop-filter:blur(2px);
}
.panel-card{
  width:min(620px, 52vw);
  padding:34px 36px 26px;
  background:linear-gradient(160deg, rgba(20,24,33,.92), rgba(11,14,20,.94));
  border:1px solid rgba(231,228,220,.13);
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  position:relative;
  animation:cardIn .45s ease both;
}
@keyframes cardIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.panel-card::before{
  content:""; position:absolute; left:0; top:0; width:1px; height:100%;
  background:linear-gradient(180deg, rgba(200,215,235,.5), transparent 60%);
}
.panel-head{border-bottom:1px solid var(--line-soft); padding-bottom:16px; margin-bottom:8px;}
.panel-title{font-size:19px; letter-spacing:.2em; color:#e8e5dd;}
.panel-sub{margin-top:9px; font-size:12px; letter-spacing:.08em; color:rgba(160,172,188,.62); line-height:1.8;}
.panel-actions{display:flex; flex-direction:column;}
.act{
  display:flex; align-items:flex-start; gap:14px;
  padding:15px 8px 15px 2px; text-align:left; width:100%;
  border-bottom:1px solid rgba(231,228,220,.055);
  transition:all .28s ease; position:relative;
}
.act:hover{background:linear-gradient(90deg, rgba(190,210,232,.06), transparent); padding-left:10px;}
.act .idx{
  flex:0 0 20px; font-size:12px; color:rgba(170,185,205,.5); padding-top:3px; letter-spacing:0;
}
.act .body{flex:1;}
.act .name{display:block; font-size:14.5px; letter-spacing:.08em; color:rgba(232,229,221,.92);}
.act .desc{display:block; margin-top:6px; font-size:11.8px; letter-spacing:.03em; color:rgba(155,168,184,.62); line-height:1.7;}
.act .ap{flex:0 0 auto; font-size:11px; color:rgba(160,190,215,.8); padding-top:4px; letter-spacing:.06em;}
.act.dim{opacity:.38;}
.act.dim:hover{background:none; padding-left:2px;}
.panel-foot{
  margin-top:16px; display:flex; justify-content:space-between; align-items:center;
  font-size:11.5px; color:rgba(150,163,180,.6); letter-spacing:.08em;
}
.panel-close{
  font-size:11.5px; letter-spacing:.16em; color:rgba(190,200,212,.7);
  border:1px solid var(--line-soft); padding:6px 14px;
}
.panel-close:hover{color:#fff; border-color:var(--line);}

/* ============================ 通用弹层 ============================ */
#modalLayer, #drawerLayer, #endLayer{
  position:fixed; inset:0; z-index:40; display:none;
}
#modalLayer.on, #drawerLayer.on, #endLayer.on{display:block;}
.veil{
  position:absolute; inset:0; background:rgba(4,5,8,.72);
  backdrop-filter:blur(3px); animation:fadeIn .3s ease both;
}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}

/* ---- 书信 ---- */
.letter-wrap{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:24px;
}
.letter{
  position:relative; width:min(540px, 88vw);
  padding:52px 48px 40px;
  color:#2f2a24;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.5), transparent 55%),
    linear-gradient(160deg, #ded2ba 0%, #d3c4a8 46%, #c6b596 100%);
  box-shadow:0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(90,74,56,.35) inset;
  animation:letterIn .55s cubic-bezier(.16,.8,.3,1) both;
}
@keyframes letterIn{from{opacity:0; transform:translateY(26px) scale(.985);} to{opacity:1; transform:none;}}
.letter::before{  /* 浊雾 */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:
    radial-gradient(60% 40% at 78% 12%, rgba(90,66,120,.30), transparent 70%),
    radial-gradient(50% 45% at 12% 88%, rgba(70,54,96,.26), transparent 72%);
  mix-blend-mode:multiply;
}
.letter::after{   /* 纸纹 */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23p)' opacity='0.22'/></svg>");
  mix-blend-mode:multiply;
}
.letter .wax{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:34px; height:34px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #7a4237, #4a241d 70%);
  box-shadow:0 4px 14px rgba(0,0,0,.5), 0 0 0 1px rgba(255,220,200,.12) inset;
}
.letter-text{
  position:relative; z-index:2;
  font-size:16px; line-height:2.5; letter-spacing:.16em;
  text-align:justify; text-justify:inter-ideograph;
  color:#332c24;
}
.letter-sign{
  position:relative; z-index:2; margin-top:26px; text-align:right;
  font-size:12.5px; letter-spacing:.24em; color:rgba(60,48,38,.5);
}
.letter-btns{
  position:relative; z-index:2; margin-top:34px;
  display:flex; flex-direction:column; gap:10px;
}
.letter-btns button{
  padding:13px 16px; font-size:13.5px; letter-spacing:.1em; text-align:left;
  color:#3a3128; border:1px solid rgba(74,58,44,.34);
  background:rgba(255,250,240,.24); transition:all .28s ease;
}
.letter-btns button:hover{background:rgba(255,250,240,.5); border-color:rgba(74,58,44,.6);}
.letter-btns button small{display:block; margin-top:4px; font-size:11px; color:rgba(70,58,46,.6); letter-spacing:.05em;}
.letter-note{
  position:relative; z-index:2; margin-top:16px; font-size:11px; letter-spacing:.06em;
  color:rgba(74,58,46,.62); line-height:1.8;
}

/* ---- 通用对话框 ---- */
.dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(430px, 88vw); padding:30px 32px 22px;
  background:linear-gradient(160deg, rgba(22,26,35,.97), rgba(12,15,21,.98));
  border:1px solid rgba(231,228,220,.14);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
  animation:dialogIn .34s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes dialogIn{
  from{opacity:0; transform:translate(-50%,-50%) translateY(12px) scale(.992);}
  to{opacity:1; transform:translate(-50%,-50%);}
}
.dialog h3{font-size:15px; letter-spacing:.18em; font-weight:400; color:#e7e4dc; margin-bottom:14px;}
.dialog p{font-size:12.5px; line-height:1.9; color:rgba(170,180,194,.8); letter-spacing:.04em;}
.dialog .dbtns{display:flex; gap:10px; margin-top:24px; justify-content:flex-end;}
.btn{
  padding:9px 20px; font-size:12.5px; letter-spacing:.14em;
  border:1px solid rgba(231,228,220,.18); color:rgba(225,224,217,.85);
  transition:all .28s ease;
}
.btn:hover{background:rgba(231,228,220,.09); color:#fff; border-color:rgba(231,228,220,.4);}
.btn.primary{border-color:rgba(160,190,215,.42); color:#cfe0ee;}
.btn.primary:hover{background:rgba(140,175,205,.16); color:#fff;}
.btn.ghost{border-color:transparent; color:rgba(170,180,194,.6);}
.btn.ghost:hover{color:#fff; background:rgba(255,255,255,.05);}

/* ---- 存档槽 ---- */
.slots{display:flex; flex-direction:column; gap:8px; margin-top:14px;}
.slot{
  display:flex; align-items:center; gap:14px; padding:13px 16px;
  border:1px solid rgba(231,228,220,.1); background:rgba(255,255,255,.02);
  transition:all .25s ease; text-align:left; width:100%;
}
.slot:hover{border-color:rgba(180,205,230,.35); background:rgba(180,205,230,.06);}
.slot .no{font-size:12px; color:rgba(170,185,205,.55); letter-spacing:.1em; flex:0 0 46px;}
.slot .info{flex:1; font-size:12px; color:rgba(215,214,208,.8); letter-spacing:.05em; line-height:1.6;}
.slot .info span{display:block; font-size:10.5px; color:rgba(150,162,178,.5); margin-top:3px;}
.slot .go{font-size:11px; color:rgba(160,190,215,.7); letter-spacing:.1em;}
.slot.empty .info{color:rgba(150,160,175,.4);}

/* ---- 纪事簿 ---- */
#drawerLayer{background:rgba(4,5,8,.34);}
.journal{
  position:absolute; top:0; right:0; bottom:0; width:min(480px, 92vw);
  background:linear-gradient(200deg, rgba(20,23,30,.98), rgba(10,12,17,.99));
  border-left:1px solid rgba(231,228,220,.12);
  box-shadow:-30px 0 80px rgba(0,0,0,.55);
  animation:slideIn .38s cubic-bezier(.2,.8,.3,1) both;
  display:flex; flex-direction:column;
}
@keyframes slideIn{from{transform:translateX(40px); opacity:0;} to{transform:none; opacity:1;}}
.j-head{padding:26px 30px 16px; border-bottom:1px solid var(--line-soft); position:relative;}
.j-head h2{font-size:16px; font-weight:400; letter-spacing:.3em; color:#e6e3db;}
.j-head p{margin-top:8px; font-size:11px; letter-spacing:.05em; color:rgba(150,162,178,.55); line-height:1.7;}
.j-close{position:absolute; right:20px; top:24px; font-size:16px; color:rgba(180,190,205,.5);}
.j-close:hover{color:#fff;}
.j-list{flex:1; overflow-y:auto; padding:22px 32px 40px; position:relative;}
.j-item{
  position:relative; padding:0 0 22px 26px;
  border-left:1px solid rgba(231,228,220,.09);
  font-size:13px; line-height:2.05; letter-spacing:.04em;
  color:rgba(205,206,202,.78);
  animation:jIn .4s ease both;
}
@keyframes jIn{from{opacity:0; transform:translateX(8px);} to{opacity:1; transform:none;}}
.j-item:last-child{border-left-color:transparent;}
.j-item::before{
  content:""; position:absolute; left:-3.5px; top:11px; width:6px; height:6px;
  border-radius:50%; background:rgba(150,175,205,.5);
  box-shadow:0 0 9px rgba(150,180,215,.4);
}
.j-item .t{
  display:block; font-size:10.5px; letter-spacing:.16em;
  color:rgba(150,165,185,.45); margin-bottom:5px;
}
.j-empty{padding:40px 0; font-size:12px; color:rgba(150,160,175,.4); letter-spacing:.1em; text-align:center;}

/* ============================ 结局 ============================ */
#endLayer{background:#05070a; overflow-y:auto;}
.end-bg svg{position:absolute; inset:0; width:100%; height:100%; opacity:.95; filter:saturate(1) brightness(1.22);}
.end-bg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(5,7,10,.86) 0%, rgba(5,7,10,.52) 42%, rgba(5,7,10,.1) 74%, rgba(5,7,10,.34) 100%);
}
.end-bg{
  position:absolute; inset:0;
  background:radial-gradient(110% 80% at 50% 30%, var(--end-glow, rgba(140,170,205,.2)), transparent 62%),
             linear-gradient(180deg, var(--end-sky1,#0c1017) 0%, var(--end-sky2,#141a24) 60%, #05070a 100%);
  animation:endZoom 16s ease-out both, endIn 1.1s ease both;
}
@keyframes endIn{from{opacity:0;} to{opacity:1;}}
@keyframes endZoom{from{transform:scale(1.07);} to{transform:scale(1);}}
.end-portrait{
  position:absolute; bottom:0; height:76vh; opacity:0; z-index:2;
  animation:endFade 1.6s .5s ease both;
  filter:drop-shadow(0 0 60px rgba(0,0,0,.8)) brightness(.88) saturate(.95);
  -webkit-mask-image:linear-gradient(180deg,#000 60%, rgba(0,0,0,.35) 92%, transparent 100%);
  mask-image:linear-gradient(180deg,#000 60%, rgba(0,0,0,.35) 92%, transparent 100%);
}
@keyframes endFade{from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:none;}}
.end-body{
  position:relative; z-index:3; min-height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:84px 9vw 64px; max-width:1000px;
  background:linear-gradient(90deg, rgba(5,7,10,.86) 0%, rgba(5,7,10,.55) 52%, transparent 82%);
}
.end-kicker{
  font-size:11px; letter-spacing:.5em; color:rgba(180,192,208,.5); margin-bottom:22px;
  opacity:0; animation:upIn .9s .3s ease both;
}
.end-title{
  font-size:clamp(30px,3.6vw,46px); letter-spacing:.18em; font-weight:400;
  color:#efeee8; text-shadow:0 0 50px rgba(150,180,215,.25);
  opacity:0; animation:upIn 1s .5s ease both;
}
.end-tag{
  display:inline-block; margin-top:16px; font-size:11px; letter-spacing:.24em;
  padding:4px 10px; border:1px solid rgba(180,200,222,.3); color:rgba(180,200,222,.75);
  opacity:0; animation:upIn .9s .7s ease both;
}
.end-text{
  margin-top:34px; font-size:15px; line-height:2.25; letter-spacing:.06em;
  color:rgba(210,210,204,.86); max-width:588px;
  text-shadow:0 2px 24px rgba(0,0,0,.85);
  opacity:0; animation:upIn 1.1s .9s ease both;
}
.end-text p{margin-bottom:14px;}
.end-journal{
  margin-top:26px; padding:16px 20px; border-left:2px solid rgba(160,190,215,.35);
  background:rgba(255,255,255,.025); font-size:12.5px; line-height:2; letter-spacing:.05em;
  color:rgba(180,190,200,.7); max-width:620px;
  opacity:0; animation:upIn 1s 1.2s ease both;
}
.end-journal b{font-weight:400; color:rgba(160,190,215,.85); letter-spacing:.14em; font-size:11px; display:block; margin-bottom:6px;}
.end-actions{
  margin-top:40px; display:flex; gap:12px;
  opacity:0; animation:upIn .9s 1.5s ease both;
}
@keyframes upIn{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}

/* ============================ Toast ============================ */
#toast{
  position:fixed; left:50%; top:11vh; transform:translateX(-50%) translateY(-10px);
  z-index:80; pointer-events:none; opacity:0; transition:all .35s ease;
  padding:11px 22px; font-size:12.5px; letter-spacing:.08em;
  background:rgba(12,15,22,.94); border:1px solid rgba(190,205,225,.22);
  color:rgba(226,224,217,.9); box-shadow:0 14px 40px rgba(0,0,0,.5);
  max-width:80vw; text-align:center; line-height:1.7;
}
#toast.on{opacity:1; transform:translateX(-50%) translateY(0);}

#fade{position:fixed; inset:0; background:#05070a; opacity:0; pointer-events:none; transition:opacity .6s ease; z-index:50;}
#fade.on{opacity:1;}

/* ============================ 响应式 ============================ */
@media (max-width:900px){
  .portrait{height:62vh;}
  .portrait--right{right:-6vw;}
  .portrait--left{left:-8vw;}
  #choices{right:4vw; left:4vw; max-width:none; align-items:stretch;}
  .choice{min-width:0;}
  .panel-card{width:100%; max-width:520px; padding:24px 22px 18px;}
  #panelLayer{padding:0 4vw; justify-content:center;}
  .dlg-frame{padding:20px 22px 26px; min-height:150px;}
  .dlg-text{font-size:15px; line-height:2;}
  .end-body{padding:0 6vw; background:linear-gradient(180deg, rgba(5,7,10,.55), rgba(5,7,10,.9));}
  .end-portrait{height:52vh; right:-6vw;}
  .hud-right .stat{display:none;}
  .letter{padding:40px 26px 30px;}
  .letter-text{font-size:14.5px; letter-spacing:.1em; line-height:2.3;}
}

/* ============================ 云端存档 ============================ */
.title-cloud{
  margin-top:26px; padding:9px 14px; background:none; cursor:pointer;
  border:none; border-bottom:1px solid rgba(190,205,222,.22);
  font-family:inherit; font-size:11.5px; letter-spacing:.24em;
  color:rgba(178,194,212,.62); transition:color .3s, border-color .3s;
}
.title-cloud:hover{color:#e6eef8; border-color:rgba(190,215,245,.55);}

.cloud-dialog{width:min(500px, 92vw);}
.cloud-tip{
  font-size:11.5px; line-height:1.95; color:rgba(168,180,196,.66);
  letter-spacing:.04em; margin-top:-4px;
}
.cloud-body{margin-top:18px;}
.cloud-note{
  font-size:12px; line-height:1.9; color:rgba(178,190,206,.82);
  padding:12px 14px; border-left:2px solid rgba(150,175,205,.35);
  background:rgba(255,255,255,.025);
}
.cloud-input{
  display:block; width:100%; margin-top:14px; padding:11px 14px;
  background:rgba(255,255,255,.04); border:1px solid rgba(231,228,220,.18);
  color:#e7e4dc; font-family:inherit; font-size:15px; letter-spacing:.34em;
  text-transform:uppercase; outline:none;
}
.cloud-input:focus{border-color:rgba(160,195,230,.5); background:rgba(255,255,255,.06);}
.cloud-input::placeholder{letter-spacing:.12em; font-size:12px; color:rgba(160,172,188,.45);}

.cloud-code-box{
  padding:16px 18px; background:rgba(255,255,255,.028);
  border:1px solid rgba(231,228,220,.1); text-align:center;
}
.cloud-code-box .lbl{
  display:block; font-size:10.5px; letter-spacing:.3em;
  color:rgba(160,175,192,.6); margin-bottom:8px;
}
.cloud-code-box .code{
  display:block; font-size:24px; letter-spacing:.26em; font-weight:400;
  color:#dfe9f4; text-shadow:0 0 22px rgba(150,190,230,.35);
}
.cloud-code-box .hint{
  display:block; margin-top:9px; font-size:10.5px;
  letter-spacing:.06em; color:rgba(160,175,192,.5);
}

.cloud-list{margin-top:14px; display:flex; flex-direction:column; gap:7px;}
.cloud-row{
  display:flex; gap:14px; align-items:baseline;
  padding:10px 13px; background:rgba(255,255,255,.022);
  border:1px solid rgba(231,228,220,.08);
}
.cloud-row b{
  font-weight:400; font-size:11.5px; letter-spacing:.14em;
  color:rgba(210,220,232,.78); flex:0 0 34px;
}
.cloud-row span{
  font-size:12px; line-height:1.7; color:rgba(186,196,210,.72); letter-spacing:.03em;
}
.cloud-row span i{display:block; font-style:normal; font-size:10.5px; color:rgba(150,164,182,.55);}
.cloud-row.empty span{color:rgba(150,164,182,.42);}

#btnCloud{position:relative;}
#btnCloud.has-cloud::after{
  content:""; position:absolute; top:6px; right:6px;
  width:4px; height:4px; border-radius:50%;
  background:rgba(150,200,240,.75);
  box-shadow:0 0 8px rgba(150,200,240,.8);
}
#btnCloud.ok{color:#bfe2ff; border-color:rgba(150,200,240,.6);}
#btnCloud.warn{color:#d9b28a; border-color:rgba(200,150,105,.55);}

/* 云端弹窗：小屏自适应，不越界 */
.cloud-dialog{
  max-height:88vh; display:flex; flex-direction:column;
  padding-bottom:18px;
}
.cloud-dialog h3, .cloud-tip{flex:0 0 auto;}
.cloud-body{overflow-y:auto; padding-right:2px; flex:1 1 auto; min-height:0;}
.cloud-dialog .dbtns{
  flex-wrap:wrap; justify-content:center; gap:8px; margin-top:18px; flex:0 0 auto;
}
.cloud-dialog .dbtns .btn{
  flex:1 1 118px; min-width:0; padding:9px 12px; font-size:12px; letter-spacing:.1em;
}
@media (max-width:520px){
  .cloud-dialog{width:92vw; padding:22px 18px 16px;}
  .cloud-dialog .dbtns .btn{flex:1 1 100%;}
  .cloud-code-box .code{font-size:20px; letter-spacing:.2em;}
}
.cloud-code-box{position:relative;}
.cloud-copy{
  position:absolute; right:9px; bottom:8px; cursor:pointer;
  background:none; border:none; font-family:inherit;
  font-size:10.5px; letter-spacing:.2em; color:rgba(160,180,200,.55);
  padding:4px 6px; transition:color .25s;
}
.cloud-copy:hover{color:#cfe0ee;}
.cloud-dialog .dbtns.cols{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.cloud-dialog .dbtns.cols .btn{width:100%;}