/* ═══════════════════════════════════════════════
   月痕 MOONVEIL — 样式
   配色：夜紫 · 月白 · 星金 · 血玫
   ═══════════════════════════════════════════════ */

:root{
  --night:#0b0716;
  --night-2:#160e2b;
  --violet:#2b1b4d;
  --violet-2:#4b2e7a;
  --lilac:#b9a0e8;
  --lilac-2:#8c6bc4;
  --moon:#f6efd8;
  --gold:#d8b26a;
  --gold-2:#f3d99a;
  --rose:#c0607f;
  --rose-2:#e88ba8;
  --ink:#120b22;
  --text:#ece4f7;
  --text-dim:#a89bc4;
  --hp:#c25b7c;
  --mp:#6f7fd8;
  --line:rgba(216,178,106,.28);
  --shadow:0 24px 60px rgba(0,0,0,.6);
  --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC",Georgia,"Times New Roman",serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  --ui-speed:.28s;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--night);
  color:var(--text);
  font-family:var(--sans);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
/* 移动端：避免 iOS 双击缩放与长按菜单 */
button{touch-action:manipulation;}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;}
#app{position:fixed;inset:0;overflow:hidden;background:#000;}

.screen{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;
  transition:opacity .7s ease;
  display:flex;flex-direction:column;
}
.screen.active{opacity:1;pointer-events:auto;}

/* ── 通用场景背景 ── */
.scene-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:background-image .8s ease, filter 1s ease;
  transform:scale(1.03);
}
.scene-bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 40%,transparent 35%,rgba(6,3,14,.72) 100%);
}
.vignette{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 200px 60px rgba(5,2,12,.85);
}
.grain{
  position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.55'/></svg>");
  mix-blend-mode:overlay;
}

/* ═══════════════ 标题画面 ═══════════════ */
#title-screen{background:radial-gradient(ellipse at 74% 32%,#2a1848 0%,#150c28 48%,#07040f 100%);display:block;}
.title-sky{position:absolute;inset:0;background:
  radial-gradient(circle at 78% 24%,rgba(246,239,216,.07),transparent 34%),
  radial-gradient(circle at 18% 82%,rgba(140,107,196,.14),transparent 46%);}
.title-glow{
  position:absolute;right:14%;top:6%;width:62vw;height:88vh;
  background:radial-gradient(ellipse at 60% 42%,rgba(140,107,196,.26),rgba(90,60,150,.10) 45%,transparent 70%);
  filter:blur(20px);
  animation:moonBreath 10s ease-in-out infinite;
}
@keyframes moonBreath{0%,100%{opacity:.75;transform:scale(1);}50%{opacity:1;transform:scale(1.04);}}
.title-stars{position:absolute;inset:0;}
.title-stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;animation:twinkle 4s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.7);}50%{opacity:.95;transform:scale(1.15);}}

.title-witch{
  position:absolute;right:3%;bottom:-4%;
  height:min(104vh,1120px);width:auto;
  filter:drop-shadow(0 0 70px rgba(140,107,196,.30)) saturate(1.02);
  animation:witchFloat 7s ease-in-out infinite;
  -webkit-mask-image:radial-gradient(ellipse 64% 70% at 50% 44%,#000 42%,rgba(0,0,0,.75) 60%,transparent 82%);
  mask-image:radial-gradient(ellipse 64% 70% at 50% 44%,#000 42%,rgba(0,0,0,.75) 60%,transparent 82%);
}
@keyframes witchFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}

.title-veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,4,15,.96) 0%,rgba(7,4,15,.9) 28%,rgba(7,4,15,.35) 52%,transparent 70%),
    linear-gradient(0deg,rgba(7,4,15,.85) 0%,transparent 24%);
}

