.results-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

.results-header {
    text-align: center;
    margin-bottom: 50px;
}

.results-header h1 {
    font-size: 2rem;
    margin: 0 0 8px;
}

.results-header p {
    color: var(--muted);
    font-size: 0.95rem;
    margin: 0 0 24px;
}

/* Competition tabs */
.comp-tabs {
    display: flex;
    gap: 4px;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px;
    max-width: 500px;
    margin: 0 auto;
}

.comp-tab {
    flex: 1;
    padding: 10px 16px;
    font-family: 'Space Mono', monospace;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    white-space: nowrap;
}

.comp-tab:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
}

.comp-tab.active {
    color: var(--primary);
    background: rgba(0, 255, 65, 0.08);
    border-color: rgba(0, 255, 65, 0.2);
}

.comp-panel {
    display: none;
}

.comp-panel.active {
    display: block;
}

/* Leaderboard card */
.leaderboard {
    border: 1px solid var(--border);
    margin-bottom: 48px;
    background: var(--surface);
    border-radius: 8px;
    overflow: hidden;
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 255, 65, 0.05);
}

.leaderboard-title {
    font-family: 'Space Mono', monospace;
    font-size: 1rem;
    color: var(--primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.leaderboard-date {
    color: var(--muted);
    font-size: 0.8rem;
}

.leaderboard-count {
    color: var(--muted);
    font-size: 0.8rem;
    font-family: 'Space Mono', monospace;
}

/* Podium */
.podium {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
    padding: 32px 20px 0;
}

.podium-item {
    flex: 1;
    max-width: 200px;
    text-align: center;
    padding: 20px 10px 16px;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    position: relative;
}

.podium-1 {
    min-height: 170px;
    border-color: rgba(255, 215, 0, 0.4);
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 215, 0, 0.02) 100%);
    order: 2;
}

.podium-2 {
    min-height: 130px;
    border-color: rgba(192, 192, 192, 0.4);
    background: linear-gradient(180deg, rgba(192, 192, 192, 0.1) 0%, rgba(192, 192, 192, 0.02) 100%);
    order: 1;
}

.podium-3 {
    min-height: 100px;
    border-color: rgba(205, 127, 50, 0.4);
    background: linear-gradient(180deg, rgba(205, 127, 50, 0.1) 0%, rgba(205, 127, 50, 0.02) 100%);
    order: 3;
}

.podium-icon {
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 6px;
}

/* Active-sort KPI promoted to the top of each podium card.
   Highlighted in primary green so users immediately see which metric
   the ranking is based on. */
.podium-headline {
    margin-bottom: 10px;
}

.podium-headline-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    margin-bottom: 2px;
}

.podium-headline-value {
    font-family: 'Space Mono', monospace;
    font-size: 1.15rem;
    font-weight: bold;
    color: var(--primary);
    line-height: 1.1;
}

.podium-1 .podium-headline-value {
    font-size: 1.35rem;
}

.podium-code {
    font-family: 'Space Mono', monospace;
    font-size: 0.78rem;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.3;
}

.podium-time {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    color: var(--primary);
    margin-bottom: 4px;
}

.podium-msgs {
    font-family: 'Space Mono', monospace;
    font-size: 0.68rem;
    color: var(--muted);
}

.podium-base {
    height: 3px;
    background: linear-gradient(90deg,
            transparent 5%,
            rgba(192, 192, 192, 0.3) 15%,
            rgba(255, 215, 0, 0.5) 50%,
            rgba(205, 127, 50, 0.3) 85%,
            transparent 95%);
    margin: 0 20px;
}

/* Table */
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.leaderboard-table th {
    text-align: left;
    padding: 10px 16px;
    color: var(--muted);
    font-size: 0.7rem;
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.15s;
}

.leaderboard-table th:hover {
    color: var(--primary);
}

.leaderboard-table th .sort-arrow {
    font-size: 0.55rem;
    margin-left: 3px;
    opacity: 0.3;
}

.leaderboard-table th .sort-arrow.active {
    opacity: 1;
    color: var(--primary);
}

.leaderboard-table th.col-right {
    text-align: right;
}

.leaderboard-table td {
    padding: 9px 16px;
    border-bottom: 1px solid rgba(51, 51, 51, 0.4);
}

.leaderboard-table tr:last-child td {
    border-bottom: none;
}

.leaderboard-table tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* Score column — primary metric, visually emphasized so users know
   this is the value that matters most (not the time/messages columns). */
.leaderboard-table th.score-col {
    color: var(--primary);
    opacity: 1;
    border-left: 2px solid var(--primary);
    background: rgba(0, 255, 65, 0.06);
}

.leaderboard-table td.score-col {
    color: var(--primary);
    font-weight: bold;
    font-size: 1rem;
    border-left: 2px solid var(--primary);
    background: rgba(0, 255, 65, 0.06);
    text-align: right;
    font-family: 'Space Mono', monospace;
}

/* Score column help tooltip */
.help-wrap {
    position: relative;
    display: inline-block;
    margin-left: 4px;
    cursor: help;
    vertical-align: baseline;
}

