/* home.css — the homepage, built from the approved parts 38-42 on mockups/v2/parts.html (his OK 10-27, with his picks
   1B 2B 3B from mockups/v2/home-options-2 and 3A from home-options). Home is a landing page, not a stats tab (DESIGN.md
   "Home"): more colour and fewer boxes, panels only where there's a list; ice blue on the one action and the one number
   that matters in each section. Every class is hm-, so nothing in site.css reaches in or out. */
.hm{--hm-glass:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.012) 40%,rgba(255,255,255,.03) 75%,rgba(255,255,255,.01));
  --hm-curve:var(--ease-in);
  /* the tier letters wear the parts sheet's grade colours */
  --hm-gS:#f2c94c;--hm-gA:#3fd57f;--hm-gB:#8fc7ff;--hm-gC:#c9a27a;--hm-gD:#c47a2c;
  font-variant-numeric:tabular-nums}
.hm{overflow-x:clip}   /* the leader's art reaches past the edge; never a sideways scroll */
.hm *{box-sizing:border-box}
.hm a{color:inherit;text-decoration:none}

/* the type roles */
.hm .hm-h{font-family:var(--wide);font-stretch:125%;font-weight:900;letter-spacing:var(--track-head);text-transform:uppercase;color:var(--fg);line-height:1.1}
.hm .hm-h em{font-style:normal;color:var(--accent)}
.hm .hm-fig{font-family:var(--fig);font-stretch:100%;font-weight:800;line-height:1;color:var(--fg)}
.hm .hm-sc{font-family:var(--font-body);font-weight:600;font-variant-caps:small-caps;letter-spacing:var(--track-caps);line-height:1.2}
.hm .hm-sc::first-letter{text-transform:uppercase}
.hm .hm-hd{font-family:var(--hand);font-weight:600;color:var(--dim);line-height:1}
.hm .hm-pn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-body);font-weight:700;font-variant-caps:small-caps;letter-spacing:.04em;color:var(--fg)}
.hm .hm-stamp{display:inline-flex;align-items:center;height:20px;padding:0 7px;font-family:var(--wide);font-weight:800;font-size:11px;letter-spacing:.08em;color:var(--ink);background:var(--gold);transform:rotate(-3deg)}
.hm .hm-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:1px solid var(--line2);background:rgba(255,255,255,.03);font-size:16px;color:var(--fg);cursor:pointer;
  transition:border-color var(--base) var(--ease),transform var(--fast) var(--ease)}
.hm .hm-btn:hover{border-color:var(--line3);transform:translateY(-1px)}
.hm .hm-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.hm .hm-lnk{font-size:15px;color:var(--accent);transition:color var(--base) var(--ease)}.hm .hm-lnk:hover{color:var(--fg)}
.hm .hm-wrap{max-width:1240px;margin:0 auto}
.hm .hm-sec{margin-top:clamp(56px,5vw + 16px,96px)}
.hm .hm-sh{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 16px;margin-bottom:18px}
.hm .hm-sh h2{margin:0;font-size:34px}
.hm .hm-sh .hm-hd{font-size:26px}
.hm .hm-sh .hm-lnk{margin-left:auto}

