/* ============================================================
   STREAMER RANKING PAGE
   Markup: modules/streamers.php

   The page reuses the game ranking classes (.page-title,
   .rankings_menu, .rankings-table, .rankings-update-time) from
   ranking.css. Everything here is scoped under .sr-page so no
   other ranking page is touched.
   ============================================================ */

.sr-page {
    max-width: 950px;
    margin: 20px auto 40px;
    padding: 0 15px;
    box-sizing: border-box;

    --sr-accent:  #ff9800;
    --sr-twitch:  #bf94ff;
    --sr-youtube: #ff5555;
    --sr-tiktok:  #25f4ee;
    --sr-live:    #4caf50;
}

.sr-page .page-title { margin-top: 10px; }

.sr-alert {
    background: rgba(217, 83, 79, 0.12);
    border: 1px solid rgba(217, 83, 79, 0.35);
    border-radius: 8px;
    color: #ff9d9d;
    padding: 14px 18px;
    font-size: 14px;
    text-align: center;
}

/* ---------------------------------------------------------- EMPTY STATE */
.sr-empty-page {
    text-align: center;
    padding: 50px 20px 70px;
    color: #aaa;
}
.sr-empty-page h3 {
    font-size: 18px;
    font-weight: bold;
    color: #f1f1f1;
    margin: 0 0 10px;
}
.sr-empty-page p {
    max-width: 460px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.7;
}

/* ---------------------------------------------------------- FILTER MENU */
/* .rankings_menu caps itself at 50% for the game ranking pages; this page
   has fewer, wider buttons, so it uses the full width instead. */
.sr-page .rankings_menu {
    max-width: 100%;
    padding: 14px;
    margin: 20px auto;
}
.sr-page .rankings_menu a { flex: 0 1 130px; }

/* ---------------------------------------------------------- TABLE */
.sr-page .rankings-table-container { overflow-x: auto; }
.sr-page .rankings-table { font-size: 15px; }
.sr-page .rankings-table th { white-space: nowrap; }
.sr-page .rankings-table td { vertical-align: middle; }

.sr-page .rankings-table-place {
    font-weight: bold;
    color: #888;
    font-variant-numeric: tabular-nums;
    width: 50px;
}
.sr-page .sr-place-1 { color: #ffd700; }
.sr-page .sr-place-2 { color: #c0c0c0; }
.sr-page .sr-place-3 { color: #cd7f32; }

.sr-name { font-weight: bold; color: #f1f1f1; }
.sr-name a { color: #f1f1f1; text-decoration: none; }
.sr-name a:hover { color: var(--sr-accent); }
.sr-page .top3-name a:hover { color: #ffd700; }

.sr-time {
    font-weight: bold;
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.sr-dash { color: #777; }

/* Sortable headings */
.sr-sortable { cursor: pointer; user-select: none; }
.sr-sortable:hover { color: var(--sr-accent); }
.sr-sortable.active { color: var(--sr-accent); }
.sr-sortable.active::after { content: " \25BC"; font-size: 9px; }
.sr-sortable.active[data-dir="asc"]::after { content: " \25B2"; }

/* ---------------------------------------------------------- PLATFORM PILL */
.sr-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
}
.sr-pill svg { width: 11px; height: 11px; fill: currentColor; }

.sr-pill.sr-twitch  { color: var(--sr-twitch);  background: rgba(191, 148, 255, .14); border: 1px solid rgba(191, 148, 255, .32); }
.sr-pill.sr-youtube { color: var(--sr-youtube); background: rgba(255,  85,  85, .14); border: 1px solid rgba(255,  85,  85, .32); }
.sr-pill.sr-tiktok  { color: var(--sr-tiktok);  background: rgba( 37, 244, 238, .12); border: 1px solid rgba( 37, 244, 238, .32); }

/* ---------------------------------------------------------- LIVE */
.sr-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 7px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(76, 175, 80, .16);
    border: 1px solid rgba(76, 175, 80, .4);
    color: var(--sr-live);
    font-size: 9.5px;
    font-weight: bold;
    letter-spacing: .6px;
    vertical-align: middle;
}
.sr-live-pill::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sr-live);
    animation: sr-blink 1.6s ease-in-out infinite;
}
@keyframes sr-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.sr-page .rankings-table tbody tr.is-live       { background: rgba(76, 175, 80, .07); }
.sr-page .rankings-table tbody tr.is-live:hover { background: rgba(76, 175, 80, .12); }

.sr-no-results {
    margin: 0;
    padding: 26px 16px;
    text-align: center;
    color: #aaa;
    font-size: 14px;
}

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width: 767px) {
    .sr-page { padding: 0 10px; }
    .sr-page .rankings-table { font-size: 13px; }
    .sr-page .rankings-table th,
    .sr-page .rankings-table td { padding: 9px 8px; }
    .sr-hide-md { display: none; }
}

@media (max-width: 480px) {
    .sr-hide-sm { display: none; }
    .sr-pill { padding: 3px 7px; font-size: 0; gap: 0; }
    .sr-pill svg { width: 13px; height: 13px; }
    .sr-page .rankings_menu a { flex: 1 1 90px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .sr-live-pill::before { animation: none; }
}