/*
 * Shared leaderboard primitive for daily games.
 * Game-specific styles may set the custom properties, but should not duplicate
 * the panel, motion, responsive, rank, flag, or scrollbar-gutter rules here.
 */

.daily-game-page {
    scrollbar-gutter: stable;
}

.daily-game-shell {
    --daily-leaderboard-width: 340px;
    --daily-leaderboard-height: 502px;
    --daily-leaderboard-radius: 18px;
    --daily-leaderboard-motion: 0.5s ease-in-out;
    --daily-leaderboard-heading-size: 1.55rem;
    --daily-leaderboard-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    --daily-leaderboard-rank-color: #d5d9e0;
    --daily-leaderboard-rank-gold: #f2c94c;
    --daily-leaderboard-rank-silver: #aeb7c4;
    --daily-leaderboard-rank-bronze: #c98a58;
    --daily-leaderboard-new-score-color: #e50914;
    --daily-leaderboard-scrim: rgba(3, 5, 9, 0.42);
    --daily-leaderboard-blur: 2px;
}

.daily-game-shell.light-mode {
    --daily-leaderboard-rank-color: #3f444d;
    --daily-leaderboard-rank-silver: #8c96a5;
    --daily-leaderboard-rank-bronze: #b87543;
}

.daily-game-shell .daily-leaderboard-panel {
    position: fixed;
    z-index: 90;
    top: 50%;
    right: 12px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: var(--daily-leaderboard-width);
    max-width: calc(100vw - 24px);
    height: min(var(--daily-leaderboard-height), calc(100dvh - 24px));
    border-radius: var(--daily-leaderboard-radius);
    box-shadow: var(--daily-leaderboard-shadow);
    transform: translate(calc(100% + 32px), -50%);
    transition: right var(--daily-leaderboard-motion),
                transform var(--daily-leaderboard-motion),
                opacity var(--daily-leaderboard-motion);
}

.daily-game-shell .daily-leaderboard-panel.is-open {
    transform: translate(0, -50%);
}

/* Triplexi adapter while its React component retains the legacy class name. */
.daily-game-shell .leaderboard-sidebar {
    box-sizing: border-box;
    width: var(--daily-leaderboard-width);
    max-width: calc(100vw - 24px);
    height: min(var(--daily-leaderboard-height), calc(100dvh - 24px));
    border-radius: var(--daily-leaderboard-radius);
    box-shadow: var(--daily-leaderboard-shadow);
    transition: right var(--daily-leaderboard-motion),
                transform var(--daily-leaderboard-motion),
                opacity var(--daily-leaderboard-motion);
}

.daily-game-shell .daily-leaderboard-heading,
.daily-game-shell .leaderboard-sidebar h2,
.daily-game-shell .leaderboard-modal h2 {
    font-size: var(--daily-leaderboard-heading-size) !important;
    line-height: 1.2;
    white-space: nowrap;
}

.daily-game-shell .daily-leaderboard-scrim.is-leaderboard-scrim {
    background: var(--daily-leaderboard-scrim);
    backdrop-filter: blur(var(--daily-leaderboard-blur));
}

.daily-game-shell .daily-leaderboard-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

.daily-game-shell .daily-leaderboard-row {
    border-radius: 0;
}

.daily-game-shell .daily-leaderboard-flag {
    display: inline-block;
    width: 20px;
    height: auto;
    margin-left: 4px;
    border-radius: 3px;
}

.daily-game-shell .daily-leaderboard-name {
    padding-left: 9px;
}

.daily-game-shell .daily-leaderboard-rank,
.triplexi-shell.daily-game-shell .leaderboard-item > span:first-child > span:first-child {
    display: inline-block;
    min-width: 2ch;
    color: var(--daily-leaderboard-rank-color) !important;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.daily-game-shell .daily-leaderboard-rank::after {
    content: '.';
}

.daily-game-shell .daily-leaderboard-new-score,
.triplexi-shell.daily-game-shell .new-score-permanent-rainbow {
    display: inline-block;
    font-weight: 800;
    animation: daily-leaderboard-rainbow 2s linear infinite;
    will-change: color, transform;
}

@keyframes daily-leaderboard-rainbow {
    0% { color: #ff0000; transform: scale(1); }
    16% { color: #ff7f00; }
    33% { color: #ffff00; }
    50% { color: #00b84f; transform: scale(1.05); }
    66% { color: #0066ff; }
    83% { color: #4b0082; }
    100% { color: #9400d3; transform: scale(1); }
}

.daily-game-shell .daily-leaderboard-row:nth-child(1) .daily-leaderboard-rank,
.triplexi-shell.daily-game-shell .leaderboard-item:nth-child(1) > span:first-child > span:first-child {
    color: var(--daily-leaderboard-rank-gold) !important;
    font-weight: 950;
}

.daily-game-shell .daily-leaderboard-row:nth-child(2) .daily-leaderboard-rank,
.triplexi-shell.daily-game-shell .leaderboard-item:nth-child(2) > span:first-child > span:first-child {
    color: var(--daily-leaderboard-rank-silver) !important;
    font-weight: 950;
}

.daily-game-shell .daily-leaderboard-row:nth-child(3) .daily-leaderboard-rank,
.triplexi-shell.daily-game-shell .leaderboard-item:nth-child(3) > span:first-child > span:first-child {
    color: var(--daily-leaderboard-rank-bronze) !important;
    font-weight: 950;
}

@media (max-width: 767px) {
    .daily-game-shell .daily-leaderboard-panel {
        top: 50%;
        right: auto;
        left: 50%;
        width: min(360px, calc(100vw - 28px));
        max-width: none;
        height: auto;
        max-height: calc(100dvh - 32px);
        border-radius: 20px;
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -46%) scale(0.94);
    }

    .daily-game-shell .daily-leaderboard-panel.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .daily-game-shell .daily-leaderboard-panel,
    .daily-game-shell .leaderboard-sidebar {
        transition-duration: 1ms;
    }

    .daily-game-shell .daily-leaderboard-new-score,
    .triplexi-shell.daily-game-shell .new-score-permanent-rainbow {
        color: var(--daily-leaderboard-new-score-color) !important;
        animation: none;
    }
}