.slv { --pc-ink: var(--slv-ink); --pc-soft: var(--slv-soft); --pc-faint: var(--slv-faint); --pc-line: var(--slv-line); --pc-acc: var(--slv-acc);
       --pc-host: var(--slv-acc); --pc-live: var(--slv-live); --pc-d-bg: var(--slv-bar); }

@container slv (min-width: 701px) {
  .slv-main.pg-withcol { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 14px; align-items: start; }
  .slv-main.pg-withcol > * { grid-column: 1; }
  .slv-main.pg-withcol > .slv-strip { grid-column: 1 / -1; }
  .slv-main.pg-withcol > .pg-col { grid-column: 2; grid-row: 2 / span 30; }
  body.slv-tv .slv-main.pg-withcol { grid-template-columns: minmax(0, 1fr) 440px; }
}
.pg-col { position: sticky; top: 8px; min-width: 0; }
body.pg-colopen .spb { display: none !important; }
.pg-col[hidden] { display: none !important; }
@container slv (max-width: 700px) {
  .pg-col { order: 2; position: static; margin-top: 6px; }
  body.pg-kb .slv-stage .slv-grid { width: 64% !important; margin-inline: auto; }
  body.pg-kb .slv-chans { display: none; }
}

.pg-sbx { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 4px; max-width: 76px; padding: 0 6px 3px 7px; box-sizing: border-box; pointer-events: none; }
.pg-sbfaces { display: inline-flex; align-items: center; min-width: 0; }
.pg-f { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; border: 1.5px solid #fff; margin-left: -5px; background: #dfe5ec; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: var(--slv-soft); box-sizing: content-box; }
.pg-f:first-child { margin-left: 0; }
.pg-more { width: auto; min-width: 12px; padding: 0 3px; border-radius: 8px; font-size: 9px; }
.slv-sb.pg-lit { box-shadow: inset 0 0 0 2px var(--pg-ring, var(--slv-acc)); border-radius: 9px; }
.pg-sbjoin { pointer-events: auto; flex: none; height: 17px; padding: 0 7px; border: 0; border-radius: 9px; background: var(--pg-ring, var(--slv-acc)); color: var(--pg-ringink, #fff); font: inherit; font-size: 10.5px; font-weight: 700; line-height: 17px; cursor: pointer; }
@media (hover: hover) { .pg-sbjoin:hover { filter: brightness(1.08); } }

.pg-rw { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; width: calc(100% - 6px); margin: 0 6px 6px 0; padding: 7px 2px 6px; border: 0; border-radius: 12px; background: #f1f5f9; color: var(--slv-ink); font: inherit; cursor: pointer; }
.pg-rw.pg-on { background: #e2e8f0; }
@media (hover: hover) { .pg-rw:hover { background: #e2e8f0; } }
.pg-rw.pg-inv { box-shadow: 0 0 0 2px var(--pg-ring, var(--slv-acc)); animation: pg-inv 1.6s ease-in-out 3; }
@keyframes pg-inv { 50% { box-shadow: 0 0 0 4px var(--pg-ring, var(--slv-acc)); } }
@media (prefers-reduced-motion: reduce) { .pg-rw.pg-inv { animation: none; } }
.pg-rwf { display: inline-flex; align-items: center; height: 26px; color: var(--slv-soft); }
.pg-rwf .pg-f { width: 24px; height: 24px; margin-left: -8px; font-size: 11px; border-width: 2px; }
.pg-rwf .pg-f:first-child { margin-left: 0; }
.pg-rwl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 600; }
body.slv-tv .pg-rw:focus-visible { outline: 3px solid var(--slv-acc); outline-offset: 2px; }
@container slv (max-width: 700px) {
  .pg-rw { grid-column: 1 / -1; grid-row: 4; flex-direction: row; justify-content: center; gap: 8px; width: auto; margin: 2px 0 0; padding: 6px 10px; }
}

.pg-wp .slv-pophd > svg { color: var(--slv-ink); }
.pg-wshow { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 8px 10px; border-radius: 10px; background: #f1f5f9; font-size: 13.5px; font-weight: 600; }
.pg-wshow > svg { flex: none; color: var(--slv-soft); }
.pg-wshow > span { flex: 1; }
.pg-wtog { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 6px; padding: 9px 12px; border: 0; border-radius: 10px; background: var(--slv-ink); color: #fff !important; font-size: 13.5px; font-weight: 700; cursor: pointer; text-align: left; }
.pg-wtog small { margin-left: auto; font-weight: 500; opacity: .75; font-size: 12px; }
.pg-wparty { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 8px 10px; border-radius: 10px; background: #f1f5f9; font-size: 13px; }
.pg-wparty .pg-f { width: 22px; height: 22px; margin-left: -7px; font-size: 10px; }
.pg-wparty .pg-f:first-child { margin-left: 0; }
.pg-wparty > span:nth-child(2) { display: inline-flex; align-items: center; gap: 4px; }
.pg-wparty > span:nth-child(2) svg { color: var(--slv-acc); }
.pg-wparty small { margin-left: auto; color: var(--slv-soft); font-size: 12px; }
.pg-wlist { display: flex; flex-direction: column; }
.pg-wr { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 8px; border-radius: 10px; }
@media (hover: hover) { .pg-wr:hover { background: #f8fafc; } }
.pg-wr > .pg-f { flex: none; width: 32px; height: 32px; margin: 0; border: 0; font-size: 13px; }
.pg-wn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pg-wn b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.pg-wn small { display: flex; align-items: center; gap: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--slv-soft); font-size: 12px; }
.pg-wcrew { display: inline-flex; align-items: center; margin-left: 2px; }
.pg-wcrew .pg-f { width: 18px; height: 18px; font-size: 8px; }
.pg-wyou { padding: 1px 6px; border-radius: 6px; background: #f1f5f9; color: var(--slv-faint); font-style: normal; font-size: 11px; font-weight: 600; }
.pg-wsurf { display: inline-flex; color: var(--slv-acc); }
.pg-wjoin { flex: none; height: 32px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--slv-ink); color: #fff !important; font-size: 13px; font-weight: 700; cursor: pointer; }
@media (hover: hover) { .pg-wjoin:hover { filter: brightness(1.25); } }
.pg-win { flex: none; color: var(--slv-faint); font-style: normal; font-size: 12px; font-weight: 600; }

.pg-gm { border-top: 1px solid var(--slv-line); margin-top: 4px; padding-top: 4px; }
.pg-gm > button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; border-radius: 8px; padding: 9px 10px; font-size: 13px; font-weight: 600; text-align: left; color: var(--slv-ink); cursor: pointer; }
@media (hover: hover) { .pg-gm > button:hover { background: #f1f5f9; } }
.pg-gm > button svg { color: var(--slv-soft); flex: none; }
.pg-gm > button i { margin-left: auto; font-style: normal; font-size: 12px; color: var(--slv-faint); }
.pg-gm > button.slv-on i { color: #16a34a; }

.slv-screen.slv-fill .pc-sidepill { top: calc(var(--pg-fssh, 0px) + 10px); }

.slv img.pg-f, .slv-pop img.pg-f { border-radius: 50%; margin: 0 0 0 -5px; display: inline-flex; }
.slv img.pg-f:first-child, .slv-pop img.pg-f:first-child { margin-left: 0; }
.slv .pg-rwf img.pg-f { margin-left: -8px; }
.slv .pg-rwf img.pg-f:first-child, .slv-pop .pg-wr > img.pg-f { margin-left: 0; }
.slv img.pc-bd { display: inline-flex; margin: 0 6px 0 0; border-radius: 4px; }
.slv .pc-frame img.pc-bd { margin-right: 5px; }
.slv img.pc-face { border-radius: 50%; margin: 0 0 0 -8px; display: inline-block; }
.slv img.pc-face:first-child { margin-left: 0; }
.slv .pc-frame img.pc-face { margin-left: -7px; }
.slv .pc-frame img.pc-face:first-child { margin-left: 0; }
.slv img.pc-em { margin: -4px 1px -2px; max-width: calc(var(--pc-emote) * 2); display: inline-block; }
.slv .pc-frame img.pc-em { margin: -3px 1px -2px; }
.slv-pop .pg-wcrew img.pg-f { border-radius: 50%; margin: 0 0 0 -5px; }
.slv-pop .pg-wcrew img.pg-f:first-child { margin-left: 0; }

.pg-rw.pg-inon { width: auto; margin: 4px 4px 0; background: none; padding: 6px 2px 4px; border-top: 1px dashed var(--slv-line); border-radius: 0; }
.pg-rw.pg-inon.pg-on { background: #f8fafc; border-radius: 10px; }
@media (hover: hover) { .pg-rw.pg-inon:hover { background: #f8fafc; border-radius: 10px; } }
.pg-onx { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: -2px 0 4px; }
.pg-onx small { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; color: var(--slv-faint); }
.pg-onx small svg { color: var(--slv-acc); }
.pg-onx em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--slv-faint); }
.pg-onjoin { height: 20px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--slv-ink); color: #fff !important; font-size: 11px; font-weight: 700; cursor: pointer; }
@container slv (max-width: 700px) {
  .slv-onrow .pg-rw.pg-inon { flex: none; flex-direction: row; gap: 6px; margin: 0 0 0 4px; padding: 3px 10px; border: 0; border-radius: 16px; background: #f1f5f9; }
}

.slv-online.pg-own > .slv-onr.slv-on, .slv-onrow.pg-own > .slv-onr.slv-on { display: none; }
.pg-people { display: flex; flex-direction: column; gap: 2px; }
.pg-op { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 3px 5px; border-radius: 10px; text-align: center; outline: none; }
.pg-op:focus-within, .pg-op:focus-visible { background: #f1f5f9; }
@media (hover: hover) { .pg-op:hover { background: #f1f5f9; } }
.pg-opf { position: relative; display: inline-flex; align-items: flex-end; }
.pg-op .pg-f { width: 28px; height: 28px; margin: 0; border: 2px solid #fff; font-size: 12px; }
.pg-opcrew { display: inline-flex; margin-left: -8px; }
.pg-opcrew .pg-f { width: 18px; height: 18px; margin-left: -6px; font-size: 8px; }
.pg-opt { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; max-width: 100%; }
.pg-op b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--slv-ink); }
.pg-opg { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 100%; font-size: 10.5px; font-weight: 500; line-height: 1.25; color: var(--slv-soft); }
.pg-opg svg { vertical-align: -2px; margin-right: 2px; color: var(--slv-acc); }
.pg-opc { font-style: normal; font-size: 9.5px; font-weight: 700; line-height: 14px; padding: 0 4px; border-radius: 4px; background: #f1f5f9; color: var(--slv-faint); }
.pg-opc.pg-oplive { background: rgba(225, 29, 72, .08); color: var(--slv-live); }
.pg-opp { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 700; color: var(--slv-acc); }
.pg-op .pg-onjoin { display: none; margin-top: 2px; }
.pg-op:focus-within .pg-onjoin { display: inline-block; }
@media (hover: hover) { .pg-op:hover .pg-onjoin { display: inline-block; } }
@media (hover: none) { .pg-op .pg-onjoin { display: inline-block; } }
body.slv-tv .pg-op:focus-within .pg-onjoin, body.slv-tv .pg-op:focus .pg-onjoin { display: inline-block; }
.pg-op.pg-ophid em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--slv-faint); }
.pg-op.pg-opme b { color: var(--slv-soft); }
.slv-pop img.pg-f, .slv img.pg-f.pg-op { border-radius: 50%; }
.slv .pg-op img.pg-f { margin: 0; border-radius: 50%; }
.slv .pg-opcrew img.pg-f { margin-left: -6px; }
@container slv (max-width: 700px) {
  .slv-onrow .pg-people { flex-direction: row; gap: 6px; flex: none; }
  .slv-onrow .pg-op { flex-direction: row; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 22px; background: #f8fafc; text-align: left; min-width: 0; }
  .slv-onrow .pg-opt { align-items: flex-start; }
  .slv-onrow .pg-opg { -webkit-line-clamp: 2; max-width: 120px; font-size: 11px; }
  .slv-onrow .pg-opc { flex: none; }
  .slv-onrow .pg-op .pg-onjoin { margin: 0; }
}
.pg-rw.pg-inon .pg-rwl { white-space: normal; text-align: center; line-height: 1.15; font-size: 11px; }
.pg-opp { white-space: nowrap; }
body.slv-tv .pg-opg { -webkit-line-clamp: 3; }
body.slv-tv .pg-opg { font-size: 9.5px; overflow-wrap: anywhere; }
body.slv-tv .pg-op b { font-size: 11px; }

.pc-who .pg-wf { position: relative; display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 4px 0 0; border: 0; border-radius: 13px; background: none; cursor: pointer; }
.pc-who .pg-wf:focus-visible { background: var(--_hover, #f1f5f9); }
@media (hover: hover) { .pc-who .pg-wf:hover { background: var(--_hover, #f1f5f9); } }
.pc-who .pg-f, .pc-box .pc-bh .pg-f { width: 22px; height: 22px; margin: 0; border: 2px solid var(--pg-fc, #fff); font-size: 9px; }
.slv .pc-who img.pg-f, .slv .pc-box img.pg-f { border-radius: 50%; margin: 0; }
.pg-wl { display: inline-flex; align-items: center; gap: 1px; }
.pg-wl img, .slv .pg-wl img { width: 14px; height: 14px; object-fit: contain; margin: 0; border-radius: 0; }
.pg-wb { position: absolute; left: 13px; top: -3px; display: inline-flex; padding: 1px; border-radius: 50%; background: #fff; font-style: normal; color: var(--slv-acc); }
.pg-wfhid { opacity: .85; cursor: default; }
.pc-box .pc-bh .pg-wf { display: inline-flex; margin-left: -4px; }
.pc-box .pc-bh .pg-wb { display: none; }
.pg-wcard { position: absolute; z-index: 30; display: flex; flex-direction: column; gap: 3px; min-width: 170px; max-width: 260px; padding: 9px 11px; border-radius: 10px; background: #fff; color: var(--slv-ink); box-shadow: 0 10px 28px rgba(15, 23, 42, .2); font: 13px/1.35 var(--pc-font, inherit); }
.pg-wcard b { font-weight: 700; }
.pg-wcard span { color: var(--slv-soft); }
.pg-wcard em { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 12px; font-weight: 700; }
.pg-wcard .pg-onjoin { display: inline-block; align-self: flex-start; margin-top: 3px; }
.pg-nudge { display: flex; align-items: center; gap: 8px; margin: 0 8px 6px; padding: 7px 8px 7px 10px; border-radius: 10px; background: var(--_hover, #f1f5f9); font-size: 12.5px; line-height: 1.3; }
.pg-nudge > span { flex: 1; min-width: 0; }
.pg-nudge .pg-f { flex: none; width: 22px; height: 22px; margin: 0; border-radius: 50%; }
.pg-nyes { flex: none; height: 26px; padding: 0 10px; border: 0; border-radius: 13px; background: var(--slv-ink); color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.pg-nno { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--slv-soft); cursor: pointer; display: grid; place-items: center; }
body.pg-league .slv-rail .slv-online, body.pg-league .slv-rail .slv-onrow, body.pg-chaton .slv-rail .pg-rw { display: none !important; }
.pc-col.pc-dark .pg-nudge { background: #1a2330; color: #e5e9ee; }
.pc-col.pc-dark .pc-who .pg-f { border-color: var(--pg-fc, #0b1118); }
.pc-col.pc-dark .pg-wb { background: #0b1118; }

.pg-gmcol { flex-wrap: wrap; }
.pg-gmcol .pg-sws { flex: 1 0 100%; display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; padding: 4px 0 2px; }
.slv-gm0 .pg-gmcol button.pg-sw { min-width: 0; height: auto; aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.slv-gm0 .pg-gmcol button.pg-sw.slv-on { border-color: var(--slv-ink); background: var(--sw); box-shadow: inset 0 0 0 2px #fff; }
.pc-who .pg-wfs { display: contents; }
.pc-who .pg-wcount { flex: none; height: 24px; padding: 0 8px; border: 0; border-radius: 12px; background: none; color: var(--_soft, #475569); font: 600 12px/24px var(--pc-font, inherit); white-space: nowrap; cursor: pointer; }
.pc-who .pg-wcount.pg-on { background: var(--_hover, #f1f5f9); color: var(--_ink, #1d2733); }
@media (hover: hover) { .pc-who .pg-wcount:hover { background: var(--_hover, #f1f5f9); color: var(--_ink, #1d2733); } }
.pc-box .pc-bh .pg-wcount { display: none; }
.slv-dock > .pg-col.pg-docked { flex: 1 1 auto; width: 100%; min-height: 0; height: auto; }

.pg-hopwarn { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 24px); padding: 7px 8px 7px 16px; border-radius: 999px; background: rgba(11, 17, 24, .86); color: #fff; font-size: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35); pointer-events: auto; animation: pg-hopin .25s ease-out; }
.pg-hopwarn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-hopwarn.pg-staying { top: auto; bottom: 64px; left: 12px; transform: none; animation: none; }
.pg-stay { flex: none; height: 30px; padding: 0 14px; border: 0; border-radius: 15px; background: #fff; color: #0b1118; font-weight: 700; font-size: 13px; cursor: pointer; }
@keyframes pg-hopin { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }