:root{--side-line:#cf142447;--side-hover:#cf142426;--side-on:#cf142438;--u:min(1px,100cqi/360);--bg:#0b0b0c;--panel:#161617;--line:#2e2e31;--txt:#ececee;--mute:#9a9aa0;--acc:#7c7c84;--red:#cf1424;
--bar-blue:linear-gradient(90deg,#08367a,#19c4ff,#08367a);--bar-red:linear-gradient(90deg,#7d0e0e,#ff5a5a,#7d0e0e);--bar-gold:linear-gradient(90deg,#7a4a08,#ffc400,#7a4a08);--edge-blue:linear-gradient(90deg,#1368ff,#45e6ff,#1368ff);--edge-red:linear-gradient(90deg,#ff2020,#ffb0a8,#ff2020);--edge-gold:linear-gradient(90deg,#ff9d00,#fff06a,#ff9d00)}
*{box-sizing:border-box;margin:0}
html{scrollbar-gutter:stable}
/* Scrollbars: square red thumb on the dark background, thinner inside panels */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--red);background-clip:padding-box;border:3px solid #0000;min-height:40px}
::-webkit-scrollbar-thumb:hover{background:#ff4d4d;background-clip:padding-box}
::-webkit-scrollbar-thumb:active{background:#8d1111;background-clip:padding-box}
:is(#side,.comp,.desc,.fx)::-webkit-scrollbar{width:8px;height:8px}
:is(#side,.comp,.desc,.fx)::-webkit-scrollbar-track{background:#0000}
:is(#side,.comp,.desc,.fx)::-webkit-scrollbar-thumb{border-width:2px}
/* Firefox has no ::-webkit-scrollbar. Chrome drops those rules if it sees scrollbar-color, so keep this guarded */
@supports not selector(::-webkit-scrollbar){
html{scrollbar-color:var(--red) var(--bg)}
#side,.comp,.desc,.fx{scrollbar-width:thin;scrollbar-color:var(--red) #0000}
}
body{font-family:"Quantico",system-ui,sans-serif;background:var(--bg);color:var(--txt);display:flex;min-height:100vh}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
#side{display:flex;flex-direction:column;width:280px;flex:none;background:#110c0d;border-right:1px solid var(--side-line);padding:24px 14px;position:sticky;top:0;height:100vh;overflow:auto}
.logo{display:flex;align-items:center;justify-content:center;gap:10px;font-size:38px;line-height:1;font-weight:800;color:var(--red);padding:0 10px 24px}
.logo img{height:1.3em;width:auto;flex:none;margin:-.15em 0}
nav a,nav button{display:flex;justify-content:space-between;width:100%;padding:10px 12px;border:0;background:none;color:var(--txt);font-family:inherit;font-size:16px;font-weight:700;border-radius:6px;cursor:pointer;text-align:left}
nav a,nav button{transition:background-color .15s}
nav a:hover,nav button:hover{background:var(--side-hover)}
nav a.on{background:var(--side-on);box-shadow:inset 3px 0 0 var(--red);color:#fff}
#side :focus-visible{outline-color:var(--red)}
nav button i{font-style:normal;transition:transform .2s}
nav button[aria-expanded=true] i{transform:rotate(180deg)}
#teamsMenu{padding-left:10px}
#teamsMenu .sub{padding:9px 12px;font-size:14px;color:#dcdce0}
#teamsMenu .sub[aria-expanded=true] i{transform:rotate(180deg)}
.subList{margin:0 0 6px 12px;border-left:2px solid var(--side-line)}
.subList a{justify-content:flex-start;align-items:center;gap:8px;padding:7px 12px 7px 16px;font-weight:400;font-size:14px;color:#dcdce0;border-radius:0 6px 6px 0}
.subList img{width:22px;height:22px;flex:none;object-fit:contain}
.subEmpty{padding:7px 12px 7px 16px;font-size:13px;color:var(--mute)}
#main{--pad:32px;flex:1;min-width:0;padding:var(--pad)}
#menuBtn{display:none}
#scrollHint{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:9;transform:translateX(-50%);padding:8px 14px;background:#000000e6;border:1px solid var(--line);border-radius:999px;color:var(--txt);font-size:13px;font-weight:600;white-space:nowrap;pointer-events:none}
.wpn-detail:not(:has(img)){grid-template-columns:minmax(0,1fr)}
.wpn-detail>.slot:not(:has(img)){display:none}
@media(hover:none){nav a:hover,nav button:hover{background:none}nav a.on:hover{background:var(--side-on)}}
#sheet{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;background:#000000a6}
#sheet[hidden]{display:none}
.sheet-panel{position:relative;width:100%;max-height:70dvh;overflow-y:auto;padding:18px 16px calc(18px + env(safe-area-inset-bottom));background:var(--panel);border-top:2px solid var(--red);border-radius:12px 12px 0 0}
.sheet-panel h2{padding-right:44px;font-size:17px;font-weight:700}
.sheet-panel p{margin-top:8px;font-size:14px;line-height:1.55;color:#dcdaf0;white-space:pre-line}
.sheet-close{position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;background:none;color:var(--txt);font-size:26px;cursor:pointer}
.sheet-link{display:block;margin-top:14px;padding:12px;background:#d8d8dc;border-radius:4px;color:#0b0b0c;font-size:14px;font-weight:700;text-align:center}
.sheet-link[hidden]{display:none}
h1{font-size:34px;font-weight:800}
.sub{color:var(--mute);margin:6px 0 26px}
.hero{position:relative;display:flex;align-items:center;min-height:230px;padding:32px 36px;overflow:hidden;background:#101012;border-bottom:2px solid var(--red);clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#101012 32%,#101012b3 50%,#10101266 68%,#10101200 92%)}
.hero-art{position:absolute;top:-2px;bottom:-2px;right:0;width:68%;overflow:hidden}
.hero-track{display:flex;width:max-content;height:100%;animation:belt calc(var(--n)*5s) linear infinite}
.hero-track:hover,.hero-track:focus-within{animation-play-state:paused}
@keyframes belt{to{transform:translateX(-50%)}}
.hero-track a{position:relative;flex:none;width:170px;margin-right:6px;overflow:hidden;transform:skewX(-12deg)}
.hero-track img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:skewX(12deg) scale(1.3);transition:transform .25s,filter .25s}
.hero-track a:hover img,.hero-track a:focus-visible img{transform:skewX(12deg) scale(1.4);filter:brightness(1.12)}
.hero-name{position:absolute;left:-30px;right:-30px;bottom:0;padding:26px 34px 10px;background:linear-gradient(0deg,#000d,#0000);font-size:12px;font-weight:700;text-align:center;transform:skewX(12deg);opacity:0;transition:opacity .2s}
.hero-track a:hover .hero-name,.hero-track a:focus-visible .hero-name{opacity:1}
.hero-tx{position:relative;z-index:2;max-width:430px}
.hero .sub{margin:10px 0 0;color:#c4c4ca}
/* 6-column grid: rows of 3, and a short last row stretches to fill the width */
.home-grid{display:grid;grid-template-columns:150px repeat(6,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:12px;margin-top:24px}
.home-label{display:flex;align-items:center;font-size:13px;font-weight:700;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:#c4c4ca}
.tile-gap{display:grid;place-items:center;min-height:88px;border:1px dashed #ffffff0f;color:#ffffff40;font-size:12px;font-weight:600}
.tile{--cut:14px;position:relative;display:flex;align-items:center;gap:14px;min-height:88px;padding:16px 18px;overflow:hidden;background:linear-gradient(100deg,color-mix(in srgb,var(--c) 20%,transparent),transparent 72%),var(--panel);border-left:3px solid var(--c);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);transition:filter .2s,transform .2s}
.tile:hover,.tile:focus-visible{filter:brightness(1.25);transform:translateY(-2px)}
.tile:focus-visible{outline-offset:-3px}
.t-bg{position:absolute;right:-14px;top:50%;width:112px;height:112px;object-fit:contain;opacity:.07;transform:translateY(-50%) rotate(-10deg);transition:opacity .2s,transform .3s;pointer-events:none}
.tile:hover .t-bg{opacity:.16;transform:translateY(-50%) rotate(-4deg) scale(1.08)}
.t-ic{flex:none;width:40px;height:40px;filter:drop-shadow(0 0 9px var(--c))}
.home-grid .tile{flex-direction:column;justify-content:center;gap:8px;padding:14px 6px;text-align:center}
.home-grid .t-tx b{font-size:15px}
.t-ic img{display:block;width:100%;height:100%;object-fit:contain}
.t-tx{position:relative;display:grid;gap:3px;min-width:0}
.t-tx b{font-size:17px;font-weight:700}
.t-tx small{font-size:12px;color:color-mix(in srgb,var(--c) 55%,#fff)}
.tile.none{background:linear-gradient(100deg,color-mix(in srgb,var(--c) 7%,transparent),transparent 72%),var(--panel);border-left-color:color-mix(in srgb,var(--c) 45%,#333)}
.tile.none .t-ic{filter:none;opacity:.7}
.tile.none b{color:#c9c9ce}
.tile.none small{color:var(--mute)}
h2.grp{display:flex;align-items:center;gap:12px;font-size:14px;margin:30px 0 14px;color:#c4c4ca;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
h2.grp::after{content:"";flex:1;height:1px;background:var(--line)}
.picker{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;min-height:88px;margin-bottom:22px}
.pgroup{display:grid;gap:8px}
.pset{display:grid;gap:4px}
.pset>span{font-size:12px;color:var(--mute)}
.pset>div{display:flex;flex-wrap:wrap;gap:6px}
.psub{display:grid;gap:6px;padding:10px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:6px}
.picker button i{display:inline-block;font-style:normal;margin-left:6px;transition:transform .2s}
.picker button[aria-expanded=true] i{transform:rotate(180deg)}
.picker button{padding:9px 18px;background:var(--panel);border:1px solid var(--line);color:var(--txt);font:600 14px "Quantico";border-radius:4px;cursor:pointer}
.picker button[aria-pressed=true]{background:#d8d8dc;border-color:#d8d8dc;color:#0b0b0c}
.psub button{padding:5px 10px;font-size:12px;text-align:left}
#tip{position:fixed;z-index:30;max-width:340px;padding:6px 10px;background:#000000f0;border:1px solid var(--line);border-radius:4px;color:var(--txt);font:600 12px "Quantico";pointer-events:none}
#tip b{display:block}
#tip p{margin-top:4px;font-weight:400;line-height:1.45;color:#dcdaf0;white-space:pre-line}
.notice{display:flex;align-items:center;margin:calc(-1*var(--pad)) calc(-1*var(--pad)) 20px;padding:8px 14px;background:#e6bd52;color:#1c1602;font-size:13px;line-height:1.4}
.slot.named{padding:3px;color:#dcdaf0;font-size:10px;line-height:1.2;text-align:center}
.mem .slot.named{padding:2px 0 0 3px;font-size:8px;writing-mode:vertical-rl;place-items:end start}
.mem .slot.named .n{padding-left:3px;background:none;clip-path:none;writing-mode:horizontal-tb}
/* Cards share the width of the panel. --u is 1px on a card of 360px or more and shrinks with narrower cards, so all of its fixed sizes shrink together */
.comp{display:flex;align-items:stretch;padding:15px 0;view-transition-name:comp}
.comp-tools{display:flex;justify-content:flex-end;margin-top:12px}
.tool{padding:8px 14px;background:var(--panel);border:1px solid var(--line);border-radius:4px;color:var(--txt);font:600 13px "Quantico";cursor:pointer}
.tool:hover{background:#4a4a4f}
.tool:disabled{opacity:.6;cursor:wait}
::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
::view-transition-old(comp){animation:comp-out .45s ease both}
::view-transition-new(comp){animation:comp-in .45s ease both}
@keyframes comp-out{to{opacity:0;transform:translateY(48px)}}
@keyframes comp-in{from{opacity:0;transform:translateY(-48px)}}
.card{container-type:inline-size;flex:1 1 0;min-width:0;position:relative;background:var(--cp);border:1px solid #ffffff14}
.cin{padding:calc(34*var(--u)) calc(16*var(--u)) calc(30*var(--u))}
/* The bars sit outside the card, touching its border. Each one is two layers, so its edge also follows the ramps: the bar shows through as the edge, and ::before is the fill */
.bar{position:absolute;left:-1px;right:-1px;height:calc(15*var(--u))}
.bar::before{content:"";position:absolute;inset:2px}
.bar-top{bottom:calc(100% + 1px)}.bar-bot{top:calc(100% + 1px)}
.c-blue .bar{background:var(--edge-blue)}.c-red .bar{background:var(--edge-red)}.c-gold .bar{background:var(--edge-gold)}
.c-blue .bar::before{background:var(--bar-blue)}.c-red .bar::before{background:var(--bar-red)}.c-gold .bar::before{background:var(--bar-gold)}
/* The outer ends of the team's bars flare out into the panel's margin */
.comp .c-blue .bar{left:calc(-16*var(--u) - 1px);right:0}
.comp .c-blue .bar-top{clip-path:polygon(0 0,100% 0,100% 100%,calc(16*var(--u)) 100%)}
.comp .c-blue .bar-bot{clip-path:polygon(calc(16*var(--u)) 0,100% 0,100% 100%,0 100%)}
.comp .c-blue .bar-top::before{clip-path:polygon(3px 0,100% 0,100% 100%,calc(12*var(--u) + 3px) 100%)}
.comp .c-blue .bar-bot::before{clip-path:polygon(calc(12*var(--u) + 3px) 0,100% 0,100% 100%,3px 100%)}
.comp .c-gold .bar{right:calc(-16*var(--u) - 1px)}
.comp .c-gold .bar-top{clip-path:polygon(0 0,100% 0,calc(100% - 16*var(--u)) 100%,0 100%)}
.comp .c-gold .bar-bot{clip-path:polygon(0 0,calc(100% - 16*var(--u)) 0,100% 100%,0 100%)}
.comp .c-gold .bar-top::before{clip-path:polygon(0 0,calc(100% - 3px) 0,calc(100% - 12*var(--u) - 3px) 100%,0 100%)}
.comp .c-gold .bar-bot::before{clip-path:polygon(0 0,calc(100% - 12*var(--u) - 3px) 0,calc(100% - 3px) 100%,0 100%)}
/* Card widths have fractions of a pixel: the red bar covers the seam, so the blue one can never round into it */
.comp .c-red .bar{left:-2px}
.comp .c-red{border-color:#0000}
.card h3{text-align:center;font-size:calc(20*var(--u));font-weight:600;margin-bottom:calc(12*var(--u))}
.card h3 a:hover{text-decoration:underline}
.top{display:grid;grid-template-columns:1fr auto 1fr;gap:calc(10*var(--u));align-items:center;margin-bottom:calc(14*var(--u))}
.sym{width:100%;max-width:calc(90*var(--u));aspect-ratio:1;justify-self:center}
.portrait{width:calc(130*var(--u));height:calc(130*var(--u));border:1px solid #ffffff55}
.pwrap{position:relative}
.rank{position:absolute;right:calc(-26*var(--u));bottom:calc(-10*var(--u));width:calc(78*var(--u));height:auto;filter:drop-shadow(0 2px 4px #000)}
.sym:has(img){background:none;border:0}
.sym img,.wp img{object-fit:contain}
.box{background:#ffffff0d;padding:calc(8*var(--u));margin-bottom:calc(10*var(--u));display:flex;gap:calc(8*var(--u))}
.mem{display:grid;grid-template-columns:repeat(3,1fr);align-content:center;gap:4px;flex:1;border:1px solid #ffffff22;padding:4px}
.mem .slot{aspect-ratio:5/7;border:2px solid #000}
.mem img,.mt-art img{transform:scale(1.07)}
:is(.mem,.mt-art) img[data-full$=".webp"]{transform:scale(1.34)}
.wp{display:grid;gap:4px;width:25%}
.wp .slot{aspect-ratio:1}
.wp .slot:last-child{aspect-ratio:3/2;container-type:inline-size}
.mxw{flex:1;min-width:0;display:grid;grid-template-rows:auto 1fr;gap:8px}
.mx{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.mx .slot,.kit .cell .slot{aspect-ratio:1}
.cell{display:grid;gap:2px;min-width:0;text-align:center;font-size:calc(11*var(--u));font-weight:700}
.res{display:grid;grid-auto-flow:column;grid-template-rows:auto auto;grid-template-columns:1fr 1fr;align-content:center;justify-items:center;gap:2px 4px;padding:calc(4*var(--u));background:#0000002b;font-size:calc(12*var(--u));font-weight:700}
.res .slot{width:100%;max-width:72px;aspect-ratio:1;background:#00000033;border:0}
.res img{object-fit:contain}
.kit{display:grid;grid-template-columns:1.2fr repeat(6,1fr);gap:4px}
.slot{position:relative;display:grid;place-items:center;background:#0000004b;border:1px solid #ffffff30;color:#ffffff66;font-size:11px;overflow:hidden}
.slot img{width:100%;height:100%;object-fit:cover;display:block}
.wp .slot,.mx .slot,.kit .slot{background-image:linear-gradient(135deg,transparent 71%,#ffffff1f 71%,#ffffff0f 100%);background-clip:padding-box}
.mem{background-image:linear-gradient(135deg,transparent 77%,#ffffff24 77%,#ffffff14 100%);background-clip:padding-box;border-color:#ffffff30}
.slot .stars{position:absolute;left:0;bottom:0;height:auto;transform:none}
.wh-bar{position:absolute;top:0;left:0;right:0;line-height:0}
.slot .wh-bar img{height:auto}
/* Starts after the stripes on the left of the bar */
.wh-bar b{position:absolute;inset:0 0 0 20.5%;display:grid;place-items:center;color:#fff;font:700 8cqw/1 "Quantico";white-space:nowrap}
.slot .n{position:absolute;right:0;bottom:0;padding:1px 3px 0 8px;background:#000000b3;clip-path:polygon(8px 0,100% 0,100% 100%,0 100%);color:#fff;font-size:max(8px,calc(10*var(--u)));font-weight:700}
.desc{text-align:justify;font-size:calc(13*var(--u));line-height:1.5;color:#dcdaf0;background:#ffffff0d;padding:calc(12*var(--u));height:calc(240*var(--u));overflow-y:auto}
.tags{position:absolute;left:0;right:0;bottom:-1px;display:flex;justify-content:center;gap:4px;z-index:2}
.tag{position:relative;isolation:isolate;font:800 calc(12*var(--u))/1 "Quantico";letter-spacing:.16em;padding:calc(6*var(--u)) calc(28*var(--u));text-shadow:1px 1px 0 #0009,-1px 1px 0 #0009,1px -1px 0 #0009,-1px -1px 0 #0009;clip-path:polygon(calc(12*var(--u)) 0,calc(100% - 12*var(--u)) 0,100% 100%,0 100%)}
.tag::before{content:"";position:absolute;inset:2px;z-index:-1;clip-path:polygon(calc(11*var(--u)) 0,calc(100% - 11*var(--u)) 0,calc(100% - 1px) 100%,1px 100%)}
.tag.starter{background:#b4b4b9;color:#fff}.tag.starter::before{background:linear-gradient(#4b4b50,#2b2b2f)}
.tag.captain{background:#24dc64;color:#dcffe7}.tag.captain::before{background:linear-gradient(#0f8a3c,#0a5a28)}
.comp .card{cursor:pointer;transition:transform .2s,filter .2s}
.comp .card:hover{transform:translateY(-4px);filter:brightness(1.12)}
.comp.focused .card{visibility:hidden}
html.locked{overflow:hidden}
.stage{position:fixed;inset:0;z-index:20;overflow:hidden;background-color:#05060800;transition:background-color .5s,backdrop-filter .5s}
.stage.open{background-color:#050608d9;backdrop-filter:blur(6px)}
.stage.closing{pointer-events:none}
.fcard{--u:1.15px;position:absolute;left:50%;top:50%;flex:none;z-index:3;transition:transform .5s cubic-bezier(.22,.8,.24,1),filter .5s}
.fcard .desc{height:150px}
.stage:not(.open):not(.closing) .fcard{transition:none}
.fcard:not(.side){box-shadow:0 24px 80px #000c}
.stage.closing .fcard{box-shadow:none}
.fcard.side{z-index:1;cursor:pointer;filter:brightness(.5) saturate(.7)}
.fcard.side:hover,.fcard.side:focus-visible{filter:brightness(.85)}
.ctl{position:absolute;z-index:4;width:44px;height:44px;display:grid;place-items:center;padding:0;background:#000000a6;border:1px solid #ffffff40;border-radius:50%;color:#fff;font:700 24px/1 "Quantico",sans-serif;cursor:pointer;opacity:0;transition:opacity .3s,background-color .2s}
.stage.open .ctl{opacity:1}
.ctl:hover{background:#ffffff33}
.close{top:16px;right:16px}
.ctl.export{top:16px;right:70px;width:auto;padding:0 16px;border-radius:22px;font-size:14px}
.ctl.export:disabled{cursor:wait}
.prev,.next{top:50%;margin-top:-22px}
.prev{left:16px}.next{right:16px}
.assets{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:start}
.atabs{display:grid;gap:6px;position:sticky;top:20px}
.atabs a{padding:9px 14px;background:var(--panel);border:1px solid var(--line);border-radius:4px;font-size:14px;font-weight:600}
.atabs a:hover{background:#4a4a4f}
.atabs a.on{background:#d8d8dc;border-color:#d8d8dc;color:#0b0b0c}
.mtable{width:100%;table-layout:fixed;border-collapse:collapse;background:var(--panel)}
.mtable th{position:sticky;top:0;z-index:1;width:92px;padding:0;background:#222224;border-bottom:1px solid #5a5a60}
.mtable th:first-child{width:auto}
.mtable th button{display:flex;align-items:center;justify-content:flex-end;gap:4px;width:100%;min-height:44px;padding:0 14px;border:0;background:none;color:var(--txt);font:700 13px "Quantico";cursor:pointer}
.mtable th:first-child button{justify-content:flex-start}
.mtable th button:hover{background:#4a4a4f}
.mtable th button:focus-visible{outline-offset:-2px}
.mtable th i{width:10px;font-size:10px;font-style:normal}
.mtable tbody tr{position:relative;border-bottom:1px solid var(--line)}
.mtable tbody tr:hover{background:#222224}
.mtable td{padding:6px 14px;font-size:15px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.mtable td:first-child{padding-left:10px;text-align:left}
.mt-name{display:flex;align-items:center;gap:12px;min-width:0}
.mt-name>div:last-child{min-width:0}
.mt-art{flex:none;width:50px}
.mt-art .slot{aspect-ratio:5/7;border:2px solid #000}
.mt-art.wpn-art,.mt-art.cub-art{width:84px}
@media(max-width:560px){.mt-art.wpn-art,.mt-art.cub-art{width:64px}}
/* Same border as the icons of the Weapon Resonance page */
.mt-art:is(.wpn-art,.cub-art) .slot{border:1px solid #ffffff30}
.mt-art.wpn-art .slot{aspect-ratio:1}
.mt-art.wpn-art img{transform:none;object-fit:contain}
.mt-art.wpn-art .stars{height:auto}
.mt-art.cub-art .slot{aspect-ratio:5/6}
.mt-art.cub-art img{transform:none}
.sortbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:8px;font-size:13px;color:var(--mute)}
.tool.on{background:#d8d8dc;border-color:#d8d8dc;color:#0b0b0c}
.tool.on:hover{background:#d8d8dc}
.filters{display:grid;gap:8px;margin-bottom:18px}
.filter-bar{display:flex;flex-wrap:wrap;gap:8px}
.filter-bar .tool{margin-bottom:10px}
.filter-toggle{display:none}
.filter{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px}
.filter>span{align-self:center;width:64px;font-size:13px;color:var(--mute)}
.tool.chip{display:grid;justify-items:center;align-content:center;gap:5px;min-width:78px;padding:8px 10px;font-size:12px}
/* The icons are white, so a selected button stays dark */
.tool.chip.on,.tool.chip.on:hover{background:#3a3a40;border-color:#d8d8dc;color:#fff}
.chip-icon{display:grid;place-items:center;width:32px;height:32px}
.chip-icon img{width:32px;height:32px;object-fit:contain}
.chip-icon b{font-size:26px;line-height:1}
.mt-name a{display:block;overflow-wrap:anywhere}
.mt-name small a{display:inline;position:relative;z-index:1;text-decoration:underline}
.mt-name small a::after{content:none}
.used{max-width:1000px;margin-top:22px}
.used h2{margin-bottom:10px;font-size:16px;font-weight:700}
.used-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:8px}
.used-list a{display:flex;align-items:center;gap:10px;min-width:0;padding:8px;background:var(--panel);border:1px solid var(--line)}
.used-list a:hover{background:#222224;border-color:#5a5a60}
.used-list img{flex:none;width:44px;height:44px;object-fit:cover}
.used-list b{display:block;font-size:14px}
.used-list small{display:block;margin-top:2px;font-size:12px;color:var(--mute)}
.site-search{margin-bottom:10px}
#searchBox{width:100%;padding:9px 12px;background:#0b0809;border:1px solid var(--side-line);border-radius:4px;color:var(--txt);font:600 14px "Quantico"}
#searchBox::placeholder{color:var(--mute)}
#searchBox:focus{outline:0;border-color:var(--red)}
#searchResults:not([hidden]){display:grid;gap:2px;margin-top:6px}
nav a.sr{justify-content:flex-start;align-items:center;gap:10px;padding:6px 8px;font-size:14px;font-weight:400}
.sr img,.sr-art{flex:none;width:34px;height:34px;object-fit:cover}
.sr-art{background:#ffffff14}
.sr b{display:block;font-weight:700;line-height:1.2}
.sr small{display:block;margin-top:1px;font-size:11px;color:var(--mute)}
.sr-none{padding:6px 8px;font-size:13px;color:var(--mute)}
#sideNav{display:flex;flex-direction:column;flex:1 0 auto}
.nav-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--side-line)}
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:14px;max-width:900px}
.contact-card{padding:20px 22px;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--red)}
.legal{max-width:900px;margin-top:14px;font-size:12px;line-height:1.5;color:var(--mute)}
.contact-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.contact-name{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px}
.contact-name .tool{margin-left:auto}
.contact-name strong{font-size:26px;overflow-wrap:anywhere}
.contact-card ul{display:grid;gap:10px;margin-top:14px;padding:0;list-style:none;font-size:14px;line-height:1.5;color:#dcdaf0}
.contact-card a{color:#fff;text-decoration:underline}
.contact-card li{display:flex;align-items:center;gap:12px;min-width:0}
.credit-art{display:grid;place-items:center;flex:none;width:60px;height:60px;overflow:hidden;background:var(--side-on);border-radius:50%;color:#fff;font-size:22px;font-weight:700}
.credit-art img{width:100%;height:100%;object-fit:cover}
.credit-art.big{width:72px;height:72px}
.contact-card a.contact-kofi{display:block;margin-top:16px;text-align:center;text-decoration:none}
/* BC calculator */
#calc{max-width:1640px}
.calc-layout{display:grid;gap:0 24px}
.calc-main{container:calc-main/inline-size;min-width:0}
.calc-side{min-width:0}
#calc input[type=number],#calc select{width:100%;min-width:0;height:38px;padding:0 10px;background:var(--bg);border:1px solid var(--line);border-radius:4px;color:var(--txt);font:600 15px "Quantico"}
#calc select{cursor:pointer}
.calc-card{padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--red)}
.calc-patch{padding:0}
.calc-patch+.calc-patch{margin-top:8px}
.calc-patch summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px;padding:12px 16px 12px 34px;position:relative;cursor:pointer;list-style:none}
.calc-patch summary::-webkit-details-marker{display:none}
.calc-patch summary::before{content:"▸";position:absolute;left:14px;top:14px;color:var(--mute)}
.calc-patch[open] summary::before{content:"▾"}
.calc-patch summary:hover{background:#1c1c1e}
.calc-patch summary h3{font-size:16px}
.calc-patch summary p{margin-top:2px;font-size:12px}
/* Fixed columns, so dates and days start at the same point on every row. The frame goes last because not every patch has one */
.calc-meta{display:grid;grid-template-columns:186px 56px;gap:0 10px}
.calc-meta span:last-child{grid-column:1/-1}
.calc-meta span:empty{display:none}
@container calc-main (min-width:1160px){.calc-meta{grid-template-columns:186px 56px auto}.calc-meta span:last-child{grid-column:auto}}
@container calc-main (min-width:480px) and (max-width:980px){.calc-meta{grid-template-columns:186px 56px auto}.calc-meta span:last-child{grid-column:auto}}
.calc-patch[open] summary{grid-template-columns:minmax(0,1fr)}
.calc-patch[open] .calc-sum{display:none}
.calc-body{position:relative;padding:0 20px 18px}
/* Fixed columns, so the same currency lines up on every row */
.calc-sum{display:grid;grid-template-columns:56px repeat(7,84px);gap:4px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.calc-sum>span{display:flex;align-items:center;gap:4px;min-width:0;min-height:32px;padding:3px 5px;background:#0f0f10;border:1px solid var(--line);border-radius:4px}
.calc-sum .calc-icon{width:20px;height:20px}
.calc-sum .short{color:#ff6b6b}
.calc-tabs{display:flex;gap:8px;margin-bottom:14px}
.calc-bar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-bottom:14px;padding:8px 14px;background:#0f0f10;border:1px solid var(--line);border-bottom:2px solid var(--red)}
.calc-bar-item{display:flex;align-items:center;gap:10px;min-width:0}
.calc-bar-item .calc-icon{width:32px;height:32px}
.calc-bar-item output{display:block;font-size:17px;font-weight:700}
.calc-bar-item output.short{color:#ff6b6b}
.calc-bar-item small{display:block;font-size:11px;color:var(--mute)}
.calc-fold{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:10px;font-size:13px;color:var(--mute)}
.calc-fold span{display:flex;gap:8px}
.calc-step{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:4px}
.calc-step button{height:38px;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:4px;color:var(--txt);font:700 18px "Quantico";cursor:pointer}
.calc-step button:hover{background:#4a4a4f}
#calc .calc-step input{padding:0 2px;text-align:center;appearance:textfield;-moz-appearance:textfield}
.calc-step input::-webkit-inner-spin-button,.calc-step input::-webkit-outer-spin-button{display:none}
.calc-copy{margin-top:12px}
.calc-more>summary{display:flex;align-items:center;gap:8px;margin:30px 0 14px;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#c4c4ca;cursor:pointer;list-style:none}
.calc-more>summary::-webkit-details-marker{display:none}
.calc-more>summary::before{content:"▸";color:var(--mute)}
.calc-more[open]>summary::before{content:"▾"}
.calc-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.calc-head+.calc-start{margin-top:14px}
.calc-head h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:20px}
.calc-head p{margin-top:4px;font-size:13px;color:var(--mute)}
.calc-head a{color:var(--txt);text-decoration:underline}
.calc-tag{padding:2px 7px;background:var(--side-on);border-radius:3px;color:#fff;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.calc-tag.guess{background:#3a3a40}
.calc-rank{position:absolute;top:-50px;right:20px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute)}
#calc .calc-rank select{width:62px}
.calc-rank+.calc-label{margin-top:4px}
.calc-label{margin:18px 0 8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.calc-rc-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}
.calc-rc-row b{font-size:15px}
.calc-rc-row small{font-size:12px;color:var(--mute)}
.calc-rc{display:flex;align-items:center;gap:8px;padding:3px 12px 3px 6px;background:#0f0f10;border:1px solid var(--line);border-radius:4px;font-size:18px;font-weight:700}
.calc-rc .calc-icon{width:32px;height:32px}
.calc-hint{margin:-4px 0 8px;font-size:12px;color:var(--mute)}
.calc-money{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.calc-coin{display:grid;grid-template-rows:44px auto 1fr;justify-items:center;align-items:center;gap:4px;min-width:0;padding:10px 6px;background:#0f0f10;border:1px solid var(--line);border-radius:4px;font-size:15px;text-align:center}
.calc-coin small{font-size:11px;line-height:1.2;color:var(--mute)}
.calc-coin b,.calc-coin output{font-weight:700;overflow-wrap:anywhere}
.calc-coin output.short{color:#ff6b6b}
#calc .calc-coin input{padding:0 4px;text-align:center}
.calc-icon{display:block;flex:none;width:44px;height:44px}
.calc-icon img{display:block;width:100%;height:100%;object-fit:contain}
.calc-passes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.calc-pass{display:grid;grid-template-columns:44px minmax(0,1fr) 58px;align-items:center;gap:10px;min-width:0;padding:8px 10px;background:#0f0f10;border:1px solid var(--line);border-radius:4px;font-size:13px;color:#dcdce0}
.calc-pass small{display:block;margin-top:2px;font-size:11px;color:var(--mute)}
.calc-pass{cursor:pointer}
.calc-pass input{justify-self:end;width:22px;height:22px;margin:0 8px 0 0;accent-color:var(--red)}
.calc-fields{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.calc-field{display:grid;align-content:start;gap:5px;min-width:0;font-size:13px;color:#dcdce0}
.calc-field small{font-size:11px;color:var(--mute)}
.calc-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.calc-check{display:flex;align-items:flex-start;gap:9px;font-size:14px;cursor:pointer}
.calc-check input{flex:none;width:18px;height:18px;margin-top:1px;accent-color:var(--red)}
.calc-check small{display:block;margin-top:2px;font-size:12px;color:var(--mute)}
.calc-total{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.calc-total output{font-size:28px;font-weight:700}
.calc-total b{font-size:18px}
.calc-total small{flex-basis:100%;font-size:13px;color:var(--mute)}
.calc-total a{color:var(--txt);text-decoration:underline}
.calc-pull{grid-template-columns:repeat(2,minmax(0,1fr))}
.calc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.calc-stat{display:grid;align-content:start;gap:4px;min-width:0;padding:12px;background:#0f0f10;border:1px solid var(--line);border-radius:4px}
.calc-stat b{font-size:24px;line-height:1.15}
.calc-stat small{font-size:12px;line-height:1.3;color:var(--mute)}
.calc-info{display:grid;gap:14px}
.calc-info>div{padding-left:12px;border-left:2px solid var(--red)}
.calc-info dt{font-size:14px;font-weight:700}
.calc-info dd{margin:3px 0 0;font-size:13px;line-height:1.5;color:var(--mute)}
.calc-info a{color:var(--txt);text-decoration:underline}
.calc-text{font-size:13px;line-height:1.5;color:var(--mute)}
.calc-margins{display:grid;gap:6px;margin:12px 0}
.calc-margin{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:10px;padding:8px 10px;background:#0f0f10;border:1px solid var(--line);border-left:3px solid var(--tone);border-radius:4px;font-size:13px;line-height:1.35}
.calc-margin b{font-size:16px;color:var(--tone)}
.calc-margin.low{--tone:#6fcf8e}.calc-margin.mid{--tone:#e6bd52}.calc-margin.high{--tone:#ff6b6b}
.calc-pull-page{display:grid;gap:14px}
.calc-pull-page[hidden]{display:none}
@container calc-main (max-width:980px){.calc-patch summary{grid-template-columns:minmax(0,1fr)}.calc-sum{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}}
@media(max-width:760px){#calc{padding-bottom:64px}.calc-bar{position:fixed;top:auto;left:0;right:0;bottom:0;flex-wrap:nowrap;gap:12px;margin:0;padding:6px 14px calc(6px + env(safe-area-inset-bottom));border-width:2px 0 0;border-top-color:var(--red);border-bottom:0}.calc-bar-item .calc-icon{width:26px;height:26px}.calc-bar-item{flex:1;gap:6px}.calc-bar-item output{font-size:15px}.calc-bar-item small{font-size:10px;line-height:1.2}}
/* Wide screens: the explanations sit beside the patches and stay in view */
@media(min-width:1680px){.calc-layout{grid-template-columns:minmax(0,1fr) 360px}.calc-side{position:sticky;top:78px;align-self:start;max-height:calc(100vh - 90px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--red) #0000}.calc-side h2.grp:first-child{margin-top:0}}
@media(min-width:1200px){.calc-pull-page{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}}
@media(min-width:900px) and (max-width:1679px){.calc-info{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Black Cards take two columns, so the seven currencies always fill their rows */
@media(max-width:1100px){.calc-money{grid-template-columns:repeat(4,minmax(0,1fr))}.calc-coin:first-child{grid-column:span 2}.calc-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.calc-passes,.calc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.calc-card{padding:14px}.calc-money,.calc-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.calc-checks,.calc-passes{grid-template-columns:minmax(0,1fr)}.calc-patch{scroll-margin-top:68px}.calc-patch summary{padding:10px 10px 10px 28px}.calc-patch summary::before{left:12px;top:12px}.calc-sum{gap:4px;font-size:11px}.calc-sum>span{gap:3px;min-height:26px;padding:2px 3px}.calc-sum .calc-icon{width:16px;height:16px}.calc-money{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.calc-coin{display:flex;align-items:center;gap:3px;padding:4px 3px;font-size:11px}.calc-coin .calc-icon{width:18px;height:18px}.calc-coin small{display:none}.calc-start .calc-money{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.calc-start .calc-coin{gap:6px;padding:4px 6px}.calc-start .calc-icon{width:24px;height:24px}#calc .calc-start input{height:34px}.calc-pass{grid-template-columns:32px minmax(0,1fr) 58px;gap:8px;padding:5px 8px}.calc-pass .calc-icon{width:32px;height:32px}.calc-copy{width:100%}.calc-fold p,[data-calc-fold=open]{display:none}.calc-fold{justify-content:flex-end}.calc-rank{position:static;margin-bottom:12px}.calc-body{padding:0 14px 14px}.calc-stat b{font-size:20px}#calc input[type=number],#calc select{font-size:16px}}
.mt-name a::after{content:"";position:absolute;inset:0}
.mt-name small{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--mute)}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.acard{padding:12px;background:var(--panel);border:1px solid var(--line)}
.acard h3{margin-top:10px;font-size:16px;font-weight:700}
.acard p{margin-top:2px;font-size:12px;color:var(--mute)}
a.acard{display:block}
a.acard:hover{background:#222224;border-color:#5a5a60}
a.slot:hover{border-color:#fff}
.backs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:12px}
.back-build{padding:7px 12px;background:#d8d8dc;border-radius:4px;color:#0b0b0c;font-size:13px;font-weight:700}
.back{font-size:13px;color:var(--mute)}
.back:hover{color:var(--txt)}
.detail{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:20px;align-items:start;max-width:1000px}
.wpn-detail{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
.wpn-detail .slot{aspect-ratio:1}
.wpn-detail img{object-fit:contain}
.detail .fx{padding:16px;background:var(--panel);border:1px solid var(--line)}
.detail .fx h2{font-size:14px;font-weight:700;color:#fff}
.detail .fx h2:not(:first-child){margin-top:14px}
.detail .fx p,.skills .fx p{margin-top:4px;font-size:14px;line-height:1.6;color:#dcdaf0}
.detail .fx .note{font-size:12px;color:var(--mute)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px;margin-bottom:12px}
.stats div{padding:8px 10px;background:#ffffff0d;border-left:2px solid var(--red)}
.stats dt{font-size:12px;font-weight:700;color:var(--mute)}
.stats dd{margin:2px 0 0;font-size:20px;font-weight:700}
.sub a{text-decoration:underline}
.cub-skill{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:start}
.cub-skill+.cub-skill{margin-top:14px}
.cub-skill .slot{aspect-ratio:1}
.skills{display:grid;gap:12px;max-width:1000px}
.skills .fx{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:start;padding:16px;background:var(--panel);border:1px solid var(--line)}
.skills .slot{aspect-ratio:1}
.skills h2{margin-top:2px;font-size:16px;font-weight:700}
.skills .fx p{white-space:pre-line}
.skills .fx .kind{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.char-detail{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
.char-detail>.slot{aspect-ratio:1}
.char-links{display:grid;gap:10px}
.builds{display:grid;gap:10px;max-width:1000px}
a.build{display:flex;align-items:center;justify-content:space-between;gap:14px}
.build h3{margin-top:2px}
.b-tx{min-width:0}
.build .b-mem{margin-top:6px;color:var(--txt)}
.b-mates{display:flex;flex:none;gap:6px}
.b-mates .slot{width:64px;height:64px}
a.wpn{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 12px;align-items:center;align-content:start}
.wpn .slot{aspect-ratio:1}
.wpn h3{margin-top:0}
.wpn img{object-fit:contain}
.empty{color:var(--mute);padding:40px;border:1px dashed var(--line);text-align:center}
@media(max-width:760px),(hover:none) and (max-height:500px){.assets,.detail{grid-template-columns:minmax(0,1fr)}.atabs{display:flex;flex-wrap:wrap;position:static}body{flex-direction:column}#main{--pad:18px}
#side{width:100%;height:auto;position:sticky;top:0;z-index:10;display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:8px 14px;border-right:0;border-bottom:1px solid var(--side-line);overflow:visible}
.logo{padding:0;font-size:24px}
#menuBtn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:6px;background:none;color:var(--txt);font-size:24px;cursor:pointer}
#side nav{display:none;position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - 61px);overflow-y:auto;padding:8px 14px 14px;background:#110c0d;border-bottom:1px solid var(--side-line)}
#side.open nav{display:block}
.nav-foot{margin-top:12px}
.contact{grid-template-columns:minmax(0,1fr)}
.filter-toggle{display:block}
.filters{display:none}
.filters.open{display:grid}
.comp{flex-direction:column;align-items:center;gap:30px}
.mtable th{top:61px}
.psub{gap:12px;padding:12px}
.psub button{min-height:48px;padding:12px 14px;font-size:15px}
.b-mates .slot{width:48px;height:48px}
.card{--u:1px;flex:none;width:100%}
.comp .card{cursor:default}
.comp .card:hover{transform:none;filter:none}
.comp .card .bar{left:-1px;right:-1px;clip-path:none}
.comp .card .bar::before{clip-path:none}
.card .box:not(.kit){flex-wrap:wrap}
.card .mem .slot.named{padding:0;font-size:9px;writing-mode:horizontal-tb;place-items:center}
.card .wp{width:32%}
.card .mxw{flex:0 0 100%;grid-template-rows:none;grid-template-columns:1.4fr 1fr}
.desc{height:auto}
.desc:empty{display:none}
.hero{min-height:190px;padding:24px 20px}.hero-art{width:100%}.hero-track a{width:130px}.hero::after{background:linear-gradient(90deg,#101012e6 30%,#10101299 100%)}h1{font-size:28px}}
@media(max-width:1000px){.home-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row;gap:8px}.home-label{justify-content:center;font-size:11px;letter-spacing:.04em;text-align:center}.tile-gap{min-height:0}}
@media(max-width:560px){.mtable th{width:50px}.mtable th button{justify-content:center;gap:1px;padding:0 2px;font-size:12px}.mtable th i{width:8px;font-size:8px}.mtable td{padding:5px 2px;font-size:13px;text-align:center}.mtable td:first-child{padding-left:6px}.mt-name{gap:8px}.mt-art{width:38px}.mt-name small{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.hero-track{animation:none}.hero-art{overflow-x:auto}}
/* From this width the notice fits on one line, inside the empty space at the top of #main, so it moves nothing below it */
@media(min-width:1360px){#main{position:relative}#noticeBox{position:absolute;inset:0 0 auto}.notice{height:30px;margin:0;padding:0 14px;font-size:12px}}
@media(min-width:1540px){.notice{font-size:14px}}
/* Meta timeline */
#timeline{max-width:1640px}
.tl-summary{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px;margin-bottom:12px}
.tl-records{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tl-rank{min-width:0;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:4px}
.tl-rank summary,.tl-averages summary{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);cursor:pointer}
.tl-rank[open] summary{margin-bottom:6px}
.tl-averages[open] summary{margin-bottom:12px}
.tl-rank ol{display:grid;gap:4px;margin:0;padding:0;counter-reset:rank;list-style:none}
.tl-rank li{display:grid;grid-template-columns:16px 34px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:34px;font-size:13px;counter-increment:rank}
.tl-rank li::before{content:counter(rank);font-weight:700;color:var(--mute)}
.tl-rank li:first-child::before{color:var(--red)}
.tl-rank li img{display:block;width:34px;height:34px;padding:0;object-fit:cover;background:#0f0f10;border:1px solid var(--line)}
.tl-rank li img[data-full*="energy type"],.tl-rank li img[data-full*="effects"]{padding:6px;object-fit:contain}
.tl-rank b{overflow:hidden;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.tl-rank em{font-style:normal;font-weight:700;white-space:nowrap}
.tl-rank li:first-child em{color:#fff}
.tl-rank li:not(:first-child) em{color:var(--mute)}
.tl-averages{align-content:start;padding:10px 12px;background:var(--panel);border:1px solid var(--line);border-radius:4px}
.tl-average+.tl-average{margin-top:14px}
.tl-average{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:4px 8px;align-items:center;font-size:13px}
.tl-average img{width:24px;height:24px;object-fit:contain}
.tl-average small{display:block;font-size:11px;color:var(--mute)}
.tl-average b{font-size:15px}
.tl-average i{grid-column:1/-1;display:block;height:4px;background:var(--red);border-radius:2px}
.tl-rule{margin-bottom:14px;font-size:13px;color:var(--mute)}
.tl-chart{display:grid;gap:10px}
.tl-row{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center;min-height:46px}
.tl-role{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mute)}
.tl-role img{width:20px;height:20px;object-fit:contain}
.tl-track{position:relative;height:46px;margin-right:46px}
.tl-track>i{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.tl-track>i.mark{background:#e6bd5259}
.tl-marks{min-height:36px}
.tl-marks .tl-track{height:36px}
.tl-marks b{position:absolute;top:2px;transform:translateX(-50%);padding:0 4px;background:var(--bg);font-size:10px;font-weight:400;color:#e6bd52;white-space:nowrap}
.tl-marks b.low{top:18px}
.tl-free{position:absolute;left:-2px;bottom:-3px;z-index:2;padding:0 3px;background:#6fcf8e;border-radius:2px;color:#0b0b0c;font:700 9px/12px "Quantico";text-transform:uppercase}
.tl-item .tl-free{position:static;display:inline-block;margin-left:6px;vertical-align:1px}
.tl-tools{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tl-tools [data-tl-now]{margin-left:auto}
.tl-chips{display:flex;flex-wrap:wrap;gap:4px}
.tl-chips span{padding:2px 6px;background:#0f0f10;border:1px solid var(--line);border-radius:3px;font-size:11px;color:#e6bd52}
.tl-watch{grid-column:1/-1}
.tl-watch ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px}
.tl-watch li:not(:first-child) em{color:var(--txt)}
.tl-group:has(.tl-reign[data-line=Attacker]:hover) .tl-reign:not([data-line=Attacker]),.tl-group:has(.tl-reign[data-line=Tank]:hover) .tl-reign:not([data-line=Tank]),.tl-group:has(.tl-reign[data-line=Support]:hover) .tl-reign:not([data-line=Support]),.tl-group:has(.tl-reign[data-line=Annihilator]:hover) .tl-reign:not([data-line=Annihilator]),.tl-group:has(.tl-reign[data-line=Observer]:hover) .tl-reign:not([data-line=Observer]){opacity:.3}
.tl-link{position:absolute;top:41px;z-index:2;width:2px;margin-left:-1px;background:var(--c)}
.tl-link::before{content:"";position:absolute;left:-3px;top:-3px;width:8px;height:8px;background:var(--c);border-radius:50%}
.tl-role em{font-style:normal;color:var(--mute)}
.tl-years{min-height:22px;position:sticky;top:0;z-index:4;background:var(--bg)}
.tl-years .tl-track{height:22px}
.tl-years b{position:absolute;top:3px;transform:translateX(-50%);font-size:12px;color:var(--mute)}
.tl-group{padding:8px 12px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--c)}
.tl-group h2{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:15px;color:var(--c)}
.tl-group h2 img{width:22px;height:22px;object-fit:contain}
.tl-reign{position:absolute;top:5px;height:36px;background:color-mix(in srgb,var(--c) 24%,transparent);border-left:2px solid var(--c);color:var(--txt)}
.tl-reign.now{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 50%,transparent),color-mix(in srgb,var(--c) 18%,transparent))}
.tl-reign:hover{z-index:3;background:color-mix(in srgb,var(--c) 45%,transparent)}
.tl-reign img{position:absolute;left:-2px;top:0;width:36px;height:36px;object-fit:cover;background:#0f0f10;border:1px solid var(--c)}
.tl-reign:hover img{z-index:3}
.tl-reign span{position:absolute;left:42px;right:2px;top:3px;overflow:hidden;font-size:12px;font-weight:700;line-height:1.25;white-space:nowrap}
.tl-reign small{display:block;overflow:hidden;font-size:10px;font-weight:400;text-overflow:ellipsis;color:#d6d6da}
.tl-list{display:none;gap:8px}
.tl-fold{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--c)}
.tl-fold summary{display:flex;align-items:center;gap:8px;padding:10px 12px;font-weight:700;color:var(--c);cursor:pointer}
.tl-fold summary img{width:22px;height:22px;object-fit:contain}
.tl-lane{display:flex;align-items:center;gap:6px;padding:8px 12px 4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.tl-lane img{width:18px;height:18px;object-fit:contain}
.tl-item{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:8px;padding:4px 12px;color:var(--txt)}
.tl-item>img{width:36px;height:36px;object-fit:cover;border:1px solid var(--line)}
.tl-item.now>img{border-color:var(--c)}
.tl-item b{display:block;font-size:13px}
.tl-item small{display:block;font-size:11px;color:var(--mute)}
.tl-by{color:var(--c)!important}
.tl-item em{font-size:12px;font-style:normal;font-weight:700;white-space:nowrap}
.tl-item.now em{color:var(--c)}
@media(max-width:1000px){.tl-summary{grid-template-columns:minmax(0,1fr)}.tl-row{grid-template-columns:96px minmax(0,1fr)}.tl-reign span{display:none}}
@media(max-width:760px){.tl-chart{display:none}.tl-list{display:grid}.tl-records,.tl-watch ol{grid-template-columns:minmax(0,1fr)}.tl-tools [data-tl-now]{margin-left:0}}
/* Small phones: the watch value drops under the name, so names stay whole */
@media(max-width:400px){.tl-watch li{grid-template-columns:16px 34px minmax(0,1fr);gap:0 8px}.tl-watch li::before{grid-row:span 2}.tl-watch li img{grid-row:span 2}.tl-watch li em{grid-column:3;font-size:12px}}
/* 404.html */
.lost{align-items:center;justify-content:center;text-align:center}
.lost main{flex:none}
.lost .tool{display:inline-block;text-decoration:none}