/* Streak badge + leaderboard panel + submit-score dialog (leaderboard-spec.md §8). */

/* ── StreakBadge (header flame + count) ─────────────────────────────────── */
.tpl-streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 152, 0, 0.12);
    border: 1px solid rgba(255, 152, 0, 0.35);
    font-size: 0.85rem;
    font-weight: 600;
    color: #b45309;
    cursor: default;
    user-select: none;
}

[data-bs-theme="dark"] .tpl-streak-badge {
    color: #fbbf24;
    background: rgba(255, 152, 0, 0.18);
}

.tpl-streak-badge.tpl-streak-active {
    border-color: rgba(255, 152, 0, 0.7);
}

/* The header badge is a link to the Streak & Leaderboards page — show it's clickable. */
a#tplStreakBadge,
a#tplStreakBadge .tpl-streak-badge {
    cursor: pointer;
}

a#tplStreakBadge:hover .tpl-streak-badge,
a#tplStreakBadge:focus-visible .tpl-streak-badge {
    border-color: rgba(255, 152, 0, 0.7);
    background: rgba(255, 152, 0, 0.22);
}

@keyframes tpl-streak-pulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

.tpl-streak-pulse {
    animation: tpl-streak-pulse 0.6s ease-in-out 2;
}

/* ── LeaderboardPanel ───────────────────────────────────────────────────── */
.tpl-lb-scroll {
    max-height: 24rem;
    overflow-y: auto;
}

.tpl-lb-panel .nav-link {
    padding: 0.25rem 0.5rem;
}

.tpl-lb-you,
.tpl-lb-you td {
    background: rgba(25, 118, 210, 0.12) !important;
}

[data-bs-theme="dark"] .tpl-lb-you,
[data-bs-theme="dark"] .tpl-lb-you td {
    background: rgba(79, 195, 247, 0.18) !important;
}

.tpl-lb-note {
    font-size: 0.72rem;
    max-width: 60%;
}

/* ── SubmitScoreDialog ──────────────────────────────────────────────────── */
.tpl-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.55);
}

.tpl-dialog {
    width: 100%;
    max-width: 22rem;
}

.tpl-dialog-score {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: #1976d2;
}

[data-bs-theme="dark"] .tpl-dialog-score {
    color: #4fc3f7;
}