.title-content{
  position:absolute;z-index:3;left:clamp(28px,9vw,140px);top:50%;
  transform:translateY(-50%);
  width:min(500px,46vw);
  text-align:left;
  animation:titleIn 1.6s ease both;
}
@keyframes titleIn{from{opacity:0;transform:translateY(calc(-50% + 24px));}to{opacity:1;transform:translateY(-50%);}}
.title-eyebrow{font-family:var(--serif);letter-spacing:.55em;font-size:11px;color:var(--gold);opacity:.8;margin-bottom:10px;}
.title-main{
  font-family:var(--serif);font-size:clamp(64px,10vw,122px);font-weight:400;
  letter-spacing:.18em;line-height:1.02;
  color:#fbf6ea;
  text-shadow:0 0 30px rgba(185,160,232,.55),0 0 90px rgba(185,160,232,.28);
}
.title-en{font-family:var(--serif);font-size:12px;letter-spacing:.62em;color:var(--lilac);margin-top:10px;opacity:.85;}
.title-sub{font-family:var(--serif);font-size:14px;letter-spacing:.3em;color:var(--text-dim);margin:18px 0 30px;}
.title-menu{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.title-foot{margin-top:28px;font-size:10px;letter-spacing:.2em;color:var(--text-dim);opacity:.5;}
.title-credit{position:absolute;right:18px;bottom:12px;font-size:10px;letter-spacing:.1em;color:var(--text-dim);opacity:.3;z-index:4;}

.btn-main{
  position:relative;width:min(280px,70vw);padding:13px 22px;
  font-family:var(--serif);font-size:16px;letter-spacing:.32em;text-indent:.32em;
  color:#f4ecdd;border:1px solid var(--line);border-radius:2px;
  background:linear-gradient(180deg,rgba(75,46,122,.55),rgba(22,14,43,.75));
  transition:all var(--ui-speed) ease;
  overflow:hidden;
}
.btn-main::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(243,217,154,.18),transparent);
  transform:translateX(-120%);transition:transform .7s ease;
}
.btn-main:hover::before{transform:translateX(120%);}
.btn-main:hover{border-color:rgba(243,217,154,.65);box-shadow:0 0 26px rgba(185,160,232,.32);color:#fff;}
.btn-main:active{transform:translateY(1px);}
.btn-main:disabled{opacity:.3;cursor:not-allowed;}
.btn-ghost{
  padding:7px 18px;font-size:12px;letter-spacing:.22em;text-indent:.22em;
  color:var(--text-dim);border:1px solid transparent;border-radius:2px;
  transition:all var(--ui-speed) ease;
}
.btn-ghost:hover{color:var(--gold-2);border-color:var(--line);}

/* ═══════════════ 剧情画面 ═══════════════ */
#story-screen{justify-content:flex-end;}

#hud{position:absolute;top:14px;right:14px;display:flex;gap:8px;z-index:20;}
.hud-btn{
  min-width:38px;height:34px;padding:0 11px;
  font-size:13px;letter-spacing:.08em;color:var(--moon);
  border:1px solid rgba(185,160,232,.28);border-radius:20px;
  background:rgba(16,10,32,.55);backdrop-filter:blur(6px);
  transition:all var(--ui-speed) ease;
}
.hud-btn:hover{background:rgba(75,46,122,.7);border-color:var(--line);}
#hud-bars{position:absolute;top:14px;left:14px;z-index:20;display:flex;flex-direction:column;gap:5px;width:136px;opacity:.85;}
.mini-bar{display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.1em;color:var(--text-dim);}
.mini-bar i{font-style:normal;width:18px;}
.mini-bar > span{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.10);overflow:hidden;}
.mini-bar b{display:block;height:100%;width:100%;background:linear-gradient(90deg,#8e3f5c,#e0779a);transition:width .5s ease;}
.mini-bar.mp b{background:linear-gradient(90deg,#4a56a8,#9aa8ff);}

/* 立绘 */
#portrait-wrap{
  position:absolute;bottom:clamp(160px,23vh,230px);right:6%;
  width:min(40vh,310px);pointer-events:none;z-index:2;
  transition:opacity .45s ease,transform .45s ease;
  opacity:0;
}
#portrait-wrap.show{opacity:1;}
#portrait{width:100%;filter:drop-shadow(0 18px 50px rgba(0,0,0,.65));
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.9) 78%,rgba(0,0,0,.35) 93%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.9) 78%,rgba(0,0,0,.35) 93%,transparent 100%);animation:portraitIn .6s cubic-bezier(.2,.9,.25,1) both;}
@keyframes portraitIn{from{opacity:0;transform:translateY(26px) scale(.96);}to{opacity:1;transform:none;}}
#portrait-glow{
  position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);
  width:120%;height:80%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(140,107,196,.30),transparent 68%);
  filter:blur(26px);z-index:-1;opacity:.75;
}
#portrait.narrator{display:none;}

