.campaign-picker { display:flex; flex-direction:column; min-height:0; height:100%; margin:0; }
.campaign-head { display:flex; align-items:center; justify-content:space-between; }
.campaign-head button { color:inherit; background:transparent; border:1px solid #a99068; border-radius:6px; padding:3px 9px; }
.campaign-picker [data-status] { min-height:32px; font-size:11px; line-height:1.45; margin:5px 0; }
.campaign-levels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; min-height:0; overflow:auto; padding:2px; scrollbar-width:thin; scrollbar-color:#927a61 transparent; }
.campaign-card { display:flex; flex-direction:column; gap:3px; min-height:82px; padding:8px; text-align:left; border:1px solid #b0a58d; border-radius:6px; background:#fff9ed; color:#3d3b45; }
.campaign-card[aria-pressed="true"] { border:2px solid #aa7834; padding:7px; background:#fff0c9; }
.campaign-card[data-state="locked"], .campaign-card[data-state="closed"] { background:#e8e4de; color:#706c68; }
.campaign-card strong { font-size:14px; }
.campaign-card span, .campaign-card small { font-size:10px; line-height:1.4; }
.campaign-card small:not(.campaign-reward) { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.campaign-reward { color:#9a521d; }
.original-party .campaign-card[aria-pressed="true"] { color:#332718; background:#ffe6a7; }
.original-party #original-confirm { position:static; box-shadow:none; }
.campaign-picker [data-replay] { background:transparent; border:1px solid #a99068; border-radius:6px; color:inherit; margin-top:8px; padding:6px; }
.original-choices [data-locked="true"] { opacity:.6; filter:grayscale(.65); }
.campaign-story {
  width:min(440px,100vw);
  height:min(780px,100dvh);
  max-width:none;
  max-height:100dvh;
  margin:auto;
  overflow:hidden;
  border:1px solid rgb(244 219 166 / 72%);
  border-radius:14px;
  background:#323b78;
  color:#303249;
  box-shadow:0 24px 80px rgb(12 9 35 / 55%);
}
.campaign-story[open] { display:block; }
.campaign-story::backdrop { background:rgb(21 18 48 / 46%); backdrop-filter:blur(2px); }
.campaign-story__scene {
  --story-accent:#e66d62;
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  isolation:isolate;
  background:#5262ad url('../assets/moon2/bg-page-night.jpg') center / cover no-repeat;
}
.campaign-story__scene::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgb(17 24 75 / 8%) 0%,rgb(31 34 91 / 5%) 45%,rgb(27 20 66 / 38%) 100%);
}
.campaign-story[data-mode='outro'] .campaign-story__scene::before {
  background:linear-gradient(180deg,rgb(255 225 157 / 8%) 0%,rgb(53 64 137 / 3%) 42%,rgb(55 30 74 / 42%) 100%);
}
.campaign-story[data-mode='outro'] .campaign-story__header [data-position] { border-color:rgb(255 224 154 / 76%); background:rgb(87 54 95 / 52%); }
.campaign-story__header {
  position:absolute;
  z-index:6;
  left:14px;
  right:52px;
  top:max(12px,env(safe-area-inset-top));
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff6dc;
  text-shadow:0 2px 5px rgb(23 17 69 / 75%);
}
.campaign-story__header [data-title] { overflow:hidden; font:700 18px/1.2 KaiTi,'STKaiti',serif; text-overflow:ellipsis; white-space:nowrap; }
.campaign-story__header [data-position] { flex:0 0 auto; padding:2px 7px; border:1px solid rgb(255 239 200 / 55%); border-radius:999px; background:rgb(34 31 82 / 42%); font-size:10px; }
.campaign-story__close {
  position:absolute;
  z-index:8;
  right:10px;
  top:max(8px,env(safe-area-inset-top));
  width:34px;
  height:34px;
  padding:0;
  border:1px solid rgb(255 238 198 / 55%);
  border-radius:50%;
  background:rgb(46 39 91 / 48%);
  color:#fff7e2;
  font:25px/30px Arial,sans-serif;
  cursor:pointer;
}
.campaign-story__portrait {
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  top:58px;
  bottom:142px;
  overflow:hidden;
  pointer-events:none;
}
.campaign-story__portrait img {
  position:absolute;
  left:-10%;
  bottom:-1%;
  width:auto;
  height:98%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  object-position:left bottom;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 88%,rgb(0 0 0 / 94%) 91%,rgb(0 0 0 / 50%) 96%,transparent 99.5%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 88%,rgb(0 0 0 / 94%) 91%,rgb(0 0 0 / 50%) 96%,transparent 99.5%,transparent 100%);
  filter:drop-shadow(0 14px 16px rgb(18 14 54 / 38%));
  animation:campaign-story-enter 260ms ease-out both;
}
.campaign-story__scene[data-character='character_b'] .campaign-story__portrait img { left:auto; right:0; bottom:2.25%; height:109.5%; object-position:right bottom; }
.campaign-story__scene[data-character='character_c'] .campaign-story__portrait img { left:-8%; bottom:3%; height:100%; }
.campaign-story__scene[data-phase='outro'] .campaign-story__portrait img { filter:drop-shadow(0 14px 18px rgb(18 14 54 / 42%)) drop-shadow(0 0 18px rgb(255 224 161 / 20%)); }
.campaign-story__choices {
  position:absolute;
  z-index:5;
  left:18px;
  right:18px;
  bottom:190px;
  display:grid;
  gap:8px;
}
.campaign-story__choices[hidden] { display:none; }
.campaign-story__choices button {
  position:relative;
  min-height:46px;
  padding:9px 48px 9px 16px;
  border:1px solid rgb(238 218 173 / 78%);
  border-radius:8px;
  background:linear-gradient(90deg,rgb(48 44 103 / 92%),rgb(72 71 139 / 88%));
  color:#fff8e5;
  font:14px/1.45 inherit;
  text-align:left;
  text-shadow:0 1px 2px rgb(17 14 50 / 72%);
  box-shadow:0 6px 18px rgb(21 17 60 / 28%);
  cursor:pointer;
}
.campaign-story__choices button::before { content:'◆'; margin-right:8px; color:#f7d58d; font-size:10px; }
.campaign-story__choices button:hover,.campaign-story__choices button:focus-visible { border-color:#fff0bd; background:linear-gradient(90deg,rgb(72 54 112 / 96%),rgb(92 83 153 / 94%)); outline:2px solid rgb(255 239 190 / 48%); outline-offset:2px; }
.campaign-story__choices button:disabled { opacity:.65; cursor:default; }
.campaign-story__choices small { position:absolute; right:10px; top:50%; color:#f4d79b; font-size:9px; transform:translateY(-50%); }
.campaign-story__copy {
  position:absolute;
  z-index:4;
  left:12px;
  right:12px;
  bottom:max(12px,env(safe-area-inset-bottom));
  min-height:150px;
  padding:38px 18px 42px;
  border:1px solid rgb(255 255 255 / 82%);
  border-radius:9px;
  background:linear-gradient(135deg,rgb(255 255 255 / 94%),rgb(241 246 255 / 88%));
  box-shadow:0 12px 30px rgb(24 20 61 / 34%),inset 0 0 0 1px rgb(111 127 180 / 16%);
  backdrop-filter:blur(8px);
}
.campaign-story__copy::after { content:''; position:absolute; right:10px; bottom:11px; width:7px; height:7px; border-right:2px solid var(--story-accent); border-bottom:2px solid var(--story-accent); transform:rotate(45deg); opacity:.8; }
.campaign-story__copy [data-speaker] {
  position:absolute;
  left:14px;
  top:-23px;
  min-width:116px;
  margin:0;
  padding:8px 18px 7px;
  border:1px solid rgb(255 240 203 / 88%);
  border-radius:5px 16px 5px 16px;
  background:linear-gradient(135deg,var(--story-accent),color-mix(in srgb,var(--story-accent),#44355f 38%));
  color:#fff9e9;
  font:700 17px/1.1 KaiTi,'STKaiti',serif;
  letter-spacing:1px;
  text-align:center;
  text-shadow:0 1px 2px rgb(44 25 55 / 55%);
  box-shadow:0 5px 12px rgb(31 21 68 / 22%);
}
.campaign-story__copy [data-line] { min-height:66px; margin:0; color:#3f435d; font-size:15px; line-height:1.75; text-align:left; }
.campaign-story__copy [data-branch-note] { position:absolute; left:18px; bottom:14px; color:#777d96; font-size:10px; }
.campaign-story__copy [data-error] { position:absolute; left:18px; right:112px; bottom:11px; min-height:16px; margin:0; color:#a34435; font-size:11px; line-height:1.35; }
.campaign-story__copy[data-can-back='true'] [data-error] { left:112px; }
.campaign-story__copy [data-back] { position:absolute; left:17px; bottom:10px; min-width:82px; min-height:32px; padding:5px 13px; border-color:rgb(117 123 156 / 55%); background:rgb(236 239 249 / 88%); color:#525a78; }
.campaign-story__copy [data-back][hidden] { display:none; }
.campaign-story__copy [data-next] { position:absolute; right:17px; bottom:10px; min-width:88px; min-height:32px; padding:5px 13px; border-color:color-mix(in srgb,var(--story-accent),#80684f 35%); background:color-mix(in srgb,var(--story-accent),#536a79 45%); color:#fff9e8; }
.campaign-story__copy [data-next][hidden] { display:none; }
@keyframes campaign-story-enter { from { opacity:0; transform:translateX(-12px) scale(.985); } to { opacity:1; transform:none; } }
@media(max-width:620px) {
  .campaign-picker { height:auto; }
  .campaign-picker [data-status] { min-height:0; }
  .campaign-levels { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .campaign-card { min-height:82px; }
}
@media(max-width:440px) {
  .campaign-story { width:100vw; height:100dvh; border:0; border-radius:0; }
  .campaign-story__copy { left:9px; right:9px; bottom:max(9px,env(safe-area-inset-bottom)); }
  .campaign-story__choices { left:13px; right:13px; }
}
@media(max-height:640px) {
  .campaign-story__portrait { top:45px; bottom:126px; }
  .campaign-story__portrait img { height:98%; }
  .campaign-story__scene[data-character='character_b'] .campaign-story__portrait img { bottom:1%; height:112%; }
  .campaign-story__scene[data-character='character_c'] .campaign-story__portrait img { bottom:1%; height:103%; }
  .campaign-story__choices { bottom:162px; gap:5px; }
  .campaign-story__choices button { min-height:38px; padding-block:6px; font-size:12px; }
  .campaign-story__copy { min-height:126px; padding:32px 14px 36px; }
  .campaign-story__copy [data-speaker] { top:-19px; padding:6px 14px; font-size:15px; }
  .campaign-story__copy [data-line] { min-height:53px; font-size:13px; line-height:1.6; }
}
@media(max-width:360px) {
  .campaign-story__portrait img { left:-14%; height:101%; }
  .campaign-story__scene[data-character='character_b'] .campaign-story__portrait img { right:0; bottom:.8%; height:109.5%; }
  .campaign-story__scene[data-character='character_c'] .campaign-story__portrait img { left:-9%; bottom:1%; height:103%; }
  .campaign-story__copy { padding-inline:13px; }
}
@media(prefers-reduced-motion:reduce) { .campaign-story__portrait img { animation:none; } }
.bubble-reduced-motion .campaign-story__portrait img { animation:none; }

/* Visual novel stage: a persistent pair, separate evidence, and a readable text panel. */
.campaign-story { background:#182038; }
.campaign-story__background { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.campaign-story__background[hidden] { display:none; }
.campaign-story__header { gap:6px; }
.campaign-story__header [data-title] { font-size:16px; }
.campaign-story__header [data-instant] { margin-left:auto; flex-shrink:0; border:1px solid #bdaf92; border-radius:5px; background:#19223bbf; color:#eae0c8; font-size:11px; padding:6px; }
.campaign-story__header [data-instant][aria-pressed='true'] { background:#e2d3af; color:#282c40; }
.campaign-story__header [data-story-sound] { flex-shrink:0; padding:6px 5px; border:1px solid #bdaf92; border-radius:5px; background:#19223bbf; color:#eae0c8; font-size:11px; }
.campaign-story__header [data-position] { padding-inline:4px; }
.campaign-story__actors { position:absolute; inset:0; pointer-events:none; }
.campaign-story__actor { position:absolute; top:32%; width:46%; height:31%; overflow:hidden; border-radius:18px; opacity:1; filter:brightness(.78) saturate(.85); transition:filter 160ms; mask-image:none; }
.campaign-story__actor[data-slot='left'] { left:2%; }
.campaign-story__actor[data-slot='right'] { right:2%; }
.campaign-story__actor[data-speaking='true'] { filter:brightness(1) saturate(1); z-index:2; }
.campaign-story__actor img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.campaign-story__actor span { display:none; }
.campaign-story__actor[hidden] { display:none; }
.campaign-story__clue { position:absolute; z-index:3; top:62px; left:18px; right:18px; margin:0; padding-top:8px; border:1px solid #d0bd9180; border-radius:12px; background:#1b243df2; overflow:hidden; box-shadow:0 12px 32px #10142660; }
.campaign-story__clue[hidden] { display:none; }
.campaign-story__clue img { width:100%; max-height:148px; object-fit:contain; display:block; }
.campaign-story__clue figcaption { text-align:center; color:#d7c8a4; font-size:11px; padding:5px 10px; letter-spacing:2px; }
.campaign-story__reading { position:absolute; z-index:5; left:12px; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:30px; max-height:53%; }
.campaign-story__reading .campaign-story__choices { position:static; flex-shrink:0; gap:7px; }
.campaign-story__reading .campaign-story__choices button { min-height:44px; font-size:14px; padding:10px 42px 10px 12px; background:linear-gradient(90deg,#26314bf5,#39415af5); }
.campaign-story__reading .campaign-story__copy { position:relative; inset:auto; min-height:174px; padding:25px 17px 50px; flex-shrink:1; background:linear-gradient(130deg,#fffaf0fa,#e9e8e2f5); border-color:#dcd0b2; }
.campaign-story__copy [data-line] { font-size:15px; line-height:1.75; min-height:53px; }
.campaign-story__copy [data-narration] { margin:0 0 10px; padding-bottom:9px; border-bottom:1px solid #807a6e38; color:#717074; font-size:12px; line-height:1.65; }
.campaign-story__copy [data-narration][hidden] { display:none; }
.campaign-story__copy [data-speaker] { font-size:16px; min-width:92px; padding:7px 12px; }
.campaign-story__copy [data-back],.campaign-story__copy [data-next] { min-height:36px; }
.campaign-picker [data-replay-outro] { border:1px solid #a99068; border-radius:6px; background:transparent; color:inherit; margin-top:6px; padding:6px; }
@media(max-height:700px) {
  .campaign-story__actor { top:32%; height:30%; }
  .campaign-story__clue { top:52px; left:26px; right:26px; }
  .campaign-story__clue img { max-height:95px; }
  .campaign-story__clue figcaption { padding:3px; font-size:10px; }
  .campaign-story__reading { gap:25px; bottom:max(8px,env(safe-area-inset-bottom)); }
  .campaign-story__reading .campaign-story__copy { min-height:157px; padding:22px 14px 47px; }
  .campaign-story__copy [data-line] { font-size:14px; line-height:1.65; }
  .campaign-story__copy [data-narration] { font-size:12px; margin-bottom:7px; padding-bottom:7px; }
}
@media(max-width:360px) {
  .campaign-story__header [data-title] { font-size:15px; }
  .campaign-story__reading { left:9px; right:9px; }
}
@media(prefers-reduced-motion:reduce) { .campaign-story__actor { transition:none; } }
.bubble-reduced-motion .campaign-story__actor { transition:none; }
@media(max-width:360px) {
  .campaign-story__header { right:43px; left:9px; gap:4px; }
  .campaign-story__header [data-title] { font-size:14px; }
  .campaign-story__header [data-instant] { padding:5px 4px; margin-left:auto; }
  .campaign-story__header [data-story-sound] { padding:5px 4px; }
  .campaign-story__actor { height:27%; border-radius:12px; }
}

/* 五节点选择与真实战斗 HUD 上的首章教学提示。教学层只占 boss-stage
   顶部留白，不改变棋盘、炮台或技能按钮的尺寸和坐标。 */
.campaign-nodes { display:flex; flex-direction:column; min-height:0; height:100%; gap:7px; }
.campaign-nodes-dialog { width:min(calc(100vw - 24px), 430px); height:min(88dvh, 740px); max-height:min(88dvh, 740px); padding:15px; overflow:hidden; border:1px solid #d2bc91; border-radius:10px; background:#f6f0e4; color:#3d3b45; box-shadow:0 20px 64px rgb(20 16 45 / 34%); }
.campaign-nodes-dialog::backdrop { background:rgb(21 18 48 / 48%); backdrop-filter:blur(2px); }
.campaign-nodes__head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.campaign-nodes__head strong { font-size:15px; }
.campaign-nodes__head small { color:#766d66; font-size:10px; }
.campaign-nodes__progress { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; height:5px; }
.campaign-nodes__progress i { display:block; border-radius:99px; background:#d6d0c5; }
.campaign-nodes__progress i[data-state='done'] { background:#b1843e; }
.campaign-nodes__progress i[data-state='current'] { background:#e4b95e; box-shadow:0 0 0 1px #9b6e2b; }
.campaign-nodes__list { display:flex; flex-direction:column; gap:6px; min-height:0; overflow:auto; padding:2px; scrollbar-width:thin; }
.campaign-node-card { display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:58px; padding:7px 9px; border:1px solid #b0a58d; border-radius:7px; background:#fff9ed; color:#3d3b45; text-align:left; }
.campaign-node-card[aria-pressed='true'] { border:2px solid #aa7834; padding:6px 8px; background:#fff0c9; }
.campaign-node-card[data-state='locked'] { background:#e8e4de; color:#77716c; }
.campaign-node-card[data-state='done'] { background:#f4f0e5; }
.campaign-node-card__index { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:#e7ddc8; color:#705121; font-weight:700; font-size:12px; }
.campaign-node-card[data-state='done'] .campaign-node-card__index { background:#cda75d; color:#fffaf0; }
.campaign-node-card__copy { display:flex; min-width:0; flex-direction:column; gap:2px; }
.campaign-node-card__copy strong { overflow:hidden; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.campaign-node-card__copy small { overflow:hidden; color:#77716c; font-size:10px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.campaign-node-card__state { color:#8d6022; font-size:10px; white-space:nowrap; }
.campaign-nodes__detail { margin-top:auto; padding:9px 10px; border:1px solid #d5c5a7; border-radius:7px; background:#fffaf0; }
.campaign-nodes__detail strong { display:block; margin-bottom:3px; font-size:13px; }
.campaign-nodes__detail p { margin:0; color:#605b58; font-size:11px; line-height:1.45; }
.campaign-nodes__start { width:100%; min-height:42px; margin-top:6px; }
.campaign-nodes__start[disabled] { opacity:.58; }
.campaign-picker[data-view='nodes'] .campaign-head,
.campaign-picker[data-view='nodes'] > [data-status],
.campaign-picker[data-view='nodes'] > .campaign-levels,
.campaign-picker[data-view='nodes'] > [data-replay],
.campaign-picker[data-view='nodes'] > [data-replay-outro],
.campaign-picker[data-view='nodes'] > [data-resume] { display:none; }
.campaign-picker[data-view='nodes'] { min-height:0; }
.campaign-nodes__back { align-self:flex-start; border:0; background:transparent; color:#7b5b2c; font-size:11px; padding:3px 0; }

.campaign-tutorial { position:absolute; z-index:20; top:7px; left:12px; right:12px; max-width:390px; margin:auto; padding:8px 10px 9px; border:1px solid rgb(232 204 144 / 88%); border-radius:9px; background:linear-gradient(135deg,rgb(255 250 233 / 96%),rgb(244 237 214 / 93%)); color:#41384a; box-shadow:0 8px 22px rgb(27 21 57 / 22%); pointer-events:auto; }
.campaign-tutorial__head { display:flex; align-items:center; gap:6px; }
.campaign-tutorial__head span { flex:0 0 auto; padding:2px 6px; border-radius:99px; background:#c99a4c; color:#fff9e9; font-size:10px; }
.campaign-tutorial__head strong { flex:1; font-size:12px; }
.campaign-tutorial__head button,.campaign-tutorial__open { border:1px solid #b29a70; border-radius:5px; background:#fffaf0; color:#71582d; font-size:10px; padding:3px 7px; }
.campaign-tutorial p { margin:5px 0 0; font-size:12px; line-height:1.45; }
.campaign-tutorial[data-collapsed='true'] { width:auto; right:auto; padding:5px 7px; }
.campaign-tutorial[data-collapsed='true'] .campaign-tutorial__head strong,.campaign-tutorial[data-collapsed='true'] p { display:none; }
.campaign-tutorial__open { display:block; margin-top:0; }
.campaign-tutorial__open[hidden] { display:none; }
@media(max-height:700px) { .campaign-tutorial { top:4px; padding:6px 8px 7px; } .campaign-tutorial p { margin-top:3px; font-size:11px; } }
@media(max-width:360px) { .campaign-tutorial { left:7px; right:7px; } }