: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:100vw;height:100vh;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{filter:drop-shadow(0 6px 10px #3c1e008c);width:min(46vw,70vh);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-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:repeat(5,auto);grid-template-columns:minmax(0,1fr);align-content:start;gap:14px;width:min(330px,34vw);padding:18px 18px 16px;display:grid;position:absolute}@media (min-height:461px){.select-panel{padding:20px 20px 22px;bottom:auto}}.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}.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-panel{grid-template-rows:auto auto auto auto auto auto;align-content:start;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{top:calc(54px + var(--safe-t));gap:4px}.hud[data-top=boss]~.levelup{top:calc(78px + var(--safe-t))}.hud[data-top=boss2]~.levelup{top:calc(120px + var(--safe-t))}.lv-banner{gap:8px;padding:2px 12px 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{gap:5px}.lv-card{border-width:1.5px;gap:5px;padding:2px 10px 2px 2px;font-size:.72rem}.lv-card img,.lv-card .big{border-width:2px;width:24px;height:24px;font-size:.74rem}.lv-btns{gap:5px;margin-left:2px}.lv-btns .btn-gold,.lv-btns .btn-teal{padding:.22em .9em;font-size:.78rem}#ui:has(>.hud)>.toasts{top:calc(132px + var(--safe-t))}.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}}@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}}.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}.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:#1a4a5e;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}.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}.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(70px + 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}}.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);display:grid;position:fixed;inset:0}.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{min-height:0;height:calc(100vh - 74px - var(--safe-t) - var(--safe-b));grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);gap:12px;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{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 .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{grid-template-columns:minmax(0,1fr) minmax(0,2.3fr) minmax(0,1fr);gap:8px;width:100%;height:clamp(200px,56vh,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-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{height:calc(100vh - 64px - var(--safe-t) - var(--safe-b));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:4px 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}}@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}.srow{grid-template-columns:32px 1fr auto 44px 44px}.pm,.loadout .ls{width:44px;height:44px}}