.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:-3%; height:101%; object-position:right bottom; }
.campaign-story__scene[data-character='character_c'] .campaign-story__portrait img { left:-7%; height:99%; }
.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-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 { height:100%; }
  .campaign-story__scene[data-character='character_c'] .campaign-story__portrait img { height:98%; }
  .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:-8%; height:104%; }
  .campaign-story__scene[data-character='character_c'] .campaign-story__portrait img { left:-10%; height:102%; }
  .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; }