/* yoggin · deadlock — one stylesheet for every page. Dark only, the companion's green.
   Layout copied from the approved mockup (mockups/overview-v2.html, 2026-10-14): full side menu,
   poster header with the ID card, chalkboard cards, grainy panels, big match rows. No build step. */
:root{--bg:#08070a;--side:#0c0a0e;--panel:#0f0d12;--panel2:#15121a;--panel-line:#221e2a;--chip:rgba(226,221,214,.07);--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --fg:#e2ddd6;--dim:#a89c91;--mute:rgba(226,221,214,.45);
  /* THE accent: our green today. Change these two lines to re-colour the whole site. */
  --accent:#a39c92;--accent-ink:#0d0c0a;
  /* good / bad numbers ONLY (win rates, deltas). Fixed on purpose: a new accent never recolours a win rate. */
  --good:#3fd57f;--bad:#f87171;--ink:#120f0c;
  --green:var(--accent);--green-ink:var(--accent-ink);--green-soft:color-mix(in srgb,var(--accent) 55%,#fff);--green-dim:color-mix(in srgb,var(--accent) 45%,#000);--red:#f87171;--blue:#7dd3fc;--gold:#f2c94c;
  --chalk:#f3f0e7;--chalk-accent:color-mix(in srgb,var(--accent) 50%,#fff);--board:#161c19;--frame1:#2a1f16;--frame2:#3d2d20;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;--body:"Barlow Semi Condensed","Segoe UI",system-ui,sans-serif;--hand:"Caveat","Segoe Print",cursive;
  --wide:"Archivo","Arial Black",Impact,sans-serif;--sans:"Geist","Segoe UI",system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,Consolas,monospace;--brush:"Caveat Brush","Caveat","Segoe Print",cursive;
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --chalkfx:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='.012 .02' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .9 0 0 0 .10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23c)'/></svg>");
  color-scheme:dark}
*{box-sizing:border-box}
html{scroll-padding-top:12px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.mute{color:var(--mute)}.mono{font-size:12px;color:var(--mute)}
.soon{font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:3px;padding:1px 5px;line-height:1.3;margin-left:auto}

/* ── the side menu (shell.js) ─────────────────────────────────────────────────────── */
.side{position:fixed;top:0;bottom:0;left:0;width:272px;background:var(--side) var(--noise);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:40;transition:width .18s,transform .2s}
.side .top{display:flex;align-items:center;gap:10px;padding:18px 16px 8px}
.side .brand{display:flex;align-items:center;gap:10px;min-width:0}
.side .mark{width:36px;height:36px;flex:none;object-fit:contain}
.side .t b{font-family:"Limelight",var(--display);font-weight:400;font-size:19px;letter-spacing:.04em;text-transform:lowercase;line-height:1;display:block}
.side .t small{display:inline-block;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;margin-top:4px;background:var(--green);color:var(--green-ink);padding:2px 6px 1px;border-radius:2px}
.side .col{margin-left:auto;width:26px;height:26px;border:1px solid var(--line2);border-radius:6px;display:grid;place-items:center;color:var(--dim);font-size:15px;flex:none}
.side .sq{margin:8px 14px 6px;height:38px;border:1px solid var(--line2);border-radius:8px;background:rgba(255,255,255,.03);display:flex;align-items:center;gap:8px;padding:0 10px;color:var(--mute)}
.side .sq svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
.side .sq input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--fg);font:inherit;font-size:13.5px}
.side .sq input::placeholder{color:var(--mute)}
.side nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 10px 10px;scrollbar-width:thin}
.side .lab{font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding:16px 10px 6px;white-space:nowrap}
.side .it{position:relative;isolation:isolate;display:flex;align-items:center;gap:11px;padding:9px 10px;color:var(--fg);font-weight:600;font-size:14.5px;white-space:nowrap;transition:color .12s}
.side .it svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:color .12s}
.side .it .l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.side .it svg.ch{width:14px;height:14px;stroke-width:2;color:var(--mute);transition:transform .22s ease}
.side .it[aria-expanded=true] svg.ch{transform:rotate(180deg)}
/* menu states, after their menu: pointing at an entry or opening a group puts a slanted dark plate behind it;
   the page you are on gets a torn brush strip in our accent, with dark ink */
.side .it:before,.side .mgrp a:before{content:"";position:absolute;inset:0 -4px;z-index:-1;opacity:0;transition:opacity .12s;
  background:rgba(255,255,255,.06);clip-path:polygon(1.5% 0,100% 0,98.5% 100%,0 100%)}
.side .it:hover:before,.side .it.grp[aria-expanded=true]:before,.side .mgrp a:hover:before{opacity:1}
.side .it.grp[aria-expanded=true] svg:not(.ch){color:var(--accent)}
.side .it.on,.side .mgrp a.on{color:var(--accent-ink)}
.side .it.on:before,.side .mgrp a.on:before{opacity:1;background:var(--accent);
  clip-path:polygon(0 14%,3% 4%,22% 9%,41% 1%,63% 7%,84% 0,100% 6%,98% 48%,100% 90%,79% 97%,57% 92%,34% 100%,13% 94%,1% 100%,2% 56%)}
