/* Author: goodjava@qq.com */
.stage:has(.card-choice-scene) { width:100vw; height:100dvh; }
.card-choice-scene { position:absolute; inset:0; background:#dce9df url('/art/scenes/qinglan-pavilion.webp') center/cover; color:#304e42; }
.choice-scroll { height:100%; overflow:auto; box-sizing:border-box; padding:76px 5vw 28px; scrollbar-color:#8b987d #e9eadb; }
.choice-paper { position:relative; box-sizing:border-box; width:min(1500px,100%); margin:0 auto; padding:24px clamp(20px,3vw,56px) 26px; border:4px double #bb9f66; border-radius:46px 70px 46px 70px; background:radial-gradient(ellipse at 12% 0,#fffdf4e8,transparent 60%),linear-gradient(120deg,#f8f1dfed,#ede3caed); box-shadow:0 18px 65px #2e514429,inset 0 0 0 8px #fffaf044; outline:1px solid #d5bd87; outline-offset:-12px; }
.choice-paper::before,.choice-paper::after { content:'❧'; position:absolute; top:19px; left:22px; font:34px Georgia,serif; color:#b89b63; pointer-events:none; }
.choice-paper::after { left:auto; right:22px; transform:scaleX(-1); }
.choice-heading { text-align:center; }
.choice-heading h1 { margin:0; color:#304b3e; font-size:clamp(32px,3.2vw,54px); font-weight:600; letter-spacing:.15em; text-shadow:0 2px #fff9; }
.choice-heading p { margin:7px 0; font-size:clamp(13px,1.1vw,17px); letter-spacing:.1em; line-height:1.6; }
.choice-heading .choice-eyebrow,.choice-eyebrow { font-size:12px; letter-spacing:.18em; color:#8a7958; }
.choice-flourish { display:block; color:#b79b66; font:14px/1.3 Georgia,serif; letter-spacing:.18em; margin:4px 0; }
.choice-rewards { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin:14px 0 22px; }
.choice-rewards span { border:1px solid #c3ab77; background:#f8efd9; border-radius:24px; padding:6px 24px; box-shadow:inset 0 0 0 3px #fff9; font-size:15px; color:#827047; }
.choice-rewards b { margin-left:8px; color:#385d4b; font:600 20px Georgia,serif; }
.choice-loot { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,4vw,72px); max-width:1060px; margin:20px auto 24px; align-items:start; }
.choice-reward-card { position:relative; min-width:0; }
.choice-swipe-hint { display:none; }
.choice-paper .card-slot { --card-width:100%; --card-height:auto; width:100%; height:auto; min-width:0; }
.choice-paper .face { min-height:360px; padding:18px 20px 46px; border:0; border-radius:16px; background:#f7efd9; box-shadow:0 8px 16px #30463833; overflow:hidden; }
.choice-paper .face > .choice-card-art { position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:1; pointer-events:none; }
.choice-paper .face > :not(.choice-card-art) { position:relative; z-index:1; }
.choice-paper .face .card-top { height:30px; }
.choice-paper .face .cost { width:34px; height:34px; background:#3c6958; font-size:24px; color:#fff5dd; }
.choice-paper .face .card-type { font-size:12px; }
.choice-paper .face .card-picture { height:clamp(124px,12vw,205px); margin-top:10px; border-color:#bba26e; }
.choice-paper .face .art { opacity:1; }
.choice-paper .face .name { font-size:clamp(20px,1.7vw,29px); margin:10px 0 8px; padding-bottom:9px; line-height:1.3; }
.choice-paper .face .desc { min-height:52px; flex:none; font-size:clamp(14px,1.12vw,18px); line-height:1.65; }
.choice-paper .face .card-foot { font-size:11px; margin-top:10px; line-height:1.4; }
.choice-paper .card-inspect { bottom:10px; left:50%; right:auto; width:74px; height:30px; transform:translateX(-50%); border-radius:18px; color:#3d6755; background:#faf4e5; font-size:13px; }
.choice-reward-card.is-selected .face,.choice-thumbnail.is-selected .face { outline:2px solid #6fae90; outline-offset:3px; box-shadow:0 0 0 6px #d8f2dc88,0 0 28px #5fba9677,0 10px 22px #30463833; }
.choice-selected { position:absolute; right:-8px; top:-12px; z-index:4; padding:6px 18px; background:#3d6c55; color:#fff8df; border:1px solid #d2b979; border-radius:3px 12px 3px 12px; font-size:14px; transform:rotate(5deg); }
.choice-footer { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px 24px; margin-top:18px; text-align:center; }
.choice-footer p { flex-basis:100%; order:3; margin:0; color:#827455; font-size:13px; line-height:1.65; }
.choice-button { min-height:44px; padding:9px 24px; border:1px solid #b59b67; border-radius:12px 18px 12px 18px; background:#faf4e5; color:#466551; font-size:16px; line-height:1.5; box-shadow:inset 0 0 0 3px #fff8; }
.choice-primary { min-width:205px; padding:10px 32px; color:#fff4d5; background:linear-gradient(135deg,#527e65,#285743); border:4px double #d1b475; box-shadow:inset 0 0 0 2px #426b55,0 4px 7px #2c473b22; font-size:21px; letter-spacing:.1em; }
.choice-button:hover:not(:disabled) { filter:brightness(1.08); }
.choice-button:disabled { opacity:.45; cursor:not-allowed; }
.choice-relic { margin:0 auto; text-align:center; font-size:14px; color:#7b6038; }
.choice-upgrade-layout { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.5fr); gap:clamp(20px,3vw,54px); margin-top:16px; }
.choice-library { min-width:0; border-right:1px solid #c5b58788; padding-right:22px; }
.choice-tabs { display:flex; gap:10px; }
.choice-tabs .choice-button { flex:1; min-width:0; padding:8px 10px; font-size:16px; letter-spacing:0; }
.choice-hint { font-size:12px; line-height:1.7; color:#8c7d5c; text-align:center; }
.choice-library-heading { display:flex; justify-content:space-between; align-items:center; margin:18px 0 12px; }
.choice-library-heading h2 { font-size:17px; font-weight:500; margin:0; }
.choice-library-heading > span { font-size:12px; color:#8c7d5c; }
.choice-candidates { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 12px; max-height:440px; overflow-y:auto; padding:7px 7px 12px; scrollbar-width:thin; scrollbar-color:#9caa8a #e9e0c9; }
.choice-thumbnail { min-width:0; position:relative; }
.choice-thumbnail .face { min-height:0; padding:9px 9px 38px; border-radius:8px; }
.choice-thumbnail .card-inspect { width:48px; height:28px; bottom:5px; font-size:11px; }
.choice-thumbnail .face .card-top { height:18px; }
.choice-thumbnail .face .cost { width:22px; height:22px; font-size:15px; }
.choice-thumbnail .face .card-type { display:none; }
.choice-thumbnail .face .card-picture { height:92px; margin-top:6px; }
.choice-thumbnail .face .name { font-size:14px; margin:5px 0 0; padding:0; border:0; }
.choice-thumbnail .face .desc,.choice-thumbnail .face .card-foot { display:none; }
.choice-thumbnail small { display:block; text-align:center; color:#8b7660; font-size:11px; line-height:1.4; margin-top:5px; }
.choice-thumbnail .face.dim { filter:saturate(.35); opacity:.65; }
.choice-comparison { display:grid; grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr); gap:12px; align-items:center; max-width:700px; margin:auto; }
.choice-comparison h2 { text-align:center; font-size:21px; letter-spacing:.15em; margin:0 0 14px; font-weight:500; }
.choice-comparison .face { cursor:default; }
.choice-arrow { font-size:40px; color:#8aaf88; text-align:center; }
.choice-after { position:relative; }
.choice-after .face { box-shadow:0 0 22px #76a98a30,0 8px 16px #30463833; }
.choice-changes { margin:18px auto 0; max-width:700px; display:grid; gap:7px; }
.choice-changes > div { display:flex; justify-content:center; align-items:baseline; gap:12px; padding:8px 14px; border-radius:24px; background:linear-gradient(90deg,transparent,#c6d9bc77,transparent); }
.choice-changes del { text-decoration:none; color:#82775b; }
.choice-changes strong { color:#3a7055; }
.choice-changes .choice-effect-change { display:grid; grid-template-columns:64px minmax(0,1fr) 16px minmax(0,1fr); gap:8px; font-size:12px; line-height:1.7; background:none; padding:0; border-radius:0; }
.choice-effect-change > :first-child { color:#8c7d5c; }
.choice-mend,.choice-empty { min-height:390px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:20px; }
.choice-mend h2,.choice-empty h2 { font-size:27px; font-weight:500; }
.choice-mend p,.choice-empty p { line-height:1.8; margin:8px 0; }
.choice-meditation { display:grid; place-items:center; width:110px; height:110px; font-size:54px; color:#557e65; border:4px double #bba877; border-radius:50%; background:radial-gradient(#faf8de,#ccddbb77); box-shadow:0 0 0 10px #a9c3a333; margin-bottom:16px; }
.choice-empty > span { font-size:65px; color:#9faf84; }
.stage:has(.card-choice-scene) > .game-nav { background:linear-gradient(#294e43bb,transparent); border:0; box-shadow:none; height:60px; }
.stage:has(.card-choice-scene) > .hero-resource-strip { display:none; }
.stage[aria-busy=true] .choice-button,.stage[aria-busy=true] .choice-paper .face { pointer-events:none; opacity:.65; }
@media (min-width:1600px) and (min-height:900px) {
  .choice-scroll { padding-top:90px; }
  .choice-paper { padding-top:34px; padding-bottom:34px; }
  .choice-loot { margin-top:30px; margin-bottom:30px; }
  .choice-paper .face { min-height:430px; }
  .choice-thumbnail .face { min-height:0; }
  .choice-candidates { max-height:510px; }
}
@media (max-width:1050px) {
  .choice-scroll { padding:72px 20px 20px; }
  .choice-paper { padding:22px; border-radius:28px 42px; }
  .choice-upgrade-layout { grid-template-columns:minmax(220px,.8fr) minmax(0,1.5fr); gap:20px; }
  .choice-library { padding-right:14px; }
  .choice-candidates { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .choice-paper .face { min-height:330px; padding:12px 14px 42px; }
  .choice-thumbnail .face { min-height:0; padding:9px 9px 38px; }
  .choice-paper .face .name { font-size:19px; }
  .choice-thumbnail .face .name { font-size:13px; }
  .choice-comparison { gap:7px; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); }
  .choice-arrow { font-size:27px; }
}
@media (max-width:700px) {
  .choice-scroll { padding:80px 10px 18px; }
  .choice-paper { padding:22px 14px; border-radius:22px 34px; outline-offset:-8px; }
  .choice-heading .choice-eyebrow { font-size:10px; }
  .choice-heading h1 { font-size:31px; }
  .choice-heading p { font-size:12px; letter-spacing:0; }
  .choice-rewards { gap:8px; margin:12px 0 18px; }
  .choice-rewards span { font-size:12px; padding:4px 12px; }
  .choice-rewards b { font-size:16px; margin-left:4px; }
  .choice-loot { grid-template-columns:repeat(3,200px); overflow-x:auto; justify-content:start; gap:18px; padding:18px 10px; margin:0 -4px 12px; scroll-snap-type:x mandatory; scrollbar-width:thin; }
  .choice-swipe-hint { display:block; text-align:center; font-size:11px; color:#8c7d5c; margin:0; }
  .choice-reward-card { scroll-snap-align:center; }
  .choice-paper .face { min-height:325px; padding:12px 13px 43px; }
  .choice-paper .face .card-picture { height:124px; }
  .choice-paper .face .name { font-size:19px; }
  .choice-paper .face .desc { font-size:13px; }
  .choice-footer { gap:12px; }
  .choice-button { font-size:14px; padding:8px 18px; }
  .choice-primary { font-size:18px; min-width:170px; }
  .choice-upgrade-layout { display:flex; flex-direction:column; gap:18px; }
  .choice-library { padding:0 0 14px; border-right:0; border-bottom:1px solid #c5b58788; }
  .choice-library-heading { margin:12px 0 6px; }
  .choice-candidates { display:flex; max-height:none; overflow-x:auto; overflow-y:hidden; gap:12px; }
  .choice-thumbnail { width:94px; flex:0 0 94px; }
  .choice-thumbnail .face { min-height:0; padding:8px 8px 42px; }
  .choice-thumbnail .card-inspect { height:34px; }
  .choice-thumbnail .face .card-picture { height:74px; }
  .choice-thumbnail .face .name { font-size:12px; min-height:30px; }
  .choice-thumbnail .face .cost { width:20px; height:20px; font-size:13px; }
  .choice-comparison { grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr); gap:5px; }
  .choice-comparison h2 { font-size:17px; }
  .choice-comparison .face { min-height:300px; padding:10px 10px 42px; }
  .choice-comparison .face .card-picture { height:94px; }
  .choice-comparison .face .name { font-size:16px; }
  .choice-comparison .face .cost { width:26px; height:26px; font-size:18px; }
  .choice-comparison .face .desc { font-size:12px; }
  .choice-comparison .face .card-foot { font-size:9px; }
  .choice-changes .choice-effect-change { grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr); font-size:11px; }
  .choice-effect-change > :first-child { grid-column:1/-1; }
  .choice-mend,.choice-empty { min-height:280px; padding:15px 5px; }
}
@media (prefers-reduced-motion:no-preference) {
  .choice-reward-card.is-selected::after { content:''; position:absolute; inset:-7px; border:1px solid #7ec9a47a; border-radius:17px; pointer-events:none; animation:choice-breathe 2.4s ease-in-out infinite; }
  @keyframes choice-breathe { 50% { opacity:.4; transform:translateY(-2px); } }
}
@media (min-width:1051px) and (max-height:1000px) {
  .choice-scroll { padding-top:72px; }
  .choice-paper { padding-top:20px; padding-bottom:24px; }
  .choice-heading .choice-eyebrow { display:none; }
  .choice-heading h1 { font-size:40px; }
  .choice-paper .face { min-height:350px; }
  .choice-paper .face .card-picture { height:145px; }
  .choice-thumbnail .face { min-height:0; }
  .choice-thumbnail .face .card-picture { height:80px; }
  .choice-comparison h2 { margin-bottom:10px; }
  .choice-changes { margin-top:12px; }
  .choice-footer { margin-top:12px; }
  .choice-candidates { max-height:390px; }
}