/* Dual Ascent game UI. Fixed 844x390 stage scaled to fit. No !important cascade. */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0d0a1e;overflow:hidden;font-family:'Kanit',Tahoma,"Leelawadee UI","Noto Sans Thai",system-ui,sans-serif;color:#fff6dc;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer}
#app{position:absolute;left:0;top:0;width:var(--vw,844px);height:var(--vh,390px);transform-origin:0 0;overflow:hidden;background:#0d0a1e}
#screen,#modal{position:absolute;left:var(--ox,0px);top:var(--oy,0px);width:844px;height:390px}
#modal.hidden,.hidden{display:none}
.abs{position:absolute}
.ol{text-shadow:-1px 0 #1a1230,1px 0 #1a1230,0 -1px #1a1230,0 1px #1a1230}
/* title */
#title{position:absolute;inset:0;z-index:50;background:#1d1646 url(../assets/title-bg.webp) center bottom/cover no-repeat;cursor:pointer;transition:opacity .6s}
#title.out{opacity:0;pointer-events:none}
#title .cl{position:absolute;left:-10%;bottom:-4%;width:120%;height:70%;background:url(../assets/title-clouds.webp) center bottom/100% 100% no-repeat;pointer-events:none}
#title .cl.a{animation:driftA 38s ease-in-out infinite alternate}
#title .cl.b{bottom:-14%;height:60%;transform:scaleX(-1);opacity:.55;animation:driftB 52s ease-in-out infinite alternate}
#title .cl.c{top:-6%;bottom:auto;height:45%;transform:scaleY(-1);opacity:.28;animation:driftA 70s ease-in-out infinite alternate-reverse}
@keyframes driftA{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(4%,0,0)}}
@keyframes driftB{from{transform:scaleX(-1) translate3d(-5%,0,0)}to{transform:scaleX(-1) translate3d(5%,0,0)}}
#title .logo{position:absolute;left:50%;top:3%;height:56%;max-width:70%;object-fit:contain;animation:floaty 5s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(255,200,100,.35));pointer-events:none}
@keyframes floaty{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-6px)}}
#title .btn{position:absolute;left:50%;bottom:9%;height:21%;max-width:60%;object-fit:contain;animation:pulse2 2.2s ease-in-out infinite;pointer-events:none}
@keyframes pulse2{0%,100%{transform:translateX(-50%) scale(1);filter:brightness(1)}50%{transform:translateX(-50%) scale(1.045);filter:brightness(1.18)}}
#title .sp{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffe9a8;box-shadow:0 0 6px 2px rgba(255,220,140,.8);opacity:0;animation:spark 4s ease-in-out infinite}
@keyframes spark{0%,100%{opacity:0;transform:translateY(0)}50%{opacity:.9;transform:translateY(-14px)}}
/* generic */
.pill{position:absolute;height:28px;padding:0 10px 0 3px;display:flex;align-items:center;gap:6px;border-radius:14px;background:rgba(19,15,43,.88);border:1px solid #c8932a;font-size:12px;font-weight:600;white-space:nowrap}
.pill i{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#1a1305;font-style:normal;font-size:11px}
.rbtn{position:absolute;width:44px;height:44px;padding:0;border-radius:22px;border:1px solid rgba(242,193,78,.5);background:rgba(36,26,69,.92);color:#f2c14e;display:flex;align-items:center;justify-content:center}
.rbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cta{position:absolute;border:2px solid #fff3c4;background:linear-gradient(180deg,#ffe9a8,#e3b04b 55%,#b9822a);color:#1a1305;font-weight:700;display:flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:26px;box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 18px rgba(242,193,78,.35)}
.cta:disabled{filter:grayscale(.85) brightness(.7);cursor:not-allowed}
.ghost{position:absolute;border:1px solid #e3b04b;background:rgba(36,26,69,.92);color:#f2c14e;font-weight:600;display:flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:22px}
.ghost:disabled{opacity:.45}
.panel{position:absolute;border-radius:14px;border:2px solid #c8932a;background:linear-gradient(180deg,#2b2052,#17122e);box-shadow:inset 0 0 0 1px rgba(255,236,170,.25),0 4px 10px rgba(0,0,0,.45)}
.dim{position:absolute;left:calc(var(--ox,0px)*-1);top:calc(var(--oy,0px)*-1);width:var(--vw,844px);height:var(--vh,390px);background:rgba(6,8,16,.66)}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.1em;color:#f2c14e}
.chip{display:inline-block;font-size:10px;font-weight:600;line-height:1;padding:3px 7px;border-radius:7px;border:1px solid rgba(242,193,78,.6);background:rgba(242,193,78,.16);color:#f2c14e;white-space:nowrap}
.scroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(242,193,78,.7) rgba(255,255,255,.1)}
.scroll::-webkit-scrollbar{width:4px}.scroll::-webkit-scrollbar-thumb{background:rgba(242,193,78,.7);border-radius:2px}
.el{display:inline-flex;align-items:center;vertical-align:middle;line-height:0}.elic{display:block;object-fit:contain;flex:none;pointer-events:none}.el .eln{line-height:1}
.hl{color:#ffe9a8;font-weight:700}
.tab{position:absolute;height:34px;padding:0 12px;border-radius:17px;border:1px solid #f2c14e;background:rgba(36,26,69,.92);color:#f2c14e;font-size:12px;font-weight:600;white-space:nowrap}
.tab.on{background:#f2c14e;color:#1a1305}
/* home */
.bg{position:absolute;left:calc(var(--ox,0px)*-1);top:calc(var(--oy,0px)*-1);width:var(--vw,844px);height:var(--vh,390px);background:#1d1646 center bottom/cover no-repeat}
.mon{position:absolute;transform-origin:50% 100%;pointer-events:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.45))}
.bob{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-5px) scaleY(1.02)}}
.dock{position:absolute;left:14px;bottom:4px;width:430px;height:96px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:none;border:0;box-shadow:none;padding:0}
.dock button{background:none;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;font-weight:500;color:#fff6dc;position:relative}
.dock button svg{width:26px;height:26px;fill:none;stroke:#f2c14e;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dock .dot{position:absolute;top:4px;right:calc(50% - 22px);width:9px;height:9px;border-radius:50%;background:#ff4d5e;border:1.5px solid #130f2b}
.xpbar{position:absolute;height:5px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.xpbar b{display:block;height:100%;background:linear-gradient(90deg,#4ed1c5,#a8f0e6)}
/* stage select */
.node{position:absolute;width:62px;height:62px;border-radius:50%;border:3px solid #c8932a;background:radial-gradient(circle at 50% 30%,#4a3a7a,#1a1230 75%);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;color:#fff6dc}
.node.boss{border-color:#ff9a5e;box-shadow:0 0 14px rgba(255,120,60,.55)}
.node.cur{box-shadow:0 0 0 3px #fff3c4,0 0 16px rgba(242,193,78,.8)}
.node.lock{filter:grayscale(1) brightness(.6)}
.node small{position:absolute;bottom:-4px;font-size:9px;background:#3ddc97;color:#06281a;border-radius:6px;padding:0 5px;font-weight:700}
/* battle */
.hpbox{position:absolute;top:10px;width:260px;height:56px}
.hpbox .pt{position:absolute;top:0;width:54px;height:54px;border-radius:50%;border:2px solid #f2c14e;background:#0f1628 center 14%/165% no-repeat}
.hpbox.e .pt{border-color:#ff4d5e;right:0}
.hpbox.p .pt{left:0}
.hpbox .nm{position:absolute;top:0;display:flex;align-items:center;gap:6px;height:20px;font-size:13px;font-weight:600;text-shadow:0 1px 3px #000;white-space:nowrap}
.hpbox.p .nm{left:62px;right:0}.hpbox.e .nm{right:62px;left:0;flex-direction:row-reverse}
.lvchip{font-size:10px;font-weight:600;color:#1a1305;background:#f2c14e;border-radius:5px;padding:0 5px;line-height:15px}
.hpbox.e .lvchip{background:#ff4d5e;color:#1a0508}
.hpt{position:absolute;top:22px;height:11px;border:1px solid rgba(245,241,230,.55);background:rgba(10,16,30,.7);overflow:hidden;width:196px}
.hpbox.p .hpt{left:62px;transform:skewX(-20deg)}
.hpbox.e .hpt{right:62px;transform:skewX(20deg)}
.hpt b{display:block;height:100%;transition:width .3s}
.hpbox.p .hpt b{background:linear-gradient(180deg,#6df0b8,#3ddc97 55%,#22a874)}
.hpbox.e .hpt b{background:linear-gradient(180deg,#ff7f8c,#ff4d5e 55%,#c42f40);margin-left:auto}
.hpt i{position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .2s}
.hpn{position:absolute;top:35px;font-size:10px;opacity:.85;text-shadow:0 1px 2px #000}
.hpbox.p .hpn{left:62px}.hpbox.e .hpn{right:62px}
.fx{position:absolute;top:44px;display:flex;gap:4px;font-size:10px}
.hpbox.p .fx{left:62px}.hpbox.e .fx{right:62px}
.fx span{background:rgba(10,16,30,.75);border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:0 5px}
.turn{position:absolute;left:50%;top:10px;transform:translateX(-50%);height:24px;padding:0 14px;display:flex;align-items:center;font-size:13px;font-weight:600;background:rgba(10,16,30,.74);border:1px solid rgba(242,193,78,.32);border-radius:12px;white-space:nowrap}
.stg{position:absolute;left:50%;top:38px;transform:translateX(-50%);font-size:11px;background:rgba(10,16,30,.6);border-radius:9px;padding:2px 10px;white-space:nowrap}
.sbtn{position:absolute;right:47px;width:44px;height:44px;border-radius:12px;border:1px solid rgba(242,193,78,.32);background:rgba(10,16,30,.74);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#f2c14e;padding:0}
.sbtn svg{width:18px;height:18px;fill:none;stroke:#f5f1e6;stroke-width:2;stroke-linecap:round}
.ring{position:absolute;right:47px;bottom:12px;width:84px;height:84px;border-radius:50%;border:0;padding:0;background:none}
.ring .rg{position:absolute;inset:0;border-radius:50%;border:4px solid #f2c14e;background:radial-gradient(circle at 50% 35%,#4a3a1a,#1c1408 75%);box-shadow:0 0 0 3px rgba(10,16,30,.7),0 0 16px rgba(242,193,78,.55);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ring .cd{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(10,16,30,.72) var(--p,0%),transparent 0)}
.ring.cool .rg{border-color:#7a6a45;box-shadow:0 0 0 3px rgba(10,16,30,.7)}
.ring svg{position:relative;width:34px;height:34px;fill:none;stroke:#ffe9a8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ring .cn{position:absolute;font-size:24px;font-weight:700;text-shadow:0 1px 3px #000}
.ringtxt{position:absolute;right:140px;bottom:30px;width:200px;text-align:right;text-shadow:0 1px 3px #000}
.ringtxt b{display:block;font-size:12px;color:#f2c14e}.ringtxt small{font-size:11px}
.pdock{position:absolute;left:47px;bottom:12px;display:flex;gap:6px;align-items:center}
.pdock button{background:none;border:0;padding:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.bmon{position:absolute;bottom:var(--gy,138px);will-change:transform;transform-origin:50% 100%;pointer-events:none;filter:drop-shadow(0 6px 5px rgba(0,0,0,.5))}
.bmon.p{left:145px}.bmon.e{right:145px}
.bmon.e .bw{transform:scaleX(-1)}
.bmon img{display:block}
.bmon.atk.p{transform:translateX(115px)}
.bmon.atk.e{transform:translateX(-115px)}
.bmon.hit{animation:shake .25s}
.bmon.hit img{filter:brightness(2.2) saturate(.3)}
.bmon.dead{opacity:0;transform:translateY(24px) scale(.9);filter:grayscale(1)}
.bmon .idle{animation:bob 3s ease-in-out infinite}
@keyframes shake{0%,100%{margin-left:0}25%{margin-left:-7px}75%{margin-left:7px}}
.dmg{position:absolute;font-size:22px;font-weight:700;color:#fff;text-shadow:-1px 0 #1a1230,1px 0 #1a1230,0 -1px #1a1230,0 1px #1a1230;pointer-events:none;animation:rise .95s ease-out forwards;white-space:nowrap}
.dmg.crit{color:#ffd24a;font-size:30px}.dmg.heal{color:#6df0b8}.dmg.p{color:#ff9aa5}.dmg.miss{color:#cfd6e6;font-size:16px}.dmg.dot{color:#ffb070;font-size:16px}
@keyframes rise{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1;transform:translateY(-8px) scale(1.15)}100%{opacity:0;transform:translateY(-54px) scale(1)}}
.banner{position:absolute;left:50%;top:72px;transform:translateX(-50%);padding:3px 18px;border-radius:12px;background:rgba(10,16,30,.78);border:1px solid #f2c14e;color:#ffe9a8;font-weight:700;font-size:15px;animation:ban 1.2s ease-out forwards;white-space:nowrap}
@keyframes ban{0%{opacity:0;transform:translate(-50%,-8px)}15%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.flash{position:absolute;left:calc(var(--ox,0px)*-1);top:calc(var(--oy,0px)*-1);width:var(--vw,844px);height:var(--vh,390px);pointer-events:none;background:radial-gradient(circle,rgba(255,236,170,.55),rgba(255,236,170,0) 70%);animation:fl .5s ease-out forwards}
@keyframes fl{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
/* cards */
.card{position:relative;width:96px;height:110px;border-radius:12px;border:2px solid rgba(242,193,78,.45);background:rgba(10,16,30,.55);padding:0;overflow:hidden}
.card.cur{border-color:#ffe9a8;box-shadow:0 0 12px rgba(242,193,78,.6)}
.card img{position:absolute;left:8px;top:6px;width:80px;height:74px;object-fit:contain}
.card .n{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px}
.card .l{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:10px;color:#ffe9a8}
.card.off img{filter:brightness(0) opacity(.45)}
#toast{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);z-index:9500;background:rgba(10,16,30,.92);border:1px solid #f2c14e;border-radius:16px;padding:6px 18px;font-size:13px;white-space:nowrap}
.egg{position:absolute;left:372px;top:96px;width:100px;height:130px;border-radius:50% 50% 48% 48%/60% 60% 40% 40%;background:radial-gradient(circle at 38% 30%,#fff6dc,#e3b04b 45%,#6b3f9e 100%);box-shadow:0 0 30px rgba(242,193,78,.7);animation:eggw 1.6s ease-in-out infinite}
@keyframes eggw{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-4px)}}
.egg.hatch{animation:eggh .7s ease-in forwards}
@keyframes eggh{0%{transform:scale(1)}60%{transform:scale(1.3) rotate(10deg);opacity:1}100%{transform:scale(2);opacity:0}}
.pop{animation:pop .5s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes pop{0%{opacity:0;transform:translateY(10px) scale(.7)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important}}
#rot{position:fixed;inset:0;z-index:99999;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(120% 90% at 50% 0%,#2c2354,#0d0a1e);text-align:center;padding:24px}
#rot b{font-size:20px;color:#f2c14e}
@media (orientation:portrait){#rot{display:flex}}

.dock button img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));margin-top:-12px;transition:transform .12s}.dock button:active img{transform:scale(.92)}.dock button span{font-size:11px;font-weight:600}

.dock button img{width:68px;height:68px;margin-top:0;filter:drop-shadow(0 3px 5px rgba(0,0,0,.65))}.dock button span{font-size:12px;font-weight:700;color:#fff6dc;text-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.9);margin-top:-2px}.dock .dot{top:2px;right:calc(50% - 38px)}
.dock .dot{top:6px;left:calc(50% + 20px);right:auto}
.dock .dot{top:16px;left:calc(50% + 16px)}
.dock{left:28px;bottom:-2px;width:376px;height:92px;gap:0;grid-template-columns:repeat(4,94px)}
.dock button{justify-content:flex-start;gap:3px;padding-top:2px}
.dock button img{width:64px;height:64px;flex:none;object-fit:contain}
.dock button span{margin:0;line-height:14px;height:14px}
.dock .dot{top:6px;left:calc(50% + 18px)}
.rbtn{z-index:10}

.pill img{width:26px;height:26px;margin:-2px 0 -2px -2px;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.imgbtn{position:absolute;background:none;border:0;padding:0;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.55));transition:transform .12s}
.imgbtn img{display:block;width:100%;height:auto;pointer-events:none}.imgbtn:active{transform:scale(.95)}

input,textarea{user-select:text;-webkit-user-select:text}
.nameIn{position:absolute;height:52px;border-radius:26px;border:2px solid #c8932a;background:rgba(19,15,43,.92);color:#fff6dc;font:600 20px Kanit,Tahoma,sans-serif;text-align:center;outline:none;padding:0 16px;box-sizing:border-box}
.nameIn:focus{border-color:#f2c14e;box-shadow:0 0 0 3px rgba(242,193,78,.25)}
.plate{position:absolute;height:34px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 14px 4px;box-sizing:border-box;border-radius:17px;background:rgba(19,15,43,.82);border:1px solid #c8932a;font-size:15px;white-space:nowrap}
.plate b.ol{font-size:15px;font-weight:700}
.plate .lvchip{background:#f2c14e;color:#1a1305;border-radius:5px;padding:0 6px;font-size:11px;font-weight:600;line-height:16px}
[data-act]{cursor:pointer}[data-act]:disabled{cursor:not-allowed}
.pill img.tk{width:36px;height:auto;margin:-4px 0 -4px -6px}
.egg{background:url(../assets/menu-summon.webp) center/contain no-repeat;border-radius:0;box-shadow:none;filter:drop-shadow(0 0 18px rgba(242,193,78,.7))}
#title .ver{position:absolute;right:12px;bottom:8px;font-size:11px;color:rgba(255,246,220,.6)}
#screen{z-index:1}#modal{z-index:30}

.rbtn.imgb{width:48px;height:48px;border:0;background:none;border-radius:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}.rbtn.imgb img{width:46px;height:46px;pointer-events:none}

/* ---- home: 1847:851 design canvas, contain-fit inside the 844x390 stage ---- */
.bg.blur{filter:blur(14px) brightness(.7) saturate(1.1);transform:scale(1.06)}
.hc{position:absolute;left:calc(var(--ox,0px)*-1);top:calc(var(--oy,0px)*-1);width:var(--vw,844px);height:var(--vh,390px)}
.hcbg{position:absolute;inset:0;background:center/100% 100% no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 .4%,#000 99.6%,transparent),linear-gradient(180deg,transparent,#000 .3%,#000 99.7%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 .4%,#000 99.6%,transparent),linear-gradient(180deg,transparent,#000 .3%,#000 99.7%,transparent);mask-composite:intersect}
.hc .mon{max-width:none}
.hsh{position:absolute;border-radius:50%;background:radial-gradient(ellipse at center,rgba(30,10,50,.42) 0,rgba(30,10,50,.28) 45%,rgba(30,10,50,0) 72%);pointer-events:none}
.hc .hb{font-size:11px;padding:0}
.hc .hb::after,.hc .hset::after,.hc .hdock button::after{content:'';position:absolute;inset:-9px 0}
.hres{position:absolute;display:flex;gap:5px}
.hres .pill{position:relative;flex:1 1 0;height:100%;min-width:0;padding:0 8px 0 0;justify-content:center;font-size:11px}
.hres .pill img{width:22px;height:22px;margin:0 0 0 -4px}
.hset{left:89%;top:5.5%;width:48px;height:48px;margin:-4.5px 0 0 -4.5px;transform:none;display:flex;align-items:center;justify-content:center}
.hc .hset img{width:38px;height:38px}
.hpl{left:50%;top:25.5%;transform:translateX(-50%);height:27px;min-width:135px;padding:0 10px 3px;gap:6px;font-size:12px}
.hpl b.ol{font-size:13px}.hpl .lvchip{font-size:9.5px;line-height:14px;padding:0 5px}.hpl .el{font-size:10px}
.hdock{left:5%;top:75%;width:45%;height:17%;bottom:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.hdock .dkbg{position:absolute;left:0;right:0;top:31%;bottom:0;border-radius:14px;background:linear-gradient(180deg,rgba(40,24,78,.72),rgba(22,14,48,.78));border:1px solid rgba(200,147,42,.7);box-shadow:0 3px 8px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,220,140,.08)}
.hdock button{position:relative;height:100%;justify-content:flex-start;gap:0;padding:0}
.hdock button img{width:46px;height:46px;margin:0}
.hdock button span{position:absolute;left:0;right:0;bottom:3px;margin:0;font-size:11px;height:14px;line-height:14px;text-align:center}
.hdock .dot{top:2px;left:calc(50% + 14px)}
.hbtn{transform:translate(-50%,-50%)}.hbtn:active{transform:translate(-50%,-50%) scale(.95)}

/* battle director */
.bw{position:relative;display:block}
.bw img{display:block}
.lid{position:absolute;display:block;background:#08050a;border-radius:5px;transform-origin:50% 0;transform:scaleY(0);pointer-events:none}
.skn{position:absolute;left:calc(var(--ox,0px)*-1);width:var(--vw,844px);top:74px;height:48px;display:flex;align-items:center;justify-content:center;pointer-events:none;animation:sknIn 1.7s cubic-bezier(.2,.8,.2,1) forwards}
.skn::before{content:'';position:absolute;left:-12%;right:-12%;top:0;bottom:0;background:linear-gradient(90deg,rgba(7,4,15,0),rgba(7,4,15,.86) 20%,rgba(7,4,15,.86) 80%,rgba(7,4,15,0));border-top:1px solid rgba(255,214,120,.75);border-bottom:1px solid rgba(255,214,120,.75);transform:skewX(-14deg)}
.skn b{position:relative;font-size:26px;font-weight:700;letter-spacing:.05em;color:#fff6dc;text-shadow:0 0 14px var(--skc,#ffd27a),0 2px 3px #000}
@keyframes sknIn{0%{opacity:0;transform:translateX(-90px)}12%,76%{opacity:1;transform:none}100%{opacity:0;transform:translateX(70px)}}
.dmg.big{font-size:40px;color:#fff3c4;text-shadow:0 0 12px #ffb52e,-1px 0 #1a1230,1px 0 #1a1230,0 -1px #1a1230,0 1px #1a1230}
.dmg.big.crit{font-size:46px}
#bbg{transform:scale(1.05)}

.hpl{background:none!important;border:0!important;box-shadow:none!important;min-width:0!important;border-radius:0!important}.hpl .xpbar{display:none}.hpl b.ol,.hpl .lvchip{text-shadow:0 1px 3px #000,0 0 6px #000}
.hpbox .nm .elic{display:inline-block;vertical-align:-4px;margin-right:4px}

/* ---- summon ritual ---- */
#gacha{position:fixed;inset:0;z-index:99990;background:#030208;display:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#gacha.on{display:block}
#gacha .gst{position:absolute;left:0;top:0;width:844px;height:390px;transform-origin:0 0;overflow:hidden}
#gacha canvas{position:absolute;inset:0;width:844px;height:390px}
#gacha .gtitle{position:absolute;left:0;right:0;top:28px;text-align:center;font-size:18px;font-weight:700;color:#fff3c8;letter-spacing:.06em;text-shadow:0 2px 10px #000;transition:opacity .3s;animation:gpulse 1s ease-in-out infinite}
@keyframes gpulse{50%{opacity:.55}}
#gacha .gres{position:absolute;left:322px;top:62px;width:200px;height:200px;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none}
#gacha .gres.show{animation:gpop .75s cubic-bezier(.2,1.1,.3,1.25) forwards}
@keyframes gpop{0%{opacity:0;transform:scale(.1) translateY(30px)}55%{opacity:1;transform:scale(1.22) translateY(-6px)}100%{opacity:1;transform:scale(1) translateY(0)}}
#gacha .gimg{width:190px;height:190px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(255,255,255,.35));animation:gfloat 2.6s ease-in-out .8s infinite}
@keyframes gfloat{50%{transform:translateY(-6px)}}
#gacha .gmed{width:128px;height:128px;filter:drop-shadow(0 0 22px rgba(255,255,255,.4))}
#gacha .gtag{position:absolute;right:6px;top:8px;padding:2px 8px;border-radius:8px;font-size:12px;font-weight:800;transform:rotate(8deg)}
#gacha .gtag.new{background:#ffd34e;color:#3a2200;box-shadow:0 0 14px #ffd34e}
#gacha .gtag.dup{background:#4a5568;color:#e2e8f0}
#gacha .gname{position:absolute;left:0;right:0;top:272px;text-align:center;font-size:28px;font-weight:800;opacity:0;text-shadow:0 2px 0 #000,0 0 18px currentColor}
#gacha .gname.show{animation:gname .5s .35s ease-out forwards}
@keyframes gname{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
#gacha .gsub{position:absolute;left:0;right:0;top:312px;text-align:center;font-size:13px;color:#fff6dc;text-shadow:0 1px 6px #000;display:flex;gap:6px;align-items:center;justify-content:center}
#gacha .gel{width:22px;height:22px}
#gacha .ghint{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:12px;color:#fff;opacity:.7;letter-spacing:.05em}
#gacha .gmed svg{width:150px;height:150px;display:block}#gacha .gmed{width:150px;height:150px}
#gacha .gmed{transform:scale(1.45);transform-origin:50% 50%}

.fx{gap:3px!important;top:50px!important}
.fx .sti{position:relative;display:block;width:22px;height:22px;background:none!important;border:0!important;padding:0!important;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));animation:stp 1.4s ease-in-out infinite}
.fx .sti svg{display:block}
.fx .sti b{position:absolute;right:-3px;bottom:-3px;min-width:11px;height:11px;border-radius:6px;background:#140d2c;border:1px solid #e0b24a;color:#fff3c8;font-size:8px;line-height:9px;text-align:center;font-weight:800;padding:0 1px}
@keyframes stp{50%{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.fx .sti{animation:none}}

/* grounded monsters */
.hc .mon.hbr{animation:hbr 3.6s ease-in-out infinite;transform-origin:50% 100%;filter:drop-shadow(0 1px 1px rgba(20,8,36,.35))}
@keyframes hbr{0%,100%{transform:scale(1,1)}50%{transform:scale(.992,1.018)}}
@media (prefers-reduced-motion:reduce){.hc .mon.hbr{animation:none}}
.hsh{background:radial-gradient(ellipse at 50% 50%,rgba(14,4,28,.85) 0,rgba(14,4,28,.62) 38%,rgba(14,4,28,.26) 64%,rgba(14,4,28,0) 84%)!important}
.bsh{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(6,4,14,.92) 0,rgba(6,4,14,.72) 38%,rgba(6,4,14,.34) 64%,rgba(6,4,14,0) 84%);will-change:transform,opacity;transform-origin:50% 50%}
.bmon{filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))!important}

/* ---- world map ---- */
.wm{position:absolute;inset:0;overflow:hidden;background:#0b0818}
.wm .bg{z-index:0}
.wmmap{position:absolute;inset:0;z-index:1;touch-action:pan-y}
.wmart{position:absolute;inset:0;background-size:cover,cover;background-position:center,center;background-repeat:no-repeat}
.wmart.tall{background-size:100% 100%,844px auto;background-repeat:no-repeat,repeat-y}
.wmshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,5,22,.55),rgba(8,5,22,0) 20%,rgba(8,5,22,0) 78%,rgba(8,5,22,.5));pointer-events:none}
.wmsvg{position:absolute;left:0;top:0;width:844px;height:390px;pointer-events:none;overflow:visible}
.wmroad0{fill:none;stroke:rgba(12,6,28,.62);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.wmroad1{fill:none;stroke:rgba(255,240,200,.55);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 9}
.wmgold{fill:none;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,220,130,.9))}
.wmn{position:absolute;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;padding:0;border:2.5px solid #c8932a;background:radial-gradient(circle at 50% 30%,#5a479a,#1a1230 78%);color:#fff3d0;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 6px rgba(0,0,0,.6);z-index:3}
.wmn span{text-shadow:0 1px 2px #000}
.wmn.boss{width:52px;height:52px;border-color:#ff9a5e;background:radial-gradient(circle at 50% 30%,#8a3a3a,#2a0f1a 78%);box-shadow:0 0 16px rgba(255,120,60,.7),0 3px 6px rgba(0,0,0,.6)}
.wmn.done{border-color:#f2c14e;background:radial-gradient(circle at 50% 30%,#7a62c4,#2a1c52 78%)}
.wmn.lock{border-color:#6b6482;background:#241d38;filter:saturate(.4) brightness(.85)}
.wmn.cur{width:42px;height:42px;border-color:#fff3c4;box-shadow:0 0 0 3px rgba(255,243,196,.35),0 0 18px rgba(242,193,78,.95);animation:wmpulse 1.6s ease-in-out infinite}
.wmn.boss.cur{width:58px;height:58px}
@keyframes wmpulse{50%{box-shadow:0 0 0 7px rgba(255,243,196,.12),0 0 26px rgba(242,193,78,1)}}
.wmk{position:absolute;right:-5px;bottom:-4px;width:15px;height:15px;border-radius:50%;background:#3ddc97;color:#06281a;font-size:10px;font-style:normal;line-height:15px;text-align:center;font-weight:900;border:1px solid #06281a}
.wmtok{position:absolute;width:0;height:0;z-index:4;pointer-events:none}
.wmtok img{position:absolute;left:-26px;bottom:20px;width:52px;height:52px;object-fit:contain;transform-origin:50% 100%;animation:hbr 3.6s ease-in-out infinite}
.wmtok .wmsh{position:absolute;left:-17px;top:-30px;width:34px;height:9px;border-radius:50%;background:radial-gradient(ellipse,rgba(6,4,14,.8),rgba(6,4,14,0) 75%)}
.wmb{position:absolute;z-index:5;pointer-events:none;padding:4px 9px 5px;border-radius:10px;background:rgba(20,13,44,.92);border:1px solid #e0b24a;box-shadow:0 3px 8px rgba(0,0,0,.5);font-size:11px;line-height:1.35;text-align:center}
.wmb b{display:block;color:#f2c14e;font-size:11px}.wmb b em{font-style:normal;background:#ff7a4a;color:#2a0c05;border-radius:5px;padding:0 4px;font-size:9px;margin-left:3px}
.wmb span{display:flex;align-items:center;justify-content:center;gap:4px;color:#fff6dc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wmb span i{font-style:normal;opacity:.8}
.wmb:after{content:'';position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:#e0b24a}
.wmb.below:after{bottom:auto;top:-6px;border-top:0;border-bottom:6px solid #e0b24a;border-color:transparent;border-bottom-color:#e0b24a}
.wmtop{position:absolute;left:0;right:0;top:0;height:46px;z-index:8;display:flex;align-items:center;justify-content:center;gap:10px;pointer-events:none;background:linear-gradient(180deg,rgba(8,5,22,.7),rgba(8,5,22,0))}
.wmttl{text-align:center;line-height:1.2}.wmttl b{font-size:18px;color:#f2c14e;display:block}.wmttl small{font-size:10px;color:rgba(255,246,220,.8)}
.wmar{pointer-events:auto;width:34px;height:34px;border-radius:50%;border:1px solid rgba(242,193,78,.6);background:rgba(36,26,69,.9);color:#f2c14e;font-size:22px;line-height:28px;padding:0}.wmar:disabled{opacity:.3}
.wmtw{position:absolute;left:14px;top:8px;z-index:9;height:32px;padding:0 14px;border-radius:16px;border:1px solid #e3b04b;background:rgba(36,26,69,.92);color:#f2c14e;font-weight:700;font-size:12px;display:flex;align-items:center;gap:6px}
.wmdots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px;z-index:8;pointer-events:none}
.wmdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28)}.wmdots i.un{background:rgba(242,193,78,.55)}.wmdots i.on{background:#fff3c4;box-shadow:0 0 6px #f2c14e;transform:scale(1.3)}
.wmscroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;z-index:1;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior:contain}.wmscroll::-webkit-scrollbar{display:none}
.wmtall{position:relative;width:844px}
.wmtall .wmsh{display:block}
.wmb.side:after{display:none}.wmb{font-size:10.5px}

.archchip{display:inline-block;font-size:9px;font-weight:700;color:var(--ac);border:1px solid var(--ac);border-radius:5px;padding:0 4px;margin-right:3px;line-height:13px;background:rgba(10,6,24,.55);vertical-align:1px;white-space:nowrap}

.slots{display:flex;gap:6px}
.slot{flex:1;display:flex;align-items:center;gap:5px;height:42px;padding:2px 5px;border-radius:10px;border:1px solid rgba(242,193,78,.35);background:rgba(10,16,30,.72);color:#fff6dc;font:inherit;text-align:left;min-width:0}
.slot.cur{border-color:#f2c14e;box-shadow:0 0 0 1px rgba(242,193,78,.5) inset}
.slot img{width:32px;height:32px;object-fit:contain;flex:none}
.slot i{width:32px;height:32px;flex:none;border-radius:50%;border:1px dashed rgba(255,246,220,.45);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:18px;color:rgba(255,246,220,.6)}
.slot span{display:flex;flex-direction:column;min-width:0;line-height:1.15}.slot b{font-size:10px;color:#f2c14e}.slot small{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sups{position:absolute;left:10px;top:68px;display:flex;flex-direction:column;gap:6px}
.sup{position:relative;width:36px;height:36px;border-radius:50%;background:conic-gradient(var(--ac) var(--p,0%),rgba(8,10,22,.8) 0);padding:3px;box-sizing:border-box;opacity:.85}
.sup i{display:block;width:100%;height:100%;border-radius:50%;background:#0f1628 center 14%/165% no-repeat}
.sup.rdy{opacity:1;box-shadow:0 0 8px var(--ac)}
.apop{position:absolute;left:0;top:112px;display:flex;align-items:center;gap:8px;padding:5px 18px 5px 6px;background:linear-gradient(90deg,rgba(7,4,15,.92),rgba(7,4,15,.7) 80%,rgba(7,4,15,0));border-left:3px solid var(--ac);pointer-events:none;animation:apIn 1.5s cubic-bezier(.2,.8,.2,1) forwards}
.apop i{width:42px;height:42px;border-radius:50%;border:2px solid var(--ac);background:#0f1628 center 14%/165% no-repeat}
.apop small{display:block;font-size:10px;color:var(--ac)}.apop b{font-size:15px;color:#fff6dc;text-shadow:0 1px 3px #000}
@keyframes apIn{0%{transform:translateX(-120%);opacity:0}15%{transform:none;opacity:1}80%{transform:none;opacity:1}100%{transform:translateX(-30%);opacity:0}}
.hsup{position:absolute;top:22px;width:22px;height:22px;font-size:12px;border-radius:50%;object-fit:contain;background:rgba(10,16,30,.7);border:1px solid rgba(242,193,78,.5)}
.hsup.e{display:flex;align-items:center;justify-content:center;font-size:14px;color:rgba(255,246,220,.5);border-style:dashed}

/* ---------- monster page (full screen, art-first layout) ---------- */
.pg{position:absolute;left:0;top:0;width:844px;height:390px;overflow:hidden;color:#fff6dc;background:#0d0a1e}
.pgbg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(9px) brightness(.3) saturate(1.15);transform:scale(1.1)}
.pgbg:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 66% 40%,rgba(120,90,220,.28),transparent 60%)}
.pgart{position:absolute;left:230px;right:0;top:0;bottom:0;overflow:hidden}
.pgart>img{position:absolute;left:58%;top:8px;transform:translateX(-50%);height:158%;width:auto;max-width:none;filter:drop-shadow(0 8px 18px rgba(0,0,0,.6))}
.pgart.wide>img{height:auto;max-height:76%;max-width:70%;top:auto;bottom:78px;left:58%}
.pgart:after{content:'';position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(180deg,transparent,rgba(13,10,30,.92))}
.pgshade{position:absolute;left:0;top:0;bottom:0;width:372px;background:linear-gradient(90deg,rgba(13,10,30,.94) 0%,rgba(13,10,30,.82) 62%,rgba(13,10,30,0));pointer-events:none}
.pgm{position:absolute;left:16px;top:12px;width:330px;height:306px;display:flex;flex-direction:column;gap:6px}
.pgn{font-size:22px;font-weight:700;line-height:1.1}
.pgsub{display:flex;align-items:center;gap:6px;margin-top:3px}
.pglv{display:flex;gap:12px;align-items:center;padding:6px 0;border-top:1px solid rgba(242,193,78,.35);border-bottom:1px solid rgba(242,193,78,.2)}
.pgring{position:relative;flex:0 0 62px;width:62px;height:62px}
.pgring svg{position:absolute;inset:0}
.pgring b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:17px;line-height:1;color:#ffe9a8}
.pgring b small{font-size:8px;color:rgba(255,246,220,.7);margin-bottom:2px;font-weight:600;letter-spacing:.08em}
.pgs{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:3px 14px}
.pgs span{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;color:rgba(255,246,220,.72);border-bottom:1px solid rgba(255,246,220,.12);padding-bottom:1px}
.pgs b{font-size:12px;color:#fff6dc}
.pgk{display:flex;flex-direction:column;gap:0;flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin}
.pgr{display:flex;gap:9px;align-items:flex-start;padding:5px 0;border-bottom:1px solid rgba(242,193,78,.18)}
.pgr.off{opacity:.6}
.pgr b{font-size:12.5px;display:flex;align-items:center;gap:6px;line-height:1.2}
.pgr p{margin:2px 0 0;font-size:10px;line-height:1.32;color:rgba(255,246,220,.82)}
.pgr em{font-style:normal;font-size:9px;font-weight:700;padding:1px 6px;border-radius:5px;color:#1a1305}
.pgr em.u{background:#c8a4ff}.pgr em.b{background:#9fd0ff}.pgr em.a{background:#ffb35e}
.pgsk{flex:0 0 34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #e3b04b;background:radial-gradient(circle at 35% 30%,#4a3a86,#1c1540);box-shadow:0 0 8px rgba(160,120,255,.35)}
.pgsk.u i{font-style:normal;font-size:17px;color:#d9c0ff}.pgsk.off{filter:grayscale(.8)}
.pgsup{font-size:10px;line-height:1.3;padding:4px 0 0;color:rgba(255,246,220,.85)}
.pgsup .ar{font-weight:700;color:#8fe8d8;margin-right:6px}
.pgt{position:absolute;right:62px;top:12px;display:flex;gap:7px}
.pgslot{position:relative;width:50px;height:58px;border-radius:10px;border:1px solid rgba(242,193,78,.5);background:rgba(14,10,32,.72);color:#fff6dc;padding:0}
.pgslot.cur{border-color:#ffe9a8;box-shadow:0 0 10px rgba(242,193,78,.55)}
.pgslot img{position:absolute;left:5px;top:2px;width:40px;height:36px;object-fit:contain}
.pgslot i{position:absolute;left:0;right:0;top:7px;font-style:normal;font-size:22px;color:rgba(255,246,220,.45)}
.pgslot small{position:absolute;left:0;right:0;bottom:3px;font-size:9px;font-weight:600;color:#ffe9a8}
.pgslot.main{border-color:#f2c14e}
.pgev{position:absolute;right:16px;bottom:86px;width:178px;height:38px;font-size:12.5px}
.pgdesc{position:absolute;right:16px;bottom:128px;width:240px;text-align:right;font-size:10px;line-height:1.35;color:rgba(255,246,220,.7);text-shadow:0 1px 3px #000}
.pgl{position:absolute;left:10px;right:10px;bottom:8px;height:68px;display:flex;gap:8px;align-items:center;overflow-x:auto;overflow-y:hidden;padding:6px 8px;border-radius:14px;background:rgba(14,10,32,.78);border:1px solid rgba(242,193,78,.45);scrollbar-width:thin}
.pgi{position:relative;flex:0 0 54px;width:54px;height:54px;border-radius:11px;border:2px solid rgba(242,193,78,.4);background:linear-gradient(180deg,#2c2257,#171232);padding:0;overflow:hidden;color:#fff6dc}
.pgi img{position:absolute;left:3px;top:1px;width:44px;height:42px;object-fit:contain}
.pgi b{position:absolute;left:0;right:0;bottom:1px;text-align:center;font-size:9px;font-weight:600;color:#ffe9a8;text-shadow:0 1px 2px #000}
.pgi.cur{border-color:#ffe9a8;box-shadow:0 0 12px rgba(242,193,78,.75);transform:translateY(-3px)}
.pgi.lock{display:flex;align-items:center;justify-content:center;font-size:17px;color:rgba(255,246,220,.28);border-style:dashed;background:rgba(10,16,30,.4)}
.pgi .r{position:absolute;right:2px;top:2px;font-style:normal;font-size:9px;font-weight:700;line-height:13px;min-width:13px;padding:0 3px;border-radius:7px;text-align:center;color:#1a1305;background:#f2c14e}
.pgi .r.s{background:#8fe8d8}
.pgm{top:8px;height:304px;gap:4px;width:336px}.pgn{font-size:20px}.pglv{padding:4px 0}.pgring{flex-basis:52px;width:52px;height:52px}.pgring b{font-size:15px}
.pgr{padding:4px 0}.pgr p{font-size:9.5px;line-height:1.28}.pgsk{flex-basis:30px;height:30px}.pgdesc{display:none}
.pgart>img{left:62%}
/* v2: art left, info right, buttons above roster strip */
.pgart{left:0;right:auto;width:440px}
.pgart>img{left:50%;height:150%}
.pgart.wide>img{left:50%;max-width:78%}
.pgart:after{background:linear-gradient(180deg,transparent,rgba(13,10,30,.92))}
.pgshade{left:auto;right:0;width:430px;background:linear-gradient(270deg,rgba(13,10,30,.95) 0%,rgba(13,10,30,.85) 70%,rgba(13,10,30,0))}
.pgid{position:absolute;left:16px;top:10px;width:300px}
.pgid .pgring{position:relative;margin-top:8px}
.pgm{left:auto;right:58px;top:10px;width:350px;height:300px;gap:5px}
.pgs{display:grid;grid-template-columns:repeat(3,1fr);gap:3px 14px;flex:0 0 auto}
.pgk{flex:1 1 auto}
.pgsup{flex:0 0 auto}
.pgt{position:static;display:flex;gap:7px;align-items:center;flex:0 0 auto}
.pgtip{font-size:9px;line-height:1.35;color:rgba(255,246,220,.55)}
.pgbt{position:absolute;right:0;bottom:-6px;display:none}
.pgm .pgbt{display:flex}
.pgm{height:254px;right:62px}
.pgbt{display:flex!important;position:absolute;left:0;right:-46px;top:262px;gap:8px;align-items:center}
.pgbt .ghost,.pgbt .cta{position:relative}
.pgbt .ghost{flex:0 0 140px;height:40px;font-size:11.5px}
.pgbt .cta{flex:1;height:44px;font-size:17px;border-radius:24px;box-shadow:0 0 16px rgba(255,200,80,.55),0 3px 6px rgba(0,0,0,.5)}
.pgbt .cta:disabled{box-shadow:none;filter:grayscale(.6) brightness(.75)}
.pgr{padding:3px 0}.pgr p{font-size:9.5px}.pgslot{height:50px}.pgslot small{bottom:2px}
.pgk{max-height:150px}
.pgk{max-height:122px;flex:0 0 auto}.pgbt{top:264px}.pgsup{margin-top:-1px}.pgslot{height:46px}.pgslot img{height:30px;top:1px}.pgslot i{top:2px}
.pgk{max-height:138px}.pgm{gap:3px}.pgbt{top:268px}.pgs span{font-size:9.5px}.pgr{padding:2px 0}.pgr p{font-size:9px;line-height:1.25}.pgr b{font-size:12px}
.pgs{grid-template-columns:repeat(3,1fr);gap:5px}
.pgs span{display:block;padding:3px 8px 4px;border-radius:9px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,246,220,.16);border-left:3px solid var(--sc);font-size:inherit;color:inherit}
.pgs small{display:block;font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--sc);line-height:1.1}
.pgs b{display:block;font-size:17px;line-height:1.1;color:#fff6dc;font-variant-numeric:tabular-nums}
.pgk{max-height:132px}.pgbt{top:268px}
.pgtip{font-size:9px;line-height:1.3;color:rgba(255,246,220,.85);flex:1}
.pgtip b{display:block;color:#8fe8d8;font-size:9.5px;margin-bottom:1px}
.pgs{gap:4px}.pgs span{padding:2px 8px 3px}.pgs b{font-size:15px}.pgs small{font-size:8.5px}
.pgm{right:66px;width:346px}.pgk{max-height:126px}.pgbt{top:272px;right:-50px}
/* v4: plain stats, 3 buttons */
.pgs{gap:2px 8px;padding-bottom:5px;border-bottom:1px solid rgba(242,193,78,.3)}
.pgs span{background:none;border:0;border-radius:0;padding:0 2px;display:flex;align-items:baseline;gap:6px}
.pgs small{flex:0 0 36px;font-size:9px;color:var(--sc)}
.pgs b{font-size:15px;margin-left:auto}
.pgbt{gap:6px}
.pgbt .ghost{flex:0 0 96px;height:40px;font-size:10.5px;line-height:1.15;white-space:normal;text-align:center;padding:0 6px}
.pgbt .ghost:first-child{border-color:#c8a4ff;color:#e6d4ff}
.pgbt .ghost{flex:0 0 100px;white-space:nowrap;flex-direction:column;gap:1px}
.pgbt .ghost+.ghost{flex:0 0 104px;white-space:normal}
/* v5: more breathing room */
.pgm{top:30px;gap:8px;height:240px}
.pgs{padding-bottom:7px;gap:3px 10px}
.pgk{max-height:112px;gap:2px}.pgr{padding:4px 0}
.pgbt{top:262px}
.pgm{top:22px;gap:6px;height:256px}
.pgk{max-height:none;flex:0 0 auto}.pgr{padding:3px 0}
.pgbt{top:262px}
.pgl{height:58px;bottom:6px;padding:4px 8px}.pgi{flex-basis:48px;width:48px;height:48px}.pgi img{width:40px;height:36px}
.pgbt .ghost{height:38px}.pgbt .cta{height:42px}
/* support picker */
.pgsw{position:relative}
.pgx{position:absolute;right:-5px;top:-5px;width:18px;height:18px;border-radius:50%;border:1px solid #ffb0b0;background:#4a1a22;color:#ffd0d0;font-size:12px;line-height:14px;padding:0}
.pgslot.pick{border-color:#8fe8d8;box-shadow:0 0 0 2px rgba(143,232,216,.5),0 0 14px rgba(143,232,216,.7);animation:pgpk 1s ease-in-out infinite}
@keyframes pgpk{50%{box-shadow:0 0 0 2px rgba(143,232,216,.9),0 0 20px rgba(143,232,216,.9)}}
.pghint{position:absolute;left:10px;right:10px;bottom:62px;height:24px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;border-radius:12px 12px 0 0;background:linear-gradient(90deg,rgba(60,170,150,.15),rgba(60,170,150,.55),rgba(60,170,150,.15));color:#fff6dc;z-index:3}
.pghint b{color:#8fe8d8}.pghint button{border:1px solid rgba(255,246,220,.5);background:rgba(14,10,32,.7);color:#fff6dc;border-radius:9px;font-size:10px;padding:1px 8px}
.pgl.picking{border-color:#8fe8d8;box-shadow:0 0 14px rgba(143,232,216,.45)}
.pgi.off{opacity:.35;filter:grayscale(.7)}
/* stars */
.pgstar{display:flex;gap:10px;align-items:center;margin-top:8px}
.pgstar .pgring{margin-top:0!important;flex:0 0 52px}
.pgsi{width:150px}
.pgstars{display:flex;gap:1px;font-size:15px;line-height:1}
.pgstars i{font-style:normal;color:rgba(255,246,220,.22)}.pgstars i.on{color:#ffd27a;text-shadow:0 0 6px rgba(255,200,80,.7)}
.pgsh{font-size:10px;color:rgba(255,246,220,.8);margin-top:2px}.pgsh b{color:#ffe9a8}
.pgsb{width:100%;height:22px;border-radius:11px;border:1px solid #ffd27a;background:linear-gradient(180deg,#5a3a10,#3a2408);color:#ffe9a8;font-size:11px;font-weight:700;padding:0}
.pgsb:not(:disabled){background:linear-gradient(180deg,#ffe9a8,#e3b04b);color:#2a1a05;box-shadow:0 0 10px rgba(255,200,80,.6)}
.pgsb:disabled{opacity:.6}
.pgi .st{position:absolute;left:3px;top:2px;text-decoration:none;font-size:9px;font-weight:700;color:#ffd27a;text-shadow:0 1px 2px #000}
/* tutorial overlay */
#tut{position:fixed;inset:0;z-index:9500;pointer-events:none;font-family:inherit}
#tut .tb{position:fixed;background:rgba(5,4,18,.66);pointer-events:auto}
#tut .tring{position:fixed;display:none;border:2px solid #f2c14e;border-radius:14px;box-shadow:0 0 0 2px rgba(242,193,78,.25),0 0 18px rgba(242,193,78,.7);pointer-events:none;animation:tutp 1.1s ease-in-out infinite}
@keyframes tutp{50%{box-shadow:0 0 0 6px rgba(242,193,78,.12),0 0 26px rgba(242,193,78,.95)}}
#tut .tbub{position:fixed;box-sizing:border-box;padding:12px 14px;border-radius:14px;background:linear-gradient(180deg,#2a2150,#171233);border:1.5px solid #f2c14e;color:#fff6dc;font-size:13px;line-height:1.55;box-shadow:0 6px 24px rgba(0,0,0,.55);pointer-events:auto}
#tut .tbub b{color:#f2c14e}#tut .tbub small{color:rgba(255,246,220,.7)}
#tut .tbtn{display:block;margin:10px 0 0 auto;padding:8px 18px;border:0;border-radius:10px;background:linear-gradient(180deg,#ffd978,#e9a830);color:#3a2300;font:700 13px inherit;cursor:pointer}
#tut .tskip{position:fixed;right:10px;top:8px;padding:5px 11px;border-radius:999px;border:1px solid rgba(255,246,220,.4);background:rgba(10,8,30,.7);color:rgba(255,246,220,.85);font-size:11px;pointer-events:auto;cursor:pointer}
/* shop / mail */
.shc{position:absolute;top:74px;width:184px;height:236px;border:1px solid #c8932a;border-radius:16px;background:linear-gradient(180deg,rgba(40,30,80,.85),rgba(19,15,43,.9));text-align:center;box-sizing:border-box}
.shc .shi{height:84px;display:flex;align-items:center;justify-content:center;margin-top:14px}
.shc .shn{font-size:17px;font-weight:700;margin-top:6px}
.shc .shd{font-size:11px;line-height:1.5;color:rgba(255,246,220,.75);margin-top:6px;padding:0 8px}
.shl{position:absolute;left:140px;top:62px;width:600px;height:66px;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden}
.shl .pgi{width:58px;height:58px;flex:none}
.mlist{position:absolute;left:18px;right:18px;top:60px;bottom:14px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.mrow{position:relative;padding:10px 100px 10px 14px;border-radius:12px;border:1px solid rgba(200,147,42,.55);background:rgba(19,15,43,.75)}
.mrow .mt{display:flex;gap:10px;align-items:baseline;font-size:14px}.mrow .mt span{font-size:10px;color:rgba(255,246,220,.55)}
.mrow .mb{font-size:11px;line-height:1.5;color:rgba(255,246,220,.8);margin-top:3px}
.mrow .mr{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.mrow .rwc{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(242,193,78,.14);border:1px solid rgba(242,193,78,.4)}.mrow .rwc b{color:#f2c14e}
.mrow .cta{position:absolute;right:12px;top:50%;margin-top:-20px;width:76px;height:40px;font-size:14px}
.mempty{text-align:center;margin-top:90px;color:rgba(255,246,220,.6);font-size:14px}
.hb .dot{position:absolute;width:9px;height:9px;border-radius:50%;background:#ff5a6e;box-shadow:0 0 6px #ff5a6e}
/* quests / check-in */
.ckg{position:absolute;left:140px;top:64px;width:600px;display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.ckc{position:relative;height:62px;border-radius:10px;border:1px solid rgba(200,147,42,.45);background:rgba(19,15,43,.75);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;overflow:hidden}
.ckc u{text-decoration:none;position:absolute;left:5px;top:2px;font-size:9px;color:rgba(255,246,220,.55)}
.ckc.td{border-color:#ffe28a;box-shadow:0 0 12px rgba(242,193,78,.8);background:rgba(70,48,14,.85)}
.ckc.dn{opacity:.5}.ckc s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:24px;text-decoration:none;color:#6df0b8;background:rgba(10,8,30,.45)}
.ri{display:inline-flex;align-items:center;gap:2px;font-size:10px;line-height:1.1;white-space:nowrap}
.ri img{width:16px;height:16px;object-fit:contain}.ri .gl{font-size:13px}.ri em{font-style:normal;font-weight:700}
.dpt{position:absolute;left:150px;top:70px;width:560px;height:58px}
.dpb{position:absolute;left:0;right:0;top:24px;height:8px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}.dpb i{display:block;height:100%;background:linear-gradient(90deg,#f2c14e,#ffe28a)}
.dpl{position:absolute;left:0;top:-4px;font-size:12px}
.chk{position:absolute;top:2px;width:60px;height:56px;border-radius:10px;border:1px solid rgba(200,147,42,.5);background:rgba(19,15,43,.9);color:#fff6dc;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;cursor:pointer;margin-left:-22px;transform:translateY(-2px)}
.chk span{font-size:10px;color:rgba(255,246,220,.7)}.chk.rd{border-color:#ffe28a;box-shadow:0 0 12px rgba(242,193,78,.8);animation:tutp 1.1s ease-in-out infinite}.chk.dn{opacity:.45}
.qlist{position:absolute;left:140px;right:22px;bottom:14px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.qrow{position:relative;height:42px;flex:none;border-radius:10px;border:1px solid rgba(200,147,42,.45);background:rgba(19,15,43,.75);display:flex;align-items:center;gap:10px;padding:0 10px}
.qrow.dn{opacity:.5}.qt{flex:1;min-width:0;position:relative}.qt b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qt span{font-size:10px;color:rgba(255,246,220,.6)}
.qb{height:3px;border-radius:2px;background:rgba(255,255,255,.12);margin-top:2px;overflow:hidden}.qb i{display:block;height:100%;background:#6df0b8}
.qr{display:flex;gap:8px;min-width:90px;justify-content:flex-end}
.qrow .cta{position:relative;width:70px;height:30px;font-size:12px;flex:none}.qrow .qd{width:70px;text-align:center;font-size:11px;color:rgba(255,246,220,.6)}
.dtab.off{opacity:.55}.ghost:disabled{filter:grayscale(.85) brightness(.7);cursor:not-allowed}
/* bag */
.bgt{position:absolute;left:22px;top:56px;width:720px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bgc{display:flex;align-items:center;gap:8px;height:50px;padding:0 10px;border-radius:10px;border:1px solid rgba(200,147,42,.45);background:rgba(19,15,43,.75);font-size:11px;position:relative}
.bgc img{width:26px;height:26px;object-fit:contain}.bgc .gl{font-size:20px;width:26px;text-align:center}.bgc span{flex:1;color:rgba(255,246,220,.75)}.bgc b:last-child{font-size:14px;color:#fff6dc}
.bgi{position:absolute;left:22px;top:204px;display:flex;gap:10px}
.bgit{position:relative;width:150px;height:116px;border-radius:12px;border:1px solid rgba(200,147,42,.55);background:rgba(19,15,43,.8);color:#fff6dc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:12px;cursor:pointer}
.bgit span{font-size:10px;color:rgba(255,246,220,.65)}.bgit em{position:absolute;right:8px;top:6px;font-style:normal;font-weight:700;color:#ffe28a;font-size:13px}.bgit:disabled{opacity:.45;cursor:not-allowed}
.bgp{position:absolute;left:18px;right:18px;top:56px;bottom:14px;overflow-y:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-content:start}
.bgm{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:10px;border:1px solid rgba(200,147,42,.4);background:rgba(19,15,43,.75);color:#fff6dc;font-size:10px;cursor:pointer}
.bgm img{width:52px;height:52px;object-fit:contain}.bgm b{font-weight:600;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bgm span{color:rgba(255,246,220,.7)}.bgm:disabled{opacity:.4}
/* raid */
.rdb{position:absolute;left:22px;top:56px;width:380px;height:232px}
.rdi{position:absolute;left:0;top:0;width:100%;height:150px;background:center/contain no-repeat;filter:drop-shadow(0 8px 12px rgba(0,0,0,.6))}
.rdn{position:absolute;left:0;right:0;top:150px;text-align:center;font-size:18px;font-weight:700}
.rdh{position:absolute;left:10px;right:10px;top:182px;height:18px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden;border:1px solid rgba(200,147,42,.6)}
.rdh i{display:block;height:100%;background:linear-gradient(90deg,#ff5a6e,#ff9a5a)}.rdh span{position:absolute;inset:0;text-align:center;font-size:11px;line-height:18px;font-weight:600}
.rds{position:absolute;left:0;right:0;top:206px;text-align:center;font-size:12px;color:rgba(255,246,220,.8)}
.rdm{position:absolute;left:430px;top:56px;width:312px}
.rdt{font-size:14px;font-weight:700;color:#f2c14e;margin-bottom:8px}
.rdr{display:flex;align-items:center;gap:10px;height:40px;margin-bottom:6px;padding:0 10px;border-radius:10px;border:1px solid rgba(200,147,42,.45);background:rgba(19,15,43,.75)}
.rdr b{width:44px;font-size:14px}.rdr .ri{flex:1;font-size:12px}.rdr button{position:relative;width:76px;height:30px;font-size:12px}.rdr.dn{opacity:.5}
/* arena */
.avt{position:absolute;left:22px;top:86px;display:flex;gap:8px}
.avs{position:relative;width:100px;height:176px;border-radius:12px;border:1px solid rgba(200,147,42,.55);background:rgba(19,15,43,.8);color:#fff6dc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;cursor:pointer}
.avs img{width:76px;height:76px;object-fit:contain}.avs b{font-weight:600;max-width:92px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.avs span{color:rgba(255,246,220,.7);font-size:10px}.avs em{position:absolute;left:6px;top:4px;font-style:normal;font-weight:700;color:#f2c14e;font-size:14px}.avs.e{opacity:.5;cursor:default}
.aop{position:absolute;left:366px;top:86px;width:376px;display:flex;flex-direction:column;gap:8px}
.aor{position:relative;height:72px;border-radius:12px;border:1px solid rgba(200,147,42,.5);background:rgba(19,15,43,.8);display:flex;align-items:center;gap:8px;padding:0 10px}
.aon{width:120px;font-size:12px}.aon b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aon span{font-size:10px;color:rgba(255,246,220,.7)}
.aot{display:flex;gap:2px;flex:1}.aot img{width:42px;height:42px;object-fit:contain}
.aor .cta{position:relative;width:64px;height:38px;font-size:15px;flex:none}
.pvr{display:flex;gap:6px}.pvm{position:relative;width:62px;height:62px;border-radius:10px;border:1px solid rgba(200,147,42,.5);background:rgba(19,15,43,.8);overflow:hidden}.pvm img{width:100%;height:100%;object-fit:contain}.pvm i{position:absolute;left:0;bottom:0;height:5px;background:#6df0b8}.pvm.dead{opacity:.35;filter:grayscale(1)}.pvm.cur{border-color:#ffe28a;box-shadow:0 0 8px rgba(242,193,78,.8)}
/* hidden menu / adventure hub */
.hmenu{position:absolute;inset:0;pointer-events:none;z-index:6}.hmenu[hidden]{display:none}.hmenu .hb{pointer-events:auto}
.hmx{position:absolute;inset:0;z-index:5}.hmx[hidden]{display:none}
.hc .hb{z-index:7}
.mdr{position:absolute;left:20px;right:20px;top:56px;bottom:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mdc{position:relative;border-radius:16px;border:1px solid #c8932a;background:linear-gradient(180deg,rgba(54,36,102,.9),rgba(22,14,48,.92));color:#fff6dc;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding:14px 10px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.mdc:active{transform:scale(.97)}.mdi{height:96px;display:flex;align-items:center;justify-content:center}.mdi img{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.mgl{font-size:56px;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.6)}.hdock .mgl{font-size:36px;height:46px;display:flex;align-items:center}
.mdc b{font-size:18px}.mdc span{font-size:11px;line-height:1.4;color:rgba(255,246,220,.75);text-align:center}.mdc em{font-style:normal;margin-top:auto;font-size:11px;color:#ffe28a;text-align:center;padding:4px 8px;border-radius:999px;background:rgba(242,193,78,.12);border:1px solid rgba(242,193,78,.4)}
.pvh{position:absolute;left:0;right:0;top:66px;display:flex;justify-content:center;align-items:center;gap:10px;pointer-events:none}
.pvh .pvm{width:30px;height:30px;border-radius:7px}.pvh b{font-size:11px;color:#f2c14e}.pvh .pvr{gap:3px}
.mdc b.mgl{font-size:60px;line-height:1}.hdock button b.mgl{font-size:40px;height:46px;display:flex;align-items:center;justify-content:center;line-height:1}
.pvh{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;left:50%;right:auto;width:200px;margin-left:-100px;top:64px}
.pvh .pvr{gap:3px}.pvh .pvr:first-child{justify-content:flex-end}.pvh .pvr:last-child{justify-content:flex-start}
.pvh .pvm{width:22px;height:22px;border-radius:6px}.pvh .pvm i{height:3px}.pvh b{font-size:10px;text-align:center}
.hdock{left:3%;width:56%;grid-template-columns:repeat(6,1fr)}
.hdock{left:4%;width:46%}
.stlab{position:absolute;left:84.5%;top:72%;transform:translateX(-50%);font-size:13px;font-weight:700;color:#fff3cf;text-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.8);white-space:nowrap;z-index:4;cursor:pointer;padding:4px 10px}
.hname{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700;line-height:1.2;padding:3px 12px;border:1px solid #e3b04b;border-radius:12px;background:linear-gradient(180deg,rgba(52,36,96,.92),rgba(30,20,60,.92));box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,230,160,.12)}
#screen.scn{animation:scnIn .55s ease-out}
@keyframes scnIn{from{opacity:0}to{opacity:1}}
#modal.mpop .panel{animation:fadeIn .3s ease-out}
#modal.mpop .dim{animation:fadeIn .3s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.hmenu .hb{animation:mIn .32s ease-out both}
@keyframes mIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.panel.bgp::after,.panel.rs-win::after,.panel.rs-lose::after{content:"";position:absolute;inset:5px;border-radius:10px;z-index:-1;background-size:cover;background-position:center;pointer-events:none}
.panel.bg-shop::after{background-image:linear-gradient(180deg,rgba(22,14,48,.4),rgba(14,10,32,.7)),url(../assets/bg-shop.webp)}
.panel.bg-hall::after{background-image:linear-gradient(180deg,rgba(22,14,48,.45),rgba(14,10,32,.72)),url(../assets/bg-hall.webp)}
.panel.bg-arena::after{background-image:linear-gradient(180deg,rgba(22,14,48,.35),rgba(14,10,32,.7)),url(../assets/bg-arena.webp)}
.panel.bg-raid::after{background-image:linear-gradient(180deg,rgba(22,14,48,.35),rgba(14,10,32,.7)),url(../assets/bg-raid.webp)}
.panel.bg-ck::after{background-image:linear-gradient(180deg,rgba(22,14,48,.45),rgba(14,10,32,.85)),url(../assets/scene-checkin.webp)}
.panel.rs-win::after{background-image:linear-gradient(180deg,rgba(22,14,48,.35),rgba(14,10,32,.82)),url(../assets/scene-victory.webp);background-size:cover;background-position:center}
.panel.rs-lose::after{background-image:linear-gradient(180deg,rgba(22,14,48,.45),rgba(14,10,32,.85)),url(../assets/scene-defeat.webp);background-size:cover;background-position:center}
.panel.pop{animation:fadeIn .4s ease-out both}

.rkb{min-width:86px;height:30px;padding:0 12px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;letter-spacing:.5px;color:#fff;border:1.5px solid rgba(255,255,255,.55);text-shadow:0 1px 2px rgba(0,0,0,.6);box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35)}
.rkb.r0{background:linear-gradient(180deg,#8e8a99,#5a566a)}.rkb.r1{background:linear-gradient(180deg,#c98a4b,#7a4a22)}.rkb.r2{background:linear-gradient(180deg,#d8dde8,#7f8798)}.rkb.r3{background:linear-gradient(180deg,#ffd45a,#b07a0e)}.rkb.r4{background:linear-gradient(180deg,#5fe3d4,#17847f)}.rkb.r5{background:linear-gradient(180deg,#7fb6ff,#3a5fd0)}.rkb.r6{background:linear-gradient(180deg,#e58bff,#7c2bc0);box-shadow:0 0 12px rgba(220,130,255,.7),0 2px 6px rgba(0,0,0,.4)}
.rkp{width:90px;height:6px;border-radius:3px;background:rgba(0,0,0,.45);overflow:hidden;border:1px solid rgba(255,255,255,.25)}.rkp i{display:block;height:100%;background:linear-gradient(90deg,#f2c14e,#ffe9a0)}
.rkl{font-size:11px;line-height:1.55;background:rgba(10,8,28,.55);border:1px solid rgba(200,147,42,.4);border-radius:10px;padding:6px 10px}.rkl b{color:#f2c14e;font-size:12px}.rkl em{font-style:normal;background:#e8456b;color:#fff;border-radius:8px;padding:0 6px;font-size:10px;margin-left:4px}
.rkl div{display:flex;gap:6px}.rkl div span{font-weight:700}.rkl .w span{color:#6df0b8}.rkl .l span{color:#ff8aa5}.rkl i{margin-left:auto;font-style:normal}.rkl .n{opacity:.7;font-size:10px}
.panel>.rbtn[aria-label="ปิด"]{left:auto!important;right:12px;top:10px;width:38px;height:38px;border-radius:19px}
.panel>.rbtn[aria-label="ปิด"] svg{width:18px;height:18px}
.rc0{color:#e6e9f2!important}.rc1{color:#6dbcff!important}.rc2{color:#cf8cff!important}.rc3{color:#ffbf45!important;text-shadow:0 0 8px rgba(255,170,40,.55)}
.rar{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:1px 8px;border-radius:9px;border:1px solid currentColor;background:rgba(0,0,0,.35);line-height:14px;vertical-align:middle;text-shadow:none}
.pgrar{margin-top:2px}.stx{color:#ffd45a;font-weight:700}
.pgs{position:relative}.pgbang{position:absolute;right:-2px;top:-17px;width:18px;height:18px;border-radius:9px;border:1px solid #e3b04b;background:rgba(36,26,69,.95);color:#f2c14e;font-weight:800;font-size:11px;padding:0;line-height:16px;z-index:3}
.pgi .pst{position:absolute;left:3px;top:2px;font-size:8.5px;font-weight:700;color:#ffd45a;text-shadow:0 1px 2px #000}
.pgi .upb{position:absolute;right:3px;bottom:12px;font-style:normal;font-size:9px;color:#6df0b8;text-shadow:0 1px 2px #000;animation:upb 1s ease-in-out infinite alternate}
@keyframes upb{to{transform:translateY(-2px)}}
.pgi .rbar{position:absolute;left:0;right:0;bottom:0;height:3px;background:currentColor;text-decoration:none}
.card .n.rc0,.card .n.rc1,.card .n.rc2,.card .n.rc3{}
.eggr{display:flex;gap:10px;justify-content:center;font-size:11px;flex-wrap:wrap}.eggr b{font-weight:800}.eggr small{opacity:.65}
.sinf{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.sinf span{padding:2px 8px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,246,220,.16)}.sinf small{display:block;font-size:9.5px;color:rgba(255,246,220,.65)}.sinf b{font-size:13px}
.rtl{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,246,220,.12);padding:0 2px}.rtl b{font-weight:800}
.hmenu .hb{justify-content:flex-start;padding:0 8px 0 36px;gap:4px;overflow:visible}
.hmenu .hb .mi,.hb .mi{position:absolute;left:3px;top:50%;width:30px;height:30px;transform:translateY(-52%);object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));pointer-events:none}
.tab .mi{position:absolute;left:6px;top:50%;width:26px;height:26px;transform:translateY(-52%);object-fit:contain;pointer-events:none}
.tab:has(.mi){padding-left:38px!important}
.pop2{position:absolute;inset:0;z-index:60}.pop2 .dim{position:absolute;inset:0;background:rgba(6,4,18,.55)}
.spk{display:flex;align-items:center;gap:10px;padding:7px 10px;margin-bottom:6px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,246,220,.14);font-size:12px}
.spk .spks{color:rgba(255,246,220,.3);font-size:13px;min-width:80px}.spk.on{border-color:rgba(255,212,90,.6);background:rgba(255,212,90,.1)}.spk.on .spks{color:#ffd45a;text-shadow:0 0 6px rgba(255,200,80,.6)}
.spk em{margin-left:auto;font-style:normal;font-size:10px;opacity:.75}
.pgstars{cursor:pointer}.pgstars i{font-style:normal}.pgsh.nx{font-size:9.5px;color:#ffe9a8;margin:2px 0 3px;line-height:1.3}
.pgel{display:inline-flex;vertical-align:-5px;margin-right:6px}
.stx{color:#ffd45a!important;text-shadow:0 0 4px rgba(255,190,60,.6);letter-spacing:-1px}
.rkimg{display:flex;flex-direction:column;align-items:center;margin-top:-2px}.rkimg img{width:46px;height:46px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.rkn{font-size:11px;font-weight:800;margin-top:-6px;text-shadow:0 1px 3px #000;color:#fff6dc}
.hname{background:url(../assets/ui-namebar.webp) center/100% 100% no-repeat!important;border:0!important;box-shadow:none!important;min-width:104px;height:30px;padding:0 20px!important;display:flex;align-items:center;justify-content:center;font-size:12.5px}
.xsg{position:absolute;left:24px;top:56px;width:716px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.xsc{position:relative;height:136px;border-radius:12px;border:1px solid rgba(200,147,42,.7);background:linear-gradient(180deg,rgba(40,30,80,.82),rgba(19,15,43,.9));text-align:center;padding:8px 6px 0;box-sizing:border-box}
.xsi{height:46px;display:flex;align-items:center;justify-content:center}.xsi img{height:44px;width:auto}
.xsn{font-size:12.5px;font-weight:700;margin-top:2px}.xsl{font-size:9.5px;color:rgba(255,246,220,.7);margin-top:1px}
.xsc .cta{position:absolute;left:10px;right:10px;bottom:8px;height:32px;font-size:13px;display:flex;align-items:center;justify-content:center;gap:4px}
.xsc .cta img{width:20px;height:20px}.xent img{width:22px;height:22px;margin-right:4px}.xent{display:flex;align-items:center;justify-content:center}
.xpk{position:absolute;left:16px;right:16px;top:50px;bottom:14px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;overflow-y:auto}
.xpk .pgi{flex:0 0 64px;width:64px;height:70px}.xpk .pgi b{font-size:8.5px}
.dot{position:absolute;width:10px;height:10px;border-radius:50%;background:#ff4d5e;border:1.5px solid #fff3d8;box-shadow:0 0 6px rgba(255,77,94,.85);pointer-events:none;z-index:4}
.hb .dot{background:#ff4d5e;box-shadow:0 0 6px rgba(255,77,94,.85)}
.tab .dot{left:auto!important;right:8px!important;top:6px!important}
.hmenu .hb{display:none}
.hmpop{position:absolute;left:7%;top:27%;width:156px;padding:8px 8px 6px;border-radius:14px;border:1.5px solid #c8932a;background:linear-gradient(180deg,rgba(43,32,82,.96),rgba(23,18,46,.96));box-shadow:0 6px 16px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,236,170,.22);pointer-events:auto;display:flex;flex-direction:column;gap:3px;animation:fadeIn .22s ease-out}
.hmi{position:relative;display:flex;align-items:center;gap:8px;height:33px;padding:0 10px 0 4px;border:0;border-radius:9px;background:transparent;color:#fff6dc;font-size:13px;font-weight:600;text-align:left;animation:mIn .3s ease-out both}
.hmi:active,.hmi:hover{background:rgba(242,193,78,.16)}
.hmi img{width:30px;height:30px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.hmi+.hmi{border-top:1px solid rgba(255,236,170,.1)}
.hmi .dot{right:10px;top:50%;margin-top:-5px}
.dtab .mi{position:absolute;left:8px;top:50%;width:34px;height:34px;transform:translateY(-50%);object-fit:contain;pointer-events:none}
.dtab{padding-left:46px!important}.dtab .mi{width:32px;height:32px}
.rwl{position:absolute;left:20px;right:20px;top:52px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.rwi{width:108px;text-align:center}.rwic{height:56px;display:flex;align-items:center;justify-content:center}.rwic img{height:50px;width:auto;max-width:64px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}.rwic b{font-size:34px}
.rwi b{display:block;font-size:12px;margin-top:2px}.rwi em{font-style:normal;color:#ffe9a8;font-weight:800;font-size:15px}
.rwp{animation:fadeIn .25s ease-out}
.tab:has(.mi),.dtab{padding-left:0!important}
.dunico{position:absolute;right:76px;top:2px;width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));pointer-events:none}
.qall{position:absolute;right:62px;top:8px;width:128px;height:34px;font-size:14px;display:flex;align-items:center;justify-content:center}
/* polish 76b */
.hname{min-width:128px!important;height:36px!important;font-size:14px!important;max-width:170px!important}
.rds{top:210px;line-height:1.5;padding:0 14px}
.dock button[data-act=tower] img,.hdock button[data-act=tower] img{transform:scale(1.28)}
.dock button[data-act=dungeon] img,.hdock button[data-act=dungeon] img{transform:scale(1.1)}
.hname{padding-top:5px!important}
/* summon sprites */
#gacha .gres{left:272px;top:30px;width:300px;height:236px}
#gacha .gcard{position:relative;width:150px;height:200px;margin-top:6px}
#gacha .gcf{position:absolute;inset:0;width:100%;height:100%;z-index:2}
#gacha .gcard .gimg{position:absolute;left:19px;top:18px;width:112px;height:112px;z-index:1;animation:none}
#gacha .gcard::before{content:"";position:absolute;left:14px;top:12px;right:14px;bottom:48px;border-radius:8px;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.28),rgba(20,10,50,.85))}
#gacha .gwing{position:absolute;left:-30px;top:28px;width:360px;height:180px;object-fit:contain;opacity:.95;filter:drop-shadow(0 0 16px rgba(255,214,120,.7));animation:gwing .9s ease-out both}
@keyframes gwing{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:.95}}
#gacha .grib{position:absolute;left:50px;top:164px;width:200px;height:66px;z-index:3;transform:rotate(-4deg)}
#gacha .grib img{position:absolute;inset:0;width:100%;height:100%}
#gacha .grib b{position:absolute;left:0;right:0;top:19px;text-align:center;font-size:17px;color:#fff;text-shadow:0 1px 3px #000;letter-spacing:.04em}
.sumobj{left:322px;top:70px;width:200px;height:200px}
.sumobj .altar{position:absolute;left:-30px;top:56px;width:260px;height:260px;object-fit:contain}
.sumobj .rune{position:absolute;left:10px;top:122px;width:180px;height:90px;object-fit:fill;opacity:.55;mix-blend-mode:screen}
.sumobj img.float{left:42px;top:0;width:116px;height:116px;z-index:2;top:20px}
.sumobj .halo{left:20px;top:0;width:160px;height:160px}
.sumobj{top:46px}
.sumobj .altar{left:0;top:62px;width:200px;height:200px}
.sumobj .rune{left:30px;top:118px;width:140px;height:70px}
.sumobj img.float{left:48px;top:6px;width:104px;height:104px}
.sumobj .halo{left:30px;top:-4px;width:140px;height:140px}
.sumobj img.float{top:58px}.sumobj .halo{top:44px}.sumobj .rune{top:150px;opacity:.4}.sumobj .altar{top:70px}
.sumcap{display:none}
.sumobj img.float{top:84px}.sumobj .halo{top:70px}

.pgr em.s{background:#8fe8b0}.pgsk.s i{font-style:normal;font-size:16px;color:#9ff0c0}.pgsk.s{border-color:#7fd9a4}
.v19-row b.lb{color:#ffd966;font-weight:700;display:block;margin-bottom:1px}
.pgm .pgk{max-height:158px;flex:0 0 auto;overflow-y:auto}.pgm .pgr{padding:2px 0;gap:7px}.pgm .pgr p{font-size:9px;line-height:1.2;margin-top:1px}.pgm .pgr b{font-size:11.5px}.pgm .pgsk{flex-basis:28px;height:28px}
/* build 106: party panel flows (no absolute button row) so long skill text can't overlap the slots/buttons */
.pgm{height:300px!important}
.pgm .pgk{flex:1 1 auto!important;min-height:64px;max-height:none!important;overflow-y:auto}
.pgm .pgt{flex:0 0 auto}
.pgm .pgbt{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;flex:0 0 auto;margin-right:-46px}

.hpt .shb{position:absolute;left:0;bottom:0;height:4px;width:0;background:linear-gradient(90deg,#6fd8ff,#d9f6ff);box-shadow:0 0 6px #6fd8ff,0 -1px 0 rgba(255,255,255,.7);transition:width .25s,opacity .2s;opacity:0}
.hpbox.e .hpt .shb{left:auto;right:0;background:linear-gradient(270deg,#ffb43c,#ffecc0);box-shadow:0 0 6px #ffb43c,0 -1px 0 rgba(255,255,255,.7)}
.hpt .shb.low{animation:shlow .5s infinite alternate}@keyframes shlow{to{filter:brightness(2.2) saturate(.4)}}

#ultbg .ubs{position:absolute;inset:-20%;background:repeating-linear-gradient(100deg,transparent 0 46px,color-mix(in srgb,var(--uc) 55%,#fff 0%) 46px 49px,transparent 49px 120px);opacity:.28;animation:ubs 1.1s linear infinite}
#ultbg .ubs.b{background:repeating-linear-gradient(100deg,transparent 0 80px,rgba(255,255,255,.5) 80px 82px,transparent 82px 190px);animation-duration:.6s;opacity:.22}
@keyframes ubs{to{transform:translateX(-170px)}}
#utot{position:absolute;left:34px;bottom:70px;z-index:20;pointer-events:none;font:900 15px/1 'Kanit','Prompt',system-ui,sans-serif;color:#ffe9a8;text-shadow:0 0 10px #ff9a2a,0 2px 0 #000;opacity:0;transition:opacity .25s}
#utot b{display:block;margin-top:3px;font-size:30px;letter-spacing:1px;color:#fff;text-shadow:0 0 14px #ffb52e,0 3px 0 #6a2a00}
#utot.on{opacity:1}
.dmg.big{font-size:52px;font-weight:900}.dmg.big.crit{font-size:62px}

.cutin{position:absolute;top:140px;width:360px;height:120px;pointer-events:none;z-index:15;animation:ciIn 1.4s cubic-bezier(.2,.9,.2,1) forwards}
.cutin.l{left:0;--d:-1}.cutin.r{right:0;--d:1}
.cutin::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,6,50,.92),color-mix(in srgb,var(--cc) 55%,#1a0840) 60%,rgba(20,6,50,.2));border-top:2px solid var(--cc);border-bottom:2px solid var(--cc);box-shadow:0 0 24px var(--cc);transform:skewX(-14deg)}
.cutin.r::before{transform:skewX(14deg);background:linear-gradient(260deg,rgba(20,6,50,.92),color-mix(in srgb,var(--cc) 55%,#1a0840) 60%,rgba(20,6,50,.2))}
.cutin .cp{position:absolute;top:-34px;bottom:-4px;width:170px;overflow:hidden}.cutin.l .cp{left:14px}.cutin.r .cp{right:14px}
.cutin .cp img{position:absolute;left:50%;top:0;height:200px;transform:translateX(-50%);filter:drop-shadow(0 0 12px var(--cc))}
.cutin.r .cp img{transform:translateX(-50%) scaleX(-1)}
.cutin .cn{position:absolute;top:0;bottom:0;display:flex;align-items:center;font:900 24px/1.1 'Kanit','Prompt',system-ui,sans-serif;color:#fff;text-shadow:0 0 12px var(--cc),0 2px 0 #000;letter-spacing:.04em}
.cutin.l .cn{left:196px}.cutin.r .cn{right:196px;text-align:right}
@keyframes ciIn{0%{opacity:0;transform:translateX(calc(var(--d)*-260px))}16%,72%{opacity:1;transform:none}100%{opacity:0;transform:translateX(calc(var(--d)*-120px))}}


.bgate{position:absolute;left:calc(var(--ox,0px)*-1);top:calc(var(--oy,0px)*-1.88);width:var(--vw,844px);height:var(--vh,390px);z-index:40;pointer-events:none;overflow:hidden;perspective:900px}
.bgate .bd{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(20,8,40,.55),rgba(4,2,12,.88));animation:bdA 1.1s ease-out forwards}
.bgate .br{position:absolute;left:50%;top:50%;width:520px;margin:-260px;opacity:0;filter:drop-shadow(0 0 22px #ffc23a);animation:brA 1.1s cubic-bezier(.2,.8,.2,1) forwards}
.bgate .bb{position:absolute;left:50%;top:50%;width:80px;height:80px;margin:-40px;border-radius:50%;background:radial-gradient(circle,#fff,#ffd45e 35%,transparent 70%);opacity:0;animation:gBurst .6s .18s ease-out forwards}
.bgate .bn{position:absolute;left:0;right:0;top:50%;height:74px;margin-top:-37px;display:flex;align-items:center;justify-content:center;transform:scaleY(0);animation:bnA 1.1s cubic-bezier(.2,.9,.2,1) forwards}
.bgate .bn::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,6,34,0),rgba(14,6,34,.94) 18%,rgba(14,6,34,.94) 82%,rgba(14,6,34,0));border-top:2px solid #f2c14e;border-bottom:2px solid #f2c14e;box-shadow:0 0 28px rgba(242,193,78,.5)}
.bgate .bn b{position:relative;font:900 italic 46px/1 'Kanit','Prompt',system-ui,sans-serif;color:#fff6dc;-webkit-text-stroke:1px #8a3f10;text-shadow:0 0 20px #ffb52e,0 3px 0 #5a2008;letter-spacing:3px}
.bgate .bs{position:absolute;top:50%;left:-30%;width:30%;height:74px;margin-top:-37px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-20deg);animation:bsA .5s .3s ease-in forwards;mix-blend-mode:overlay}
@keyframes bdA{0%{opacity:0}15%{opacity:1}75%{opacity:1}100%{opacity:0}}
@keyframes brA{0%{opacity:0;transform:rotateX(60deg) rotateZ(-40deg) scale(.3)}25%{opacity:1;transform:rotateX(60deg) rotateZ(0deg) scale(1)}80%{opacity:.9;transform:rotateX(60deg) rotateZ(50deg) scale(1.12)}100%{opacity:0;transform:rotateX(60deg) rotateZ(70deg) scale(1.3)}}
@keyframes bnA{0%{transform:scaleY(0)}18%{transform:scaleY(1.08)}26%{transform:scaleY(1)}76%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(.2)}}
@keyframes bsA{to{left:110%}}
@keyframes gBurst{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(18)}}
#screen.gshake{animation:gsh .26s linear}@keyframes gsh{0%{transform:translate(0,0)}20%{transform:translate(-7px,4px)}40%{transform:translate(6px,-5px)}60%{transform:translate(-4px,3px)}80%{transform:translate(2px,-2px)}100%{transform:none}}

.pgart>img{animation:pgFloat 4.2s ease-in-out infinite}
@keyframes pgFloat{0%,100%{transform:translateX(-50%) translateY(0) scale(1)}50%{transform:translateX(-50%) translateY(-6px) scale(1.012)}}
.pgart.wide>img{animation:pgFloat 4.2s ease-in-out infinite}

.pgart.rig>img{animation:none;transform:none;left:0;right:0;margin:0 auto;top:auto;bottom:74px;height:auto;max-height:80%;max-width:62%}

.pgfx{position:absolute;inset:0;pointer-events:none;perspective:700px;overflow:hidden}
.pgfx .ry{position:absolute;left:50%;bottom:30px;width:460px;margin-left:-230px;opacity:.38;mix-blend-mode:screen;animation:pgRay 9s ease-in-out infinite}
.pgfx .rc{position:absolute;left:50%;bottom:6px;width:340px;margin-left:-170px;opacity:.85;filter:drop-shadow(0 0 14px #ffd27a);transform:rotateX(68deg);animation:pgSpin 26s linear infinite}
@keyframes pgSpin{from{transform:rotateX(68deg) rotateZ(0)}to{transform:rotateX(68deg) rotateZ(360deg)}}
@keyframes pgRay{0%,100%{opacity:.28;transform:scale(1)}50%{opacity:.5;transform:scale(1.05)}}

.bgate .wl,.bgate .wr{display:none;position:absolute;top:50%;width:46%;height:230px;margin-top:-115px;background:linear-gradient(90deg,rgba(255,244,200,0),rgba(255,236,170,.95) 60%,#fff);filter:drop-shadow(0 0 20px #ffc23a);opacity:0}
.bgate .wl{right:50%;clip-path:polygon(100% 50%,78% 40%,70% 18%,52% 30%,44% 2%,28% 22%,18% 6%,8% 28%,0 20%,10% 50%,0 80%,8% 72%,18% 94%,28% 78%,44% 98%,52% 70%,70% 82%,78% 60%);transform-origin:100% 50%}
.bgate .wr{left:50%;background:linear-gradient(270deg,rgba(255,244,200,0),rgba(255,236,170,.95) 60%,#fff);transform-origin:0 50%;clip-path:polygon(0 50%,22% 40%,30% 18%,48% 30%,56% 2%,72% 22%,82% 6%,92% 28%,100% 20%,90% 50%,100% 80%,92% 72%,82% 94%,72% 78%,56% 98%,48% 70%,30% 82%,22% 60%)}
.bgate.st2 .wl,.bgate.st2 .wr{display:block;animation:wgA 1.15s cubic-bezier(.2,.9,.2,1) forwards}
.bgate.st2 .wl{animation-name:wgL}.bgate.st2 .wr{animation-name:wgR}
@keyframes wgL{0%{opacity:0;transform:scaleX(.1)}25%{opacity:1;transform:scaleX(1.04)}78%{opacity:.95;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.1)}}
@keyframes wgR{0%{opacity:0;transform:scaleX(.1)}25%{opacity:1;transform:scaleX(1.04)}78%{opacity:.95;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1.1)}}
.bgate.st2 .br{width:380px;margin:-190px}
.bgate.st1 .br,.bgate.st1 .wl,.bgate.st1 .wr{display:none}
.bgate.st1 .bn::before{background:none;border:0;box-shadow:none}
.bgate.st1 .bd{background:rgba(4,2,12,.45)}
.bgate.st1 .bn b{font-size:56px}
.bgate.st2 .bn::before{background:none;border:0;box-shadow:none}

.rrg{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.rri{display:flex;align-items:center;gap:7px;font-size:13px;padding:3px 8px 3px 4px;border-radius:999px;background:rgba(242,193,78,.1);border:1px solid rgba(242,193,78,.3);min-width:0}
.rric{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center}.rric img{max-width:26px;max-height:26px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.rrn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.rwl{bottom:60px;overflow-y:auto;align-content:flex-start}
.pill .plus{pointer-events:auto;width:22px;height:22px;border-radius:50%;margin:0 -4px 0 2px;padding:0;border:1px solid #ffe28a;background:linear-gradient(#f6c94a,#c8932a);color:#2a1a05;font-size:18px;font-weight:900;line-height:18px;text-indent:0;cursor:pointer;display:flex;align-items:center;justify-content:center}

.chip{position:absolute;height:26px;padding:0 10px;border-radius:13px;border:1px solid #c8932a;background:rgba(19,15,43,.9);color:#fff6dc;font-size:11px;font-weight:700;cursor:pointer}.chip.on{background:linear-gradient(#f6c94a,#c8932a);color:#2a1a05}
#bskip{font-size:16px}

/* build 129: centre the Units art without a percentage translate (WebKit froze translateX(-50%) at 0 when the image was still loading) */
.pgart>img,.pgart.wide>img{left:0;right:0;margin:0 auto;transform:none}
@keyframes pgFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.012)}}
.pgart.rig>img{animation:none;transform:none}

/* build 131: ultimate silhouette (behind fighters) */
.ultsil{position:absolute;top:18px;bottom:-10px;width:520px;pointer-events:none;overflow:hidden;opacity:0;animation:silIn 1.5s ease-out forwards}
.ultsil.l{left:-40px}.ultsil.r{right:-40px}
.ultsil img{position:absolute;left:0;right:0;margin:0 auto;bottom:0;height:128%;max-width:none;filter:brightness(0) invert(1) drop-shadow(0 0 16px var(--cc)) blur(.4px);opacity:.42;mix-blend-mode:screen}
.ultsil.r img{transform:scaleX(-1)}
@keyframes silIn{0%{opacity:0;transform:translateX(calc(var(--sd,-1)*26px)) scale(1.06)}18%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translateX(calc(var(--sd,-1)*-10px)) scale(1)}}
.ultsil.r{--sd:1}
.cutin{height:64px;top:176px}
.cutin::before{background:linear-gradient(100deg,rgba(20,6,50,.78),color-mix(in srgb,var(--cc) 45%,#1a0840) 60%,rgba(20,6,50,0))}
.cutin.l .cn{left:36px}.cutin.r .cn{right:36px;text-align:right}

/* build 133: on taller screens (iPad / non-16:9) the arena floor sits at the bottom of the full-height bg; drop the fighters by the extra height so they stand on it */
#screen .bmon,#screen .bsh,#screen #fxc,#screen #fxl{translate:0 calc(var(--oy,0px)*.88)}

/* build 134: currency "+" as a small green badge on the icon's lower-left corner */
.pill .plus{display:none}
.pill .pl{position:absolute;left:-3px;bottom:-5px;width:14px;height:14px;border-radius:50%;padding:0;border:1px solid #0d3a17;background:radial-gradient(circle at 35% 30%,#7dff8c,#22b347 70%);color:#fff;font:900 12px/11px system-ui,sans-serif;text-indent:0;cursor:pointer;display:flex;align-items:center;justify-content:center;pointer-events:auto;z-index:2;box-shadow:0 1px 2px rgba(0,0,0,.6)}
.pill .pl::after{content:'';position:absolute;inset:-12px -8px -8px -10px}
.pill{overflow:visible}
.hres .pill{padding:0 6px 0 4px;gap:4px;justify-content:center;overflow:visible}
.hres .pill span{flex:none;overflow:visible;text-overflow:clip;min-width:0}
.pill .cd.cdS{font-size:9px;margin-left:2px}
.hres .pill .cd.cdS{font-size:8.5px;margin:0 -2px 0 -1px}.hres .pill{gap:3px}

/* build 136: bigger icon overlapping the pill's left edge, bare green "+" at the icon's lower-right (no ring) */
.hres .pill{padding:0 8px 0 0;justify-content:flex-start;gap:5px}
.hres .pill>img,.hres .pill>i{width:32px;height:32px;margin:-2px 0 -2px -7px;flex:none;position:relative;z-index:1}
.hres .pill span{flex:1 1 auto;text-align:center;min-width:0}
.pill .pl{left:18px;bottom:-4px;width:16px;height:16px;border:0;border-radius:0;background:none;box-shadow:none;color:#5dff6e;font:900 19px/14px system-ui,sans-serif;text-shadow:-1px -1px 0 #0b3a14,1px -1px 0 #0b3a14,-1px 1px 0 #0b3a14,1px 1px 0 #0b3a14,0 2px 3px rgba(0,0,0,.6);z-index:3}
.hres .pill .cd.cdS{margin:0 -3px 0 -2px}
.hres .pill .cd.cdS{position:static;display:inline;font-style:normal;font-size:8.5px;margin:0 0 0 1px;flex:none}
.hres .pill>img,.hres .pill>i{width:30px;height:30px;margin:-1px 0 -1px -6px}
.hres .pill{gap:3px}.hres .pill span{text-align:left;padding-left:2px}
.pill .pl{left:17px}
.hres .pill span{flex:none}
.hres .pill:nth-child(1),.hres .pill:nth-child(2){flex:1 1 0}
.hres .pill:nth-child(3){flex:1.4 1 0}
.hres .pill{font-size:10.5px;padding-right:6px}
.hres .pill:nth-child(1){flex:1.25 1 0}.hres .pill:nth-child(2){flex:.95 1 0}.hres .pill:nth-child(3){flex:1.45 1 0}
.hres .pill:nth-child(1){flex:1.15 1 0}.hres .pill:nth-child(2){flex:.9 1 0}.hres .pill:nth-child(3){flex:1.7 1 0}
.hres .pill:nth-child(1){flex:1.32 1 0}.hres .pill:nth-child(2){flex:1.08 1 0}.hres .pill:nth-child(3){flex:1.55 1 0}
.hres .pill:nth-child(1){flex:1.2 1 0}.hres .pill:nth-child(2){flex:1 1 0}.hres .pill:nth-child(3){flex:1.4 1 0}
.pill .pl{left:11px;bottom:-3px;width:17px;height:17px;font-size:20px;line-height:15px}

/* build 139: shop header currency row + Top Up tab */
.hres.shp{z-index:3}
.hres.shp .pill:nth-child(n){flex:1 1 0}
.shsec{font-size:14px;font-weight:700;color:#f2c14e;text-shadow:0 1px 2px #000}.shsec small{font-size:11px;font-weight:400;color:rgba(255,246,220,.7);margin-left:8px}
.shc2{position:absolute;width:192px;height:104px;border:1px solid #c8932a;border-radius:14px;background:linear-gradient(180deg,rgba(40,30,80,.85),rgba(19,15,43,.9));box-sizing:border-box;padding:8px 10px}
.shc2>img{position:absolute;left:10px;top:12px;max-width:62px;object-fit:contain}
.shc2 .t1{margin-left:70px;font-size:15px;font-weight:700;line-height:1.2;margin-top:6px;white-space:nowrap}
.shc2 .t2{margin-left:70px;font-size:11px;color:rgba(255,246,220,.75);margin-top:3px}
.shc2 .cta{position:absolute;left:10px;right:10px;bottom:8px;height:32px;font-size:14px;padding:0}

.pgi.k0{border-color:#c9cfdd}.pgi.k1{border-color:#5fb4ff;box-shadow:0 0 6px rgba(95,180,255,.45)}.pgi.k2{border-color:#c27bff;box-shadow:0 0 9px rgba(194,123,255,.65)}.pgi.k3{border-color:#ffb43a;border-width:3px;box-shadow:0 0 12px rgba(255,180,58,.85),inset 0 0 8px rgba(255,200,90,.35)}
.pgi.cur.k0,.pgi.cur.k1,.pgi.cur.k2,.pgi.cur.k3{border-color:#fff3c4}
.pgsort{position:absolute;left:16px;bottom:76px;z-index:3;padding:3px 10px;border-radius:12px;border:1px solid rgba(242,193,78,.55);background:rgba(14,10,32,.85);color:#ffe9a8;font-size:11px;line-height:16px}
@media (max-height:420px){.pgsort{bottom:68px}}
.pgi img.ic{left:0;top:0;width:100%;height:100%;object-fit:cover}
.pgl .pgi img.ic{width:100%;height:100%}
.pgslot img.ic{object-fit:cover;border-radius:9px}
.pgslot img.ic{left:2px;top:2px;width:44px;height:44px;border-radius:8px}

/* build 159 seal */
.pgseal{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:74px;height:56px;border-radius:12px;border:2px dashed rgba(255,230,160,.45);background:rgba(20,14,44,.7);color:#fff6dc;padding:2px}
.pgseal small{font-size:9px;line-height:1.1;max-width:68px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pgseal .pl{font-style:normal;font-size:22px;line-height:1;color:rgba(255,230,160,.8)}
.pgseal.g0{border:2px solid #e6e9f2}.pgseal.g1{border:2px solid #6dbcff}.pgseal.g2{border:2px solid #cf8cff}.pgseal.g3{border:2px solid #ffbf45;box-shadow:0 0 10px rgba(255,170,40,.45)}
.pgseal.lock{opacity:.6}.pgseal.lock i{font-style:normal;font-size:16px}
.sl-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--sz);height:var(--sz);flex:0 0 var(--sz);border-radius:28%;background:radial-gradient(circle at 35% 30%,var(--c1),var(--c2));border:2px solid var(--c0);box-shadow:inset 0 0 8px rgba(255,255,255,.25),0 0 8px var(--c3)}
.sl-ic i{font-style:normal;font-size:calc(var(--sz)*.5);color:#fff;text-shadow:0 0 6px rgba(0,0,0,.6),0 0 10px var(--c0);line-height:1}
.sl-ic b{position:absolute;right:-3px;bottom:-3px;font-size:calc(var(--sz)*.26 + 3px);background:#2a1f52;border:1px solid var(--c0);border-radius:8px;padding:0 4px;color:#fff6dc;line-height:1.25}
.sl-ic.g0{--c0:#e6e9f2;--c1:#7a8196;--c2:#383d52;--c3:rgba(230,233,242,.25)}.sl-ic.g1{--c0:#6dbcff;--c1:#3b86d6;--c2:#1c3a78;--c3:rgba(109,188,255,.4)}
.sl-ic.g2{--c0:#cf8cff;--c1:#9a4ee0;--c2:#451d7a;--c3:rgba(207,140,255,.45)}.sl-ic.g3{--c0:#ffbf45;--c1:#e8892a;--c2:#7a3512;--c3:rgba(255,170,40,.6)}
.sl-res{display:flex;gap:14px;font-size:11px;color:rgba(255,246,220,.75)}.sl-res b{color:#ffe27a;font-size:13px}
.sl-left{overflow:hidden}.sl-d{display:flex;flex-direction:column;gap:5px;height:100%;border-radius:12px;padding:8px 10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,246,220,.14)}
.sl-d.f-ok{animation:slok .9s}.sl-d.f-fail{animation:slfail .5s}
@keyframes slok{0%{box-shadow:0 0 0 rgba(255,220,100,0)}30%{box-shadow:0 0 28px rgba(255,220,100,.9),inset 0 0 22px rgba(255,220,100,.5)}100%{box-shadow:0 0 0 rgba(255,220,100,0)}}
@keyframes slfail{0%,100%{transform:none}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.sl-h{display:flex;gap:10px;align-items:center}.sl-h b{display:block;font-size:15px}.sl-h em{font-style:normal;font-size:10px;opacity:.8;margin-right:6px}
.sl-on{font-size:10px;color:#8fe8d8}.sl-on.off{color:rgba(255,246,220,.5)}
.sl-r{display:flex;flex-direction:column;font-size:11px;line-height:1.3;border-top:1px solid rgba(255,246,220,.1);padding-top:3px}.sl-r small{font-size:9px;color:rgba(255,246,220,.55)}.sl-r.nx span{color:#9ff0c8}
.sl-cost{display:flex;gap:10px;font-size:11px;align-items:center}.sl-cost b{color:#9ff0c8}.sl-cost .no{color:#ff8a8a}
.sl-bt{display:flex;gap:6px;margin-top:auto}.sl-bt .cta{flex:1;height:38px;font-size:15px}.sl-bt .ghost{flex:0 0 auto;height:38px;font-size:10.5px;padding:0 8px}.sl-bt .ask{border-color:#ff8a8a;color:#ffb0b0}
.sl-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:78px;gap:6px;overflow-y:auto;align-content:start}
.sl-t{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:10px;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,246,220,.14);color:#fff6dc;padding:2px}
.sl-t small{font-size:9px;max-width:72px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sl-t.cur{border-color:#ffe27a;background:rgba(255,226,122,.12)}
.sl-t img.ic{position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;border:1px solid #fff6dc;object-fit:cover}
.sl-empty{margin:auto;text-align:center;font-size:12px;color:rgba(255,246,220,.7);line-height:1.5}
.sl-d{gap:4px;padding:7px 10px}.sl-r{flex-direction:row;gap:8px;align-items:baseline;font-size:10.5px;padding-top:2px}.sl-r small{flex:0 0 58px;font-size:9px}.sl-h b{font-size:14px}
.sl-bt .cta{height:34px;font-size:14px}.sl-bt .ghost{height:34px}
.sl-d{box-sizing:border-box}
.sl-bt .cta,.sl-bt .ghost{position:relative!important}

/* build 160 shadow */
.shl{overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.shr{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:rgba(120,60,200,.12);border:1px solid rgba(190,140,255,.28);flex:0 0 auto}
.shr.lk{opacity:.5}.shr.dn{border-color:rgba(109,240,184,.5)}
.shi{width:46px;height:46px;object-fit:contain;flex:0 0 46px;filter:sepia(1) hue-rotate(228deg) saturate(2.4) brightness(.8) drop-shadow(0 0 6px #8a3cff)}
.sht{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.sht b{font-size:13px}.sht em{font-style:normal;color:#6df0b8;font-size:11px}
.shrl{font-size:10.5px;color:#ffcf8a;line-height:1.25}.shrw{font-size:10px;color:rgba(255,246,220,.65)}
.shr .cta,.shr .ghost{position:relative!important;flex:0 0 auto}
.shrule{position:absolute;left:50%;top:70px;transform:translateX(-50%);max-width:420px;padding:3px 12px;border-radius:12px;background:rgba(40,10,80,.8);border:1px solid #b98cff;color:#fff6dc;font-size:10.5px;text-align:center;line-height:1.3;pointer-events:none;z-index:6}
.shrule b{display:block;color:#d9b8ff;font-size:11.5px}
.sl-got{display:flex;gap:10px;align-items:center;justify-content:center}.sl-got b{display:block;font-size:14px}.sl-got small{font-size:10.5px;color:rgba(255,246,220,.75)}
.shi{width:40px;height:40px;flex:0 0 40px}.shr{padding:4px 8px}.sht b{font-size:12.5px}

/* build 161 */
.shd{display:flex;gap:14px;height:100%}.shd.lock{align-items:center}
.shbig{flex:0 0 210px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:14px;background:radial-gradient(circle at 50% 60%,rgba(138,60,255,.35),rgba(20,8,44,.2) 70%);border:1px solid rgba(190,140,255,.3)}
.shbig img{max-width:196px;max-height:200px;object-fit:contain;filter:sepia(1) hue-rotate(228deg) saturate(2.4) brightness(.8) drop-shadow(0 0 14px #8a3cff)}
.shd.lock .shbig img{filter:brightness(0) drop-shadow(0 0 8px #8a3cff);opacity:.6}
.shbig b{margin-top:4px;font-size:13px;color:#e6d4ff;text-align:center;padding:0 6px}
.shdr{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.shrulebox{border-radius:10px;padding:6px 10px;background:rgba(255,170,60,.1);border:1px solid rgba(255,190,90,.45);display:flex;flex-direction:column;gap:2px}.shrulebox b{color:#ffcf8a;font-size:13px}.shrulebox span{font-size:11.5px;line-height:1.35}
.shmech{font-size:10.5px;line-height:1.35;color:rgba(255,246,220,.8);max-height:56px;overflow:hidden}.shmech small{display:block;font-size:9px;color:rgba(255,246,220,.5)}
.shrw2{display:flex;align-items:center;gap:10px}.shrw2 em{font-style:normal;font-size:9.5px;color:rgba(255,246,220,.5);margin-left:4px}
.shic{position:relative!important;display:flex;flex-direction:column;align-items:center;gap:1px;background:none;border:0;color:#fff6dc;padding:0}.shic small{font-size:10px}
.shcoin{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center}.shcoin img{max-width:100%;max-height:100%}
.shef{display:flex;align-items:center;gap:10px;font-size:11.5px}
.shbt{display:flex;gap:8px;margin-top:auto}.shbt .cta{flex:1;height:40px;font-size:15px;position:relative!important}.shbt .ghost{flex:0 0 90px;height:40px;position:relative!important}
.shnote2{font-size:10.5px;color:#ff9a9a}
.shrt>div{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid rgba(255,246,220,.1);font-size:12px}.shrt b{flex:0 0 76px}.shrt em{font-style:normal;color:#9ff0c8;font-size:11.5px}
.shgr{display:flex;gap:14px;padding:6px 0 2px 40px;font-size:12px}.shnote{font-size:10px;color:rgba(255,246,220,.55);padding-top:4px}

/* build 162 */

.sl-ic.hasimg{background:none!important;border-color:transparent!important;box-shadow:none!important}.sl-ic.hasimg i{display:none}.sl-ic b{z-index:2}
.pgseal.wide{flex-direction:row;width:176px;height:58px;gap:8px;justify-content:flex-start;padding:4px 8px;text-align:left}
.pgseal.wide .pl{font-size:26px;flex:0 0 40px;text-align:center}.pgst{display:flex;flex-direction:column;min-width:0;gap:1px}.pgst b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pgst small{max-width:none!important;white-space:normal!important;font-size:9px;line-height:1.2;color:rgba(255,246,220,.75)}
.sl-t.em{background:rgba(255,255,255,.025);border-style:dashed;border-color:rgba(255,246,220,.1)}
.sl-bt .ghost{flex:1 1 0!important;padding:0 4px!important;font-size:10px!important;min-width:0}.sl-bt .cta{flex:1.1 1 0!important;min-width:0}

/* build 163 ELITE */
.wm.elite{filter:hue-rotate(-25deg) saturate(1.15)}
.wm.elite::after{content:"";position:absolute;inset:0;pointer-events:none;background:url(../assets/map-elite-overlay.webp?v=164) center/cover no-repeat;opacity:.35;z-index:1}
.elrow{display:flex;align-items:center;justify-content:center;gap:6px;height:130px}
.elw{display:flex;flex-direction:column;align-items:center;gap:2px;width:150px;padding:6px 4px;border:1px solid rgba(255,140,120,.35);border-radius:10px;background:rgba(60,12,8,.45);font-size:12px}
.elw>img{width:72px;height:72px;object-fit:contain}
.elw small{color:#ff9a8a;font-size:10.5px}
.elw b{font-size:13px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.elw span{display:flex;align-items:center;gap:3px;font-size:11px;color:rgba(255,246,220,.8)}
.elar{font-style:normal;font-size:24px;color:#ff9a8a}

/* build 163: seal icon = frame (4 grades) + symbol (11 types) */
.sl-ic img.sf{position:absolute;inset:-6%;width:112%;height:112%;object-fit:contain;z-index:1}
.sl-ic img.sy{position:absolute;left:21%;top:21%;width:58%;height:58%;object-fit:contain;z-index:2}
.sl-ic.hasf{background:none!important;border-color:transparent!important;box-shadow:none!important}
.sl-ic.hasy i{display:none}

/* build 164: locked 844x390 stage, letterbox outside. Phones: black. iPad/desktop (body.deco): decorative backdrop */
html,body{background:#000}
#app{background:#0d0a1e}
body.deco{background:#07050f}
body.deco::before{content:"";position:fixed;inset:-30px;z-index:0;background:url(../assets/home-bg2.webp) center/cover no-repeat;filter:blur(16px) brightness(.5) saturate(1.1)}
body.deco::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%)}
#app{z-index:1;box-shadow:0 0 0 1px rgba(242,193,78,.25),0 0 60px rgba(0,0,0,.7)}

/* build 164: new icon assets */
.shri{object-fit:contain;flex:0 0 auto}
.shrule b,.shrulebox b{display:flex;align-items:center;gap:5px}
.sl-t.em{background:url(../assets/seal-slot-empty.webp?v=164) center/100% 100% no-repeat;border:none}

/* build 164c: seal glow by grade + upgrade animation + unit slot badge */
.sl-fxw{position:relative;display:inline-flex;flex:0 0 auto}
.sl-fxw.g0{--c0:#e6e9f2;--c3:rgba(230,233,242,.25)}.sl-fxw.g1{--c0:#6dbcff;--c3:rgba(109,188,255,.4)}.sl-fxw.g2{--c0:#cf8cff;--c3:rgba(207,140,255,.45)}.sl-fxw.g3{--c0:#ffbf45;--c3:rgba(255,170,40,.6)}
.sl-ic.hasf{filter:drop-shadow(0 0 calc(var(--sz)*.10) var(--c3))}
.sl-ic.hasf.g1{animation:slb1 3.2s ease-in-out infinite}.sl-ic.hasf.g2{animation:slb2 2.6s ease-in-out infinite}.sl-ic.hasf.g3{animation:slb3 2s ease-in-out infinite}
@keyframes slb1{50%{filter:drop-shadow(0 0 calc(var(--sz)*.18) var(--c3))}}
@keyframes slb2{50%{filter:drop-shadow(0 0 calc(var(--sz)*.26) var(--c3)) brightness(1.08)}}
@keyframes slb3{0%,100%{filter:drop-shadow(0 0 calc(var(--sz)*.18) var(--c3))}50%{filter:drop-shadow(0 0 calc(var(--sz)*.4) var(--c3)) drop-shadow(0 0 calc(var(--sz)*.18) #fff3c0) brightness(1.15)}}
.sl-fxw .sring{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:3px solid var(--c0);opacity:0;animation:sring .8s ease-out forwards;pointer-events:none}
.sl-fxw .sring.r2{animation-delay:.18s;border-width:2px}
@keyframes sring{0%{opacity:.95;transform:scale(.4)}100%{opacity:0;transform:scale(4.2)}}
.sl-fxw .sp{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--c0);box-shadow:0 0 8px var(--c0);opacity:0;animation:ssp .9s ease-out forwards;pointer-events:none}
@keyframes ssp{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d)*-1.6)) scale(.2)}}
.sl-fxw .splus{position:absolute;left:50%;top:-6px;transform:translateX(-50%);font-size:20px;color:#fff6dc;text-shadow:0 0 8px var(--c0),0 0 14px var(--c0);animation:splus 1s ease-out forwards;pointer-events:none;z-index:5}
@keyframes splus{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}30%{opacity:1;transform:translate(-50%,-6px) scale(1.25)}100%{opacity:0;transform:translate(-50%,-28px) scale(1)}}
.sl-fxw.fx-ok .sl-ic{animation:sokp .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes sokp{0%{transform:scale(.7)}60%{transform:scale(1.25);filter:brightness(1.6) drop-shadow(0 0 14px var(--c0))}100%{transform:scale(1)}}
.sl-fxw.fx-fail .sl-ic{animation:sfl .5s;filter:grayscale(.6) brightness(.8)}
@keyframes sfl{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px) rotate(-4deg)}40%{transform:translateX(6px) rotate(4deg)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.sl-fxw .scrk{position:absolute;inset:18% 30%;background:linear-gradient(120deg,transparent 45%,#1a1030 47%,#1a1030 53%,transparent 55%);opacity:0;animation:scrk .8s .15s forwards;pointer-events:none;z-index:3}
@keyframes scrk{0%{opacity:0}30%{opacity:.9}100%{opacity:0}}
.pgslot{position:relative}.pgslot .pgsb{position:absolute;right:-5px;top:-5px;z-index:3;pointer-events:none}

/* build 165 rate-up banner */
.rup{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#fff3cf;height:26px}.rup img{width:26px;height:26px;border-radius:6px;border:1px solid #f2c14e}.rup b{color:#f2c14e}.rup small{opacity:.8;margin-left:4px}

/* build 166 tower: vertical climb */
.wm.tw .twbg{position:absolute;inset:0;z-index:0;background-image:url(../assets/tower-climb.webp),url(../assets/world-tower.webp);background-size:100% auto;background-repeat:no-repeat;transition:background-position 1.1s cubic-bezier(.3,.7,.2,1)}
.twshade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,6,20,.72) 0,rgba(8,6,20,.15) 34%,rgba(8,6,20,.1) 52%,rgba(8,6,20,.78) 100%)}
.twttl{position:absolute;left:0;right:0;top:6px;z-index:5;text-align:center;color:#fff6dc;pointer-events:none}.twttl b{display:block;font-size:20px;color:#f2c14e}.twttl small{font-size:11px;opacity:.8}
.twlist{position:absolute;left:12px;top:52px;bottom:12px;width:132px;z-index:6;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding:4px 6px 4px 2px;scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.twlist::-webkit-scrollbar{display:none}
.twf{flex:none;position:relative;height:42px;border-radius:21px;border:1px solid rgba(227,176,75,.55);background:linear-gradient(180deg,rgba(52,40,92,.92),rgba(24,18,52,.92));color:#fff6dc;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;gap:6px}
.twf i{font-style:normal;font-size:14px}.twf em{font-style:normal;position:absolute;right:10px;font-size:12px;color:#6df0b8}.twf.lock{opacity:.62;filter:grayscale(.5)}.twf.lock em{color:#a79fc0}
.twf.boss{border-color:#ffd27a;background:linear-gradient(180deg,rgba(110,62,24,.95),rgba(48,24,12,.95))}
.twf.cur{box-shadow:0 0 12px rgba(242,193,78,.7)}.twf.sel{border:2px solid #fff0b0;background:linear-gradient(180deg,#a36a1c,#5c3510);box-shadow:0 0 16px rgba(255,210,122,.85);transform:scale(1.05)}
.twstep{position:absolute;left:230px;top:288px;width:190px;height:22px;z-index:3;border-radius:50%;background:radial-gradient(ellipse,rgba(190,170,230,.55),rgba(80,64,130,.15) 60%,rgba(0,0,0,0) 72%)}
.twtok{position:absolute;left:325px;top:300px;width:0;height:0;z-index:4;pointer-events:none}.twtok img{position:absolute;left:-60px;bottom:6px;width:120px;height:120px;object-fit:contain;transform-origin:50% 100%;animation:hbr 3.6s ease-in-out infinite}
.twtok .wmsh{position:absolute;left:-40px;top:-2px;width:80px;height:12px;border-radius:50%;background:radial-gradient(ellipse,rgba(6,4,14,.8),rgba(6,4,14,0) 75%)}
.twtok.climb img{animation:twclimb .9s ease-out}@keyframes twclimb{0%{transform:translateY(34px) scale(.96)}45%{transform:translateY(-22px) scale(1.04)}100%{transform:translateY(0) scale(1)}}
.twpanel{position:absolute;right:12px;top:48px;bottom:12px;width:296px;z-index:6;padding:12px 14px;border-radius:14px;border:1px solid rgba(227,176,75,.7);background:linear-gradient(180deg,rgba(30,22,62,.93),rgba(14,10,34,.95));color:#fff6dc;display:flex;flex-direction:column;gap:9px;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.twh{display:flex;align-items:center;gap:8px}.twh b{font-size:20px;color:#f2c14e}.twh em{font-style:normal;font-size:10px;font-weight:800;background:#c0392b;border-radius:8px;padding:2px 7px}.twh span{margin-left:auto;font-size:11px;opacity:.8}
.twe{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.05);border-radius:10px;padding:8px}.twe>img{width:78px;height:78px;object-fit:contain;flex:none}.twen{font-weight:800;font-size:14px;display:flex;align-items:center;gap:4px}.twe small{opacity:.75}.twe p{margin:3px 0 0;font-size:11px;line-height:1.3;opacity:.85;max-height:62px;overflow:hidden;font-size:10.5px}
.twr{flex:1;min-height:0}.twrt{font-size:11px;color:#f2c14e;margin-bottom:5px;font-weight:700}.twrg{display:flex;flex-wrap:wrap;gap:6px}.twrg span{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700;background:rgba(255,255,255,.07);border-radius:10px;padding:4px 9px}.twrg img{width:18px;height:18px;object-fit:contain}
.twpanel .cta,.twpanel .ghost{position:relative;left:auto;top:auto;right:auto;bottom:auto;margin-top:auto;flex:none}
.twh em.mn{background:#8a5cd6}.twf.mini{border-color:#c9a7ff}
/* build 171: .shd (shadow detail) collided with shop card description */
.shc .shd{display:block;height:auto;gap:0}

/* build 172 profile */
.pfof{overflow:hidden}
.pfh{position:absolute;left:18px;right:44px;top:10px;height:62px;display:flex;align-items:center;gap:14px}
.pfav{flex:none;width:58px;height:58px;border-radius:50%;border:2px solid #f2c14e;background:#0f1628 center/cover no-repeat;box-shadow:0 0 12px rgba(242,193,78,.4)}
.pfn{min-width:0}.pfnm{display:flex;align-items:center;gap:8px}.pfnm b{font-size:20px;color:#fff6dc;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfpen{width:26px;height:26px;border-radius:50%;border:1px solid #e3b04b;background:rgba(36,26,69,.9);color:#f2c14e;font-size:14px;padding:0}.pfn small{font-size:12px;color:rgba(255,246,220,.75)}
.pfs{margin-left:auto;display:flex;gap:14px;font-size:11px;color:rgba(255,246,220,.75);flex-wrap:wrap;justify-content:flex-end}.pfs b{color:#f2c14e;font-size:13px;margin-left:3px}
.pfg{position:absolute;left:16px;right:16px;top:80px;bottom:14px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:10px}
.pfc{min-height:0;border-radius:10px;overflow:hidden;border:1px solid rgba(227,176,75,.5);background:linear-gradient(180deg,rgba(42,32,82,.85),rgba(18,13,40,.92));display:flex;flex-direction:column}
.pfct{flex:none;text-align:center;font-weight:800;font-size:13px;padding:5px 0;color:#f2c14e;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.25));border-bottom:1px solid rgba(227,176,75,.35)}
.pfcb{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:6px 12px;text-align:center}
.pfbig{font-size:30px;font-weight:800;color:#fff6dc;line-height:1}.pfbig small{font-size:13px;opacity:.7;font-weight:700}.pfbig.pft{font-size:24px;color:#ffd27a}
.pfsm{font-size:11px;color:rgba(255,246,220,.8);line-height:1.3}
.pfbar{width:100%;height:7px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}.pfbar b{display:block;height:100%;background:linear-gradient(90deg,#6df0b8,#f2c14e);border-radius:4px}
.pfdun{width:100%;display:flex;flex-direction:column;gap:3px}.pfdr{display:grid;grid-template-columns:62px 1fr 38px;gap:6px;align-items:center;font-size:10px;text-align:left}.pfdr .pfbar{height:6px}.pfdr em{font-style:normal;text-align:right;opacity:.8}
/* build 174: shadow-dungeon .shi/.shd rules collided with shop cards */
.shc .shi{width:100%;height:84px;flex:none;filter:none;object-fit:initial}
.shc .shi img{max-height:100%}
.pfh{right:60px}

/* build 176: wave change = next enemy walks in */
#me.wvin{animation:wvin 1.05s cubic-bezier(.2,.7,.25,1) backwards}
@keyframes wvin{0%{transform:translateX(300px);opacity:0}25%{opacity:1}100%{transform:translateX(0);opacity:1}}
.wvtag{position:absolute;left:0;right:0;top:112px;text-align:center;z-index:30;color:#fff6dc;font:900 italic 46px/1 'Kanit','Prompt',system-ui,sans-serif;-webkit-text-stroke:1px #8a3f10;text-shadow:0 0 20px #ffb52e,0 3px 0 #5a2008;letter-spacing:3px;pointer-events:none;animation:wvtag 1.7s ease both}
@keyframes wvtag{0%{opacity:0;transform:scale(1.5)}18%{opacity:1;transform:scale(1)}78%{opacity:1}100%{opacity:0}}

/* build 183: seal chip in battle HUD (shown only for the deployed monster's own seal) */
.slchip{position:absolute;left:176px;top:38px;display:flex;align-items:center;gap:4px;height:24px;padding:0 8px 0 3px;border-radius:12px;background:rgba(10,6,22,.72);border:1px solid rgba(242,193,78,.55);font-size:11px;color:#ffe9a8;pointer-events:none;z-index:6}.slchip b{font-weight:600;text-shadow:0 1px 2px #000}

/* build 184: seal icon gets a solid tinted backing (frame art is see-through); slot badge removed */
.sl-ic.hasf::before{content:'';position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle at 36% 30%,var(--c1),var(--c2) 62%,#120d26);box-shadow:inset 0 0 8px rgba(0,0,0,.55);z-index:0}.pgslot .pgsb{display:none!important}

/* build 186: stars = plain gold stars, one per level, no badge */
.stx.stn{display:inline-block;letter-spacing:1px!important;font-size:1.15em;line-height:1;color:#ffd84a!important;text-shadow:0 1px 2px #000,0 0 3px #000,0 0 5px rgba(255,170,30,.7);vertical-align:middle;white-space:nowrap}
.lvchip,.plate .lvchip,.hpbox .lvchip{background:rgba(18,12,30,.78)!important;color:#fff!important;border:1px solid rgba(255,216,74,.7);text-shadow:0 1px 2px #000}
.hpbox.e .lvchip{background:rgba(30,8,14,.8)!important;border-color:rgba(255,100,115,.8)}
.slchip{display:none!important}

/* ---------- build 193: world boss ---------- */
#wscene .wgate{position:absolute;width:380px;height:380px;opacity:.72}
#wscene .wg-halo{position:absolute;inset:40px;border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.92) 0 38%,rgba(90,20,160,.55) 52%,rgba(255,120,60,.22) 62%,transparent 72%);animation:wgp 4s ease-in-out infinite}
#wscene .wg-halo.p2{background:radial-gradient(circle,rgba(0,0,0,.92) 0 38%,rgba(190,20,60,.6) 52%,rgba(255,150,60,.28) 62%,transparent 72%)}
#wscene .wg-halo.p3{background:radial-gradient(circle,rgba(0,0,0,.95) 0 36%,rgba(255,30,50,.7) 50%,rgba(255,210,150,.35) 62%,transparent 74%);animation-duration:1.6s}
#wscene .wg-ring{position:absolute;inset:0;width:100%;height:100%;opacity:.38;filter:hue-rotate(300deg) saturate(1.6) brightness(.9);animation:wspin 60s linear infinite}
#wscene .wrift{position:absolute;height:70px}
#wscene .wr-glow{position:absolute;left:0;top:12px;width:460px;height:46px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,80,120,.8),rgba(150,30,220,.5) 45%,transparent 70%);filter:blur(5px);animation:wgp 3s ease-in-out infinite}
#wscene .wr-line{position:absolute;left:30px;top:33px;width:400px;height:3px;background:linear-gradient(90deg,transparent,#fff 30%,#ffb0d0 60%,transparent);box-shadow:0 0 14px 4px #ff5a8a;border-radius:3px}
.bmon.e.wboss .bw{filter:drop-shadow(0 0 14px rgba(255,60,90,.45))}
@keyframes wspin{to{transform:rotate(360deg)}}@keyframes wrev{to{transform:rotate(-360deg)}}
@keyframes wgp{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
.wcry{position:absolute;width:100px;height:100px;z-index:5;pointer-events:none;--c1:#c58bff;--c2:#ffd27a;animation:wfl 3s ease-in-out infinite}
.wcry.p2{--c1:#ff5a6e;--c2:#ffb347}.wcry.p3{--c1:#ff2a3a;--c2:#fff}
@keyframes wfl{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.wcry .cr-c{position:absolute;left:34px;top:22px;width:32px;height:56px;background:linear-gradient(135deg,#fff 0,var(--c2) 22%,var(--c1) 58%,#2a0a44);clip-path:polygon(50% 0,100% 30%,82% 100%,18% 100%,0 30%);filter:drop-shadow(0 0 8px var(--c1))}
.wcry .cr-g{position:absolute;left:10px;top:10px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,var(--c1),transparent 66%);opacity:.65;animation:wgp 1.6s ease-in-out infinite}
.wcry img{position:absolute;left:0;top:0;width:100px;height:100px;opacity:.85;filter:hue-rotate(300deg) saturate(1.7) brightness(1.15)}
.wcry .cr-r1{animation:wspin 9s linear infinite}.wcry .cr-r2{width:76px;height:76px;left:12px;top:12px;opacity:.6;animation:wrev 6s linear infinite}
.wcry .cr-orb{position:absolute;inset:0;animation:wspin 7s linear infinite}
.wcry .cr-orb span{position:absolute;left:44px;top:-2px;width:14px;font-size:15px;line-height:14px;text-align:center;color:var(--c2);text-shadow:0 0 6px var(--c1);transform-origin:7px 52px}
.wcry .cr-orb span:nth-child(1){transform:rotate(0)}.wcry .cr-orb span:nth-child(2){transform:rotate(60deg)}.wcry .cr-orb span:nth-child(3){transform:rotate(120deg)}.wcry .cr-orb span:nth-child(4){transform:rotate(180deg)}.wcry .cr-orb span:nth-child(5){transform:rotate(240deg)}.wcry .cr-orb span:nth-child(6){transform:rotate(300deg)}
.wcry.warn .cr-orb{animation-duration:1.6s}.wcry.warn .cr-r1{animation-duration:2.4s}.wcry.warn .cr-r2{animation-duration:1.8s}.wcry.warn .cr-g{animation-duration:.5s;background:radial-gradient(circle,#ff2a3a,transparent 66%)}
.wcry.burst{animation:wburst 1.4s ease-in forwards}
@keyframes wburst{0%{transform:scale(1)}60%{transform:scale(2.6);filter:brightness(1.6)}100%{transform:scale(4);filter:brightness(3);opacity:0}}
.wdng{opacity:0;mix-blend-mode:screen;pointer-events:none;object-fit:fill}
.wdng.p3{animation:wdp 2.4s ease-in-out infinite}.wdng.warn{animation:wdp .8s ease-in-out infinite}
@keyframes wdp{0%,100%{opacity:.3}50%{opacity:.95}}
.wcnt{position:absolute;left:0;right:0;top:92px;text-align:center;font-size:76px;font-weight:700;color:#ff6a6a;text-shadow:0 0 18px #ff2a3a,0 3px 0 #300;opacity:0;pointer-events:none;z-index:7}
.wcnt.on{animation:wcn 1s ease-out}
@keyframes wcn{0%{opacity:0;transform:scale(1.9)}18%{opacity:.95}100%{opacity:.0;transform:scale(.8)}}
.wbh{position:absolute;inset:0;z-index:20;overflow:hidden;pointer-events:none}
.wbh .bh-dim{position:absolute;inset:0;background:#000;opacity:0;animation:bhd 3.9s ease-in forwards}
@keyframes bhd{0%{opacity:0}35%{opacity:.5}100%{opacity:1}}
.wbh .bh-disk{position:absolute;left:calc(var(--hx) - 60px);top:calc(var(--hy) - 60px);width:120px;height:120px;transform:scale(0);animation:bhg 3.9s cubic-bezier(.5,0,.8,.4) forwards .6s}
@keyframes bhg{0%{transform:scale(0) rotate(0)}50%{transform:scale(3) rotate(360deg)}100%{transform:scale(16) rotate(1080deg)}}
.wbh .bh-disk img{width:100%;height:100%}
.wbh .bh-acc{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#ff9a3a,#7a1bff,#ff4a58,#ffd27a,#ff9a3a);filter:blur(3px);-webkit-mask:radial-gradient(circle,transparent 30%,#000 34%,#000 70%,transparent 72%);mask:radial-gradient(circle,transparent 30%,#000 34%,#000 70%,transparent 72%)}
.wbh .bh-core{position:absolute;inset:26px;border-radius:50%;background:#000;box-shadow:0 0 22px 8px #000}
.wbh .bh-flash{position:absolute;inset:0;background:#fff;opacity:0;animation:bhf 3.9s linear forwards}
@keyframes bhf{0%,62%{opacity:0}66%{opacity:.8}74%{opacity:0}100%{opacity:0}}
.wbh .bh-txt{position:absolute;left:0;right:0;top:40px;text-align:center;font-size:34px;letter-spacing:8px;font-weight:700;color:#ffd0d0;text-shadow:0 0 16px #ff2a3a;opacity:0;animation:bht 3.9s ease-out forwards .4s}
@keyframes bht{0%{opacity:0;transform:scale(1.6)}20%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0}}
.bmon.p.wsuck{transition:transform 1.6s cubic-bezier(.6,0,.9,.5),opacity 1.6s;transform:translate(var(--sx),var(--sy)) scale(.05) rotate(540deg)!important;opacity:0}
.wsr{display:flex;gap:6px;align-items:center;font-size:12px;padding:3px 8px;border-radius:8px;background:rgba(10,6,24,.55)}
.wsr b{width:30px;color:#ffd27a}.wsr i{font-style:normal;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wsr u{text-decoration:none;color:#fff6dc;font-variant-numeric:tabular-nums}
.wsr.me{background:linear-gradient(90deg,rgba(255,90,110,.45),rgba(255,180,70,.3));border:1px solid #ffb347;font-weight:700}
.wlst{position:absolute;left:300px;top:70px;width:222px;bottom:20px;display:flex;flex-direction:column;gap:3px;overflow:auto}

#mp.wvinp{animation:wvinp 1.05s cubic-bezier(.2,.7,.25,1) backwards}
@keyframes wvinp{0%{transform:translateX(-300px);opacity:0}25%{opacity:1}100%{transform:translateX(0);opacity:1}}

/* build 199: arena tabs + defense log */
.avt.sm{top:92px}.avt.sm .avs{height:118px}.avt.sm .avs img{width:62px;height:62px}
.alog{position:absolute;left:18px;right:18px;top:52px;bottom:14px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.alh{font-size:12px;font-weight:700;color:#f2c14e;margin-top:4px}
.alr{position:relative;display:block;text-align:left;width:100%;border-radius:10px;border:1px solid rgba(200,147,42,.45);background:rgba(19,15,43,.82);color:#fff6dc;padding:6px 10px;flex:none}
.alr.w{border-left:4px solid #6df0b8}.alr.l{border-left:4px solid #ff8aa5}
.alt{display:flex;align-items:center;gap:8px;font-size:12px}.alt b{font-size:13px}.alr.w .alt b{color:#6df0b8}.alr.l .alt b{color:#ff8aa5}.alt span{opacity:.85}.alt small{opacity:.6}.alt i{margin-left:auto;font-style:normal;font-weight:700}
.alv{display:flex;align-items:center;gap:8px;margin-top:3px}.alv>b{color:#f2c14e;font-size:11px}.alv small{margin-left:auto;font-size:10px;opacity:.65}
.alg{display:flex;gap:3px}.alm{position:relative;width:34px;height:34px;border-radius:8px;background:rgba(0,0,0,.35);overflow:hidden}.alm img{width:100%;height:100%;object-fit:contain}
.alm.x img{filter:grayscale(1) brightness(.55)}.alm.x:after{content:'✕';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#ff8aa5;font-size:18px;font-weight:700}
.ald{margin-top:5px;font-size:11px;line-height:1.55;border-top:1px dashed rgba(200,147,42,.35);padding-top:4px}.ald .w{color:#9ff2cf}.ald .l{color:#ffb0c2}

/* build 199: unit page role panel */
.pgroles{display:flex;gap:4px}
.pgrole{position:relative;width:54px;height:46px;border-radius:10px;border:1px solid rgba(242,193,78,.4);background:rgba(14,10,32,.72);color:rgba(255,246,220,.75);padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.pgrole i{font-style:normal;font-size:17px;line-height:1}.pgrole small{font-size:9.5px;font-weight:600;line-height:1.2;white-space:nowrap}
.pgrole.cur{border-color:#ffe9a8;color:#2a1a05;background:linear-gradient(180deg,#ffe08a,#f2b83e);box-shadow:0 0 10px rgba(242,193,78,.6)}
.pgstrip{display:flex;align-items:center;gap:3px;margin-left:2px}.pgtl{font-size:9px;color:rgba(255,246,220,.6);margin-right:1px}
.pgmini{width:25px;height:25px;border-radius:7px;border:1px solid rgba(255,246,220,.3);background:rgba(0,0,0,.4);padding:0;overflow:hidden;flex:none}.pgmini img{width:100%;height:100%;object-fit:cover;display:block}
.pgmini.main{border-color:#f2c14e}.pgmini.cur{border-color:#8fe8d8;box-shadow:0 0 0 2px rgba(143,232,216,.55)}.pgmini.e{opacity:.35;border-style:dashed}
.pgt{gap:5px!important;flex-wrap:nowrap}

.wmel{--bh:40px;position:absolute;left:14px;top:8px;z-index:9;width:148px;height:40px;padding:0;font-size:13px;font-weight:800;letter-spacing:.06em;line-height:1}
.pgrole{width:48px!important}.pgrole small{font-size:9px!important}.pgmini{width:22px!important;height:22px!important}.pgstrip{margin-left:0!important}
/* build 199: toasts never cover the unit-page buttons */
body:has(.pg) #toast{bottom:auto;top:46px}

.avt.sm{top:108px!important}

.wml{top:54px!important;width:112px!important;height:34px!important;--bh:34px;font-size:12px!important;letter-spacing:0!important}

/* build 200: ELITE toggle effect */
.elfx{position:absolute;inset:0;z-index:9400;pointer-events:none;overflow:hidden}
.elfx .elf{position:absolute;inset:0;animation:elflash .9s ease-out forwards}
.elfx.on .elf{background:radial-gradient(circle at 50% 50%,rgba(255,170,70,.85),rgba(190,30,10,.55) 45%,rgba(40,0,0,.0) 75%)}
.elfx.off .elf{background:radial-gradient(circle at 50% 50%,rgba(170,220,255,.8),rgba(60,90,170,.45) 45%,rgba(0,0,40,0) 75%)}
.elfx .els{position:absolute;top:-10%;bottom:-10%;width:34%;left:-40%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:elsweep .75s ease-out forwards}
.elfx.on .els{background:linear-gradient(90deg,transparent,rgba(255,200,120,.85),transparent)}
.elfx .elt{position:absolute;left:0;right:0;top:40%;text-align:center;font-size:44px;font-style:italic;font-weight:900;letter-spacing:.14em;color:#fff3d0;text-shadow:0 0 18px rgba(255,120,40,.95),0 3px 0 #7a1a08;animation:eltxt .95s cubic-bezier(.2,.9,.25,1.1) forwards;display:flex;align-items:center;justify-content:center;gap:10px}
.elfx.off .elt{font-size:34px;text-shadow:0 0 16px rgba(120,170,255,.95),0 3px 0 #1c2a66}
.elfx .elt img{height:52px}
@keyframes elflash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@keyframes elsweep{0%{left:-40%}100%{left:120%}}
@keyframes eltxt{0%{opacity:0;transform:scale(2.2)}30%{opacity:1;transform:scale(1)}75%{opacity:1;transform:scale(1.04)}100%{opacity:0;transform:scale(1.15)}}
/* build 200: map buttons at the bottom corners */
.wmel{top:auto!important;bottom:12px;left:14px}
.wml{top:auto!important;bottom:12px;left:auto!important;right:14px}
/* build 201: Hollowmar floating ghosts */
.hgl{position:absolute;inset:0;pointer-events:none;z-index:2}
.hgl i{position:absolute;width:12%;aspect-ratio:1/1.2;margin:-7% 0 0 -7%;background:radial-gradient(ellipse 45% 38% at 50% 38%,#fff 0,rgba(255,255,255,.9) 25%,rgba(190,140,255,.7) 55%,rgba(150,90,255,0) 78%);border-radius:50% 50% 40% 60%/55% 55% 45% 45%;opacity:.6;filter:blur(.6px) drop-shadow(0 0 5px #b48cff);background-size:contain;background-repeat:no-repeat;animation:hgb 5s ease-in-out infinite}
.hgl i::before,.hgl i::after{content:"";position:absolute;top:38%;width:9%;height:16%;background:#3a1670;border-radius:50%;opacity:.8}.hgl i::before{left:30%}.hgl i::after{left:52%}
.hgl.earth i{background:radial-gradient(ellipse 45% 38% at 50% 38%,#fff 0,rgba(255,244,210,.9) 25%,rgba(255,190,90,.7) 55%,rgba(255,150,40,0) 78%);filter:blur(.6px) drop-shadow(0 0 5px #ffb44a)}.hgl.earth i::before,.hgl.earth i::after{background:#6a3a08}
@keyframes hgb{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-9%) translateX(3%)}}
/* build 202: slot buttons show their occupant; mini strip removed */
.pgrole{width:62px!important;height:54px!important;justify-content:flex-start!important;padding-top:3px!important}
.pgocc{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:24px;height:20px;border-radius:6px;overflow:hidden;border:1px solid rgba(255,246,220,.55);background:rgba(0,0,0,.45);font-size:8px;line-height:18px;color:rgba(255,246,220,.55);text-align:center}
.pgocc img{width:100%;height:100%;object-fit:cover;display:block}.pgocc.e{border-style:dashed}
.pgrole small{position:static}
.pgrole i{font-size:14px!important}.pgrole{gap:0!important}
.pgi .r{width:auto!important;min-width:18px;padding:0 3px!important;font-size:9px!important;white-space:nowrap}
/* build 204 */
.pgocc{position:static!important;transform:none!important;width:auto!important;height:auto!important;border:0!important;background:none!important;font-size:9px;line-height:1.2;max-width:58px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin-top:1px;color:rgba(255,246,220,.6)}
.pgrole.cur .pgocc{color:rgba(42,26,5,.75)}.pgrole.pick{border-color:#8fe8d8;box-shadow:0 0 10px rgba(143,232,216,.7)}
.pgrole{justify-content:center!important;padding-top:0!important}
.pgav{display:block;width:26px;height:24px;border-radius:7px;overflow:hidden;border:1px solid rgba(255,246,220,.55);background:rgba(0,0,0,.45);font-size:8px;line-height:22px;color:rgba(255,246,220,.55);text-align:center}.pgav img{width:100%;height:100%;object-fit:cover;display:block}.pgav.e{border-style:dashed}
.pgrole{gap:1px!important}
/* build 207: support slot icon fills the whole frame */
.pgrole{overflow:hidden}
.pgrole .pgav{position:absolute;inset:0;width:auto;height:auto;border:0;border-radius:0;background:rgba(0,0,0,.35);line-height:54px;font-size:10px}
.pgrole .pgav img{object-fit:cover}
.pgrole .pgav+small{position:absolute;left:0;right:0;bottom:0;padding:8px 0 2px;background:linear-gradient(0deg,rgba(8,5,20,.9),rgba(8,5,20,0));color:#fff6dc;text-shadow:0 1px 2px #000;z-index:1}
.pgrole.pick{box-shadow:0 0 10px rgba(143,232,216,.8),inset 0 0 0 2px #8fe8d8}

/* build 208: Eclipsarch art layers */
#wscene .wgate.has .wg-ring,#wscene .wgate.has .wg-halo{display:none}#wscene .wg-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:wspin 90s linear infinite}
#wscene .wgate.has{opacity:.9}#wscene .wrift.has .wr-glow,#wscene .wrift.has .wr-line{display:none}#wscene .wr-art{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:fill}
#wfront{position:absolute;pointer-events:none;z-index:3}#wfront img{pointer-events:none;transition:opacity .6s}
#wscene .wsl{pointer-events:none;transition:opacity .8s}
.bmon.e.wboss .bw{transform:none}

/* build 211 crystal art */
.wcry .cr-art{left:8px;top:2px;width:84px;height:96px;object-fit:contain;opacity:1;filter:drop-shadow(0 0 10px var(--c1));animation:wbob 2.6s ease-in-out infinite}
.wcry img.cr-r1{width:124px;height:124px;left:-12px;top:-12px;opacity:.9;filter:none;animation:wspin 14s linear infinite}
.wcry img.cr-r2{width:96px;height:96px;left:2px;top:2px;opacity:.55;filter:none;animation:wrev 9s linear infinite}
.wcry.p1 img{filter:hue-rotate(-14deg)}.wcry.p3 .cr-art{filter:brightness(1.25) drop-shadow(0 0 14px #ff2a3a)}
.wcry.warn .cr-art{animation:wgp .5s ease-in-out infinite}
.wcry .cr-orb{display:none}
@keyframes wbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* build 214 */
.qty{display:flex;align-items:center;gap:8px;font-size:13px}.qty input[type=range]{flex:1;min-width:0;accent-color:#f2c14e;height:28px}.qty .ghost{position:relative!important;left:auto!important;top:auto!important;right:auto!important;width:44px;height:36px;padding:0;font-size:16px;flex:none}.qty .ghost:last-child{width:56px;font-size:12px}.qty input[type=number]{width:96px;height:34px;font-size:16px;text-align:center;border-radius:8px;border:1px solid #c8932a;background:rgba(20,14,44,.9);color:#fff6dc}
.rbg{position:absolute;left:1px;top:1px;z-index:2;filter:drop-shadow(0 1px 1px #000);pointer-events:none}.pgsub .rbg,.ufc .rbg{position:static;vertical-align:-4px;margin-right:3px}.pgav .rbg{left:0;top:0}.pgflt{left:134px}.pgflt.on{border-color:#8fe8d8;color:#d6fff6}.ufn{display:inline-block;min-width:15px;padding:0 4px;border-radius:9px;background:#e8453c;color:#fff;font-size:10px;line-height:15px;text-align:center}.pgfc{position:absolute;left:210px;bottom:78px;z-index:3;font-size:11px;color:#8fe8d8;line-height:22px}
.ufb{position:absolute;left:20px;right:20px;top:42px;display:flex;flex-direction:column;gap:8px}.ufr{display:flex;gap:10px;align-items:flex-start}.ufr>b{flex:none;width:72px;font-size:12px;color:#f2c14e;line-height:30px}.ufr>div{display:flex;flex-wrap:wrap;gap:6px}.ufc{height:28px;padding:0 10px;border-radius:14px;border:1px solid rgba(242,193,78,.5);background:rgba(20,14,44,.85);color:#fff6dc;font-size:12px;display:flex;align-items:center;gap:3px}.ufc .el{display:inline-flex}.ufc.on{background:linear-gradient(180deg,#f5c34f,#c8862a);color:#2a1604;border-color:#ffe9a8;font-weight:700}
@media (max-height:420px){.pgfc{bottom:68px}}
.lvbar{height:14px;border-radius:7px;background:rgba(10,6,24,.85);border:1px solid rgba(242,193,78,.5);overflow:hidden}.lvbar b{position:absolute;left:0;top:0;bottom:0;transition:width .15s}.lvbar .l2{background:linear-gradient(90deg,#4ed1c5,#8fe8d8)}.lvbar .l1{background:linear-gradient(90deg,#f5c34f,#c8862a)}
.lvrow{display:flex;align-items:center;gap:8px;height:50px;padding:0 10px;border-radius:10px;border:1px solid rgba(200,147,42,.4);background:rgba(19,15,43,.75)}.lvrow>img,.lvrow>b{width:40px;flex:none;object-fit:contain}.lvn{width:150px;flex:none;display:flex;flex-direction:column;font-size:13px}.lvn small{font-size:10px;color:rgba(255,246,220,.65)}.lvrow input[type=range]{flex:1;min-width:0;accent-color:#f2c14e}.lvrow .ghost{position:relative!important;left:auto!important;top:auto!important;right:auto!important;width:36px;height:34px;padding:0;flex:none}.lvv{width:44px;text-align:right;font-weight:700;color:#ffe28a}
.lvtip{position:absolute;left:60px;right:60px;top:90px;z-index:5;padding:14px 16px;border-radius:12px;background:rgba(30,20,70,.97);border:2px solid #f2c14e;font-size:12.5px;line-height:1.6;text-align:center;box-shadow:0 8px 24px #000a}.lvtip .cta{position:relative;margin-top:8px;width:120px;height:36px;font-size:13px}
.pglv:disabled{opacity:.4}.pglv.hot{animation:lvhot 1s infinite alternate}@keyframes lvhot{to{box-shadow:0 0 12px #8fe8d8;background:rgba(40,120,120,.9)}}
.pgstar{position:relative}
.pgbr{display:flex;gap:4px}.pgbr .pgsb{flex:1;min-width:0;padding:0 2px;font-size:11px;white-space:nowrap}.pgbr .pglv{border-color:#8fe8d8}
.bgg{display:grid;grid-template-columns:repeat(6,68px);grid-auto-rows:68px;gap:8px;align-content:start;justify-content:start;overflow-y:auto;padding:2px}.bgs{position:relative;width:68px;height:68px;border-radius:10px;border:1px solid rgba(200,147,42,.5);background:linear-gradient(180deg,rgba(44,34,87,.9),rgba(19,15,43,.9));padding:0;color:#fff6dc;display:flex;align-items:center;justify-content:center}.bgs img{max-width:46px;max-height:46px;object-fit:contain}.bgs em{position:absolute;right:4px;bottom:2px;font-style:normal;font-weight:700;font-size:12px;color:#ffe28a;text-shadow:0 1px 2px #000}.bgs.cur{border-color:#ffe9a8;box-shadow:0 0 12px rgba(242,193,78,.7)}.bgs.em{opacity:.35;border-style:dashed}.bgs.sl-t{display:flex}
.bgd{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;padding:8px;border-radius:12px;border:1px solid rgba(200,147,42,.45);background:rgba(19,15,43,.78);font-size:12px;overflow:hidden}.bgd>b{color:#f2c14e;font-size:14px}.bgd small{color:rgba(255,246,220,.7);font-size:11px}.bgd p{margin:0;font-size:10.5px;line-height:1.4;color:rgba(255,246,220,.85)}.bgdi{height:56px;display:flex;align-items:center}.bgdi img{max-height:54px;max-width:70px;object-fit:contain}.bgd .cta,.bgd .ghost{position:relative!important;left:auto!important;top:auto!important;width:100%;height:34px;font-size:12px;padding:0;margin-top:auto}.bgd .ghost+.ghost{margin-top:0}
.bgs.em{opacity:1;background:rgba(19,15,43,.45);border:1px dashed rgba(200,147,42,.35)}
.cfn{font-size:12.5px;line-height:1.55;color:rgba(255,246,220,.9)}.cfn small{color:rgba(255,246,220,.65);font-size:11px}.cfi{height:38px!important;font-size:14px!important}.cfg{display:flex;align-items:center;justify-content:center}.cfr{display:flex;gap:12px}.cfc{flex:1;display:flex;flex-direction:column;gap:5px;padding:12px;border-radius:12px;border:1px solid rgba(200,147,42,.5);background:rgba(19,15,43,.8);font-size:12px}.cfc b{color:#f2c14e;font-size:13px}.cfc em{font-style:normal;color:#ffe28a;font-weight:700}
.rfb{margin-left:4px;height:19px;padding:0 7px;border-radius:10px;border:1px solid #c58bff;background:rgba(40,20,80,.85);color:#ecd9ff;font-size:10px;line-height:17px;white-space:nowrap;vertical-align:1px}
.rff{display:flex;gap:8px;align-items:stretch}.rfc{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;padding:6px 8px;border-radius:12px;border:1px solid rgba(200,147,42,.45);background:rgba(19,15,43,.8);font-size:11.5px;text-align:center}.rfc.hl{border-color:#c58bff;box-shadow:0 0 14px rgba(197,139,255,.4)}.rfc small{color:rgba(255,246,220,.65);font-size:10.5px}.rfc img{height:66px;max-width:100%;object-fit:contain}.rfc b{font-size:14px}.rfs{color:rgba(255,246,220,.85);line-height:1.4}.rfk{color:#ffe28a;font-size:10.5px}.rfa{align-self:center;font-size:26px;color:#c58bff;flex:none}
.rfe{display:flex;align-items:center;gap:4px;line-height:20px}
/* build 218 rift crossing — world-boss rift assets tinted purple */
#rift{position:absolute;inset:0;z-index:90;cursor:pointer;overflow:hidden}
#rift>img{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);pointer-events:none;max-width:none}
#rift .rf-bg{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(40,10,70,.88),rgba(6,2,16,.96));animation:rfBg .4s ease-out both}
#rift .rf-bh{width:330px;opacity:0;filter:hue-rotate(-75deg) saturate(1.1);animation:rfBh 2.3s .45s linear both}
#rift .rf-tear{width:520px;opacity:0;filter:hue-rotate(-75deg) saturate(1.2);animation:rfTear 1s .15s ease-out both}
#rift .rf-old{height:215px;opacity:0;animation:rfOld .75s .9s ease-in both}
#rift .rf-sk{width:430px;opacity:0;filter:hue-rotate(-75deg) brightness(1.3);animation:rfSk .8s 1.6s ease-out both}
#rift .rf-new{height:215px;animation:rfNew .65s 1.6s cubic-bezier(.2,1.4,.4,1) both}
#rift .rf-fl{position:absolute;inset:0;background:radial-gradient(circle at center,#fff 0,#d9b8ff 25%,rgba(150,80,255,0) 70%);opacity:0;animation:rfFl .55s 1.5s ease-out both}
#rift .rf-nm{position:absolute;left:0;right:0;bottom:22px;text-align:center;display:flex;flex-direction:column;gap:3px;align-items:center;opacity:1;animation:rfFade .5s 2.3s ease-out both}
#rift .rf-nm small{font-size:12px;color:#d9b8ff;letter-spacing:.1em}#rift .rf-nm b{font-size:26px;color:#ffe9a8}#rift .rf-nm span{display:flex;gap:6px;align-items:center;font-size:13px}#rift .rf-nm i{font-style:normal;opacity:.7;font-size:11px}#rift .rf-nm em{font-style:normal;font-size:11px;color:rgba(255,246,220,.55);margin-top:2px}
#rift.done *{animation:none!important}#rift.done .rf-bh,#rift.done .rf-tear,#rift.done .rf-sk,#rift.done .rf-old,#rift.done .rf-fl{opacity:0}#rift.done .rf-new{opacity:1}
@keyframes rfBg{from{opacity:0}to{opacity:1}}
@keyframes rfTear{0%{opacity:0;transform:translate(-50%,-50%) scaleX(0)}25%{opacity:1}65%{opacity:1;transform:translate(-50%,-50%) scaleX(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1,.2)}}
@keyframes rfBh{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(0)}18%{opacity:1}45%{transform:translate(-50%,-50%) scale(1) rotate(200deg)}80%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(520deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35) rotate(700deg)}}
@keyframes rfOld{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.04) rotate(45deg)}}
@keyframes rfSk{0%{opacity:.95;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
@keyframes rfNew{0%{opacity:0;transform:translate(-50%,-50%) scale(.04)}60%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes rfFl{0%{opacity:0}35%{opacity:.85}100%{opacity:0}}
@keyframes rfFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rfw{font-size:11px;color:#ffb3a0;line-height:1.4}
#rift .rf-nm{background:linear-gradient(0deg,rgba(6,2,16,.85),rgba(6,2,16,0));padding-top:30px;bottom:0;padding-bottom:14px}
#rift .rf-nm .el{position:static!important;display:inline-flex}
#rift .rf-nm b{text-shadow:0 2px 0 #2a1604,0 0 12px rgba(197,139,255,.8)}