/* Sorta Stupid Homepage (2nd-Try style). Scoped under .ss-home. */
.ss-home{--ss-teal:#3ad3d8;--ss-line:#2a2a2a;--ss-sub:#a5a5a5;color:#f1f1f1;font-family:Roboto,system-ui,Arial,sans-serif;padding-bottom:40px}
.ss-home *{box-sizing:border-box}

/* ---- HERO ---- */
.ss-hero{position:relative;height:min(31.25vw,650px);overflow:hidden;background:#14101f}
.ss-hero__slide{position:absolute;inset:0;background-size:cover;background-position:center center;opacity:0;transition:opacity .6s ease}
.ss-hero__slide.on{opacity:1}
.ss-hero__scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,13,1) 2%,rgba(11,11,13,.15) 45%),linear-gradient(to right,rgba(11,11,13,.7),transparent 55%)}
.ss-hero__copy{position:absolute;left:44px;bottom:74px}
.ss-hero__t1{font-size:clamp(26px,4vw,44px);font-weight:900;line-height:1;letter-spacing:-.5px}
.ss-hero__t2{font-size:clamp(15px,1.6vw,22px);font-weight:700;color:#e3e3ea;margin-top:6px;letter-spacing:.5px}
.ss-hero__arw{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font-size:20px;cursor:pointer;z-index:3}
.ss-hero__arw.l{left:14px}.ss-hero__arw.r{right:14px}
.ss-hero__dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:3}
.ss-hero__dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer}
.ss-hero__dots i.on{background:#fff}

/* ---- SECTIONS / ROWS ---- */
.ss-sec{padding:0 44px;margin-top:18px}
.ss-sec__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ss-sec__head h2{margin:0;font-size:22px;font-weight:500}
.ss-rowwrap{position:relative}
/* padding + negative margin so the Billy badge (which overhangs each card's
   bottom-left corner by 12px) is never clipped by the scroll container */
.ss-row{overflow-x:auto;scrollbar-width:none;padding-left:14px;margin-left:-14px;padding-bottom:4px}
.ss-row::-webkit-scrollbar{display:none}

/* Reuse the parent theme's grid inside a horizontal scroll row.
   Real structure: .ss-row > section.grid > .grid__wrap > article.grid__listing */
.ss-row section.grid{margin:0;padding:0;min-height:0 !important}
.ss-row .grid__wrap{display:flex !important;flex-wrap:nowrap !important;gap:16px;grid-template-columns:none !important;margin:0;padding:6px 0 8px;width:max-content}
.ss-row .grid__listing{flex:0 0 300px !important;width:300px !important;max-width:none !important;margin:0 !important}
/* hide any pagination / view-more that the loop prints inside a row */
.ss-row .pagination,.ss-row .grid__more,.ss-row .nav-links,.ss-row .load-more{display:none !important}

/* Tier badge: let it overhang the card corner with a shadow */
.ss-row .grid__badge,.ss-row .billy-badge{filter:drop-shadow(0 3px 5px rgba(0,0,0,.7))}

/* ---- SHOWS (portrait posters) ---- */
.ss-shows{display:flex;gap:18px;padding:6px 0 8px}
.ss-poster{flex:0 0 300px;display:block;color:inherit;text-decoration:none}
.ss-poster__img{aspect-ratio:2/3;border-radius:6px;background:#000 center/contain no-repeat;position:relative;overflow:hidden}
.ss-poster__badge{position:absolute;top:10px;left:10px;background:var(--ss-teal);color:#06282a;font-size:12px;font-weight:700;padding:3px 9px;border-radius:3px}
.ss-poster__orig{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.35);font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:3px}
.ss-poster__t{font-size:16px;margin-top:9px}

/* ---- LIVE NOW ---- */
.ss-livewrap .ss-sec__head h2{display:flex;align-items:center;gap:10px}
.ss-livedot{width:12px;height:12px;border-radius:50%;background:#f00;display:inline-block;animation:sslivepulse 1.5s infinite}
@keyframes sslivepulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,0,0,.5)}50%{opacity:.7;box-shadow:0 0 0 7px rgba(255,0,0,0)}}
.ss-livegrid{display:grid;gap:14px}
.ss-livegrid[data-n="1"]{grid-template-columns:repeat(2,1fr);max-width:1060px}
.ss-livegrid[data-n="2"]{grid-template-columns:repeat(4,1fr)}
.ss-livegrid[data-n="3"]{grid-template-columns:repeat(4,1fr)}
.ss-livegrid[data-n="4"]{grid-template-columns:repeat(4,1fr)}

/* promo blurb: one compact, centered, text-only card.
   Works identically in the 1, 2 and 3-live layouts; hidden at 4. */