/* 对话框 */
#dialogue{
  position:relative;z-index:5;
  margin:0 auto 0;width:min(1000px,100%);
  padding:30px clamp(22px,5vw,64px) 40px;
  min-height:clamp(190px,27vh,250px);
  background:linear-gradient(180deg,rgba(11,7,22,0) 0%,rgba(11,7,22,.90) 22%,rgba(8,5,17,.97) 100%);
  cursor:pointer;
}
#dialogue::before{
  content:"";position:absolute;left:clamp(22px,5vw,64px);right:clamp(22px,5vw,64px);top:16px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
#speaker{
  position:absolute;top:-14px;left:clamp(22px,5vw,64px);
  padding:5px 20px;font-family:var(--serif);font-size:15px;letter-spacing:.24em;
  color:var(--gold-2);background:linear-gradient(180deg,rgba(43,27,77,.95),rgba(16,10,32,.95));
  border:1px solid var(--line);border-radius:2px;
  opacity:0;transform:translateY(4px);transition:all .3s ease;
}
#speaker.on{opacity:1;transform:none;}
#speaker .sp-role{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.22em;color:var(--text-dim);margin-top:1px;}
#text{
  font-family:var(--serif);
  font-size:clamp(16px,1.55vw,19px);
  line-height:2.05;
  letter-spacing:.045em;
  color:var(--text);
  min-height:3em;
  text-shadow:0 2px 12px rgba(0,0,0,.8);
  white-space:pre-wrap;
}
#text.narrator{color:#c9bde0;font-style:italic;opacity:.92;}
#text.thought{color:var(--lilac);}
#advance-hint{
  position:absolute;right:clamp(24px,5vw,68px);bottom:16px;
  font-size:12px;color:var(--gold);opacity:0;transition:opacity .3s ease;
  animation:bob 1.4s ease-in-out infinite;
}
#advance-hint.on{opacity:.8;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}