.help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: 0.55rem;
    line-height: 1;
    opacity: 0.7;
    font-family: 'Space Mono', monospace;
    transition: opacity 0.15s;
    user-select: none;
}

.help-wrap:hover .help-icon,
.help-wrap.show .help-icon {
    opacity: 1;
}

.help-icon.help-icon-emoji {
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    font-size: 0.9rem;
    line-height: 1;
    opacity: 1;
    font-family: inherit;
}

.help-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    right: -4px;
    width: 300px;
    max-width: calc(100vw - 32px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 14px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--text);
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    text-align: left;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    pointer-events: none;
    cursor: default;
}

.help-wrap:hover .help-tooltip,
.help-wrap.show .help-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Podium variant — opens below the code, centered horizontally */
.help-wrap-podium {
    margin-left: 6px;
}

.help-wrap-podium .help-tooltip {
    bottom: auto;
    top: calc(100% + 10px);
    right: auto;
    left: 50%;
    width: 260px;
    transform: translate(-50%, 4px);
    text-align: left;
}

.help-wrap-podium:hover .help-tooltip,
.help-wrap-podium.show .help-tooltip {
    transform: translate(-50%, 0);
}

/* Table-row variant — opens above the icon, anchored to its left edge so the
   tooltip extends rightward into the table instead of overflowing the left
   page margin (the Kód column sits at the left side of the table). */
.help-wrap-row {
    margin-left: 6px;
}

.help-wrap-row .help-tooltip {
    right: auto;
    left: 0;
    width: 280px;
}

.help-tooltip strong {
    display: block;
    color: var(--primary);
    font-family: 'Space Mono', monospace;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.help-tooltip p {
    margin: 0 0 8px;
}

.help-tooltip p:last-child {
    margin-bottom: 0;
}

.help-tooltip a,
.help-tooltip a:visited,
.help-tooltip a:hover,
.help-tooltip a:active {
    color: inherit;
    text-decoration: none;
}

.winner-tranzakcio {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    max-height: 320px;
    object-fit: contain;
    margin: 8px auto 0;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
}

/* Top 10 highlight */
.top-10 {
    background: rgba(0, 255, 65, 0.02);
}

.top-10:hover {
    background: rgba(0, 255, 65, 0.05) !important;
}

.top-10-last td {
    border-bottom: 2px solid var(--border) !important;
}

.rank {
    font-family: 'Space Mono', monospace;
    font-weight: bold;
    width: 50px;
    white-space: nowrap;
}

.rank-gold {
    color: #ffd700;
}

.rank-silver {
    color: #c0c0c0;
}

.rank-bronze {
    color: #cd7f32;
}

.rank-top10 {
    color: var(--primary);
    opacity: 0.7;
}

.rank-other {
    color: var(--muted);
}

.code {
    font-family: 'Space Mono', monospace;
    font-size: 0.82rem;
}

.msgs {
    text-align: right;
    font-family: 'Space Mono', monospace;
    font-size: 0.82rem;
    color: var(--muted);
}

.time {
    text-align: right;
    font-family: 'Space Mono', monospace;
    font-size: 0.82rem;
    color: var(--text);
}

/* DNF */
.dnf-separator td {
    padding: 6px 16px;
    font-size: 0.68rem;
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ff6666;
    background: rgba(255, 102, 102, 0.05);
    border-bottom: 1px solid rgba(255, 102, 102, 0.15) !important;
    border-top: 2px solid var(--border);
}

.dnf-row {
    opacity: 0.6;
}

.dnf-row:hover {
    opacity: 0.85;
}

.desktop-only { display: none; }
.mobile-only { display: inline; }
.narrow-only { display: inline; }
.not-narrow { display: none; }
@media (min-width: 391px) {
    .narrow-only { display: none; }
    .not-narrow { display: inline; }
}
@media (min-width: 769px) {
    .desktop-only { display: inline; }
    .mobile-only { display: none; }
}

.dnf-label {
    color: #ff6666;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.empty-msg {
    padding: 30px;
    text-align: center;
    color: var(--muted);
}

.integrity-note {
    margin-top: -32px;
    margin-bottom: 48px;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.6;
    text-align: left;
    font-style: italic;
    background: transparent;
}

.loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
    font-family: 'Space Mono', monospace;
}

.loading::after {
    content: '';
    animation: dots 1.5s steps(3) infinite;
}

@keyframes dots {
    0% {
        content: '.';
    }

    33% {
        content: '..';
    }

    66% {
        content: '...';
    }
}

.error-msg {
    text-align: center;
    padding: 40px 20px;
    color: #ff6666;
    font-family: 'Space Mono', monospace;
}

/* Upcoming competition box */
.upcoming-box {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 8px;
    padding: 48px 24px;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.upcoming-icon {
    font-size: 2.5rem;
    margin-bottom: 16px;
}

.upcoming-title {
    font-family: 'Space Mono', monospace;
    font-size: 1rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.upcoming-date {
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.upcoming-text {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0 0 24px;
}

.upcoming-btn {
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bg);
    background: var(--primary);
    padding: 12px 32px;
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.upcoming-btn:hover {
    opacity: 0.85;
}