/* Dual Ascent skin: image-based buttons, panels, pills (nine-slice). --bh is set to the element height by js/skin.js */
:root{--cap:.727}
/* buttons: secondary / ghost / tab */
.v19-ghost,.ghost,.v19-tab,.tab{background:none;border:0 solid transparent;border-width:0 calc(var(--bh,40px)*.727);border-image:url(../assets/ui-btn-secondary.webp) 0 112 fill/0 calc(var(--bh,40px)*.727) stretch;border-radius:0;padding:0;color:#fff6dc;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));text-shadow:0 1px 2px rgba(0,0,0,.6);box-shadow:none}
/* primary / cta / selected tab */
.v19-cta,.cta,.v19-tab.on,.tab.on{background:none;border:0 solid transparent;border-width:0 calc(var(--bh,40px)*.727);border-image:url(../assets/ui-btn-primary.webp) 0 112 fill/0 calc(var(--bh,40px)*.727) stretch;border-radius:0;padding:0;color:#2a1048;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));text-shadow:0 1px 0 rgba(255,255,255,.4);box-shadow:none}
/* disabled */
.v19-cta:disabled,.cta:disabled,.v19-ghost:disabled,.ghost:disabled{border-image:url(../assets/ui-btn-disabled.webp) 0 112 fill/0 calc(var(--bh,40px)*.727) stretch;color:#d6d6e0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));opacity:1;text-shadow:0 1px 2px rgba(0,0,0,.55);cursor:not-allowed}
.v19-tab.common,.v19-tab.rare,.v19-tab.epic,.v19-tab.legendary{color:#fff6dc}
.v19-tab.on.common,.v19-tab.on.rare,.v19-tab.on.epic,.v19-tab.on.legendary{color:#2a1048}
.v19-cta:active:not(:disabled),.cta:active:not(:disabled),.v19-ghost:active,.ghost:active,.v19-tab:active,.tab:active{transform:scale(.97)}
/* resource pills */
.v19-pill,.pill{background:none;border:0 solid transparent;border-width:0 calc(var(--bh,30px)*.5);border-image:url(../assets/ui-pill.webp) 0 76 fill/0 calc(var(--bh,30px)*.5) stretch;border-radius:0;padding:0;gap:6px;color:#fff6dc;height:32px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));justify-content:center}
.v19-pill i,.pill i{width:22px;height:22px;margin-left:-4px}
.pill img,.v19-pill .pimg{width:26px;height:26px;margin:0 0 0 -6px}
.pill img.tk,.v19-pill .pimg.tk{width:36px;height:auto;margin-left:-8px}
/* round buttons */
.v19-round[data-act=back],.rbtn[data-act=closeModal],.rbtn[data-act=party]{background:center/contain no-repeat;border:0;border-radius:0;font-size:0;color:transparent;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));width:46px;height:46px}
.v19-round[data-act=back]{background-image:url(../assets/ui-back.webp)}
.rbtn[data-act=closeModal],.rbtn[data-act=party]{background-image:url(../assets/ui-close.webp)}
.v19-round[data-act=back] svg,.rbtn[data-act=closeModal] svg,.rbtn[data-act=party] svg{display:none}
/* panels: frame drawn by ::before so child coordinates do not shift */
.v19-panel,.panel{isolation:isolate;background:none;border:0;border-radius:0;box-shadow:none}
.v19-panel::before,.panel::before{content:"";position:absolute;inset:0;z-index:-1;border:solid transparent;border-width:20px;border-image:url(../assets/ui-panel.webp) 90 fill/20px stretch;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.v19-panel.sinfo::before{border-image:url(../assets/ui-panel.webp) 90/20px stretch;background:rgba(20,13,46,.74);background-clip:padding-box;margin:10px;inset:0;border-width:10px;border-image:url(../assets/ui-panel.webp) 90/16px stretch}
/* summon page */
.sumbg{display:none;position:absolute;inset:0;background:#1a1230 url(../assets/sm-bg.webp) center 68%/cover no-repeat}
.sumbg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,8,34,.35),rgba(14,8,34,0) 25%,rgba(14,8,34,0) 70%,rgba(14,8,34,.45))}
.v19-layer.sum .sumbg{display:block}
.v19-layer.sum{background:#1a1230}
.sumobj{position:absolute;left:347px;top:104px;width:150px;height:150px;pointer-events:none}
.sumobj img.float{position:absolute;left:10px;top:6px;width:130px;height:130px;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.55));animation:sumfloat 3.2s ease-in-out infinite}
.sumobj .halo{position:absolute;left:-20px;top:-10px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,120,.55),rgba(255,214,120,0) 65%)}
.sumcap{text-align:center;font-size:12px;color:#fff6dc}
@keyframes sumfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.sumobj img.float{animation:none}}
.v19-dim{z-index:5}.v19-panel{z-index:6}.v19-panel.sinfo{z-index:1}
.full{left:calc(var(--ox,0px)*-1);top:calc(var(--oy,0px)*-1);width:var(--vw,844px);height:var(--vh,390px)}
/* summon: centre altar and rune circle under the egg (container is 150px wide) */
.v19-stage .sumobj .altar{left:-25px}
.v19-stage .sumobj .rune{left:5px}
.rar.rank{margin-left:4px;color:#e8d9a8;background:rgba(60,48,20,.75);letter-spacing:.1em}
.hdock .dkbg{top:0}.hdock button{padding-top:3px}.hdock button img{width:44px;height:44px}.hdock .dot{top:5px}
.pill em.cd{font-style:normal;font-size:9px;opacity:.85;margin-left:4px;color:#b9ffc4;white-space:nowrap;font-variant-numeric:tabular-nums}
.hdock button em.cdA{position:absolute;right:0;top:1px;text-align:center;font-style:normal;font-size:9px;line-height:11px;font-weight:700;color:#ffe2b8;background:rgba(20,10,40,.82);border:1px solid rgba(200,147,42,.6);border-radius:7px;padding:0 4px;white-space:nowrap;font-variant-numeric:tabular-nums}
.si{height:17px;width:auto;vertical-align:-.2em;margin-right:2px;display:inline-block}
/* ---- evolution cinematic ---- */
.evx{position:fixed;inset:0;z-index:9800;overflow:hidden;font-family:inherit;touch-action:manipulation;animation:evxIn .35s ease both}
@keyframes evxIn{from{opacity:0}to{opacity:1}}
.evx.out{opacity:0;transition:opacity .3s}
.evx-c{position:absolute;left:0;top:0}
.evx-sp{position:absolute;opacity:0;will-change:transform}
.evx-sp img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.evx-fl{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.evx-t{position:absolute;left:0;right:0;bottom:5.5%;text-align:center;opacity:0;transform:translateY(16px) scale(.96);transition:opacity .7s,transform .7s;pointer-events:none}
.evx-t.on{opacity:1;transform:none}
.evx-st{font-size:12px;letter-spacing:.38em;color:#ffe9a8;text-shadow:0 0 10px rgba(255,200,80,.9);font-weight:600}
.evx-nm{font-size:clamp(26px,7vh,44px);font-weight:800;line-height:1.15;background:linear-gradient(180deg,#fff,#ffe08a 55%,#f2a73a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(255,190,70,.6));letter-spacing:.05em}
.evx-tg{display:inline-block;margin-top:2px;padding:1px 14px;border-radius:12px;border:1px solid #f2c14e;background:rgba(40,24,8,.7);color:#ffe9a8;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.evx-h{position:absolute;right:20px;bottom:10px;font-size:11px;color:#fff6dc;opacity:0;text-shadow:0 1px 3px #000;pointer-events:none}
.evx.ready .evx-h{display:block}
.evoc{position:absolute;height:250px;padding:0;border-radius:14px;border:1.5px solid rgba(200,147,42,.75);background:linear-gradient(180deg,rgba(60,38,110,.72),rgba(26,16,56,.85));color:#fff6dc;text-align:left;cursor:pointer;overflow:hidden;font-family:inherit}
.evoc:active{transform:scale(.985)}
.evoc .evi{position:absolute;left:8px;top:22px;width:140px;height:140px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.evoc .evt{position:absolute;left:152px;right:10px;top:12px}
.evoc .evn{display:block;font-size:17px;font-weight:800;color:#ffe9a8}
.evoc .eve{display:flex;align-items:center;gap:4px;margin:2px 0 4px;font-size:12px;flex-wrap:wrap}
.evoc .evp{font-size:12px;font-weight:700;color:#ffcf8a;margin-bottom:2px}
.evoc .evd{font-size:11px;line-height:1.45;color:rgba(255,246,220,.85);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.evoc .evk{position:absolute;left:0;right:0;bottom:0;height:34px;line-height:34px;text-align:center;font-size:12px;font-weight:700;color:#ffd98a;background:rgba(0,0,0,.35);border-top:1px solid rgba(200,147,42,.4)}
/* home profile: bigger name bar, supports below it */
.hc .hname{min-width:190px!important;max-width:250px!important;height:38px!important;font-size:16px!important;top:2px!important;padding-top:3px!important}
.hc .hsup{top:44px!important;width:28px!important;height:28px!important}
/* summon reveal card: art inside the frame window, opaque backdrop, element icon in the socket */
#gacha .gcard::before{left:30px!important;top:38px!important;right:auto!important;bottom:auto!important;width:95px;height:108px;border-radius:6px;background:radial-gradient(circle at 50% 38%,#6a4aa8 0%,#2b1a55 62%,#150c33 100%)!important}
#gacha .gcard .gimg{left:30px!important;top:38px!important;width:95px!important;height:108px!important;object-fit:contain;object-position:center bottom;clip-path:inset(0 round 6px)}
#gacha .gcard .gelc{position:absolute;left:19.5px;top:26.5px;width:21px;height:21px;z-index:3;border-radius:50%;object-fit:contain;filter:drop-shadow(0 0 3px rgba(0,0,0,.6))}
/* seamless 3-slice buttons (pre-sliced caps overlap the middle) */
.v19-ghost,.ghost,.v19-tab,.tab{border-image:none!important;background:url(../assets/ui-btn-secondary-l.webp) left center/auto 100% no-repeat border-box,url(../assets/ui-btn-secondary-r.webp) right center/auto 100% no-repeat border-box,url(../assets/ui-btn-secondary-m.webp) calc(var(--bh,40px)*(.732 - .1307) - 1px) 0/calc(100% - var(--bh,40px)*1.464 + var(--bh,40px)*.1307*2 + 2px) 100% no-repeat border-box!important}
.v19-cta,.cta,.v19-tab.on,.tab.on{border-image:none!important;background:url(../assets/ui-btn-primary-l.webp) left center/auto 100% no-repeat border-box,url(../assets/ui-btn-primary-r.webp) right center/auto 100% no-repeat border-box,url(../assets/ui-btn-primary-m.webp) calc(var(--bh,40px)*(.732 - .1307) - 1px) 0/calc(100% - var(--bh,40px)*1.464 + var(--bh,40px)*.1307*2 + 2px) 100% no-repeat border-box!important}
.v19-cta:disabled,.cta:disabled,.v19-ghost:disabled,.ghost:disabled{border-image:none!important;background:url(../assets/ui-btn-disabled-l.webp) left center/auto 100% no-repeat border-box,url(../assets/ui-btn-disabled-r.webp) right center/auto 100% no-repeat border-box,url(../assets/ui-btn-disabled-m.webp) calc(var(--bh,40px)*(.732 - .1307) - 1px) 0/calc(100% - var(--bh,40px)*1.464 + var(--bh,40px)*.1307*2 + 2px) 100% no-repeat border-box!important}

.v19-ghost,.ghost,.v19-tab,.tab,.v19-cta,.cta{border-color:transparent!important}

/* ===== story / dialogue cutscene ===== */
#story{position:absolute;left:0;top:0;width:100%;height:100%;z-index:9000;background:#07040f;opacity:0;transition:opacity .3s}
#story.on{opacity:1}#story.out{opacity:0}
#story .sty-bg{position:absolute;inset:0;background:#0d0a1e center/cover no-repeat;filter:brightness(.62) saturate(1.05);opacity:0}
#story .sty-bg.in{animation:styBg .7s ease forwards}
@keyframes styBg{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
#story:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,4,15,.5),rgba(7,4,15,0) 25%,rgba(7,4,15,0) 55%,rgba(7,4,15,.75));pointer-events:none}
#story .sty-fx{position:absolute;inset:0;z-index:5;background:#fff;opacity:0;pointer-events:none}
#story .sty-fx.fl{animation:styFl .7s ease-out}
@keyframes styFl{0%{opacity:.85}100%{opacity:0}}
#story .sty-st{position:absolute;left:var(--ox,0px);top:var(--oy,0px);width:844px;height:390px;z-index:2;cursor:pointer}
#story .sty-st.shk{animation:styShk .45s}
@keyframes styShk{0%,100%{transform:none}20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}
#story .sty-p{position:absolute;top:6px;width:300px;height:290px;overflow:hidden;transition:filter .25s,opacity .25s,transform .25s;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}
#story .sty-pl{left:14px}#story .sty-pr{right:14px}
#story .sty-p img{position:absolute;left:50%;transform:translateX(-50%);width:auto;max-width:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
#story .sty-pr img{transform:translateX(-50%) scaleX(-1)!important}
#story .sty-p.in{animation:styIn .4s ease-out}
#story .sty-pr.in{animation:styInR .4s ease-out}
@keyframes styIn{from{opacity:0;margin-left:-40px}to{opacity:1;margin-left:0}}
@keyframes styInR{from{opacity:0;margin-right:-40px}to{opacity:1;margin-right:0}}
#story .sty-p.sdim{filter:brightness(.5) saturate(.7)}
#story .sty-p.stalk{filter:none;transform:translateY(-3px) scale(1.03)}
#story .sty-top{position:absolute;left:0;top:10px;width:100%;text-align:center;pointer-events:none;z-index:3}
#story .sty-top b{display:inline-block;padding:3px 18px;font-size:12px;letter-spacing:.5px;color:#f2d98a;background:rgba(10,6,24,.6);border:1px solid rgba(242,193,78,.55);border-radius:12px}
#story .sty-skip{position:absolute;right:14px;top:8px;z-index:4;height:26px;padding:0 12px;font-size:11px;color:#fff6dc;background:rgba(10,6,24,.65);border:1px solid rgba(255,246,220,.45);border-radius:13px}
#story .sty-box{position:absolute;left:150px;right:150px;bottom:12px;height:108px;padding:24px 28px 10px;background:linear-gradient(180deg,rgba(26,16,56,.93),rgba(14,8,34,.95));border:2px solid #c9a24a;border-radius:14px;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 6px 18px rgba(0,0,0,.6);z-index:3}
#story .sty-box.voice{border-color:#a67bff;background:linear-gradient(180deg,rgba(38,12,60,.94),rgba(14,6,30,.96));box-shadow:0 0 18px rgba(150,90,255,.5)}
#story .sty-nm{position:absolute;left:18px;top:-15px;padding:2px 18px;font-size:14px;font-weight:700;background:#1b1038;border:1.5px solid #c9a24a;border-radius:12px;text-shadow:0 1px 0 #000}
#story .sty-tx{font-size:15px;line-height:1.5;color:#fff6e4;min-height:62px}
#story .sty-nx{position:absolute;right:16px;bottom:6px;font-size:11px;font-style:normal;color:#f2c14e;animation:styNx 1s infinite}
@keyframes styNx{50%{transform:translateY(3px);opacity:.5}}
#story .sty-nar{position:absolute;left:0;right:0;bottom:0;height:112px;padding:30px 110px 0;box-sizing:border-box;background:linear-gradient(180deg,rgba(7,4,15,0),rgba(7,4,15,.82) 38%);text-align:center;font-size:16px;line-height:1.65;color:#fff6e4;text-shadow:0 2px 6px #000,0 0 14px #000;z-index:3;font-style:italic}
#story .hid{display:none}

.hdock button.lk{filter:grayscale(.9) brightness(.62)}
.hdock button .lkb{position:absolute;right:6px;top:4px;font-size:13px;font-style:normal;filter:none;z-index:3}

#devnote{position:absolute;inset:0;z-index:9400;background:rgba(5,3,14,.72);display:flex;align-items:center;justify-content:center}
#devnote .dn-box{position:relative;width:340px;padding:22px 24px 18px;text-align:center;background:linear-gradient(180deg,#2a1a58,#150c33);border:2px solid #c9a24a;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.7)}
#devnote .dn-t{font-size:20px;font-weight:700;color:#f2c14e;margin-bottom:10px}
#devnote .dn-x{font-size:14px;line-height:1.6;color:#fff6e4;margin-bottom:16px}
#devnote .dn-b{position:relative;display:inline-flex;align-items:center;justify-content:center;width:170px;height:46px;font-size:16px}

.atb{position:absolute;left:50%;top:2px;width:176px;height:6px;margin-left:-88px;background:rgba(10,8,30,.72);border:1px solid rgba(242,193,78,.45);border-radius:5px;overflow:hidden;z-index:3;pointer-events:none}
.atb:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,246,220,.55);z-index:2}
.atb i{position:absolute;top:0;bottom:0;width:0}
.atb .ap{right:50%;background:linear-gradient(270deg,#7fdcff,#2f7fe0)}
.atb .ae{left:50%;background:linear-gradient(90deg,#ff9a8a,#d03a3a)}
.atb.rp .ap,.atb.re .ae{filter:brightness(1.5) drop-shadow(0 0 3px #fff)}