/* 选项 */
#choices{
  position:relative;z-index:6;
  display:flex;flex-direction:column;gap:9px;align-items:center;
  width:min(760px,90vw);margin:0 auto 16px;
  max-height:46vh;overflow-y:auto;padding:4px;
  scrollbar-width:thin;
}
.choice{
  position:relative;width:100%;
  padding:13px 26px 13px 48px;
  text-align:left;font-family:var(--serif);font-size:15px;letter-spacing:.06em;line-height:1.6;
  color:#eadffa;
  border:1px solid rgba(185,160,232,.20);border-radius:2px;
  background:linear-gradient(90deg,rgba(43,27,77,.72),rgba(16,10,32,.78));
  backdrop-filter:blur(8px);
  transition:all .22s ease;
  animation:choiceIn .45s ease both;
}
.choice:nth-child(1){animation-delay:.02s;}
.choice:nth-child(2){animation-delay:.07s;}
.choice:nth-child(3){animation-delay:.12s;}
.choice:nth-child(4){animation-delay:.17s;}
.choice:nth-child(5){animation-delay:.22s;}
@keyframes choiceIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.choice::before{
  content:attr(data-key);
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;line-height:17px;text-align:center;
  font-family:var(--sans);font-size:9px;color:var(--text-dim);
  border:1px solid rgba(185,160,232,.25);border-radius:50%;
}
.choice:hover,.choice.kb{
  border-color:rgba(243,217,154,.55);
  background:linear-gradient(90deg,rgba(75,46,122,.85),rgba(31,19,58,.9));
  box-shadow:0 0 28px rgba(140,107,196,.28),inset 0 0 22px rgba(243,217,154,.06);
  transform:translateX(4px);
  color:#fff;
}
.choice:hover::before{border-color:var(--gold);color:var(--gold-2);}
.choice .tag{
  display:inline-block;margin-left:8px;padding:1px 7px;font-family:var(--sans);font-size:9px;
  letter-spacing:.12em;border-radius:2px;vertical-align:2px;
}
.choice .tag.locked{background:rgba(192,96,127,.16);color:#e6a3b9;border:1px solid rgba(192,96,127,.4);}
.choice .tag.bond{background:rgba(233,139,168,.14);color:var(--rose-2);border:1px solid rgba(233,139,168,.35);}
.choice .tag.key{background:rgba(216,178,106,.14);color:var(--gold-2);border:1px solid rgba(216,178,106,.4);}
.choice.locked{opacity:.45;filter:grayscale(.5);cursor:not-allowed;}
.choice.locked:hover{transform:none;box-shadow:none;border-color:rgba(185,160,232,.2);background:linear-gradient(90deg,rgba(43,27,77,.72),rgba(16,10,32,.78));}
.choice.hidden{display:none;}

/* 章节卡 */
.chapter-card{
  position:absolute;inset:0;z-index:40;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(6,3,13,.94);
  opacity:0;pointer-events:none;transition:opacity .8s ease;
}
.chapter-card.on{opacity:1;pointer-events:auto;}
.cc-line{width:min(340px,60vw);height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);}
.cc-title{font-family:var(--serif);font-size:clamp(26px,4vw,42px);letter-spacing:.4em;text-indent:.4em;color:#f7f0e2;text-shadow:0 0 40px rgba(185,160,232,.5);}
.cc-sub{font-size:11px;letter-spacing:.5em;text-indent:.5em;color:var(--gold);opacity:.75;}

/* ═══════════════ 战斗 ═══════════════ */
#battle-screen{background:radial-gradient(ellipse at 50% 30%,#1c1136,#0a0614 70%);}
#battle-bg{filter:saturate(.9) brightness(.82);}

#battle-top{position:relative;z-index:6;display:flex;justify-content:flex-start;align-items:flex-start;padding:16px 20px;gap:18px;}
#moon-phase{
  display:flex;align-items:center;gap:12px;padding:8px 16px 8px 12px;
  border:1px solid var(--line);border-radius:40px;
  background:rgba(11,7,22,.6);backdrop-filter:blur(8px);
}
.mp-icon{
  width:34px;height:34px;border-radius:50%;
  background:#f6efd8;
  box-shadow:0 0 18px rgba(246,239,216,.55);
  position:relative;overflow:hidden;flex:0 0 auto;
  transition:background .6s ease;
}
.mp-icon::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:#0b0716;
  transition:transform .8s cubic-bezier(.4,0,.2,1), opacity .6s ease;
  transform:translateX(140%);
}
.mp-icon.phase-0{background:#2a2140;box-shadow:0 0 18px rgba(120,100,180,.45);}
.mp-icon.phase-0::after{transform:translateX(0);opacity:0;}
.mp-icon.phase-0{background:radial-gradient(circle,#3a3058,#1a1428);}
.mp-icon.phase-1::after{transform:translateX(26%);}
.mp-icon.phase-2::after{transform:translateX(0);}
.mp-icon.phase-3::after{transform:translateX(-42%);}
.mp-icon.phase-4::after{transform:translateX(160%);opacity:0;}
.mp-text{line-height:1.3;}
.mp-text b{display:block;font-family:var(--serif);font-size:14px;letter-spacing:.16em;color:var(--moon);}
.mp-text span{display:block;font-size:9px;letter-spacing:.14em;color:var(--text-dim);}

#battle-log{
  flex:0 1 auto;max-width:min(430px,42vw);height:88px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:3px;
  font-family:var(--serif);font-size:13px;line-height:1.55;text-align:left;
  color:#cdc2e2;text-shadow:0 2px 10px rgba(0,0,0,.95);
  padding:8px 16px;border-radius:10px;
  background:linear-gradient(90deg,rgba(9,5,18,.55),rgba(9,5,18,.15),transparent);
}
#battle-log div{opacity:1;transition:opacity .5s ease;}
#battle-log div:nth-last-child(n+4){opacity:.32;}
#battle-log div:nth-last-child(n+5){opacity:.15;}
#battle-log .dmg{color:#f0a8bd;}
#battle-log .heal{color:#a6e3b8;}
#battle-log .sys{color:var(--gold-2);}
#battle-log .info{color:var(--lilac);}

#enemies{
  position:relative;z-index:4;flex:1;
  display:flex;align-items:center;justify-content:center;gap:clamp(24px,6vw,90px);
  padding:40px 24px 0;
}
.enemy{
  position:relative;width:clamp(180px,23vw,290px);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  cursor:default;transition:all .3s ease;
}
.enemy .e-art{width:100%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6));transition:all .3s ease;animation:idleFloat 4.5s ease-in-out infinite;}
.enemy:nth-child(2) .e-art{animation-delay:-1.4s;}
.enemy:nth-child(3) .e-art{animation-delay:-2.8s;}
@keyframes idleFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.enemy .e-name{font-family:var(--serif);font-size:13px;letter-spacing:.18em;color:#e4d8f6;}
.enemy .e-bar{width:74%;height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;}
.enemy .e-bar b{display:block;height:100%;width:100%;background:linear-gradient(90deg,#8e3f5c,#e0779a);transition:width .45s ease;}
.enemy.dead{opacity:0;transform:scale(.85) translateY(14px);pointer-events:none;}
.enemy.hit .e-art{animation:shake .32s ease;}
.enemy.hit .e-art{filter:drop-shadow(0 20px 40px rgba(0,0,0,.6)) brightness(2.4) saturate(.4);}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-9px);}50%{transform:translateX(7px);}75%{transform:translateX(-4px);}}
.enemy.targetable{cursor:pointer;}
.enemy.targetable .e-art{filter:drop-shadow(0 0 22px rgba(243,217,154,.75));transform:scale(1.05);}
.enemy .e-status{display:flex;gap:5px;font-size:8px;letter-spacing:.1em;color:var(--text-dim);height:11px;}
.enemy .e-status span{padding:0 5px;border-radius:2px;background:rgba(255,255,255,.08);}
.enemy.boss .e-name{color:var(--gold-2);letter-spacing:.24em;}