/* a group's pages fold open: the height animates, then the names fade in */
.side .mgrp{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s ease}
.side .mgrp.open{grid-template-rows:1fr}
.side .mgrp>div{overflow:hidden;padding-left:30px}
.side .mgrp a{position:relative;isolation:isolate;display:block;margin:2px 0;padding:7px 12px;font-size:13.5px;font-weight:500;color:var(--dim);white-space:nowrap;opacity:0;transition:opacity .15s,color .12s}
.side .mgrp.open a{opacity:1;transition-delay:.07s,0s}
.side .mgrp a:hover{color:var(--fg)}
.side .bot{padding:12px 14px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.side .btn{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border-radius:8px;font-family:var(--display);font-weight:800;font-size:14.5px;letter-spacing:.1em;text-transform:uppercase;padding:0 10px;white-space:nowrap}
.side .btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;flex:none}
/* the Discord link under Get the companion (his yes 10-22): quiet, the logo alone when the menu is folded */
.side .dsc{display:flex;align-items:center;justify-content:center;gap:8px;height:30px;color:var(--mute);font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.side .dsc svg{width:16px;height:16px;fill:currentColor;flex:none}.side .dsc:hover{color:var(--fg)}
.side .btn.g{background:var(--green);color:var(--green-ink)}.side .btn.o{background:none;border:1px solid var(--line2);color:var(--dim)}.side .btn.me{color:var(--green);border-color:var(--green)}
.side .btn.me.on{background:var(--green);color:var(--green-ink)}
.main{margin-left:272px;padding:34px 28px 60px;max-width:1360px;transition:margin-left .18s}
.topbar,.backdrop{display:none}
/* collapsed to a rail */
html.rail .side{width:56px}
html.rail .side .t,html.rail .side .sq,html.rail .side .lab,html.rail .side .it .l,html.rail .side .it .ch,html.rail .side .mgrp,html.rail .side .btn .l,html.rail .side .dsc .l,html.rail .side .soon{display:none}
html.rail .side .top{justify-content:center;padding-inline:0;flex-wrap:wrap;gap:8px}
html.rail .side .col{margin:0}
html.rail .side .it{justify-content:center;padding:11px 0}
html.rail .side .btn{padding:0;width:42px;margin:0 auto}
html.rail .main{margin-left:56px}

/* ── shared small things ───────────────────────────────────────────────────────────── */
.crumb{font-size:13px;color:var(--mute);margin-bottom:12px}.crumb b{color:var(--dim);font-weight:500}
.chip{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:7px 15px;color:var(--dim);background:var(--chip);border:0;border-radius:0;white-space:nowrap}
.chip:hover{color:var(--fg)}
.chip.on{background:var(--green);color:var(--green-ink)}
.chip.sel{border:1px solid var(--line2);background:var(--panel);margin-left:8px;max-width:180px}
.panel{background:var(--panel) var(--noise);border:1px solid var(--panel-line);border-radius:12px;padding:16px;margin-bottom:16px;min-width:0}
.panel .hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:12px;flex-wrap:wrap}
.panel .hd span+span{color:var(--mute)}
.panel .hd .sp{flex:1}
.panel .hd a{color:var(--dim);letter-spacing:.08em}
.plink{display:block;margin-top:10px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.plink:hover{color:var(--green)}
.more{display:block;width:100%;text-align:center;padding:12px;font-family:var(--display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12.5px;color:var(--dim);border:1px dashed var(--line2);border-radius:10px;margin-top:4px}
.more:hover{color:var(--green);border-color:var(--green-dim)}
.empty{padding:22px 16px;color:var(--mute);font-size:13.5px}
.skel{color:var(--mute);font-size:13px;padding:14px 4px}
.note{font-size:12.5px;color:var(--mute);margin-top:18px}
.err{max-width:900px;margin:40px auto;padding:24px;border:1px solid var(--panel-line);border-radius:12px;background:var(--panel);color:var(--dim)}
.err h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:28px;margin-bottom:8px}.err a{color:var(--green)}
.foot{margin:40px 0 0;padding:24px 0 10px;display:flex;gap:18px;flex-wrap:wrap;color:var(--mute);font-size:12.5px;border-top:1px solid var(--line)}
.foot .sp{flex:1}.foot a:hover{color:var(--green)}

/* ── player header ─────────────────────────────────────────────────────────────────── */
.phead{position:relative;height:260px;border-radius:12px;background:linear-gradient(120deg,#111a16 0,#0f0d12 60%);border:1px solid var(--panel-line)}
.phead .paper{position:absolute;inset:0;border-radius:12px;background:var(--noise);overflow:hidden}
.phead .splash{position:absolute;right:0;top:0;bottom:0;width:62%;background:no-repeat right center/cover;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
.phead .render{position:absolute;right:-6px;bottom:0;height:318px;width:auto;max-width:none;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.idcard{position:absolute;left:28px;top:58px;width:min(681px,calc(100% - 56px));height:142px;padding:18px 30px 18px 18px;display:flex;align-items:center;gap:16px;transform:rotate(-1.2deg)}
.idcard:before{content:"";position:absolute;inset:0;background:rgba(20,18,24,.96);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.idcard:after{content:"";position:absolute;left:38%;top:-10px;width:112px;height:22px;background:rgba(243,233,220,.8);transform:rotate(-4deg)}
.idcard>*{position:relative}
.idcard .av-wrap{position:relative;width:94px;height:94px;flex:none;background:var(--panel2)}
.idcard .av{width:94px;height:94px;object-fit:cover;filter:grayscale(.15) contrast(1.05)}
.idcard .av-wrap:after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(108,84,84,.08),transparent 50%)}
.idcard .who{min-width:0}
.idcard h1{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-weight:800;font-size:40px;letter-spacing:.01em;text-transform:uppercase;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idcard .row2{display:flex;align-items:center;gap:12px;margin-top:10px;font-size:13px;color:var(--dim);flex-wrap:wrap}
.rk{display:inline-flex;align-items:center;gap:6px;background:var(--green);color:var(--green-ink);border-radius:3px;padding:3px 9px 2px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.rk img{width:16px;height:16px}
.acts{position:absolute;right:340px;top:26px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:2}
.acts .r{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.chipb{display:flex;align-items:center;gap:7px;height:35px;padding:0 14px;background:rgba(20,18,24,.85) var(--noise);border:1px solid rgba(255,255,255,.1);font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}
.chipb:hover{border-color:var(--green)}
.more[hidden],.chipb[hidden]{display:none}   /* their display:flex / block would beat the hidden attribute */
.acts small{font-family:var(--display);font-size:11px;color:var(--dim);letter-spacing:.14em;text-transform:uppercase;margin-top:4px;margin-right:4px;text-align:right}
.ptabs{display:flex;align-items:stretch;gap:2px;padding:6px 2px 9px;margin:18px 0 10px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.ptabs a{position:relative;display:flex;align-items:center;gap:8px;padding:12px 20px;font-family:var(--display);font-weight:700;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.ptabs a svg{width:16px;height:16px;fill:currentColor;stroke:none;flex:none}
.ptabs a:hover{color:var(--fg)}
.ptabs a.on{background:var(--green);color:var(--green-ink)}
.ptabs a.dis{color:var(--mute);cursor:default}
.ptabs a .soon{margin-left:2px}

/* ── overview grid ─────────────────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start;margin-top:14px}
.left,.right{min-width:0}
.board{position:relative;overflow:hidden;background:var(--board) var(--noise);box-shadow:inset 0 0 0 7px var(--frame1),inset 0 0 0 9px var(--frame2);padding:9px;margin-bottom:16px;color:var(--chalk)}
.board:before{content:"";position:absolute;inset:9px;background:var(--chalkfx);pointer-events:none}
.board>*{position:relative}
.board .hd{display:flex;justify-content:space-between;padding:12px 12px 2px;font-family:var(--hand);font-weight:600;font-size:17px;color:rgba(233,220,203,.85)}
.rankrow{display:flex;align-items:center;gap:12px;padding:10px 12px 12px}
.rankrow .icon{width:54px;height:54px;flex:none;display:grid;place-items:center;color:var(--chalk-accent)}
.rankrow .icon svg{width:46px;height:46px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.rankrow .icon img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.rankrow .nm{font-family:var(--hand);font-weight:600;font-size:22px;color:var(--chalk-accent);line-height:1}
.rankrow small{display:block;font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,220,203,.7);margin-top:4px}
.rankrow .rec{margin-left:auto;text-align:right;white-space:nowrap}
.rankrow .rec b{font-size:16px;font-weight:600}.rankrow .rec .w{color:#34d399}.rankrow .rec .l{color:var(--red)}.rankrow .rec small{color:#34d399;letter-spacing:.02em;font-size:12px;text-transform:none;font-family:var(--body)}
.bar{margin:0 12px 10px;height:20px;border:2px solid rgba(243,240,231,.55);border-radius:2px;padding:2px}
.barL{margin:-4px 12px 10px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}.barL b{color:var(--fg)}
.bar i{display:block;height:100%;background:repeating-linear-gradient(90deg,rgba(243,240,231,.85) 0 6px,rgba(243,240,231,.55) 6px 8px);transition:width .4s}
.traj{padding:4px 12px 14px;border-top:1px dashed rgba(243,240,231,.25);margin:0 9px}
.traj .hd{padding:10px 0 6px}
.traj .dots{display:flex;gap:6px;min-height:16px}.traj .dots i{flex:1;height:16px;border:2px solid rgba(243,240,231,.7);border-radius:2px}
.traj .dots i.w{background:rgba(143,240,179,.75);border-color:rgba(143,240,179,.9)}.traj .dots i.l{background:rgba(248,113,113,.55);border-color:rgba(248,113,113,.8)}
.perf{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;padding:8px 12px 10px}
.perf small{display:block;font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(233,220,203,.65)}
.perf b{display:block;font-family:var(--hand);font-size:24px;font-weight:600;margin-top:2px;color:var(--chalk);white-space:nowrap}
.perf .k b{color:var(--green-soft)}.perf .d b{color:var(--red)}.perf .a b{color:var(--blue)}
.perf .wr b{display:inline-block;color:var(--green-soft);border:2px solid var(--green-soft);border-radius:50%;padding:0 9px;font-size:20px}
.perfnote{padding:0 12px 12px;font-size:11.5px;color:rgba(233,220,203,.5)}
.top3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.top3 .h{position:relative;text-align:center;padding-bottom:6px;display:block}
.top3 .h img{width:89px;height:118px;object-fit:cover;object-position:top;margin:0 auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6))}
.top3 .h .wr{position:absolute;left:50%;top:100px;transform:translateX(-50%);background:var(--good);color:#04140d;font-family:var(--display);font-weight:800;font-size:14px;padding:2px 10px;border-radius:2px}
.top3 .h .wr.r{background:var(--red);color:#2a0606}
.top3 .h b{display:block;margin-top:14px;font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.04em}
.top3 .h small{display:block;font-size:11px;color:var(--mute);line-height:1.35}
.hl{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:13px}
.hl .i{color:var(--mute);font-size:11px;width:12px}
.hl img{width:30px;height:30px;border-radius:4px}
.hl .n{min-width:0;flex:1}.hl .n b{display:block;font-weight:600}.hl .n small{color:var(--mute);font-size:11px}
.hl .w{font-weight:600;color:#34d399}.hl .w.r{color:var(--red)}
.heat{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:3px}
.heat i{height:12px;border-radius:2px;background:rgba(255,255,255,.05);display:block}.heat .h1{background:#1d5b3a}.heat .h2{background:#2a9358}.heat .h3{background:var(--green)}
.heatcap{display:flex;justify-content:space-between;margin-top:8px;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.week>div{text-align:center;min-width:0;background:rgba(255,255,255,.03);border-radius:6px;padding:8px 2px}
.week .d{font-size:10px;letter-spacing:.1em;color:var(--mute);font-family:var(--display);font-weight:700;text-transform:uppercase}
.week .w{font-family:var(--display);font-weight:800;font-size:16px;line-height:1.1;margin-top:3px;white-space:nowrap}
.week .w.g{color:#34d399}.week .w.r{color:var(--red)}.week .w.m{color:var(--mute);font-weight:600}
.week .s{font-size:10px;color:var(--mute);min-height:14px;white-space:nowrap}
.mate{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.mate .a{width:34px;height:34px;border-radius:50%;background:var(--panel2);object-fit:cover}
.mate .n{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:13px}
.mate .n small{display:block;font-size:11px;color:var(--mute);font-weight:400}
.mate .w{font-weight:600;color:#34d399}.mate .w.r{color:var(--red)}

/* ── match history ─────────────────────────────────────────────────────────────────── */
.mhh{display:flex;align-items:center;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.mhh h2{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.04em;text-transform:uppercase}
.mhh .f{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.mh{position:relative;display:grid;grid-template-columns:100px 166px 112px 170px minmax(0,1fr);gap:14px 9px;align-items:center;background:var(--panel) var(--noise);border-radius:10px;min-height:144px;padding:0 14px 0 0;margin-bottom:10px}
.mh .mcard{position:relative;width:100px;height:144px;align-self:stretch}
.mh .art{position:absolute;left:8px;top:32px;width:86px;height:95px;background:#1f8a4d var(--noise);transform:rotate(1.5deg)}
.mh.is-loss .art{background:#9b2c2c var(--noise);transform:rotate(-1.5deg)}
.mh .bust{position:absolute;left:8px;bottom:17px;width:87px;height:auto;max-width:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.mh .tag{position:absolute;left:50px;top:116px;transform:translateX(-50%);background:var(--good);color:#04140d;font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:2px 8px 1px;white-space:nowrap}
.mh.is-loss .tag{background:var(--red);color:#2a0606}
.mh .meta{min-width:0;padding:12px 0}
.mh .meta h4{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:.02em;line-height:1.1}
.mh .meta small{display:block;color:var(--mute);font-size:12px}
.mh .meta .chips{display:flex;gap:6px;margin:6px 0;flex-wrap:nowrap}   /* mode, place and grade on one line (ask 104): the column is wide enough for STANDARD 2nd A-,
   taken from the gaps so the players beside it keep their room */
.mh .meta .chip{padding:4px 7px;font-size:11px;letter-spacing:.06em}
.mh .kda .big{font-family:var(--display);font-weight:700;font-size:24px;color:var(--mute);white-space:nowrap}.mh .kda .big i{font-style:normal;padding:0 3px;font-weight:500}
.mh .kda .k{color:#34d399}.mh .kda .d{color:var(--red)}.mh .kda .a{color:var(--blue)}
.mh .kda small{display:block;color:var(--mute);font-size:12px;white-space:nowrap}
.mh .items{display:grid;grid-template-columns:repeat(6,24px);gap:4px}
.mh .items img,.mh .items i{width:24px;height:24px;border-radius:3px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.mh .items img.weapon{border-color:rgba(255,160,80,.55)}.mh .items img.vitality{border-color:rgba(120,200,120,.55)}.mh .items img.spirit{border-color:rgba(190,130,255,.55)}
.mh .teams{display:grid;grid-template-columns:1fr 20px 1fr;gap:8px;align-items:center;padding:10px 0;min-width:0}
.mh .teams .t{display:grid;gap:3px;min-width:0}
.mh .teams .pl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;min-width:0}
.mh .teams .pl span{overflow:hidden;text-overflow:ellipsis}
.mh .teams .pl img{width:18px;height:18px;border-radius:3px;flex:none}.mh .teams .pl.me{color:var(--fg);font-weight:600}.mh .teams .pl:hover{color:var(--green)}
.mh .teams .vs{font-size:10px;color:var(--mute);text-align:center}
.mh .teams .ld{font-size:12px;color:var(--mute)}

/* ── homepage ──────────────────────────────────────────────────────────────────────── */
.kick{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.q{font-family:var(--hand);font-size:22px;color:var(--dim);margin:0;transform:rotate(-1.5deg);display:inline-block}
.hero{padding:30px 0 36px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:center}
.hero h1{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.9;margin:8px 0 10px;font-size:clamp(56px,8vw,104px);letter-spacing:-.01em;text-wrap:balance}
.hero h1 b{color:var(--green);font-weight:800;display:block}
.lead{color:var(--dim);font-size:17px;max-width:46ch;margin:0 0 22px}
.search{display:flex;gap:10px;align-items:stretch;position:relative;max-width:620px}
.search .box{flex:1;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:0 14px;min-width:0;position:relative}
.search .box svg{width:16px;height:16px;fill:none;stroke:var(--green);stroke-width:2;flex:0 0 auto}
.search input{flex:1;min-width:0;background:none;border:0;color:var(--fg);font-family:var(--display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:15px;padding:13px 0;outline:0}
.search input::placeholder{color:var(--mute);text-transform:uppercase}
.search .steam{display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:8px;background:var(--panel);border:1px solid var(--line2);color:var(--dim);font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:14px;white-space:nowrap}
.search a.steam:hover{color:var(--fg);border-color:var(--dim)}.search .steam.me{color:var(--green);border-color:var(--green)}.search .hand a{color:var(--green);text-decoration:underline}
.hand{position:absolute;left:30px;top:54px;font-family:var(--hand);font-size:22px;color:var(--dim);transform:rotate(-4deg);white-space:nowrap}
.hand svg{width:70px;height:28px;fill:none;stroke:var(--dim);stroke-width:1.6;vertical-align:middle;margin-right:4px;transform:translateY(-6px)}
.results{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--panel2);border:1px solid var(--line2);border-radius:8px;z-index:4;max-height:360px;overflow:auto;display:none}
.results.on{display:block}
.results a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line)}
.results a:last-child{border-bottom:0}.results a:hover{background:rgba(255,255,255,.04)}
.results img{width:30px;height:30px;border-radius:3px}
.results .n{font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.results small{color:var(--mute);font-size:12px}
.results .none{padding:10px 12px;color:var(--mute);font-size:13px}
.chips{display:flex;gap:8px;margin-top:56px;flex-wrap:wrap}
.chips a{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--line2);border-radius:3px;color:var(--dim);background:var(--panel)}
.chips a:hover{color:var(--green)}
.cards{position:relative;height:340px;min-width:0}
.card{position:absolute;top:30px;left:50%;width:170px;height:250px;border-radius:6px;border:1px solid var(--line2);background:var(--panel2);box-shadow:0 20px 40px rgba(0,0,0,.55);display:flex;flex-direction:column;justify-content:flex-end;padding:14px;transform-origin:50% 110%;overflow:hidden}
/* the card fan (the same as yoggin.life's): the three cards sway a little on their own, lean out of the cursor's way,
   and the one under it lifts to the front with a green edge. One transform per card, built from its resting pose
   (--r0 --x0 --y0) plus what home.js adds (--dx --dy --dr --s). */
.cards .card{transition:border-color .2s,box-shadow .2s;will-change:transform;
  transform:translateX(-50%) translate(var(--dx,0px),calc(var(--y0,0px) + var(--dy,0px))) rotate(calc(var(--r0,0deg) + var(--dr,0deg))) translateX(var(--x0,0px)) scale(var(--s,1))}
.cards .card.l{--r0:-14deg;--x0:-110px}
.cards .card.c{--y0:-18px;z-index:2;border-color:var(--green-dim)}
.cards .card.r{--r0:14deg;--x0:110px}
.cards .card.up{z-index:5;border-color:var(--green);box-shadow:0 0 0 2px var(--green),0 28px 50px rgba(0,0,0,.6)}
.cards .card img{transition:transform .35s ease,opacity .35s ease}
.cards .card.up img{transform:scale(1.08) translateY(-4px);opacity:1}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:.85}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,12,14,.95) 85%)}
.card .n{font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase;line-height:1;position:relative;z-index:1}
.card .w{font-family:var(--display);font-weight:700;font-size:18px;color:var(--good);position:relative;z-index:1}
.card .tag{position:absolute;top:10px;left:50%;transform:translateX(-50%) rotate(-3deg);background:var(--green);color:var(--green-ink);font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:2px;white-space:nowrap;z-index:2}
.cap{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:11.5px;color:var(--mute)}
.sec{padding:34px 0}
.sec h2{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(30px,4vw,44px);line-height:1;margin:0 0 8px;text-wrap:balance}
.sub{color:var(--dim);margin:0 0 22px;max-width:60ch}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.stat{background:var(--panel) var(--noise);border:1px solid var(--panel-line);border-radius:12px;padding:16px 18px;min-width:0}
.stat .k{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.stat .v{font-family:var(--display);font-weight:800;font-size:40px;line-height:1;color:var(--green);margin:6px 0 2px}
.stat .v.bad{color:var(--red)}
.stat .h{font-family:var(--display);font-weight:700;font-size:18px;text-transform:uppercase}
.stat p{margin:6px 0 0;color:var(--dim);font-size:13.5px}
.tier{display:grid;grid-template-columns:54px minmax(0,1fr);border:1px solid var(--panel-line);border-radius:12px;overflow:hidden;background:var(--panel) var(--noise)}
.tier>div{padding:10px 12px;border-bottom:1px solid var(--line);min-width:0}
.tier>div:nth-last-child(-n+2){border-bottom:0}
.tier .g{font-family:var(--display);font-weight:800;font-size:22px;background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center}
.tier .g.s{color:var(--green)}.tier .g.a{color:var(--fg)}.tier .g.b{color:var(--dim)}.tier .g.c{color:var(--mute)}
.tier .row{display:flex;flex-wrap:wrap;gap:8px}
.tier .hero-p{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border:1px solid var(--line2);border-radius:4px;background:var(--panel2);font-size:13px}
.tier .hero-p img{width:22px;height:22px;border-radius:50%;object-fit:cover;background:var(--panel2)}
.tier .hero-p b{font-weight:600}.tier .hero-p span{color:var(--good)}.tier .hero-p span.wd{color:var(--bad)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.dl{background:var(--panel) var(--noise);border:1px solid var(--green-dim);border-radius:12px;padding:26px 28px}
.dl .steps{display:grid;gap:12px;margin:18px 0 22px}
.dl .step{display:flex;gap:12px;align-items:flex-start;color:var(--dim)}
.dl .step b{font-family:var(--display);font-weight:800;font-size:20px;color:var(--green);width:28px;flex:0 0 auto;line-height:1.1}
.dl .step span{min-width:0}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:8px;background:var(--green);color:var(--green-ink);font-family:var(--display);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:16px}
.btn small{font-family:var(--body);font-weight:500;letter-spacing:0;text-transform:none;font-size:12px;opacity:.75}
.look{background:var(--panel) var(--noise);border:1px solid var(--panel-line);border-radius:12px;padding:26px 28px}
.look .search{margin-top:14px;max-width:none}
.strip{display:flex;align-items:center;gap:12px;padding:8px 18px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;font-size:13px;margin-bottom:14px}
.strip b{font-family:var(--display);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.strip .sp{flex:1}
.strip a{font-size:12.5px;padding:5px 12px;border-radius:4px;background:var(--green);color:var(--green-ink);font-weight:600;white-space:nowrap}

.filt button{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:7px 15px;color:var(--dim);background:var(--chip)}
.filt button:hover{color:var(--fg)}.filt button.on{background:var(--green);color:var(--green-ink)}
.topbar .brand small{font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;background:var(--green);color:var(--green-ink);padding:2px 5px 1px;border-radius:2px;margin-left:2px}
/* ── heroes tab ────────────────────────────────────────────────────────────────────── */
.filt{display:flex;gap:4px;padding:0 0 12px;flex-wrap:wrap;align-items:center}
.filt .sp{flex:1}
.filt select{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:4px;border:1px solid var(--line2);color:var(--dim);background:var(--panel);max-width:180px}
.pool{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:12px}
.pool>div{padding:12px 14px;background:rgba(255,255,255,.03);border-radius:8px;min-width:0}
.pool .k{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pool .v{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.1;margin:4px 0 2px}
.pool .v.g{color:var(--good)}
.pool .s{font-size:12px;color:var(--dim)}
.hrow{display:grid;grid-template-columns:30px 44px minmax(0,1.4fr) 80px 80px minmax(0,1.2fr) 80px 90px;gap:12px;align-items:center;padding:10px 12px;border-top:1px solid var(--line)}
.hrow:hover{background:rgba(255,255,255,.03)}
.hrow .i{font-family:var(--display);font-weight:800;color:var(--mute)}
.hrow .hp{width:44px;height:44px;border-radius:4px;background:var(--panel2);object-fit:cover}
.hrow .n{font-family:var(--display);font-weight:700;font-size:18px;text-transform:uppercase;line-height:1.1;min-width:0}
.hrow .n small{display:block;font-family:var(--body);font-weight:400;font-size:12px;color:var(--mute);text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hrow .c b{display:block;font-family:var(--display);font-weight:800;font-size:19px;line-height:1.1;white-space:nowrap}
.hrow .c b.g{color:var(--good)}.hrow .c b.r{color:var(--red)}
.hrow .c small{font-size:11px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;font-family:var(--display);font-weight:700}
.hrow .bar{height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;margin:0;border:0;padding:0}
.hrow .bar i{display:block;height:100%;background:var(--green-dim)}

/* ── performance tab ───────────────────────────────────────────────────────────────── */
.chartWrap{padding:4px 0}
.rankSvg{width:100%;height:auto;display:block}
.rankSvg .g{stroke:var(--line2);stroke-width:1}
.rankSvg .yl{fill:var(--mute);font-size:10px;font-family:var(--display);font-weight:700;letter-spacing:.06em;text-anchor:end;text-transform:uppercase}
.rankSvg .xl{fill:var(--mute);font-size:10px;font-family:var(--body)}
.rankSvg .p{fill:none;stroke:var(--good);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
/* rank points (2026-10-16) */
.rpBig{display:flex;gap:28px;flex-wrap:wrap;margin:6px 0 4px}
.rpBig div{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.rpBig b{display:block;font-family:"Archivo",var(--display);font-stretch:125%;font-weight:900;font-size:28px;line-height:1.1;letter-spacing:0;color:var(--fg)}
.rpBig b.up{color:var(--good)}.rpBig b.dn{color:var(--red)}
.rankSvg .rp{fill:none;stroke:var(--fg);stroke-width:2.5;stroke-linejoin:round}
.rankSvg circle.rd{stroke:var(--panel);stroke-width:2}
.rankSvg .fl{stroke:var(--good);stroke-width:1.2;stroke-dasharray:6 6;opacity:.6}
.rpSvg .yl,.rpSvg .xl{font-size:14px}.rpSvg .flt{font-size:13px}
.rankSvg .gl{stroke:var(--fg);opacity:.25}.rankSvg .glt{fill:var(--mute)}
.rankSvg .flt{fill:var(--good);font-size:12px;font-family:var(--display);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.rpTip{position:fixed;z-index:20;pointer-events:none;background:var(--panel2);border:1px solid var(--line2);padding:7px 10px;font-size:13px;border-radius:4px}
.rpTip b.up{color:var(--good)}.rpTip b.dn{color:var(--red)}
.rankSvg circle.w{fill:var(--good)}.rankSvg circle.l{fill:var(--red)}.rankSvg circle.now{fill:var(--bg);stroke:var(--good);stroke-width:2.5}
.vsrow{display:grid;grid-template-columns:150px 90px 150px minmax(0,1fr) 110px;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.vsrow .t{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.vsrow .val{font-family:var(--display);font-weight:800;font-size:24px;white-space:nowrap}
.vsrow .pct{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.06em;text-transform:uppercase;line-height:1.1}
.vsrow .pct.g{color:var(--good)}.vsrow .pct.lo{color:var(--dim)}
.vsrow .pct small{display:block;font-family:var(--body);font-weight:400;font-size:11.5px;color:var(--mute);letter-spacing:0;text-transform:none}
.vsrow .track{position:relative;height:52px;min-width:0}
.vsrow .track::before{content:"";position:absolute;left:0;right:0;top:12px;height:6px;border-radius:3px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.16) 50%,var(--green-dim))}
.vsrow .track i{position:absolute;top:9px;width:12px;height:12px;border-radius:50%;transform:translateX(-50%);background:var(--dim)}
.vsrow .track i.med{width:2px;height:14px;top:8px;border-radius:1px;background:var(--mute);transform:translateX(-1px)}
.vsrow .track i.you{background:var(--fg);box-shadow:0 0 0 2px var(--panel)}
.vsrow .track i.you.g{background:var(--good)}
.vsrow .track .lab{position:absolute;top:24px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-family:var(--display);font-weight:700;white-space:nowrap}
.vsrow .track .lab.l{left:0}.vsrow .track .lab.r{right:0}.vsrow .track .lab.m{top:38px;transform:translateX(-50%)}
.vsrow .ten{font-size:12px;color:var(--mute);text-align:right;white-space:nowrap}
.one{margin-top:14px}

/* ── responsive ────────────────────────────────────────────────────────────────────── */
@media (max-width:1500px){.mh{grid-template-columns:100px 186px 104px 170px;column-gap:14px;grid-template-rows:auto auto;padding-bottom:4px}.mh .teams{grid-column:1/-1;padding:4px 0 10px 14px;border-top:1px solid var(--line)}.mh .teams .t{grid-auto-flow:column;grid-template-rows:repeat(3,auto)}}
@media (max-width:1240px){.side{width:56px}.side .t,.side .sq,.side .lab,.side .it .l,.side .it .ch,.side .mgrp,.side .btn .l,.side .dsc .l,.side .soon,.side .col{display:none}.side .top{justify-content:center;padding-inline:0}.side .it{justify-content:center;padding:11px 0}.side .btn{padding:0;width:42px;margin:0 auto}.main{margin-left:56px;padding-inline:20px}}
@media (max-width:1100px){.grid{grid-template-columns:1fr}.phead .render{height:260px}.acts{right:26px}.hero{grid-template-columns:1fr}.cards{height:300px}.two{grid-template-columns:1fr}}
@media (max-width:900px){
  .side{transform:translateX(-100%);width:272px}
  .side .t,.side .sq,.side .lab,.side .it .l,.side .it .ch,.side .mgrp,.side .btn .l,.side .dsc .l,.side .soon{display:revert}.side .mgrp{display:grid}
  .side .top{justify-content:flex-start;padding-inline:16px}.side .it{justify-content:flex-start;padding:9px 10px}.side .btn{padding:0 10px;width:auto;margin:0}
  html.drawer .side{transform:none}
  .main{margin-left:0;padding:66px 16px 50px}
  .topbar{display:flex;position:fixed;top:0;left:0;right:0;height:52px;align-items:center;gap:10px;padding:0 12px;background:var(--side);border-bottom:1px solid var(--line);z-index:30}
  .topbar .burger{width:40px;height:40px;display:grid;place-items:center;color:var(--fg)}.topbar .burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
  .topbar .brand{display:flex;align-items:center;gap:8px;font-family:"Limelight",var(--display);font-weight:400;font-size:18px;text-transform:lowercase}.topbar .mark{width:28px;height:28px;object-fit:contain}
  html.drawer .backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:35}
  .phead{height:auto;padding-bottom:16px}.phead .render,.phead .splash{display:none}
  .idcard{position:relative;left:0;top:0;margin:16px;width:auto;height:auto;transform:none;padding:14px;gap:12px}.idcard:after{left:40%}
  .idcard h1{font-size:28px}.idcard .av-wrap,.idcard .av{width:64px;height:64px}
  .acts{position:relative;right:auto;top:auto;align-items:flex-start;padding:0 16px}.acts .r{justify-content:flex-start}.acts small{text-align:left;margin:0}
  .mh{grid-template-columns:100px minmax(0,1fr);row-gap:6px}.mh .kda{grid-column:2}.mh .items{grid-column:2;grid-template-columns:repeat(6,20px);gap:3px;padding-bottom:6px}.mh .items img,.mh .items i{width:20px;height:20px}
  .mh .teams .t{grid-auto-flow:row}
  .hrow{grid-template-columns:24px 36px minmax(0,1fr) 64px 64px}.hrow .wide,.hrow .c:nth-of-type(5),.hrow .bar{display:none}
  .vsrow{grid-template-columns:1fr 1fr;row-gap:8px}.vsrow .track{grid-column:1/-1}.vsrow .ten{text-align:left}
  .search{flex-direction:column}.hand{display:none}.chips{margin-top:20px}.hero h1{font-size:56px}.cards{overflow:hidden;margin:0 -16px}
}

/* ── economy tab ───────────────────────────────────────────────────────────────────── */
.rankSvg rect.w{fill:var(--good)}.rankSvg rect.l{fill:var(--red);opacity:.85}
.rankSvg .md{stroke:var(--fg);stroke-width:1.5;stroke-dasharray:5 5;opacity:.6}
.erow{display:grid;grid-template-columns:24px 40px minmax(0,1.4fr) repeat(7,minmax(0,1fr));gap:10px;align-items:center;padding:9px 10px;border-top:1px solid var(--line)}
.erow.eh{border-top:0;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding-bottom:2px}
.erow .i{color:var(--mute);font-family:var(--display);font-weight:800}
.erow img{width:40px;height:40px;border-radius:4px;background:var(--panel2)}
.erow .n{font-family:var(--display);font-weight:700;font-size:17px;text-transform:uppercase;line-height:1.1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.erow .n small{display:block;font-family:var(--body);font-weight:400;font-size:12px;color:var(--mute);text-transform:none}
.erow b{font-family:var(--display);font-weight:800;font-size:18px;white-space:nowrap}.erow b.g{color:var(--good)}
/* ── builds tab ────────────────────────────────────────────────────────────────────── */
.mine{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.mine a{display:flex;gap:10px;align-items:center;padding:10px;background:rgba(255,255,255,.03);border-radius:8px;min-width:0}
.mine img{width:40px;height:40px;border-radius:4px;flex:none}
.mine .n{min-width:0}.mine .n b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mine .n small{font-size:12px;color:var(--mute)}
.buyrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.buy{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(255,255,255,.03);border-radius:8px;min-width:0}
.buy img{width:38px;height:38px;border-radius:5px;border:1px solid var(--line);flex:none;background:rgba(255,255,255,.04)}
.buy .n{min-width:0}.buy .n b{display:block;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.buy .n small{font-size:11.5px;color:var(--mute)}
.buy img.weapon,.bcat img.weapon{border-color:rgba(255,160,80,.6)}.buy img.vitality,.bcat img.vitality{border-color:rgba(120,200,120,.6)}.buy img.spirit,.bcat img.spirit{border-color:rgba(190,130,255,.6)}
.bcard{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;padding:14px 0;border-top:1px solid var(--line)}
.bcard .who h4{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.1;text-transform:uppercase}
.bcard .who small{display:block;color:var(--mute);font-size:12px;margin-top:4px}.bcard .who small a{color:var(--dim)}.bcard .who small a:hover{color:var(--green)}
.bcard .fav{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:3px 9px;background:var(--chip);font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.bcard .cats{min-width:0}
.bcat{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px;align-items:center;padding:4px 0}
.bcat .l{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bcat .its{display:flex;flex-wrap:wrap;gap:4px}
.bcat img{width:30px;height:30px;border-radius:4px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
@media (max-width:900px){.erow{grid-template-columns:22px 32px minmax(0,1.4fr) repeat(2,minmax(0,1fr))}.erow>:nth-child(n+6){display:none}.bcard{grid-template-columns:1fr;gap:8px}.bcat{grid-template-columns:1fr;gap:2px}}

/* ── laning tab ────────────────────────────────────────────────────────────────────── */
.two.panels{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rankSvg .p2{fill:none;stroke:var(--dim);stroke-width:2;stroke-dasharray:6 5;stroke-linejoin:round}
.rankSvg .pt{fill:var(--good)}.rankSvg .pt2{fill:var(--dim)}
.rankSvg .lbl{fill:var(--fg);font-size:12px;font-family:var(--display);font-weight:700}
.lrow{display:grid;grid-template-columns:44px minmax(0,1.2fr) minmax(0,1.6fr) 110px repeat(4,minmax(0,.7fr));gap:12px;align-items:center;padding:10px 8px;border-top:1px solid var(--line)}
.lrow.lh{border-top:0;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding-bottom:2px}
.lrow .hp{width:44px;height:44px;border-radius:4px;background:var(--panel2)}
.lrow .n{font-family:var(--display);font-weight:700;font-size:17px;text-transform:uppercase;line-height:1.1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .n small{display:block;font-family:var(--body);font-weight:400;font-size:12px;color:var(--mute);text-transform:none}
.lrow .lane{display:flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;color:var(--dim)}
.lrow .lane img{width:26px;height:26px;border-radius:4px;flex:none}
.lrow .lane .vs{font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.1em;color:var(--mute);padding:0 4px}
.lrow .lane .me img{outline:2px solid var(--green)}
.lrow .lead{font-family:var(--display);font-weight:800;font-size:18px;white-space:nowrap}
.lrow .lead small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.lrow .lead.g{color:var(--good)}.lrow .lead.r{color:var(--red)}.lrow .lead.m{color:var(--mute)}
.lrow b{font-family:var(--display);font-weight:800;font-size:17px;white-space:nowrap}
.lrow b small{display:block;font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.prow{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:13px}
.prow img{width:34px;height:34px;border-radius:4px;background:var(--panel2)}
.prow .n{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.prow .n small{display:block;font-size:11px;color:var(--mute);font-weight:400}
.prow .w{font-family:var(--display);font-weight:800;font-size:16px}.prow .w.g{color:var(--good)}.prow .w.r{color:var(--red)}
.prow .ld{font-size:12px;color:var(--mute);min-width:64px;text-align:right}
@media (max-width:1300px){.lrow{grid-template-columns:44px minmax(0,1.2fr) minmax(0,1.6fr) 110px repeat(2,minmax(0,.7fr))}.lrow>:nth-child(n+7){display:none}}
@media (max-width:900px){.two.panels{grid-template-columns:1fr}.lrow{grid-template-columns:40px minmax(0,1fr) 90px}.lrow>:nth-child(3),.lrow>:nth-child(n+5){display:none}}

/* the app page */
.apph h1{font-family:var(--display);font-weight:800;font-size:40px;letter-spacing:.01em;line-height:1.05;margin:8px 0 10px;max-width:760px}
.apph .lede{font-size:15.5px;color:var(--dim);max-width:720px;line-height:1.6;margin:0 0 18px}
.appcta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.feat{padding:10px 0;border-top:1px solid var(--line)}.feat b{display:block;font-size:14.5px;margin-bottom:2px}.feat span{color:var(--dim);font-size:13px;line-height:1.5}
.steps3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.st{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--dim);line-height:1.5}.st b{flex:none;width:26px;height:26px;border-radius:50%;background:var(--green);color:var(--green-ink);display:grid;place-items:center;font-family:var(--display);font-weight:800}
@media (max-width:900px){.apph h1{font-size:30px}}
/* the app page: the two panels side by side end level (no black gap under the shorter one) */
.two.panels.even{align-items:stretch}

/* ── loading: grey shapes the size of the real thing, then a quick fade in ─────────────────── */
@keyframes shim{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes fin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ph,.skel{color:transparent!important;background:linear-gradient(90deg,rgba(255,255,255,.035) 30%,rgba(255,255,255,.085) 50%,rgba(255,255,255,.035) 70%);background-size:200% 100%;animation:shim 1.3s linear infinite;border-radius:4px;user-select:none;border-color:transparent!important}
.ph{display:inline-block;min-width:3.5em;line-height:1.1}
.ph *{visibility:hidden}
h1.ph{min-width:8em}
.skel{display:block;min-height:72px;padding:0;margin:4px 0}
#matches .skel{min-height:144px;margin:0 0 10px}
img[src=""],img:not([src]){visibility:hidden}
.av-wrap{background:rgba(255,255,255,.04)}
.mh,#avg>*,#heroList>*,#mates>*,.mh .fold>*{animation:fin .28s ease-out both}
.mh:nth-child(2){animation-delay:.03s}.mh:nth-child(3){animation-delay:.06s}.mh:nth-child(4){animation-delay:.09s}.mh:nth-child(5){animation-delay:.12s}.mh:nth-child(n+6){animation-delay:.15s}
.splash{transition:opacity .6s ease}.splash:not(.in){opacity:0}
.render{opacity:0;transition:opacity .3s ease}.render.in{opacity:1}

/* ── match rows: the hero pops out of its card on hover ───────────────────────────────────── */
.mh{transition:background-color .15s}
.mh:hover{background-color:rgba(255,255,255,.025)}
.mh .art{transition:transform .22s ease,filter .22s ease}
.mh .bust{transform-origin:50% 100%;transition:transform .22s cubic-bezier(.2,.8,.3,1.4),filter .22s ease}
.mh:hover .bust{transform:translateY(-5px) scale(1.09);filter:drop-shadow(0 10px 14px rgba(0,0,0,.7))}
.mh:hover .art{transform:rotate(0deg) scale(1.04);filter:brightness(1.15)}
.mh.is-loss:hover .art{transform:rotate(0deg) scale(1.04)}
.mh.open .bust{transform:none}
@media (prefers-reduced-motion:reduce){.mh,.mh .bust,.mh .art,.render,.splash,.ph,.skel{animation:none!important;transition:none!important}}
.ptabs a.on{transition:transform .18s cubic-bezier(.2,.8,.3,1.4)}.ptabs a.on:hover{transform:rotate(-1.2deg) scale(1.03)}

/* ── the slim rail: icons only, a label on hover (their left rail) ─────────────────────── */
html.rail .side .top{padding:14px 0 6px}
html.rail .side .mark{width:30px;height:30px}
html.rail .side .col{width:22px;height:22px;font-size:13px}
html.rail .side nav{padding:10px 8px;overflow:visible}
html.rail .side .it{padding:10px 0;border-radius:6px}
html.rail .side .it:before{inset:0}
html.rail .side .bot{padding:10px 8px 14px;align-items:center}
html.rail .side .btn{width:40px;height:40px}
.side .btn.o svg{width:17px;height:17px;stroke-width:1.9}
html.rail .side [data-tip]{position:relative}
html.rail .side [data-tip]:hover:after,html.rail .side [data-tip]:focus-visible:after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);z-index:60;padding:6px 10px;border-radius:4px;background:#15121a;border:1px solid var(--line2);color:var(--fg);font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap;pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.5)}
@media (min-width:901px) and (max-width:1240px){.side .top{padding:14px 0 6px}.side nav{padding:10px 8px;overflow:visible}.side .bot{padding:10px 8px 14px;align-items:center}.side .btn{width:40px;height:40px}
  .side [data-tip]{position:relative}.side [data-tip]:hover:after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);z-index:60;padding:6px 10px;border-radius:4px;background:#15121a;border:1px solid var(--line2);color:var(--fg);font-size:12.5px;font-weight:600;white-space:nowrap;pointer-events:none}}

/* ── the Deadlock Labs pass (2026-10-16): filled icons, a ragged edge, pop-outs, the latest-update hub ── */
.side{clip-path:polygon(0 0,calc(100% - 2px) 0,100% 1.5%,calc(100% - 3px) 4%,100% 7%,calc(100% - 2px) 11%,100% 15%,calc(100% - 4px) 19%,100% 24%,calc(100% - 2px) 29%,100% 34%,calc(100% - 3px) 39%,100% 45%,calc(100% - 2px) 51%,100% 57%,calc(100% - 4px) 62%,100% 68%,calc(100% - 2px) 74%,100% 80%,calc(100% - 3px) 86%,100% 92%,calc(100% - 2px) 97%,100% 100%,0 100%);border-right:0}
.side .it svg.mi{fill:currentColor;stroke:none;width:20px;height:20px}
.side .it .tag{margin-left:auto}.side .it .tag+svg.ch{margin-left:8px}
.side .tag,.fly .tag{font-family:var(--display);font-weight:800;font-size:10px;letter-spacing:.12em;line-height:1;padding:3px 5px 2px;background:var(--accent);color:var(--accent-ink);transform:rotate(-2deg);white-space:nowrap}
.side .col{border:0;border-radius:3px;background:rgba(255,255,255,.07);color:var(--fg)}
.side .col svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2}
html.rail .side{width:68px}html.rail .main{margin-left:68px}
@media (min-width:901px) and (max-width:1240px){.side{width:68px}.main{margin-left:68px}}
html.slim .side .it{padding:12px 0;margin:2px 0}html.slim .side .it svg.mi{width:24px;height:24px}
html.slim .side .mark{width:36px;height:36px}html.slim .side .col{width:34px;height:30px}
html.slim .side .it:hover svg.mi,html.slim .side .it.grp[aria-expanded=true] svg.mi{color:var(--accent)}
html.slim .side .it:hover:before{opacity:1;background:rgba(255,255,255,.07)}
html.slim .side .it.on:hover svg.mi{color:var(--accent-ink)}
html.slim .side .it .tag{display:none}
html.slim .side [data-fly]:hover:after{content:none!important}
/* the hub: a banner with hero art when open, a round badge on the rail */
.side .hub{position:relative;display:block;height:58px;margin:6px 0 4px;overflow:hidden;border-left:3px solid var(--accent);background:#10120f}
.side .hub .art,.side .hubdot .art{position:absolute;background-size:cover;background-position:50% 22%}
.side .hub .art{right:-10px;top:0;bottom:0;width:62%;opacity:.8;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
.side .hub span{position:relative;display:block;padding:11px 12px 0}
.side .hub b{display:block;font-family:"Archivo",var(--display);font-stretch:125%;font-weight:900;font-size:13.5px;line-height:1;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.side .hub em{display:block;font-style:normal;font-size:12px;margin-top:5px;color:var(--fg)}
.side .hub small,.side .hubdot small{position:absolute;font-family:var(--display);font-weight:800;font-size:9.5px;letter-spacing:.12em;line-height:1;padding:3px 5px 2px;background:var(--accent);color:var(--accent-ink)}
.side .hub small{right:8px;top:8px;transform:rotate(-2deg)}
.side .hubdot{display:none;position:relative;width:40px;height:40px;margin:6px auto;border-radius:50%;border:2px solid var(--accent);background:#10120f}
.side .hubdot .art{inset:0;border-radius:50%;background-position:50% 18%;background-size:180%}
.side .hubdot small{right:-10px;bottom:-4px;font-size:8.5px;padding:2px 3px}
html.slim .side .hub{display:none!important}
html.slim .side .hubdot:not([hidden]){display:block}
/* the pop-out */
.fly{position:fixed;z-index:70;min-width:200px;padding:12px 26px 12px 16px;background:#0e0d11;opacity:0;visibility:hidden;transform:translateX(-4px);transition:opacity .12s,transform .12s,visibility .12s;pointer-events:none;
  clip-path:polygon(0 0,calc(100% - 3px) 0,100% 6%,calc(100% - 6px) 14%,100% 24%,calc(100% - 3px) 36%,100% 48%,calc(100% - 7px) 60%,100% 72%,calc(100% - 3px) 84%,100% 94%,calc(100% - 5px) 100%,0 100%)}
.fly.show{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.fly h4{margin:0 0 6px;font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.fly a{display:flex;align-items:center;gap:12px;height:30px;font-size:14.5px;font-weight:500;color:var(--fg);white-space:nowrap}
.fly a:hover{color:var(--accent)}
@media (max-width:900px){.side{clip-path:none}.fly{display:none}}

/* ── homepage: one centred column, game art and an orange glow behind the hero ──────────── */
body[data-nav=home] .main{position:relative;max-width:none;isolation:isolate}
body[data-nav=home] .main>*:not(.atmo){position:relative;z-index:1;max-width:1100px;margin-left:auto;margin-right:auto}
body[data-nav=home] .sec .sub,body[data-nav=home] .lead{max-width:720px}
.atmo{position:absolute;left:0;right:0;top:0;height:1000px;z-index:0;pointer-events:none;overflow:hidden}
.atmo i{position:absolute;inset:0;background-size:cover;background-position:center 18%;opacity:0;filter:saturate(.7) brightness(.75);transition:opacity 1.2s ease;-webkit-mask-image:linear-gradient(180deg,#000 35%,transparent 96%);mask-image:linear-gradient(180deg,#000 35%,transparent 96%)}
.atmo i.in{opacity:.55}
.atmo:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 60% at 84% 16%,rgba(249,115,22,.3),rgba(249,115,22,.08) 55%,transparent 75%),linear-gradient(90deg,rgba(8,7,10,.78) 0%,rgba(8,7,10,.3) 55%,rgba(8,7,10,.45) 100%),linear-gradient(180deg,transparent 60%,var(--bg) 100%)}
@media (max-width:900px){.atmo{height:760px}.atmo i.in{opacity:.22}}
@media (prefers-reduced-motion:reduce){.atmo i{transition:none}}

/* ── type: wide heavy headlines, Geist body, Geist Mono labels, a brush hand (style pass, phase 2) ── */
/* The accent is ONE setting: change --accent (and --accent-ink, the text that sits on it) in :root above
   and every heading half, button and highlight follows. */
body[data-nav=home]{font-family:var(--sans);font-size:15px;color:var(--fg)}
body[data-nav=home] .hero{grid-template-columns:minmax(0,1fr) 420px}
body[data-nav=home] .hero h1{font-family:var(--wide);font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:.9;margin:14px 0 18px}
body[data-nav=home] .hero h1 .a{display:block;font-size:clamp(30px,3.6vw,52px);font-weight:800;color:var(--fg)}
body[data-nav=home] .hero h1 b{display:block;white-space:nowrap;font-size:clamp(40px,4.6vw,72px);color:var(--accent)}
body[data-nav=home] .sec h2{font-family:var(--wide);font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:.95;font-size:clamp(30px,4.1vw,59px);margin:0 0 12px}
body[data-nav=home] h2 em{font-style:normal;color:var(--accent)}
body[data-nav=home] h2.sm,body[data-nav=home] .sec h2.sm{font-size:22px;line-height:1.05;margin:8px 0 8px}
body[data-nav=home] .lead,body[data-nav=home] .sub{font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--fg);opacity:.78}
body[data-nav=home] .kick,body[data-nav=home] .stat .k,body[data-nav=home] .cap,body[data-nav=home] .strip b{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);opacity:.55}
body[data-nav=home] .strip b{color:var(--accent);opacity:1}
body[data-nav=home] .chips a{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.1em}
body[data-nav=home] .search input,body[data-nav=home] .search .steam{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.08em}
body[data-nav=home] .hand{font-family:var(--brush);font-size:24px;color:var(--chalk)}
body[data-nav=home] .sec .q{display:block;width:max-content;max-width:100%;margin:0 auto;font-family:var(--brush);font-size:31px;line-height:1.1;color:var(--chalk);transform:rotate(-2deg);text-align:center}
.qa{display:block;width:46px;height:62px;margin:2px auto 14px;fill:none;stroke:var(--chalk);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
@media (max-width:1100px){body[data-nav=home] .hero{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){body[data-nav=home] .sec .q{font-size:25px}.qa{height:48px}body[data-nav=home] .hero h1 b{white-space:normal;font-size:clamp(34px,10.5vw,44px)}body[data-nav=home] .hero h1 .a{font-size:clamp(26px,8vw,34px)}}

/* ── colour system (style pass, phase 3): blocks of real colour that MEAN something ────────────── */
/* insight cards: solid fill per meaning, near-black text. Patch leader takes our accent. */
body[data-nav=home] .stat{--cc:var(--panel);background:var(--cc) var(--noise);border:0;border-radius:4px;color:var(--ink)}
body[data-nav=home] .stat.lead{--cc:var(--accent)}
body[data-nav=home] .stat.sleeper{--cc:#4f7fd9}
body[data-nav=home] .stat.most{--cc:#e8e0d0}
body[data-nav=home] .stat.fall{--cc:#e23b3b}
body[data-nav=home] .stat .k{color:var(--ink);opacity:.72}
body[data-nav=home] .stat .v,body[data-nav=home] .stat .v.bad{color:var(--ink);font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:38px;letter-spacing:-.02em}
body[data-nav=home] .stat .h{color:var(--ink);font-family:var(--wide);font-stretch:125%;font-weight:800;font-size:15px}
body[data-nav=home] .stat p{color:var(--ink);opacity:.82}
/* tier letters: solid squares, dark letter */
body[data-nav=home] .tier{grid-template-columns:60px minmax(0,1fr)}
body[data-nav=home] .tier .g{--tc:#9ca3af;background:var(--tc);color:var(--ink);font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:24px;border-bottom-color:rgba(0,0,0,.28)}
body[data-nav=home] .tier .g.sp{--tc:#f472b6}body[data-nav=home] .tier .g.s{--tc:#f87171}body[data-nav=home] .tier .g.a{--tc:#fdba74}
body[data-nav=home] .tier .g.b{--tc:#fde68a}body[data-nav=home] .tier .g.c{--tc:#bbf7d0}body[data-nav=home] .tier .g.d{--tc:#9ca3af}

/* ── components (style pass, phase 4). Every class here starts mz- so nothing on the site can collide. ── */
/* insight cards: hero cut-out breaks out of the top, black stamp, huge stat, name chip, one sentence of why */
.mz-ins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-top:58px;margin-top:6px}
.mz-card{--cc:var(--panel);position:relative;isolation:isolate;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;color:var(--ink);transition:transform .22s cubic-bezier(.2,.8,.3,1.3)}
.mz-card:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cc) var(--noise);clip-path:polygon(0 8px,8px 0,44% 0,46% 5px,48% 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,30% 100%,28% calc(100% - 5px),26% 100%,0 100%,0 62%,4px 60%,0 58%)}
.mz-card:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 45%);clip-path:polygon(0 8px,8px 0,44% 0,46% 5px,48% 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,30% 100%,28% calc(100% - 5px),26% 100%,0 100%,0 62%,4px 60%,0 58%)}
.mz-card.mz-lead{--cc:var(--accent)}.mz-card.mz-sleeper{--cc:#4f7fd9}.mz-card.mz-most{--cc:#e8e0d0}.mz-card.mz-fall{--cc:#e23b3b}
.mz-card.skel{min-height:340px}.mz-card.skel:before,.mz-card.skel:after{display:none}
.mz-art{position:absolute;left:50%;top:-52px;transform:translateX(-50%);height:236px;width:auto;max-width:none;pointer-events:none;filter:drop-shadow(0 12px 14px rgba(0,0,0,.45));-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 46%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 46%,#000 62%,transparent 100%);transition:transform .22s cubic-bezier(.2,.8,.3,1.3)}
.mz-card:hover{transform:translateY(-3px)}.mz-card:hover .mz-art{transform:translateX(-50%) translateY(-6px) scale(1.04)}
.mz-in{position:relative;padding:0 16px 16px}
.mz-stamp{display:inline-block;background:#0b0a0d;color:#fff;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px 2px;line-height:1.3}
.mz-v{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:42px;line-height:1;letter-spacing:-.02em;margin:10px 0 8px;font-variant-numeric:tabular-nums}
.mz-nm{display:inline-block;background:#e8e0d0;color:var(--ink);border:1.5px solid var(--ink);font-family:var(--wide);font-stretch:125%;font-weight:800;font-size:12px;letter-spacing:.02em;text-transform:uppercase;padding:3px 8px 2px}
.mz-in p{margin:10px 0 0;font-family:var(--sans);font-size:13px;line-height:1.42;color:var(--ink);opacity:.86}
.mz-sum{margin:18px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--fg);opacity:.72}
.mz-sum b{font-weight:600;color:var(--fg)}.mz-sum i{font-style:normal;margin:0 10px;opacity:.4}
/* meta health score, right of the heading */
.mz-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.mz-head>div:first-child{min-width:0;flex:1 1 420px}
.mz-health{text-align:right;padding-bottom:14px}
.mz-hl{display:flex;justify-content:flex-end;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.mz-hl span{opacity:.55}
.mz-hl b{background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:10px;padding:2px 7px 1px;clip-path:polygon(3px 0,100% 0,calc(100% - 3px) 100%,0 100%)}
.mz-hn{margin-top:4px;line-height:1}.mz-hn b{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:46px;color:var(--accent);letter-spacing:-.02em}
.mz-hn small{font-family:var(--mono);font-size:13px;opacity:.5;margin-left:2px}
.mz-hb{display:flex;justify-content:flex-end;gap:3px;margin-top:8px}.mz-hb i{width:18px;height:6px;background:rgba(255,255,255,.12)}.mz-hb i.on{background:var(--accent)}
.mz-health p{margin:7px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.04em;opacity:.45}
/* tier list: vertical hero tiles, not pills */
body[data-nav=home] .tier .row{gap:8px 6px;align-items:flex-start}
.mz-ht{display:flex;flex-direction:column;align-items:center;gap:3px;width:62px;text-align:center}
.mz-ht img{width:40px;height:40px;border-radius:4px;object-fit:cover;background:var(--panel2)}
.mz-ht b{font-family:var(--sans);font-size:11px;font-weight:600;line-height:1.15;max-width:62px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mz-ht span{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--good)}.mz-ht span.wd{color:var(--bad)}
/* "also on" cards: solid colour, bold black line art, stamp, big number */
.mz-also-s{padding-top:6px}
.mz-also{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:10px}
.mz-ac{--cc:var(--panel);position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:300px;padding:14px 16px 16px;color:var(--ink);transition:transform .22s cubic-bezier(.2,.8,.3,1.3)}
.mz-ac:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cc) var(--noise);clip-path:polygon(0 8px,8px 0,44% 0,46% 5px,48% 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,30% 100%,28% calc(100% - 5px),26% 100%,0 100%,0 62%,4px 60%,0 58%)}
.mz-ac:hover{transform:translateY(-4px) rotate(-.6deg)}
.mz-ac .mz-stamp{align-self:flex-start}
.mz-la{display:block;width:100%;height:112px;margin:18px 0 14px;fill:none;stroke:var(--ink);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.mz-an{display:flex;align-items:baseline;gap:7px;margin-top:auto}
.mz-an b{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:26px;line-height:1}
.mz-an small{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.mz-ac h3{margin:6px 0 4px;font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:17px;text-transform:uppercase;letter-spacing:-.01em}
.mz-ac p{margin:0;font-size:12.5px;line-height:1.4;opacity:.84}
@media (max-width:1100px){.mz-ins,.mz-also{grid-template-columns:repeat(2,minmax(0,1fr))}.mz-ins{row-gap:74px}}
@media (max-width:900px){.mz-health{text-align:left}.mz-hl,.mz-hb{justify-content:flex-start}}
@media (max-width:520px){.mz-ac h3{font-size:min(17px,3.3vw)}.mz-ins{grid-template-columns:minmax(0,1fr)}.mz-sum i{display:block;height:0;overflow:hidden;margin:0}}
@media (prefers-reduced-motion:reduce){.mz-card,.mz-art,.mz-ac{transition:none}}

/* ── one menu everywhere: the side menu keeps its own font whatever the page uses ─────────────── */
.side,.topbar{font-family:var(--font-body)}
.side .it{font-weight:600;font-size:14px}
/* hero links on the home page */
a.mz-card{text-decoration:none}a.mz-ht{color:inherit;border-radius:4px;padding:2px 0;transition:transform .15s,background .15s}
a.mz-ht:hover{transform:translateY(-2px);background:rgba(255,255,255,.05)}a.mz-ht:hover b{color:var(--accent)}
.mz-more{margin-left:auto;padding-bottom:16px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.mz-more:hover{text-decoration:underline}
/* ── wide screens: every page's column sits in the middle of the space right of the menu ──────── */
body:not([data-nav=home]):not([data-nav=heroes]):not([data-nav=items]):not([data-nav=board]):not([data-nav=patches]):not([data-nav=players]):not([data-nav=matches]) .main{max-width:none}
body:not([data-nav=home]):not([data-nav=heroes]):not([data-nav=items]):not([data-nav=board]):not([data-nav=patches]):not([data-nav=players]):not([data-nav=matches]) .main>*{max-width:1360px;margin-left:auto;margin-right:auto}
@media (max-width:600px){.cards{height:290px}.card{width:132px;height:196px;padding:10px}.cards .card.l{--r0:-12deg;--x0:-86px}.cards .card.r{--r0:12deg;--x0:86px}.card .n{font-size:19px}.card .w{font-size:15px}.card .tag{font-size:9.5px;padding:3px 8px}}
/* smooth page switches (Chrome/Edge cross-document view transitions): the rail, top bar, player header
   and tab strip are named so they hold still; only the rest crossfades, quickly */
@view-transition{navigation:auto}
.side{view-transition-name:rail}.topbar{view-transition-name:topbar}
.phead{view-transition-name:phead}.ptabs{view-transition-name:ptabs}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
::view-transition-group(phead),::view-transition-group(ptabs),::view-transition-group(rail),::view-transition-group(topbar){animation-duration:0s}
/* player tabs: the header and tab strip stay put, so the old tab's content leaves at once and the new one fades in.
   A crossfade showed both tabs' text on top of each other for a moment. */
:root:has(.ptabs)::view-transition-old(root){animation:none;opacity:0}
:root:has(.ptabs)::view-transition-new(root){animation:vt-in .14s ease-out both}
@keyframes vt-in{from{opacity:0}to{opacity:1}}
.phead.instant .splash,.phead.instant .render{transition:none!important}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ── crowns (2026-10-16): the menu chip and the /crowns page (the looks, the shop and customize: crowns.css) ── */
.cr-i{width:1em;height:1em;fill:currentColor;flex:none;vertical-align:-.12em}
.side .btn.cr{color:var(--green);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}.side .btn.cr svg{fill:currentColor;stroke:none;width:17px;height:17px}
.side .btn.cr b{font-weight:800}.side .btn.cr.on{background:var(--green);color:var(--green-ink)}
.topbar .tcr{margin-left:auto;display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:8px;color:var(--green);font-family:var(--display);font-weight:800;font-size:16px}
.cr-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cr-top .big{font-size:52px;color:var(--green);display:flex}
.cr-top h1{font-family:var(--display);font-weight:800;font-size:40px;text-transform:uppercase;line-height:1}
.cr-top .bal{margin-left:auto;text-align:right}.cr-top .bal b{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:44px;color:var(--green);line-height:1}
.cr-top .bal small{display:block;color:var(--dim);font-size:13px;margin-top:4px}.cr-top .bal small a{color:var(--green)}
.cr-lede{margin:12px 0 0;font-size:16px;color:var(--dim);max-width:640px;line-height:1.5}
/* the early-tester line on /app and /crowns (assets/early.js): one line, the spots left in full-strength text */
.early{margin:12px 0 0;font-size:14.5px;color:var(--dim);line-height:1.5}.early b{color:var(--fg);font-weight:600}
.crg{margin-top:14px}.crg:first-of-type{margin-top:0}
.crg .t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:9px}
.crg .t b{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.crg .t span{font-size:12.5px;color:var(--dim)}
.crq{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center}
.crq+.crq{margin-top:8px}.crq.hid{border-style:dashed}
.crq .n{font-weight:600;font-size:15px}
.crq .tag{display:inline-block;margin-left:6px;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line2);border-radius:4px;padding:2px 6px;vertical-align:2px}
.crq .rw{display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:7px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);color:var(--green);font-family:var(--display);font-weight:800;font-size:16px}
.crq .rw.got{color:var(--dim);border-color:var(--line2)}
.crq .pb{grid-column:1/-1;display:flex;align-items:center;gap:10px}
.crq .pb i{flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}.crq .pb i b{display:block;height:100%;background:var(--green);border-radius:4px}
.crq .pb span{font-size:12.5px;color:var(--dim);min-width:52px;text-align:right}.crq .pb span.ok{color:var(--green);font-weight:600}
.crq .d{grid-column:1/-1;font-size:13px;color:var(--dim)}
.cr-lad{grid-column:1/-1;position:relative;height:46px;margin:6px 12px 0}
.cr-lad i{position:absolute;left:0;right:0;top:20px;height:7px;border-radius:4px;background:rgba(255,255,255,.08)}.cr-lad i b{display:block;height:100%;background:var(--green);border-radius:4px}
.cr-lad .st{position:absolute;top:0;transform:translateX(-50%);font-family:var(--display);font-weight:700;font-size:13px;color:var(--dim)}
.cr-lad .st:after{content:"";display:block;width:2px;height:16px;background:var(--line2);margin:3px auto 0}
.cr-lad .st.ok{color:var(--green)}.cr-lad .st.ok:after{background:var(--green)}
.cr-lad .pay{position:absolute;top:32px;transform:translateX(-50%);font-size:12px;color:var(--dim);white-space:nowrap}.cr-lad .pay.ok{color:var(--green)}
.cr-prev{position:relative;height:150px;border-radius:12px;overflow:hidden;background:#100e14;border:1px solid var(--line2)}
.cr-app{font-size:13.5px;color:var(--dim);margin:10px 0 0}.cr-app a{color:var(--green)}
/* what crowns are: four cards, two across (one on a phone) */
.cr-ex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.cr-ex h2{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);margin:0 0 12px}
.cr-ex h2 svg{width:24px;height:24px;flex:none;fill:none;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cr-ex ul,.cr-ex ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;font-size:15px;line-height:1.4;color:var(--dim)}
.cr-ex li{position:relative;padding-left:20px}
.cr-ex ul li:before{content:"";position:absolute;left:3px;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--green)}
.cr-ex li b{color:var(--fg);font-weight:600}.cr-ex a{color:var(--green)}
.cr-ex ol{counter-reset:st}.cr-ex ol li{counter-increment:st;padding-left:30px}
.cr-ex ol li:before{content:counter(st);position:absolute;left:0;top:-1px;width:21px;height:21px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:12.5px;color:var(--fg)}
.cr-ex ol li.ok{color:var(--mute)}.cr-ex ol li.ok:before{content:"\2713";border-color:var(--green);color:var(--green)}
.cr-ex .pays li{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cr-ex .pays em{font-style:normal;flex:none;display:flex;align-items:center;gap:5px;padding:2px 8px;border-radius:6px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);color:var(--green);font-family:var(--display);font-weight:800;font-size:14px;white-space:nowrap}
.cr-ex .pays em:empty{display:none}.cr-ex .pays em small{font-family:var(--body);font-weight:500;font-size:11.5px;color:var(--dim)}
@media (max-width:760px){.cr-ex{grid-template-columns:minmax(0,1fr)}}
/* the app-theme try-on: a sketch of the companion app in the theme's colour (--mk, set by crowns.js) */
.cr-mock{--mk:#7cc8f0;padding:14px 16px;display:flex;flex-direction:column;gap:11px}.cr-mock[hidden]{display:none}
.cr-mock .tabs{display:flex;gap:6px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.cr-mock .tabs i{font-style:normal;padding:3px 8px;border-radius:5px}.cr-mock .tabs i.on{color:var(--fg);box-shadow:inset 0 -2px 0 var(--mk)}
.cr-mock .q{display:flex;justify-content:space-between;align-items:center;font-family:var(--body);font-style:normal;font-weight:600;font-size:14px;color:var(--fg)}
.cr-mock .q em{font-style:normal;display:flex;align-items:center;gap:4px;color:var(--mk);font-family:var(--display);font-weight:800;font-size:15px}
.cr-mock .pb{height:7px;border-radius:4px;background:rgba(255,255,255,.08)}.cr-mock .pb b{display:block;width:60%;height:100%;border-radius:4px;background:var(--mk)}
.cr-mock .mk{width:22px;height:22px;flex:none;color:#F1EFE8;margin-right:4px}.cr-mock .mk circle{fill:var(--mk)}.cr-mock .tabs{align-items:center}

/* the fold, Deadlock Labs style (2026-10-16): the panel slides; opening, the rows trickle in top to bottom (shell.js sets --i) */
.side{transition:width .2s cubic-bezier(.3,.7,.3,1),transform .2s}.main{transition:margin-left .2s cubic-bezier(.3,.7,.3,1)}
@keyframes side-row{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
html.trickle .side .top,html.trickle .side .sq,html.trickle .side nav>*,html.trickle .side .bot>*{animation:side-row .2s ease-out both;animation-delay:calc(70ms + var(--i,0) * 22ms)}
@media (prefers-reduced-motion:reduce){.side,.main{transition:none}html.trickle .side *{animation:none!important}}

/* the update banner (2026-10-16): never an empty box while the feed loads; a big update's key art sits wide */
.side .hub[hidden],.side .hubdot[hidden]{display:none!important}
.side .hub .art.big{width:70%;right:0;background-size:cover;background-position:50% 18%;opacity:.95}
.side .hubdot .art.big{background-size:260%;background-position:50% 14%}

/* the menu search's drop-down (2026-10-16, after Deadlock Labs): heroes, then players, under the box */
.side .sq{position:relative}
.sqr{position:absolute;left:-1px;right:-1px;top:calc(100% + 4px);z-index:80;max-height:min(70vh,560px);overflow-y:auto;background:#0e0d11;border:1px solid var(--line2);border-radius:6px;padding:4px 0 6px;box-shadow:0 14px 30px rgba(0,0,0,.6);scrollbar-width:thin}
.sqr[hidden]{display:none}
.sqr h5{margin:10px 14px 4px;font:800 11px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.sqr a{position:relative;display:flex;align-items:center;gap:10px;padding:7px 14px;color:var(--fg);font-size:14px;font-weight:600}
.sqr a:hover,.sqr a.sel{background:rgba(255,255,255,.07)}
.sqr a.sel:before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;background:var(--accent)}
.sqr img{width:32px;height:32px;flex:none;object-fit:cover;border-radius:3px;background:#1a181f}
.sqr .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sqr small{display:block;font:500 11px/1.3 var(--mono,ui-monospace),monospace;color:var(--mute)}
.sqr .ty{font:800 10px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border:1px solid currentColor;padding:2px 5px 1px;transform:rotate(-2deg)}
.sqr .none{padding:8px 14px;color:var(--dim);font-size:13px}

/* /patches = Valve's notes (2026-10-16: "this is for the patch. like patch notes"): one card per post */
.pn-post .hz-ch em{display:flex;align-items:center;gap:10px}
/* the head never scrolls: the tilted New hero tag stuck out a pixel past .hz-card > div's overflow-x:auto and Windows
   drew its scroll arrows beside the date (his 10-31) */
.pn-post .hz-ch{overflow:visible}
.pn-k{font:800 10px var(--display);letter-spacing:.14em;text-transform:uppercase;padding:3px 6px 2px;border:1px solid var(--line2);color:var(--dim)}
.pn-k.pn-hero{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);transform:rotate(-2deg)}
.pn-k.pn-update{color:var(--accent);border-color:var(--accent)}
.pn-body{font-size:14.5px;line-height:1.6;color:var(--fg)}
.pn-post:not(.open) .pn-body{max-height:0;overflow:hidden}
.pn-post:not(.open) .pn-mv:empty{display:none}
.pn-body p{margin:.5em 0;max-width:80ch;color:var(--dim)}
.pn-body a{color:var(--accent)}
.pn-body ul{margin:.3em 0 .8em;padding-left:1.2em}
.pn-body li{margin:.25em 0}
.pn-img{display:block;width:100%;max-width:760px;height:auto;margin:10px 0;border-radius:4px}
.pn-g{margin:14px 0 4px}
.pn-g h4{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:800 15px var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.pn-g h4 a{display:flex;align-items:center;gap:10px;color:inherit}
.pn-g h4 img{width:30px;height:30px;object-fit:cover;border-radius:50%;background:#1a181f}
.pn-g h4 small{font:600 12px var(--body);font-variant-caps:small-caps;letter-spacing:var(--track-caps);text-transform:none;color:var(--mute)}
.pn-g ul{margin:0 0 0 40px;padding:0;list-style:none}
.pn-g li{position:relative;padding:3px 0 3px 14px;color:var(--dim)}
.pn-g li:before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;background:var(--accent);transform:rotate(45deg)}
.pn-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.pn-tog{background:none;border:1px solid var(--line2);color:var(--fg);padding:7px 12px;font:800 12px var(--display);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.pn-foot .pg-more{margin:0}
.pn-foot .pg-ext{margin:0 0 0 auto}
.pn-mv:not(:empty){margin-top:12px}

/* hero roles in the search, coloured like Deadlock Labs: assassin red, mystic purple, brawler orange, marksman blue */
.sqr .ty{border:0;padding:3px 6px 2px}
.sqr .ty-assassin{color:#ff6b6b;background:rgba(229,72,77,.18)}
.sqr .ty-mystic{color:#c49bff;background:rgba(169,112,255,.18)}
.sqr .ty-brawler{color:#ffb35c;background:rgba(240,150,50,.18)}
.sqr .ty-marksman{color:#6fcbff;background:rgba(63,170,232,.18)}
.sqr{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}

/* folded by default (2026-10-16): the title and a one-line summary; click either to open */
.pn-post .hz-ch,.pn-sum{cursor:pointer}
.pn-sum{margin:2px 0 0;color:var(--dim);font-size:14px;font-weight:600;font-variant-caps:small-caps;letter-spacing:var(--track-caps)}
.pn-post.open .pn-sum{color:var(--mute);font-size:12.5px}
.pn-post:not(.open) .pn-foot{margin-top:8px}

/* player tabs swap in place (player-common.js): the new tab's panels fade in under a header that never moves */
.tabin{animation:vt-in .16s ease-out both}
@media (prefers-reduced-motion:reduce){.tabin{animation:none}}

/* fonts (2026-10-21, his brainstorm, ask 100): TWO faces. Headings and big figures in Archivo 900; everything else -
   words, labels, menu, buttons, small text, table headers - in Source Serif 4 (Outfit and Barlow Condensed before).
   Labels keep their own capitals and spacing; the serif tops out at 600, so a 700/800 label draws at 600. Kept: the
   handwriting (Caveat), the wordmark (Limelight), the name fonts sold in the shop, the match page's game faces. */
:root{--font-body:"Source Serif 4",Georgia,serif;--body:var(--font-body);--sans:var(--font-body);--mono:var(--font-body);--display:var(--font-body);--fig:"Archivo","Archivo Black","Arial Black",Impact,sans-serif}
body{font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.55}
html .err h2,html .mhh h2,html .hero h1,html .sec h2,html .apph h1,html .cr-top h1,html .cr-ex h2,html .lk-hd h2,html .sp-head h2,html .sp h3,html .card .n{font-family:var(--wide);font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
html .mh .kda .big,html .stat .v,html .tier .g,html .pool .v,html .vsrow .val,html .cr-top .bal b,html .lk-bal,html .cr-ut em{font-family:var(--fig);font-stretch:100%;font-weight:900}
/* a player's name on the card is the shop's business, never the site's fonts (his rule, 2026-10-21: "that should be
   straight from the customizations"): the free Plain font stays the narrow bold face it always was (.idcard h1 above),
   and a bought name font replaces it */
/* the card's buttons and feed line (2026-10-21): the serif is wider, so they took his .08em spacing and a little less
   padding, and under 1500px they sit at the right edge, over the art, instead of beside the card; between 901 and 1180
   the card and buttons stack, as on a phone */
html .chipb,html .acts small{letter-spacing:.08em}html .acts .chipb{padding:0 12px}
@media (max-width:1500px){html .acts{right:26px}}
@media (max-width:1180px) and (min-width:901px){html .phead{height:auto;padding-bottom:16px}html .idcard{position:relative;left:0;top:0;margin:16px;transform:none}html .acts{position:relative;right:auto;top:auto;align-items:flex-start;padding:0 16px}html .acts .r{justify-content:flex-start}html .acts small{text-align:left;margin:0}}
html .perf small,html .rankrow small{white-space:nowrap;letter-spacing:.08em}   /* one line each: AVG KILLS, 49 RANKED GAMES */
html .perf .wr small{white-space:normal}   /* WIN RATE sits in two lines beside its circle, as before */
.side,.topbar,.fly{font-family:var(--sans)}

/* match rows: "standard" in green read as a win (2026-10-17); it goes neutral like the match page's .mode.std */
.chip.on.md-standard{background:rgba(226,221,214,.08);color:var(--fg);box-shadow:inset 0 0 0 1px rgba(226,221,214,.22)}

/* ── the one tooltip (assets/tip.js; the companion app wears the same one, dark) ─────────────────────────
   heading, one-line explainer, label/value rows, one link; every part optional. Cream paper, a hair off level. */
.tip{position:fixed;z-index:120;max-width:300px;background:var(--paper);color:var(--paper-ink);border:1px solid var(--line2);border-radius:6px;padding:12px 14px;box-shadow:0 14px 30px rgba(0,0,0,.55);
  display:flex;flex-direction:column;gap:6px;font:400 12.5px/1.4 var(--sans);text-align:left;letter-spacing:0;text-transform:none}
.tip[hidden]{display:none}
.tip::after{content:"";position:absolute;left:var(--ax,50%);bottom:-5px;width:10px;height:10px;margin-left:-5px;background:var(--paper);border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);transform:rotate(45deg)}
.tip.below::after{bottom:auto;top:-5px;border:0;border-left:1px solid var(--line2);border-top:1px solid var(--line2)}
.tip-h{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-ink)}   /* neutral, his ask 10-29 */
.tip-x{color:var(--paper-dim)}
.tip-x:only-child{font-weight:600;color:var(--paper-ink)}
.tip-rows{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-top:7px}
.tip-r{display:flex;justify-content:space-between;gap:16px}.tip-r span{color:var(--paper-dim)}.tip-r b{font-weight:700;text-align:right}
.tip-a{margin-top:3px;background:var(--green);color:var(--green-ink);border-radius:4px;padding:6px 10px;font-weight:700}
.tip-a:hover{filter:brightness(1.08)}

/* match rows: the place in the lobby by grade and the grade itself (player.js), once the match details arrive */
.mh .meta .gp,.mh .meta .gg{font-family:var(--display);font-weight:700;font-size:12px;line-height:1;padding:4px 6px;border-radius:3px;min-width:26px;text-align:center;color:var(--ink);cursor:help}
.mh .meta .gp{background:var(--chip);color:var(--fg);box-shadow:inset 0 0 0 1px rgba(226,221,214,.22)}
.mh .meta .gp.p1{background:var(--gold);color:var(--ink);box-shadow:none}.mh .meta .gp.p2{background:#cfd6dd;color:var(--ink);box-shadow:none}.mh .meta .gp.p3{background:#c47a2c;color:var(--ink);box-shadow:none}
.mh .meta .gg{background:var(--gc)}

/* ── Stats tabs (Performance, Heroes, Laning): the shared design tokens (2026-10-20: "a future redesign only
   touches the drawing and the variables, never the numbers"). A redesign changes these and the drawing code
   (performance.js, heroes.js, laning.js); the numbers live in perf.js, herostats.js and lanes.js. The tab rules below
   write no colour, type style or space of their own. ── */
:root{
  /* results and accents */
  --st-win:#3fd57f;--st-loss:#f0605d;--st-loss-bar:#e23b3b;--st-mid:#f59e0b;--st-gold:#f2c94c;--st-blue:#4f7fd9;--st-sky:#8fc7ff;--st-violet:#c9a8f5;--st-sold:#9a8f86;
  /* the item slots */
  --slot-weapon:#f2a65a;--slot-vitality:var(--st-win);--slot-spirit:var(--st-violet);
  /* the hero pool's five rings, the damage split's four parts */
  --pool-1:#f2c94c;--pool-2:#4f7fd9;--pool-3:#b48cf2;--pool-4:#3fd57f;--pool-5:#e0a45e;
  --split-1:#f0605d;--split-2:#f2c94c;--split-3:#8fc7ff;--split-4:#b48cf2;
  /* the lobby chart in the cream tooltip, dark enough to read there (3.3:1 or better): you, your team, the enemy */
  --lobby-me:#188a48;--lobby-mate:#ad6a00;--lobby-foe:#4d75c3;
  /* dark surfaces */
  --st-well:#15121a;--st-tile:#1a1620;--st-tile-hi:#241f2c;--st-track:#2a2530;--st-art:#1c1822;--st-rule:#3a3442;--st-rule-2:#4a4352;
  --st-hover:rgba(226,221,214,.03);--st-open:rgba(226,221,214,.04);--st-open-body:rgba(226,221,214,.02);
  --st-on-grade:#0e1012;--st-on-mark:#08070a;--st-edge:3px;
  /* the cream paper card */
  --paper:#e8e0d0;--paper-ink:#15121a;--paper-dim:#5b544c;--paper-up:#1f6b42;--paper-dn:#a12a24;--paper-shadow:0 10px 24px rgba(0,0,0,.35);
  /* type: the faces are --mono and --wide above; these are the styles, sizes and tracking */
  --t-label:600 11px var(--mono);--t-button:600 12px var(--mono);--t-strong:700 12px var(--mono);--t-tag:700 11px var(--mono);--t-tag-s:700 10px/1.15 var(--mono);
  --t-num:500 14px var(--mono);--t-meta:500 12px var(--mono);--t-small:500 11px var(--mono);--t-tiny:500 10px var(--mono);
  --t-name:900 18px/1.1 var(--wide);--t-initials:900 15px var(--wide);--t-stat:800 20px var(--wide);--t-value:800 22px var(--wide);--t-grade:900 16px/1 var(--wide);
  --t-box:900 22px var(--wide);--t-headline:900 28px var(--wide);--t-hero:900 40px/1 var(--wide);--t-stretch:125%;
  --fw-5:500;--fw-6:600;--lh-s:1.3;
  --fs-xs:12px;--fs-s:13px;--fs-m:14px;--fs-l:15px;--fs-xl:18px;--fs-grade-l:20px;--fs-hero-s:30px;
  --tr-xs:.06em;--tr-s:.08em;--tr-m:.1em;--tr-l:.12em;
  /* space and corners */
  --sp-1:2px;--sp-2:4px;--sp-3:6px;--sp-4:8px;--sp-5:10px;--sp-6:12px;--sp-7:16px;--sp-8:20px;--sp-9:24px;--sp-10:32px;
  --r-1:2px;--r-2:3px;--r-3:4px;--r-4:6px;
  /* the Heroes rank chart's frame in the svg's own units (heroes.js reads these): width, height, then the margins left
     (the rank names), right, top and bottom (the dates); a phone's is narrower, below */
  --rk-w:640;--rk-h:170;--rk-l:92;--rk-r:14;--rk-t:14;--rk-b:24;
  /* the Laning tab: the three lanes, the map, the souls' sources, the cream lane → game card, the gold EARNED card */
  --lane-yellow:#f2c94c;--lane-blue:#4f7fd9;--lane-green:#3fd57f;--lane-off:#4a4550;
  --src-lane:#d9a93b;--src-orbs:#4f7fd9;--src-kills:#3fd57f;--src-jungle:#b48cf2;--src-obj:#e0a45e;--src-crates:#9a9187;--src-denies:#b08a6a;
  --map-bg:#121016;--map-them-bg:#1e1216;--map-us-bg:#101b15;--map-them-line:rgba(240,96,93,.6);--map-us-line:rgba(63,213,127,.55);--map-boss:#6d6576;
  --map-veil:rgba(18,16,22,.85);--card-shadow:0 6px 16px rgba(0,0,0,.4);--st-even:#8a8178;--vault:#f2c94c;
  --paper-dim-2:#4d463f;--paper-label:#3b352f;--paper-track:#d6cdbd;--paper-win:#1d7a44;--paper-win-ink:#136c38;--paper-even:#6f665c;--paper-loss:#c0453f;--paper-loss-ink:#a32a25;
  --t-lane:900 17px/1.1 var(--wide);--t-vs:600 13px var(--mono);--t-chip:600 9px var(--mono);--t-pct:700 17px var(--mono);--t-vault:900 28px/1 var(--wide);--t-stretch-s:115%;
  --tr-xl:.2em;--lh-xs:1.25;--lh-m:1.45;--lh-l:1.5;--fs-2xs:10px;--fs-vault-s:19px;--r-5:8px;--r-6:10px;--r-pill:999px;
  /* the souls flow (laning.js reads the first five): its height, a band's floor (a label is two lines), the gap between
     bands, the deaths arrow's thinnest and thickest; then the labels' column, the source ticks, the EARNED card, the
     "lost to deaths" line's drop; the map's glow (laning.js adds it to a path's width) and its blur */
  --cv-w:720;--cv-h:280;--cv-l:44;--cv-r:96;--cv-t:12;--cv-b:30;   /* the lead chart's frame, in the svg's own units */
  --cv-chip-w:76;--cv-chip-h:22;--cv-chip-gap:8;                 /* its end chips in the right margin, and the gap around its labels */
  --flow-h:440px;--flow-min:34px;--flow-gap:8px;--flow-loss-min:6px;--flow-loss-max:40px;
  --flow-labs:170px;--flow-tick-gap:8px;--flow-tick:7px;--flow-card:150px;--flow-lost:38px;--map-glow:10px;--map-blur:5px;
  /* the Heroes buy order (heroes.js reads these): a lane, the first row's top, a tag, the gap between the rows, a minute
     label's row and its own height, the plot's foot padding, the row names' offset, the plot's first height, the lanes
     a row may take; then the frame around it */
  --tl-lane:30px;--tl-top:6px;--tl-tag:26px;--tl-gap:46px;--tl-label-row:19px;--tl-label:14px;--tl-pad:6px;--tl-row-off:10px;--tl-h:170px;--tl-lanes:4;
  --tl-names:76px;--tl-side:22px;--tl-foot:34px;--tl-axis:18px;--tl-band-label:32px;--tl-min:560px;--tl-min-phone:820px;
  --tl-band-early:rgba(63,213,127,.05);--tl-band-late:rgba(240,96,93,.04);
  /* the Laning tab's lower half (2026-10-20): a section's title, a partner's win rate, a partner's name, the day over a
     run of games, a game's numbers; the ink on a lost-lane stamp, the shade under a hero picture's name */
  --t-sec:900 24px/1.1 var(--wide);--t-big:900 30px/1 var(--wide);--t-card-name:900 13px/1.1 var(--wide);--t-day:600 22px/1 var(--hand);--t-num-b:800 15px var(--body);
  --st-on-loss:#2a0606;--art-scrim:linear-gradient(to top,rgba(8,7,10,.88),rgba(8,7,10,.5) 30%,rgba(8,7,10,0) 58%),linear-gradient(to left,var(--st-art) 56px,transparent 96px,transparent 190px,var(--st-art) 284px);--ln-edge:5px;--ln-glow:12px;
  /* the Performance tab's lower half (2026-10-20): a place on the hero race, a rank's name, a stat card's value, the
     handwritten arrow; a badge on the cream card, on the ladder, in a chip, by a stat and in the ladder's popup; the
     ladder's tallest bar, a hero's picture, the meter's dot; the meter's red-to-green and the badge's shadow */
  --t-place:900 34px/1 var(--wide);--t-rank:900 17px/1.05 var(--wide);--t-card-v:900 26px/1 var(--wide);--t-arrow:400 23px/1 var(--brush);--t-rank-s:900 14px/1.05 var(--wide);
  --pr-badge:110px;--pr-rung:54px;--pr-chip:20px;--pr-mini:22px;--pr-who:58px;--pr-bar:60px;--pr-pt:52px;--pr-dot:16px;--pr-h:0;
  --t-mark:900 64px/1 var(--wide);--pr-place:58px;--pr-kd:72px 52px 124px 58px;
  /* the Economy tab (2026-10-20): a hero's picture in the heat map, a cell's least height, a cell's heat (economy.js
     sets 0..1) and how strong the shade gets */
  --ec-pt:40px;--ec-cell:56px;--heat:0;--ec-heat-lo:.08;--ec-heat-span:.4;
  /* the game-style hover cards (step 7): the card's width, an icon in its head, the band over the head; an ability's
     band (items wear their shop colour, --slot-*) */
  --gc-w:320px;--gc-img:40px;--gc-band:4px;--gc-ability:var(--st-gold);
  --pr-meter-up:linear-gradient(90deg,rgba(63,213,127,.25),var(--st-win));--pr-meter-dn:linear-gradient(90deg,rgba(240,96,93,.25),var(--st-loss));--pr-meter:linear-gradient(90deg,var(--st-loss) 0,var(--st-track) 35%,var(--st-track) 65%,var(--st-win) 100%);--pr-badge-shadow:drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
@media (max-width:520px){:root{--pr-bar:24px;--t-mark:900 44px/1 var(--wide)}}   /* the ladder's bars and the rank card's mark on a phone */
@media (max-width:760px){:root{--flow-labs:108px;--flow-tick-gap:5px;--flow-tick:5px;--flow-card:92px;--cv-w:340;--cv-r:84}}   /* the souls flow and the lead chart on a phone */
@media (max-width:600px){:root{--rk-w:340}}   /* the rank chart on a phone: the names near their real size */
@media (max-width:360px){:root{--rk-w:280}}

/* ── Performance tab, top half (step 4, 2026-10-20; the mock "Site · Performance tab"): the mode buttons, the average
   grade on the cream card, four tiles, three insights and the form curve. The numbers: assets/perf.js ── */
.pf-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;margin:4px 0 16px}
.pf-title{display:flex;flex-direction:column;gap:2px}
.pf-kick{font:400 22px/1 var(--brush);color:var(--dim)}
.pf-title h2{margin:0;font:900 34px/1.05 var(--wide);font-stretch:125%;letter-spacing:.01em;text-transform:uppercase;color:var(--fg)}
.pf-modes{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.pf-modes button{background:var(--panel2);color:var(--fg);border:1px solid var(--panel-line);border-radius:4px;padding:8px 12px;font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.pf-modes button:hover{border-color:var(--line2)}
.pf-modes button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pf-none{padding:22px 16px;color:var(--dim);font-size:14px;background:var(--panel);border:1px solid var(--panel-line);border-radius:6px;margin-bottom:16px}
.pf-top{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.pf-top[hidden],.pf-ins[hidden],.pf-curve[hidden]{display:none}
.pf-card{flex:1 1 260px;max-width:320px;background:var(--paper);color:var(--paper-ink);border-radius:6px;padding:18px;display:flex;flex-direction:column;gap:10px;transform:rotate(-.6deg);box-shadow:var(--paper-shadow)}
.pf-tag{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);align-self:flex-start;padding:3px 7px;border-radius:3px}
.pf-big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pf-big b{font:900 72px/.9 var(--wide);font-stretch:125%}
.pf-big span{font:500 18px var(--mono);color:var(--paper-dim)}
.pf-scale{position:relative;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--st-loss-bar),var(--st-mid) 45%,var(--st-win))}
.pf-scale i{position:absolute;top:-4px;width:4px;height:18px;margin-left:-2px;background:var(--paper-ink);border-radius:2px}
.pf-trend,.pf-card .pf-note{font-size:13px;color:var(--paper-dim)}
.pf-trend b{color:var(--paper-ink)}.pf-trend b.up{color:var(--paper-up)}.pf-trend b.dn{color:var(--paper-dn)}
.pf-tiles{flex:1 1 300px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pf-tile{background:var(--panel);border:1px solid var(--panel-line);border-radius:6px;padding:14px;display:flex;flex-direction:column;gap:4px;min-width:0;color:var(--fg)}
a.pf-tile:hover{border-color:var(--line2)}a.pf-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pf-tile small{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.pf-tile b{font:800 30px/1.1 var(--wide);font-stretch:125%;white-space:nowrap}
.pf-tile b.g{color:var(--good)}.pf-tile b.r{color:var(--st-loss)}.pf-tile b.gc{color:var(--gc)}
.pf-tile>span{font-size:13px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-ins{flex:1 1 320px;display:flex;flex-direction:column;gap:10px}
.pf-in{--c:var(--accent);display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--panel-line);border-radius:6px;padding:12px}
.pf-in.st{--c:var(--st-win)}.pf-in.wk{--c:var(--st-loss)}.pf-in.hr{--c:var(--st-gold)}
.pf-in .mk{flex:none;width:40px;height:40px;border-radius:4px;display:grid;place-items:center;font:900 18px var(--wide);font-stretch:125%;background:var(--c);color:var(--st-on-mark)}
/* a read's badge (2026-10-20): the game's own icon for the stat, cut out in the badge's ink; denies = a soul struck through;
   the best / richest hero = the hero's face in a ring of the read's colour */
.pf-in .mk.ic::before{content:"";width:24px;height:24px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.pf-in .mk.ic-dn{position:relative}.pf-in .mk.ic-dn::after{content:"";position:absolute;inset:0;margin:auto;width:30px;height:3px;border-radius:2px;background:currentColor;box-shadow:0 0 0 2px var(--c);transform:rotate(45deg)}
.pf-in .mk.hf{overflow:hidden;background:var(--st-art);border:2px solid var(--c)}.pf-in .mk.hf img{width:100%;height:100%;object-fit:cover}
.pf-in .ic-souls_min,.pf-in .ic-spm{--ic:url("https://assets-bucket.deadlock-api.com/assets-api-res/icons/hud/icons/icon_souls.svg")}
.pf-in .ic-damage_min,.pf-in .ic-dmg{--ic:url("https://assets-bucket.deadlock-api.com/assets-api-res/icons/hud/core/icon_damage_bullet.svg")}
.pf-in .ic-kda{--ic:url("https://assets-bucket.deadlock-api.com/assets-api-res/icons/post_game/nav_icon_scoreboard.svg")}
.pf-in .ic-obj_min,.pf-in .ic-obj{--ic:url("https://assets-bucket.deadlock-api.com/assets-api-res/icons/minimap/objective_icon_t2.svg")}
.pf-in .ic-heal_min{--ic:url("https://assets-bucket.deadlock-api.com/assets-api-res/icons/icons/properties/heal.svg")}
.pf-in .ic-deaths{--ic:url("https://assets-bucket.deadlock-api.com/assets-api-res/icons/icons/properties/death.svg")}
.pf-in .ic-accuracy{--ic:url("https://assets-bucket.deadlock-api.com/assets-api-res/icons/builds/citadel_build_tag_headshots.svg")}
.pf-in .ic-lh,.pf-in .ic-dn{--ic:url("https://assets-bucket.deadlock-api.com/assets-api-res/icons/hud/icons/icon_soul.svg")}
.pf-in .ic-camp{--ic:url("https://assets-bucket.deadlock-api.com/assets-api-res/icons/minimap/neutral_large_psd.png")}.pf-in .mk.ic-camp::before{-webkit-mask-size:190%;mask-size:190%}
.pf-in .ic-taken{--ic:url("https://assets-bucket.deadlock-api.com/assets-api-res/icons/icons/properties/resist_bullet.svg")}
.pf-in .bd{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.pf-in .kd{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.pf-in .tx{font-size:14px;color:var(--fg)}
.pf-in .br{height:4px;border-radius:2px;background:var(--st-art)}.pf-in .br i{display:block;height:4px;border-radius:2px;background:var(--c)}
.pf-curve{background:var(--panel);border:1px solid var(--panel-line);border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:12px}
.pf-ch{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline}
.pf-ch h3{margin:0;font:900 18px var(--wide);font-stretch:125%;text-transform:uppercase;color:var(--fg)}
.pf-sub,.pf-curve .pf-note{font-size:13px;color:var(--dim)}
.pf-key{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px 14px;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.pf-key b{font-weight:400}.pf-key .w{color:var(--st-win)}.pf-key .l{color:var(--st-loss)}.pf-key .r{color:var(--st-blue)}
.pf-plot{position:relative;height:200px;display:grid;grid-template-columns:repeat(30,minmax(0,1fr));grid-template-rows:100%;align-items:end;gap:4px;border-bottom:1px solid var(--panel-line);margin-top:16px}
.pf-plot .mid{position:absolute;left:0;right:0;bottom:50%;border-top:1px dashed var(--st-rule-2);pointer-events:none}
.pf-bar{position:relative;display:block;min-height:3px;border-radius:2px 2px 0 0;background:var(--st-loss-bar)}
.pf-bar.w{background:var(--st-win)}
.pf-bar:hover,.pf-bar:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.pf-bar i{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:9px;line-height:1;font-style:normal;color:var(--st-blue)}
.pf-dates{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:4px;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.pf-dates span{white-space:nowrap;justify-self:center}.pf-dates span.a{justify-self:start}.pf-dates span.z{justify-self:end}
/* the lobby chart inside the one tooltip (tip.js data-tip-bars): every player in the game by grade, best first */
.tip-bars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;align-items:end;height:40px;margin-top:2px}
.tip-bars i{display:block;border-radius:var(--r-1);background:var(--paper-dim)}
.tip-bars i.lb-me,.tip-key i.lb-me{background:var(--lobby-me)}.tip-bars i.lb-mate,.tip-key i.lb-mate{background:var(--lobby-mate)}.tip-bars i.lb-foe,.tip-key i.lb-foe{background:var(--lobby-foe)}
.tip-key{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-5);font-size:var(--fs-xs);color:var(--paper-dim)}
.tip-key i{display:inline-block;width:var(--sp-4);height:var(--sp-4);border-radius:var(--r-1);margin-right:var(--sp-2)}
.tip-cap{font-size:12px;color:var(--paper-dim)}
@media (max-width:600px){.pf-card{max-width:none;transform:none}.pf-title h2{font-size:28px}.pf-modes{margin-left:0}.pf-key{margin-left:0}.pf-plot,.pf-dates{gap:2px}}

/* menu items in the all-caps face (2026-10-20, picked from three: "all caps looks cleaner"); the wordmark,
   section labels and banner keep theirs */
.side .it{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:15px}

/* ── Performance tab, lower half (2026-10-20, mockup "Performance lower half" v2; the sums: assets/standing.js): your
   badge and how you play among the players at it on a cream card, the ladder of ranks, the hero scoreboard as a race, you vs everyone
   as cards ahead and behind. Section titles wear the Laning tab's .ln-st. ── */
.pr-rank{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:var(--sp-8);align-items:start}
.pr-paper{display:flex;flex-direction:column;justify-content:space-evenly;align-self:stretch;gap:var(--sp-6);min-width:0;padding:var(--sp-8);background:var(--paper);color:var(--paper-ink);border-radius:var(--r-4);box-shadow:var(--paper-shadow);transform:rotate(-.6deg)}
.pr-paper .pf-tag{align-self:flex-start}
.pr-duo{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-3);text-align:center}
.pr-duo.one{grid-template-columns:auto minmax(0,1fr)}
.pr-duo figure{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:var(--sp-2);align-self:stretch;min-width:0;margin:0}
.pr-duo img{width:var(--pr-badge);max-width:100%;height:auto;filter:var(--pr-badge-shadow)}
.pr-duo b{font:var(--t-rank);font-stretch:var(--t-stretch-s);text-transform:uppercase}
.pr-k{font:var(--t-label);letter-spacing:var(--tr-l);text-transform:uppercase;color:var(--paper-label)}
.pr-arrow{max-width:4em;font:var(--t-arrow);color:var(--paper-win-ink);transform:rotate(-6deg)}
.pr-say{margin:0;font-size:var(--fs-m);line-height:var(--lh-m)}
.pr-chips{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.pr-chips span{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-4) var(--sp-1) var(--sp-2);background:var(--paper-track);border-radius:var(--r-pill);font-size:var(--fs-xs);color:var(--paper-ink)}
.pr-chips img{width:var(--pr-chip);height:auto}
.pr-chips i{font-style:normal;font-size:var(--fs-2xs);color:var(--paper-dim-2)}
.pr-vd .pr-mk{font:var(--t-mark);color:var(--paper-dim-2)}
.pr-vd.up .pr-mk,.pr-vd.up b{color:var(--paper-win-ink)}.pr-vd.down .pr-mk,.pr-vd.down b{color:var(--paper-loss-ink)}

.pr-lad{min-width:0}
.pr-ladder{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:var(--sp-3);align-items:end;padding:var(--sp-6) var(--sp-5) 0;background:var(--map-bg);border:1px solid var(--st-rule);border-radius:var(--r-6)}
.pr-rung{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);min-width:0;padding:var(--sp-3) var(--sp-1) 0;border:0;border-radius:var(--r-5);background:none;color:var(--dim);font:inherit;cursor:pointer}
.pr-rung:hover,.pr-rung.sel{background:var(--st-tile-hi)}
.pr-rung:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pr-rung img{width:100%;max-width:var(--pr-rung);height:auto;opacity:.55;transition:opacity .15s,transform .15s}
.pr-rung:hover img,.pr-rung.me img,.pr-rung.sel img{opacity:1}
.pr-rung.me img{transform:scale(1.18)}
.pr-rung small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-2xs);line-height:var(--lh-xs)}
.pr-rung em{padding:var(--sp-1) var(--sp-2);border-radius:var(--r-2);font:var(--t-tag-s);font-style:normal;letter-spacing:var(--tr-m);text-transform:uppercase;white-space:nowrap}
.pr-rung.me em{background:var(--st-gold);color:var(--paper-ink)}
.pr-rung .pr-sp{visibility:hidden}
.pr-ladder>.empty{grid-column:1/-1}
.pr-bar{width:70%;height:calc(var(--pr-bar) * var(--pr-h) / 100);min-height:2px;background:var(--st-track);border-radius:var(--r-2) var(--r-2) 0 0}
.pr-rung.me .pr-bar{background:var(--st-gold)}
.pr-who{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--sp-6);margin-top:var(--sp-6);padding:var(--sp-6) var(--sp-7);background:var(--panel2);border:1px solid var(--st-rule);border-radius:var(--r-6)}
.pr-who:empty{display:none}
.pr-who img{width:var(--pr-who);height:auto}
.pr-who b{font:var(--t-rank);font-stretch:var(--t-stretch-s);text-transform:uppercase}
.pr-who p{margin:var(--sp-1) 0 0;font-size:var(--fs-s);color:var(--dim)}
.pr-who p span{color:var(--fg);font-weight:var(--fw-6)}
.pr-rec{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-5) var(--sp-7);margin-top:var(--sp-6);font-size:var(--fs-s);color:var(--dim)}
.pr-rec b{color:var(--fg)}
.pr-l10{display:inline-flex;gap:var(--sp-1);vertical-align:middle}
.pr-l10 i{width:14px;height:14px;border-radius:var(--r-2)}.pr-l10 .w{background:var(--st-win)}.pr-l10 .l{background:var(--st-loss)}

.pr-to{font:var(--t-button);letter-spacing:var(--tr-l);text-transform:uppercase;color:var(--dim);text-decoration:none}
.pr-to:hover,.pr-to:focus-visible{color:var(--accent)}
.pr-race{display:flex;flex-direction:column;gap:var(--sp-2)}
.pr-rr{display:grid;grid-template-columns:var(--pr-place) var(--pr-pt) minmax(110px,150px) minmax(0,1fr) auto;align-items:center;gap:var(--sp-6);padding:var(--sp-4) var(--sp-6);border-radius:var(--r-6);color:var(--fg);text-decoration:none}
.pr-rr:nth-child(odd){background:var(--panel)}
.pr-rr:hover,.pr-rr:focus-visible{background:var(--st-tile-hi)}
.pr-n{font:var(--t-place);font-stretch:var(--t-stretch);color:transparent;-webkit-text-stroke:1px var(--dim)}
.pr-rr:first-child .pr-n{color:var(--st-gold);-webkit-text-stroke:0}
.pr-pt{width:var(--pr-pt);height:var(--pr-pt);overflow:hidden;background:var(--st-art);border:3px solid var(--st-rule);border-radius:50%}
.pr-pt img{display:block;width:100%;height:100%;object-fit:cover}
.pr-nm{min-width:0}
.pr-nm b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--t-lane);font-stretch:var(--t-stretch);text-transform:uppercase}
.pr-nm small{font-size:var(--fs-xs);color:var(--dim)}
.pr-trk{display:block;min-width:0}
.pr-track{display:flex;max-width:100%;height:30px;overflow:hidden;background:var(--st-track);border-radius:var(--r-4)}
.pr-w,.pr-l{display:flex;align-items:center;min-width:0;overflow:hidden;font:var(--t-strong);white-space:nowrap}
.pr-w{padding-left:var(--sp-4);background:var(--st-win);color:var(--accent-ink)}
.pr-l{justify-content:flex-end;padding-right:var(--sp-4);background:var(--st-loss);color:var(--st-on-loss)}
.pr-kd{display:grid;grid-template-columns:var(--pr-kd);gap:var(--sp-6);text-align:right}
.pr-kd b{display:block;font:var(--t-num-b);white-space:nowrap}
.pr-kd small{font-size:var(--fs-2xs);color:var(--dim)}
.pr-kd .pr-wr{font:var(--t-stat)}.pr-wr.g{color:var(--good)}.pr-wr.r{color:var(--st-loss)}

.pr-grp{margin:var(--sp-7) 0 var(--sp-5);font:var(--t-day);color:var(--dim)}
.pr-grp:first-child{margin-top:0}
.pr-cmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6)}
.pr-sc{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;padding:var(--sp-6) var(--sp-7);background:var(--panel2);border:1px solid var(--st-rule);border-radius:var(--r-6)}
.pr-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4)}
.pr-nm2{font:var(--t-label);letter-spacing:var(--tr-m);text-transform:uppercase;color:var(--dim)}
.pr-v{font:var(--t-card-v);font-stretch:var(--t-stretch)}
.pr-stamp{padding:var(--sp-1) var(--sp-3);border-radius:var(--r-2);font:var(--t-tag-s);letter-spacing:var(--tr-l);text-transform:uppercase;white-space:nowrap}
.pr-stamp.up{background:var(--accent);color:var(--accent-ink)}.pr-stamp.dn{background:var(--st-loss);color:var(--st-on-loss)}
.pr-meter{position:relative;height:10px;margin:var(--sp-3) 0 var(--sp-1);background:var(--pr-meter);border-radius:var(--r-pill)}
.pr-meter::before{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;background:var(--fg);opacity:.5}
.pr-meter i{position:absolute;top:50%;width:var(--pr-dot);height:var(--pr-dot);background:var(--paper);border:3px solid var(--paper-ink);border-radius:50%;transform:translate(-50%,-50%)}
.pr-ends{display:flex;justify-content:space-between;gap:var(--sp-2);font-size:var(--fs-2xs);color:var(--dim)}
.pr-ends b,.pr-plays b,.pr-none b,.pr-bt b{color:var(--fg);font-weight:var(--fw-6)}
.pr-bt{font-size:var(--fs-xs);color:var(--dim)}
.pr-plays{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-xs);color:var(--dim)}
.pr-mini{width:var(--pr-mini);height:auto}
.pr-none{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-6)}
.pr-none span{padding:var(--sp-2) var(--sp-5);border:1px dashed var(--line2);border-radius:var(--r-pill);font-size:var(--fs-xs);color:var(--dim)}
.pr-cap{margin:var(--sp-6) 0 0;font-size:var(--fs-s);color:var(--dim)}
@media (max-width:1200px){.pr-ladder{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:1040px){
  .ec-heat{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ec-th{display:none}
  .ec-hero{grid-column:1/-1;margin-top:var(--sp-5)}
  .ec-heat .ec-c small{display:block;font:var(--t-tag-s);letter-spacing:var(--tr-s);text-transform:uppercase;text-align:center;color:var(--dim)}
}
@media (max-width:900px){
  .pr-rank{grid-template-columns:minmax(0,1fr)}
  .pr-paper{transform:none}
  .pr-rr{grid-template-columns:var(--pr-place) var(--pr-pt) minmax(0,1fr)}
  .pr-trk,.pr-kd{grid-column:1/-1}
  .pr-kd{grid-template-columns:repeat(4,auto);justify-content:space-between;text-align:left}
  .pr-cmp{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){.pr-cmp{grid-template-columns:minmax(0,1fr)}.pr-kd{gap:var(--sp-4)}.pr-ladder{grid-template-columns:repeat(4,minmax(0,1fr))}.pr-duo b{font:var(--t-rank-s);font-stretch:var(--t-stretch-s)}.pr-duo img{width:calc(var(--pr-badge) * .75)}.pr-paper{padding:var(--sp-7)}}

/* ── Economy tab (2026-10-20, mockup "Economy tab"; the sums: assets/econ.js): the top wears the Performance tab's
   pf- card, tiles and reads; the soul rate's bars and last-5 line, the line-up against everyone, the heat map by hero.
   Section titles wear the Laning tab's .ln-st. ── */
.ec-ends{display:flex;justify-content:space-between;gap:var(--sp-2);font-size:var(--fs-xs);color:var(--paper-dim)}
.ec-ends b{color:var(--paper-ink)}
.ec-rate svg{display:block;width:100%;height:auto}
.ec-key{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-7);margin-bottom:var(--sp-4);font:var(--t-label);letter-spacing:var(--tr-s);text-transform:uppercase;color:var(--dim)}
.ec-key i{display:inline-block;width:10px;height:10px;margin-right:var(--sp-2);border-radius:var(--r-1);vertical-align:-1px}
.ec-key .w{background:var(--st-win)}.ec-key .l{background:var(--st-loss-bar)}.ec-key .run{background:var(--st-gold)}
.ec-key .md{height:0;border-top:2px dashed var(--fg);border-radius:0;vertical-align:middle}
.ec-g{stroke:var(--panel-line)}
.ec-yl{fill:var(--dim);font:var(--t-meta);text-anchor:end}
.ec-xl{fill:var(--dim);font:var(--t-meta)}
.ec-bar{fill:var(--st-loss-bar);cursor:pointer}.ec-bar.w{fill:var(--st-win)}
.ec-bar:hover,.ec-bar:focus-visible{outline:none;stroke:var(--paper);stroke-width:2}
.ec-md{stroke:var(--fg);stroke-dasharray:5 5;opacity:.7}
.ec-best{fill:var(--paper);font:var(--t-tag);letter-spacing:var(--tr-m);text-anchor:middle}
.ec-run{fill:none;stroke:var(--st-gold);stroke-width:3;stroke-linejoin:round;pointer-events:none}
.ec-cap{margin:var(--sp-5) 0 0;font-size:var(--fs-s);color:var(--dim)}

.ec-axis,.ec-lr{display:grid;grid-template-columns:minmax(150px,220px) 90px minmax(0,1fr) 104px;align-items:center;gap:var(--sp-7)}
.ec-axis{padding:0 var(--sp-2) var(--sp-2);font-size:var(--fs-2xs);color:var(--dim)}
.ec-axis>span:nth-child(3){display:flex;justify-content:space-between}
.ec-line{display:flex;flex-direction:column}
.ec-lr{padding:var(--sp-5) var(--sp-2);border-top:1px solid var(--panel-line)}
.ec-lr:first-child{border-top:0}
.ec-nm{min-width:0;font:var(--t-label);letter-spacing:var(--tr-s);text-transform:uppercase;color:var(--dim)}
.ec-nm small{display:block;font-size:var(--fs-xs);letter-spacing:0;text-transform:none}
.ec-v{font:var(--t-stat);font-stretch:var(--t-stretch);text-align:right;white-space:nowrap}
.ec-bar2{position:relative;height:22px;background:var(--st-track);border-radius:var(--r-3)}
.ec-bar2::after{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;background:var(--fg);opacity:.45}
.ec-bar2 s{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-3);text-decoration:none}
.ec-bar2 s.up{background:var(--pr-meter-up)}.ec-bar2 s.dn{background:var(--pr-meter-dn)}
.ec-stamp{justify-self:end;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-2);font:var(--t-tag-s);letter-spacing:var(--tr-l);text-transform:uppercase;white-space:nowrap}
.ec-stamp.up{background:var(--accent);color:var(--accent-ink)}.ec-stamp.dn{background:var(--st-loss);color:var(--st-on-loss)}
.ec-none{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-6)}
.ec-none:empty{display:none}
.ec-none span{padding:var(--sp-2) var(--sp-5);border:1px dashed var(--line2);border-radius:var(--r-pill);font-size:var(--fs-xs);color:var(--dim)}
.ec-none b{color:var(--fg);font-weight:var(--fw-6)}

.ec-heat{display:grid;grid-template-columns:minmax(150px,1.4fr) repeat(7,minmax(0,1fr));gap:var(--sp-2)}
.ec-th{align-self:end;padding:var(--sp-2);font:var(--t-tag);letter-spacing:var(--tr-m);text-transform:uppercase;text-align:center;color:var(--dim)}
.ec-th:first-child{text-align:left}
.ec-hero{display:flex;align-items:center;gap:var(--sp-5);min-width:0}
.ec-hero>span:last-child{min-width:0}
.ec-hero b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--t-card-name);font-stretch:var(--t-stretch);text-transform:uppercase}
.ec-hero small{display:block;font-size:var(--fs-xs);color:var(--dim)}
.ec-pt{flex:none;width:var(--ec-pt);height:var(--ec-pt);overflow:hidden;background:var(--st-art);border:2px solid var(--st-rule);border-radius:50%}
.ec-pt img{display:block;width:100%;height:100%;object-fit:cover}
.ec-c{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--ec-cell);padding:var(--sp-3);background:var(--panel2);border-radius:var(--r-4);isolation:isolate}
.ec-c::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--st-win);opacity:calc(var(--ec-heat-lo) + var(--heat) * var(--ec-heat-span))}
.ec-c.off::before{opacity:0}
.ec-c b{font:var(--t-num-b)}
.ec-c small{display:none}
.ec-c em{font:var(--t-tag-s);font-style:normal;letter-spacing:var(--tr-l);text-transform:uppercase;color:var(--st-gold)}
.ec-c.top{box-shadow:inset 0 0 0 2px var(--st-gold)}
@media (max-width:900px){
  .ec-axis{display:none}
  .ec-lr{grid-template-columns:minmax(0,1fr) auto auto;gap:var(--sp-3) var(--sp-5)}
  .ec-bar2{grid-column:1/-1}
}
@media (max-width:520px){.ec-heat{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── Game cards (step 7, 2026-10-20; assets/gamecard.js draws, functions/_cards/text.js parses): an item or ability
   card inside the one tooltip, the cream paper with a band of the item's shop colour over its head. ── */
.tip.tip-card{width:min(var(--gc-w),calc(100vw - 16px));max-width:none;max-height:calc(100vh - 16px);padding:0;gap:0;overflow-y:auto}
.tip.tip-card::after{display:none}
.gc{--sc:var(--gc-ability);display:flex;flex-direction:column;border-top:var(--gc-band) solid var(--sc);border-radius:var(--r-4);overflow:hidden}
.gc-i.weapon{--sc:var(--slot-weapon)}.gc-i.vitality{--sc:var(--slot-vitality)}.gc-i.spirit{--sc:var(--slot-spirit)}
.gc-h{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-5) var(--sp-6);background:var(--paper-track)}
.gc-h img{flex:none;width:var(--gc-img);height:var(--gc-img);padding:var(--sp-2);object-fit:contain;background:var(--paper-ink);border-radius:var(--r-3)}
.gc-h b{display:block;font:var(--t-card-name);font-stretch:var(--t-stretch);text-transform:uppercase;color:var(--paper-ink)}
.gc-h small{display:block;margin-top:var(--sp-1);font-size:var(--fs-xs);color:var(--paper-dim)}
.gc-sec{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6);border-top:1px solid var(--paper-track)}
.gc-sec:first-of-type{border-top:0}
.gc-sn{font:var(--t-tag);letter-spacing:var(--tr-m);text-transform:uppercase;color:var(--paper-dim-2)}
.gc-cd{letter-spacing:0;text-transform:none}
.gc-a>.gc-sn,.gc-a>.gc-tx,.gc-a>.gc-st,.gc-a>.gc-up{margin:0 var(--sp-6)}
.gc-a>.gc-sn{margin-top:var(--sp-5)}
.gc-a>.gc-tx,.gc-a>.gc-st{margin-top:var(--sp-3)}
.gc-tx{margin:0;color:var(--paper-ink)}
.gc-st{display:flex;flex-direction:column;gap:var(--sp-1)}
.gc-st div{display:flex;justify-content:space-between;gap:var(--sp-6)}
.gc-st span{color:var(--paper-dim)}.gc-st b{font-weight:var(--fw-6);color:var(--paper-ink);text-align:right;white-space:nowrap}
.gc-up{display:flex;flex-direction:column;gap:var(--sp-2);padding:0;list-style:none}
.gc-a>.gc-up{margin:var(--sp-3) var(--sp-6) var(--sp-5)}
.gc-up li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-3);color:var(--paper-ink)}
.gc-up i{font-style:normal;font-weight:var(--fw-6);color:var(--paper-dim-2)}
.gc-up li.on{background:var(--paper-track);box-shadow:inset var(--gc-band) 0 0 var(--sc)}
.gc-bt{padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--paper-track);font-size:var(--fs-xs);color:var(--paper-dim)}
.gc-bt b{font-weight:var(--fw-6);color:var(--paper-ink)}
.gc-ft{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4) var(--sp-6);background:var(--paper-track);color:var(--paper-ink)}
.gc-ft>span{font-weight:var(--fw-6)}

/* ── Heroes tab (step 5, 2026-10-20; the mock "Site · Heroes tab + buy order"): one row per hero, the hero pool and play
   style beside it, a hero opens into General | Combat | History | Compare | Build | Grades. The numbers: assets/herostats.js.
   Every colour, type style and space here is a stats token (:root above) ── */
.hx{display:flex;flex-wrap:wrap;gap:var(--sp-7);align-items:flex-start}
.hx[hidden]{display:none}
.hx-table{flex:1 1 760px;min-width:0;background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r-4);padding:var(--sp-2) 0 0;overflow:hidden}
.hx-side{flex:1 1 280px;max-width:420px;min-width:0}
.hx-thead,.hx-row{display:grid;grid-template-columns:52px minmax(150px,1.6fr) 104px 112px 44px 58px 56px 46px 74px;gap:var(--sp-4);align-items:center;padding:0 var(--sp-7)}
.hx-thead{padding-top:var(--sp-5);padding-bottom:var(--sp-5);border-bottom:1px solid var(--panel-line);font:var(--t-label);letter-spacing:var(--tr-l);text-transform:uppercase;color:var(--dim)}
.hx-thead>:first-child{grid-column:2}
.hx-thead button{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;text-align:left;white-space:nowrap;cursor:pointer}
.hx-thead button:hover,.hx-thead button.on{color:var(--fg)}
.hx-thead button.on::after{content:" \25BE"}.hx-thead button.on.up::after{content:" \25B4"}   /* the sort in use, and its way */
.hx-sortm{display:none}
.hx-row{width:100%;text-align:left;background:none;border:0;border-left:var(--st-edge) solid transparent;border-bottom:1px solid var(--panel-line);color:var(--fg);font:inherit;padding-top:var(--sp-6);padding-bottom:var(--sp-6);cursor:pointer}
.hx-row:hover{background:var(--st-hover)}
.hx-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.hx-row.open{border-left-color:var(--accent);background:var(--st-open)}
.hx-art{width:52px;height:52px;border-radius:var(--r-3);background:var(--panel2);display:grid;place-items:center;overflow:hidden}
.hx-art img{width:100%;height:100%;object-fit:cover}
.hx-art em{font:var(--t-initials);font-stretch:var(--t-stretch);font-style:normal;color:var(--dim)}
.hx-who{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.hx-who>b{font:var(--t-name);font-stretch:var(--t-stretch);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-who small{font-size:var(--fs-s);color:var(--dim)}
.hx-cs{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-1)}
.hx-c{font:var(--t-label);letter-spacing:var(--tr-m);text-transform:uppercase;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-2);border:1px solid currentColor}
.hx-c.c-main{color:var(--st-gold)}.hx-c.c-rk{color:var(--st-sky)}.hx-c.c-br{color:var(--st-violet)}   /* not .main / .rk: the page layout and the rank badge own those */
.hx-wr{display:flex;align-items:center;gap:var(--sp-4)}
.hx-wr b{font:var(--t-stat);font-stretch:var(--t-stretch);min-width:52px}
.hx-wr.g b{color:var(--good)}.hx-wr.r b{color:var(--st-loss)}
.hx-wr i{flex:1;height:5px;border-radius:var(--r-2);background:var(--st-track);min-width:30px}.hx-wr s{display:block;height:5px;border-radius:var(--r-2);background:currentColor}
.hx-wr.g i{color:var(--good)}.hx-wr.r i{color:var(--st-loss)}
.hx-kda3{font:var(--t-num);white-space:nowrap}
.hx-kda3 .k{color:var(--good);font-weight:var(--fw-5)}.hx-kda3 .d{color:var(--st-loss);font-weight:var(--fw-5)}
.hx-n{font:var(--t-num);white-space:nowrap}
.hx-g{display:inline-grid;place-items:center;min-width:40px;padding:var(--sp-3);border-radius:var(--r-3);background:var(--gc);color:var(--st-on-grade);font:var(--t-grade);font-stretch:var(--t-stretch);cursor:help}
.hx-g.none{background:var(--panel2);color:var(--dim);box-shadow:inset 0 0 0 1px var(--panel-line)}
.hx-g.big{font-size:var(--fs-grade-l);padding:var(--sp-3) var(--sp-4)}
.hx-form{display:flex;gap:var(--sp-2)}
.hx-form i{width:11px;height:18px;border-radius:var(--r-1);background:var(--st-loss-bar)}.hx-form i.w{background:var(--st-win)}
/* the opened hero */
.hx-open{padding:var(--sp-8) var(--sp-7) var(--sp-8) calc(var(--sp-7) + var(--st-edge));border-left:var(--st-edge) solid var(--accent);border-bottom:1px solid var(--panel-line);background:var(--st-open-body)}
.hx-ban{display:flex;gap:var(--sp-8);align-items:center;margin-bottom:var(--sp-7)}
.hx-bart{flex:none;width:170px;height:90px;border-radius:var(--r-3);background:var(--st-art) center/cover no-repeat}
.hx-bt{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.hx-bn{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-5)}
.hx-bn h3{margin:0;font:var(--t-hero);font-stretch:var(--t-stretch);text-transform:uppercase;color:var(--fg)}
.hx-bn h3 a{color:inherit}.hx-bn h3 a:hover{color:var(--st-win)}
.hx-go{margin-left:var(--sp-4);font-size:var(--fs-xl);color:var(--dim);vertical-align:super}.hx-bn h3 a:hover .hx-go{color:var(--st-win)}
.hx-bt>span{font-size:var(--fs-l);color:var(--dim)}
.hx-lock{margin:0;padding:var(--sp-8);border:1px dashed var(--panel-line);border-radius:var(--r-4);color:var(--dim)}
.hx-subs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--panel-line);margin-bottom:var(--sp-7)}
.hx-subs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--dim);font:var(--t-button);letter-spacing:var(--tr-m);text-transform:uppercase;padding:var(--sp-5) var(--sp-6);cursor:pointer}
.hx-subs button:hover{color:var(--fg)}
.hx-subs button[aria-selected=true]{color:var(--fg);border-bottom-color:var(--accent)}
.hx-subs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.hx-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--sp-7)}
.hx-col{display:flex;flex-direction:column;gap:var(--sp-7)}
.hx-sec h4{margin:0 0 var(--sp-5);font:var(--t-button);letter-spacing:var(--tr-l);text-transform:uppercase;color:var(--dim)}
.hx-sec h4.g{color:var(--good)}.hx-sec h4.r{color:var(--st-loss)}
.hx-sec+.hx-sec{margin-top:var(--sp-8)}.hx-two .hx-sec+.hx-sec{margin-top:0}
.hx-note{margin:var(--sp-4) 0 0;font-size:var(--fs-s);color:var(--dim)}
.hx-paper{background:var(--paper);color:var(--paper-ink);border-radius:var(--r-4);padding:var(--sp-7);transform:rotate(-.4deg);box-shadow:var(--paper-shadow)}
.hx-tag{display:inline-block;font:var(--t-label);letter-spacing:var(--tr-l);text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-2);margin-bottom:var(--sp-5)}
.hx-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5) var(--sp-8)}
.hx-vl{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.hx-vl span{font:var(--t-label);letter-spacing:var(--tr-m);text-transform:uppercase;color:var(--dim)}
.hx-vl b{font:var(--t-value);font-stretch:var(--t-stretch)}
.hx-vl small{font:var(--t-meta);color:var(--dim)}
.hx-vl small.up{color:var(--good)}.hx-vl small.dn{color:var(--st-loss)}
.hx-vs.cream .hx-vl span,.hx-vs.cream .hx-vl small{color:var(--paper-dim)}
.hx-vs.cream .hx-vl small.up{color:var(--paper-up)}.hx-vs.cream .hx-vl small.dn{color:var(--paper-dn)}
.hx-l10{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--sp-2);height:130px;align-items:end}
.hx-lb{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;height:100%;gap:var(--sp-2);color:var(--dim);text-decoration:none}
.hx-lb i{display:block;border-radius:var(--r-1) var(--r-1) 0 0;background:var(--st-loss-bar)}.hx-lb.w i{background:var(--st-win)}
.hx-lb span{font:var(--t-tiny);text-align:center;white-space:nowrap;overflow:hidden}.hx-lb span b{font-weight:inherit}.hx-lb span em{display:none;font-style:normal}
.hx-lb:hover i,.hx-lb:focus-visible i{outline:2px solid var(--paper);outline-offset:1px}
.hx-key i{display:inline-block;width:var(--sp-4);height:var(--sp-4);border-radius:var(--r-1);margin:0 var(--sp-2) 0 var(--sp-3);background:var(--st-loss-bar)}.hx-key i.w{background:var(--st-win);margin-left:0}.hx-key i.s{background:var(--st-sold);margin-left:0}
.hx-rsvg .yl,.hx-rsvg .xl{fill:var(--dim)}.hx-cr>.ten{color:var(--dim)}.note.hx-pn{color:var(--dim)}
.hx-rk{margin:0;font-size:var(--fs-l);color:var(--fg)}
.hx-split{display:flex;height:14px;border-radius:var(--r-3);overflow:hidden;background:var(--st-track)}
.hx-split i{display:block;height:100%}
.hx-split .s1,.hx-legend .s1{background:var(--split-1)}.hx-split .s2,.hx-legend .s2{background:var(--split-2)}
.hx-split .s3,.hx-legend .s3{background:var(--split-3)}.hx-split .s4,.hx-legend .s4{background:var(--split-4)}
.hx-legend{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-6);font-size:var(--fs-m);color:var(--fg)}
.hx-legend b{display:inline-block;width:10px;height:10px;border-radius:var(--r-1);margin-right:var(--sp-4);vertical-align:0}
.hx-legend em{font-style:normal;font-family:var(--mono)}
.hx-rsvg{max-height:200px}
.hx-ml{display:flex;flex-direction:column}
.hx-m{display:grid;grid-template-columns:56px 64px minmax(0,1fr) 112px 52px 44px;gap:var(--sp-5);align-items:center;padding:var(--sp-4) var(--sp-2);border-top:1px solid var(--line);color:var(--fg);text-decoration:none;font-size:var(--fs-m)}
.hx-m:hover{background:var(--st-hover)}.hx-m:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.hx-res{font:var(--t-strong);letter-spacing:var(--tr-s);text-transform:uppercase}.hx-res.w{color:var(--good)}.hx-res.l{color:var(--st-loss)}
.hx-mm{color:var(--dim);font-size:var(--fs-s)}
.hx-m .hx-g{min-width:32px;font-size:var(--fs-s);padding:var(--sp-2)}
.hx-pick{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.hx-pick span{font:var(--t-label);letter-spacing:var(--tr-l);text-transform:uppercase;color:var(--dim);margin-right:var(--sp-2)}
.hx-pick button{background:var(--panel2);color:var(--fg);border:1px solid var(--panel-line);border-radius:var(--r-3);padding:var(--sp-3) var(--sp-5);font:var(--t-label);letter-spacing:var(--tr-xs);text-transform:uppercase;cursor:pointer}
.hx-pick button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.hx-cr{grid-template-columns:minmax(0,1.1fr) 70px 112px;row-gap:var(--sp-4)}
.hx-cr .track{grid-column:1/-1}.hx-cr>.ten{grid-column:1/-1;justify-self:end;margin-top:calc(-1 * var(--sp-2))}
.hx-cr .t{font-size:var(--fs-xs)}.hx-cr .val{font-size:var(--fs-xl)}.hx-cr .pct{font-size:var(--fs-s)}
.hx-cr .track i.ten{position:absolute;top:-3px;width:2px;height:12px;transform:translateX(-50%);background:var(--st-gold)}
/* the build */
.hx-build{display:flex;flex-wrap:wrap;gap:var(--sp-7) var(--sp-10)}
.hx-grp h5{margin:0 0 var(--sp-4);font:var(--t-strong);letter-spacing:var(--tr-l);text-transform:uppercase}
.hx-grp.weapon h5{color:var(--slot-weapon)}.hx-grp.vitality h5{color:var(--slot-vitality)}.hx-grp.spirit h5{color:var(--slot-spirit)}
.hx-its{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.hx-it{--sc:var(--slot-weapon);width:72px;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-2);border-radius:var(--r-3);background:var(--st-tile);border:1px solid var(--sc);cursor:help;text-align:center}
.hx-it.vitality{--sc:var(--slot-vitality)}.hx-it.spirit{--sc:var(--slot-spirit)}
.hx-it img{width:30px;height:30px;object-fit:contain}
.hx-it b{font:var(--t-tag-s);text-transform:uppercase;color:var(--sc);min-height:23px;display:flex;align-items:center}
.hx-it small{font:var(--t-small);color:var(--dim)}
.hx-it.sold{--sc:var(--st-sold)}.hx-it.sold img{filter:grayscale(1);opacity:.7}
.hx-it:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.hx-boh{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-3) var(--sp-7)}
.hx-boh h4{margin:0}
.hx-boh b{font:var(--t-headline);font-stretch:var(--t-stretch)}.hx-boh b.up{color:var(--good)}.hx-boh b.dn{color:var(--st-loss)}.hx-boh b.even{color:var(--dim)}
.hx-tlw{overflow-x:auto;margin-top:var(--sp-5)}
.hx-tap{display:none}@media (hover:none){.hx-hov{display:none}.hx-tap{display:inline}}   /* "tap an item" where nothing hovers */
.hx-tl{position:relative;min-width:var(--tl-min);padding-left:var(--tl-names)}
@media (max-width:760px){.hx-tl{min-width:var(--tl-min-phone)}}   /* phones swipe it: a 700px plot, a tag ~6% of it */
.hx-row-l{position:absolute;left:0;font:var(--t-label);letter-spacing:var(--tr-m);text-transform:uppercase;color:var(--dim)}
.hx-row-l.y{top:calc(var(--tl-top) + var(--tl-row-off))}
.hx-row-l.t{top:calc(var(--tl-top) + var(--tl-lane) + var(--tl-tag) + var(--tl-gap) + var(--tl-row-off))}
.hx-plot{position:relative;height:var(--tl-h);margin:0 var(--tl-side) var(--tl-foot);background:var(--st-well);border-radius:var(--r-3)}
.hx-plot .band{position:absolute;top:0;bottom:0;border-right:1px dashed var(--st-rule)}
.hx-plot .band em{position:absolute;bottom:calc(-1 * var(--tl-band-label));left:var(--sp-3);font:var(--t-small);font-style:normal;letter-spacing:var(--tr-xs);text-transform:uppercase;color:var(--dim);white-space:nowrap}
.hx-plot .laning{background:var(--tl-band-early)}.hx-plot .late{border-right:0;background:var(--tl-band-late)}
.hx-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hx-plot line{stroke-width:1.5;vector-effect:non-scaling-stroke}.hx-plot line.up{stroke:var(--st-win)}.hx-plot line.dn{stroke:var(--st-loss)}.hx-plot line.even{stroke:var(--dim)}
.hx-tt{--sc:var(--slot-weapon);position:absolute;transform:translateX(-50%);min-width:38px;height:var(--tl-tag);padding:0 var(--sp-2);display:grid;place-items:center;border-radius:var(--r-3);background:var(--st-tile);border:1px solid var(--sc);color:var(--sc);font:var(--t-tag);cursor:help;z-index:1}
.hx-tt.vitality{--sc:var(--slot-vitality)}.hx-tt.spirit{--sc:var(--slot-spirit)}.hx-tt.sold{--sc:var(--st-sold)}
.hx-tt:hover{z-index:2;background:var(--st-tile-hi)}
.hx-dl{position:absolute;transform:translateX(-50%);font:var(--t-label);pointer-events:none;background:var(--st-well);padding:0 var(--sp-1)}
.hx-dl.up{color:var(--st-win)}.hx-dl.dn{color:var(--st-loss)}.hx-dl.even{color:var(--dim)}
.hx-axis span{position:absolute;bottom:calc(-1 * var(--tl-axis));transform:translateX(-50%);font:var(--t-small);color:var(--dim)}
/* the sidebar */
.hx-box{background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--r-4);padding:var(--sp-8)}
.hx-bh{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-6)}
.hx-box h3{margin:0;font:var(--t-box);font-stretch:var(--t-stretch);text-transform:uppercase;color:var(--fg)}
.hx-bh span{font-size:var(--fs-m);color:var(--dim)}
.hx-rings{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);margin:var(--sp-7) 0 var(--sp-6)}
.hx-ring{--rc:var(--pool-1);width:46px;height:46px;border-radius:50%;border:3px solid var(--rc);display:grid;place-items:center;cursor:help}
.hx-ring.r2{--rc:var(--pool-2)}.hx-ring.r3{--rc:var(--pool-3)}.hx-ring.r4{--rc:var(--pool-4)}.hx-ring.r5{--rc:var(--pool-5)}
.hx-ring b{font:var(--t-strong);color:var(--fg)}
.hx-more{font-size:var(--fs-s);color:var(--dim);max-width:90px;line-height:var(--lh-s)}
.hx-stack{display:flex;height:8px;border-radius:var(--r-3);overflow:hidden;background:var(--st-track)}
.hx-stack i{display:block;height:100%;background:var(--pool-1)}
.hx-stack .r2{background:var(--pool-2)}.hx-stack .r3{background:var(--pool-3)}.hx-stack .r4{background:var(--pool-4)}.hx-stack .r5{background:var(--pool-5)}
.hx-ps{margin-top:var(--sp-9)!important;margin-bottom:var(--sp-3)!important}
.hx-sl{display:flex;justify-content:space-between;gap:var(--sp-6);padding:var(--sp-5) 0;border-top:1px solid var(--line);font-size:var(--fs-m)}
.hx-sl span{color:var(--dim)}.hx-sl b{font-weight:var(--fw-6);color:var(--fg);text-align:right}
.hx-sl[data-tip]{cursor:help}
@media (max-width:760px){
  .hx-thead{display:none}
  .hx-sortm{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--panel-line);font:var(--t-label);letter-spacing:var(--tr-l);text-transform:uppercase;color:var(--dim)}
  .hx-sortm select{font:inherit;letter-spacing:normal;text-transform:none;color:var(--fg);background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-2);padding:var(--sp-2) var(--sp-4)}
  .hx-row{grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"art who gr" "art wr form" "art kda kda";row-gap:var(--sp-4);padding:var(--sp-6)}
  .hx-art{grid-area:art;width:44px;height:44px;align-self:start}.hx-who{grid-area:who}.hx-gr{grid-area:gr}.hx-wr{grid-area:wr}.hx-form{grid-area:form}
  .hx-kda3{grid-area:kda;font-size:var(--fs-s)}.hx-row .hx-n{display:none}
  .hx-open{padding:var(--sp-7) var(--sp-6)}
  .hx-ban{flex-direction:column;align-items:flex-start}.hx-bart{width:100%;height:80px}.hx-bn h3{font-size:var(--fs-hero-s)}
  .hx-m{grid-template-columns:44px 56px minmax(0,1fr) 40px;font-size:var(--fs-s)}.hx-m .hx-du,.hx-m .hx-kda3{display:none}
  .hx-side{max-width:none}
}
/* narrow phones: Compare's label gets the row, its value and percent the next */
@media (max-width:420px){.hx-cr{grid-template-columns:minmax(0,1fr) auto}.hx-cr .pct{grid-column:1/-1}}
/* the last games' labels follow their own strip: K / D / A where ten fit, their KDA where they do not */
.hx-l10{container-type:inline-size}@container (max-width:449px){.hx-lb span b{display:none}.hx-lb span em{display:inline}}
/* ── Laning tab (step 6): your three lanes, lane → game, where your souls come from. The numbers: assets/lanes.js.
   Every colour, type style and space here is a stats token (:root above) ── */
.lanes3-grid{display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:var(--sp-8);align-items:start}
.lane-on{margin:calc(-1 * var(--sp-2)) 0 var(--sp-6);font-size:var(--fs-s);color:var(--dim)}
.lane-on[hidden]{display:none}
.lanes3 .hd span+span{color:var(--dim)}
.sflow .hd span+span{color:var(--dim)}   /* the headers' second line, 4.5:1 */
.lane-on button{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
.lm{margin:0}
.lm figcaption{margin-top:var(--sp-5);font-size:var(--fs-s);line-height:var(--lh-m);color:var(--dim)}
.lm-map{position:relative;aspect-ratio:300/340;background:var(--map-bg);border:1px solid var(--panel-line);border-radius:var(--r-6);overflow:hidden}
.lm-map svg{position:absolute;inset:0;width:100%;height:100%}
.lm-path{fill:none;stroke-linecap:round;cursor:pointer;transition:stroke-opacity .15s}
.lm-glow{fill:none;stroke-linecap:round;stroke-opacity:.16;filter:blur(var(--map-blur));pointer-events:none}
.lm-path.off{stroke-opacity:.28}.lm-glow.off{stroke-opacity:.04}
.lm-path.lane-yellow,.lm-glow.lane-yellow{stroke:var(--lane-yellow)}.lm-path.lane-blue,.lm-glow.lane-blue{stroke:var(--lane-blue)}
.lm-path.lane-green,.lm-glow.lane-green{stroke:var(--lane-green)}.lm-path.few{stroke:var(--lane-off)}
.lm-base{position:absolute;left:50%;transform:translateX(-50%);font:var(--t-label);letter-spacing:var(--tr-s);text-transform:uppercase;padding:var(--sp-2) var(--sp-5);border:1px solid;border-radius:var(--r-3);white-space:nowrap;z-index:1}
.lm-base.them{top:2%;color:var(--st-loss);border-color:var(--map-them-line);background:var(--map-them-bg)}
.lm-base.us{bottom:2%;color:var(--green);border-color:var(--map-us-line);background:var(--map-us-bg)}
.lm-boss{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);font:var(--t-tiny);letter-spacing:var(--tr-xs);text-transform:uppercase;color:var(--dim);pointer-events:none;z-index:1}
.lm-boss i{width:26px;height:26px;border:1.5px dashed var(--map-boss);border-radius:50%}
.lm-card{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);min-width:62px;padding:var(--sp-2) var(--sp-5);background:var(--paper);color:var(--paper-ink);border:0;border-radius:var(--r-3);box-shadow:var(--card-shadow);cursor:pointer;z-index:2;font:inherit}
.lm-card b{font:var(--t-name);font-stretch:var(--t-stretch)}
.lm-card small{font:var(--t-tiny);color:var(--paper-dim-2)}
/* a lane not picked: a dark card, its words still 4.5:1 (it can be clicked, so it is not faded) */
.lm-card.off{background:var(--map-bg);color:var(--dim);box-shadow:none;outline:1px solid var(--line2);outline-offset:0}
.lm-card.off small{color:var(--dim)}
.lm-card[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:2px}
.lm-few{position:absolute;left:8%;right:8%;top:60%;margin:0;text-align:center;font-size:var(--fs-s);line-height:var(--lh-m);color:var(--dim);background:var(--map-veil);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-4);z-index:2}
.lcs{display:flex;flex-direction:column;gap:var(--sp-5);min-width:0}
.lc{background:var(--panel2);border:1px solid var(--panel-line);border-radius:var(--r-6);padding:var(--sp-6) var(--sp-7);cursor:pointer;transition:border-color .15s,opacity .15s}
.lc:hover{border-color:var(--line2)}
.lc.on{border-color:var(--accent)}
.lc.off{background:transparent}.lc.off .lc-bar,.lc.off .lc-dot{opacity:.45}   /* the words stay full strength */
.lc-top{display:flex;align-items:center;gap:var(--sp-3) var(--sp-5);flex-wrap:wrap}
.lc-name{display:flex;align-items:center;gap:var(--sp-4);background:none;border:0;padding:0;color:var(--fg);font:var(--t-lane);font-stretch:var(--t-stretch);text-transform:uppercase;cursor:pointer}
.lc-name b{font:inherit}
.lc-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--lane-yellow)}
.lc-dot.lane-blue{background:var(--lane-blue)}.lc-dot.lane-green{background:var(--lane-green)}
.lc-top small{font-size:var(--fs-s);color:var(--dim)}
.lc-vs{margin-left:auto;font:var(--t-vs);font-style:normal;color:var(--dim);cursor:help;white-space:nowrap}
.lc-vs.g{color:var(--st-win)}.lc-vs.r{color:var(--st-loss)}
.lc-bar{display:flex;height:6px;border-radius:var(--r-pill);overflow:hidden;margin:var(--sp-5) 0 var(--sp-4);background:var(--st-track)}
.lc-bar i{display:block;height:100%}.lc-bar .w{background:var(--st-win)}.lc-bar .e{background:var(--st-even)}.lc-bar .l{background:var(--st-loss)}
.lc-sub{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;font-size:var(--fs-s);color:var(--dim)}
.lc-h{display:inline-grid;place-items:center;width:26px;height:22px;border:1px solid var(--line2);border-radius:var(--r-2);font:var(--t-chip);color:var(--fg);overflow:hidden}
.lc-h img{width:100%;height:100%;object-fit:cover}
.lanes2{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.65fr);gap:var(--sp-7);align-items:start;margin-bottom:var(--sp-7)}
.pf-card.lg{max-width:none;flex:none;gap:var(--sp-6)}
.lg-row{display:grid;grid-template-columns:86px minmax(0,1fr) 40px;align-items:center;gap:var(--sp-2) var(--sp-5)}
.lg-row>span{font:var(--t-button);letter-spacing:var(--tr-s);text-transform:uppercase;color:var(--paper-label)}
.lg-row i{display:block;height:9px;border-radius:var(--r-pill);background:var(--paper-track);overflow:hidden}
.lg-row s{display:block;height:100%;border-radius:var(--r-pill);text-decoration:none}
.lg-row b{font:var(--t-pct);text-align:right}
.lg-row small{grid-column:2/-1;margin-top:calc(-1 * var(--sp-1));font-size:var(--fs-xs);color:var(--paper-dim-2)}
.lg-row.won s{background:var(--paper-win)}.lg-row.won b{color:var(--paper-win-ink)}
.lg-row.even s{background:var(--paper-even)}.lg-row.even b{color:var(--paper-dim-2)}
.lg-row.lost s{background:var(--paper-loss)}.lg-row.lost b{color:var(--paper-loss-ink)}
.pf-card.lg p{margin:0;font-size:var(--fs-m);line-height:var(--lh-m);color:var(--paper-ink)}
.pf-card.lg .lg-how{font-size:var(--fs-xs);color:var(--paper-dim-2)}
.sf{position:relative;margin:var(--sp-2) 0 0}
.sf .src-lane{--sc:var(--src-lane)}.sf .src-orbs{--sc:var(--src-orbs)}.sf .src-kills{--sc:var(--src-kills)}.sf .src-jungle{--sc:var(--src-jungle)}
.sf .src-obj{--sc:var(--src-obj)}.sf .src-crates{--sc:var(--src-crates)}.sf .src-denies{--sc:var(--src-denies)}
.sf-labs{position:absolute;left:0;top:0;bottom:0;width:var(--flow-labs)}
.sf-lab{position:absolute;right:0;transform:translateY(-50%);text-align:right;line-height:var(--lh-xs);cursor:help}
.sf-lab b{display:block;font-size:var(--fs-m);font-weight:var(--fw-6);color:var(--fg)}
.sf-lab small{font:var(--t-small);color:var(--dim);white-space:nowrap}
.sf-lab .g{color:var(--st-win)}.sf-lab .r{color:var(--st-loss)}
.sf-ticks{position:absolute;left:calc(var(--flow-labs) + var(--flow-tick-gap));top:0;bottom:0;width:var(--flow-tick)}
.sf-ticks i{position:absolute;left:0;width:var(--flow-tick);border-radius:var(--r-1);background:var(--sc)}
/* an svg does not stretch between left and right: it is given its width */
.sf-ribs{position:absolute;left:calc(var(--flow-labs) + var(--flow-tick-gap) + var(--flow-tick));width:calc(100% - var(--flow-labs) - var(--flow-tick-gap) - var(--flow-tick) - var(--flow-card));top:0;height:100%;overflow:visible}
.sf-rib{fill:var(--sc);fill-opacity:.36;cursor:help;transition:fill-opacity .15s}
.sf-rib:hover{fill-opacity:.6}
.sf-card{position:absolute;right:0;width:var(--flow-card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);background:var(--vault);color:var(--paper-ink);border-radius:var(--r-5);text-align:center}
.sf-card span{font:var(--t-label);letter-spacing:var(--tr-xl);text-transform:uppercase}
.sf-card b{font:var(--t-vault);font-stretch:var(--t-stretch-s)}
.sf-card small{font:var(--t-meta)}
.sf-card em{margin-top:var(--sp-5);font:var(--t-button);font-style:normal}
.sf-loss{position:absolute;right:-6px;bottom:-30px;width:60px;height:60px;overflow:visible;pointer-events:none}
.sf-loss path{fill:none;stroke:var(--st-loss);stroke-opacity:.75}
.sf-lost{margin:var(--flow-lost) 0 0 auto;width:max-content;font:var(--t-button);letter-spacing:var(--tr-xs);text-transform:uppercase;color:var(--st-loss);cursor:help}
.sf-read{margin:var(--sp-7) 0 0;font-size:var(--fs-m);line-height:var(--lh-l);color:var(--fg)}
.sf-read:empty{display:none}
.sf-none{margin:0;color:var(--dim)}
@media (max-width:760px){
  .lanes3-grid,.lanes2{grid-template-columns:minmax(0,1fr)}
  .lm-map{max-width:340px;margin:0 auto}
  .sf-lab b{font-size:var(--fs-xs)}.sf-lab small{font-size:var(--fs-2xs)}
  .sf-card b{font-size:var(--fs-vault-s)}.sf-card span{letter-spacing:var(--tr-m);font-size:var(--fs-2xs)}.sf-card small,.sf-card em{font-size:var(--fs-2xs)}
}

/* the lower half (2026-10-20, mockup "Laning lower half" v2: "the top is colorful, easy to understand what's what... when
   you scroll down, it all just blends together"): titles like the tab's own, you at 9:00 on a cream card beside the lead
   chart, partners as cream score cards, heroes as picture cards, the games by day edged in their lane's colour */
.ln-st{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-2) var(--sp-7);margin:var(--sp-10) 0 var(--sp-6)}
.ln-st>div{display:flex;flex-direction:column;gap:var(--sp-1)}
.ln-st h3{margin:0;font:var(--t-sec);font-stretch:var(--t-stretch);text-transform:uppercase;color:var(--fg)}
.ln-st>span{margin-left:auto;font-size:var(--fs-s);color:var(--dim)}
.ln-cap{margin:var(--sp-6) 0 0;font-size:var(--fs-s);line-height:var(--lh-m);color:var(--dim)}
.ln-lead{display:grid;grid-template-columns:minmax(240px,290px) minmax(0,1fr);gap:var(--sp-8);align-items:start}
.ln-nine{display:flex;flex-direction:column;gap:var(--sp-6);padding:var(--sp-7);background:var(--paper);color:var(--paper-ink);border-radius:var(--r-4);box-shadow:var(--paper-shadow);transform:rotate(-.6deg)}
.ln-nine .pf-tag{align-self:flex-start}
.ln-9{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:var(--sp-5)}
.ln-9 span{font:var(--t-button);letter-spacing:var(--tr-s);text-transform:uppercase;color:var(--paper-label)}
.ln-9 b{font:var(--t-box);font-stretch:var(--t-stretch)}.ln-9 b.g{color:var(--paper-win-ink)}.ln-9 b.r{color:var(--paper-loss-ink)}
.ln-9 small{grid-column:1/-1;font-size:var(--fs-xs);color:var(--paper-dim-2)}
.ln-9 em{font:var(--t-strong);font-style:normal;color:var(--paper-dim-2)}.ln-9 em.g{color:var(--paper-win-ink)}.ln-9 em.r{color:var(--paper-loss-ink)}
.ln-how{margin:0;padding-top:var(--sp-5);border-top:1px solid var(--paper-track);font-size:var(--fs-xs);color:var(--paper-dim-2)}
.ln-chart{margin:0}
.ln-chart .hd span+span{color:var(--dim)}
.ln-well{padding:var(--sp-6) var(--sp-6) var(--sp-4);background:var(--map-bg);border:1px solid var(--panel-line);border-radius:var(--r-6)}
.ln-well svg{display:block;width:100%;height:auto}
.ln-zw{fill:var(--accent);fill-opacity:.07}.ln-ze{fill:var(--fg);fill-opacity:.03}.ln-zl{fill:var(--st-loss);fill-opacity:.08}
.ln-zt{font:var(--t-tag);letter-spacing:var(--tr-l);text-transform:uppercase;fill:var(--dim);paint-order:stroke;stroke:var(--map-bg);stroke-width:5px;stroke-linejoin:round}
.ln-zt.ln-won{fill:var(--accent)}.ln-zt.ln-lost{fill:var(--st-loss)}
.ln-g{stroke:var(--line);stroke-width:1}.ln-g.ln-zero{stroke:var(--line2);stroke-width:1.5}
.ln-yl,.ln-xl{font:var(--t-small);fill:var(--dim)}
.ln-yl{text-anchor:end}.ln-xl{text-anchor:middle}
.ln-nine9{stroke:var(--paper);stroke-opacity:.35;stroke-dasharray:3 5}
.ln-glow{fill:none;stroke-width:var(--ln-glow);stroke-opacity:.18;filter:blur(var(--map-blur))}
.ln-line{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.ln-dot{fill:var(--map-bg);stroke-width:3;cursor:help}
.ln-line.lane-yellow,.ln-glow.lane-yellow,.ln-dot.lane-yellow{stroke:var(--lane-yellow)}
.ln-line.lane-blue,.ln-glow.lane-blue,.ln-dot.lane-blue{stroke:var(--lane-blue)}
.ln-line.lane-green,.ln-glow.lane-green,.ln-dot.lane-green{stroke:var(--lane-green)}
.ln-chip rect{fill:var(--paper)}.ln-chip text{font:var(--t-strong);fill:var(--paper-ink)}
.ln-chip .lane-yellow,.ln-key .lane-yellow,.ln-where .lane-yellow,.ln-wl .lane-yellow{fill:var(--lane-yellow);background:var(--lane-yellow)}
.ln-chip .lane-blue,.ln-key .lane-blue,.ln-where .lane-blue,.ln-wl .lane-blue{fill:var(--lane-blue);background:var(--lane-blue)}
.ln-chip .lane-green,.ln-key .lane-green,.ln-where .lane-green,.ln-wl .lane-green{fill:var(--lane-green);background:var(--lane-green)}
.ln-keys{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-5)}
.ln-key{display:inline-flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-5);background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-pill);font-size:var(--fs-xs);color:var(--fg)}
.ln-key i,.ln-wl i{width:9px;height:9px;border-radius:50%;flex:none}
.ln-partners{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-6)}
.ln-pc{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);min-width:0;padding:var(--sp-7) var(--sp-6) var(--sp-6);background:var(--paper);color:var(--paper-ink);border-radius:var(--r-4);box-shadow:var(--paper-shadow);text-align:center;transform:rotate(-1deg);transition:transform .15s}
.ln-pc:nth-child(even){transform:rotate(.8deg)}
.ln-pc:hover,.ln-pc:focus-visible{transform:translateY(-2px)}
.ln-pc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ln-av{width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--paper-track);border:3px solid var(--paper-ink)}
.ln-av img,.ln-pt img,.ln-h img{width:100%;height:100%;object-fit:cover}
.ln-nm{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--t-card-name);font-stretch:var(--t-stretch-s);text-transform:uppercase}
.ln-big{font:var(--t-big);font-stretch:var(--t-stretch)}.ln-big.g{color:var(--paper-win-ink)}.ln-big.r{color:var(--paper-loss-ink)}
.ln-bar{display:flex;width:100%;height:7px;overflow:hidden;background:var(--paper-track);border-radius:var(--r-pill)}
.ln-bar i{display:block;height:100%}
.ln-bar .ln-won{background:var(--paper-win)}.ln-bar .ln-even{background:var(--paper-even)}.ln-bar .ln-lost{background:var(--paper-loss)}
.ln-pc small{font-size:var(--fs-xs);color:var(--paper-dim-2)}
.ln-pc em{font:var(--t-strong);font-style:normal;color:var(--paper-dim-2)}.ln-pc em.g{color:var(--paper-win-ink)}.ln-pc em.r{color:var(--paper-loss-ink)}
.ln-heroes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6)}
.ln-hc{overflow:hidden;background:var(--panel2);border:1px solid var(--panel-line);border-radius:var(--r-6)}
.ln-art{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);height:96px;padding:var(--sp-5) var(--sp-6);background:var(--st-art) right 72px top 42%/auto 300% no-repeat}
.ln-art::before{content:"";position:absolute;inset:0;background:var(--art-scrim)}
.ln-art b{position:relative;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--t-lane);font-stretch:var(--t-stretch);text-transform:uppercase;color:var(--fg)}
.ln-art span{position:relative;padding:var(--sp-2) var(--sp-4);background:var(--paper);border-radius:var(--r-3);font:var(--t-pct);cursor:help}
.ln-art span.g{color:var(--paper-win-ink)}.ln-art span.r{color:var(--paper-loss-ink)}
.ln-hb{padding:var(--sp-5) var(--sp-6) var(--sp-6)}
.ln-hr{display:flex;justify-content:space-between;gap:var(--sp-4);margin-bottom:var(--sp-3);font-size:var(--fs-xs);color:var(--dim)}
.ln-hr b{font-weight:var(--fw-6);white-space:nowrap;color:var(--dim)}.ln-hr b.g{color:var(--good)}.ln-hr b.r{color:var(--st-loss)}
.ln-where{display:flex;gap:var(--sp-1);height:10px;overflow:hidden;background:var(--st-track);border-radius:var(--r-pill)}
.ln-where i{display:block;height:100%}
.ln-wl{display:flex;gap:var(--sp-5);margin-top:var(--sp-3);font-size:var(--fs-xs);color:var(--dim)}
.ln-wl span{display:inline-flex;align-items:center;gap:var(--sp-2)}
.ln-day{margin:var(--sp-8) 0 var(--sp-4);font:var(--t-day);color:var(--dim)}
#laneRows>.ln-day:first-child{margin-top:0}
.ln-row{display:grid;grid-template-columns:44px minmax(140px,1.1fr) minmax(150px,1fr) minmax(90px,1.1fr) 96px repeat(3,58px);align-items:center;gap:var(--sp-6);margin-bottom:var(--sp-4);padding:var(--sp-5) var(--sp-6) var(--sp-5) var(--sp-7);background:var(--panel2);border:1px solid var(--panel-line);border-left:var(--ln-edge) solid var(--st-even);border-radius:var(--r-5)}
.ln-row.lane-yellow{border-left-color:var(--lane-yellow)}.ln-row.lane-blue{border-left-color:var(--lane-blue)}.ln-row.lane-green{border-left-color:var(--lane-green)}
.ln-row:hover{border-top-color:var(--line2);border-right-color:var(--line2);border-bottom-color:var(--line2)}
.ln-pt{width:44px;height:44px;overflow:hidden;background:var(--st-art);border-radius:var(--r-4)}
.ln-who{min-width:0}
.ln-who b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--t-lane);font-stretch:var(--t-stretch);text-transform:uppercase}
.ln-who small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-xs);color:var(--dim)}
.ln-who em{font-style:normal}.ln-who em.g{color:var(--good)}.ln-who em.r{color:var(--st-loss)}
.ln-mu{display:flex;align-items:center;gap:var(--sp-2);min-width:0}
.ln-h{flex:none;width:28px;height:28px;overflow:hidden;background:var(--st-art);border-radius:var(--r-3)}
.ln-h.me{outline:2px solid var(--accent);outline-offset:1px}
a.ln-h:hover,a.ln-h:focus-visible{outline:2px solid var(--fg);outline-offset:1px}
.ln-vs{padding:0 var(--sp-3);font:var(--t-tag-s);letter-spacing:var(--tr-m);text-transform:uppercase;color:var(--dim)}
.ln-track{position:relative;height:10px;background:var(--st-track);border-radius:var(--r-pill)}
.ln-track::after{content:"";position:absolute;left:50%;top:-5px;bottom:-5px;width:2px;background:var(--line2)}
.ln-track s{position:absolute;top:0;bottom:0;border-radius:var(--r-pill)}
.ln-track .ln-won{background:var(--accent)}.ln-track .ln-even{background:var(--st-even)}.ln-track .ln-lost{background:var(--st-loss)}
.ln-stamp{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);min-width:0}
.ln-stamp b{font:var(--t-lane);font-stretch:var(--t-stretch-s);color:var(--fg)}
.ln-stamp span{padding:var(--sp-1) var(--sp-3);border-radius:var(--r-2);font:var(--t-tag-s);letter-spacing:var(--tr-l);text-transform:uppercase;white-space:nowrap}
.ln-stamp.ln-won b{color:var(--good)}.ln-stamp.ln-won span{background:var(--accent);color:var(--accent-ink)}
.ln-stamp.ln-lost b{color:var(--st-loss)}.ln-stamp.ln-lost span{background:var(--st-loss);color:var(--st-on-loss)}
.ln-stamp.ln-even span{background:var(--st-even);color:var(--ink)}
.ln-stamp.ln-none b{color:var(--dim)}.ln-stamp.ln-none span{border:1px solid var(--line2);color:var(--dim)}
.ln-num{font:var(--t-num-b);text-align:right;white-space:nowrap}
.ln-num small{display:block;font:var(--t-small);color:var(--dim)}
@media (max-width:1100px){.ln-partners{grid-template-columns:repeat(3,minmax(0,1fr))}.ln-heroes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .ln-lead{grid-template-columns:minmax(0,1fr)}
  .ln-nine{transform:none}
}
@media (max-width:1100px){
  .ln-row{grid-template-columns:44px repeat(3,minmax(0,1fr));row-gap:var(--sp-4)}
  .ln-who,.ln-mu{grid-column:2/-1}
  .ln-track{grid-column:1/4}
  .ln-stamp{grid-column:4;align-items:flex-end}
  .ln-row>.ln-num:nth-last-child(3){grid-column:2}
}
@media (max-width:520px){.ln-partners{grid-template-columns:repeat(2,minmax(0,1fr))}.ln-heroes{grid-template-columns:minmax(0,1fr)}}