.ss-liveblurb{align-self:center;justify-self:center;width:100%;max-width:400px;background:linear-gradient(135deg,#1c1230,#2a123a);border:1px solid #4d2a67;border-radius:10px;padding:26px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-width:0}
.ss-liveblurb__cta{align-self:center}
.ss-livegrid[data-n="2"] .ss-liveblurb{grid-column:span 2}
.ss-livegrid[data-n="4"] .ss-liveblurb{display:none}
.ss-liveblurb h3{margin:0;font-size:19px;font-weight:800}
.ss-liveblurb p{margin:0;color:#c9c3d6;font-size:13.5px;line-height:1.5}
.ss-liveblurb__cta{align-self:flex-start;margin-top:6px;background:#7c3aed;color:#fff;font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:8px;text-decoration:none}
.ss-liveblurb__cta:hover{background:#8b5cf6;color:#fff}

/* small header button, shown only when the grid is full (4 live) */
.ss-livehead-btn{display:none;color:#c9c3d6;font-size:13px;font-weight:600;border:1px solid #4d2a67;border-radius:999px;padding:7px 14px;text-decoration:none}
.ss-livehead-btn:hover{background:#2a123a;color:#fff}
.ss-livewrap[data-n="4"] .ss-livehead-btn{display:inline-flex}
.ss-liveitem{display:none;min-width:0}
.ss-liveitem.on{display:block}
.ss-livebox{aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.ss-livebox iframe{display:block;width:100%;height:100%}
.ss-livename{margin-top:7px;font-size:13px;color:#e6e6e6;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-livename::before{content:"LIVE";background:#f00;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:3px;margin-right:8px;vertical-align:1px}
@media(max-width:1000px){.ss-livegrid[data-n="3"],.ss-livegrid[data-n="4"]{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ss-livegrid[data-n="2"],.ss-livegrid[data-n="3"],.ss-livegrid[data-n="4"]{grid-template-columns:1fr}}

/* ---- LIVE HUB PAGE (quadrant view, no scrolling) ---- */
.ss-hub{padding:20px 30px 26px;color:#f1f1f1}
.ss-hub-head h1{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:900;margin:0 0 14px}
.ss-hub-none{color:#999;font-size:14px;padding:34px;text-align:center;border:1px dashed #333;border-radius:12px;max-width:760px}
.ss-hub-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;height:calc(100vh - 190px);min-height:460px;align-items:start}
.ss-hub-quad{display:grid;gap:10px;min-height:0;align-content:start}
.ss-hub-quad[data-n="1"]{grid-template-columns:minmax(0,1fr);max-width:1000px}
.ss-hub-quad[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.ss-hub-quad[data-n="3"],.ss-hub-quad[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.ss-hub-quad[data-n="5"],.ss-hub-quad[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.ss-hub-cell{display:block;position:relative;background:#000;border-radius:10px;overflow:hidden;aspect-ratio:16/9;align-self:start}
.ss-hub-cell:not(.on){opacity:.55}
.ss-hub-cell:not(.on):hover{opacity:.8}
.ss-hub-chatpanel{height:100%}
.ss-hub-cellbox{position:absolute;inset:0}
.ss-hub-cellbox iframe{display:block;width:100%;height:100%}
.ss-hub-celllabel{position:absolute;top:8px;left:8px;z-index:2;background:rgba(0,0,0,.65);padding:3px 10px 3px 8px;border-radius:5px;font-size:12px;font-weight:600;pointer-events:none}
.ss-hub-celllabel::before{content:"OFFLINE";background:#4a4a52;color:#ddd;font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:3px}
.ss-hub-cell.on .ss-hub-celllabel::before{content:"LIVE";background:#f00;color:#fff}
.ss-hub-chatpanel{display:flex;flex-direction:column;background:#141416;border:1px solid #26262a;border-radius:10px;overflow:hidden;min-height:0}
.ss-hub-chattabs{display:flex;gap:6px;padding:8px;border-bottom:1px solid #26262a;flex-wrap:wrap}
.ss-hub-tab{background:#232327;border:0;border-radius:999px;color:#ccc;font-size:12px;font-weight:600;padding:6px 12px;cursor:pointer}
.ss-hub-tab.on{background:#7c3aed;color:#fff}
.ss-hub-tab.live::after{content:"";width:7px;height:7px;background:#f00;border-radius:50%;display:inline-block;flex:0 0 auto}
.ss-hub-chats{flex:1;position:relative;min-height:0}
.ss-hub-chatframe{position:absolute;inset:0;display:none}
.ss-hub-chatframe.on{display:block}
.ss-hub-chatframe iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:900px){
  .ss-hub{padding:18px 14px}
  .ss-hub-layout{grid-template-columns:1fr;height:auto}
  .ss-hub-quad[data-n="2"],.ss-hub-quad[data-n="3"],.ss-hub-quad[data-n="4"],.ss-hub-quad[data-n="5"],.ss-hub-quad[data-n="6"]{grid-template-columns:1fr;grid-template-rows:none}
  .ss-hub-cell{aspect-ratio:16/9}
  .ss-hub-chats{height:420px}
}

/* ---- MEMBERSHIP BAND ---- */
.ss-band{margin:28px 44px 0;border-radius:14px;background:linear-gradient(135deg,#7c3aed,#d946ef);padding:30px 34px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ss-band h3{margin:0 0 5px;font-size:25px;font-weight:900}
.ss-band p{margin:0;opacity:.93}
.ss-band__cta{margin-left:auto;background:#0b0b0d;color:#fff;font-weight:700;padding:12px 22px;border-radius:9px;text-decoration:none}

@media(max-width:820px){
  .ss-sec,.ss-band{padding-left:16px;padding-right:16px}
  .ss-band{margin-left:16px;margin-right:16px}
  .ss-hero__copy{left:18px;bottom:40px}
  /* size the card CONTAINER (grid__listing), not just its contents -
     mismatched widths were leaving 300px cells with 220px cards inside */
  .ss-row .grid__listing{flex:0 0 232px !important;width:232px !important}
  .ss-poster{flex:0 0 170px}
}

/* ---- PHONES ---- */
@media(max-width:640px){
  .ss-home{padding-bottom:26px}
  /* small, uniform banner on phones (same wide art as desktop) per Ruff -
     replaces the old tall 900/560 mobile crop */
  .ss-hero{aspect-ratio:1600/500;height:auto;max-height:none}
  .ss-sec{margin-top:22px}
  .ss-sec__head h2{font-size:19px}
  .ss-row .grid__listing{flex:0 0 200px !important;width:200px !important}
  .ss-poster{flex:0 0 140px}
  .ss-poster__t{font-size:13px}
  .ss-poster__orig{font-size:8px}
  .ss-poster__badge{font-size:10px;padding:3px 8px}
  .ss-livegrid{gap:10px}
  .ss-liveblurb{max-width:none}
  .ss-livehead-btn{font-size:11px;padding:5px 10px}
  .ss-band{flex-direction:column;align-items:flex-start;padding:22px 20px}
  .ss-band__cta{margin-left:0}
  .ss-band h3{font-size:20px}
  /* mobile-specific art no longer swapped in - the banner is uniform across
     devices now (put `.ss-hero__slide.has-m{background-image:var(--imgm) !important}`
     back here to restore the old behavior) */
}

/* The parent theme's fixed "Become a Member" tab (div.floating) sits on the
   right edge and overlaps the 4th live player. Twitch players refuse to
   autoplay when partially covered (ad viewability), so on the homepage the
   tab is hidden. Members can still join via the Join button in the header. */
body.home div.floating{display:none !important}

/* clickable hero slides (optional per-slide link) */
.ss-hero__linkarea{position:absolute;inset:0;z-index:2}
.ss-hero__copy{position:relative;z-index:3;pointer-events:none}

/* streamer avatars next to channel names */
.ss-livename{display:flex;align-items:center;gap:8px}
.ss-liveavatar{width:22px;height:22px;border-radius:50%;flex:0 0 auto;border:1px solid rgba(255,255,255,.25)}
.ss-hub-celllabel{display:flex;align-items:center;gap:8px}
.ss-hub-tab{display:inline-flex;align-items:center;gap:7px}
.ss-liveavatar.sm{width:18px;height:18px}

/* ---- Franchise hub tiles ---- */
.ss-hubs .ss-sec__head{display:flex;align-items:baseline;gap:14px}
.ss-sec__sub{color:#8d8d98;font-size:13px}
.ss-hubgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.ss-hubtile{display:block;aspect-ratio:16/9;border-radius:10px;background:#1a1a20 center/cover no-repeat;
  border:1px solid rgba(255,255,255,.07);transition:transform .15s,border-color .15s;position:relative;overflow:hidden}
.ss-hubtile:hover{transform:scale(1.035);border-color:#7b2ff2;z-index:2}
@media (max-width:1100px){.ss-hubgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.ss-hubgrid{grid-template-columns:repeat(2,1fr);gap:10px}}

/* ---- v1.8: responsive card widths (no cut-off card at rest) ---- */
@media (min-width:821px){
  .ss-rowwrap{--pv:6}
  .ss-row .grid__listing,.ss-poster{
    flex:0 0 calc((var(--ssvw,100vw) - 88px - (var(--pv) - 1)*16px)/var(--pv)) !important;
    width:calc((var(--ssvw,100vw) - 88px - (var(--pv) - 1)*16px)/var(--pv)) !important;max-width:none !important}
  .ss-shows{gap:16px}
}
@media (min-width:1280px) and (max-width:1599px){.ss-rowwrap{--pv:5}}
@media (min-width:1024px) and (max-width:1279px){.ss-rowwrap{--pv:4}}
@media (min-width:821px) and (max-width:1023px){.ss-rowwrap{--pv:3}}
/* scroll-padding matches the row's 14px lead-in padding so the browser's
   initial snap keeps scrollLeft at 0 (otherwise it snapped the first card to
   the container edge, leaving a 14px offset that lit the left arrow) */
.ss-row{scroll-snap-type:x proximity;scroll-behavior:smooth;scroll-padding-left:14px}
.ss-row .grid__listing,.ss-poster{scroll-snap-align:start}

/* ---- scroll arrows: white when usable, grey when not ---- */
.ss-arw{position:absolute;top:calc(50% - 46px);width:40px;height:68px;z-index:6;border:1px solid #3a3a44;
  border-radius:9px;background:rgba(14,14,18,.88);color:#fff;font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);transition:color .15s,border-color .15s}
.ss-arw:hover:not(.off){border-color:#7b2ff2}
.ss-arw.off{color:#4d4d56;cursor:default;border-color:#2b2b31}
.ss-arw.l{left:-14px}.ss-arw.r{right:-14px}
@media (max-width:820px){.ss-arw{display:none}}

/* ---- clickable section titles ---- */
.ss-sec__link{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.ss-sec__chev{color:#8d8d98;font-size:24px;transition:transform .15s,color .15s}
.ss-sec__link:hover{color:#fff}
.ss-sec__link:hover .ss-sec__chev{color:#a766ff;transform:translateX(4px)}

/* ---- roulette v3: all purple + attention glow + loop toggle ---- */
.ss-roulbtn.alt{background:#7b2ff2;border:none}
.ss-roulbtn.alt:hover{background:#8f4bf5}
@keyframes ssroulglow{0%,86%,100%{box-shadow:0 0 0 0 rgba(167,102,255,0)}90%{box-shadow:0 0 0 5px rgba(167,102,255,.5)}96%{box-shadow:0 0 0 13px rgba(167,102,255,0)}}
.ss-roulsec .ss-roulbtn{animation:ssroulglow 9s infinite}
.ss-roulsec .ss-roulbtn:nth-of-type(2){animation-delay:1.1s}
.ss-roulsec .ss-roulbtn:nth-of-type(3){animation-delay:2.2s}
.ss-roulsec .ss-roulbtn:nth-of-type(4){animation-delay:3.3s}
.ss-roulloop{display:inline-flex;align-items:center;gap:8px;color:#cfc7e4;font-size:13px;font-weight:700;cursor:pointer;user-select:none}
.ss-roulloop input{display:none}
.ss-roulloop__track{width:34px;height:19px;border-radius:10px;background:#2c2740;border:1px solid #4a3d6b;position:relative;transition:background .15s}
.ss-roulloop__dot{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#8d8d98;transition:left .15s,background .15s}
.ss-roulloop input:checked + .ss-roulloop__track{background:#7b2ff2;border-color:#8f4bf5}
.ss-roulloop input:checked + .ss-roulloop__track .ss-roulloop__dot{left:17px;background:#fff}

/* pagination for the New Releases page */
.ss-pagearchive{padding:26px 44px}
.ss-pagearchive h1{font-size:28px;margin:0 0 18px;color:#fff}
.ss-pagination{display:flex;gap:8px;justify-content:center;padding:26px 0 10px}
.ss-pagination a,.ss-pagination span{min-width:38px;text-align:center;padding:9px 12px;border-radius:8px;background:#1d1d24;color:#ddd;text-decoration:none;border:1px solid #2e2e36;font-size:14px}
.ss-pagination span.current{background:#7b2ff2;color:#fff;border-color:#7b2ff2}
.ss-pagination a:hover{border-color:#7b2ff2;color:#fff}

/* New Releases page: tame the parent theme's wild h1 */
.ss-pagearchive h1{position:static !important;transform:none !important;margin:0 0 20px !important;
  font-size:30px !important;color:#fff !important;text-shadow:none !important;-webkit-text-stroke:0 !important;letter-spacing:0 !important}

/* center the circle pagination on the New Releases page */
.ss-pagcenter{display:flex;justify-content:center;padding:26px 0 10px}
.ss-pagcenter .pagination__wrap{justify-content:center}

/* membership band: the channel's own Raining Money art */
.ss-bandart{display:block;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.06);transition:transform .15s,border-color .15s}
.ss-bandart img{display:block;width:100%;height:auto}
.ss-bandart:hover{transform:scale(1.006);border-color:#7b2ff2}