/* 38: the top, on the page; the search is the blue action, the leader's win rate the blue number */
.hm .hm-top{position:relative;isolation:isolate;padding:4px 0 10px}
.hm .hm-atmo{position:absolute;z-index:-1;top:-60px;bottom:-40px;left:30%;right:-12%;background-size:cover;background-position:center 28%;opacity:0;transition:opacity .9s var(--hm-curve);pointer-events:none;
  -webkit-mask-image:radial-gradient(60% 62% at 60% 40%,#000 25%,transparent 78%);mask-image:radial-gradient(60% 62% at 60% 40%,#000 25%,transparent 78%)}
.hm .hm-atmo.in{opacity:.2}
.hm .hm-strip{display:flex;align-items:center;gap:14px;padding:0 0 14px;border-bottom:1px solid var(--line1);font-size:15px;color:var(--fg2)}
.hm .hm-strip .hm-sp{flex:1}.hm .hm-strip .hm-lnk{white-space:nowrap}
.hm .hm-hero{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:36px;align-items:center;margin-top:34px}
.hm .hm-kick{font-size:14px;color:var(--mute)}
.hm .hm-h1{margin:10px 0 12px;font-size:clamp(40px,3.6vw,54px);line-height:1}
.hm .hm-lead{margin:0 0 26px;max-width:none;font-size:18px;color:var(--fg2)}
.hm .hm-search{position:relative;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hm .hm-box{position:relative;flex:1 1 300px;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;background:var(--panel2);border:1px solid var(--line2);transition:border-color var(--base) var(--ease)}
.hm .hm-top .hm-box{border-color:rgba(var(--accent-rgb),.55)}
.hm .hm-box:focus-within{border-color:rgba(var(--accent-rgb),.85)}
.hm .hm-box svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--mute);stroke-width:2}
.hm .hm-top .hm-box svg{stroke:var(--accent)}
.hm .hm-box input{flex:1;min-width:0;height:100%;padding:0;background:none;border:0;outline:0;color:var(--fg);font:400 16px var(--font-body)}
.hm .hm-box input::placeholder{color:var(--mute);font-size:var(--ph,16px)}
.hm .hm-search .hm-btn{height:44px}
.hm .hm-btn.me{border-color:rgba(var(--accent-rgb),.55);color:var(--accent)}
.hm .hm-out{font-size:14px}
.hm .hm-res{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:var(--z-menu);display:none;max-height:340px;overflow:auto;background:rgba(14,13,17,.97);border:1px solid var(--line2);box-shadow:var(--el-hover)}
.hm .hm-res.on{display:block}
.hm .hm-res a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:center;height:46px;padding:0 14px 0 8px;border-bottom:1px solid var(--line1);transition:background var(--fast) var(--ease)}
.hm .hm-res a:hover{background:rgba(255,255,255,.04)}
.hm .hm-res img{width:30px;height:30px;object-fit:cover}
.hm .hm-res .hm-pn{font-size:16px}
.hm .hm-res .hm-fig{font-size:13px;color:var(--mute)}
.hm .hm-res .hm-none{padding:12px 14px;font-size:14px;color:var(--dim)}
.hm .hm-go{display:flex;flex-wrap:wrap;margin-top:22px;background:var(--hm-glass),var(--panel);border:1px solid var(--line2)}
.hm .hm-go a{position:relative;flex:1 1 auto;padding:12px 10px;white-space:nowrap;text-align:center;font-size:15px;color:var(--fg2);border-right:1px solid var(--line1);transition:color var(--base) var(--ease),background var(--base) var(--ease)}
.hm .hm-go a:last-child{border-right:0}
.hm .hm-go a::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transition:transform var(--base) var(--ease)}
.hm .hm-go a:hover{color:var(--accent);background:rgba(var(--accent-rgb),.07)}.hm .hm-go a:hover::after{transform:none}

/* the fan: the live page's sway, make-way and lift; each card edged in its hero's colour, the leader in the accent */
.hm .hm-fan{position:relative;height:340px;min-width:0}
.hm .hm-c{position:absolute;top:30px;left:50%;width:172px;height:250px;overflow:hidden;
  background:radial-gradient(90% 70% at 50% 20%,color-mix(in srgb,var(--hc,#555) 34%,transparent),transparent 75%),var(--panel2);
  border:1px solid color-mix(in srgb,var(--hc,#777) 60%,transparent);box-shadow:var(--el-card);will-change:transform;transition:border-color var(--base) var(--ease),box-shadow var(--base) var(--ease);
  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))}
.hm .hm-c.l{--r0:-10deg;--x0:-142px}.hm .hm-c.r{--r0:10deg;--x0:142px}
.hm .hm-c.c{--y0:-18px;z-index:2;border-color:var(--accent)}
.hm .hm-c.up{z-index:5;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--el-hover)}
.hm .hm-c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:.9;transition:transform .35s var(--hm-curve)}
.hm .hm-c.up img{transform:scale(1.06) translateY(-4px)}
.hm .hm-c::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(8,7,10,.95) 86%)}
.hm .hm-c .hm-cn{position:absolute;z-index:1;left:14px;right:10px;bottom:36px;font-size:19px}
.hm .hm-c .hm-cw{position:absolute;z-index:1;left:14px;bottom:13px;font-size:17px;color:var(--win)}
.hm .hm-c.c .hm-cw{color:var(--accent)}
.hm .hm-c.r .hm-cn,.hm .hm-c.r .hm-cw{left:auto;right:14px;text-align:right}
.hm .hm-c .hm-stamp{position:absolute;z-index:1;top:10px;left:10px}
.hm .hm-fan .hm-cap{position:absolute;left:0;right:0;bottom:0;margin:0;text-align:center;font-size:13px;color:var(--mute)}
.hm .hm-fan .hm-cap .hm-fig{font-size:13px}

