/* Home v12: made from the same pieces as the rest of the site.
   Banner, photo, name and rank like your @profile; stat + league cards from the profile;
   the icon grid from Search; featured card and game tiles from the Arcade. */
.h12{padding-bottom:24px}
.h12-ban{height:calc(150px + var(--sat))!important;margin-top:calc(-12px - var(--sat))!important}
.h12-mp{position:absolute;z-index:2;right:var(--pad);top:calc(var(--sat) + 12px);display:flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 9px;border-radius:99px;background:rgba(10,10,16,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);font-size:15px;font-weight:850;font-variant-numeric:tabular-nums}
.h12 .fu5-hd{margin-top:-58px}
.h12-av{padding:5px}
.h12-av:active{transform:scale(.96)}
.h12 .fu6-pill.h12-sk{opacity:.5}
.h12-cards{justify-content:center}
.h12-cards .fu6-c{flex:1 1 0;min-width:0}
.h12-cards .fu6-c b{font-size:26px}
.h12-cards .fu6-c.sk{height:92px}
.h12-wk{cursor:pointer}
.h12-wk:active{transform:scale(.99)}
.h12-join{color:color-mix(in srgb,var(--c1) 60%,#fff)}
/* today: Search's app icons, with a dot for ready and a check for done */
.h12-f{margin-top:18px}
.h12-n{display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:var(--acc,#8f82ec);font-size:13px;font-weight:850}
.h12-a .lx-i{position:relative}
.h12-dot{position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;background:#ff453a;box-shadow:0 0 0 3px #15141b}
.h12-ok{position:absolute;top:-4px;right:-4px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#30d158;color:#04170a;box-shadow:0 0 0 3px #15141b}
.h12-ok svg{width:13px;height:13px;stroke-width:3}
.h12-a.done .lx-i{filter:grayscale(.85) brightness(.6)}
.h12-a.done>b{color:rgba(255,255,255,.45)}
/* arcade pieces */
.h12-top{width:100%;margin-top:14px}
.h12-top .hero-tx b{font-size:24px}
.h12 .lz-sh{margin-top:24px}
.h12-gta{width:100%;margin-top:14px;min-height:110px;cursor:pointer;background:radial-gradient(90% 140% at 100% 100%,rgba(255,138,76,.45),transparent 60%),radial-gradient(70% 120% at 0% 0%,rgba(236,72,153,.4),transparent 60%),linear-gradient(135deg,#2a0b2e,#160818)!important;border-color:rgba(236,72,153,.3)!important}
.h12-gta>img{flex:none;width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.h12-cd{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:700;color:rgba(255,255,255,.6)}
.h12-cd b{font:900 26px/1 ui-rounded,"SF Pro Rounded",-apple-system,system-ui;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.h12-gft{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.h12-gft small{font-size:13px;color:rgba(255,255,255,.65)}
.h12-gft small b{color:#fff}
.h12-gft .get{height:34px;padding:0 14px;font-size:13.5px}
.h12-cd{flex-wrap:wrap}
.h12-gta .gta-btn.on{background:#30d158;color:#04170a}
@media(min-width:700px){.h12-ban{margin-top:0!important;height:200px!important}.h12 .fu5-hd{margin-top:-64px}}

/* friends (shared with the old Home ids) */
.pp9{display:flex;gap:12px;margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 6px;overflow-x:auto;scrollbar-width:none}
.pp9::-webkit-scrollbar{display:none}
.pp9-p{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:66px;padding:0}
.pp9-p>b{max-width:100%;font-size:12.5px;font-weight:650;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp9-plus{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.25);color:rgba(255,255,255,.75)}
.pp9-plus svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.pp9-sk{flex:none;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.06)}
.h9-feed{margin-top:12px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);overflow:hidden}
.h9-feed:empty{display:none}
.h9-feed .tl{padding:12px 14px 2px;border-bottom:0}
.h9-fsk{padding:14px}.h9-fsk i{display:block;height:70px;border-radius:14px;background:rgba(255,255,255,.05)}
/* Search v10: a launcher. Big search field, recent searches, people, then everything as app icons in folders */
.x5{position:relative}
.x5:before{content:"";position:absolute;z-index:-1;left:calc(var(--pad) * -1);right:calc(var(--pad) * -1);top:calc(-12px - var(--sat));height:calc(260px + var(--sat));pointer-events:none;
  background:radial-gradient(70% 90% at 0% 0%,color-mix(in srgb,var(--acc,#8f82ec) 30%,transparent),transparent 70%),radial-gradient(60% 80% at 100% 0%,rgba(56,189,248,.14),transparent 70%)}
.x9-bar .segs.x9-hide{display:none}
.lx-bar .srch{height:56px!important;border-radius:20px!important;padding-left:18px;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.12)!important}
.lx-bar .srch input{font-size:17.5px!important;font-weight:500}
.lx-bar .srch:focus-within{border-color:var(--acc,#8f82ec)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--acc,#8f82ec) 22%,transparent)!important}
.lx{display:flex;flex-direction:column;gap:12px;padding-bottom:16px}
.lx-rec{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:-2px}
.lx-rec>span{font-size:13px;font-weight:650;color:rgba(235,235,245,.5);margin-right:4px}
.lx-rec button{height:30px;padding:0 12px;border-radius:99px;background:rgba(255,255,255,.07);font-size:13.5px;font-weight:600}
.lx-rec .lx-clr{width:30px;padding:0;display:grid;place-items:center;background:none;color:rgba(235,235,245,.45)}
.lx-rec .lx-clr svg{width:15px;height:15px}
/* folders */
.lx-f{padding:14px 12px 10px;border-radius:26px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}
.lx-fh{display:flex;align-items:baseline;justify-content:space-between;margin:0 4px 12px}
.lx-fh h2{margin:0;font:800 18px/1.1 ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif;letter-spacing:-.02em}
.lx-fh button{font-size:13.5px;font-weight:650;color:var(--acc,#8f82ec)}
.lx-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 6px}
.lx-a{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.lx-a>b{max-width:100%;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-i,.lx-g.lg-tile{display:grid;place-items:center;width:60px!important;height:60px!important;border-radius:17px!important}
.lx-i{color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 88%,#fff 12%),color-mix(in srgb,var(--c) 62%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 16px -8px color-mix(in srgb,var(--c) 70%,#000)}
.lx-i svg{width:28px;height:28px;stroke-width:1.9}
.lx-a:active .lx-i,.lx-a:active .lx-g{transform:scale(.9)}
.lx-i,.lx-g{transition:transform .15s}
/* people */
.lx-ppl{padding-bottom:12px}
.lx-pp{display:flex;gap:14px;margin:0 -12px;padding:2px 12px 2px;overflow-x:auto;scrollbar-width:none}
.lx-pp::-webkit-scrollbar{display:none}
.lx-p{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;width:72px}
.lx-pav{padding:0!important;line-height:0;border-radius:50%}
.lx-p>b{max-width:100%;margin-top:7px;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-p>small{max-width:100%;font-size:11px;color:rgba(235,235,245,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-pf{position:absolute;top:44px;right:2px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--acc,#8f82ec);color:#fff;box-shadow:0 0 0 3px #15141b;transition:transform .15s,background .2s}
.lx-pf svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.lx-pf.on{background:#30d158}
.lx-pf:active{transform:scale(.85)}
.lx-psk{flex:none;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.06)}
.lx-none{margin:0 4px;font-size:14px;color:rgba(235,235,245,.55)}
@media(min-width:700px){.lx-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.x5:before{left:0;right:0;border-radius:28px}}
.h12-gta .h12-gft small{white-space:nowrap;font-weight:600;letter-spacing:0}.h12-gta .h12-gft small b{font:inherit;font-weight:850;color:#fff;margin:0;letter-spacing:0}

/* desktop: the search bar lines up with the page column (no band wider than the page), and no boxed glow */
@media(min-width:700px){
  #hm .x5 .xsticky,#hm .xsticky{margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;background:var(--bg,#07070b)!important}
  html:not(.th) #hm .xsticky{background:#07070b!important}
  .x5:before{display:none}
}
.lx-ppl.empty{display:none}
/* the search bar is see-through until it actually sticks to the top (then it turns solid so posts don't show through) */
html body #hm .x5 .xsticky:not(.stuck),html:not(.th) body #hm .x5 .xsticky:not(.stuck),html[data-theme] body #hm .x5 .xsticky:not(.stuck){background:transparent!important;box-shadow:none!important}
/* no empty "People to follow" box when there's nobody to suggest */
.lx-ppl:has(.lx-pp:empty),.lx-ppl:has(.lx-pp .lx-none:only-child){display:none}