.dmg-float{
  position:absolute;left:50%;top:34%;
  font-family:var(--serif);font-size:30px;font-weight:600;color:#ffc9d8;
  text-shadow:0 0 18px rgba(255,90,140,.85),0 2px 6px #000;
  pointer-events:none;animation:floatUp 1.1s ease-out forwards;z-index:9;
  white-space:nowrap;transform:translateX(-50%);
}
.dmg-float.crit{font-size:42px;color:#ffe9a8;text-shadow:0 0 24px rgba(255,200,90,.95),0 2px 6px #000;}
.dmg-float.heal{color:#b6f0c6;text-shadow:0 0 18px rgba(120,255,170,.7);}
.dmg-float.small{font-size:22px;}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,10px) scale(.7);}22%{opacity:1;transform:translate(-50%,-6px) scale(1.08);}100%{opacity:0;transform:translate(-50%,-62px) scale(1);}}

#battle-bottom{
  position:relative;z-index:6;
  display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:clamp(12px,2vw,28px);
  padding:14px clamp(14px,3vw,32px) clamp(14px,2.4vh,26px);
  background:linear-gradient(180deg,rgba(11,7,22,0),rgba(8,5,17,.93) 16%,rgba(6,4,13,.98));
  min-height:170px;
}
#player-panel{
  padding:12px 14px;border:1px solid rgba(185,160,232,.16);border-radius:4px;
  background:rgba(24,14,44,.62);backdrop-filter:blur(8px);
}
.pp-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.pp-face{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  background:url(../witch_mobile.jpg) 50% 16%/230% no-repeat,radial-gradient(circle,#3a2761,#180f2e);
  border:1px solid rgba(216,178,106,.4);
  box-shadow:0 0 16px rgba(140,107,196,.4);
}
.pp-name{font-family:var(--serif);font-size:15px;letter-spacing:.14em;color:#f2e9fb;}
.pp-title{font-size:9px;letter-spacing:.1em;color:var(--text-dim);margin-top:2px;}
.pp-bars{display:flex;flex-direction:column;gap:6px;}
.stat-row{display:flex;align-items:center;gap:8px;font-size:9px;color:var(--text-dim);letter-spacing:.1em;}
.stat-row i{font-style:normal;width:16px;}
.stat-row b{font-family:var(--serif);font-size:11px;color:#e8dff5;min-width:54px;text-align:right;font-weight:400;}
.bar{flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.10);overflow:hidden;}
.bar span{display:block;height:100%;width:100%;border-radius:4px;transition:width .45s ease;}
.bar.hp span{background:linear-gradient(90deg,#8e3f5c,#e0779a);box-shadow:0 0 12px rgba(224,119,154,.5);}
.bar.mp span{background:linear-gradient(90deg,#4a56a8,#9aa8ff);box-shadow:0 0 12px rgba(154,168,255,.5);}
#player-status{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;min-height:16px;}
#player-status span{font-size:9px;letter-spacing:.08em;padding:2px 7px;border-radius:2px;background:rgba(255,255,255,.07);color:var(--lilac);}

#battle-actions{display:flex;flex-direction:column;gap:8px;justify-content:center;}
#battle-actions .act-head{font-size:9px;letter-spacing:.34em;color:var(--gold);opacity:.7;}
.act-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;}
.act{
  position:relative;padding:10px 14px;text-align:left;
  border:1px solid rgba(185,160,232,.20);border-radius:3px;
  background:linear-gradient(180deg,rgba(43,27,77,.72),rgba(18,11,34,.85));
  transition:all .18s ease;overflow:hidden;
}
.act:hover:not(:disabled){
  border-color:rgba(243,217,154,.6);
  background:linear-gradient(180deg,rgba(75,46,122,.9),rgba(26,16,50,.92));
  box-shadow:0 0 22px rgba(140,107,196,.3);transform:translateY(-2px);
}
.act .a-name{font-family:var(--serif);font-size:14px;letter-spacing:.1em;color:#f0e7fb;}
.act .a-desc{font-size:10px;letter-spacing:.04em;color:var(--text-dim);margin-top:3px;line-height:1.45;}
.act .a-cost{position:absolute;right:11px;top:9px;font-size:10px;color:#9aa8ff;letter-spacing:.05em;}
.act:disabled{opacity:.35;cursor:not-allowed;}
.act.back{background:rgba(30,20,54,.6);}
.act.special{border-color:rgba(243,217,154,.4);background:linear-gradient(180deg,rgba(88,58,30,.5),rgba(30,18,40,.9));}
.act.special .a-name{color:var(--gold-2);}

#battle-banner{
  position:absolute;left:0;right:0;top:34%;z-index:30;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
#battle-banner.on{opacity:1;}
#battle-banner span{
  padding:10px 56px;font-family:var(--serif);font-size:clamp(20px,3vw,32px);letter-spacing:.5em;text-indent:.5em;
  color:#fff;background:linear-gradient(90deg,transparent,rgba(88,40,70,.85),transparent);
  text-shadow:0 0 30px rgba(255,150,180,.8);
  animation:bannerIn .5s cubic-bezier(.2,.9,.25,1) both;
}
#battle-banner.gold span{background:linear-gradient(90deg,transparent,rgba(88,68,30,.85),transparent);text-shadow:0 0 30px rgba(255,215,120,.85);}
@keyframes bannerIn{from{opacity:0;transform:scaleX(.6);letter-spacing:1.4em;}to{opacity:1;transform:none;}}

/* ═══════════════ 结局 ═══════════════ */
#ending-screen{background:#07040f;align-items:center;justify-content:center;}
#ending-bg{filter:brightness(.42) saturate(.9);}
.ending-inner{
  position:relative;z-index:5;width:min(720px,90vw);max-height:88vh;overflow-y:auto;
  padding:44px clamp(24px,5vw,52px);text-align:center;
  background:linear-gradient(180deg,rgba(11,7,22,.82),rgba(11,7,22,.94));
  border:1px solid var(--line);border-radius:3px;
  box-shadow:var(--shadow);
  animation:titleIn 1.4s ease both;
  scrollbar-width:thin;
}
.ending-eyebrow{font-family:var(--serif);font-size:10px;letter-spacing:.62em;text-indent:.62em;color:var(--gold);opacity:.8;}
#ending-title{font-family:var(--serif);font-size:clamp(30px,5vw,46px);font-weight:400;letter-spacing:.26em;text-indent:.26em;margin:14px 0 18px;color:#fbf4e6;text-shadow:0 0 40px rgba(185,160,232,.6);}
.ending-rule{width:110px;height:1px;margin:0 auto 24px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
#ending-text{font-family:var(--serif);font-size:15px;line-height:2.15;letter-spacing:.04em;color:#d7cbe8;text-align:left;white-space:pre-wrap;}
.ending-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:26px 0 8px;}
.ending-tags span{font-size:10px;letter-spacing:.14em;padding:4px 12px;border-radius:20px;border:1px solid rgba(216,178,106,.35);color:var(--gold-2);background:rgba(216,178,106,.07);}
.ending-tags span.bond{border-color:rgba(233,139,168,.4);color:var(--rose-2);background:rgba(233,139,168,.08);}
.ending-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px;}
.ending-buttons .btn-main{width:auto;min-width:170px;font-size:14px;padding:11px 20px;}

/* ═══════════════ 遮罩面板 ═══════════════ */
.overlay{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:rgba(4,2,10,.78);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.overlay.on{opacity:1;pointer-events:auto;}
.panel{
  width:min(420px,90vw);padding:30px 28px 24px;text-align:center;
  background:linear-gradient(180deg,rgba(31,19,58,.96),rgba(13,8,26,.98));
  border:1px solid var(--line);border-radius:3px;box-shadow:var(--shadow);
  transform:translateY(12px);transition:transform .35s cubic-bezier(.2,.9,.25,1);
}
.overlay.on .panel{transform:none;}
.panel.wide{width:min(720px,92vw);max-height:86vh;display:flex;flex-direction:column;}
.panel h3{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:.4em;text-indent:.4em;color:var(--gold-2);margin-bottom:20px;}
.menu-list{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}
.menu-item{
  padding:11px 16px;font-size:13px;letter-spacing:.18em;color:#e6dcf6;
  border:1px solid rgba(185,160,232,.16);border-radius:2px;
  background:rgba(43,27,77,.4);transition:all .2s ease;
}
.menu-item:hover{background:rgba(75,46,122,.72);border-color:var(--line);color:#fff;}
.menu-item.danger{color:#e39aac;border-color:rgba(192,96,127,.3);}
.menu-item.danger:hover{background:rgba(120,45,70,.5);}
.setting-note{font-size:11px;letter-spacing:.1em;color:var(--text-dim);margin-bottom:18px;}

#bonds-list{display:flex;flex-direction:column;gap:9px;overflow-y:auto;margin-bottom:18px;text-align:left;scrollbar-width:thin;}
.bond-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgba(185,160,232,.12);border-radius:3px;background:rgba(43,27,77,.28);}
.bond-av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;overflow:hidden;border:1px solid rgba(216,178,106,.35);background:#1a1030;}
.bond-av svg{width:100%;height:100%;}
.bond-meta{flex:1;min-width:0;}
.bond-name{font-family:var(--serif);font-size:13px;letter-spacing:.1em;color:#efe6fa;}
.bond-sub{font-size:9px;letter-spacing:.06em;color:var(--text-dim);margin-top:2px;}
.bond-pips{display:flex;gap:3px;margin-top:5px;}
.bond-pips i{width:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.10);}
.bond-pips i.on{background:linear-gradient(90deg,var(--rose),var(--rose-2));box-shadow:0 0 8px rgba(232,139,168,.6);}
.bond-empty{font-size:12px;color:var(--text-dim);letter-spacing:.1em;text-align:center;padding:18px 0;}

#gallery-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px;overflow-y:auto;text-align:left;margin-bottom:18px;scrollbar-width:thin;}
.gal-item{padding:12px 14px;border:1px solid rgba(185,160,232,.14);border-radius:3px;background:rgba(43,27,77,.25);}
.gal-item .g-t{font-family:var(--serif);font-size:13px;letter-spacing:.1em;color:#e8ddf7;}
.gal-item .g-s{font-size:9px;letter-spacing:.06em;color:var(--text-dim);margin-top:4px;line-height:1.5;}
.gal-item.locked{opacity:.4;}
.gal-item.locked .g-t{color:var(--text-dim);}
.gal-item.good{border-color:rgba(216,178,106,.4);background:rgba(216,178,106,.06);}
.gal-item.good .g-t{color:var(--gold-2);}

/* toast */
#toasts{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.toast{
  padding:8px 22px;font-family:var(--serif);font-size:12px;letter-spacing:.16em;
  color:var(--gold-2);background:rgba(16,10,32,.92);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  animation:toastIn .4s ease both, toastOut .5s ease 2.1s both;
}
.toast.heal{color:#a6e3b8;border-color:rgba(120,220,160,.35);}
.toast.rose{color:var(--rose-2);border-color:rgba(233,139,168,.4);}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px);}}

#fade{position:fixed;inset:0;background:#05030b;opacity:0;pointer-events:none;transition:opacity .5s ease;z-index:300;}
#fade.on{opacity:1;}

/* ═══════════════ 响应式 ═══════════════ */
@media (max-width:820px){
  #battle-bottom{grid-template-columns:1fr;gap:10px;padding-bottom:14px;}
  #player-panel{display:flex;align-items:center;gap:12px;padding:8px 12px;}
  .pp-head{margin-bottom:0;flex:0 0 auto;}
  .pp-bars{flex:1;}
  #player-status{margin-top:0;flex:0 0 auto;}
  .act-grid{grid-template-columns:repeat(2,1fr);}
  .act{padding:8px 11px;}
  .act .a-name{font-size:12px;}
  .act .a-desc{font-size:9px;}
  #battle-log{max-width:100%;height:56px;font-size:11px;}
  #battle-top{flex-wrap:wrap;}
  #portrait-wrap{width:min(38vh,260px);bottom:clamp(130px,24vh,220px);}
  #choices{max-height:38vh;}
  .choice{font-size:13.5px;padding:11px 16px 11px 42px;}
  /* 手机上把立绘抬高，让她的脸露出在菜单之上，而不是被按钮压住 */
  .title-witch{height:min(66vh,560px);right:auto;left:50%;top:-4%;bottom:auto;transform:translateX(-50%);opacity:.62;animation:witchFloatM 7s ease-in-out infinite;-webkit-mask-image:radial-gradient(ellipse 62% 68% at 50% 44%,#000 35%,transparent 78%);mask-image:radial-gradient(ellipse 62% 68% at 50% 44%,#000 35%,transparent 78%);}
  @keyframes witchFloatM{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,-12px);}}
  .title-veil{background:linear-gradient(0deg,rgba(7,4,15,.94) 0%,rgba(7,4,15,.55) 45%,rgba(7,4,15,.35) 100%);}
  .title-content{left:50%;top:auto;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(560px,88vw);text-align:center;animation:none;display:flex;flex-direction:column;align-items:center;}
  .title-menu{align-items:center;}
  .title-main{letter-spacing:.22em;text-indent:.22em;}
  /* 手机上压缩标题节奏，菜单锚定底部 */
  .title-main{font-size:clamp(52px,15vw,76px);}
  .title-sub{margin:14px 0 22px;}
  .title-menu{gap:8px;}
  .title-foot{margin-top:18px;margin-bottom:22px;}
  .title-credit{bottom:calc(10px + env(safe-area-inset-bottom,0px));right:14px;}
}
@media (max-width:520px){
  #moon-phase{padding:6px 12px 6px 8px;gap:8px;}
  .mp-icon{width:26px;height:26px;}
  .mp-text b{font-size:11px;}
  #battle-log{font-size:10px;height:44px;}
  #dialogue{padding:24px 18px 32px;min-height:clamp(190px,30vh,260px);}
  #text{line-height:1.95;}
  .title-content{padding:26px 20px 22px;}
}
/* ── 手机 / 微信内置浏览器 ── */
@media (max-width:820px){
  /* 刘海屏与微信底部工具栏留白 */
  #hud{top:calc(14px + env(safe-area-inset-top,0px));right:calc(14px + env(safe-area-inset-right,0px));}
  #dialogue{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px));}
  #battle-bottom{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));}
  #choices{max-height:42vh;-webkit-overflow-scrolling:touch;}
  /* 手机上保证可点区域不小于 44px */
  .hud-btn{min-height:44px;min-width:44px;}
  .choice{min-height:52px;padding-top:15px;padding-bottom:15px;}
  .act{min-height:52px;}
  .menu-item,.btn-main,.btn-ghost{min-height:48px;}
  /* 微信里 -webkit-backdrop-filter 之外再兜底一层底色，避免毛玻璃失效后面板看不见 */
  .panel{background:#160e2b;}
}
/* 矮屏手机（如 360×640）：进一步压缩标题画面，避免底部按钮被裁 */
@media (max-width:820px) and (max-height:720px){
  .title-content{bottom:calc(12px + env(safe-area-inset-bottom,0px));}
  .title-witch{height:min(58vh,440px);}
  .title-eyebrow{margin-bottom:6px;font-size:10px;}
  .title-main{font-size:clamp(46px,13vw,64px);}
  .title-en{margin-top:4px;font-size:10px;}
  .title-sub{margin:8px 0 14px;font-size:12px;}
  .title-menu{gap:6px;}
  .btn-main{padding:10px 18px;font-size:14px;}
  .title-foot{margin-top:10px;margin-bottom:14px;font-size:9px;}
  .title-credit{font-size:9px;}
  #choices{max-height:34vh;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}