/* 39: also on yoggin, five pictures, a small piece of each place drawn; the companion first and twice as wide */
.hm .hm-ex{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:30px 28px}
.hm .hm-t{display:flex;flex-direction:column;min-width:0;container-type:inline-size;
  background:radial-gradient(90% 70% at 50% 0,color-mix(in srgb,var(--tc) 18%,transparent),transparent 72%),var(--panel2);border:1px solid var(--line1);border-top:2px solid var(--tc);
  transition:border-color var(--base) var(--ease),transform var(--base) var(--ease)}
.hm .hm-t.co{grid-column:span 2}
.hm .hm-t:hover{transform:translateY(var(--lift))}
.hm .hm-t h3{order:-2;margin:0;padding:14px 14px 0;font-size:clamp(13px,9cqi,24px);line-height:1.05;white-space:normal;transition:color var(--base) var(--ease)}
.hm .hm-t:hover{border-color:rgba(var(--accent-rgb),.7)}
.hm .hm-t:hover h3,.hm .hm-t.co h3{color:var(--tc)}
.hm .hm-pic{order:-1;position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:10px;height:140px;margin-top:8px}
.hm .hm-t.co{--tc:var(--accent)}.hm .hm-t.pf{--tc:var(--accent)}.hm .hm-t.lb{--tc:var(--gold)}.hm .hm-t.it{--tc:var(--slot-weapon)}.hm .hm-t.pt{--tc:var(--win)}
/* the companion tile (his pick D2, 10-27): the mark, no tile behind it, its lens breathing; REC running; each kill lands
   as a graded clip, three at a time */
