/*
 * Contest Leaderboard Website Module (static CSS)
 *
 * IMPORTANT:
 * - This file is served as a module static asset and is referenced by `~/Module.css`.
 * - Keep all rules scoped under `.scm-mod-ContestLeaderboard`.
 * - The actual leaderboard component styling is in ContestLeaderboardDisplay.razor.css
 */

/* ???????????????????????????????????????????????????????????????????????????
   CONTEST LEADERBOARD MODULE - WEBSITE DISPLAY
   ???????????????????????????????????????????????????????????????????????????
   
   A responsive contest leaderboard display for website pages.
    Respects page layout (unlike PublicDisplays which are fullscreen).
    Theme-adaptive — uses --scm-* bridges with light fallbacks.
   
   ??????????????????????????????????????????????????????????????????????????? */

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 1: DESIGN TOKENS
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-ContestLeaderboard {
    /* ?????????????????????????????????????????????????????????????????????????
       Color System - Theme-adaptive with amber accent
       ????????????????????????????????????????????????????????????????????????? */

    /* The tint and shade of the accent are in oklab: oklch interpolates hue around the wheel, so on a chromatic dark
       ground (#1a1a2e) the tint drifted toward the ground's violet. Mixes of two neutrals stay in oklch. */

    /* Primary accent (amber for contest/competition theme) */
    --clb-primary: var(--scm-accent, #f59e0b);
    --clb-primary-hover: color-mix(in oklab, var(--clb-primary) 85%, black 15%);
    --clb-primary-soft: color-mix(in oklab, var(--clb-primary) 12%, var(--clb-bg) 88%);

    /* Surface colors */
    --clb-bg: var(--scm-surface, #ffffff);
    --clb-surface: color-mix(in oklch, var(--clb-bg) 96%, var(--clb-text) 4%);
    --clb-bg-elevated: color-mix(in oklch, var(--clb-bg) 97%, black 3%);
    --clb-bg-muted: color-mix(in oklch, var(--clb-bg) 96%, var(--clb-text) 4%);

    /* Overlay / subtle backgrounds for sections */
    --clb-overlay: rgba(0, 0, 0, 0.03);
    --clb-hover: rgba(0, 0, 0, 0.04);
    --clb-subtle: rgba(0, 0, 0, 0.06);

    /* Text colors */
    --clb-text: var(--scm-surface-contrast, #0f172a);
    --clb-text-muted: color-mix(in oklch, var(--clb-text) 55%, var(--clb-bg) 45%);

    /* Border colors */
    --clb-border: var(--scm-border, #e2e8f0);

    /* Semantic colors */
    --clb-leader-bg: rgba(255, 215, 0, 0.12);
    --clb-best: #a855f7;
    --clb-pos-gain: #16a34a;
    --clb-pos-lost: #ef4444;

    /* Podium / medal colors */
    --clb-gold: #ffd700;
    --clb-gold-end: #ffec8b;
    --clb-silver: #c0c0c0;
    --clb-silver-end: #e8e8e8;
    --clb-bronze: #cd7f32;
    --clb-bronze-end: #daa06d;
    --clb-medal-text: #000;

    /* Status badge colors */
    --clb-status-draft: #6b7280;
    --clb-status-published: #3b82f6;
    --clb-status-active: #22c55e;
    --clb-status-closed: #f59e0b;
    --clb-status-closed-text: #000;
    --clb-status-completed: #8b5cf6;
    --clb-status-cancelled: #ef4444;
    --clb-status-text: #fff;

    /* Prize / highlight */
    --clb-prize-bg: rgba(245, 158, 11, 0.08);

    /* ?????????????????????????????????????????????????????????????????????????
       Typography
       ????????????????????????????????????????????????????????????????????????? */

    --clb-font: inherit;
    --clb-font-mono: 'Roboto Mono', 'Consolas', monospace;

    /* Scaling factor - adjusts for different screen sizes.
       Must stay a unitless number: every gap/padding uses calc(Npx * var(--clb-scale)),
       so a typed/invalid value (e.g. mixing a number with vw) collapses all spacing to 0. */
    --clb-scale: 1;

    /* ?????????????????????????????????????????????????????????????????????????
       Shadows
       ????????????????????????????????????????????????????????????????????????? */

    --clb-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 2: MODULE WRAPPER
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-ContestLeaderboard {
    /* Never re-export --scm-* from the --clb-* tokens here (--scm-accent: var(--clb-primary)). This is the same
       element that reads --clb-primary: var(--scm-accent, ...), so the pair is a cycle: CSS makes both invalid at
       computed-value time instead of taking the fallback. On the Auto look that left the accent at the child's
       literal fallback and unset every derived tier (soft, hover, surface, muted). The bridge's --scm-* already
       reach child components by inheritance, and a custom theme writes them inline on this element. */

    /* Container sizing - fills parent, minimum height for usability */
    width: 100%;
    min-height: 400px;
    
    /* Visual styling */
    font-family: var(--clb-font);
    background: var(--clb-bg);
    color: var(--clb-text);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--clb-shadow);
    
    /* Flexbox for internal layout */
    display: flex;
    flex-direction: column;
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 3: LOADING STATE
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-ContestLeaderboard .scm-mod-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    min-height: 300px;
}

.scm-mod-ContestLeaderboard .scm-mod-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--clb-border);
    border-top-color: var(--clb-primary);
    border-radius: 50%;
    animation: clb-spin 1s linear infinite;
}

@keyframes clb-spin {
    to { transform: rotate(360deg); }
}

.scm-mod-ContestLeaderboard .scm-mod-loading p {
    margin: 0;
    color: var(--clb-text-muted);
    font-size: 0.9rem;
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 4: CONTEST LEADERBOARD DISPLAY COMPONENT
   ??????????????????????????????????????????????????????????????????????????? */

/* Ensure the ContestLeaderboardDisplay component fills the container */
.scm-mod-ContestLeaderboard .contest-leaderboard {
    flex: 1;
    min-height: 0;
    width: 100%;
    border-radius: inherit;

    /* Pass through CSS variables. Two entries here used to read var() of THEMSELVES
       (--lb-surface: var(--lb-surface)), which is a cycle: CSS makes a self-referencing
       custom property invalid at computed-value time rather than falling back, so those
       two tiers were unset on this element and every rule using them silently dropped.
       Removed rather than re-pointed -- the root block above already defines them and
       they inherit. */
    --clb-bg: var(--scm-surface, #ffffff);
    --clb-text: var(--scm-surface-contrast, #0f172a);
    --clb-primary: var(--scm-accent, #f59e0b);
    --clb-border: var(--scm-border, #e2e8f0);
}

/* ???????????????????????????????????????????????????????????????????????????
   Header
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-ContestLeaderboard .leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(16px * var(--clb-scale, 1)) calc(20px * var(--clb-scale, 1));
    background: var(--clb-surface);
    border-bottom: 2px solid var(--clb-primary);
    flex-shrink: 0;
}

.scm-mod-ContestLeaderboard .contest-info {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--clb-scale, 1));
}

.scm-mod-ContestLeaderboard .contest-name {
    font-size: clamp(1.2rem, calc(1.5rem * var(--clb-scale, 1)), 2.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scm-mod-ContestLeaderboard .contest-type.badge {
    font-size: clamp(0.65rem, calc(0.75rem * var(--clb-scale, 1)), 1.1rem);
    font-weight: 600;
    padding: calc(4px * var(--clb-scale, 1)) calc(10px * var(--clb-scale, 1));
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scm-mod-ContestLeaderboard .contest-status {
    display: flex;
    align-items: center;
    gap: calc(12px * var(--clb-scale, 1));
}

.scm-mod-ContestLeaderboard .track-info {
    font-size: clamp(0.75rem, calc(0.9rem * var(--clb-scale, 1)), 1.3rem);
    color: var(--clb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ???????????????????????????????????????????????????????????????????????????
   Status Badges
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-ContestLeaderboard .status-badge {
    font-size: clamp(0.65rem, calc(0.75rem * var(--clb-scale, 1)), 1.1rem);
    font-weight: 600;
    padding: calc(4px * var(--clb-scale, 1)) calc(10px * var(--clb-scale, 1));
    border-radius: 4px;
    text-transform: uppercase;
}

.scm-mod-ContestLeaderboard .status-badge.status-draft { background: var(--clb-status-draft); color: var(--clb-status-text); }
.scm-mod-ContestLeaderboard .status-badge.status-published { background: var(--clb-status-published); color: var(--clb-status-text); }
.scm-mod-ContestLeaderboard .status-badge.status-active { background: var(--clb-status-active); color: var(--clb-status-text); animation: clb-pulse 2s ease-in-out infinite; }
.scm-mod-ContestLeaderboard .status-badge.status-closed { background: var(--clb-status-closed); color: var(--clb-status-closed-text); }
.scm-mod-ContestLeaderboard .status-badge.status-completed { background: var(--clb-status-completed); color: var(--clb-status-text); }
.scm-mod-ContestLeaderboard .status-badge.status-cancelled { background: var(--clb-status-cancelled); color: var(--clb-status-text); }

@keyframes clb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* ???????????????????????????????????????????????????????????????????????????
   Contest Details
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-ContestLeaderboard .contest-details {
    display: flex;
    justify-content: center;
    gap: calc(24px * var(--clb-scale, 1));
    padding: calc(12px * var(--clb-scale, 1)) calc(20px * var(--clb-scale, 1));
    background: var(--clb-overlay);
    border-bottom: 1px solid var(--clb-border);
    flex-shrink: 0;
}

.scm-mod-ContestLeaderboard .detail-item {
    display: flex;
    align-items: center;
    gap: calc(8px * var(--clb-scale, 1));
    font-size: clamp(0.75rem, calc(0.85rem * var(--clb-scale, 1)), 1.2rem);
    color: var(--clb-text-muted);
}

.scm-mod-ContestLeaderboard .detail-item i {
    color: var(--clb-primary);
}

/* ???????????????????????????????????????????????????????????????????????????
   Column Headers
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-ContestLeaderboard .leaderboard-columns {
    display: grid;
    grid-template-columns: minmax(60px, 80px) 1fr minmax(100px, 120px) minmax(80px, 100px) minmax(60px, 80px);
    padding: calc(10px * var(--clb-scale, 1)) calc(20px * var(--clb-scale, 1));
    background: var(--clb-overlay);
    font-size: clamp(0.65rem, calc(0.75rem * var(--clb-scale, 1)), 1rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--clb-text-muted);
    border-bottom: 1px solid var(--clb-border);
    flex-shrink: 0;
}

.scm-mod-ContestLeaderboard .leaderboard-columns > div {
    padding: 0 calc(4px * var(--clb-scale, 1));
}

.scm-mod-ContestLeaderboard .col-rank { text-align: center; }
.scm-mod-ContestLeaderboard .col-time,
.scm-mod-ContestLeaderboard .col-gap,
.scm-mod-ContestLeaderboard .col-attempts { text-align: right; }

/* ???????????????????????????????????????????????????????????????????????????
   Entries Container
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-ContestLeaderboard .leaderboard-entries {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.scm-mod-ContestLeaderboard .leaderboard-entries::-webkit-scrollbar {
    width: 4px;
}

.scm-mod-ContestLeaderboard .leaderboard-entries::-webkit-scrollbar-track {
    background: transparent;
}

.scm-mod-ContestLeaderboard .leaderboard-entries::-webkit-scrollbar-thumb {
    background: var(--clb-border);
    border-radius: 2px;
}

/* ???????????????????????????????????????????????????????????????????????????
   Leaderboard Row
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-ContestLeaderboard .leaderboard-row {
    display: grid;
    grid-template-columns: minmax(60px, 80px) 1fr minmax(100px, 120px) minmax(80px, 100px) minmax(60px, 80px);
    padding: calc(12px * var(--clb-scale, 1)) calc(20px * var(--clb-scale, 1));
    border-bottom: 1px solid var(--clb-border);
    transition: background 0.3s ease;
    align-items: center;
}

.scm-mod-ContestLeaderboard .leaderboard-row:hover {
    background: var(--clb-hover);
}

.scm-mod-ContestLeaderboard .leaderboard-row.leader {
    background: var(--clb-leader-bg);
    border-left: 3px solid var(--clb-gold);
}

.scm-mod-ContestLeaderboard .leaderboard-row.podium {
    border-left: 3px solid transparent;
}

.scm-mod-ContestLeaderboard .leaderboard-row.podium:nth-child(2) {
    border-left-color: var(--clb-silver);
}

.scm-mod-ContestLeaderboard .leaderboard-row.podium:nth-child(3) {
    border-left-color: var(--clb-bronze);
}

.scm-mod-ContestLeaderboard .leaderboard-row.prize-position {
    background: var(--clb-prize-bg);
}

/* ???????????????????????????????????????????????????????????????????????????
   Rank Column
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-ContestLeaderboard .col-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(4px * var(--clb-scale, 1));
}

.scm-mod-ContestLeaderboard .rank-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, calc(32px * var(--clb-scale, 1)), 48px);
    height: clamp(28px, calc(32px * var(--clb-scale, 1)), 48px);
    font-size: clamp(0.9rem, calc(1.1rem * var(--clb-scale, 1)), 1.6rem);
    font-weight: 700;
    border-radius: 4px;
    background: var(--clb-subtle);
}

.scm-mod-ContestLeaderboard .rank-number.rank-1 {
    background: linear-gradient(135deg, var(--clb-gold), var(--clb-gold-end));
    color: var(--clb-medal-text);
}

.scm-mod-ContestLeaderboard .rank-number.rank-2 {
    background: linear-gradient(135deg, var(--clb-silver), var(--clb-silver-end));
    color: var(--clb-medal-text);
}

.scm-mod-ContestLeaderboard .rank-number.rank-3 {
    background: linear-gradient(135deg, var(--clb-bronze), var(--clb-bronze-end));
    color: var(--clb-medal-text);
}

.scm-mod-ContestLeaderboard .rank-change {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: clamp(0.6rem, calc(0.7rem * var(--clb-scale, 1)), 1rem);
    font-weight: 600;
}

.scm-mod-ContestLeaderboard .rank-change.gained { color: var(--clb-pos-gain); }
.scm-mod-ContestLeaderboard .rank-change.lost { color: var(--clb-pos-lost); }

.scm-mod-ContestLeaderboard .prize-indicator {
    color: var(--clb-primary);
    font-size: clamp(0.7rem, calc(0.8rem * var(--clb-scale, 1)), 1.1rem);
    animation: clb-glow 2s ease-in-out infinite;
}

@keyframes clb-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ???????????????????????????????????????????????????????????????????????????
   Driver Column
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-ContestLeaderboard .col-driver {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 calc(8px * var(--clb-scale, 1));
    overflow: hidden;
}

.scm-mod-ContestLeaderboard .driver-name {
    font-weight: 600;
    font-size: clamp(0.85rem, calc(1rem * var(--clb-scale, 1)), 1.5rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ???????????????????????????????????????????????????????????????????????????
   Time/Score Column
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-ContestLeaderboard .col-time {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(6px * var(--clb-scale, 1));
    text-align: right;
    padding: 0 calc(8px * var(--clb-scale, 1));
    font-family: var(--clb-font-mono);
    font-size: clamp(0.8rem, calc(0.95rem * var(--clb-scale, 1)), 1.4rem);
}

.scm-mod-ContestLeaderboard .col-time.best-time {
    color: var(--clb-best);
    font-weight: 700;
}

.scm-mod-ContestLeaderboard .time-value {
    font-weight: 500;
}

.scm-mod-ContestLeaderboard .leader-indicator {
    color: var(--clb-gold);
    font-size: clamp(0.6rem, calc(0.7rem * var(--clb-scale, 1)), 1rem);
}

/* ???????????????????????????????????????????????????????????????????????????
   Gap Column
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-ContestLeaderboard .col-gap {
    text-align: right;
    padding: 0 calc(8px * var(--clb-scale, 1));
    font-family: var(--clb-font-mono);
    font-size: clamp(0.75rem, calc(0.9rem * var(--clb-scale, 1)), 1.3rem);
    color: var(--clb-text-muted);
}

.scm-mod-ContestLeaderboard .leader-text {
    color: var(--clb-primary);
    font-weight: 600;
    font-size: clamp(0.7rem, calc(0.8rem * var(--clb-scale, 1)), 1.1rem);
}

/* ???????????????????????????????????????????????????????????????????????????
   Attempts Column
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-ContestLeaderboard .col-attempts {
    text-align: center;
    font-size: clamp(0.75rem, calc(0.9rem * var(--clb-scale, 1)), 1.3rem);
    color: var(--clb-text-muted);
}

/* ???????????????????????????????????????????????????????????????????????????
   No Entries State
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-ContestLeaderboard .no-entries {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(60px * var(--clb-scale, 1)) calc(20px * var(--clb-scale, 1));
    color: var(--clb-text-muted);
    gap: calc(12px * var(--clb-scale, 1));
    flex: 1;
}

.scm-mod-ContestLeaderboard .no-entries i {
    font-size: clamp(2rem, calc(3rem * var(--clb-scale, 1)), 5rem);
    opacity: 0.5;
}

.scm-mod-ContestLeaderboard .no-entries small {
    font-size: clamp(0.75rem, calc(0.85rem * var(--clb-scale, 1)), 1.2rem);
    opacity: 0.7;
}

/* ???????????????????????????????????????????????????????????????????????????
   Footer
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-ContestLeaderboard .leaderboard-footer {
    padding: calc(8px * var(--clb-scale, 1)) calc(20px * var(--clb-scale, 1));
    background: var(--clb-overlay);
    text-align: right;
    flex-shrink: 0;
}

.scm-mod-ContestLeaderboard .update-time {
    font-size: clamp(0.65rem, calc(0.75rem * var(--clb-scale, 1)), 1rem);
    color: var(--clb-text-muted);
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 5: SIZE VARIANTS
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-ContestLeaderboard.scm-mod-compact {
    min-height: 250px;
    --clb-scale: 0.85;
}

.scm-mod-ContestLeaderboard.scm-mod-large {
    min-height: 600px;
    --clb-scale: 1.1;
}

.scm-mod-ContestLeaderboard.scm-mod-fullheight {
    min-height: 80vh;
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 6: RESPONSIVE ADJUSTMENTS
   ??????????????????????????????????????????????????????????????????????????? */

@media (max-width: 768px) {
    .scm-mod-ContestLeaderboard {
        min-height: 300px;
        border-radius: 0;
    }
    
    .scm-mod-ContestLeaderboard .leaderboard-columns,
    .scm-mod-ContestLeaderboard .leaderboard-row {
        grid-template-columns: 60px 1fr 100px 70px;
    }
    
    .scm-mod-ContestLeaderboard .col-attempts,
    .scm-mod-ContestLeaderboard .leaderboard-columns > .col-attempts {
        display: none;
    }
    
    .scm-mod-ContestLeaderboard .contest-details {
        flex-wrap: wrap;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .scm-mod-ContestLeaderboard .leaderboard-columns,
    .scm-mod-ContestLeaderboard .leaderboard-row {
        grid-template-columns: 50px 1fr 90px;
    }
    
    .scm-mod-ContestLeaderboard .col-gap,
    .scm-mod-ContestLeaderboard .leaderboard-columns > .col-gap {
        display: none;
    }
    
    .scm-mod-ContestLeaderboard .leaderboard-header {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    
    .scm-mod-ContestLeaderboard .contest-info {
        flex-direction: column;
        gap: 4px;
    }
    
    .scm-mod-ContestLeaderboard .contest-details {
        flex-direction: column;
        gap: 8px;
    }
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 7: ACCESSIBILITY
   ??????????????????????????????????????????????????????????????????????????? */

@media (prefers-reduced-motion: reduce) {
    .scm-mod-ContestLeaderboard *,
    .scm-mod-ContestLeaderboard *::before,
    .scm-mod-ContestLeaderboard *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 8: EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-ContestLeaderboard .scm-mod-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--clb-text-muted);
}

.scm-mod-ContestLeaderboard .scm-mod-empty-icon {
    margin-bottom: 1.5rem;
    color: var(--clb-primary);
    opacity: 0.7;
}

.scm-mod-ContestLeaderboard .scm-mod-empty-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--clb-text);
}

.scm-mod-ContestLeaderboard .scm-mod-empty-message {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.scm-mod-ContestLeaderboard .scm-mod-empty-cta {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--clb-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 9: MULTI-LEADERBOARD LAYOUT (AUTO MODE)
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-ContestLeaderboard .scm-mod-leaderboard-item {
    margin-bottom: 1.5rem;
}

.scm-mod-ContestLeaderboard .scm-mod-leaderboard-item:last-child {
    margin-bottom: 0;
}