/* Members pages (Night shift). Extends nightshift.css. */
.mem[hidden]{display:none}
.mem .mbody{min-width:0;display:block}
.mem .mdesc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--mu);font-size:13.5px;margin-top:6px;line-height:1.45}
.mem h3 .fi{font-size:15px;border-radius:2px}
.empty[hidden]{display:none}
.chips .chip{min-height:36px}
.id .meta .fi{border-radius:2px}
.bio.muted{color:var(--mu);font-style:italic}
.sec2{padding-top:clamp(28px,4vw,48px)}
.socials{margin-top:26px}
.sl{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.sl a{min-height:44px}
.sl small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45%}
.srvs{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.srv{overflow:hidden;background-image:linear-gradient(180deg,rgba(13,14,16,.84),rgba(13,14,16,.95)),var(--bgimg);background-size:cover;background-position:center}
.srv-in{padding:20px;display:grid;gap:16px}
.srv h3{font:700 22px var(--display)}
.srv .sg{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}
.srv .st{background:rgba(0,0,0,.45)}
.srv-ft{display:flex;gap:10px 16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.statpage{margin-top:clamp(20px,3vw,32px);padding:clamp(20px,3vw,32px);display:grid;gap:12px;max-width:640px}
.statpage h2{font:700 22px var(--display)}
.statpage p{color:var(--mu)}
.statpage .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
@media(max-width:520px){.id img{width:72px;height:72px}.stage{min-height:420px}}

/* the name line never wraps, so a LIVE badge adds no height: every card in a row stays the same size */
.mem h3{flex-wrap:nowrap;min-width:0}
.mem h3 .mname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mem h3 .fi,.mem h3 .livebadge,.mem h3 .plat{flex:none}
/* LIVE sits on the bottom edge of the avatar, so the name line and the card size never change */
.mem .av .livebadge{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);padding:2px 8px 2px 7px;font-size:10px;box-shadow:0 0 14px rgba(77,220,50,.55);border:2px solid var(--bg)}

/* On Steam card on a profile */
.steam{margin-top:20px;padding:20px 22px}
.steam header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.steam header h2{font:700 19px var(--display)}
.steam .stlogo{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--g-dim);border:1px solid var(--g-line);color:var(--g)}
.stbody{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:22px}
.stbody.solo{grid-template-columns:minmax(0,1fr)}
.np{display:flex;flex-direction:column;gap:10px}
.npart{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:460/215;border:1px solid var(--g-line);box-shadow:0 0 0 1px rgba(77,220,50,.25),0 0 34px rgba(77,220,50,.2)}
.npart img{width:100%;height:100%;object-fit:cover;display:block}
.npart .bl{position:absolute;left:10px;bottom:10px}.npart .br{position:absolute;right:10px;bottom:10px}
.npt b{display:block;font:700 20px var(--display)}.npt small{color:var(--mu);font-size:13px}
.recent ul{list-style:none;padding:0;margin-top:10px;display:grid;gap:10px}
.recent li{display:grid;grid-template-columns:92px minmax(0,1fr) minmax(90px,150px);gap:14px;align-items:center}
.recent li img{border-radius:8px;border:1px solid var(--line2);width:92px;height:43px;object-fit:cover}
.recent .gn b{display:block;font:700 15px var(--display)}.recent .gn small{color:var(--mu);font-size:12.5px}
.recent .gh{text-align:right;font:600 12px var(--text);color:var(--mu)}
.recent .gh b{font:800 18px var(--display);color:var(--tx)}
.recent .gh i{display:block;height:5px;border-radius:5px;margin-top:5px;background:linear-gradient(90deg,var(--g) var(--w),rgba(255,255,255,.1) var(--w))}
@media(max-width:760px){.stbody{grid-template-columns:1fr}}

/* a game without store art (demos, unreleased titles) */
.steam .noart{display:grid;place-items:center;color:rgba(77,220,50,.55);background:linear-gradient(135deg,#1c2a1f,#0f1113);border:1px solid var(--line2)}
.recent li .noart{width:92px;height:43px;border-radius:8px}
.npart .noart{position:absolute;inset:0}
.steam .noart .gicon{width:32px;height:32px;border-radius:6px;image-rendering:auto}

/* phones: the game's hours drop under its name instead of squeezing the title into a narrow column */
@media(max-width:560px){
  .recent li{grid-template-columns:92px minmax(0,1fr);row-gap:6px}
  .recent .gh{grid-column:1 / -1;text-align:left;display:flex;align-items:baseline;gap:10px}
  .recent .gh i{flex:1;margin-top:0;align-self:center}
}
/* Watch page: on a phone the video grid comes before the long list of connected creators, which is two to a row and compact */
.watch{display:flex;flex-direction:column}
@media(max-width:700px){
  .watch .w-creators{order:3}
  .watch .w-creators .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .watch .w-creators .mem{padding:10px;gap:10px;align-items:center}
  .watch .w-creators .av img{width:44px;height:44px}
  .watch .w-creators .sync{display:none}
  .watch .w-creators h3{font-size:14px}
}