/* ========================================================= RANKINGS — CLEAN EDITION v6 --------------------------------------------------------- • Every row looks the same — clean, legible, theme-aware. • Per-column accent bar (cyan for holders, orange for activity). • No gold rim. No platinum shimmer. No bronze tint. • No glow, no gradients, no animated beams, no holo header. • Top-3 emphasized only by size — never by color. • Exactly 10 slots per column — placeholders fill the gap. ========================================================= */ /* ══════════════════════════════════════════════════════════ 1 · THEME TOKENS ══════════════════════════════════════════════════════════ */ #rankingsOverlay { color-scheme: dark; /* — ink (defers to the app's own text vars when present) — */ --rk-ink-1: var(--text-primary, #e9eef6); --rk-ink-2: var(--text-secondary, rgba(233, 238, 246, .78)); --rk-ink-3: var(--text-muted, rgba(233, 238, 246, .55)); /* — lines — */ --rk-line-1: var(--border-subtle, rgba(255, 255, 255, .075)); --rk-line-2: var(--border-default, rgba(255, 255, 255, .14)); /* — surfaces — */ --rk-surface-1: rgba(255, 255, 255, .026); --rk-surface-2: rgba(255, 255, 255, .048); --rk-inset: rgba(255, 255, 255, .05); --rk-shade: rgba(0, 0, 0, .28); --rk-scroll: rgba(255, 255, 255, .10); --rk-panel-bg: var(--bg-panel, #0e1218); --rk-shadow: 0 26px 70px rgba(0, 0, 0, .68); --rk-row-shadow: 0 4px 14px rgba(0, 0, 0, .28); --rk-col-bg: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 32%), linear-gradient(160deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .08)); --rk-mobile-col-bg: rgba(0, 0, 0, .22); /* — interaction — */ --rk-accent: var(--accent-cyan, #01e1ea); --rk-hover-a: rgba(1, 225, 234, .07); --rk-hover-b: rgba(1, 225, 234, .015); /* — per-column accents — */ --rk-col1: var(--accent-cyan, #01e1ea); --rk-col2: var(--accent-orange, #f68c16); } /* ── LIGHT THEME (system preference) ─────────────────────── */ @media (prefers-color-scheme: light) { #rankingsOverlay:not([data-theme="dark"]):not(.dark):not(.is-dark):not(.theme-dark) { color-scheme: light; --rk-panel-bg: var(--bg-panel, #ffffff); --rk-surface-1: rgba(16, 26, 40, .030); --rk-surface-2: rgba(16, 26, 40, .052); --rk-inset: rgba(255, 255, 255, .85); --rk-shade: rgba(16, 26, 40, .04); --rk-scroll: rgba(16, 26, 40, .18); --rk-shadow: 0 24px 60px rgba(16, 26, 40, .16); --rk-row-shadow: 0 3px 12px rgba(16, 26, 40, .10); --rk-col-bg: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .55)), linear-gradient(160deg, rgba(16, 26, 40, .05), rgba(16, 26, 40, .01)); --rk-mobile-col-bg: rgba(16, 26, 40, .030); --rk-hover-a: rgba(0, 140, 160, .085); --rk-hover-b: rgba(0, 140, 160, .025); } } /* explicit light flags (app-controlled theme) */ #rankingsOverlay[data-theme="light"], #rankingsOverlay.theme-light, #rankingsOverlay.is-light, #rankingsOverlay.light, [data-theme="light"] #rankingsOverlay, .theme-light #rankingsOverlay, .is-light #rankingsOverlay { color-scheme: light; --rk-panel-bg: var(--bg-panel, #ffffff); --rk-surface-1: rgba(16, 26, 40, .030); --rk-surface-2: rgba(16, 26, 40, .052); --rk-inset: rgba(255, 255, 255, .85); --rk-shade: rgba(16, 26, 40, .04); --rk-scroll: rgba(16, 26, 40, .18); --rk-shadow: 0 24px 60px rgba(16, 26, 40, .16); --rk-row-shadow: 0 3px 12px rgba(16, 26, 40, .10); --rk-col-bg: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .55)), linear-gradient(160deg, rgba(16, 26, 40, .05), rgba(16, 26, 40, .01)); --rk-mobile-col-bg: rgba(16, 26, 40, .030); --rk-hover-a: rgba(0, 140, 160, .085); --rk-hover-b: rgba(0, 140, 160, .025); } /* ══════════════════════════════════════════════════════════ 2 · CARD — clean dark panel ══════════════════════════════════════════════════════════ */ #rankingsOverlay .rankings-card { max-width: 1180px !important; width: 92% !important; min-height: 66vh !important; max-height: 90vh !important; padding: 24px 30px 26px !important; background: linear-gradient(180deg, var(--rk-surface-2) 0%, rgba(255, 255, 255, 0) 20%), linear-gradient(180deg, var(--rk-panel-bg) 0%, var(--rk-shade) 100%) !important; border: 1px solid var(--rk-line-2) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 var(--rk-inset), 0 0 0 1px rgba(0, 0, 0, .22), var(--rk-shadow) !important; position: relative !important; overflow-y: auto !important; overflow-x: hidden !important; display: flex !important; flex-direction: column !important; text-align: left !important; isolation: isolate !important; scrollbar-width: thin !important; scrollbar-color: var(--rk-scroll) transparent !important; } #rankingsOverlay .rankings-card::-webkit-scrollbar { width: 8px !important; } #rankingsOverlay .rankings-card::-webkit-scrollbar-track { background: transparent !important; } #rankingsOverlay .rankings-card::-webkit-scrollbar-thumb { background: var(--rk-scroll) !important; border: 2px solid transparent !important; background-clip: content-box !important; border-radius: 99px !important; } /* Top hairline — subtle, no color gradient */ #rankingsOverlay .rankings-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important; background: rgba(255, 255, 255, .10) !important; pointer-events: none !important; z-index: 3 !important; } /* Decorative background — removed */ #rankingsOverlay .rankings-card::after { content: none !important; display: none !important; } /* ══════════════════════════════════════════════════════════ 3 · HEADER — plain title, no gradient ══════════════════════════════════════════════════════════ */ #rankingsOverlay .rankings-header { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 26px !important; padding: 4px 0 20px !important; margin-bottom: 22px !important; border-bottom: 1px solid var(--rk-line-1) !important; flex-shrink: 0 !important; } #rankingsOverlay .rankings-header::before, #rankingsOverlay .rankings-header::after { content: '' !important; flex: 1 1 auto !important; max-width: 340px !important; height: 1px !important; background: var(--rk-line-2) !important; } #rankingsOverlay .rankings-header h3 { font-family: var(--font-mono) !important; font-size: 1.4rem !important; font-weight: 900 !important; letter-spacing: .42em !important; margin: 0 -.42em 0 0 !important; text-transform: uppercase !important; line-height: 1 !important; white-space: nowrap !important; color: var(--rk-ink-1) !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; filter: none !important; animation: none !important; } #rankingsOverlay .rankings-close-btn { position: absolute !important; top: 50% !important; right: 0 !important; margin-top: -17px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; max-width: 34px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: var(--font-mono) !important; font-size: .82rem !important; line-height: 1 !important; color: var(--rk-ink-2) !important; background: var(--rk-surface-1) !important; border: 1px solid var(--rk-line-2) !important; border-radius: 9px !important; box-shadow: inset 0 1px 0 var(--rk-inset) !important; cursor: pointer !important; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), border-color .2s, color .2s, box-shadow .2s, background .2s !important; will-change: transform !important; } #rankingsOverlay .rankings-close-btn:hover { color: var(--accent-red, #ff202a) !important; border-color: var(--accent-red, #ff202a) !important; background: rgba(255, 32, 42, .10) !important; box-shadow: 0 0 18px rgba(255, 32, 42, .45) !important; transform: rotate(90deg) !important; } /* ══════════════════════════════════════════════════════════ 4 · BODY / COLUMNS ══════════════════════════════════════════════════════════ */ #rankingsOverlay .rankings-body { position: relative !important; z-index: 2 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; } #rankingsOverlay .rankings-column { display: flex !important; flex-direction: column !important; min-height: 0 !important; overflow: hidden !important; } #rankingsOverlay .rankings-column:first-child { padding-right: 26px !important; } #rankingsOverlay .rankings-column:last-child { padding-left: 26px !important; border-left: 1px solid var(--rk-line-1) !important; } /* Column titles — plain accent color, no glow, no underline bar */ #rankingsOverlay .rankings-column-title { font-family: var(--font-mono) !important; font-size: .7rem !important; font-weight: 900 !important; letter-spacing: .28em !important; text-transform: uppercase !important; padding: 0 2px 12px !important; margin-bottom: 14px !important; border-bottom: 1px solid var(--rk-line-1) !important; position: relative !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; text-shadow: none !important; } #rankingsOverlay .rankings-column-title::after { content: none !important; display: none !important; } #rankingsOverlay .rankings-column:nth-child(1) .rankings-column-title { color: var(--rk-col1) !important; } #rankingsOverlay .rankings-column:nth-child(2) .rankings-column-title { color: var(--rk-col2) !important; } /* ══════════════════════════════════════════════════════════ 5 · LIST VIEWPORT — exactly 10 slots, invisible scrollbar ══════════════════════════════════════════════════════════ */ #rankingsOverlay .rankings-list { --rk-row-h: 56px; --rk-hero-h: 76px; --rk-gap: 6px; display: flex !important; flex-direction: column !important; gap: var(--rk-gap) !important; flex: 0 0 auto !important; min-height: 0 !important; max-height: calc( var(--rk-hero-h) + 9 * var(--rk-row-h) + 11 * var(--rk-gap) + 6px ) !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 2px 2px 4px !important; counter-reset: rank !important; overscroll-behavior: contain !important; scrollbar-width: none !important; -ms-overflow-style: none !important; } #rankingsOverlay .rankings-list::-webkit-scrollbar { width: 0 !important; height: 0 !important; } #rankingsOverlay .rankings-list::-webkit-scrollbar-track, #rankingsOverlay .rankings-list::-webkit-scrollbar-thumb { background: transparent !important; } #rankingsOverlay .rankings-list.is-scrollable { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 28px), rgba(0, 0, 0, .10) 100%) !important; mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 28px), rgba(0, 0, 0, .10) 100%) !important; } @media (min-width: 769px) { #rankingsOverlay .rankings-list > .rank-row { height: var(--rk-row-h) !important; min-height: 0 !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) { height: var(--rk-hero-h) !important; min-height: 0 !important; } } @media (max-width: 1180px) and (min-width: 769px) { #rankingsOverlay .rankings-list { --rk-row-h: 54px; --rk-hero-h: 74px; --rk-gap: 6px; } } #rankingsOverlay .rankings-empty { display: flex !important; align-items: center !important; justify-content: center !important; padding: 48px 12px !important; margin-top: 6px !important; color: var(--rk-ink-3) !important; font-family: var(--font-mono) !important; font-size: .7rem !important; text-align: center !important; letter-spacing: .2em !important; text-transform: uppercase !important; font-weight: 700 !important; border: 1px dashed var(--rk-line-2) !important; border-radius: 12px !important; background: var(--rk-surface-1) !important; animation: emptyPulse 2.6s ease-in-out infinite !important; } @keyframes emptyPulse { 0%, 100% { opacity: .45; } 50% { opacity: .95; } } /* ══════════════════════════════════════════════════════════ 6 · ROW — uniform clean style for ALL ranks Left border color is set per column below. ══════════════════════════════════════════════════════════ */ #rankingsOverlay .rankings-list > .rank-row { counter-increment: rank !important; display: grid !important; grid-template-columns: 34px 38px minmax(0, 1fr) auto !important; align-items: center !important; gap: 14px !important; padding: 9px 16px 9px 12px !important; min-height: 56px !important; border-radius: 8px !important; background: rgba(255, 255, 255, .03) !important; background-image: none !important; border: 1px solid rgba(255, 255, 255, .08) !important; border-left: 3px solid var(--rk-col1) !important; font-family: var(--font-mono) !important; font-size: .8rem !important; color: var(--rk-ink-1) !important; position: relative !important; overflow: hidden !important; contain: layout style paint !important; box-shadow: none !important; transform: none !important; animation: none !important; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease !important; } /* Column 2 rows get the orange bar */ #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row { border-left-color: var(--rk-col2) !important; } /* Rank number — muted, tabular */ #rankingsOverlay .rankings-list > .rank-row::before { content: counter(rank, decimal-leading-zero) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: var(--font-mono) !important; font-size: .76rem !important; font-weight: 800 !important; letter-spacing: .02em !important; line-height: 1 !important; font-variant-numeric: tabular-nums !important; color: var(--rk-ink-3) !important; text-shadow: none !important; transition: color .18s ease !important; } /* Right-edge bar — none */ #rankingsOverlay .rankings-list > .rank-row::after { content: none !important; display: none !important; } /* Avatar — plain box, no glow */ #rankingsOverlay .rank-avatar, #rankingsOverlay .rank-avatar-fallback { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; border-radius: 10px !important; object-fit: cover !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(0, 0, 0, .35) !important; border: 1px solid rgba(255, 255, 255, .15) !important; color: var(--rk-col1) !important; font-family: var(--font-mono) !important; font-weight: 800 !important; font-size: .78rem !important; line-height: 1 !important; letter-spacing: .02em !important; user-select: none !important; box-shadow: none !important; transition: border-color .18s ease, color .18s ease !important; } /* Info block */ #rankingsOverlay .rank-info, #rankingsOverlay .rank-meta-block { display: flex !important; flex-direction: column !important; gap: 5px !important; min-width: 0 !important; overflow: hidden !important; } #rankingsOverlay .rank-name { font-size: .84rem !important; font-weight: 800 !important; letter-spacing: .06em !important; line-height: 1.1 !important; text-transform: uppercase !important; color: #ffffff !important; text-shadow: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; } #rankingsOverlay .rank-meta { display: flex !important; align-items: center !important; gap: 9px !important; flex-wrap: nowrap !important; overflow: hidden !important; } #rankingsOverlay .rank-level { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 2px 7px !important; border-radius: 4px !important; background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(255, 255, 255, .10) !important; color: rgba(255, 255, 255, .65) !important; font-family: var(--font-mono) !important; font-size: .60rem !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase !important; white-space: nowrap !important; line-height: 1.5 !important; text-shadow: none !important; box-shadow: none !important; } #rankingsOverlay .rank-detail { color: rgba(255, 255, 255, .55) !important; font-size: .66rem !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-shadow: none !important; } /* Stats */ #rankingsOverlay .rank-stats { display: flex !important; align-items: center !important; gap: 14px !important; flex-shrink: 0 !important; margin-left: auto !important; } #rankingsOverlay .rank-score { min-width: 96px !important; text-align: right !important; font-weight: 800 !important; font-size: .88rem !important; letter-spacing: .04em !important; line-height: 1 !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important; color: var(--rk-col1) !important; text-shadow: none !important; } #rankingsOverlay .rankings-column:nth-child(2) .rank-score { color: var(--rk-col2) !important; } /* Hover — subtle lighten, no translation, no glow */ #rankingsOverlay .rankings-list > .rank-row:hover { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .15) !important; border-left-color: var(--rk-col1) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .4) !important; transform: none !important; } #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:hover { border-left-color: var(--rk-col2) !important; } #rankingsOverlay .rankings-list > .rank-row:hover::before { color: rgba(255, 255, 255, .85) !important; text-shadow: none !important; } #rankingsOverlay .rankings-list > .rank-row:hover .rank-avatar, #rankingsOverlay .rankings-list > .rank-row:hover .rank-avatar-fallback { border-color: var(--rk-col1) !important; box-shadow: none !important; } #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:hover .rank-avatar, #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:hover .rank-avatar-fallback { border-color: var(--rk-col2) !important; } /* ══════════════════════════════════════════════════════════ 7 · TOP-3 EMPHASIS — size only, never color ══════════════════════════════════════════════════════════ */ /* #1 — a bit taller with a slightly bigger avatar and score */ #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) { grid-template-columns: 40px 46px minmax(0, 1fr) auto !important; gap: 16px !important; min-height: 76px !important; padding: 12px 20px 12px 14px !important; border-left-width: 4px !important; border-radius: 10px !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder)::before { font-size: 1rem !important; font-weight: 900 !important; color: rgba(255, 255, 255, .85) !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) .rank-avatar, #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) .rank-avatar-fallback { width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; border-radius: 12px !important; font-size: 1rem !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) .rank-name { font-size: .92rem !important; letter-spacing: .08em !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) .rank-score { font-size: 1rem !important; min-width: 110px !important; } /* #2 and #3 — same clean look (no color change) */ #rankingsOverlay .rankings-list > .rank-row:nth-child(2):not(.is-placeholder), #rankingsOverlay .rankings-list > .rank-row:nth-child(3):not(.is-placeholder) { background: rgba(255, 255, 255, .03) !important; background-image: none !important; border-color: rgba(255, 255, 255, .08) !important; border-left: 3px solid var(--rk-col1) !important; box-shadow: none !important; animation: none !important; } #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:nth-child(2):not(.is-placeholder), #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:nth-child(3):not(.is-placeholder) { border-left-color: var(--rk-col2) !important; } #rankingsOverlay .rankings-list > .rank-row:nth-child(2):not(.is-placeholder)::before, #rankingsOverlay .rankings-list > .rank-row:nth-child(3):not(.is-placeholder)::before { color: var(--rk-ink-3) !important; text-shadow: none !important; font-size: .76rem !important; font-weight: 800 !important; } #rankingsOverlay .rankings-list > .rank-row:nth-child(2):not(.is-placeholder) .rank-name, #rankingsOverlay .rankings-list > .rank-row:nth-child(3):not(.is-placeholder) .rank-name { color: #ffffff !important; } #rankingsOverlay .rankings-list > .rank-row:nth-child(2):not(.is-placeholder) .rank-score, #rankingsOverlay .rankings-list > .rank-row:nth-child(3):not(.is-placeholder) .rank-score { color: var(--rk-col1) !important; } #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:nth-child(2):not(.is-placeholder) .rank-score, #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:nth-child(3):not(.is-placeholder) .rank-score { color: var(--rk-col2) !important; } #rankingsOverlay .rankings-list > .rank-row:nth-child(2):not(.is-placeholder) .rank-avatar, #rankingsOverlay .rankings-list > .rank-row:nth-child(2):not(.is-placeholder) .rank-avatar-fallback, #rankingsOverlay .rankings-list > .rank-row:nth-child(3):not(.is-placeholder) .rank-avatar, #rankingsOverlay .rankings-list > .rank-row:nth-child(3):not(.is-placeholder) .rank-avatar-fallback { border-color: rgba(255, 255, 255, .15) !important; color: var(--rk-col1) !important; box-shadow: none !important; } #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:nth-child(2):not(.is-placeholder) .rank-avatar, #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:nth-child(2):not(.is-placeholder) .rank-avatar-fallback, #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:nth-child(3):not(.is-placeholder) .rank-avatar, #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:nth-child(3):not(.is-placeholder) .rank-avatar-fallback { color: var(--rk-col2) !important; } /* ══════════════════════════════════════════════════════════ 8 · BADGES (functional, unchanged) ══════════════════════════════════════════════════════════ */ #rankingsOverlay .rank-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 86px !important; padding: 3px 9px !important; border-radius: 5px !important; font-family: var(--font-mono) !important; font-size: .56rem !important; font-weight: 800 !important; letter-spacing: .14em !important; line-height: 1.6 !important; text-transform: uppercase !important; white-space: nowrap !important; color: var(--rk-ink-3) !important; background: var(--rk-surface-1) !important; border: 1px solid var(--rk-line-1) !important; transition: color .18s, background .18s, border-color .18s !important; } #rankingsOverlay .rank-badge.is-live { color: #17a06a !important; background: rgba(61, 220, 151, .10) !important; border-color: rgba(61, 220, 151, .38) !important; } #rankingsOverlay .rank-badge.is-hot { color: #e3b255 !important; background: rgba(227, 178, 85, .08) !important; border-color: rgba(227, 178, 85, .30) !important; } #rankingsOverlay .rank-badge.is-open { color: #4f6fd8 !important; background: rgba(124, 156, 255, .12) !important; border-color: rgba(124, 156, 255, .38) !important; } #rankingsOverlay .rank-badge.is-off { color: #d94848 !important; background: rgba(255, 107, 107, .10) !important; border-color: rgba(255, 107, 107, .34) !important; } #rankingsOverlay .rank-badge.is-idle { color: var(--rk-ink-3) !important; } #rankingsOverlay .rank-badge.is-live::before { content: '' !important; width: 5px !important; height: 5px !important; border-radius: 50% !important; margin-right: 6px !important; background: currentColor !important; box-shadow: 0 0 8px currentColor !important; animation: badgePulse 2s ease-in-out infinite !important; } @keyframes badgePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* ══════════════════════════════════════════════════════════ 9 · PLACEHOLDER SLOTS ══════════════════════════════════════════════════════════ */ #rankingsOverlay .rankings-list > .rank-row.is-placeholder { pointer-events: none !important; cursor: default !important; background: transparent !important; background-image: none !important; border: 1px dashed rgba(255, 255, 255, .08) !important; border-left: 3px solid transparent !important; box-shadow: none !important; transform: none !important; animation: none !important; opacity: .55 !important; } #rankingsOverlay .rankings-list > .rank-row.is-placeholder::after { display: none !important; } #rankingsOverlay .rankings-list > .rank-row.is-placeholder::before { color: var(--rk-ink-3) !important; text-shadow: none !important; font-weight: 700 !important; opacity: .5 !important; } #rankingsOverlay .rankings-list > .rank-row.is-placeholder .rank-avatar, #rankingsOverlay .rankings-list > .rank-row.is-placeholder .rank-avatar-fallback { background: transparent !important; border: 1px dashed var(--rk-line-2) !important; box-shadow: none !important; color: var(--rk-ink-3) !important; opacity: .55 !important; } #rankingsOverlay .rankings-list > .rank-row.is-placeholder .rank-name { color: var(--rk-ink-3) !important; text-shadow: none !important; opacity: .55 !important; font-weight: 700 !important; letter-spacing: .18em !important; } #rankingsOverlay .rankings-list > .rank-row.is-placeholder .rank-detail { color: var(--rk-ink-3) !important; opacity: .45 !important; letter-spacing: .16em !important; } #rankingsOverlay .rankings-list > .rank-row.is-placeholder .rank-level { color: var(--rk-ink-3) !important; background: transparent !important; border-color: var(--rk-line-1) !important; opacity: .5 !important; } #rankingsOverlay .rankings-list > .rank-row.is-placeholder .rank-score { color: var(--rk-ink-3) !important; text-shadow: none !important; opacity: .5 !important; font-weight: 700 !important; } /* ══════════════════════════════════════════════════════════ 10 · RESPONSIVE ══════════════════════════════════════════════════════════ */ @media (max-width: 1180px) { #rankingsOverlay .rankings-card { padding: 22px !important; } #rankingsOverlay .rankings-column:first-child { padding-right: 20px !important; } #rankingsOverlay .rankings-column:last-child { padding-left: 20px !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) { grid-template-columns: 36px 42px minmax(0, 1fr) auto !important; gap: 14px !important; min-height: 72px !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) .rank-avatar, #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) .rank-avatar-fallback { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; border-radius: 11px !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) .rank-score { font-size: .94rem !important; min-width: 96px !important; } } @media (max-width: 1024px) { #rankingsOverlay .rankings-card { width: 100% !important; max-width: 100% !important; min-height: auto !important; max-height: 94vh !important; padding: 20px 18px !important; border-radius: 14px !important; overflow-y: auto !important; overflow-x: hidden !important; } #rankingsOverlay .rankings-header { padding: 0 2px 16px !important; margin-bottom: 18px !important; gap: 16px !important; } #rankingsOverlay .rankings-header h3 { font-size: 1.1rem !important; letter-spacing: .32em !important; margin-right: -.32em !important; } #rankingsOverlay .rankings-header::before, #rankingsOverlay .rankings-header::after { max-width: 60px !important; } #rankingsOverlay .rankings-body { grid-template-columns: 1fr !important; gap: 24px !important; overflow: visible !important; } #rankingsOverlay .rankings-column:first-child { padding-right: 0 !important; } #rankingsOverlay .rankings-column:last-child { padding-left: 0 !important; border-left: 0 !important; border-top: 1px solid var(--rk-line-1) !important; padding-top: 24px !important; } #rankingsOverlay .rankings-list { overflow: visible !important; max-height: none !important; -webkit-mask-image: none !important; mask-image: none !important; } } @media (max-width: 768px) { #rankingsOverlay .rankings-card { max-width: 96% !important; width: 96% !important; min-height: auto !important; max-height: 92vh !important; padding: 14px 12px !important; border-radius: 12px !important; overflow-y: auto !important; overflow-x: hidden !important; } #rankingsOverlay .rankings-header { padding: 0 2px 12px !important; margin-bottom: 14px !important; } #rankingsOverlay .rankings-header h3 { font-size: .92rem !important; letter-spacing: .22em !important; margin-right: -.22em !important; } #rankingsOverlay .rankings-close-btn { width: 28px !important; height: 28px !important; min-width: 28px !important; max-width: 28px !important; margin-top: -14px !important; font-size: .78rem !important; } #rankingsOverlay .rankings-column { background: var(--rk-mobile-col-bg) !important; border: 1px solid var(--rk-line-1) !important; border-radius: 10px !important; padding: 10px 10px 8px !important; position: relative !important; overflow: hidden !important; } #rankingsOverlay .rankings-column:first-child, #rankingsOverlay .rankings-column:last-child { padding-left: 10px !important; padding-right: 10px !important; border-left: 1px solid var(--rk-line-1) !important; border-top: 1px solid var(--rk-line-1) !important; } #rankingsOverlay .rankings-column::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 3px !important; pointer-events: none !important; } #rankingsOverlay .rankings-column:nth-child(1)::before { background: var(--rk-col1) !important; box-shadow: none !important; } #rankingsOverlay .rankings-column:nth-child(2)::before { background: var(--rk-col2) !important; box-shadow: none !important; } #rankingsOverlay .rankings-column-title { font-size: .66rem !important; letter-spacing: .22em !important; padding: 0 0 8px 8px !important; margin-bottom: 8px !important; } #rankingsOverlay .rankings-list { gap: 4px !important; padding: 0 !important; overflow: visible !important; max-height: none !important; } #rankingsOverlay .rankings-list > .rank-row { display: grid !important; grid-template-columns: 20px 34px minmax(0, 1fr) auto !important; grid-template-areas: "rank avatar name score" "rank avatar meta meta " !important; column-gap: 10px !important; row-gap: 3px !important; padding: 8px 10px !important; min-height: 50px !important; border-radius: 8px !important; border-left-width: 3px !important; font-size: .82rem !important; } #rankingsOverlay .rankings-list > .rank-row::before { grid-area: rank !important; align-self: center !important; font-size: .64rem !important; } #rankingsOverlay .rank-avatar, #rankingsOverlay .rank-avatar-fallback { grid-area: avatar !important; align-self: center !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; border-radius: 10px !important; font-size: .7rem !important; } #rankingsOverlay .rank-info { display: contents !important; } #rankingsOverlay .rank-name { grid-area: name !important; align-self: end !important; font-size: .82rem !important; line-height: 1.15 !important; } #rankingsOverlay .rank-meta { grid-area: meta !important; align-self: start !important; gap: 6px !important; flex-wrap: nowrap !important; overflow: hidden !important; } #rankingsOverlay .rank-level { font-size: .56rem !important; padding: 1px 6px !important; letter-spacing: .08em !important; } #rankingsOverlay .rank-detail { font-size: .58rem !important; letter-spacing: .08em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #rankingsOverlay .rank-stats { display: contents !important; } #rankingsOverlay .rank-score { grid-area: score !important; align-self: end !important; min-width: 0 !important; font-size: .84rem !important; text-align: right !important; line-height: 1.15 !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) { grid-template-columns: 24px 42px minmax(0, 1fr) auto !important; grid-template-areas: "rank avatar name score" "rank avatar meta meta " !important; gap: 10px !important; min-height: 68px !important; padding: 10px !important; border-radius: 10px !important; border-left-width: 4px !important; box-shadow: none !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder)::before { font-size: 1rem !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) .rank-avatar, #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) .rank-avatar-fallback { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; border-radius: 11px !important; font-size: .82rem !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) .rank-info { display: contents !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) .rank-name { font-size: .86rem !important; align-self: end !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) .rank-stats { display: contents !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) .rank-score { font-size: .94rem !important; min-width: 0 !important; align-self: end !important; } #rankingsOverlay .rankings-empty { padding: 24px 10px !important; font-size: .66rem !important; } } @media (max-width: 420px) { #rankingsOverlay .rankings-card { padding: 12px 10px !important; } #rankingsOverlay .rankings-column { padding: 8px 8px 6px !important; } #rankingsOverlay .rankings-list > .rank-row { grid-template-columns: 18px 30px minmax(0, 1fr) auto !important; column-gap: 8px !important; padding: 7px 8px !important; } #rankingsOverlay .rank-avatar, #rankingsOverlay .rank-avatar-fallback { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; border-radius: 9px !important; } #rankingsOverlay .rank-name { font-size: .76rem !important; } #rankingsOverlay .rank-score { font-size: .78rem !important; } #rankingsOverlay .rank-level { font-size: .54rem !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) { grid-template-columns: 20px 36px minmax(0, 1fr) auto !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) .rank-avatar, #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) .rank-avatar-fallback { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; border-radius: 10px !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) .rank-score { font-size: .88rem !important; } } /* ══════════════════════════════════════════════════════════ 11 · ACCESSIBILITY ══════════════════════════════════════════════════════════ */ #rankingsOverlay .rank-row:focus-visible, #rankingsOverlay .rankings-close-btn:focus-visible { outline: 2px solid var(--rk-accent) !important; outline-offset: 2px !important; border-radius: 8px !important; } @media (prefers-reduced-motion: reduce) { #rankingsOverlay .rank-row { transition: none !important; } #rankingsOverlay .rankings-empty { animation: none !important; } #rankingsOverlay .rankings-close-btn:hover { transform: none !important; } #rankingsOverlay .rank-badge.is-live::before { animation: none !important; } #rankingsOverlay .rankings-list.is-scrollable { -webkit-mask-image: none !important; mask-image: none !important; } } /* ══════════════════════════════════════════════════════════ 12 · DESKTOP LAYOUT (≥1025px) — structural only, no gold/platinum ══════════════════════════════════════════════════════════ */ @media (min-width: 1025px) { /* Card — plain dark, no holo radial gradients */ #rankingsOverlay .rankings-card { background: linear-gradient(180deg, var(--rk-surface-2) 0%, rgba(255, 255, 255, 0) 18%), linear-gradient(180deg, var(--rk-panel-bg) 0%, var(--rk-shade) 100%) !important; } /* Title — plain, no gradient text */ #rankingsOverlay .rankings-header h3 { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: currentColor !important; color: var(--rk-ink-1) !important; text-shadow: none !important; filter: none !important; animation: none !important; } /* Body — same two-column layout, no animated seam */ #rankingsOverlay .rankings-body { display: flex !important; gap: 28px !important; position: relative !important; } #rankingsOverlay .rankings-body::before { content: none !important; display: none !important; } /* Column panels — clean, single accent border, no glow */ #rankingsOverlay .rankings-column { flex: 1 1 0 !important; position: relative !important; padding: 0 20px 18px !important; border-radius: 12px !important; border: 1px solid var(--rk-line-2) !important; background: var(--rk-col-bg) !important; box-shadow: inset 0 1px 0 var(--rk-inset), 0 12px 32px rgba(0, 0, 0, .16) !important; transition: border-color .25s ease, box-shadow .25s ease !important; } #rankingsOverlay .rankings-column:hover { transform: none !important; } #rankingsOverlay .rankings-column::after { display: none !important; } #rankingsOverlay .rankings-column::before { content: none !important; display: none !important; } #rankingsOverlay .rankings-column-title, #rankingsOverlay .rankings-list { position: relative !important; z-index: 1 !important; } #rankingsOverlay .rankings-column:nth-child(1) { border-color: rgba(1, 225, 234, .28) !important; box-shadow: inset 0 1px 0 var(--rk-inset), 0 14px 36px rgba(1, 225, 234, .06) !important; } #rankingsOverlay .rankings-column:nth-child(2) { border-color: rgba(246, 140, 22, .28) !important; box-shadow: inset 0 1px 0 var(--rk-inset), 0 14px 36px rgba(246, 140, 22, .06) !important; } #rankingsOverlay .rankings-column:nth-child(1):hover { border-color: rgba(1, 225, 234, .55) !important; } #rankingsOverlay .rankings-column:nth-child(2):hover { border-color: rgba(246, 140, 22, .55) !important; } #rankingsOverlay .rankings-column:first-child { padding-right: 20px !important; } #rankingsOverlay .rankings-column:last-child { padding-left: 20px !important; border-left: 1px solid var(--rk-line-2) !important; } /* Column titles — bigger, plain color, no underline bar */ #rankingsOverlay .rankings-column-title { margin: 0 -20px 18px !important; padding: 16px 20px 15px !important; font-size: .92rem !important; font-weight: 900 !important; letter-spacing: .32em !important; text-indent: .32em !important; line-height: 1.1 !important; border-bottom: 1px solid var(--rk-line-1) !important; background: linear-gradient(180deg, var(--rk-surface-2), rgba(255, 255, 255, 0)) !important; text-shadow: none !important; animation: none !important; } #rankingsOverlay .rankings-column-title::before { content: '' !important; width: 7px !important; height: 7px !important; margin-right: 4px !important; border-radius: 2px !important; background: currentColor !important; box-shadow: none !important; transform: rotate(45deg) !important; flex-shrink: 0 !important; } #rankingsOverlay .rankings-column-title::after { content: none !important; display: none !important; } /* Rows — same as base, extra specificity to beat any leftover top-3 rule */ #rankingsOverlay .rankings-list > .rank-row { border-radius: 8px !important; } /* Hero row — same clean style, just a thicker left bar */ #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) { border-left-width: 4px !important; border-top: 1px solid rgba(255, 255, 255, .10) !important; border-right: 1px solid rgba(255, 255, 255, .08) !important; border-bottom: 1px solid rgba(255, 255, 255, .08) !important; background: rgba(255, 255, 255, .04) !important; background-image: none !important; animation: none !important; box-shadow: none !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder)::after { content: none !important; display: none !important; background: transparent !important; box-shadow: none !important; animation: none !important; } #rankingsOverlay .rankings-list > .rank-row:first-child:not(.is-placeholder) .rank-score { animation: none !important; text-shadow: none !important; } /* #2 and #3 — same clean style */ #rankingsOverlay .rankings-list > .rank-row:nth-child(2):not(.is-placeholder), #rankingsOverlay .rankings-list > .rank-row:nth-child(3):not(.is-placeholder) { border: 1px solid rgba(255, 255, 255, .08) !important; border-left: 3px solid var(--rk-col1) !important; background: rgba(255, 255, 255, .03) !important; background-image: none !important; box-shadow: none !important; animation: none !important; } #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:nth-child(2):not(.is-placeholder), #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:nth-child(3):not(.is-placeholder) { border-left-color: var(--rk-col2) !important; } #rankingsOverlay .rankings-list > .rank-row:nth-child(2):not(.is-placeholder)::after, #rankingsOverlay .rankings-list > .rank-row:nth-child(3):not(.is-placeholder)::after { content: none !important; display: none !important; } #rankingsOverlay .rankings-list > .rank-row:nth-child(2):not(.is-placeholder)::before, #rankingsOverlay .rankings-list > .rank-row:nth-child(3):not(.is-placeholder)::before { color: var(--rk-ink-3) !important; text-shadow: none !important; } #rankingsOverlay .rankings-list > .rank-row:nth-child(2):not(.is-placeholder) .rank-avatar, #rankingsOverlay .rankings-list > .rank-row:nth-child(2):not(.is-placeholder) .rank-avatar-fallback, #rankingsOverlay .rankings-list > .rank-row:nth-child(3):not(.is-placeholder) .rank-avatar, #rankingsOverlay .rankings-list > .rank-row:nth-child(3):not(.is-placeholder) .rank-avatar-fallback { border-color: rgba(255, 255, 255, .15) !important; color: var(--rk-col1) !important; box-shadow: none !important; } #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:nth-child(2):not(.is-placeholder) .rank-avatar, #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:nth-child(2):not(.is-placeholder) .rank-avatar-fallback, #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:nth-child(3):not(.is-placeholder) .rank-avatar, #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:nth-child(3):not(.is-placeholder) .rank-avatar-fallback { color: var(--rk-col2) !important; } #rankingsOverlay .rankings-list > .rank-row:nth-child(2):not(.is-placeholder) .rank-name, #rankingsOverlay .rankings-list > .rank-row:nth-child(3):not(.is-placeholder) .rank-name { color: #ffffff !important; text-shadow: none !important; } #rankingsOverlay .rankings-list > .rank-row:nth-child(2):not(.is-placeholder) .rank-score, #rankingsOverlay .rankings-list > .rank-row:nth-child(3):not(.is-placeholder) .rank-score { color: var(--rk-col1) !important; text-shadow: none !important; } #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:nth-child(2):not(.is-placeholder) .rank-score, #rankingsOverlay .rankings-column:nth-child(2) .rankings-list > .rank-row:nth-child(3):not(.is-placeholder) .rank-score { color: var(--rk-col2) !important; } /* Placeholders — never inherit hero treatment */ #rankingsOverlay .rankings-list > .rank-row.is-placeholder { animation: none !important; background: transparent !important; background-image: none !important; border-left-color: transparent !important; } } /* ══════════════════════════════════════════════════════════ 13 · COMPANION JS (drop into a ========================================================= */