.hm .hm-sh.hm-ruled{margin-bottom:0}
.hm .hm-dv{height:1px;margin:16px 0 22px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.65),rgba(var(--accent-rgb),.12) 45%,transparent 80%)}
.hm .hm-glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(42% 85% at 84% 45%,rgba(var(--accent-rgb),.2),transparent 70%)}
.hm .hm-mark{position:absolute;right:20px;top:50%;width:84px;height:84px;transform:translateY(-56%);overflow:visible;transition:transform .45s var(--hm-curve)}
.hm .hm-t:hover .hm-mark{transform:translateY(-62%)}
.hm .hm-mark .o{fill:none;stroke:var(--fg);stroke-width:8}.hm .hm-mark .t{fill:var(--fg)}
.hm .hm-mark .lens{fill:var(--accent);transform-origin:50px 57px;animation:hm-lens 2.4s var(--hm-curve) infinite}
.hm .hm-mark .ring{fill:none;stroke:var(--accent);stroke-width:2;transform-origin:50px 57px;animation:hm-ring 2.4s var(--hm-curve) infinite}
@keyframes hm-lens{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes hm-ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.1);opacity:0}}
.hm .hm-live{position:absolute;top:12px;left:72px;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;font-family:var(--wide);font-weight:800;font-size:11px;letter-spacing:.08em;color:var(--fg);border:1px solid var(--line3);background:rgba(8,7,10,.55)}
.hm .hm-live i{width:8px;height:8px;border-radius:50%;background:var(--loss);animation:hm-blink 1.2s steps(2) infinite}
.hm .hm-live .hm-fig{font-size:11px;font-weight:700;color:var(--fg2)}
@keyframes hm-blink{50%{opacity:.2}}
.hm .hm-feed{position:absolute;left:14px;bottom:12px;width:calc(100% - 132px);height:96px;overflow:hidden}
.hm .hm-toast{position:absolute;left:0;right:0;display:grid;grid-template-columns:22px auto minmax(0,1fr);gap:8px;align-items:center;height:28px;padding:0 8px;background:rgba(8,7,10,.7);border:1px solid var(--line1);border-left:2px solid var(--c);opacity:0;animation:hm-land 7.5s var(--hm-curve) infinite;animation-delay:var(--d)}
.hm .hm-toast img{width:20px;height:20px;object-fit:cover}
.hm .hm-toast .hm-chip{padding:2px 6px;font-family:var(--wide);font-weight:800;font-size:10px;letter-spacing:.08em;color:var(--c);border:1px solid var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.hm .hm-toast .hm-sc{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11.5px;color:var(--dim)}
@keyframes hm-land{0%{opacity:0;transform:translateY(100px)}6%{opacity:1;transform:translateY(64px)}33%{transform:translateY(64px)}39%{transform:translateY(32px)}66%{transform:translateY(32px)}72%{transform:translateY(0)}86%{opacity:1;transform:translateY(0)}92%,100%{opacity:0;transform:translateY(-16px)}}
@media (prefers-reduced-motion:reduce){.hm .hm-mark *,.hm .hm-live i{animation:none}.hm .hm-toast{animation:none;opacity:1}.hm .hm-toast:nth-child(2){transform:translateY(32px)}.hm .hm-toast:nth-child(3){transform:translateY(64px)}}
.hm .hm-pic .hm-stamp{position:absolute;top:12px;left:12px}
.hm .hm-clip{position:absolute;left:14px;right:14px;bottom:12px;display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:10px;align-items:center}
.hm .hm-play{position:relative;width:30px;height:30px;border-radius:50%;background:rgba(8,7,10,.7);border:1px solid var(--line3)}
.hm .hm-play::after{content:"";position:absolute;left:11px;top:8px;border-left:10px solid var(--fg);border-top:6.5px solid transparent;border-bottom:6.5px solid transparent}
.hm .hm-clip .hm-grade{font-family:var(--wide);font-weight:800;font-size:13px;letter-spacing:.08em;color:var(--gold)}
.hm .hm-scrub{position:relative;height:4px;background:rgba(255,255,255,.18)}
.hm .hm-scrub b{position:absolute;left:0;top:0;bottom:0;width:86%;background:var(--fg2)}
.hm .hm-scrub i{position:absolute;z-index:1;top:-5px;width:4px;height:14px;margin-left:-2px;background:var(--k)}
.hm .hm-scrub i:nth-child(1){left:18%;--k:var(--dim)}.hm .hm-scrub i:nth-child(2){left:41%;--k:var(--sapph)}
.hm .hm-scrub i:nth-child(3){left:63%;--k:var(--violet)}.hm .hm-scrub i:nth-child(4){left:86%;--k:var(--gold)}
.hm .weapon{--sc:var(--slot-weapon)}.hm .vitality{--sc:var(--slot-vitality)}.hm .spirit{--sc:var(--slot-spirit)}
/* the other four tiles (his pick B, 10-27): each grows on the companion tile's 7.5 s beat, one small thing moving */
.hm .hm-pic{overflow:hidden}
/* your profile (his pick 3, 10-29): a name card, the face, the record and the win/loss line. Signed in, your own; signed
   out, a drawing with no numbers in it */
.hm .pt2{position:absolute;inset:0;display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-content:center;padding:0 14px}
.hm .pt2 .av{width:40px;height:40px;object-fit:cover;border:1px solid var(--line3)}
.hm .pt2 .brk{display:block;font-size:11px;color:var(--mute);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hm .pt2 .rec{position:relative;display:block;height:22px;margin-top:3px;overflow:hidden;font-size:clamp(14px,10cqi,20px)}
.hm .pt2 .rec>span{position:absolute;left:0;top:0;white-space:nowrap}
.hm .pt2 .rec.flip>span{animation:pt2-a 7.5s var(--hm-curve) infinite}.hm .pt2 .rec.flip>span.b{animation-name:pt2-b}
@keyframes pt2-a{0%,48%{transform:none;opacity:1}54%,100%{transform:translateY(-22px);opacity:0}}
@keyframes pt2-b{0%,48%{transform:translateY(22px);opacity:0}54%,94%{transform:none;opacity:1}100%{opacity:0}}
.hm .pt2 .rec.hm-sc{font-size:clamp(11px,7.5cqi,15px);line-height:22px}
.hm .pt2 .w{color:var(--win)}.hm .pt2 .l{color:var(--loss)}
.hm .pt2 .wl{grid-column:1/-1;display:flex;height:4px;margin-top:12px}
.hm .pt2 .wl i{background:var(--win);flex:var(--w,1) 1 0;animation:pt2-w 7.5s var(--hm-curve) infinite}.hm .pt2 .wl u{background:var(--loss);flex:var(--l,1) 1 0}
@keyframes pt2-w{0%,48%{flex-grow:var(--w,1)}56%,100%{flex-grow:calc(var(--w,1) * 1.07)}}
/* leaderboard: the top three on a podium that rises, #1 in gold */
.hm .hm-podium{align-items:flex-end;gap:8px}
.hm .hm-pod{display:grid;justify-items:center;gap:4px;width:40px}
.hm .hm-pod img{width:26px;height:26px;object-fit:cover;border:1px solid var(--line2)}
.hm .hm-pod img.none{opacity:.35;filter:grayscale(1)}
.hm .hm-pod.p1 img{border-color:var(--gold);box-shadow:0 0 12px rgba(242,201,76,.45)}
.hm .hm-pod .hm-fig{font-size:12px;color:var(--c)}
.hm .hm-pod b{display:block;width:100%;height:var(--h);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 45%,transparent),color-mix(in srgb,var(--c) 8%,transparent));border-top:2px solid var(--c);transform-origin:bottom;animation:hm-pod 7.5s var(--hm-curve) infinite;animation-delay:var(--d)}
@keyframes hm-pod{0%{transform:scaleY(0)}12%,88%{transform:scaleY(1)}100%{transform:scaleY(0)}}
/* items: this week's three best, their win-rate bars filling */
.hm .hm-bars{display:grid;align-content:center;justify-content:stretch;gap:8px;padding:0 12px}
.hm .hm-ib{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center}
.hm .hm-ib img{width:28px;height:28px;object-fit:cover;border:1.5px solid var(--sc,var(--line2))}
.hm .hm-ib .hm-track{height:5px;background:rgba(255,255,255,.08)}
.hm .hm-ib .hm-track i{display:block;height:100%;width:var(--w);background:var(--win);transform-origin:left;animation:hm-fill 7.5s var(--hm-curve) infinite;animation-delay:var(--d)}
@keyframes hm-fill{0%{transform:scaleX(0)}14%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.hm .hm-ib .hm-fig{font-size:12px;color:var(--win)}
/* patch notes: this week's stamp, how many heroes rose and fell, the arrows nudging */
.hm .hm-moved{flex-direction:column;gap:12px}
.hm .hm-moved .hm-stamp{background:var(--win);animation:hm-stamp 7.5s var(--hm-curve) infinite}
@keyframes hm-stamp{0%{transform:rotate(-3deg) scale(1.6);opacity:0}6%{transform:rotate(-3deg) scale(1);opacity:1}92%{opacity:1;transform:rotate(-3deg)}100%{opacity:0;transform:rotate(-3deg)}}
.hm .hm-moved .cnt{display:flex;gap:16px}
.hm .hm-moved .cnt span{display:flex;align-items:center;gap:5px;font-family:var(--fig);font-weight:800;font-size:22px}
.hm .hm-moved .cnt i{display:inline-block;font-style:normal;font-size:16px;animation:hm-nudge 1.6s ease-in-out infinite}
.hm .hm-moved .rose{color:var(--win)}.hm .hm-moved .rose i{--y:-3px}.hm .hm-moved .fell{color:var(--loss)}.hm .hm-moved .fell i{--y:3px}
@keyframes hm-nudge{50%{transform:translateY(var(--y))}}
@media (prefers-reduced-motion:reduce){.hm .hm-pic *{animation:none!important}.hm .pt2 .rec>span.b{opacity:0}}

/* 40: the meta this week; a coloured stamp, the name in small caps, the art inside the card; the health score is the blue number */
.hm .hm-health{margin-left:auto;margin-top:-20px;align-self:flex-end;display:grid;grid-template-columns:auto auto;gap:6px 14px;align-items:baseline;cursor:help}
.hm .hm-health .hm-hl{font-size:14px;color:var(--mute)}
.hm .hm-health .hm-hs{justify-self:end;font-size:14px;color:var(--fg)}
.hm .hm-health .hm-hn{font-size:34px;color:var(--accent)}.hm .hm-health .hm-hn small{font-size:14px;color:var(--mute);margin-left:2px}
.hm .hm-gauge{position:relative;align-self:center;width:150px;height:8px}
.hm .hm-gauge::before,.hm .hm-gauge i{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--loss),var(--gold) 50%,var(--win) 100%)}
.hm .hm-gauge::before{opacity:.22}
.hm .hm-gauge i{clip-path:inset(0 calc(100% - var(--v,0%)) 0 0);transition:clip-path .6s var(--hm-curve)}
.hm .hm-gauge b{position:absolute;top:-4px;bottom:-4px;left:var(--v,0%);width:2px;margin-left:-1px;background:var(--fg)}
.hm .hm-ins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hm .hm-mc{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:290px;padding:18px;
  background:radial-gradient(90% 55% at 50% 12%,color-mix(in srgb,var(--hc,#555) 26%,transparent),transparent 72%),var(--hm-glass),var(--panel);border:1px solid var(--line2);box-shadow:var(--el-card);
  transition:transform var(--base) var(--ease),border-color var(--base) var(--ease),box-shadow var(--base) var(--ease)}
.hm .hm-mc:hover{transform:translateY(var(--lift));border-color:var(--line3);box-shadow:var(--el-hover)}
.hm .hm-mc .hm-art{position:absolute;z-index:-1;right:-8%;top:-4%;height:96%;width:auto;max-width:none;opacity:.9;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%),linear-gradient(180deg,#000 45%,transparent 88%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 30%),linear-gradient(180deg,#000 45%,transparent 88%);mask-composite:intersect;transition:transform .5s var(--hm-curve)}
.hm .hm-mc:hover .hm-art{transform:translateX(-8px)}
.hm .hm-mc .hm-stamp{position:relative;align-self:flex-start;margin-bottom:8px;transform:none}
.hm .hm-mc .hm-stamp.st-lead{background:var(--gold)}.hm .hm-mc .hm-stamp.st-sleep{background:var(--accent)}.hm .hm-mc .hm-stamp.st-most{background:var(--fg2)}.hm .hm-mc .hm-stamp.st-fall{background:var(--loss)}
.hm .hm-mc .hm-mv{position:relative;margin:2px 0 6px;font-size:44px}
.hm .hm-mc .hm-mn{position:relative;font-size:16px;color:var(--dim)}
.hm .hm-mc .hm-mf{position:relative;align-self:flex-start;margin-top:8px;font-size:14px;color:var(--mute);cursor:help}
.hm .hm-mc .hm-mf .hm-fig{font-size:14px}.hm .hm-mc .hm-mf .dn{color:var(--loss)}
.hm .hm-sum{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;font-size:14px;color:var(--mute)}
.hm .hm-sum .hm-fig{font-size:14px}
.hm .hm-ghost{min-height:290px;background:var(--well);border:1px solid var(--line1)}

/* 41: every hero, ranked; icons and win rates, each win rate in heat (red at 44%, green at 56%) */
.hm .hm-tier{display:grid;grid-template-columns:72px minmax(0,1fr);background:var(--hm-glass),var(--panel);border:1px solid var(--line2);box-shadow:var(--el-card)}
.hm .hm-tg{display:flex;align-items:center;justify-content:center;border-left:3px solid var(--gc);border-bottom:1px solid var(--line1);background:color-mix(in srgb,var(--gc) 14%,transparent);font-size:26px;cursor:help}
.hm .hm-trow{display:flex;flex-wrap:wrap;gap:10px 8px;min-width:0;padding:12px 14px;border-bottom:1px solid var(--line1)}
.hm .hm-tg:nth-last-child(2),.hm .hm-trow:last-child{border-bottom:0}
.hm .t-sp,.hm .t-s{--gc:var(--hm-gS)}.hm .t-a{--gc:var(--hm-gA)}.hm .t-b{--gc:var(--hm-gB)}.hm .t-c{--gc:var(--hm-gC)}.hm .t-d{--gc:var(--hm-gD)}
.hm .hm-ht{display:grid;justify-items:center;gap:5px;width:58px;transition:transform var(--fast) var(--ease)}
.hm .hm-ht:hover{transform:translateY(var(--lift))}
.hm .hm-ht img{width:52px;height:52px;object-fit:cover;background:var(--panel2);border:1px solid var(--line2);transition:border-color var(--base) var(--ease)}
.hm .hm-ht:hover img{border-color:var(--gc)}
.hm .hm-ht .hm-fig{font-size:13px;color:hsl(var(--hue,60) 70% 58%)}
.hm .hm-nobody{font-size:14px;color:var(--mute);align-self:center}

/* 42: you play, we keep score; the lookup on the page, the companion's four rows in a panel; download is the blue action */
.hm .hm-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.hm .hm-look{padding-top:20px}
.hm .hm-lab{display:block;margin-bottom:14px;font-size:15px;color:var(--fg)}
.hm .hm-inside{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.hm .hm-in{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:center;min-height:62px;border-bottom:1px solid var(--line1)}
.hm .hm-in b{display:block;font-family:var(--font-body);font-weight:600;font-size:16px;color:var(--fg)}
.hm .hm-in .hm-sc{font-size:14px;color:var(--mute)}
.hm .hm-in img{width:34px;height:34px;object-fit:cover}
.hm .hm-in .hm-rank{object-fit:contain}
.hm .hm-in svg{width:30px;height:30px;fill:none;stroke-width:3;stroke-linecap:square}
/* Every match: the grade the analysis gives, as the site's stamp (his pick D on every-match-icon, 10-28) */
.hm .hm-gem{display:grid;place-items:center;flex:none;width:30px;height:30px;font:900 16px var(--wide);font-stretch:125%;color:var(--ink);background:var(--gold);transform:rotate(-4deg);animation:hm-stamp 7.5s var(--hm-curve) infinite}
@keyframes hm-stamp{0%{transform:rotate(-4deg) scale(1.5);opacity:0}6%,90%{transform:rotate(-4deg) scale(1);opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hm .hm-gem{animation:none}}
.hm .hm-in .lane-g{stroke:var(--lane-green)}.hm .hm-in .lane-b{stroke:var(--lane-blue)}.hm .hm-in .lane-y{stroke:var(--lane-yellow)}
.hm .hm-in .souls{stroke:var(--souls)}
.hm .hm-panel{position:relative;padding:20px;background:var(--hm-glass),var(--panel);border:1px solid var(--line2);box-shadow:var(--el-card)}
/* the companion panel (his pick A, 10-27): text only, an accent edge and glow so it stands out, the mark breathing in the corner */
.hm .hm-cp{overflow:hidden;padding:22px;background:radial-gradient(120% 90% at 100% 0,rgba(var(--accent-rgb),.13),transparent 60%),var(--hm-glass),var(--panel);border-color:rgba(var(--accent-rgb),.55);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.08),0 18px 50px -20px rgba(var(--accent-rgb),.35)}
.hm .hm-cp .hm-mark{right:20px;top:16px;width:52px;height:52px;transform:none}
.hm .hm-cp{container-type:inline-size}
.hm .hm-cpt{display:flex;align-items:center;gap:10px;padding-right:70px}
.hm .hm-cpt h3{margin:0;min-width:0;white-space:nowrap;letter-spacing:0;font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:clamp(13px,3.9cqi,20px);text-transform:uppercase;color:var(--fg)}
.hm .hm-cpt h3 em{font-style:normal;color:var(--accent)}
.hm .hm-cp .hm-dv{margin:14px 0 6px}
.hm .hm-cf{position:relative;display:grid;gap:3px;padding:14px 0 14px 16px;border-bottom:1px solid var(--line1)}
.hm .hm-cf::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;background:var(--line2)}
.hm .hm-cf b{font-family:var(--wide);font-stretch:125%;font-weight:900;font-size:15px;text-transform:uppercase;color:var(--fg)}
.hm .hm-cf .hm-sc{font-size:14px;color:var(--dim)}
.hm .hm-cp .hm-dl{margin-top:16px}
.hm .hm-dl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.hm .hm-get{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.hm .hm-get:hover{border-color:var(--accent);filter:brightness(1.08)}
.hm .hm-dl .hm-sub{font-size:14px;color:var(--mute)}
.hm .hm-dl .hm-lnks{display:flex;gap:18px;margin-left:auto}

@media (max-width:1100px){.hm .hm-hero{grid-template-columns:minmax(0,1fr)}.hm .hm-ex{grid-template-columns:repeat(2,minmax(0,1fr))}.hm .hm-t.co{grid-column:1/-1}
  .hm .hm-ins{grid-template-columns:repeat(2,minmax(0,1fr))}.hm .hm-two{grid-template-columns:minmax(0,1fr)}.hm .hm-health{margin-top:0}}
@media (max-width:640px){.hm .hm-cpt{flex-wrap:wrap;row-gap:8px}.hm .hm-cpt h3{flex-basis:100%;font-size:clamp(11px,4.1cqi,20px)}.hm .hm-h1{font-size:40px}.hm .hm-ex,.hm .hm-ins,.hm .hm-inside{grid-template-columns:minmax(0,1fr)}.hm .hm-fan{transform:scale(.8);transform-origin:top center}.hm .hm-c.l{--x0:-104px}.hm .hm-c.r{--x0:104px}
  .hm .hm-sh .hm-lnk{margin-left:0}.hm .hm-health{margin-left:0;margin-top:0}}

/* 43: the Deadlock feel (his picks 10-30 on mockups/v2/feel-home: amber vs sapphire, the poster heading in Poiret One,
   small motion, no frames, then "green is the accent"). The ground, the accent, the heading font and the smoke now live
   in redesign.css for every page but the player's (his 10-30). What stays here is the home's own: its heading sizes,
   the flicker and the soul orbs, behind body[data-nav=home] because /app, /seeds, /heroes, /meta and /match load this file too. */
body[data-nav=home] .hm .hm-h1{font-size:clamp(42px,3.8vw,58px)}
body[data-nav=home] .hm .hm-sh h2{font-size:34px}
@media (max-width:640px){body[data-nav=home] .hm .hm-h1{font-size:34px}body[data-nav=home] .hm .hm-sh h2{font-size:28px}}
/* the meta: a gaslight flicker on the week's best number */
body[data-nav=home] .hm .hm-mc:has(.st-lead) .hm-mv{animation:hm-gas 5.5s linear infinite}
@keyframes hm-gas{0%,84%,100%{opacity:1;text-shadow:0 0 16px rgba(var(--accent-rgb),.28)}86%{opacity:.62}87%{opacity:1}89%{opacity:.78;text-shadow:none}91%{opacity:1;text-shadow:0 0 26px rgba(var(--accent-rgb),.55)}}
/* you play: soul orbs drifting up off the economy row */
body[data-nav=home] .hm .hm-souls{position:relative}
body[data-nav=home] .hm .hm-orb{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 40% 35%,#fff,var(--accent) 45%,transparent 72%);box-shadow:0 0 8px var(--accent);opacity:0;
  animation:hm-orb 3.6s var(--ease-out,ease-out) infinite;animation-delay:var(--d)}
body[data-nav=home] .hm .hm-orb:nth-child(1){--x:14px;--y:22px;--s:5px;--d:0s;--dx:-4px}
body[data-nav=home] .hm .hm-orb:nth-child(2){--x:22px;--y:18px;--s:4px;--d:.9s;--dx:5px}
body[data-nav=home] .hm .hm-orb:nth-child(3){--x:8px;--y:16px;--s:3px;--d:1.7s;--dx:-2px}
body[data-nav=home] .hm .hm-orb:nth-child(4){--x:18px;--y:24px;--s:4px;--d:2.6s;--dx:3px}
@keyframes hm-orb{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:.95}70%{opacity:.5}100%{opacity:0;transform:translate(var(--dx),-38px) scale(1)}}
@media (prefers-reduced-motion:reduce){body[data-nav=home] .hm-smoke,body[data-nav=home] .hm .hm-mv{animation:none}body[data-nav=home] .hm .hm-orb{display:none}}
/* the tier list's window (his 10-31, the app's three buttons): 7 days | 30 days | Since update, the parts sheet's .seg */
.hm .seg{display:inline-flex;border:1px solid var(--line2)}
.hm .seg button{height:34px;padding:0 14px;border:0;border-radius:0;background:none;font:inherit;font-size:15px;color:var(--mute);cursor:pointer;transition:color .15s var(--ease),background .15s var(--ease)}
.hm .seg button:hover{color:var(--fg2)}
.hm .seg button[aria-pressed="true"]{color:var(--fg);background:rgba(var(--accent-rgb),.14);box-shadow:inset 0 -2px 0 var(--accent)}
.hm #tierS .hm-sh .seg{margin-left:auto;align-self:center}
.hm #tierS .hm-sh .seg+.hm-lnk{margin-left:0}
.hm .hm-tier{transition:opacity .2s var(--ease)}.hm .hm-tier.busy{opacity:.45}
.hm .hm-tier .hm-tfail{grid-column:1/-1;padding:18px}
@media (max-width:640px){.hm #tierS .hm-sh .seg{margin-left:0;order:3}.hm .seg button{padding:0 11px}}