#xm-cinematic-ascension{--xa-gold:#f3dca1;--xa-bright:#fff0c6;--xa-ink:#082e2c;max-width:420px;margin:0 auto;color:#f4e4bc;font-family:"Noto Serif TC","Songti TC","PMingLiU",serif;color-scheme:dark}
#xm-cinematic-ascension *{box-sizing:border-box}
#xm-cinematic-ascension [hidden]{display:none!important}
#xm-cinematic-ascension button{font:inherit;touch-action:manipulation}
#xm-cinematic-ascension .xa-stage{position:relative;isolation:isolate;overflow:clip;aspect-ratio:941/1672;background:#062623;border:1px solid #ad986050;border-radius:21px;box-shadow:0 14px 40px #082d2829}
#xm-cinematic-ascension .xa-painting,#xm-cinematic-ascension canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#xm-cinematic-ascension .xa-painting{object-fit:cover}
#xm-cinematic-ascension .xa-art-motion{opacity:0}
#xm-cinematic-ascension .xa-art-motion.is-ready{opacity:1}
#xm-cinematic-ascension .xa-shade{position:absolute;inset:0;background:linear-gradient(180deg,#011d2766,transparent 17%,transparent 55%,#031d2270 65%,#052b2be3 74%,#052b2bf2);pointer-events:none}
#xm-cinematic-ascension .xa-top-mark{position:absolute;left:17px;right:17px;top:22px;display:flex;align-items:center;justify-content:center;gap:13px;color:#e7d7ad;text-shadow:0 2px 5px #08252c;font-size:11px;letter-spacing:2px;pointer-events:none}
#xm-cinematic-ascension .xa-top-mark i{height:14px;width:1px;background:#e2ca897d}
#xm-cinematic-ascension .xa-top-mark em{font-style:normal;opacity:.8}
#xm-cinematic-ascension .xa-skip{position:absolute;top:52px;right:13px;border:1px solid #e1d5af60;border-radius:22px;color:#efe8ce;background:#06282b90;min-width:57px;min-height:44px;padding:9px 14px;font-size:12px;letter-spacing:2px;backdrop-filter:blur(9px)}
#xm-cinematic-ascension .xa-caption{position:absolute;left:26px;right:26px;bottom:31px;text-align:center}
#xm-cinematic-ascension .xa-eyebrow{display:flex;align-items:center;gap:14px;justify-content:center;font-size:11px;letter-spacing:5px;color:#f0dca3;text-shadow:0 1px 5px #062923}
#xm-cinematic-ascension .xa-eyebrow:before,#xm-cinematic-ascension .xa-eyebrow:after{content:"";width:37px;height:1px;background:linear-gradient(90deg,transparent,#c4b575)}
#xm-cinematic-ascension .xa-eyebrow:after{transform:scaleX(-1)}
#xm-cinematic-ascension h2{font-size:43px;line-height:1.3;font-weight:500;letter-spacing:7px;text-indent:7px;margin:13px 0 10px;color:#ffedb5;text-shadow:0 2px 2px #123630,0 0 24px #d7d18540}
#xm-cinematic-ascension .xa-caption p{font-size:12px;letter-spacing:2px;color:#cbcead;margin:15px 0 21px}
#xm-cinematic-ascension .xa-gold{width:100%;max-width:268px;padding:12px 18px;min-height:47px;background:linear-gradient(115deg,#f0e0b6,#d9bd7b);border:1px solid #f7dfa5;box-shadow:0 3px 0 #816e46,0 0 22px #ddc26a17;color:#173f35;border-radius:9px;font-size:16px;font-weight:500;letter-spacing:3px;transition:filter .18s,transform .18s}
#xm-cinematic-ascension .xa-gold:hover{filter:brightness(1.09)}
#xm-cinematic-ascension .xa-gold:active{transform:translateY(1px)}
#xm-cinematic-ascension .xa-ritual{bottom:60px;color:#f6e8c2}
#xm-cinematic-ascension .xa-ritual-small{display:block;letter-spacing:7px;font-size:11px;color:#d3dcce;margin-bottom:17px}
#xm-cinematic-ascension .xa-ritual strong{display:block;font-size:29px;font-weight:500;letter-spacing:7px;text-shadow:0 2px 8px #031d27}
#xm-cinematic-ascension .xa-ritual i{display:block;width:30px;height:1px;margin:21px auto;background:#d7cd96}
#xm-cinematic-ascension .xa-realm-path{display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;letter-spacing:1px;color:#c2d1bf}
#xm-cinematic-ascension .xa-realm-path em{font-style:normal;color:#cdb772}
#xm-cinematic-ascension .xa-realm-path strong{font-weight:500;color:#eed8a3}
#xm-cinematic-ascension .xa-result{bottom:29px}
#xm-cinematic-ascension .xa-result h2{margin-top:13px;margin-bottom:12px}
#xm-cinematic-ascension .xa-result p{margin-top:16px;margin-bottom:19px}
#xm-cinematic-ascension .xa-reveal .xa-result{animation:xa-result-emerge 1s cubic-bezier(.2,.75,.2,1) both}
#xm-cinematic-ascension .xa-reveal .xa-result h2{animation:xa-title-light 1.7s .15s both}
#xm-cinematic-ascension .xa-reveal .xa-gold{animation:xa-action-emerge .7s .5s both}
#xm-cinematic-ascension .xa-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-top:13px}
#xm-cinematic-ascension .xa-controls button{padding:10px 15px;min-height:44px;border:1px solid #62776a;border-radius:8px;background:#143c34;color:#e3d7b1;font:13px/1.4 system-ui,sans-serif}
#xm-cinematic-ascension .xa-controls .xa-replay{border-color:#a69565;background:#20493d}
#xm-cinematic-ascension .xa-controls [aria-pressed=true]{background:#daca9c;color:#123b31;border-color:#e9daae}
#xm-cinematic-ascension .xa-controls>span{font:11px/1.5 system-ui,sans-serif;margin-left:auto;color:light-dark(#596b61,#abc2b4)}
#xm-cinematic-ascension .xa-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#xm-cinematic-ascension.xa-reduced *,#xm-cinematic-ascension.xa-reduced *:before{animation:none!important;transition:none!important}
@keyframes xa-result-emerge{from{opacity:0;transform:translateY(16px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes xa-title-light{0%{color:#fff7d9;text-shadow:0 0 25px #fff0b9c9;letter-spacing:11px}100%{color:#ffedb5;text-shadow:0 2px 2px #123630,0 0 24px #d7d18540;letter-spacing:7px}}
@keyframes xa-action-emerge{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:360px){#xm-cinematic-ascension .xa-stage{border-radius:17px}#xm-cinematic-ascension .xa-caption{left:20px;right:20px;bottom:22px}#xm-cinematic-ascension h2{font-size:34px;letter-spacing:5px;text-indent:5px;margin:10px 0 8px}#xm-cinematic-ascension .xa-caption p{font-size:11px;letter-spacing:1px;margin:10px 0 14px}#xm-cinematic-ascension .xa-result h2{margin:10px 0}#xm-cinematic-ascension .xa-gold{font-size:14px;min-height:44px;padding:10px}#xm-cinematic-ascension .xa-top-mark{top:18px;gap:8px;font-size:11px;letter-spacing:1px}#xm-cinematic-ascension .xa-eyebrow{gap:9px;letter-spacing:3px}#xm-cinematic-ascension .xa-realm-path{font-size:11px;gap:9px}#xm-cinematic-ascension .xa-ritual{bottom:40px}#xm-cinematic-ascension .xa-controls>span{width:100%;margin:1px 0 0}}
@media(prefers-reduced-motion:reduce){#xm-cinematic-ascension *,#xm-cinematic-ascension *:before{animation:none!important;transition:none!important}}

/* Native modal sizing fits WebView safe areas, landscape and narrow phones. */
.xian-progression-dialog{padding:0;border:1px solid #b9a36e;border-radius:20px;margin:auto;color:#f4e4bc;background:#103b32;max-height:calc(100dvh - 24px);overscroll-behavior:contain;font-family:inherit}
.xian-progression-dialog::backdrop{background:#041e23c9;backdrop-filter:blur(5px)}
.xian-promotion-dialog{width:min(420px,calc(100vw - 24px),calc((100dvh - 26px)*941/1672));max-width:calc(100vw - 24px);overflow:clip;border:0;background:#062723}
.xian-promotion-dialog #xm-cinematic-ascension{width:100%}.xian-promotion-dialog .xa-stage{border:0}
#xm-cinematic-ascension.xa-latin h2{font-size:clamp(22px,5.8vw,31px);letter-spacing:1px;text-indent:0;overflow-wrap:anywhere;animation:none}
#xm-cinematic-ascension.xa-latin .xa-realm-path{font-size:11px;gap:7px;letter-spacing:0}
#xm-cinematic-ascension.xa-latin .xa-eyebrow{letter-spacing:1px}#xm-cinematic-ascension.xa-latin .xa-caption p{letter-spacing:0}
#xm-cinematic-ascension.xa-latin .xa-ritual strong{letter-spacing:1px;font-size:27px}
.xian-energy-dialog{width:min(348px,calc(100vw - 30px));padding:24px 22px 16px;text-align:center;background:radial-gradient(ellipse at 50% 9%,#306953,#123c33 70%);box-shadow:0 20px 60px #001e2680,inset 0 0 0 5px #bda56b12;animation:xe-enter .6s cubic-bezier(.2,.8,.18,1) both}
.xian-energy-dialog .xe-art{position:relative;width:104px;height:108px;margin:0 auto 16px}.xian-energy-dialog .xe-ring{position:absolute;inset:3px;border:1px solid #ddcc9477;border-radius:50%;box-shadow:0 0 23px #6de7b426;animation:xe-orbit .8s ease-out both}.xian-energy-dialog .xe-art img{position:relative;z-index:1;width:90px;height:96px;object-fit:contain;animation:xe-dim 1.15s both}
.xian-energy-dialog .xe-kicker{font-size:12px;letter-spacing:2px;color:#d4b984;margin:0 0 9px}.xian-energy-dialog h2{font-size:30px;margin:0 0 17px;font-weight:600;letter-spacing:2px;color:#f4dda8;animation:xe-nudge .5s .22s both}
.xian-energy-dialog p{font-size:14px;line-height:1.7}.xian-energy-dialog #xian-energy-description{margin:0;color:#d0d9bc}.xian-energy-dialog .xe-meter{height:4px;background:#8ea78d30;border-radius:4px;max-width:210px;margin:13px auto}.xian-energy-dialog .xe-meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#718a64,#d2b56d)}
.xian-energy-dialog .xe-shortfall{color:#edd59b;margin:13px 0}.xian-energy-dialog .xe-pills{font-size:12px;color:#c4d4bc;margin:10px 0}.xian-energy-dialog .xe-message{color:#f3ca9c;margin:8px 0}.xian-energy-dialog .xe-message:empty{display:none}
.xian-energy-dialog .xe-primary{display:block;width:100%;min-height:48px;margin:17px 0 8px}.xian-energy-dialog .xe-dismiss{min-height:44px;border:0;background:none;box-shadow:none;color:#c9d6bd}
@keyframes xe-enter{from{opacity:0;transform:scale(.88) translateY(12px)}70%{opacity:1;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}
@keyframes xe-orbit{from{transform:scale(1.35);opacity:0}to{transform:scale(1);opacity:1}}@keyframes xe-dim{0%{filter:brightness(1.6);transform:scale(1.1)}45%{filter:brightness(.65);transform:scale(.88)}100%{filter:brightness(.9);transform:scale(.96)}}@keyframes xe-nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}55%{transform:translateX(3px)}}
.reduce-effects .xian-progression-dialog,.reduce-effects .xian-progression-dialog *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.xian-progression-dialog,.xian-progression-dialog *{animation:none!important;transition:none!important}}
@media(max-height:570px){.xian-promotion-dialog{width:min(420px,calc(100vw - 24px));overflow-y:auto}.xian-promotion-dialog .xa-stage{min-height:560px}.xian-energy-dialog{padding-top:16px}.xian-energy-dialog .xe-art{height:70px;width:70px}.xian-energy-dialog .xe-art img{height:70px;width:70px}}
#xm-cinematic-ascension.xa-latin .xa-reveal .xa-result h2{animation:none;letter-spacing:1px}