:root{--teal-950:#071f1d;--teal-900:#0b2f2c;--teal-800:#0f3b38;--teal-700:#15524c;--gold:#e8b64c;--gold-hi:#ffe08a;--gold-dark:#8a5a12;--cream:#fff3d6;--muted:#b9d3cb;--ink:#2a1503;--hp:#e0453a;--hp-hi:#ff8a6a;--en:#2f8fe0;--en-hi:#7cc4ff;--xp:#f2c14e;--ok:#6fd88d;--r-common:#9aa0a6;--r-uncommon:#3fa95b;--r-rare:#3b7ddd;--r-epic:#9452d6;--r-legendary:#e0a526;--gold-bevel:linear-gradient(180deg, #fff6cf 0%, #f4cf6c 20%, #c58b2a 50%, #7c4c0c 76%, #e2b04c 100%);--gold-metal:conic-gradient(from 200deg, #fff3be, #d39a32 10%, #7a4a0e 22%, #c8902c 33%, #fff7d6 46%, #e2ab44 56%, #7a4a0e 70%, #b47c1e 80%, #ffe9a0 92%, #fff3be);--enamel:radial-gradient(circle at 50% 28%, #27857a 0%, #0f453f 55%, #062220 100%);--metal-gold:linear-gradient(180deg, #fffbe2 0%, #ffe48a 34%, #f0a62a 52%, #ffd25a 72%, #fff3bf 100%);--metal-white:linear-gradient(180deg, #fff 0%, #fbfbfb 44%, #c9d2d6 56%, #fff 100%);--orn-tl:url(/assets/ui/orn_tl.webp);--orn-tr:url(/assets/ui/orn_tr.webp);--orn-bl:url(/assets/ui/orn_bl.webp);--orn-br:url(/assets/ui/orn_br.webp);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;color:var(--cream);-webkit-user-select:none;user-select:none;touch-action:none;background:#0b2f2c;margin:0;font-family:Kanit,Leelawadee UI,Tahoma,sans-serif;overflow:hidden}canvas#game{width:100%;height:100%;display:block;position:fixed;inset:0}#ui{pointer-events:none;position:fixed;inset:0}#ui>*{pointer-events:auto}button{cursor:pointer;font-family:inherit}.hidden{display:none!important}.txt{text-shadow:0 1px 2px #000000b3,0 0 8px #00000059}.nw{white-space:nowrap}.mtx{white-space:nowrap;color:var(--ink);-webkit-text-stroke:.17em var(--ink);text-shadow:0 .07em 0 var(--ink), 0 .12em .18em #00000073;display:inline-block;position:relative}.mtx:after{content:attr(data-t);-webkit-text-stroke:0;text-shadow:none;color:#0000;background:var(--mfill,var(--metal-gold));-webkit-background-clip:text;background-clip:text;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.panel{background:radial-gradient(130% 60% at 50% 0%, #50af9e33, transparent 62%) padding-box, linear-gradient(180deg, #13483f 0%, #0b302c 52%, #061d1b 100%) padding-box, var(--gold-bevel) border-box;border:3px solid #0000;border-radius:16px;position:relative;box-shadow:0 0 0 1px #1e1002e6,0 16px 30px -8px #0009,inset 0 0 0 1px #1e1002e6,inset 0 2px 0 1px #ffecaa24,inset 0 14px 22px -12px #0000008c,inset 0 -16px 26px -14px #00000080}.panel:after{content:"";pointer-events:none;border:1px solid #e8b64c52;border-radius:11px;position:absolute;inset:4px}.panel:before{content:"";pointer-events:none;z-index:2;--o:84px;background:var(--orn-tl) left top / var(--o) no-repeat, var(--orn-tr) right top / var(--o) no-repeat, var(--orn-bl) left bottom / var(--o) no-repeat, var(--orn-br) right bottom / var(--o) no-repeat;position:absolute;inset:-8px}.btn-gold,.btn-teal{isolation:isolate;letter-spacing:.02em;border:2px solid #0000;border-radius:999px;font-weight:700;transition:transform 70ms,box-shadow 70ms,filter .15s;position:relative}.btn-gold:before,.btn-teal:before{content:"";z-index:-1;pointer-events:none;border-radius:999px;height:44%;position:absolute;top:2px;left:9%;right:9%}.btn-gold{color:#3b2204;text-shadow:0 1px #fff8d7bf;background:linear-gradient(#fff7cc 0%,#ffd86c 36%,#eaa632 60%,#c9831a 100%) padding-box padding-box,linear-gradient(#fffbe6,#c48a22 50%,#6b430c) border-box;padding:.55em 1.6em;font-size:1.1rem;box-shadow:0 4px #6b3f08,0 5px 0 1px #1e1002a6,0 10px 16px #00000061,inset 0 -4px 7px #964b0073,inset 0 2px 1px #fffc}.btn-gold:before{background:linear-gradient(#ffffffd9,#fff0)}.btn-teal{color:var(--cream);text-shadow:0 1px 2px #000000b3;background:linear-gradient(#2a8478 0%,#14564e 45%,#0b3631 100%) padding-box padding-box,linear-gradient(#ffeaa6,#c08a2a 55%,#6b430c) border-box;padding:.45em 1.2em;font-size:1rem;box-shadow:0 3px #04201d,0 4px 0 1px #1e100299,0 8px 14px #00000059,inset 0 -4px 7px #00000059,inset 0 1px 1px #c8fff059}.btn-teal:before{background:linear-gradient(#d2fff552,#d2fff500)}@media (hover:hover){.btn-gold:hover:not(:disabled),.btn-teal:hover:not(:disabled){filter:brightness(1.1)saturate(1.05)}}.btn-gold:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px #6b3f08,0 2px 0 1px #1e1002a6,0 4px 8px #00000059,inset 0 -2px 5px #964b0073,inset 0 2px 4px #783c0059}.btn-teal:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px #04201d,0 2px 0 1px #1e100299,0 4px 8px #0000004d,inset 0 2px 6px #00000073}.btn-gold:disabled{filter:grayscale(.85)brightness(.75);cursor:default}.btn-teal:disabled{filter:grayscale(.6)brightness(.7);opacity:.7;cursor:default}.btn-round{width:46px;height:46px;color:var(--gold-hi);background:var(--enamel) padding-box, var(--gold-metal) border-box;box-shadow:0 0 0 1.5px var(--ink), 0 5px 9px #00000080, inset 0 2px 2px #dcfff54d, inset 0 -4px 7px #00000080;text-shadow:0 1px 0 var(--ink), 0 0 6px #ffd25a73;border:3px solid #0000;border-radius:50%;place-items:center;padding:0;font-size:1.25rem;line-height:1;transition:transform 70ms;display:grid;position:relative}.btn-round svg{width:62%;height:62%;filter:drop-shadow(0 1.5px 0 var(--ink))}.btn-round:active{transform:translateY(2px)scale(.95)}.badge{background:linear-gradient(180deg, #06201d, #0e3a35) padding-box, var(--gold-bevel) border-box;border:1.5px solid #0000;border-radius:999px;align-items:center;gap:.3em;padding:.1em .75em;font-size:.85rem;display:inline-flex;box-shadow:inset 0 2px 4px #0000008c,0 1px #ffecaa26}.rarity-common{--rc:var(--r-common)}.rarity-uncommon{--rc:var(--r-uncommon)}.rarity-rare{--rc:var(--r-rare)}.rarity-epic{--rc:var(--r-epic)}.rarity-legendary{--rc:var(--r-legendary)}.crest{z-index:3;pointer-events:none;background:url(/assets/ui/crest.webp) 50%/contain no-repeat;width:126px;height:24px;position:absolute;top:0;left:50%;transform:translate(-50%,-64%)}.screen{display:grid;position:fixed;inset:0;overflow:hidden}.screen-bg{background-position:50%;background-size:cover;position:absolute;inset:0}.title-logo{width:min(46vw,70vh);filter:drop-shadow(0 6px 10px #3c1e008c);width:min(46vw,70dvh);animation:.9s ease-out logoIn;position:absolute;top:3%;left:50%;transform:translate(-50%)}@keyframes logoIn{0%{opacity:0;transform:translate(-50%,-14px)scale(.96)}to{opacity:1;transform:translate(-50%)}}.title-studio{left:calc(18px + var(--safe-l));top:calc(12px + var(--safe-t));letter-spacing:.12em;color:#fff;opacity:.9;font-size:.9rem;position:absolute}.title-top{right:calc(16px + var(--safe-r));top:calc(10px + var(--safe-t));gap:14px;display:flex;position:absolute}.title-top .ico{justify-items:center;gap:3px;font-size:.78rem;display:grid}.title-bottom{left:50%;bottom:calc(6% + var(--safe-b));justify-items:center;gap:14px;display:grid;position:absolute;transform:translate(-50%)}.server-pill{background:linear-gradient(180deg, #0e3430f2, #061a18f2) padding-box, var(--gold-bevel) border-box;box-shadow:0 0 0 1px var(--ink), 0 4px 10px #0006, inset 0 2px 4px #00000080;border:2px solid #0000;border-radius:999px;align-items:center;gap:.5em;padding:.3em 1.2em;font-size:.95rem;display:inline-flex}.dot{background:radial-gradient(circle at 35% 30%, #d6ffe0, var(--ok) 55%, #2d8a4a);width:10px;height:10px;box-shadow:0 0 8px var(--ok);border-radius:50%}.btn-start{padding:.45em 2.6em;font-size:clamp(1.3rem,3.2vw,2rem)}.btn-start:after{content:"";z-index:-2;pointer-events:none;background:radial-gradient(closest-side,#ffd66e8c,#0000);border-radius:999px;animation:2.4s ease-in-out infinite startPulse;position:absolute;inset:-10px -14px}@keyframes startPulse{0%,to{opacity:.35;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}.title-fs{left:calc(14px + var(--safe-l));bottom:calc(10px + var(--safe-b));justify-items:center;gap:3px;font-size:.78rem;display:grid;position:absolute}.fs-btn svg{width:56%;height:56%}.title-ver{right:calc(14px + var(--safe-r));bottom:calc(8px + var(--safe-b));opacity:.85;font-size:.78rem;position:absolute}.modal-back{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:radial-gradient(#04141259,#020a09b3);place-items:center;display:grid;position:fixed;inset:0}.login{gap:10px;width:min(440px,92vw);padding:24px 28px 18px;display:grid}.login h2{text-align:center;margin:0 0 4px;font-size:1.7rem;font-weight:600}.login .row{justify-content:space-between;align-items:center;gap:10px;font-size:.95rem;display:flex}.login .social{justify-content:flex-start;align-items:center;gap:12px;padding:.45em 1em;display:flex}.login .social i{border-radius:50%;place-items:center;width:28px;height:28px;font-style:normal;font-weight:700;display:grid;box-shadow:0 2px 3px #0006,inset 0 1px #ffffff80}.login .note{color:var(--muted);text-align:center;font-size:.78rem}.login .x{z-index:3;width:36px;height:36px;font-size:.95rem;position:absolute;top:10px;right:12px}.title-h{justify-self:center;font-size:1.7rem;font-weight:600}.select-left{left:calc(14px + var(--safe-l));top:calc(10px + var(--safe-t));align-items:center;gap:12px;display:flex;position:absolute}.select-left h1{margin:0;font-size:clamp(1.4rem,3vw,2rem);font-weight:600}canvas.select-3d{width:100%;height:100%;position:absolute;inset:0}.cards{left:calc(14px + var(--safe-l));bottom:calc(12px + var(--safe-b));gap:10px;display:flex;position:absolute}.card{aspect-ratio:3/4;cursor:pointer;background:var(--card-img,none) center top / cover no-repeat padding-box, linear-gradient(#0b2f2c, #0b2f2c) padding-box, var(--gold-bevel) border-box;width:clamp(70px,9.5vw,116px);box-shadow:0 0 0 1px var(--ink), 0 6px 14px #00000073, inset 0 0 0 1px #1e1002cc, inset 0 -24px 26px -10px #0000008c;border:3px solid #0000;border-radius:12px;transition:transform .15s;position:relative;overflow:hidden}.card:after{content:"";pointer-events:none;background:linear-gradient(160deg,#ffffff47,#0000 38%);border-radius:9px;position:absolute;inset:0}.card .nm{text-align:center;background:linear-gradient(#0000,#000c);padding:3px 0 4px;font-size:.95rem;position:absolute;bottom:0;left:0;right:0}.card.sel{box-shadow:0 0 0 1px var(--ink), 0 0 0 3px #fff6c8, 0 0 24px #ffd25ad9, 0 10px 18px #00000073;transform:translateY(-6px)}.card.locked{cursor:default;box-shadow:0 0 0 1px var(--ink), 0 6px 14px #00000073, inset 0 6px 12px #000000b3, inset 0 -2px 3px #ffecaa14;background:radial-gradient(circle at 50% 38%,#3c968738,#0000 62%) padding-box padding-box,linear-gradient(#04120f,#0b2a26 70%,#123a34) padding-box padding-box,linear-gradient(#3a2306,#8a5a12 40%,#e2b04c 85%,#ffe9a0) border-box;place-items:center;display:grid}.card.locked:after{background:0 0}.card.locked .sil{opacity:.3;background:radial-gradient(circle at 50% 24%,#79b3a7 0 16%,#0000 17%),radial-gradient(48% 42% at 50% 76%,#79b3a7 0 97%,#0000 100%);position:absolute;inset:12% 16% 20%}.card.locked .lockm{aspect-ratio:1;background:var(--enamel) padding-box, var(--gold-metal) border-box;width:46%;box-shadow:0 0 0 1px var(--ink), 0 4px 8px #0000008c, inset 0 -3px 5px #00000080;border:2.5px solid #0000;border-radius:50%;place-items:center;margin-bottom:16%;display:grid;position:relative}.card.locked .lockm svg{filter:drop-shadow(0 1px 1px #000000b3);width:66%;height:66%}.card.locked .nm{color:var(--muted);font-size:.8rem}.select-panel{right:calc(14px + var(--safe-r));top:calc(10px + var(--safe-t));bottom:calc(10px + var(--safe-b));grid-template-rows:minmax(0,1fr);width:min(330px,34vw);display:grid;position:absolute}.select-body{grid-template-columns:minmax(0,1fr);align-content:start;gap:14px;min-height:0;padding:18px 18px 16px;display:grid}@media (min-height:461px){.select-panel{bottom:auto}.select-body{padding:20px 20px 22px}}.select-panel h2{text-align:center;justify-self:center;margin:0;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.15}.role{background:linear-gradient(180deg, #d0453c, #8a1f18 60%, #5e120d) padding-box, var(--gold-bevel) border-box;box-shadow:0 0 0 1px var(--ink), 0 3px 6px #0006, inset 0 1px 0 #ffc8b473;border:1.5px solid #0000;border-radius:8px;justify-self:center;padding:.1em 1.1em;font-size:.95rem}.statbars{align-content:start;gap:8px;display:grid}.statbar{grid-template-columns:26px 54px 1fr;align-items:center;gap:8px;font-size:1rem;display:grid}.statbar .bar{background:linear-gradient(180deg, #030a09, #142826) padding-box, var(--gold-bevel) border-box;border:1.5px solid #0000;border-radius:999px;height:13px;position:relative;overflow:hidden;box-shadow:inset 0 2px 3px #000c}.statbar .bar i{border-radius:inherit;background-image:linear-gradient(#ffffff80,#fff0 50%,#0000004d);height:100%;display:block}.skill-row{justify-content:center;gap:6px;display:flex}.skill-row img{background:var(--gold-metal);width:40px;height:40px;box-shadow:0 0 0 1px var(--ink), 0 3px 5px #00000073;border-radius:50%;padding:2px}.name-row{gap:8px;display:flex}.name-row input{background:linear-gradient(180deg, #03100f, #0c2724) padding-box, var(--gold-bevel) border-box;width:0;min-width:0;color:var(--cream);-webkit-user-select:text;user-select:text;border:1.5px solid #0000;border-radius:10px;outline:none;flex:1 1 0;padding:.45em .8em;font-family:inherit;font-size:1rem;box-shadow:inset 0 3px 6px #000000b3}.name-row input:focus{box-shadow:inset 0 3px 6px #000000b3,0 0 0 2px #ffe08a73}.name-row input::placeholder{color:#8fb3aa}.title-btns{align-items:center;gap:14px;display:flex}.title-btns .btn-start{white-space:nowrap}.btn-chars{white-space:nowrap;padding:.5em 1.3em;font-size:clamp(1rem,2vw,1.25rem)}.title-last{white-space:nowrap;background:linear-gradient(180deg, #0e3430eb, #061a18eb) padding-box, var(--gold-bevel) border-box;box-shadow:0 0 0 1px var(--ink), 0 3px 8px #0006;border:1.5px solid #0000;border-radius:999px;margin-top:-4px;padding:.15em 1.1em;font-size:.88rem}.roster-panel{right:calc(14px + var(--safe-r));top:calc(10px + var(--safe-t));bottom:calc(10px + var(--safe-b));grid-template-rows:minmax(0,1fr);width:min(360px,40vw);display:grid;position:absolute}.roster-body{grid-template-rows:auto minmax(0,1fr) auto;gap:10px;min-height:0;padding:16px 16px 14px;display:grid}.roster-h{color:var(--gold-hi);justify-content:space-between;align-items:center;gap:8px;font-size:1.05rem;display:flex}.roster-list{overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#e8b64c80 transparent;align-content:start;gap:8px;min-height:0;padding:4px 6px 6px 3px;display:grid;position:relative;overflow-y:auto}.roster-list.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 26px),#00000026);mask-image:linear-gradient(#000 calc(100% - 26px),#00000026)}.char-card{text-align:left;min-height:60px;color:var(--cream);background:linear-gradient(#0f3a35,#061c19) padding-box padding-box,linear-gradient(#ffe9a88c,#6b430cd9) border-box;border:2px solid #0000;border-radius:14px;align-items:center;gap:10px;padding:6px 10px 6px 6px;font-size:1rem;display:flex;position:relative;box-shadow:inset 0 2px 5px #0000008c,0 2px 6px #00000059}.char-card.sel{background:radial-gradient(circle at 18%,#ffd66e4d,#0000 70%) padding-box padding-box,linear-gradient(#155049,#08241f) padding-box padding-box,linear-gradient(#fff6cf,#c48a22) border-box;box-shadow:0 0 14px #ffd25a8c,inset 0 2px 5px #0006}@media (hover:hover){.char-card:hover:not(:disabled){filter:brightness(1.12)}}.cc-face{width:46px;height:46px;box-shadow:0 0 0 1px var(--ink), 0 2px 4px #00000080;background-color:#0b2f2c;background-position:50% 23%;background-repeat:no-repeat;background-size:190%;border:2.5px solid #e8b64c;border-radius:50%;flex:none}.cc-face.plus{color:var(--gold-hi);background:var(--enamel);text-shadow:0 1px 0 var(--ink);place-items:center;font-size:1.7rem;font-style:normal;line-height:1;display:grid}.cc-txt{flex:1;gap:1px;min-width:0;display:grid}.cc-name{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.cc-sub{color:var(--muted);font-size:.8rem}.cc-last{color:#3b2204;background:linear-gradient(#fff1b0,#e8b64c);border-radius:999px;flex:none;align-self:flex-start;padding:0 .55em;font-size:.68rem;font-style:normal}.char-new{border-style:dashed}.char-new:disabled{opacity:.55;cursor:default}.roster-empty{color:var(--muted);text-align:center;padding:6px 0;font-size:.9rem}.roster-act{gap:10px;display:flex}.roster-act .btn-play{flex:1}.roster-act .btn-del{flex:none;padding-left:1em;padding-right:1em}@media (min-height:461px){.roster-panel{max-height:calc(100% - 20px - var(--safe-t) - var(--safe-b));bottom:auto}}.char-plate{left:34.4%;bottom:calc(14px + var(--safe-b));background:linear-gradient(180deg, #14463ff0, #061c19f0) padding-box, var(--gold-bevel) border-box;max-width:46vw;box-shadow:0 0 0 1px var(--ink), 0 8px 16px #00000073, inset 0 1px 0 #ffecaa40;pointer-events:none;border:2px solid #0000;border-radius:14px;justify-items:center;padding:4px 26px 6px;display:grid;position:absolute;transform:translate(-50%)}.char-plate b{text-overflow:ellipsis;white-space:nowrap;max-width:100%;color:var(--gold-hi);font-size:1.3rem;font-weight:600;line-height:1.3;overflow:hidden}.char-plate span{font-size:.85rem}.confirm{text-align:center;justify-items:center;gap:12px;width:min(430px,92vw);padding:20px 24px 18px;display:grid}.confirm h2{--mfill:linear-gradient(180deg, #ffe0d0 0%, #ff8a6a 40%, #c8281e 60%, #ff9a7a 100%);margin:0;font-size:1.6rem;font-weight:600}.confirm-who{text-align:left;align-items:center;gap:10px;display:flex}.confirm-who>span{display:grid}.confirm-who b{color:var(--gold-hi);font-size:1.15rem;font-weight:600}.confirm-msg{font-size:.95rem}.confirm-msg b{color:#ffb59c;font-weight:600}.confirm-act{gap:12px;display:flex}.confirm-act button{min-width:124px}.btn-gold.btn-danger{color:#fff4ea;text-shadow:0 1px 1px #460000d9;background:linear-gradient(#ffb59c 0%,#ea553f 36%,#b9281c 62%,#861710 100%) padding-box padding-box,linear-gradient(#ffe6c8,#b85a22 50%,#5e1a08) border-box;box-shadow:0 4px #5e140c,0 5px 0 1px #1e0602a6,0 10px 16px #00000061,inset 0 -4px 7px #5a000073,inset 0 2px 1px #ffdcc8b3}.btn-gold.btn-danger:active:not(:disabled){box-shadow:0 1px #5e140c,0 2px 0 1px #1e0602a6,0 4px 8px #00000059,inset 0 2px 4px #5a000073}.loading{background:#0b2f2c 50%/cover no-repeat;place-items:center;display:grid;position:fixed;inset:0}.loading .box{text-align:center;gap:12px;width:min(520px,80vw);padding:20px 24px;display:grid}.loading .prog{background:linear-gradient(180deg, #030a09, #142826) padding-box, var(--gold-bevel) border-box;height:16px;box-shadow:0 0 0 1px var(--ink), inset 0 2px 4px #000000d9;border:2px solid #0000;border-radius:999px;position:relative;overflow:hidden}.loading .prog:after{content:"";background:linear-gradient(#ffffff80,#fff0);border-radius:999px;height:42%;position:absolute;top:1px;left:4px;right:4px}.loading .prog i{border-radius:inherit;background:linear-gradient(#fff1b0,#f2c14e 45%,#b87a18);width:0;height:100%;transition:width .2s;display:block}.loading .tip{color:var(--muted);font-size:.9rem}.toasts{justify-items:center;gap:6px;display:grid;position:absolute;top:20%;left:50%;transform:translate(-50%)}#ui:has(>.hud)>.toasts{left:calc(14px + var(--safe-l));top:calc(128px + var(--safe-t));justify-items:start;transform:none}#ui>.toasts{pointer-events:none}.toast{white-space:nowrap;background:linear-gradient(180deg, #14463ff5, #061c19f5) padding-box, var(--gold-bevel) border-box;box-shadow:0 0 0 1px var(--ink), 0 6px 14px #00000073, inset 0 1px 0 #ffecaa40;border:2px solid #0000;border-radius:999px;padding:.3em 1.3em;font-size:1rem;animation:2.6s forwards toast}@keyframes toast{0%{opacity:0;transform:translateY(8px)scale(.94)}10%,80%{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px)}}.loot{background:linear-gradient(90deg, color-mix(in srgb, var(--rc) 35%, #08241f), #061c19f0 45%) padding-box, linear-gradient(90deg, var(--rc), #e8b64c99) border-box;box-shadow:0 0 0 1px var(--ink), 0 4px 10px #0006;border:1.5px solid #0000;border-radius:10px;padding:.22em 1.1em .22em 1.9em;font-size:.9rem;animation:3s forwards toast;position:relative}.loot:before{content:"";background:radial-gradient(circle at 35% 30%, #fff, var(--rc) 60%);width:9px;height:9px;box-shadow:0 0 6px var(--rc);position:absolute;top:50%;left:9px;transform:translateY(-50%)rotate(45deg)}.levelup{left:50%;top:calc(64px + var(--safe-t));justify-items:center;gap:8px;width:max-content;animation:.5s cubic-bezier(.2,1.4,.4,1) lvIn,.4s ease-in 6.6s forwards lvOut;display:grid;position:absolute;transform:translate(-50%)}#ui>.levelup{pointer-events:none}#ui>.levelup .lv-btns button{pointer-events:auto}.hud[data-top=boss]~.levelup{top:calc(100px + var(--safe-t))}.hud[data-top=boss2]~.levelup{top:calc(146px + var(--safe-t))}@keyframes lvIn{0%{opacity:0;transform:translate(-50%,-20px)scale(.8)}to{opacity:1;transform:translate(-50%)}}@keyframes lvOut{to{opacity:0;transform:translate(-50%,-12px)}}.lv-banner{align-items:center;gap:12px;padding:4px 18px 0 0;display:flex;position:relative}.lv-banner h2{margin:0;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.15}.lv-num{background:var(--enamel) padding-box, var(--gold-metal) border-box;width:58px;height:58px;box-shadow:0 0 0 1.5px var(--ink), 0 0 24px #ffd25ab3, 0 6px 12px #00000080, inset 0 -5px 8px #00000080;border:4px solid #0000;border-radius:50%;flex:none;place-items:center;font-size:1.7rem;font-weight:700;display:grid;position:relative}.lv-num:before{content:"";z-index:-1;pointer-events:none;background:repeating-conic-gradient(#ffe28cbf 0 6deg, transparent 6deg 18deg);border-radius:50%;width:220px;height:220px;margin:-110px 0 0 -110px;animation:12s linear infinite rays;position:absolute;top:50%;left:50%;-webkit-mask:radial-gradient(closest-side,#000 22%,#0000);mask:radial-gradient(closest-side,#000 22%,#0000)}@keyframes rays{to{transform:rotate(1turn)}}.lv-row{align-items:center;gap:8px;display:flex}.lv-card{white-space:nowrap;background:linear-gradient(180deg, #185249f7, #07201df7) padding-box, var(--gold-bevel) border-box;box-shadow:0 0 0 1px var(--ink), 0 6px 12px #00000073, inset 0 1px 0 #ffecaa47, inset 0 -6px 9px #00000059;border:2px solid #0000;border-radius:999px;align-items:center;gap:8px;padding:4px 16px 4px 4px;font-size:.95rem;animation:.45s cubic-bezier(.2,1.4,.4,1) .15s both cardIn;display:flex}.lv-card:nth-child(2){animation-delay:.25s}.lv-card:nth-child(3){animation-delay:.35s}@keyframes cardIn{0%{opacity:0;transform:translateY(10px)scale(.9)}to{opacity:1;transform:none}}.lv-card img,.lv-card .big{background:var(--enamel) padding-box, var(--gold-metal) border-box;width:34px;height:34px;box-shadow:0 0 0 1px var(--ink), 0 2px 4px #00000073;border:2.5px solid #0000;border-radius:50%;flex:none;place-items:center;font-size:1rem;font-style:normal;display:grid}.lv-card b{color:var(--gold-hi);font-weight:600}.lv-btns{gap:8px;margin-left:4px;display:flex}.lv-btns .btn-gold,.lv-btns .btn-teal{white-space:nowrap;padding:.34em 1.25em;font-size:1rem}.endscreen{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:radial-gradient(#04141259,#020a09b8);place-items:center;display:grid;position:fixed;inset:0}.endscreen .box{text-align:center;justify-items:center;gap:12px;min-width:min(420px,90vw);padding:30px 40px 24px;display:grid}.endscreen .box>.btn-gold,.endscreen .box>.btn-teal{min-width:220px}.endscreen h2{color:#0000;text-shadow:none;background:var(--mfill,var(--metal-gold));-webkit-text-stroke:1.5px var(--ink);filter:drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 4px 6px #0006);-webkit-background-clip:text;background-clip:text;margin:0 0 4px;font-size:2.6rem;font-weight:700;line-height:1.2}.endscreen:has(#btn-respawn) h2{--mfill:linear-gradient(180deg, #ffe0d0 0%, #ff8a6a 40%, #c8281e 60%, #ff9a7a 100%)}.rotate{text-align:center;z-index:50;background:#0b2f2c;place-items:center;padding:24px;font-size:1.2rem;display:none;position:fixed;inset:0}@media (orientation:portrait) and (pointer:coarse){.rotate{display:grid}}.debug{z-index:40;flex-wrap:wrap;gap:6px;padding:8px;display:flex;position:fixed;bottom:8px;left:50%;transform:translate(-50%)}.debug:before{display:none}.debug button{padding:.3em .7em;font-size:.8rem}@media (max-height:460px){.panel:before{--o:56px;inset:-6px}.select-body{gap:6px;padding:12px 14px}.select-panel h2{font-size:1.45rem}.statbars{gap:3px}.statbar{grid-template-columns:20px 46px 1fr;font-size:.85rem}.skill-row img{width:30px;height:30px}.name-row input{padding:.3em .6em}.select-panel .btn-gold{padding:.35em 1em;font-size:1rem}.cards{gap:6px}.card{width:62px}.levelup,.hud[data-top]~.levelup{left:calc(14px + var(--safe-l));top:calc(110px + var(--safe-t));flex-wrap:wrap;align-items:center;gap:0 5px;width:auto;max-width:300px;animation:.45s cubic-bezier(.2,1.4,.4,1) lvInL,.4s ease-in 6.6s forwards lvOutL;display:flex;transform:none}.lv-banner{gap:8px;padding:0 6px 0 0}.lv-banner h2{font-size:1.35rem}.lv-num{border-width:3px;width:36px;height:36px;font-size:1.1rem}.lv-num:before{width:130px;height:130px;margin:-65px 0 0 -65px}.lv-row{display:contents}.lv-row:after{content:"";flex-basis:100%;order:2}.lv-btns{order:1;gap:5px;margin-left:0}.lv-card{border-width:1.5px;order:3;gap:5px;margin-top:4px;padding:2px 10px 2px 2px;font-size:.72rem}.lv-card .lbl{display:none}.lv-card b{text-overflow:ellipsis;vertical-align:bottom;max-width:10em;display:inline-block;overflow:hidden}.lv-card img,.lv-card .big{border-width:2px;width:24px;height:24px;font-size:.74rem}.lv-btns .btn-gold,.lv-btns .btn-teal{padding:.22em .9em;font-size:.78rem}#ui:has(>.hud)>.toasts{top:calc(132px + var(--safe-t))}#ui:has(>.levelup)>.toasts{top:calc(186px + var(--safe-t))}#ui:has(>.levelup)>.toasts>:nth-last-child(n+2){display:none}.toasts{gap:5px}.toast{padding:.22em 1.1em;font-size:.8rem}.loot{padding:.18em 1em .18em 1.7em;font-size:.76rem}.endscreen .box{gap:8px;padding:18px 28px 16px}.endscreen h2{font-size:2rem}.login{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(520px,92vw);padding:12px 16px 10px}.login h2{grid-column:1/-1;margin:0;font-size:1.3rem}.login #btn-guest,.login .row,.login .note{grid-column:1/-1}.login #btn-guest{padding-top:.4em;padding-bottom:.4em}.login .social{justify-content:center;gap:7px;min-width:0;padding:.3em .5em;font-size:.9rem}.login .social i{flex:none;width:24px;height:24px}.login .row{font-size:.85rem}.login .note{font-size:.72rem}.login .x{top:6px;right:8px}}@media (max-height:380px){.select-panel{top:calc(6px + var(--safe-t));bottom:calc(6px + var(--safe-b))}.select-body{overscroll-behavior:contain;touch-action:pan-y;gap:4px;padding:8px 12px;overflow-y:auto}.select-panel h2{font-size:1.15rem}.select-panel .role{display:none}.select-body>div:has(>.skill-row)>.txt{display:none}.statbars{gap:2px}.statbar{grid-template-columns:18px 40px 1fr;gap:6px;font-size:.78rem}.statbar .bar{height:10px}.skill-row img{width:24px;height:24px}.select-panel .btn-round,.select-panel .btn-gold,.name-row input{min-height:40px}.select-panel #btn-confirm{position:sticky;bottom:0}.select-left h1{font-size:1.3rem}.select-left .btn-round{width:44px;height:44px}.cards{bottom:calc(8px + var(--safe-b))}.loading .box{gap:8px;padding:14px 20px}#ui:has(>.hud)>.toasts{left:calc(10px + var(--safe-l));top:calc(84px + var(--safe-t))}.toasts{gap:4px}.toast{border-width:1.5px;padding:.16em .95em;font-size:.72rem}.loot{padding:.14em .9em .14em 1.6em;font-size:.7rem}.loot:before{width:7px;height:7px;left:7px}.levelup,.hud[data-top]~.levelup{left:calc(10px + var(--safe-l));top:calc(84px + var(--safe-t));max-width:262px}.lv-banner{gap:6px}.lv-banner h2{font-size:1.12rem}.lv-num{border-width:2.5px;width:30px;height:30px;font-size:.9rem}.lv-num:before{width:104px;height:104px;margin:-52px 0 0 -52px}.lv-card{gap:4px;padding:1px 8px 1px 1px;font-size:.7rem}.lv-card img,.lv-card .big{border-width:1.5px;width:20px;height:20px;font-size:.62rem}.lv-btns .btn-gold,.lv-btns .btn-teal{padding:.2em .85em;font-size:.74rem}#ui:has(>.levelup)>.toasts{top:calc(150px + var(--safe-t))}.endscreen .box{gap:6px;padding:14px 24px 12px}.endscreen h2{margin:0;font-size:1.7rem}}@keyframes lvInL{0%{opacity:0;transform:translate(-16px)scale(.9)}to{opacity:1;transform:none}}@keyframes lvOutL{to{opacity:0;transform:translate(-12px)}}@media (max-height:300px){.select-body>div:has(>.skill-row){display:none}.select-panel h2{font-size:1.1rem}.statbar{font-size:.74rem}.select-left h1{font-size:1.15rem}.card{width:54px}.levelup,.hud[data-top]~.levelup{top:calc(78px + var(--safe-t))}#ui:has(>.hud)>.toasts{top:calc(78px + var(--safe-t))}#ui:has(>.levelup)>.toasts{top:calc(142px + var(--safe-t))}.endscreen .box{padding:10px 20px}.endscreen h2{font-size:1.45rem}}@media (max-height:280px){#ui:has(>.hud)>.toasts>:nth-last-child(n+3){display:none}#ui:has(>.levelup)>.toasts{display:none}}@media (max-width:720px){.title-top{top:calc(8px + var(--safe-t));flex-direction:column;gap:6px}.title-top .ico{grid-template-columns:auto auto;align-items:center;gap:6px}.title-top .ico>button{order:2}.card.locked:nth-child(n+5){display:none}}.endscreen .box>.fs-btn{z-index:3;position:absolute;top:10px;right:10px}@media (pointer:coarse){.btn-gold,.btn-teal,.btn-round{min-height:44px}.btn-round{min-width:44px}#ui>.levelup .lv-btns button{min-height:0}.lv-btns button:after{content:"";position:absolute;inset:-11px -3px}}@media (max-height:460px){.roster-panel{width:min(340px,42vw)}.roster-body{gap:6px;padding:10px 12px}.roster-h{font-size:.95rem}.roster-list{gap:6px}.char-card{gap:8px;min-height:50px;padding:4px 8px 4px 4px;font-size:.92rem}.cc-face{width:40px;height:40px}.cc-sub{font-size:.74rem}.roster-act .btn-gold,.roster-act .btn-teal{padding-top:.35em;padding-bottom:.35em;font-size:1rem}.char-plate{padding:2px 18px 4px}.char-plate b{font-size:1.1rem}.char-plate span{font-size:.78rem}.confirm{gap:8px;padding:12px 18px}.confirm h2{font-size:1.3rem}.title-btns{gap:10px}.title-btns .btn-start{padding-left:1.8em;padding-right:1.8em}.title-last{font-size:.8rem}}@media (max-height:380px){.roster-panel{top:calc(6px + var(--safe-t));bottom:calc(6px + var(--safe-b))}.roster-body{gap:5px;padding:8px 10px}.char-card{min-height:44px}.cc-face{border-width:2px;width:34px;height:34px}.roster-act .btn-gold,.roster-act .btn-teal{min-height:40px}.char-plate{bottom:calc(8px + var(--safe-b))}.confirm-msg{font-size:.85rem}}@media (max-height:300px){.roster-h{font-size:.85rem}.char-plate b{font-size:1rem}.title-bottom:has(>.title-last){gap:10px}.title-bottom:has(>.title-last)>.server-pill{display:none}.title-last{order:-1;margin-top:0;font-size:.78rem}}.hud{pointer-events:none;position:fixed;inset:0}.hud>*{pointer-events:auto}.gbar{isolation:isolate;background:linear-gradient(#020807,#0c1c1a 55%,#1a2e2b) padding-box padding-box,linear-gradient(#4a2c06,#b07a1e 35%,#ffe9a0 70%,#c8902c) border-box;border:1.5px solid #0000;border-radius:999px;height:16px;position:relative;overflow:hidden;box-shadow:0 0 0 1px #1e1002d9,inset 0 2px 4px #000000e6}.gbar i{transform-origin:0;border-radius:inherit;position:absolute;inset:0}.gbar:before{content:"";z-index:1;border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 -3px 4px #00000059,inset 0 1px 2px #00000080}.gbar:after{content:"";z-index:1;pointer-events:none;background:linear-gradient(#ffffff9e,#ffffff0f);border-radius:999px;height:44%;position:absolute;top:1px;left:4px;right:4px}.gbar>span{z-index:2;contain:strict;text-align:center;white-space:nowrap;font-size:.72rem;font-weight:600;line-height:13px;position:absolute;inset:0}.gbar i.fill,.gbar.hp i.fill{background:linear-gradient(#ffb6a0 0%,#ff5a44 30%,#d42a1e 58%,#8a120d 100%)}.gbar i.lag{background:linear-gradient(#fffbe8,#ffe2a0 50%,#f0b860)}.gbar.en i.fill{background:linear-gradient(#c4ecff 0%,#52aeff 30%,#1f6fd0 60%,#0d3b86 100%)}.gbar.xp{border-width:1px;height:7px}.gbar.xp:after{top:0;left:2px;right:2px}.gbar.xp i,.gbar.xp i.fill{background:linear-gradient(#fff3bf,#f2c14e 50%,#a8680c)}.gbar.hp.low:before{background:#ff281459;animation:.7s ease-in-out infinite alternate lowHp}@keyframes lowHp{0%{opacity:.15}to{opacity:1}}.hud-tl{left:calc(10px + var(--safe-l));top:calc(8px + var(--safe-t));pointer-events:none;align-items:flex-start;display:flex;position:absolute}.medal{z-index:2;background:var(--gold-metal);width:84px;height:84px;box-shadow:0 0 0 1.5px var(--ink), 0 6px 12px #00000080, inset 0 0 0 1px #fffadc99, inset 0 -3px 4px #4623008c;border-radius:50%;flex:none;padding:5px;position:relative}.ring{z-index:1;pointer-events:none;background:url(/assets/ui/ring.webp) 50%/100% no-repeat;position:absolute}.medal .ring{z-index:2;inset:-11.2%}.mapring .ring{inset:-12.1%}.act.big .ring{inset:-10.9%}.act.ult .ring{inset:-8.5%}.portrait{width:100%;height:100%;box-shadow:inset 0 0 0 2px var(--ink), inset 0 6px 10px #00000080, inset 0 -8px 12px #0000004d;background:#0b2f2c 50% 15%/cover no-repeat;border-radius:50%;position:relative}.portrait:after{content:"";background:radial-gradient(110% 70% at 30% 6%,#ffffff57,#fff0 46%);border-radius:50%;position:absolute;inset:0}.medal .lv{z-index:3;background:var(--enamel) padding-box, var(--gold-metal) border-box;width:32px;height:32px;box-shadow:0 0 0 1.5px var(--ink), 0 3px 5px #0000008c;-webkit-text-stroke-width:.2em;border:2.5px solid #0000;border-radius:50%;place-items:center;font-size:1rem;font-weight:700;display:grid;position:absolute;bottom:-6px;left:-6px}.medal .pts{z-index:3;min-width:22px;height:22px;box-shadow:0 0 0 1px var(--ink), 0 0 10px #ff5a3cb3;background:radial-gradient(circle at 40% 30%,#ff8a70,#d42a1e 60%,#8a120d);border:2px solid #fff2c4;border-radius:999px;place-items:center;padding:0 4px;font-size:.72rem;font-weight:700;animation:1.4s ease-in-out infinite ptsPulse;display:grid;position:absolute;top:-4px;right:-4px}@keyframes ptsPulse{50%{transform:scale(1.12)}}.plate{pointer-events:none;background:linear-gradient(180deg, #123e38e6, #051816eb) padding-box, var(--gold-bevel) border-box;border:2px solid #0000;border-left:0;border-radius:0 16px 16px 0;gap:3px;width:clamp(220px,24vw,340px);margin:9px 0 0 -24px;padding:4px 18px 6px 32px;display:grid;position:relative;box-shadow:0 0 0 1px #1e1002d9,0 6px 12px #0006,inset 0 1px #ffecaa38,inset 0 -6px 10px #00000059}.plate:after{content:"";background:var(--gold-metal);width:14px;height:14px;box-shadow:0 0 0 1.5px var(--ink), 0 2px 3px #00000080, inset 0 0 0 2px #fffadc66;position:absolute;top:50%;right:-8px;transform:translateY(-50%)rotate(45deg)}.pname{white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;font-weight:500;line-height:1.15;overflow:hidden}.gbar.en{height:15px}.gbar.en>span{font-size:.7rem;line-height:12px}.buffs{gap:6px;display:flex;position:absolute;top:calc(100% + 7px);left:30px}.buffs:empty{display:none}.buff{background:var(--bi,none) center / cover padding-box, var(--gold-metal) border-box;width:24px;height:24px;box-shadow:0 0 0 1px var(--ink), 0 2px 4px #00000080, 0 0 8px #ffd66e8c;border:2px solid #0000;border-radius:50%;animation:.3s cubic-bezier(.2,1.5,.4,1) buffIn}@keyframes buffIn{0%{opacity:0;transform:scale(.4)}}.target{left:50%;top:calc(10px + var(--safe-t));pointer-events:none;align-items:center;display:flex;position:absolute;transform:translate(-50%)}.target.under{top:calc(88px + var(--safe-t))}.tg-ret{z-index:2;color:#ffd98a;background:radial-gradient(circle at 50% 32%, #8c2418, #3a0a06 70%) padding-box, var(--gold-metal) border-box;width:46px;height:46px;box-shadow:0 0 0 1.5px var(--ink), 0 4px 8px #00000080, inset 0 -4px 6px #00000080, inset 0 2px 2px #ffbea04d;border:3px solid #0000;border-radius:50%;flex:none;place-items:center;display:grid;position:relative}.tg-ret .spin{width:72%;height:72%;animation:5s linear infinite retSpin;display:grid}.tg-ret svg{width:100%;height:100%;filter:drop-shadow(0 1px 0 var(--ink))}@keyframes retSpin{to{transform:rotate(1turn)}}.tg-body{background:linear-gradient(180deg, #34100bed, #120604ed) padding-box, var(--gold-bevel) border-box;border:2px solid #0000;border-left:0;border-radius:0 14px 14px 0;gap:3px;min-width:250px;margin-left:-16px;padding:3px 16px 5px 24px;display:grid;box-shadow:0 0 0 1px #1e1002d9,0 6px 12px #0006,inset 0 1px #ffc8aa38,inset 0 -6px 10px #00000059}.tg-top{white-space:nowrap;align-items:center;gap:7px;font-size:.95rem;line-height:1.2;display:flex}.tg-name{font-weight:600}.tg-lv{color:#f3d9c6;margin-left:auto;font-size:.78rem}.tg-rank{color:#3b2204;background:var(--metal-gold);box-shadow:0 0 0 1px var(--ink), inset 0 1px 0 #fff9;border-radius:6px;padding:0 .55em;font-size:.7rem;font-weight:700;line-height:1.5}.target[data-rank=boss] .tg-rank{color:#fff;background:linear-gradient(#ffa58c,#d42a1e 55%,#8a120d)}.target[data-rank=miniboss] .tg-rank{color:#fff;background:linear-gradient(#e2c0ff,#8a4fd0 55%,#4c1f86)}.target[data-rank=elite] .tg-ret,.target[data-rank=miniboss] .tg-ret{box-shadow:0 0 0 1.5px var(--ink), 0 4px 8px #00000080, 0 0 14px #ffc85a99, inset 0 -4px 6px #00000080}.gbar.tg-hp{height:16px}.gbar.tg-hp>span{font-size:.7rem;line-height:13px}.boss{left:50%;top:calc(4px + var(--safe-t));pointer-events:none;justify-items:center;width:min(38vw,560px);display:grid;position:absolute;transform:translate(-50%)}.boss-plaque{text-align:center;background:radial-gradient(90% 120% at 50% 0%, #8a2a1c, #3a0c08 70%) padding-box, var(--gold-bevel) border-box;min-width:44%;box-shadow:0 0 0 1px var(--ink), inset 0 1px 0 #ffc8aa59, inset 0 -6px 10px #0006;border:2px solid #0000;border-bottom:0;border-radius:12px 12px 3px 3px;margin-top:22px;padding:3px 34px;line-height:1.15;position:relative}.boss-plaque .crest{width:150px;height:29px;transform:translate(-50%,-84%)}.boss .nm{font-size:1.2rem;font-weight:700}.boss .sub{color:#ffd8bf;letter-spacing:.02em;font-size:.7rem}.boss-frame{width:100%;padding:0 60px;position:relative}.gbar.boss-hp{border-width:2px;height:22px}.gbar.boss-hp i.fill{background:linear-gradient(#ffb09a 0%,#ff4a30 28%,#c81e10 55%,#6e0a06 100%)}.gbar.boss-hp>span{font-size:.78rem;line-height:18px}.gbar.boss-hp .seg{z-index:1;background:repeating-linear-gradient(90deg,#0000 0 calc(10% - 2px),#280602a6 calc(10% - 2px) 10%)}.boss .fin{z-index:3;background:url(/assets/ui/finial.webp) 50%/contain no-repeat;width:80px;height:32px;margin-top:-16px;position:absolute;top:50%}.boss .fin.l{left:-16px}.boss .fin.r{right:-16px;transform:scaleX(-1)}.boss.rage .boss-plaque:after{content:"";border-radius:inherit;pointer-events:none;animation:.6s ease-in-out infinite alternate lowHp;position:absolute;inset:-2px;box-shadow:0 0 16px 4px #ff3c1ecc}.hud-tr{right:calc(10px + var(--safe-r));top:calc(8px + var(--safe-t));pointer-events:none;align-items:flex-start;gap:10px;display:flex;position:absolute}.hud-tr .btn-round{pointer-events:auto}.hud-tr .mapring{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 70ms}.hud-tr .mapring:active{transform:scale(.95)}.mapring{background:var(--gold-metal);width:132px;height:132px;box-shadow:0 0 0 1.5px var(--ink), 0 6px 12px #00000080, inset 0 0 0 1px #fffadc99, inset 0 -3px 4px #46230080;border-radius:50%;padding:7px;position:relative}.minimap{width:100%;height:100%;box-shadow:0 0 0 1.5px var(--ink);background:#8dbfdc;border-radius:50%;display:block}.mapring .glass{pointer-events:none;background:radial-gradient(100% 70% at 32% 10%,#ffffff42,#fff0 48%);border-radius:50%;position:absolute;inset:7px;box-shadow:inset 0 4px 12px #0009,inset 0 0 0 1.5px #0000008c}.mapring .ticks{pointer-events:none;background:repeating-conic-gradient(from -2deg, #3c1e00cc 0 4deg, transparent 4deg 30deg);border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(closest-side,#0000 calc(100% - 6px),#000 calc(100% - 5.5px));mask:radial-gradient(closest-side,#0000 calc(100% - 6px),#000 calc(100% - 5.5px))}.mapring .north{clip-path:polygon(50% 0,100% 100%,50% 78%,0 100%);width:16px;height:16px;filter:drop-shadow(0 1px 0 var(--ink));background:linear-gradient(#ffb09a,#d42a1e 60%,#7a0e08);position:absolute;top:-7px;left:50%;transform:translate(-50%)}.hud-btns{gap:10px;display:grid}.hud-btns .dotred{width:15px;height:15px;box-shadow:0 0 0 1px var(--ink), 0 0 8px #ff5a3ccc;background:radial-gradient(circle at 40% 30%,#ff9a80,#d42a1e 60%);border:2px solid #fff2c4;border-radius:50%;position:absolute;top:-4px;right:-4px}.fullmap{z-index:30;background:radial-gradient(closest-side,#04121073,#041210c7);place-items:center;animation:.18s ease-out fmIn;display:grid;position:absolute;inset:0}@keyframes fmIn{0%{opacity:0}}.fm-panel{justify-items:center;gap:6px;padding:8px 12px 12px;display:grid}.fm-title{font-size:1.15rem;font-weight:700;line-height:1.3}.fm-stage{box-shadow:0 0 0 1.5px var(--ink), 0 0 0 3px #e8b64c8c, inset 0 0 0 1px #0006;border-radius:10px;position:relative;overflow:hidden}.fm-canvas{display:block}.fm-stage:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 26px #0a283c73}.fm-label{white-space:nowrap;pointer-events:none;color:#fff3cf;background:#08201dcc;border:1px solid #e8b64cb3;border-radius:999px;padding:.05em .7em .12em;font-size:.78rem;font-weight:600;position:absolute;transform:translate(-50%,-50%);box-shadow:0 2px 5px #00000059}.fm-label.unknown{color:#c9d4dc;border-color:#c8d2dc73}.fm-close{z-index:3;width:42px;height:42px;font-size:1.1rem;position:absolute;top:-12px;right:-12px}.actions{right:calc(16px + var(--safe-r));bottom:calc(16px + var(--safe-b));pointer-events:none;width:290px;height:250px;position:absolute}.act{isolation:isolate;touch-action:none;pointer-events:auto;--rim:4px;color:#fff;contain:size layout style;background:var(--gold-metal);box-shadow:0 0 0 1.5px var(--ink), 0 6px 10px #00000080, inset 0 0 0 1px #fffadc99, inset 0 -2px 3px #46230099;border:0;border-radius:50%;padding:0;transition:transform 60ms;position:absolute}.act.sk{--rim:5px}.act.big{--rim:7px;width:114px;height:114px;bottom:0;right:0}.act.big:before{content:"";z-index:-1;background:repeating-conic-gradient(from 0deg, #5a320059 0 3deg, transparent 3deg 15deg);border-radius:50%;position:absolute;inset:3px;box-shadow:inset 0 0 0 1px #3c1e008c}.act .ic{inset:var(--rim);box-shadow:inset 0 0 0 1.5px var(--ink), inset 0 5px 8px #0000008c, inset 0 -6px 10px #0000004d;background:#0b2f2c 50%/cover no-repeat;border-radius:50%;position:absolute;overflow:hidden}.act .ic:after{content:"";pointer-events:none;background:linear-gradient(#ffffff80,#fff0);border-radius:50%;height:44%;position:absolute;top:3%;left:13%;right:13%}.act .shine{pointer-events:none;background:linear-gradient(90deg,#fff8dc00,#fff8dccc,#fff8dc00);width:42%;position:absolute;top:-10%;bottom:-10%;left:0;transform:translate(-130%)skew(-18deg)}.act .cd{inset:var(--rim);opacity:0;pointer-events:none;background:conic-gradient(transparent 0 calc(100% - var(--p,0%)), #ffe896f2 0 calc(100% - var(--p,0%) + 1.2%), #030c0bbd 0);border-radius:50%;position:absolute}.act .arc{opacity:0;pointer-events:none;z-index:2;background:conic-gradient(#9be2ff 0 calc(100% - var(--p,0%)), #0a1e288c 0);border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(closest-side,#0000 calc(100% - 4px),#000 calc(100% - 3.5px));mask:radial-gradient(closest-side,#0000 calc(100% - 4px),#000 calc(100% - 3.5px))}.act.cooling .cd,.act.cooling .arc{opacity:1}.act .cdt{z-index:3;contain:strict;pointer-events:none;text-shadow:0 0 2px #000,0 2px #000000d9,0 0 8px #000000b3;place-items:center;font-size:1.3rem;font-weight:700;display:grid;position:absolute;inset:0}.act .cdt svg{filter:drop-shadow(0 2px 2px #000000b3);width:46%;height:46%}.act .glint{z-index:4;opacity:0;pointer-events:none;border:3px solid #fff6cf;border-radius:50%;position:absolute;inset:-5px;box-shadow:0 0 12px 3px #ffd66ed9,inset 0 0 10px #ffd66e99}.act .key{z-index:5;min-width:20px;height:20px;color:var(--gold-hi);background:linear-gradient(#0f403a, #061c1a) padding-box, var(--gold-bevel) border-box;box-shadow:0 0 0 1px var(--ink), 0 2px 3px #00000080;border:1.5px solid #0000;border-radius:6px;padding:0 5px;font-size:.7rem;font-weight:700;line-height:17px;position:absolute;bottom:-3px;right:-3px}.hud.touch .act .key{display:none}.act.pressed{transform:scale(.93)}.act.pressed .ic{filter:brightness(1.3)}.act.locked .ic{filter:grayscale()brightness(.42)}.act.nores .ic{filter:saturate(.2)brightness(.55)}.act.nores .ic:before{content:"";background:radial-gradient(circle,#286edc40,#143ca073);position:absolute;inset:0}.act.empty .ic{background-color:#08221f;background-image:none}.act.ult{--rim:6px}.act.ult:before{content:"";z-index:-1;opacity:0;pointer-events:none;background:radial-gradient(closest-side,#0000 70%,#ffd66ecc 79%,#ffb43c40 90%,#0000 100%);border-radius:50%;position:absolute;inset:-14px}.act.ult.charged:before{animation:1.6s ease-in-out infinite aura}.act.ult.charged .shine{animation:2.8s ease-in-out infinite sweep}@keyframes aura{0%,to{opacity:.35;transform:scale(.95)}50%{opacity:1;transform:scale(1.06)}}@keyframes sweep{0%,50%{transform:translate(-130%)skew(-18deg)}to{transform:translate(300%)skew(-18deg)}}.act.pot .ic{background-color:#2a0d0a;background-position:50% 45%;background-size:86%}.act.pot .n{z-index:5;background:radial-gradient(circle at 50% 30%, #3d3d3d, #0b0b0b) padding-box, var(--gold-metal) border-box;min-width:24px;height:24px;box-shadow:0 0 0 1px var(--ink), 0 2px 3px #00000080;border:2px solid #0000;border-radius:999px;place-items:center;padding:0 3px;font-size:.82rem;font-weight:700;display:grid;position:absolute;bottom:-5px;right:-5px}.act.pot .key{left:-3px;right:auto}.act.dodge{--rim:5px}.act.dodge .key{bottom:-9px;right:50%;transform:translate(50%)}.joystick{left:calc(26px + var(--safe-l));bottom:calc(26px + var(--safe-b));touch-action:none;color:#ffecb4cc;background:radial-gradient(circle,#04121080 0 54%,#0412104d 76%,#ffecb424 100%);border-radius:50%;width:150px;height:150px;position:absolute;box-shadow:inset 0 8px 16px #0000008c,inset 0 -3px 6px #ffecb433,0 0 0 2px #e8b64cb3,0 0 0 3.5px #1e100273,0 4px 10px #0000004d}.joystick .arrows{pointer-events:none;position:absolute;inset:0}.joystick .arrows svg{filter:drop-shadow(0 1px #1e1002b3);width:100%;height:100%}.joystick .knob{will-change:transform;pointer-events:none;background:radial-gradient(circle at 38% 30%,#fffcef 0%,#f8e2a6 30%,#d9ac58 68%,#a26f22 100%);border-radius:50%;width:66px;height:66px;margin:-33px 0 0 -33px;position:absolute;top:50%;left:50%;box-shadow:0 0 0 2px #fff3c4,0 0 0 3.5px #1e100299,0 9px 12px #00000080,inset 0 -5px 8px #6e3c0073,inset 0 3px 3px #ffffffd9}.joystick .knob:after{content:"";border-radius:50%;position:absolute;inset:24%;box-shadow:inset 0 2px 4px #6e3c0080,0 1px #ffffffb3}.joystick.on{box-shadow:inset 0 8px 16px #0000008c,inset 0 -3px 6px #ffecb433,0 0 0 2px #ffe08af2,0 0 0 3.5px #1e100273,0 0 18px #ffd66e80}.keys-hint{left:calc(14px + var(--safe-l));bottom:calc(10px + var(--safe-b));pointer-events:none;background:linear-gradient(#0c2c28d9,#041412d9) padding-box padding-box,linear-gradient(#ffecaabf,#8a5a12bf) border-box;border:1.5px solid #0000;border-radius:999px;padding:.3em 1em;font-size:.78rem;position:absolute;box-shadow:0 3px 8px #00000059}.combo{left:calc(18px + var(--safe-l));pointer-events:none;justify-items:start;line-height:1.05;display:grid;position:absolute;top:36%}.combo-lbl{letter-spacing:.14em;--mfill:var(--metal-white);font-size:1rem;font-style:italic;font-weight:700}.combo-n{transform-origin:30% 60%;font-size:3.4rem;font-style:italic;font-weight:700}.combo-dmg{color:#ffeec0;margin-top:3px;font-size:.84rem}.floaters{pointer-events:none;contain:strict;position:fixed;inset:0;overflow:hidden}.dmg{white-space:nowrap;will-change:transform, opacity;contain:layout style;--mfill:var(--metal-white);color:var(--ink);-webkit-text-stroke:.17em var(--ink);text-shadow:0 .07em 0 var(--ink), 0 .12em .18em #00000073;font-size:1.5rem;font-style:italic;font-weight:700;position:absolute;top:0;left:0}.dmg>i{font-style:inherit;-webkit-text-stroke:0;text-shadow:none;color:#0000;background:var(--mfill);-webkit-background-clip:text;background-clip:text;position:absolute;inset:0}.dmg.crit{--mfill:linear-gradient(180deg, #fffbe2 0%, #ffe066 34%, #ff9418 58%, #ffcf3e 80%, #fff3bf 100%);font-size:2.25rem}.dmg.hurt{--mfill:linear-gradient(180deg, #ffe0d6 0%, #ff6a50 50%, #c0180c 100%);font-size:1.25rem}.dmg.heal{--mfill:linear-gradient(180deg, #e8ffea 0%, #6dff9a 50%, #1f9a48 100%)}.dmg.miss{--mfill:linear-gradient(180deg, #fff 0%, #cfe8ff 50%, #7fa6c8 100%);font-size:1rem}.hpbar{will-change:transform;background:linear-gradient(#050505,#1c1c1c) padding-box padding-box,linear-gradient(#2a1503,#7a5424) border-box;border:1.5px solid #0000;border-radius:999px;width:60px;height:9px;position:absolute;top:0;left:0;overflow:hidden;box-shadow:0 1px 3px #000000b3}.hpbar i{transform-origin:0;background:linear-gradient(#ffb09a 0%,#ff5b45 35%,#c42015 70%,#8f1410 100%);height:100%;display:block}.hpbar:after{content:"";background:linear-gradient(#ffffff8c,#fff0);border-radius:999px;height:45%;position:absolute;top:0;left:2px;right:2px}.hpbar.elite{background:linear-gradient(#050505, #1c1c1c) padding-box, var(--gold-bevel) border-box;border-width:2px;width:80px;height:11px}.hpbar.lock{box-shadow:0 0 0 1px var(--ink), 0 0 10px #ffd66ee6;background:linear-gradient(#050505,#1c1c1c) padding-box padding-box,linear-gradient(#fff6cf,#ffd36a 50%,#c8902c) border-box;border-color:#0000}@media (max-height:460px){.medal{width:62px;height:62px;padding:4px}.medal .lv{width:26px;height:26px;font-size:.85rem;bottom:-5px;left:-5px}.medal .pts{min-width:19px;height:19px;font-size:.66rem}.plate{gap:2px;width:206px;margin:5px 0 0 -18px;padding:2px 13px 4px 24px}.pname{font-size:.72rem}.gbar.hp{height:14px}.gbar.hp>span{font-size:.62rem;line-height:11px}.gbar.en{height:10px}.gbar.en>span{display:none}.gbar.xp{height:5px}.buff{width:20px;height:20px}.mapring{width:100px;height:100px;padding:5px}.mapring .glass{inset:5px}.hud-btns{gap:8px}.hud-btns .btn-round{width:44px;height:44px}.actions{transform-origin:100% 100%;transform:scale(.82)}.joystick{transform-origin:0 100%;transform:scale(.85)}.boss{width:min(36vw,420px)}.boss-plaque{margin-top:16px;padding:1px 24px 2px}.boss-plaque .crest{width:110px;height:21px}.boss-frame{padding:0 44px}.boss .nm{font-size:.98rem}.boss .sub{font-size:.62rem}.gbar.boss-hp{height:17px}.gbar.boss-hp>span{font-size:.66rem;line-height:13px}.boss .fin{width:60px;height:24px;margin-top:-12px}.boss .fin.l{left:-12px}.boss .fin.r{right:-12px}.target{top:calc(6px + var(--safe-t))}.target.under{top:calc(74px + var(--safe-t))}.tg-ret{width:40px;height:40px}.tg-body{min-width:210px}.tg-top{font-size:.84rem}.combo{left:auto;right:calc(18px + var(--safe-r));justify-items:end;top:29%}.combo-n{transform-origin:70% 60%;font-size:2.6rem}.dmg{font-size:1.25rem}.dmg.crit{font-size:1.8rem}.dmg.hurt{font-size:1.05rem}}@media (max-height:380px){.fm-panel{padding:6px 8px 8px}.fm-title{display:none}.fm-label{padding:0 .55em .06em;font-size:.62rem}.hud-tl{left:calc(8px + var(--safe-l));top:calc(6px + var(--safe-t))}.medal{width:50px;height:50px;padding:3px}.medal .lv{border-width:2px;width:22px;height:22px;font-size:.74rem;bottom:-4px;left:-4px}.medal .pts{border-width:1.5px;min-width:17px;height:17px;font-size:.6rem;top:-5px;right:-5px}.plate{gap:2px;width:176px;margin:3px 0 0 -15px;padding:2px 11px 3px 20px}.plate:after{width:11px;height:11px;right:-6px}.pname{font-size:.66rem}.gbar.hp{height:12px}.gbar.hp>span{font-size:.56rem;line-height:9px}.gbar.en{height:7px}.gbar.xp{height:4px}.buffs{gap:4px;top:calc(100% + 4px);left:22px}.buff{width:18px;height:18px}.hud-tr{right:calc(8px + var(--safe-r));top:calc(6px + var(--safe-t));gap:6px}.mapring{width:72px;height:72px;padding:4px}.mapring .glass{inset:4px}.mapring .north{width:12px;height:12px;top:-5px}.hud-btns{grid-auto-flow:column;gap:6px}.target{top:calc(4px + var(--safe-t))}.target.under{top:calc(54px + var(--safe-t))}.tg-ret{border-width:2.5px;width:36px;height:36px}.tg-body{gap:2px;min-width:168px;margin-left:-14px;padding:2px 12px 4px 20px}.tg-top{gap:5px;font-size:.74rem}.tg-lv{font-size:.66rem}.tg-rank{font-size:.6rem}.gbar.tg-hp{height:12px}.gbar.tg-hp>span{font-size:.56rem;line-height:9px}.boss{width:min(32vw,300px);top:calc(2px + var(--safe-t))}.boss-plaque{margin-top:13px;padding:1px 18px}.boss-plaque .crest{width:92px;height:18px}.boss .nm{font-size:.84rem}.boss .sub{display:none}.boss-frame{padding:0 34px}.gbar.boss-hp{height:14px}.gbar.boss-hp>span{font-size:.58rem;line-height:10px}.boss .fin{width:46px;height:19px;margin-top:-9.5px}.boss .fin.l{left:-8px}.boss .fin.r{right:-8px}.actions{right:calc(10px + var(--safe-r));bottom:calc(8px + var(--safe-b));transform:scale(.74)}.joystick{left:calc(16px + var(--safe-l));bottom:calc(12px + var(--safe-b));transform:scale(.8)}.combo{right:calc(12px + var(--safe-r));top:calc(84px + var(--safe-t));grid-template-columns:auto auto;place-items:center start;column-gap:6px}.combo-n{grid-area:1/1/3/2;font-size:2rem}.combo-lbl{grid-area:1/2;font-size:.74rem}.combo-dmg{grid-area:2/2;margin:0;font-size:.66rem}.dmg{font-size:1.1rem}.dmg.crit{font-size:1.55rem}.dmg.hurt{font-size:.95rem}}@media (max-height:300px){.medal{width:46px;height:46px}.plate{width:150px}.mapring{width:62px;height:62px}.tg-body{min-width:150px}.boss{width:min(30vw,260px)}.actions{right:calc(8px + var(--safe-r));bottom:calc(6px + var(--safe-b));transform:scale(.7)}.act.pot{width:60px!important;height:60px!important;bottom:0!important;right:222px!important}.act.dodge{width:64px!important;height:64px!important;bottom:74px!important;right:218px!important}.joystick{left:calc(12px + var(--safe-l));bottom:calc(10px + var(--safe-b));transform:scale(.72)}.combo{top:calc(72px + var(--safe-t))}.combo-n{font-size:1.7rem}}.menu{padding:calc(8px + var(--safe-t)) calc(10px + var(--safe-r)) calc(8px + var(--safe-b)) calc(10px + var(--safe-l));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:radial-gradient(at 50% 40%,#04161473,#020a09c7);grid-template-rows:minmax(0,1fr);display:grid;position:fixed;inset:0}.menu-frame{grid-template-rows:auto minmax(0,1fr);min-height:0;display:grid}.menu-top{align-items:center;gap:10px;margin-bottom:10px;display:flex}.tabs{gap:8px;display:flex}.tab{isolation:isolate;color:var(--cream);text-shadow:0 1px 2px #000000b3;background:linear-gradient(#24766c 0%,#11483f 50%,#0a2f2b 100%) padding-box padding-box,linear-gradient(#ffe9a8,#b88326 55%,#6b430c) border-box;border:2px solid #0000;border-radius:12px 12px 6px 6px;padding:.38em 1.4em;font-size:1.05rem;font-weight:600;transition:transform 80ms;position:relative;box-shadow:0 3px #04201d,0 4px 0 1px #1e100299,0 8px 12px #00000059,inset 0 1px 1px #d2fff559,inset 0 -4px 8px #00000059}.tab:before{content:"";z-index:-1;background:linear-gradient(#d2fff54d,#d2fff500);border-radius:10px 10px 50% 50%;height:42%;position:absolute;top:2px;left:8%;right:8%}.tab:active{transform:translateY(2px)}.tab.on{color:#3b2204;text-shadow:0 1px #fff8d7bf;background:linear-gradient(#fff7cc 0%,#ffd86c 38%,#eaa632 64%,#c9831a 100%) padding-box padding-box,linear-gradient(#fffbe6,#c48a22 50%,#6b430c) border-box;transform:translateY(-2px);box-shadow:0 4px #6b3f08,0 5px 0 1px #1e1002a6,0 0 18px #ffd25a8c,inset 0 2px 1px #fffc,inset 0 -4px 7px #964b0073}.tab.on:before{background:linear-gradient(#fffc,#fff0)}.menu-cur{gap:8px;margin-left:auto;display:flex}.menu-cur .badge{padding:.15em .9em;font-size:.95rem}.menu-body{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);gap:12px;min-height:0;display:grid}.menu-body>.panel{min-height:0;padding:14px 16px;overflow:auto}.menu-body>.panel.scrolls{grid-template-rows:minmax(0,1fr);justify-items:stretch;padding:0;display:grid;overflow:hidden}.panel-scroll{scrollbar-width:thin;scrollbar-color:#b88326 #0000004d;min-height:0;padding:14px 16px;overflow:auto}.menu-hero .panel-scroll{align-content:start;justify-items:center;display:grid}.menu-hero .lvline{align-items:center;gap:12px;width:100%;display:flex}.menu-hero .lvline .gbar{flex:1}.hero-medal{background:var(--gold-metal);width:62px;height:62px;box-shadow:0 0 0 1.5px var(--ink), 0 4px 8px #00000080;border-radius:50%;flex:none;padding:3px}.hero-medal img{object-fit:cover;object-position:top;width:100%;height:100%;box-shadow:inset 0 0 0 2px var(--ink);border-radius:50%;display:block}.hero-name{font-size:1.15rem;font-weight:600}.sec-h{color:var(--gold-hi);justify-content:space-between;align-items:center;margin:2px 0 10px;padding-bottom:5px;font-size:1.1rem;font-weight:600;display:flex;position:relative}.sec-h:after{content:"";background:linear-gradient(90deg,#e8b64ce6,#e8b64c40 70%,#0000);height:2px;position:absolute;bottom:0;left:0;right:0;box-shadow:0 1px #0000008c}.pts-badge{white-space:nowrap;color:#3b2204;box-shadow:0 0 0 1px var(--ink), 0 0 12px #ffd25a99, inset 0 -2px 4px #964b0066;text-shadow:0 1px #fff8d7b3;background:linear-gradient(#fff7cc,#ffd86c 40%,#d89a2e);border:1.5px solid #fff3c4;border-radius:999px;padding:.1em .9em;font-size:.95rem;font-weight:700}.pts-badge.zero{filter:grayscale(.6)brightness(.8);box-shadow:0 0 0 1px var(--ink)}.slots{grid-template-columns:repeat(4,1fr);gap:10px;width:100%;margin-top:12px;display:grid}.slot{aspect-ratio:1;color:var(--cream);background:var(--si,none) center / cover no-repeat padding-box, radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc,#1a4a44) 30%, #0b2622), #040f0e 75%) padding-box, linear-gradient(180deg, #3a2306, #8a5a12 40%, #f0c868 85%, #ffe9a0) border-box;box-shadow:0 1px 0 #ffecaa40, inset 0 4px 8px #000000bf, inset 0 0 14px color-mix(in srgb, var(--rc,transparent) 70%, transparent), inset 0 -2px 3px #ffffff0d;border:2px solid #0000;border-radius:12px;padding:0;position:relative}.slot[class*=rarity-]{background:var(--si,none) center / cover no-repeat padding-box, radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 30%, #0b2622), #040f0e 75%) padding-box, linear-gradient(180deg, color-mix(in srgb, var(--rc) 60%, #2a1503), var(--rc) 55%, color-mix(in srgb, var(--rc) 40%, #fff)) border-box}.slot.rarity-legendary,.slot.rarity-epic{box-shadow:0 0 10px color-mix(in srgb, var(--rc) 60%, transparent), inset 0 4px 8px #000000b3, inset 0 0 16px color-mix(in srgb, var(--rc) 80%, transparent)}.slot .tag{color:var(--gold-hi);text-shadow:0 1px 2px #000;font-size:.72rem;font-weight:700;position:absolute;top:2px;right:4px}.slot .sl{text-overflow:ellipsis;white-space:nowrap;text-align:center;max-width:calc(100% - 6px);color:var(--cream);background:#04100ecc;border-radius:6px;padding:0 6px;font-size:.72rem;line-height:1.4;position:absolute;bottom:3px;left:50%;overflow:hidden;transform:translate(-50%);box-shadow:0 0 0 1px #e8b64c4d}.slot.empty{opacity:.62}.slot.sel{outline-offset:2px;box-shadow:0 0 14px #ffe08ab3, inset 0 4px 8px #000000b3, inset 0 0 14px color-mix(in srgb, var(--rc,transparent) 70%, transparent);outline:2px solid #fff6cf}@media (hover:hover){button.slot:hover{filter:brightness(1.18)}}.setline{color:var(--muted);font-size:.85rem}.setline .got{color:var(--ok)}.srow{border-bottom:1px solid #00000059;grid-template-columns:38px 1fr auto 38px 38px;align-items:center;gap:8px;padding:6px 4px;display:grid;box-shadow:0 1px #e8b64c24}.srow .ic{background:radial-gradient(circle at 40% 28%, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 55%, #000)) padding-box, var(--gold-metal) border-box;width:36px;height:36px;box-shadow:0 0 0 1px var(--ink), 0 3px 5px #00000073, inset 0 -3px 5px #0000004d;border:2.5px solid #0000;border-radius:50%;place-items:center;font-size:1.05rem;display:grid}.srow .nm{font-size:1.05rem;line-height:1.2}.srow .nm small{color:var(--muted);font-size:.72rem;display:block}.srow .v{text-align:right;min-width:3ch;font-size:1.35rem;font-weight:600}.srow .v .plus{color:var(--ok);margin-left:2px;font-size:.9rem}.pm{width:38px;height:38px;color:var(--gold-hi);background:var(--enamel) padding-box, var(--gold-metal) border-box;box-shadow:0 0 0 1px var(--ink), 0 3px 5px #00000073, inset 0 -3px 5px #00000073;border:2.5px solid #0000;border-radius:50%;place-items:center;padding:0;font-size:1.3rem;font-weight:700;transition:transform 70ms;display:grid}.pm.plus{color:#3b2204;background:radial-gradient(circle at 45% 30%, #fff7cc, #ffd86c 45%, #c9831a) padding-box, var(--gold-metal) border-box}.pm:active:not(:disabled){transform:scale(.9)}.pm:disabled{opacity:.35;cursor:default}.derived{background:#00000038;border-radius:10px;grid-template-columns:1fr 1fr;gap:4px 16px;margin-top:10px;padding:8px 10px;font-size:.9rem;display:grid;box-shadow:inset 0 2px 6px #00000080,0 1px #ffecaa1f}.derived div{border-bottom:1px solid #ffffff0f;justify-content:space-between;padding:2px 0;display:flex}.derived b{color:var(--cream);font-weight:600}.menu-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:12px;display:flex}.skills-panel{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-content:start;gap:16px;display:grid}.skgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px;display:grid}.skc{min-width:0;color:inherit;background:0 0;border:2px solid #0000;border-radius:12px;justify-items:center;gap:3px;padding:6px 4px;transition:transform 80ms;display:grid}.skc img{aspect-ratio:1;background:var(--gold-metal);width:min(58px,100%);height:auto;box-shadow:0 0 0 1.5px var(--ink), 0 4px 8px #00000080;border-radius:50%;padding:3px}.skc.pas img{border-radius:14px}.skc.ult img{box-shadow:0 0 0 1.5px var(--ink), 0 4px 8px #00000080, 0 0 14px #ffd25ab3}.skc .rk{background:linear-gradient(#06201d,#0e3a35);border-radius:999px;padding:0 .65em;font-size:.78rem;font-weight:600;box-shadow:0 0 0 1px #e8b64c8c,inset 0 2px 3px #00000080}.skc .nm{text-align:center;color:var(--muted);overflow-wrap:anywhere;font-size:.76rem;line-height:1.15}.skc.on{background:radial-gradient(circle at 50% 30%,#ffd66e38,#ffd66e0a 70%);border-color:#ffe08ad9;box-shadow:0 0 14px #ffd25a59,inset 0 0 10px #ffd25a33}.skc.on .nm{color:var(--cream)}.skc:active{transform:scale(.95)}.skc.lock img{filter:grayscale()brightness(.5)}.skd{align-content:start;gap:9px;min-width:0;display:grid}.skd-act{display:grid}.skd .head{grid-template-columns:76px minmax(0,1fr);align-items:center;gap:12px;display:grid}.skd .head img{background:var(--gold-metal);width:76px;height:76px;box-shadow:0 0 0 1.5px var(--ink), 0 5px 10px #00000080, 0 0 16px #ffd25a59;border-radius:50%;padding:4px}.skd h3{color:var(--gold-hi);margin:0 0 3px;font-size:1.45rem;font-weight:600;line-height:1.15}.skd .desc{background:#00000038;border-radius:10px;padding:8px 10px;font-size:.95rem;line-height:1.45;box-shadow:inset 0 2px 6px #00000080,0 1px #ffecaa1f}.pips{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.pips i{background:linear-gradient(#020807,#10201e);border-radius:3px;width:16px;height:11px;box-shadow:0 0 0 1px #e8b64c80,inset 0 2px 3px #000c}.pips i.on{box-shadow:0 0 0 1px var(--ink), 0 0 6px #ffd66eb3, inset 0 1px 0 #ffffffb3;background:linear-gradient(#fff6cf,#ffd86c 45%,#c9831a)}.pips i.lock{background:repeating-linear-gradient(45deg,#00000073 0 2px,#ffffff1f 2px 4px)}.cmp{gap:4px;font-size:1rem;display:grid}.cmp .new{color:var(--ok);font-weight:600}.ms{color:var(--muted);gap:2px;font-size:.85rem;display:grid}.ms .got{color:var(--ok)}.loadout{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.loadout .ls{background:var(--si,none) center / cover padding-box, radial-gradient(circle, #0b2622, #040f0e) padding-box, linear-gradient(180deg, #3a2306, #8a5a12 40%, #f0c868 85%) border-box;border:3px solid #0000;border-radius:50%;width:50px;height:50px;padding:0;position:relative;box-shadow:inset 0 3px 6px #000000b3,0 1px #ffecaa40}.loadout .ls.fill{background:var(--si,none) center / cover padding-box, var(--gold-metal) border-box;box-shadow:0 0 0 1px var(--ink), 0 3px 6px #00000080}.loadout .ls .k{color:var(--gold-hi);background:linear-gradient(#0f403a, #061c1a) padding-box, var(--gold-bevel) border-box;box-shadow:0 0 0 1px var(--ink);border:1.5px solid #0000;border-radius:6px;padding:0 5px;font-size:.7rem;font-weight:700;position:absolute;bottom:-5px;right:-4px}.inv{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:10px;display:grid}.item-d{background:radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 70%) padding-box, linear-gradient(180deg, #071f1c, #0b2a26) padding-box, linear-gradient(180deg, color-mix(in srgb, var(--rc) 50%, #fff), var(--rc) 45%, color-mix(in srgb, var(--rc) 55%, #000)) border-box;box-shadow:0 0 0 1px var(--ink), 0 0 14px color-mix(in srgb, var(--rc) 40%, transparent), inset 0 3px 8px #00000080;border:2px solid #0000;border-radius:12px;gap:6px;margin-bottom:12px;padding:12px;display:grid}.item-d h4{color:var(--rc);margin:0;font-size:1.15rem;font-weight:600}.item-d .ln{justify-content:space-between;font-size:.9rem;display:flex}.item-d .ln .up{color:var(--ok)}.item-d .ln .down{color:#ff8a7a}.item-d .aff{color:#cfe8ff}.doll{width:100%;height:clamp(200px,56vh,540px);grid-template-columns:minmax(0,1fr) minmax(0,2.3fr) minmax(0,1fr);gap:8px;height:clamp(200px,56dvh,540px);margin-top:8px;display:grid}.doll-col{align-content:center;justify-items:center;gap:8px;min-height:0;display:grid}.doll-col .slot{width:100%;max-width:92px}.doll-stage{background:radial-gradient(60% 48% at 50% 62%,#ffd67847,#ffd6780d 70%,#0000),radial-gradient(40% 8% at 50% 92%,#00000073,#0000);border-radius:16px;min-height:0;position:relative;box-shadow:inset 0 0 0 1px #e8b64c4d,inset 0 6px 18px #00000073}.preview-3d{touch-action:none;cursor:grab;width:100%;height:100%;display:block;position:absolute;inset:0}.swatch{vertical-align:-3px;border:1.5px solid #ffffffbf;border-radius:50%;flex:none;width:18px;height:18px;display:inline-block;box-shadow:0 1px 3px #0009,inset 0 -2px 3px #0000004d}.swatch.none{background:repeating-linear-gradient(45deg,#5b6b68 0 3px,#2a3634 3px 6px)}.slot>.swatch,.slot>.new-tag{position:absolute;top:4px;left:4px}.slot>.swatch{width:14px;height:14px}.slot>.new-tag{color:var(--gold-hi);text-shadow:0 0 4px #000;font-size:.8rem}.subtabs{gap:8px;margin-bottom:12px;display:flex}.subtab{color:var(--cream);background:linear-gradient(#0c302c,#061c1a) padding-box padding-box,linear-gradient(#ffe9a8b3,#6b430ccc) border-box;border:1.5px solid #0000;border-radius:10px;padding:.3em 1.1em;font-size:.95rem;box-shadow:inset 0 2px 4px #00000080,0 2px #00000059}.subtab.on{color:#3b2204;background:linear-gradient(#fff7cc,#ffd86c 40%,#c9831a) padding-box padding-box,linear-gradient(#fffbe6,#6b430c) border-box;font-weight:600;box-shadow:0 2px #6b3f08,0 0 12px #ffd25a73,inset 0 1px 1px #fffc}.ward-note{color:var(--muted);font-size:.78rem;font-weight:400}.ward-slots{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:440px;display:grid}.ward-slots .tag{color:var(--gold-hi)}.ward-h{color:var(--gold-hi);align-items:center;gap:8px;margin:12px 0 6px;font-size:.95rem;display:flex}.ward-h b{color:var(--cream);font-size:.85rem;font-weight:500}.ward .sec-h,.ward .ward-h{align-items:center}.ward .sec-h .ward-note{margin-left:auto;margin-right:8px}.ward .ward-h .btn-sm{margin-left:auto}.looks{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;display:grid}.look{text-align:left;color:var(--cream);background:linear-gradient(#0b2a26,#051815) padding-box padding-box,linear-gradient(#6b430ccc,#ffe9a88c) border-box;border:1.5px solid #0000;border-radius:12px;align-items:center;gap:6px;min-height:44px;padding:4px 8px 4px 4px;font-size:.8rem;line-height:1.15;display:flex;box-shadow:inset 0 2px 5px #0000008c}.look.on{background:radial-gradient(circle at 30%,#ffd66e40,#0000 70%) padding-box padding-box,linear-gradient(#0f3631,#071f1c) padding-box padding-box,linear-gradient(#fff6cf,#c48a22) border-box;box-shadow:0 0 12px #ffd25a80,inset 0 2px 5px #0006}.lk-th{object-fit:contain;background:radial-gradient(circle at 50% 55%,#ffd67838,#0000 70%);border-radius:8px;flex:none;width:58px;height:58px}.lk-th.none{opacity:.7;background:repeating-linear-gradient(45deg,#5b6b68 0 4px,#2a3634 4px 8px);display:inline-block}.lk-new{color:var(--gold-hi);font-size:.68rem;font-style:normal;display:block}.look-empty .look{max-width:100%;padding-right:12px}.lk-hint{color:var(--gold-hi);font-size:.68rem;font-style:normal;display:block}.look-ln b{align-items:center;gap:4px;display:inline-flex}.look-ln b .lk-th{vertical-align:middle;width:52px;height:52px}.dyes{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:4px;display:grid}.dye{color:var(--muted);background:0 0;border:1.5px solid #0000;border-radius:10px;justify-items:center;gap:3px;padding:5px 2px;font-size:.7rem;line-height:1.1;display:grid}.dye .swatch{width:30px;height:30px}.dye span{white-space:nowrap}.dye.on{border-color:var(--gold-hi);color:var(--cream);background:#e8b64c24;box-shadow:inset 0 0 10px #ffd25a40}.dye.on .swatch{box-shadow:0 0 0 2px var(--gold-hi), 0 0 12px #ffd25ab3}.dye:disabled{opacity:.35}.btn-sm{border-radius:10px;padding:.22em .95em;font-size:.82rem}@media (max-height:460px){.menu-top{margin-bottom:6px}.tab{padding:.28em 1.1em;font-size:.95rem}.menu-body{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px}.menu-body>.panel{padding:10px 12px}.panel-scroll{padding:9px 11px}.hero-medal{width:48px;height:48px}.hero-name{font-size:1rem}.slots{gap:7px;margin-top:8px}.sec-h{margin-bottom:6px;font-size:1rem}.srow{grid-template-columns:32px 1fr auto 36px 36px;gap:6px;padding:3px 2px}.srow .ic{width:30px;height:30px;font-size:.95rem}.srow .nm{font-size:.95rem}.srow .v{font-size:1.15rem}.pm{width:36px;height:36px}.derived{font-size:.8rem}.skills-panel{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:10px}.skgrid{gap:4px}.skc{gap:1px;padding:3px 1px 4px}.skc img{width:min(42px,100%);padding:2px}.skc .rk{z-index:1;margin-top:-9px;font-size:.62rem;line-height:1.35;position:relative}.skc .nm{-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.62rem;display:-webkit-box;overflow:hidden}.skd{gap:6px}.skd .head{grid-template-columns:48px minmax(0,1fr);gap:8px}.skd .head img{width:48px;height:48px;padding:3px}.skd h3{font-size:1.05rem}.skd .desc{padding:6px 8px;font-size:.78rem;line-height:1.35}.cmp{font-size:.82rem}.ms{font-size:.72rem}.pips i{width:11px;height:8px}.loadout .ls{width:42px;height:42px}.skd .btn-gold{padding:.4em 1em;font-size:.95rem}.doll{flex:1;height:auto;min-height:196px}.doll-col{gap:4px}.doll-col .slot{max-width:52px}.slot .sl{padding:0 4px;font-size:.62rem;bottom:2px}.doll-col .slot .sl{max-width:none}.subtabs{margin-bottom:6px;padding-top:3px}.subtab{padding:.2em .8em;font-size:.82rem}.looks,.dyes{overscroll-behavior-x:contain;grid-template-columns:none;grid-auto-flow:column;margin:-5px -7px -3px;padding:5px 7px 7px;display:grid;overflow-x:auto}.looks{grid-auto-columns:112px}.dyes{grid-auto-columns:minmax(50px,max-content)}.look{min-height:38px;font-size:.74rem}.lk-th{width:40px;height:40px}.dye .swatch{width:24px;height:24px}.ward-h{margin:6px 0 4px}.btn-sm{padding:.15em .7em;font-size:.74rem}.setline{font-size:.74rem}.menu-hero .panel-scroll{padding-bottom:18px;-webkit-mask:linear-gradient(#000 calc(100% - 18px),#0000);mask:linear-gradient(#000 calc(100% - 18px),#0000)}.panel-scroll:has(>.ward){position:relative}.ward>.sec-h{margin:0;padding:0;position:absolute;top:12px;right:11px}.ward>.sec-h:after,.ward>.sec-h>.ward-title,.ward>.sec-h>.ward-note{display:none}.ward-slots{grid-template-columns:repeat(6,minmax(0,52px));gap:4px}.panel-scroll>.menu-actions,.skd-act,.item-d .menu-actions,.skills-panel>div:first-child>.menu-actions{z-index:2;position:sticky;bottom:-9px}.skills-panel>div:first-child>.menu-actions{background:linear-gradient(#061d1b00,#061d1b 10px);margin:6px 0 -9px -11px;padding:10px 0 9px 11px}.panel-scroll>.menu-actions{background:linear-gradient(#061d1b00,#061d1b 8px);margin:4px -11px -9px;padding:9px 11px 8px}.skd-act{background:linear-gradient(#061d1b00,#061d1b 10px);margin:0 -11px -9px 0;padding:10px 11px 9px 0}.item-d .menu-actions{background:linear-gradient(#0a262200,#0a2724 10px);border-radius:0 0 10px 10px;margin:4px -12px -12px;padding:12px 12px 10px}.menu-actions:has(>#btn-reset-stats){flex-wrap:nowrap}.menu-actions:has(>#btn-reset-stats)>button{white-space:nowrap;flex:none}.menu-actions>#btn-reset-stats{white-space:normal;flex:0 auto;min-width:0;padding:.3em .9em;font-size:.86rem;line-height:1.15}}@media (max-height:380px){.menu{padding:calc(4px + var(--safe-t)) calc(8px + var(--safe-r)) calc(4px + var(--safe-b)) calc(8px + var(--safe-l))}.menu-top{gap:6px;margin-bottom:4px}.tabs{gap:6px}.tab{padding:.2em .9em;font-size:.88rem}.menu-cur{gap:6px}.menu-cur .badge{padding:.1em .7em;font-size:.82rem}.menu-body{gap:8px}.menu-body:is([data-tab=stats],[data-tab=skills]){grid-template-columns:minmax(0,1fr)}.menu-body:is([data-tab=stats],[data-tab=skills])>.menu-hero{display:none}.sec-h{margin-bottom:5px;padding-bottom:3px;font-size:.92rem}.pts-badge{font-size:.8rem}.menu-body[data-tab=stats] .panel-scroll{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;column-gap:14px;display:grid}.menu-body[data-tab=stats] .panel-scroll>:not(.srow){grid-column:1/-1}.srow{grid-template-columns:28px minmax(0,1fr) auto 40px 40px;gap:5px;padding:3px 0}.srow .ic{border-width:2px;width:28px;height:28px;font-size:.85rem}.srow .nm{font-size:.88rem;line-height:1.15}.srow .nm small{font-size:.6rem;line-height:1.25}.srow .v{font-size:1.05rem}.pm{width:40px;height:40px}.derived{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:1px 14px;margin-top:4px;padding:5px 9px;font-size:.74rem}.derived div{padding:1px 0}.skills-panel>div:first-child{grid-template-columns:minmax(0,1fr) auto;align-content:start;column-gap:8px;display:grid}.skills-panel>div:first-child>.sec-h{grid-area:1/1;align-self:center}.skills-panel>div:first-child>.menu-actions{background:0 0;grid-area:1/2;margin:0 0 5px;padding:0}.skills-panel>div:first-child>.skgrid{grid-area:2/1/3/3}.skills-panel .menu-actions .btn-teal{padding:.25em .9em;font-size:.78rem}.skills-panel{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px}.skgrid{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:2px 3px}.skc img{width:min(40px,100%)}.skd .head{grid-template-columns:40px minmax(0,1fr)}.skd .head img{width:40px;height:40px}.skd h3{font-size:.98rem}.skd .desc{padding:5px 8px;font-size:.74rem}.menu-body[data-tab=gear] .lvline{display:none}.menu-body[data-tab=gear] .doll{min-height:0;margin-top:0}.doll-col .slot{max-width:44px}.doll-col{gap:4px}.subtabs{margin-bottom:5px}.item-d{gap:3px;margin-bottom:8px;padding:9px 10px}.item-d h4{font-size:.95rem}.item-d .ln{font-size:.76rem}.item-d .menu-actions{margin:4px -10px -9px;padding:12px 10px 8px}.look-ln b .lk-th{width:36px;height:36px}.inv{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:7px}.ward-slots{grid-template-columns:repeat(6,minmax(0,44px))}.ward-h{margin:4px 0 2px;font-size:.84rem}.ward-h b{font-size:.76rem}.looks{grid-auto-columns:120px}.look{min-height:40px;padding:2px 6px 2px 2px;font-size:.7rem}.lk-new{white-space:nowrap;font-size:.58rem}.lk-hint{font-size:.62rem}.lk-sub{display:none}.lk-th{width:34px;height:34px}.dye{gap:2px;padding:3px 2px;font-size:.62rem}.dye .swatch{width:22px;height:22px}}@media (max-height:300px){.menu-top{margin-bottom:3px}.tab{padding:.18em .75em;font-size:.82rem}.menu-cur .badge{padding:.08em .6em;font-size:.76rem}.menu-body>.panel{padding:8px 10px}.panel-scroll{padding:7px 9px}.panel-scroll>.menu-actions{margin:4px -9px -7px;padding:8px 9px 7px}.panel-scroll>.menu-actions,.skd-act,.item-d .menu-actions{bottom:-7px}.skd-act{margin:0 -9px -7px 0;padding:10px 9px 7px 0}.doll-col .slot{max-width:42px}.doll-col{gap:3px}.srow .nm small{display:none}.ward>.sec-h{top:10px}.ward-slots+.ward-h{display:none}.ward-slots{margin-bottom:7px}.looks{grid-auto-columns:114px;padding-top:3px;padding-bottom:5px}.look{min-height:36px}.lk-th{width:30px;height:30px}.ward{grid-template-columns:minmax(0,1fr) auto;column-gap:6px;display:grid}.ward>*{grid-column:1/-1}.ward>.dyes{grid-area:3/1;margin-right:0}.ward>.ward-h:has(>#btn-dye-all){grid-area:3/2;align-items:stretch;gap:0;margin:-5px 0 -3px;padding:5px 0 7px;font-size:0}.ward-h>b:has(+#btn-dye-all){display:none}.ward-h>#btn-dye-all{white-space:normal;border-radius:10px;width:60px;margin:0;padding:2px 4px;font-size:.66rem;line-height:1.2}}@media (max-height:460px) and (max-width:620px){.subtabs{gap:6px}.subtab{padding:.2em .6em}}@media (pointer:coarse){.tab,.menu-body .btn-gold:not(.btn-sm),.menu-body .btn-teal:not(.btn-sm){min-height:44px}.btn-gold.btn-sm,.btn-teal.btn-sm{min-height:0}.btn-sm,.subtab,.look{z-index:1;position:relative}.btn-sm:after,.subtab:after,.look:after{content:"";position:absolute;inset:-12px -3px}.look:after{inset:-5px -3px}.subtab:after{bottom:-6px}#btn-ward-reset:after{top:-14px;bottom:-7px}.look{z-index:2}.dye{z-index:1;position:relative}#btn-dye-all{margin-block:6px}.srow{grid-template-columns:32px 1fr auto 44px 44px}.pm,.loadout .ls{width:44px;height:44px}}@media (pointer:coarse) and (max-height:300px){.look:after{bottom:-3px}}