/* ============================================================
   CREATORS & PARTNERS
   A roster page: circular creator portraits first, a red ring
   on anyone live, and the stream itself tucked BELOW the roster
   so the page reads as "who we work with", not "watch this".

   Shares the leaderboards identity - the .bd-* board chrome from
   card.css and the ambient .bg-fx layers from styles.css.

   Everything is prefixed pt-. styles.css already owns .player,
   .empty, .eyebrow, .avatar and .status for the leaderboard
   table, and this page loads that file - an unprefixed .player
   here would inherit `display:flex` and flatten the video frame.
   ============================================================ */

.pt-sec{position:relative;z-index:1}
/* .bd-chip is only ever a <button> on the leaderboard, so card.css never had
   to clear the underline. Here half of them are links. */
a.bd-chip{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
/* the operator's own intro line, set from the staff panel */
.pt-intro{margin:9px 0 0;max-width:58ch;color:#8a8d95;font-size:13px;line-height:1.55}
.pt-intro:empty{display:none}

/* ------------------------------ the roster ------------------------------ */
.pt-roster{
  position:relative;z-index:1;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(152px,1fr));
  gap:22px 12px;padding:22px 20px 26px;
}
.pt-person{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}

/* The portrait is the control. Live creators are buttons that pull their
   stream into the theatre below; offline ones are links out to Twitch. */
.pt-face{
  position:relative;display:block;width:104px;height:104px;padding:0;
  border:0;border-radius:50%;background:transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.pt-face img{
  width:100%;height:100%;display:block;border-radius:50%;object-fit:cover;
  background:#15161a;transition:filter .2s,transform .2s;
}
/* The ring is a box-shadow, not a border, so it never changes the layout box
   and both rings can sit on the same element at different radii. */
.pt-face:after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  box-shadow:0 0 0 2px #ffffff17;transition:box-shadow .22s;
}
.pt-person.off .pt-face img{filter:grayscale(.85) brightness(.72)}
.pt-person.off .pt-face:hover img{filter:grayscale(.35) brightness(.9)}
.pt-person.off .pt-face:hover:after{box-shadow:0 0 0 2px #ffffff33}

/* live: the red ring, plus a soft bloom so it reads across the grid */
.pt-person.on .pt-face:after{
  box-shadow:0 0 0 3px #ef5b57, 0 0 20px 2px #ef5b5745;
  animation:ptRing 2.4s ease-in-out infinite;
}
.pt-person.on .pt-face:hover:after{box-shadow:0 0 0 3px #ff7a76, 0 0 26px 4px #ef5b5766}
.pt-person.on .pt-face:hover img{transform:scale(1.03)}
@keyframes ptRing{
  0%,100%{box-shadow:0 0 0 3px #ef5b57, 0 0 20px 2px #ef5b5745}
  50%{box-shadow:0 0 0 3px #ef5b57, 0 0 26px 5px #ef5b5766}
}
/* the tile currently playing in the theatre */
.pt-person.playing .pt-face:after{box-shadow:0 0 0 3px #ff8b87, 0 0 28px 5px #ef5b5f7a;animation:none}
.pt-face:focus-visible{outline:none}
.pt-face:focus-visible:after{box-shadow:0 0 0 3px #fff, 0 0 0 6px #ef5b57}

/* LIVE flag pinned to the bottom of the portrait */
.pt-flag{
  position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:4px;
  background:#ef5b57;color:#fff;font-family:Oswald,Arial,sans-serif;font-size:9.5px;
  font-weight:700;letter-spacing:.14em;white-space:nowrap;
  box-shadow:0 3px 10px #0007;
}
.pt-flag i{width:5px;height:5px;border-radius:50%;background:#fff}

.pt-name{
  margin:20px 0 0;max-width:100%;overflow:hidden;
  font-family:Oswald,Arial,sans-serif;font-weight:700;font-size:15px;line-height:1.2;
  color:#fff;text-overflow:ellipsis;white-space:nowrap;
}
.pt-person a.pt-name{text-decoration:none}
.pt-person a.pt-name:hover{color:#ef8b88}
.pt-meta{
  margin:5px 0 0;font-family:Oswald,Arial,sans-serif;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:#6f727a;
}
.pt-person.on .pt-meta{color:#ef8b88}

/* social links under the picture */
.pt-socials{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:10px 0 0}
.pt-social{
  display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:4px;
  border:1px solid #ffffff14;background:#0b0c0e;text-decoration:none;
  font-family:Oswald,Arial,sans-serif;font-size:9px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:#8a8d95;transition:border-color .16s,color .16s;
}
.pt-social:hover{border-color:#ef5b578c;color:#fff}

/* ------------------------------- theatre -------------------------------- */
/* Only rendered when someone is live and selected. */
.pt-watch[hidden]{display:none}
/* Single column: the stream runs full width and the creator's details sit in a
   bar underneath it, rather than squeezed into a sidebar. */
.pt-theatre{display:flex;flex-direction:column;background:#0a0b0d;
  border-top:1px solid #ffffff0f;border-bottom:1px solid #ffffff0f}
.pt-screen{position:relative;aspect-ratio:16/9;background:#000;border-bottom:1px solid #ffffff0f}
.pt-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* details left, actions right; both wrap onto their own line when narrow */
.pt-side{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:15px 18px;min-width:0}
.pt-side>#stage-info{flex:1 1 340px;min-width:0}

.pt-who{display:flex;align-items:center;gap:11px;min-width:0}
.pt-who img{width:44px;height:44px;flex:none;border:1px solid #ef5b5745;border-radius:50%;background:#15161a;object-fit:cover}
.pt-who div{min-width:0}
.pt-who h2{margin:0;overflow:hidden;font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-weight:700;
  font-size:21px;line-height:1.15;letter-spacing:.01em;color:#fff;text-overflow:ellipsis;white-space:nowrap}
.pt-who span{display:block;margin-top:3px;font-family:Oswald,Arial,sans-serif;font-size:10px;
  letter-spacing:.14em;color:#8a8d95;font-weight:500}
.pt-headline{margin:11px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;color:#bbbcc2;font-size:13px;line-height:1.5}
.pt-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:11px}
.pt-chip{font-family:Oswald,Arial,sans-serif;font-size:10.5px;letter-spacing:.12em;font-weight:500;
  padding:5px 10px;border:1px solid #ffffff1f;border-radius:6px;background:#0b0c0e;color:#8a8d95}
.pt-chip b{color:#fff;font-weight:700}
.pt-live{display:inline-flex;align-items:center;gap:6px;font-family:Oswald,Arial,sans-serif;font-size:10px;
  font-weight:700;letter-spacing:.14em;padding:4px 9px;border:1px solid #ef5b5766;border-radius:5px;
  background:#ef5b5721;color:#ff9b98;text-transform:uppercase}
.pt-live i{width:6px;height:6px;border-radius:50%;background:#ef5b57;animation:ptPulse 1.8s ease-in-out infinite}
@keyframes ptPulse{0%,100%{box-shadow:0 0 0 0 #ef5b5799}70%{box-shadow:0 0 0 5px #ef5b5700}}
.pt-cta{display:flex;gap:8px;flex:none;align-items:center}

/* ------------------------------ partner cards ---------------------------- */
.pt-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:12px;padding:14px 20px 18px}
.pt-org{display:flex;flex-direction:column;min-width:0;padding:15px;border:1px solid #ffffff14;border-radius:10px;
  background:#0b0c0e;color:inherit;text-decoration:none;transition:border-color .18s,transform .18s}
.pt-org:hover{border-color:#ef5b578c;transform:translateY(-2px)}
.pt-logo{height:50px;display:flex;align-items:center;margin-bottom:12px}
.pt-logo img{max-width:128px;max-height:50px;object-fit:contain}
.pt-logo .pt-mark{display:grid;place-items:center;width:44px;height:44px;border:1px solid #ef5b5745;border-radius:9px;
  background:#ef5b5712;font-family:Oswald,'Arial Narrow',Arial,sans-serif;font-size:19px;font-weight:700;color:#ef5b57}
.pt-org h3{margin:0;overflow:hidden;font-family:Oswald,Arial,sans-serif;font-weight:700;font-size:15px;color:#fff;
  text-overflow:ellipsis;white-space:nowrap}
.pt-kind{display:inline-block;margin-top:7px;padding:3px 8px;border:1px solid #ef5b5738;border-radius:4px;
  background:#ef5b570f;font-family:Oswald,Arial,sans-serif;font-size:9px;font-weight:500;letter-spacing:.14em;
  color:#ef8b88;text-transform:uppercase}
.pt-blurb{margin:10px 0 0;color:#8a8d95;font-size:12px;line-height:1.55}
.pt-visit{margin-top:auto;padding-top:12px;font-family:Oswald,Arial,sans-serif;font-size:10px;letter-spacing:.14em;
  color:#6f727a}
.pt-org:hover .pt-visit{color:#ef5b57}

/* -------------------------------- messages ------------------------------- */
.pt-msg{grid-column:1/-1;padding:34px;border:1px solid #ffffff14;border-radius:10px;background:#0b0c0e;
  color:#8a8d95;text-align:center;font-size:12px;line-height:1.6}
.pt-msg strong{display:block;margin-bottom:6px;font-family:Oswald,Arial,sans-serif;font-size:15px;color:#e8e8eb}

@media(max-width:640px){
  /* stack the actions under the details and let them share the width */
  .pt-cta{width:100%}
  .pt-cta .bd-chip{flex:1}
}
@media(max-width:600px){
  .pt-roster{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:18px 8px;padding:18px 14px 22px}
  .pt-face{width:82px;height:82px}
  .pt-name{margin-top:17px;font-size:13px}
  .pt-social{font-size:8px;height:20px;padding:0 6px}
  .pt-grid{grid-template-columns:1fr 1fr;gap:10px;padding:12px 14px 16px}
  .pt-who h2{font-size:18px}
  .pt-hint{display:none}
}
@media(max-width:380px){
  .pt-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .pt-live i,.pt-person.on .pt-face:after{animation:none}
  .pt-org:hover{transform:none}
  .pt-person.on .pt-face:hover img{transform:none}
}