:root{--bg:#08060a;--panel:#100c13e6;--panel-2:#1b151feb;--line:#3a3242;--line-gold:#c9a24a61;--gold:#c9a24a;--gold-hi:#ffd27a;--gold-deep:#8a6a2a;--text:#efe4cf;--muted:#a59a8a;--red:#ff6a6a;--green:#7dffb0;--accent:#c9a24a;--display:"Cinzel", "Trajan Pro", "Palatino Linotype", "Book Antiqua", Palatino, "Noto Serif", Georgia, serif;--sans:ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;--ease:cubic-bezier(.2, .8, .2, 1);--tabbar:0px}.ui{z-index:20;background:radial-gradient(ellipse 90% 55% at 50% -8%, #7846be33, transparent 70%), radial-gradient(ellipse 70% 40% at 50% 108%, #ff963c21, transparent 70%), linear-gradient(#08060ad1, #08060af0), url(/login-bg.jpg) center / cover no-repeat, var(--bg);color:var(--text);font:500 14px/1.5 var(--sans);position:fixed;inset:0;overflow:auto}.ui *{box-sizing:border-box}.ui:not(.pick-panel):before,.ui:not(.pick-panel):after{content:"";z-index:-1;pointer-events:none;opacity:.55;background-image:radial-gradient(1.6px 1.6px at 12% 18%,#ffc46ebf,#0000 60%),radial-gradient(1.2px 1.2px at 34% 62%,#ffaa5a99,#0000 60%),radial-gradient(2px 2px at 58% 34%,#ffd68c8c,#0000 60%),radial-gradient(1.3px 1.3px at 77% 81%,#ff965099,#0000 60%),radial-gradient(1.5px 1.5px at 91% 9%,#ffcd7880,#0000 60%);background-size:50vh 50vh;height:200vh;animation:34s linear infinite embers;position:fixed;top:0;left:0;right:0}.ui:not(.pick-panel):after{opacity:.28;background-size:100vh 100vh;animation-duration:58s}@keyframes embers{to{transform:translateY(-100vh)}}.ui h1,.ui h2,.ui h3{margin:0 0 6px}.ui h1,.ui h2,.brand,.hs-name{font-family:var(--display);letter-spacing:.05em;font-weight:700}.ui h1,.ui h2,.brand{background:linear-gradient(#fff3cf 8%,#e6bd62 52%,#a8782a 96%);color:#0000;filter:drop-shadow(0 2px #0000008c);-webkit-background-clip:text;background-clip:text}.ui h1{font-size:38px;line-height:1.1}.ui h2{font-size:25px;line-height:1.15}.ui h3{font:800 11.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);align-items:center;gap:10px;margin-top:6px;display:flex}.ui h3:after{content:"";background:linear-gradient(90deg, var(--line-gold), transparent);flex:1;height:1px}.muted{color:var(--muted)}.small{font-size:12px}.fine{color:var(--muted);margin:4px 0 0;font-size:11px}.error{color:var(--red);min-height:18px;font-size:13px}.ic{flex:none;display:inline-flex}.ic svg{width:18px;height:18px;display:block}.top{z-index:5;border-bottom:1px solid var(--line);background:linear-gradient(#17111c,#0b0810);align-items:center;gap:24px;padding:6px 22px;display:flex;position:sticky;top:0;box-shadow:0 1px #c9a24a47,0 12px 30px #0000008c}.brand{cursor:pointer;white-space:nowrap;align-items:center;gap:9px;font-size:20px;display:flex}.sigil{color:var(--gold);-webkit-text-fill-color:var(--gold-hi)}.sigil.big{filter:drop-shadow(0 0 18px #ffd27a73);font-size:44px;display:block}.top nav{flex:1;gap:2px;display:flex}.nav{color:var(--muted);font:700 12.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:7px;padding:12px 13px;transition:color .15s,background .15s;display:flex;position:relative}.nav:hover{color:var(--text);background:#ffffff0b}.nav.on{color:var(--gold-hi)}.nav.on:after{content:"";background:linear-gradient(90deg, transparent, var(--gold-hi), transparent);height:2px;box-shadow:0 0 12px var(--gold-hi);border-radius:2px;position:absolute;bottom:1px;left:10px;right:10px}.who{white-space:nowrap;align-items:center;gap:10px;display:flex}.dot{background:var(--red);width:8px;height:8px;box-shadow:0 0 8px var(--red);border-radius:50%}.dot.on{background:var(--green);box-shadow:0 0 8px var(--green)}.screen{max-width:1180px;padding:24px 22px calc(90px + var(--tabbar));margin:0 auto}.screen.enter{animation:screen-in .38s var(--ease)}@keyframes screen-in{0%{opacity:0;transform:translateY(10px)}}.card{border:1px solid var(--line);background:linear-gradient(#241b2aed,#0e0b11f2 62%);border-radius:14px;padding:20px 22px;position:relative;box-shadow:0 18px 50px #0000008c,inset 0 1px #ffe4aa14,inset 0 0 0 1px #c9a24a12}.card:before{content:"";pointer-events:none;opacity:.6;background:linear-gradient(var(--gold), var(--gold)) left top / 18px 1px, linear-gradient(var(--gold), var(--gold)) left top / 1px 18px, linear-gradient(var(--gold), var(--gold)) right top / 18px 1px, linear-gradient(var(--gold), var(--gold)) right top / 1px 18px, linear-gradient(var(--gold), var(--gold)) left bottom / 18px 1px, linear-gradient(var(--gold), var(--gold)) left bottom / 1px 18px, linear-gradient(var(--gold), var(--gold)) right bottom / 18px 1px, linear-gradient(var(--gold), var(--gold)) right bottom / 1px 18px;background-repeat:no-repeat;border-radius:9px;position:absolute;inset:6px}.hs-roster:before,.hero-table-card:before{display:none}.row{flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;display:flex}.row form.row{margin-top:0}.btn{color:#f6ead0;min-height:40px;font:700 14px var(--sans);letter-spacing:.02em;cursor:pointer;transition:transform .15s var(--ease), box-shadow .15s, border-color .15s, filter .15s;background:linear-gradient(#2c2319,#16110b);border:1px solid #c9a24a8c;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:9px 20px;display:inline-flex;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffe4aa24,0 4px 14px #0006}.btn:hover:not(:disabled){border-color:var(--gold-hi);filter:brightness(1.12);transform:translateY(-1px);box-shadow:inset 0 1px #ffe4aa2e,0 8px 22px #00000080,0 0 18px #ffd27a33}.btn:active:not(:disabled){filter:brightness(.95);transform:translateY(1px)}.btn:focus-visible,.nav:focus-visible,.pick:focus-visible,.level:focus-visible,.tab:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}.btn:disabled{opacity:.45;cursor:default}.btn.primary{color:#1c1305;text-shadow:0 1px #ffffff59;background:linear-gradient(#ffe6a6 0%,#dcae4e 46%,#9c7426 100%);border-color:#ffe9b0;box-shadow:inset 0 1px #ffffff8c,inset 0 -2px #5a3c0a73,0 6px 22px #c9a24a4d}.btn.primary:after{content:"";pointer-events:none;width:40%;transition:left .55s var(--ease);background:linear-gradient(100deg,#0000,#fff9,#0000);position:absolute;top:0;bottom:0;left:-60%;transform:skew(-18deg)}.btn.primary:hover:not(:disabled):after{left:125%}.btn.big{letter-spacing:.04em;min-height:48px;padding:12px 28px;font-size:16px}.btn.primary.big:not(:disabled){animation:2.8s ease-in-out infinite breathe}@keyframes breathe{50%{box-shadow:inset 0 1px #ffffff8c,inset 0 -2px #5a3c0a73,0 6px 30px #ffd27a8c,0 0 0 4px #ffd27a1a}}.btn.small{border-radius:8px;min-height:0;padding:5px 12px;font-size:12px}.btn.ghost{border-color:var(--line);color:var(--text);box-shadow:none;background:#ffffff05}.ui input,.foe-select{border:1px solid var(--line);min-height:44px;color:var(--text);font:500 15px var(--sans);background:#0a080dd9;border-radius:10px;outline:none;padding:10px 14px;transition:border-color .15s,box-shadow .15s}.ui input:focus,.foe-select:focus{border-color:var(--gold);box-shadow:0 0 0 3px #c9a24a2e}.code-in{text-transform:uppercase;letter-spacing:4px;text-align:center;width:104px;font-weight:800!important}.login-screen{background:radial-gradient(at 50% 42%,#08060a14,#08060abd 85%),url(/login-bg.jpg) 50%/cover no-repeat}.center{flex-direction:column;justify-content:center;align-items:center;gap:22px;min-height:100%;padding:30px 16px;display:flex;overflow:hidden}.login{width:min(430px,100%);animation:screen-in .5s var(--ease);flex-direction:column;gap:10px;display:flex}.login .title{text-align:center;margin-bottom:4px}.login .title p{margin:0}.guest{grid-template-columns:1fr 1fr;gap:10px;display:grid}.door{cursor:pointer;border:1px solid var(--line-gold);color:var(--text);font:500 12px var(--sans);transition:transform .15s var(--ease), border-color .15s, box-shadow .15s;background:linear-gradient(#c9a24a29,#c9a24a08);border-radius:12px;flex-direction:column;align-items:center;gap:4px;padding:14px 8px 12px;display:flex}.door b{font:700 15px var(--display);letter-spacing:.05em;color:var(--gold-hi)}.door .ic svg{width:28px;height:28px;color:var(--gold-hi)}.door:hover{border-color:var(--gold-hi);transform:translateY(-2px);box-shadow:0 10px 26px #00000080,0 0 22px #ffd27a38}.tabs{border:1px solid var(--line);background:#0a080dd9;border-radius:11px;gap:4px;padding:4px;display:flex}.tab{color:var(--muted);font:700 13px var(--sans);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1;padding:8px;transition:color .15s,background .15s}.tab.on{color:var(--gold-hi);background:linear-gradient(#3a2f20,#241c12);box-shadow:inset 0 1px #ffe4aa24}.strip{opacity:.92;width:min(1100px,100%);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 12% 88%,#0000);mask-image:linear-gradient(90deg,#0000,#000 12% 88%,#0000)}.strip-track{gap:10px;width:max-content;padding:4px 0;animation:70s linear infinite strip;display:flex}.strip:hover .strip-track{animation-play-state:paused}@keyframes strip{to{transform:translate(calc(-50% - 5px))}}.portrait{border:2px solid var(--gold);background:#000;border-radius:50%;flex:none;width:64px;height:64px;box-shadow:0 2px 10px #0000008c}.portrait.lg{width:92px;height:92px}.portrait.sm{width:44px;height:44px}.portrait.xs{vertical-align:middle;width:24px;height:24px;box-shadow:none;border-width:1px}.portrait.empty{color:var(--muted);border-style:dashed;border-color:var(--line);justify-content:center;align-items:center;font-size:28px;display:flex}.icon{border:1px solid var(--line);border-radius:10px;width:64px;height:64px;display:block}.icon.sm{border-radius:7px;width:34px;height:34px}.kit-name{font:700 18px var(--display);letter-spacing:.03em}.fav{align-items:center;gap:6px;display:inline-flex}.picker{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;margin-top:8px;display:grid}.pick{background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 11%, var(--panel-2)), var(--panel-2) 70%);border:1px solid var(--line);min-width:0;color:var(--text);cursor:pointer;font:600 12px/1.2 var(--sans);transition:border-color .15s, transform .15s var(--ease), box-shadow .15s;border-radius:11px;flex-direction:column;align-items:center;gap:6px;padding:9px 4px 7px;display:flex;position:relative}.screen.enter .pick{animation:tile-in .34s var(--ease) backwards;animation-delay:calc(min(var(--i,0), 30) * 11ms)}@keyframes tile-in{0%{opacity:0;transform:translateY(8px)scale(.94)}}.pick .portrait.sm{width:58px;height:58px;transition:transform .15s var(--ease)}.pick span{text-align:center;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;width:100%;min-height:2.4em;display:-webkit-box;overflow:hidden}.pick:hover:not(:disabled){border-color:var(--accent);box-shadow:0 10px 22px #00000080, 0 0 16px color-mix(in srgb, var(--accent) 30%, transparent);transform:translateY(-3px)}.pick:hover:not(:disabled) .portrait.sm{transform:scale(1.07)}.pick.on{border-color:var(--accent);color:#fff3dc;background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, var(--panel-2)), var(--panel-2) 85%);box-shadow:0 0 0 1px var(--accent), 0 0 20px color-mix(in srgb, var(--accent) 45%, transparent)}.pick.on:after{content:"";border:1px solid var(--accent);pointer-events:none;border-radius:14px;animation:2.2s ease-out infinite ring;position:absolute;inset:-4px}@keyframes ring{0%{opacity:.7;transform:scale(.97)}to{opacity:0;transform:scale(1.06)}}.pick:disabled{opacity:.3;cursor:not-allowed}.how{margin:8px 0 18px;padding-left:18px}.how li{margin:4px 0}.screen.wide{max-width:1520px;padding-bottom:18px}.hs{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(340px,30%) minmax(0,1fr);gap:16px;height:calc(100dvh - 100px);min-height:600px;display:grid}.hs-show{background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 17%, #100c13f0), #0e0b11f2 55%);border-color:color-mix(in srgb, var(--accent) 38%, var(--line));flex-direction:column;gap:12px;min-height:0;display:flex;overflow:hidden}.hs-stage{border:1px solid color-mix(in srgb, var(--accent) 32%, var(--line));background:radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--accent) 30%, #14101a), #07060a 75%);border-radius:12px;flex:auto;justify-content:center;align-items:center;min-height:200px;display:flex;position:relative;overflow:hidden}.hs-stage:before{content:"";aspect-ratio:1;pointer-events:none;opacity:.5;background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 22%, transparent) 0 7deg, transparent 7deg 20deg);width:150%;animation:44s linear infinite rays;position:absolute;top:42%;left:50%;translate:-50% -50%;-webkit-mask-image:radial-gradient(circle,#000 8%,#0000 62%);mask-image:radial-gradient(circle,#000 8%,#0000 62%)}@keyframes rays{to{rotate:360deg}}.hs-stage>*{position:relative}.hs-stage .hero-preview{display:block}.portrait.hs-big{width:168px;height:168px;box-shadow:0 0 40px color-mix(in srgb, var(--accent) 35%, transparent);border-width:3px}.hs-name{color:#fff3dc;text-shadow:0 0 22px color-mix(in srgb, var(--accent) 60%, transparent), 0 2px 0 #0009;font-size:31px;line-height:1.1}.hs-title{color:color-mix(in srgb, var(--accent) 45%, var(--muted));margin-top:2px;font-style:italic}.hs-chips{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.chip{border:1px solid color-mix(in srgb, var(--accent) 50%, var(--line));font:800 11px var(--sans);letter-spacing:.08em;text-transform:uppercase;background:#00000059;border-radius:20px;padding:2px 10px}.hs-abilities{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.hs-ab{aspect-ratio:1;cursor:pointer;border:1px solid var(--line);transition:border-color .15s, box-shadow .15s, transform .15s var(--ease);background:#000;border-radius:10px;padding:0;position:relative;overflow:hidden}.hs-ab .icon{border:none;border-radius:0;width:100%;height:100%}.hs-ab.ult{border-color:#6a5a2a}.hs-ab:hover,.hs-ab.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 50%, transparent);transform:translateY(-2px)}.hs-detail{border:1px solid var(--line);background:#08060a8c;border-radius:10px;min-height:98px;padding:10px 12px}.hs-detail-head{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.hs-detail-head b{font:700 16px var(--display);letter-spacing:.03em}.hs-key{text-align:center;border:1px solid var(--gold);min-width:20px;color:var(--gold-hi);font:800 12px var(--sans);border-radius:4px;padding:0 5px}.hs-more{color:var(--gold);font:600 13px var(--sans);cursor:pointer;background:0 0;border:none;align-self:flex-start;padding:0}.hs-more:hover{color:var(--gold-hi);text-decoration:underline}.hs-roster{scrollbar-width:thin;scrollbar-color:var(--gold-deep) transparent;min-height:0;overflow:auto}.hs-roster-head{flex-wrap:wrap;align-items:baseline;gap:12px;display:flex}.hs-roster .picker{margin-top:10px}.hs-roster .pick{padding-top:11px;font-size:12.5px}.hs-roster .pick .portrait.sm{width:68px;height:68px}.hs-how{border-top:1px solid var(--line);margin-top:16px;padding-top:10px}.hs-how summary{cursor:pointer;font:700 16px var(--display);letter-spacing:.04em;color:var(--gold)}.hs-how .how{margin-bottom:4px}.hs-bar{border:1px solid var(--line);background:linear-gradient(#241b2af2,#0e0b11f7);border-radius:14px;grid-column:1/-1;align-items:center;gap:10px;padding:12px 14px 12px 20px;display:flex;position:relative;box-shadow:0 10px 40px #00000080,inset 0 1px #ffe4aa14}.hs-note{flex:1;min-width:0}.hs-find{min-width:300px}.hs-search{border:1px solid var(--gold);border-radius:10px;align-items:center;gap:12px;min-width:300px;padding:7px 8px 7px 14px;display:flex;box-shadow:0 0 18px #ffd27a2e}.hs-search .qtext{flex:1}.tiles{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:14px;display:grid}.tile{border:1px solid var(--line);text-align:center;background:#08060a80;border-radius:12px;padding:14px 12px 12px;box-shadow:inset 0 1px #ffe4aa0f}.tile-v{font:700 26px var(--display);color:var(--gold-hi);justify-content:center;align-items:center;min-height:34px;display:flex}.tile-v .fav{font-size:16px}.tile-l{text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-top:2px;font-size:10.5px;font-weight:700}.queue-bar{left:50%;bottom:calc(22px + var(--tabbar));z-index:3;border:1px solid var(--gold);background:#0e0b10f5;border-radius:30px;align-items:center;gap:12px;padding:10px 16px;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 8px 30px #0009,0 0 22px #ffd27a33}.spinner{border:2px solid var(--line);border-top-color:var(--gold-hi);border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.hero-table-card{padding:8px 10px}.hero-table{border-collapse:collapse;width:100%}.hero-table th{text-align:left;font:800 10.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-gold);padding:10px}.hero-table td{border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent);vertical-align:middle;padding:8px 10px}.hero-table .icon-col{text-align:center;width:56px;padding-left:4px;padding-right:4px}.hero-table .kit-name{font-size:16px}.hero-table .icon.sm{width:42px;height:42px;margin:0 auto;display:block}.hero-row{cursor:pointer;transition:background .15s}.hero-row:hover{background:color-mix(in srgb, var(--accent) 9%, transparent);box-shadow:inset 3px 0 0 color-mix(in srgb, var(--accent) 60%, transparent)}.hero-row.on{background:color-mix(in srgb, var(--accent) 16%, transparent);box-shadow:inset 3px 0 0 var(--accent)}.hero-open>td{box-shadow:inset 3px 0 0 var(--accent);background:#00000042;padding:16px 12px 22px}.hero-side{flex-direction:column;gap:10px;display:flex}.spell.passive{border-color:color-mix(in srgb, var(--accent) 55%, var(--line))}.spell.passive .icon{width:72px;height:72px}.hero-body{grid-template-columns:300px 1fr;gap:18px;display:grid}.stage{border:1px solid color-mix(in srgb, var(--accent) 32%, var(--line));background:radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--accent) 26%, #14101a), #07060a 75%);border-radius:12px;height:420px;overflow:hidden}.hero-preview{width:100%;height:100%}.spells{flex-direction:column;gap:10px;display:flex}.spell{border:1px solid var(--line);background:#08060a80;border-radius:12px;grid-template-columns:72px 1fr;gap:14px;padding:12px;display:grid}.spell.ult{border-color:#6a5a2a;box-shadow:0 0 16px #c9a24a24}.icon-wrap{width:72px;height:72px;position:relative}.icon-wrap .icon{width:72px;height:72px}.key{text-align:center;border:1px solid var(--gold);min-width:18px;color:var(--gold-hi);font:800 12px var(--sans);background:#08060ae6;border-radius:4px;padding:0 4px;position:absolute;bottom:4px;left:4px}.spell-name{font:700 16px var(--display);letter-spacing:.03em;align-items:center;gap:8px;display:flex}.ult-tag{font:800 10px var(--sans);letter-spacing:.08em;color:#1a1206;background:linear-gradient(#ffe19a,#c9a24a);border-radius:4px;padding:1px 6px}.blurb{margin:3px 0 4px}.profile{flex-direction:column;gap:20px;display:flex}.cols{grid-template-columns:1fr 1.4fr;align-items:start;gap:20px;display:grid}.tbl{border-collapse:collapse;width:100%;margin-top:6px}.tbl th{text-align:left;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);border-bottom:1px solid var(--line);padding:6px 8px;font-size:10.5px;font-weight:800}.tbl td{border-bottom:1px solid #3a324280;padding:8px}.res{font:800 11px var(--sans);letter-spacing:.06em;border-radius:4px;padding:2px 8px}.res.win{color:var(--green);background:#7dffb026}.res.loss{color:var(--red);background:#ff6a6a26}.empty-state{text-align:center;color:var(--muted);flex-direction:column;align-items:center;gap:6px;padding:26px 12px 18px;display:flex}.empty-state .ic svg{width:44px;height:44px;color:var(--gold);opacity:.75}.empty-state b{font:700 17px var(--display);letter-spacing:.04em;color:var(--text)}.lobbies{flex-direction:column;gap:20px;max-width:860px;margin:0 auto;display:flex}.lobby-list{flex-direction:column;gap:8px;margin-top:8px;display:flex}.lobby-row{border:1px solid var(--line);background:#08060a80;border-radius:10px;grid-template-columns:80px 28px 1fr auto;align-items:center;gap:10px;padding:10px 12px;transition:border-color .15s;display:grid}.lobby-row:hover{border-color:var(--line-gold)}.code{letter-spacing:3px;color:var(--gold-hi);font:800 18px ui-monospace,monospace}.code.big{text-shadow:0 0 22px #ffd27a66;font-size:36px}.lobby-head{justify-content:space-between;align-items:center;display:flex}.seats{grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin:18px 0;display:grid}.seat{text-align:center;border:1px solid var(--line);background:#08060a80;border-radius:14px;flex-direction:column;align-items:center;gap:6px;padding:18px;transition:border-color .2s,box-shadow .2s;display:flex}.seat.mine{border-color:#6a5a3a}.seat.ready{border-color:var(--green);box-shadow:0 0 24px #7dffb029}.vs{font:800 26px var(--display);color:var(--gold-hi);letter-spacing:2px;text-shadow:0 0 18px #ffd27a80}.badge{font:800 11px var(--sans);letter-spacing:1px;color:var(--muted);background:#221c26;border-radius:20px;padding:3px 10px}.badge.on{color:var(--green);background:#7dffb026}.levels{grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px;display:grid}.level{--lv:var(--gold);background:linear-gradient(180deg, color-mix(in srgb, var(--lv) 10%, var(--panel-2)), var(--panel-2));border:1px solid var(--line);color:var(--text);cursor:pointer;font:700 13px var(--sans);transition:border-color .15s, transform .15s var(--ease), box-shadow .15s;border-radius:11px;flex-direction:column;align-items:center;gap:3px;padding:10px 4px 9px;display:flex}.level.lv-1{--lv:#7dffb0}.level.lv-2{--lv:#c2ea6a}.level.lv-3{--lv:#ffd27a}.level.lv-4{--lv:#ff9a4a}.level.lv-5{--lv:#ff5a5a}.level:hover{border-color:var(--lv);transform:translateY(-2px)}.level.on{border-color:var(--lv);background:linear-gradient(180deg, color-mix(in srgb, var(--lv) 26%, var(--panel-2)), var(--panel-2));box-shadow:0 0 0 1px var(--lv), 0 0 18px color-mix(in srgb, var(--lv) 35%, transparent)}.level .pips{letter-spacing:1px;color:var(--lv);font-size:9px}.level .won{color:var(--green);margin-left:3px}.level-blurb{min-height:2.9em;margin:8px 0 0}.ui h3.gap{margin-top:18px}.foe-row{align-items:center;gap:12px;margin-top:8px;display:flex}.foe-select{flex:1;min-width:0;max-width:380px}.modes{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;display:grid}.mode{cursor:pointer;text-align:left;border:1px solid var(--line);color:var(--muted);font:500 12px var(--sans);transition:border-color .15s, transform .15s var(--ease), box-shadow .15s, color .15s;background:#08060a80;border-radius:12px;align-items:center;gap:12px;padding:12px 16px;display:flex}.mode .ic svg{width:26px;height:26px}.mode span{flex-direction:column;min-width:0;display:flex}.mode b{font:700 16px var(--display);letter-spacing:.05em;color:var(--text)}.mode small{font-size:12px}.mode:hover:not(:disabled):not(.on){border-color:var(--line-gold);color:var(--text);transform:translateY(-1px)}.mode.on{border-color:var(--gold-hi);color:var(--text);box-shadow:0 0 0 1px var(--gold-hi), 0 0 22px #ffd27a33, inset 0 1px 0 #ffe4aa2e;background:linear-gradient(#c9a24a3d,#c9a24a0d)}.mode.on b,.mode.on .ic{color:var(--gold-hi)}.mode:disabled{opacity:.4;cursor:not-allowed}.cpu-opts{border:1px solid var(--line);background:#08060a66;border-radius:12px;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:6px 22px;margin-bottom:14px;padding:12px 14px 4px;display:grid}@media (width<=1100px){.cpu-opts{grid-template-columns:minmax(0,1fr)}}@media (width<=600px){.modes{gap:8px;margin-bottom:12px}.mode{gap:8px;padding:9px 10px}.mode b{font-size:14px}.mode small{font-size:10.5px;line-height:1.25}.mode .ic svg{width:22px;height:22px}.cpu-opts{padding:10px 10px 2px}}.or{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;align-items:center;gap:10px;margin:2px 0;font-size:11px;font-weight:700;display:flex}.or:before,.or:after{content:"";background:linear-gradient(90deg, transparent, var(--line-gold));flex:1;height:1px}.or:after{background:linear-gradient(90deg, var(--line-gold), transparent)}.toast{z-index:40;border:1px solid var(--gold);color:var(--text);font:600 14px var(--sans);opacity:0;pointer-events:none;transition:opacity .2s, transform .25s var(--ease);background:linear-gradient(#241b2afa,#0e0b10fa);border-radius:10px;padding:10px 18px;position:fixed;top:70px;left:50%;transform:translate(-50%,-10px);box-shadow:0 10px 30px #0009,0 0 22px #ffd27a2e}.toast.on{opacity:1;transform:translate(-50%)}.pick-panel{background:#08060ab8;justify-content:center;align-items:flex-start;padding:20px;display:flex}.pick-card{width:min(780px,100%);animation:screen-in .3s var(--ease)}.pick-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.pick-clock{font:700 32px var(--display);color:var(--gold-hi);text-align:right;text-shadow:0 0 18px #ffd27a80;min-width:2ch}.pick-keep{width:100%}.arena-row{grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px;margin-top:8px;display:grid}.loading-note{font:600 16px var(--sans);color:#f2e6c8}.update-bar{left:50%;top:calc(14px + env(safe-area-inset-top,0px));z-index:50;border:1px solid var(--gold);width:max-content;max-width:calc(100vw - 32px);color:var(--text);font:600 14px var(--sans);background:#0e0b10fa;border-radius:12px;align-items:center;gap:12px;padding:10px 16px;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 8px 30px #0009}.forfeit{z-index:10;color:#e9dcc6;cursor:pointer;background:#08060acc;border:1px solid #3a3242;border-radius:8px;padding:6px 14px;font:600 12px ui-sans-serif,system-ui;position:fixed;top:16px;right:16px}@media (width<=1100px){.hs-note{display:none}.hs-bar{justify-content:flex-end}.nav .ic{display:none}}@media (width<=860px){.cols,.hero-body{grid-template-columns:1fr}.top{flex-wrap:wrap;gap:4px 10px}.hs{grid-template-rows:auto;grid-template-columns:minmax(0,1fr);height:auto;min-height:0}.hs-show{grid-template-columns:170px 1fr;grid-template-areas:"stage info""abil abil""detail detail""more more";gap:10px 14px;display:grid;overflow:visible}.hs-stage{grid-area:stage;height:210px;min-height:0}.hs-info{grid-area:info;align-self:center}.hs-abilities{grid-area:abil;grid-template-columns:repeat(5,minmax(0,72px))}.hs-detail{grid-area:detail}.hs-more{grid-area:more}.hs-roster{overflow:visible}.hs-bar{bottom:calc(8px + var(--tabbar) + env(safe-area-inset-bottom,0px));z-index:3;background:#0e0b10f7;flex-wrap:wrap;position:sticky;box-shadow:0 -6px 24px #00000080}}@media (pointer:coarse),(width<=760px){.forfeit{top:calc(100px + env(safe-area-inset-top,0px));right:calc(8px + env(safe-area-inset-right,0px));padding:5px 10px;font-size:11px}.forfeit.raid-leave{top:calc(62px + env(safe-area-inset-top,0px))}.toast{top:calc(110px + env(safe-area-inset-top,0px))}}@media (width<=600px){:root{--tabbar:calc(56px + env(safe-area-inset-bottom,0px))}.screen{padding:12px 10px calc(90px + var(--tabbar))}.screen.wide{padding-bottom:calc(14px + var(--tabbar))}.card{padding:14px}.ui h1{font-size:30px}.ui h2{font-size:21px}.top{flex-wrap:nowrap;justify-content:space-between;gap:8px;padding:8px 12px}.brand{font-size:17px}.who .muted{display:none}.top nav{z-index:6;padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:linear-gradient(#17111c,#0b0810);gap:0;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -1px #c9a24a47,0 -10px 30px #0009}.nav{letter-spacing:.05em;flex-direction:column;flex:1;gap:3px;min-width:0;padding:6px 2px 5px;font-size:9.5px}.nav .ic{display:inline-flex}.nav .ic svg{width:22px;height:22px}.nav.on:after{inset:-4px 22% auto}.guest{gap:8px}.picker{grid-template-columns:repeat(5,1fr);gap:6px}.pick{gap:4px;padding:7px 2px 5px;font-size:10.5px}.pick .portrait.sm,.hs-roster .pick .portrait.sm{width:46px;height:46px}.hs-roster .pick{padding-top:7px;font-size:10.5px}.pick:hover:not(:disabled){transform:none}.hs{gap:10px}.hs-show{grid-template-columns:96px 1fr;gap:8px 12px;padding:12px}.hs-stage{border-radius:10px;height:122px}.portrait.hs-big{width:80px;height:80px}.hs-name{font-size:21px}.hs-title{font-size:13px}.hs-chips{margin-top:6px}.hs-abilities{gap:6px}.hs-ab{border-radius:8px}.hs-ab .key{font-size:10px;bottom:3px;left:3px}.hs-detail{min-height:0;padding:7px 10px}.hs-detail-head b{font-size:15px}.hs-detail .blurb{-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;font-size:12.5px;line-height:1.35;display:-webkit-box;overflow:hidden}.hs-detail.full .blurb{display:block}.hs-more{font-size:12px}.hs-bar{bottom:calc(8px + var(--tabbar));gap:8px;padding:10px}.hs-bar>.btn{flex:1}.hs-bar>.hs-find,.hs-bar>.hs-search{flex:100%;order:-1;min-width:0}.hs-bar>.btn.hs-find{padding:12px 10px}.play-actions{bottom:calc(8px + var(--tabbar));z-index:3;border:1px solid var(--line);background:#0e0b10f5;border-radius:12px;margin:14px -6px 0;padding:10px;position:sticky;box-shadow:0 -6px 24px #00000080}.play-actions .btn.big{flex:1;padding:12px 10px}.play-actions.three .btn.big{flex:100%}.play-actions.three .btn:not(.big){flex:1}.levels{gap:5px}.level{padding:8px 2px 6px;font-size:11px}.queue-bar{bottom:calc(96px + var(--tabbar))}}.news{flex-direction:column;gap:20px;max-width:920px;margin:0 auto;display:flex}.news-head{text-align:center;padding:6px 0 2px}.news-head p{margin:0}.news-when{align-items:center;gap:10px;margin-bottom:6px;display:flex}.news-date{font:800 11.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}.news-badge{font:800 10.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;border-radius:20px;padding:2px 9px}.news-badge.next{color:#1a1206;background:linear-gradient(#ffe7a8,#c9902e)}.news-badge.live{color:#9ff0b4;background:#3ca05a24;border:1px solid #78dc9680}.news-release.next{border-color:var(--gold);box-shadow:0 0 0 1px #c9a24a40,0 14px 40px #00000080,0 0 34px #ffd27a1a}.news-items{flex-direction:column;margin:12px 0 0;padding:0;list-style:none;display:flex}.news-item{border-top:1px solid var(--line);grid-template-columns:minmax(0,1fr);gap:12px;padding:14px 0;display:grid}.news-item.has-media{grid-template-columns:minmax(0,1fr) minmax(0,340px);align-items:start}.news-item:last-child{padding-bottom:2px}.news-text b{font:700 16.5px var(--display);letter-spacing:.03em;color:var(--text);margin:6px 0 4px;display:block}.news-text p{color:var(--muted);margin:0;font-size:14px;line-height:1.5}.news-tag{border:1px solid var(--line-gold);color:var(--gold-hi);font:800 10px var(--sans);letter-spacing:.12em;text-transform:uppercase;border-radius:4px;padding:1px 8px;display:inline-block}.news-tag.t-raid{color:#ffb08a;border-color:#ff8c5a73}.news-tag.t-heroes{color:#c9b6ff;border-color:#aa8cff73}.news-tag.t-motion{color:#9fe3ff;border-color:#6ec8ff73}.news-tag.t-arenas{color:#a8e6a0;border-color:#78d27873}.news-media{border:1px solid var(--line);background:#000;border-radius:10px;width:100%;height:auto;display:block}video.news-media{aspect-ratio:16/9;object-fit:cover}.news-pic{display:block}.news-pic:hover .news-media,.news-pic:focus-visible .news-media{border-color:var(--gold-hi)}.news-lead{margin:10px 0 2px}.news-link{text-align:center;align-self:center;margin-top:4px}@media (width<=760px){.news-item.has-media{grid-template-columns:minmax(0,1fr)}}#app,#app canvas{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.loading{z-index:30;color:#efe4cf;font:500 14px/1.45 var(--sans);background:radial-gradient(at 50% 45%,#08060a8c,#08060ae6 80%),url(/login-bg.jpg) 50%/cover no-repeat,#08060a;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.loading-box{text-align:center;width:min(560px,100%);animation:screen-in .4s var(--ease);flex-direction:column;align-items:center;gap:14px;display:flex}.loading-duel{justify-content:center;align-items:center;gap:clamp(14px,6vw,44px);display:flex}.loading-side{flex-direction:column;align-items:center;gap:4px;min-width:110px;display:flex}.loading .portrait{background:#000;border:3px solid #c9a24a;border-radius:50%;box-shadow:0 0 34px #ffd27a4d,0 8px 24px #0009}.loading-portrait{width:clamp(84px,22vw,128px);height:clamp(84px,22vw,128px)}.loading-vs{font:800 clamp(28px, 6.4vw, 44px) var(--display);color:#ffd27a;letter-spacing:2px;text-shadow:0 0 22px #ffd27a99,0 3px 14px #000;animation:1.6s ease-in-out infinite vs-pulse}@keyframes vs-pulse{50%{transform:scale(1.12)}}.loading-arena{font:700 clamp(20px, 4.4vw, 28px) var(--display);color:#ffd27a;letter-spacing:.06em}.loading-bar{background:#ffffff1a;border-radius:4px;width:min(340px,90%);height:6px;overflow:hidden}.loading-bar i{background:linear-gradient(90deg,#0000,#ffd27a,#0000);border-radius:4px;width:36%;height:100%;animation:1.15s ease-in-out infinite loading-sweep;display:block}@keyframes loading-sweep{0%{transform:translate(-110%)}to{transform:translate(300%)}}.loading-line{color:#a59a8a;min-height:20px}@media (width<=720px){.hero-table .opt{display:none}.hero-table th,.hero-table td{padding:6px 4px}.hero-table .icon-col{width:38px;padding-left:2px;padding-right:2px}.hero-table .icon.sm{width:32px;height:32px}.hero-table .portrait.sm{width:38px;height:38px}.hero-table .kit-name{font-size:14px}.hero-open>td{padding:10px 6px 16px}}@media (prefers-reduced-motion:reduce){.ui:before,.ui:after,.strip-track,.hs-stage:before,.btn.primary.big,.pick.on:after,.loading-vs,.screen.enter,.screen.enter .pick,.login,.pick-card,.loading-box{animation:none!important}}