@keyframes sl_fadeUp{from{opacity:0;transform:translateY(2.14286rem);}to{opacity:1;transform:none;}}@keyframes sl_pulse{0%,100%{opacity:1;}50%{opacity:0.5;}}.sl-title{text-align: center;margin-bottom: clamp(2.5rem,4vw,3.75rem);}.sl-title h2{font-family: 'Cinzel','AngelusMedieval',serif;font-size: clamp(1.95rem,4.2vw,4.28571rem);letter-spacing: 0.1em;text-transform: uppercase;color: var(--text-primary,#eef1fb);line-height: 1.15;}.sl-flourish{display: flex;align-items: center;justify-content: center;gap: 1.25rem;max-width: 44.64286rem;margin: 1.07143rem auto 0;}.sl-flourish .sl-line{flex: 1;height: 0.08929rem;background: linear-gradient(90deg,transparent,rgba(201,166,87,0.4) 30%,var(--gold,#c9a657) 50%,rgba(201,166,87,0.4) 70%,transparent);}.sl-flourish .sl-diamond{width: 0.71429rem;height: 0.71429rem;background: var(--gold,#c9a657);transform: rotate(45deg);box-shadow: 0 0 0.71429rem var(--gold,#c9a657);}.thumb-fake{position: relative;width: 100%;height: 100%;overflow: hidden;background: radial-gradient(ellipse at 30% 60%,rgba(20,145,140,0.35),transparent 55%),radial-gradient(ellipse at 75% 30%,rgba(155,135,245,0.3),transparent 60%),linear-gradient(160deg,#0d2940 0%,#1a1740 45%,#0a1028 100%);}.thumb-fake.v2{background: radial-gradient(ellipse at 70% 40%,rgba(180,90,50,.3),transparent 55%),radial-gradient(ellipse at 30% 70%,rgba(155,135,245,.3),transparent 60%),linear-gradient(160deg,#0a1635 0%,#2a1030 45%,#070c1c 100%);}.thumb-fake.v3{background: radial-gradient(ellipse at 40% 50%,rgba(100,60,180,.3),transparent 55%),radial-gradient(ellipse at 80% 20%,rgba(20,145,140,.25),transparent 60%),linear-gradient(160deg,#0d1840 0%,#1d1050 45%,#0a0c28 100%);}.thumb-fake.v4{background: radial-gradient(ellipse at 30% 40%,rgba(232,195,115,.22),transparent 55%),radial-gradient(ellipse at 75% 60%,rgba(155,135,245,.28),transparent 60%),linear-gradient(160deg,#1a1530 0%,#2a2555 45%,#0a0c28 100%);}.thumb-fake.v5{background: radial-gradient(ellipse at 60% 50%,rgba(20,100,160,.35),transparent 55%),radial-gradient(ellipse at 25% 25%,rgba(180,100,220,.25),transparent 60%),linear-gradient(160deg,#050c22 0%,#152048 45%,#05081a 100%);}.sl-live-badge{position: absolute;top: 0.89286rem;left: 0.89286rem;display: flex;align-items: center;gap: 0.53571rem;font-size: .78rem;font-weight: 800;letter-spacing: .2em;text-transform: uppercase;color: #fff;background: #e24b4a;padding: 0.26786rem 0.80357rem;border-radius: 0.17857rem;box-shadow: 0 0.17857rem 0.71429rem rgba(226,75,74,.4);z-index: 3;}.sl-live-badge .dot{width: 0.53571rem;height: 0.53571rem;border-radius: 50%;background: #fff;animation: sl_pulse 1.6s ease-in-out infinite;}.sl-viewer-badge{position: absolute;bottom: 0.89286rem;right: 0.89286rem;display: flex;align-items: center;gap: 0.44643rem;font-size: .86rem;font-weight: 700;color: #fff;background: rgba(0,0,0,.7);backdrop-filter: blur(0.35714rem);padding: 0.35714rem 0.89286rem;border-radius: 0.17857rem;z-index: 3;}.sl-viewer-badge svg{width: 0.98214rem;height: 0.98214rem;}.sl-thumb-play{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: clamp(3.92857rem,5vw,5.17857rem);height: clamp(3.92857rem,5vw,5.17857rem);border-radius: 50%;background: rgba(0,0,0,.55);backdrop-filter: blur(0.35714rem);border: 0.17857rem solid rgba(255,255,255,.9);display: flex;align-items: center;justify-content: center;z-index: 3;opacity: 0;transition: opacity .3s ease,transform .3s ease;pointer-events: none;}.sl-thumb-play::before{content: '';width: 0;height: 0;border-left: 1.25rem solid #fff;border-top: 0.80357rem solid transparent;border-bottom: 0.80357rem solid transparent;margin-left: 0.26786rem;}.spotlight-hero{display: grid;grid-template-columns: 1.7fr 1fr;gap: clamp(1.25rem,2vw,1.96429rem);align-items: stretch;}@media (max-width: 900px){.spotlight-hero{grid-template-columns: 1fr;}}.spotlight-main{position: relative;aspect-ratio: 16/9;overflow: hidden;border: 0.08929rem solid rgba(201,166,87,.4);cursor: pointer;animation: sl_fadeUp .7s cubic-bezier(.25,1,.5,1) both;transition: border-color .4s ease;display: block;text-decoration: none;}.spotlight-main:hover{border-color: var(--gold-bright,#e8c373);}.spotlight-main:hover .sl-thumb-play{opacity: 1;transform: translate(-50%,-50%) scale(1.08);}.spotlight-main.loaded{cursor: default;}.spotlight-main.loaded .sl-thumb-play{display: none;}.spotlight-main.loaded .spotlight-overlay{display: none;}.spotlight-main.loaded .sl-live-badge{display: none;}.spotlight-main.loaded .sl-viewer-badge{display: none;}.spotlight-main.loaded .sl-top-badge{display: none;}.spotlight-main::before,.spotlight-main::after{content: '';position: absolute;width: 2.14286rem;height: 2.14286rem;border: 0.17857rem solid var(--gold,#c9a657);z-index: 5;pointer-events: none;}.spotlight-main::before{top: 0.71429rem;left: 0.71429rem;border-right: none;border-bottom: none;}.spotlight-main::after{bottom: 0.71429rem;right: 0.71429rem;border-left: none;border-top: none;}.sl-top-badge{position: absolute;top: 1.07143rem;right: 1.07143rem;display: inline-flex;align-items: center;gap: 0.71429rem;font-family: 'Cinzel','AngelusMedieval',serif;font-size: clamp(.78rem,1.3vw,.88rem);font-weight: 700;letter-spacing: .22em;text-transform: uppercase;color: #1a0d00;background: linear-gradient(180deg,var(--gold-bright,#e8c373) 0%,var(--gold,#c9a657) 50%,var(--gold-dim,#6e5a2f) 100%);padding: 0.53571rem 1.07143rem;border-radius: 0.17857rem;box-shadow: 0 0.17857rem 0.71429rem rgba(0,0,0,.5),inset 0 0.08929rem 0 rgba(255,240,200,.5);z-index: 4;}.sl-top-badge svg{width: 0.98214rem;height: 0.98214rem;}.spotlight-overlay{position: absolute;left: 0;right: 0;bottom: 0;padding: clamp(3.57143rem,6vw,5.35714rem) clamp(1.42857rem,2.5vw,2.32143rem) clamp(1.25rem,2vw,1.78571rem);background: linear-gradient(180deg,transparent 0%,rgba(7,12,28,.95) 70%);z-index: 3;}.spotlight-tags{display: flex;gap: 0.53571rem;margin-bottom: 0.71429rem;flex-wrap: wrap;}.spotlight-tag{font-size: clamp(.68rem,1.17vw,1.07143rem);font-weight: 700;letter-spacing: .2em;text-transform: uppercase;color: var(--gold-bright,#e8c373);padding: 0.26786rem 0.71429rem;border: 0.08929rem solid rgba(201,166,87,.5);background: rgba(201,166,87,.1);}.spotlight-title{font-family: 'Cinzel','AngelusMedieval',serif;font-size: clamp(1.3rem,2.6vw,1.82rem);font-weight: 700;color: #fff;letter-spacing: .05em;text-transform: uppercase;margin-bottom: 0.53571rem;line-height: 1.2;text-shadow: 0 0.17857rem 0.71429rem rgba(0,0,0,.9);}.spotlight-streamer{display: flex;align-items: center;gap: 0.71429rem;font-size: clamp(.91rem,1.43vw,1.04rem);color: var(--violet-soft,#b5a6ff);letter-spacing: .08em;text-transform: uppercase;font-weight: 500;}.spotlight-streamer::before{content: '◈';color: var(--gold,#c9a657);}.leaderboard{display: flex;flex-direction: column;background: linear-gradient(180deg,rgba(13,20,48,.7) 0%,rgba(7,12,28,.85) 100%);border: 0.08929rem solid rgba(201,166,87,.22);animation: sl_fadeUp .7s cubic-bezier(.25,1,.5,1) .15s both;overflow: hidden;}.leaderboard-header{padding: clamp(1.07143rem,1.5vw,1.42857rem) clamp(1.25rem,2vw,1.60714rem);border-bottom: 0.08929rem solid rgba(201,166,87,.22);display: flex;align-items: center;justify-content: space-between;background: linear-gradient(90deg,rgba(201,166,87,.12),transparent);gap: 0.89286rem;flex-shrink: 0;}.leaderboard-title{display: flex;align-items: center;gap: 0.71429rem;font-family: 'Cinzel','AngelusMedieval',serif;font-size: clamp(.91rem,1.43vw,1.01rem);font-weight: 700;letter-spacing: .2em;text-transform: uppercase;color: var(--gold-bright,#e8c373);}.leaderboard-title svg{width: 1.16071rem;height: 1.16071rem;}.leaderboard-meta{display: inline-flex;align-items: center;gap: 0.53571rem;font-size: clamp(.73rem,1.17vw,.81rem);letter-spacing: .15em;color: var(--text-secondary,#9aa3c7);text-transform: uppercase;font-weight: 500;}.leaderboard-meta .live-dot-sm{width: 0.53571rem;height: 0.53571rem;border-radius: 50%;background: #e24b4a;animation: sl_pulse 1.6s ease-in-out infinite;box-shadow: 0 0 0.35714rem #e24b4a;}.leaderboard-list{display: flex;flex-direction: column;flex: 1;overflow-y: auto;max-height: 100%;}.leaderboard-list::-webkit-scrollbar{width: 0.35714rem;}.leaderboard-list::-webkit-scrollbar-track{background: transparent;}.leaderboard-list::-webkit-scrollbar-thumb{background: rgba(201,166,87,.3);border-radius: 0.17857rem;}.rank-row{display: grid;grid-template-columns: 3.03571rem 1fr auto;gap: clamp(0.89286rem,1.3vw,1.25rem);align-items: center;padding: clamp(0.80357rem,1.2vw,1.07143rem) clamp(1.07143rem,1.8vw,1.42857rem);border-bottom: 0.08929rem solid rgba(155,135,245,.08);cursor: pointer;text-decoration: none;color: inherit;transition: background .3s ease;position: relative;}.rank-row:last-child{border-bottom: none;}.rank-row:hover{background: rgba(155,135,245,.07);}.rank-row.is-active{background: rgba(201,166,87,.08);}.rank-row.is-active .rank-num{opacity: 1;}.rank-row.top::before{content: '';position: absolute;left: 0;top: 0;bottom: 0;width: 0.17857rem;background: linear-gradient(180deg,var(--gold-bright,#e8c373),var(--gold,#c9a657),var(--gold-dim,#6e5a2f));}.rank-row.rank-1::before{background: var(--gold-bright,#e8c373);}.rank-row.rank-2::before{background: #c0c0d0;}.rank-row.rank-3::before{background: #cd7f32;}.rank-num{font-family: 'Cinzel','AngelusMedieval',serif;font-size: clamp(1.24rem,1.7vw,1.43rem);font-weight: 700;color: var(--text-secondary,#9aa3c7);text-align: center;opacity: .7;line-height: 1;}.rank-row:hover .rank-num{opacity: 1;}.rank-row.rank-1 .rank-num{color: var(--gold-bright,#e8c373);opacity: 1;text-shadow: 0 0 0.71429rem rgba(232,195,115,.6);}.rank-row.rank-2 .rank-num{color: #c0c0d0;opacity: 1;}.rank-row.rank-3 .rank-num{color: #cd7f32;opacity: 1;}.rank-streamer-block{min-width: 0;display: flex;align-items: center;gap: clamp(0.71429rem,1.2vw,1.07143rem);}.rank-thumb{flex-shrink: 0;width: clamp(3.57143rem,5vw,4.64286rem);aspect-ratio: 16/9;position: relative;overflow: hidden;border: 0.08929rem solid rgba(201,166,87,.25);}.rank-row.rank-1 .rank-thumb{border-color: rgba(232,195,115,.7);}.rank-row.rank-2 .rank-thumb{border-color: rgba(192,192,208,.6);}.rank-row.rank-3 .rank-thumb{border-color: rgba(205,127,50,.6);}.rank-thumb img{width: 100%;height: 100%;object-fit: cover;display: block;}.rank-thumb .live-dot{position: absolute;top: 0.26786rem;left: 0.26786rem;width: 0.53571rem;height: 0.53571rem;border-radius: 50%;background: #e24b4a;box-shadow: 0 0 0.35714rem #e24b4a;animation: sl_pulse 1.6s ease-in-out infinite;z-index: 2;}.rank-text{min-width: 0;}.rank-streamer{font-family: 'Cinzel','AngelusMedieval',serif;font-size: clamp(.96rem,1.43vw,1.09rem);font-weight: 700;color: var(--gold-bright,#e8c373);letter-spacing: .04em;margin-bottom: 0.17857rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.rank-desc{font-size: clamp(.75rem,1.17vw,.86rem);color: var(--text-secondary,#9aa3c7);letter-spacing: .04em;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.rank-viewers{text-align: right;display: flex;flex-direction: column;align-items: flex-end;gap: 0.17857rem;flex-shrink: 0;}.rank-viewers .num{font-family: 'Cinzel','AngelusMedieval',serif;font-size: clamp(1.04rem,1.7vw,1.24rem);font-weight: 700;color: var(--violet-soft,#b5a6ff);line-height: 1;}.rank-viewers .lbl{font-size: clamp(.62rem,1.1vw,.7rem);letter-spacing: .18em;color: var(--text-secondary,#9aa3c7);text-transform: uppercase;}.home-streams-empty{text-align: center;padding: clamp(2.85714rem,5vw,5rem) 0;color: var(--text-secondary,#9aa3c7);font-size: clamp(1.07rem,1.82vw,1.24rem);letter-spacing: .12em;text-transform: uppercase;}

/* ──────────────────────────────────────────────────
/* ──────────────────────────────────────────────────
   Stream Skeleton Loader
   ────────────────────────────────────────────────── */
@keyframes sl-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* Wrapper: grid-stacking — skeleton and content overlap in same cell */
.sl-lazy-wrap{display:grid}
.sl-lazy-wrap>.sl-skel,
.sl-lazy-wrap>.sl-content{grid-area:1/1;min-width:0}

/* Skeleton — normal flow, establishes height */
.sl-skel{transition:opacity .35s ease}
.sl-lazy-wrap.sl-loaded .sl-skel{opacity:0;pointer-events:none;visibility:hidden}

/* Real content — hidden until loaded */
.sl-content{opacity:0;transition:opacity .5s ease .05s;align-self:start}
.sl-lazy-wrap.sl-loaded .sl-content{opacity:1}

/* Shimmer base */
.sl-skel-pulse{background:linear-gradient(90deg,#0d1525 25%,#1b2a3e 50%,#0d1525 75%);background-size:200% 100%;animation:sl-shimmer 1.6s infinite linear}

/* Grid matches spotlight-hero columns */
.sl-skel-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(1.25rem,2vw,1.96429rem);align-items:stretch}
@media(max-width:900px){.sl-skel-grid{grid-template-columns:1fr}}

/* Left — video placeholder 16/9 */
.sl-skel-main{aspect-ratio:16/9;width:100%;border-radius:.44643rem}

/* Right — leaderboard placeholder */
.sl-skel-board{display:flex;flex-direction:column;background:rgba(6,10,20,.9);border:.08929rem solid rgba(180,145,60,.12);border-radius:.44643rem;overflow:hidden}
.sl-skel-board-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.1rem;border-bottom:.08929rem solid rgba(180,145,60,.1)}
.sl-skel-row{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;border-bottom:.08929rem solid rgba(255,255,255,.04)}
.sl-skel-row:last-child{border-bottom:none}
.sl-skel-num{width:1.4rem;height:1rem;flex-shrink:0;border-radius:.2rem}
.sl-skel-thumb{width:3.6rem;height:2.25rem;flex-shrink:0;border-radius:.25rem}
.sl-skel-text{flex:1;display:flex;flex-direction:column;gap:.4rem;min-width:0}
.sl-skel-views{width:3.2rem;display:flex;flex-direction:column;gap:.35rem;align-items:flex-end;flex-shrink:0}
.sl-skel-line{border-radius:.25rem}
.sl-skel-line--name{height:.85rem;width:65%}
.sl-skel-line--desc{height:.68rem;width:88%}
.sl-skel-line--num{height:.85rem;width:2.2rem}
.sl-skel-line--lbl{height:.65rem;width:3rem}

/* ══════════════════════════════════════════
   STREAMS VISUAL UPGRADE +30%
   ══════════════════════════════════════════ */

/* Spotlight: sharp corner brackets, depth shadow */
.spotlight-main{
  border-radius:.44643rem;
  box-shadow:0 0 0 1px rgba(201,166,87,.15),0 1.78571rem 3.57143rem rgba(0,0,0,.7),0 0 2.67857rem rgba(201,166,87,.06);
}
.spotlight-main::before,.spotlight-main::after{
  width:1.78571rem;height:1.78571rem;border-width:.17857rem;opacity:.85;
  transition:opacity .3s ease,width .3s ease,height .3s ease;
}
.spotlight-main:hover::before,.spotlight-main:hover::after{
  width:2.32143rem;height:2.32143rem;opacity:1;
}

/* Overlay: deeper gradient for better text readability */
.spotlight-overlay{
  background:linear-gradient(180deg,transparent 0%,rgba(5,8,22,.6) 40%,rgba(5,8,22,.97) 80%);
  padding:clamp(4rem,7vw,6.25rem) clamp(1.42857rem,2.5vw,2.32143rem) clamp(1.42857rem,2.2vw,2rem);
}

/* Title: sharper text-shadow */
.spotlight-title{
  text-shadow:0 0.26786rem 1.07143rem rgba(0,0,0,.95),0 0 2.67857rem rgba(0,0,0,.5);
  font-size:clamp(1.35rem,2.8vw,1.96rem);
}

/* Tags: slightly more visible */
.spotlight-tag{
  border-radius:.17857rem;
  backdrop-filter:blur(.35714rem);
  font-size:clamp(.72rem,1.2vw,.86rem);
}

/* Leaderboard: rounded, deeper bg, subtle border glow */
.leaderboard{
  border-radius:.44643rem;
  background:linear-gradient(160deg,rgba(11,17,42,.9) 0%,rgba(6,10,25,.95) 100%);
  border-color:rgba(201,166,87,.28);
  box-shadow:0 0 0 1px rgba(201,166,87,.06),0 1.78571rem 3.57143rem rgba(0,0,0,.5),inset 0 1px 0 rgba(201,166,87,.08);
}
.leaderboard-header{
  background:linear-gradient(90deg,rgba(201,166,87,.16),rgba(201,166,87,.04) 60%,transparent);
  border-bottom-color:rgba(201,166,87,.2);
}

/* Rank rows: better spacing + hover polish */
.rank-row{
  padding:clamp(.89286rem,1.3vw,1.16071rem) clamp(1.07143rem,1.8vw,1.42857rem);
  transition:background .25s ease,box-shadow .25s ease;
}
.rank-row:hover{
  background:rgba(155,135,245,.09);
  box-shadow:inset 2px 0 0 rgba(155,135,245,.4);
}
.rank-row.is-active{
  background:rgba(201,166,87,.1);
  box-shadow:inset 2px 0 0 rgba(201,166,87,.7);
}

/* Top-3: glow accent on left bar */
.rank-row.rank-1{background:rgba(201,166,87,.07);}
.rank-row.rank-1:hover{background:rgba(201,166,87,.12);}
.rank-row.rank-2{background:rgba(192,192,208,.04);}
.rank-row.rank-3{background:rgba(205,127,50,.04);}

/* Rank number: bigger, more character */
.rank-num{font-size:clamp(1.32rem,1.8vw,1.52rem);}
.rank-row.rank-1 .rank-num{
  font-size:clamp(1.43rem,1.95vw,1.65rem);
  text-shadow:0 0 1.07143rem rgba(232,195,115,.7),0 0 2.14286rem rgba(232,195,115,.35);
}

/* Thumbnails: larger, sharper frame */
.rank-thumb{
  width:clamp(4rem,5.5vw,5.17857rem);
  border-radius:.17857rem;
  box-shadow:0 .26786rem .89286rem rgba(0,0,0,.6);
}
.rank-row.rank-1 .rank-thumb{
  border-color:rgba(232,195,115,.8);
  box-shadow:0 0 .89286rem rgba(232,195,115,.3);
}
.rank-thumb img{
  transition:transform .4s ease;
}
.rank-row:hover .rank-thumb img{transform:scale(1.05);}

/* Streamer name: stronger color for top-3 */
.rank-row.rank-1 .rank-streamer{
  color:#f0d98a;
  text-shadow:0 0 .89286rem rgba(232,195,115,.4);
}

/* Viewer count: accent glow on rank-1 */
.rank-row.rank-1 .rank-viewers .num{
  color:#c9a2ff;
  text-shadow:0 0 .71429rem rgba(155,135,245,.5);
}

/* Top badge: brighter, more premium */
.sl-top-badge{
  box-shadow:0 .17857rem .89286rem rgba(0,0,0,.6),inset 0 .08929rem 0 rgba(255,245,210,.6),0 0 1.42857rem rgba(201,166,87,.2);
  letter-spacing:.25em;
}

/* Live badge: slightly more vivid */
.sl-live-badge{
  background:linear-gradient(135deg,#e24b4a,#c9322f);
  box-shadow:0 .17857rem .89286rem rgba(226,75,74,.55),0 0 1.60714rem rgba(226,75,74,.25);
  border-radius:.25rem;
}

/* Viewer badge: more glass */
.sl-viewer-badge{
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(.53571rem);
  border:.08929rem solid rgba(255,255,255,.08);
  border-radius:.25rem;
}

/* Play button: scale on hover */
.spotlight-main:hover .sl-thumb-play{
  opacity:1;
  transform:translate(-50%,-50%) scale(1.12);
  box-shadow:0 0 1.78571rem rgba(255,255,255,.2);
}

/* Scrollbar refinement */
.leaderboard-list::-webkit-scrollbar{width:.26786rem}
.leaderboard-list::-webkit-scrollbar-thumb{background:rgba(201,166,87,.4);border-radius:.26786rem;}
.leaderboard-list::-webkit-scrollbar-thumb:hover{background:rgba(201,166,87,.65);}