/* Public leaderboard (Components/Pages/Main/Leaderboard.razor, Components/Ranking). Tabs, podium, search, chips and
   meters are in explore.css; ranks and worn cosmetics in progression.css / cosmetics.css. */

/* ---------- Boards and filters ---------- */

.pn-rank-boards { margin: 4px 0 12px; }

.pn-rank-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 0 0 20px;
}

/* The period is one choice of three: a segmented control, not loose chips. */
.pn-rank-periods {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-surface);
}

.pn-rank-period {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: var(--pn-radius-sm);
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--pn-dur-fast) ease, color var(--pn-dur-fast) ease,
        transform var(--pn-dur-press) var(--pn-ease-out);
}

.pn-rank-period[aria-current="page"] {
    background: var(--pn-brand-soft);
    color: var(--pn-brand-text);
}

.pn-rank-period:active { transform: scale(.97); }
.pn-rank-period:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

.pn-rank-scope.mud-input-control { flex: 0 1 260px; margin: 0; }

.pn-rank-filters-note {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

/* ---------- "Tu posición" ---------- */

.pn-rank-standing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin: 0 0 20px;
    padding: 16px 20px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius);
    background: var(--mud-palette-surface);
}

.pn-rank-standing > .mud-icon-root { color: var(--mud-palette-text-secondary); }

.pn-rank-standing-text { flex: 1 1 280px; min-width: 0; }
.pn-rank-standing-text p { margin: 2px 0 0; color: var(--mud-palette-text-secondary); text-wrap: pretty; }

.pn-rank-standing-label {
    margin: 0;
    font-family: var(--pn-font-text);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
}

/* Ranked: the one tinted block of the page, two columns (place | rivals) from a tablet up. */
.pn-rank-standing.is-ranked {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 16px 32px;
    border-color: rgba(var(--pn-brand-rgb), 0.28);
    background: var(--pn-brand-soft);
}

.pn-rank-standing.is-ranked .pn-rank-standing-label {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.pn-rank-standing-pos {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 2px 0 0;
}

.pn-rank-standing-num {
    font-family: var(--pn-font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pn-rank-standing-num::before { content: "#"; margin-right: 1px; font-size: 0.6em; color: var(--mud-palette-text-secondary); }

.pn-rank-standing-of {
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pn-rank-standing-pos .pn-rank-move { align-self: center; }

.pn-rank-standing-value {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pn-rank-standing-value strong { color: var(--mud-palette-text-primary); }

.pn-rank-rivals {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.pn-rank-rival { display: grid; gap: 8px; }
.pn-rank-rival.is-first { display: flex; align-items: center; gap: 8px; }
.pn-rank-rival.is-first .mud-icon-root { color: var(--pn-brand-text); }

.pn-rank-rival-line,
.pn-rank-rival-behind {
    margin: 0;
    font-variant-numeric: tabular-nums;
    text-wrap: pretty;
}

.pn-rank-rival-line a,
.pn-rank-rival-behind a {
    font-weight: 600;
    color: var(--pn-brand-text);
}

.pn-rank-rival-pos { color: var(--mud-palette-text-secondary); font-size: 0.85rem; }

.pn-rank-rival-meter { height: 8px; max-width: 520px; }

.pn-rank-rival-behind { font-size: 0.85rem; color: var(--mud-palette-text-secondary); }

/* ---------- Rows ---------- */

.pn-rank .pn-toolbar { margin-bottom: 8px; }

.pn-rank-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pn-rank-row {
    position: relative;
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) minmax(6.5rem, auto);
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-md);
    transition: background-color var(--pn-dur-fast) ease;
}

.pn-rank-row.has-move { grid-template-columns: 2.75rem 3.25rem minmax(0, 1fr) minmax(6.5rem, auto); }

.pn-rank-list > .pn-rank-row:last-child { border-bottom: 0; }

.pn-rank-pos {
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* While searching the top three appear in the list: their place keeps its medal colour (AA on both themes). */
.pn-rank-pos-1 { color: #a16207; }
.pn-rank-pos-2 { color: #5d6670; }
.pn-rank-pos-3 { color: #9a4f1c; }
.pn-dark .pn-rank-pos-1 { color: #facc15; }
.pn-dark .pn-rank-pos-2 { color: #c0c7cf; }
.pn-dark .pn-rank-pos-3 { color: #e0915a; }

.pn-rank-move-slot { display: flex; justify-content: center; }

.pn-rank-who {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pn-rank-who-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.pn-rank-who-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
    font-size: 0.8rem;
}

.pn-rank-who-meta .pn-tier { height: 22px; font-size: 0.75rem; }

.pn-rank-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
}

/* The whole row is the link's hit area. */
.pn-rank-name::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.pn-rank-name:focus-visible { outline: none; }
.pn-rank-row:has(.pn-rank-name:focus-visible) {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.pn-rank-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: var(--pn-data);
    font-weight: 600;
}

.pn-rank-live-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-rank-stat {
    display: grid;
    justify-items: end;
    gap: 3px;
    text-align: right;
}

.pn-rank-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pn-rank-value small {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.pn-rank-second {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pn-rank-meter {
    width: 100%;
    min-width: 6.5rem;
    max-width: 10rem;
    height: 4px;
}

.pn-rank-me { background: var(--pn-brand-soft); }
.pn-rank-me .pn-rank-meter { --pn-meter-color: var(--pn-data); }

.pn-rank-you {
    flex: none;
    padding: 0 8px;
    border-radius: var(--pn-radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
}

/* ---------- Movement ---------- */

.pn-rank-move {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--pn-radius-sm);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pn-rank-move.is-up { color: var(--mud-palette-success); background: rgba(var(--mud-palette-success-rgb), 0.12); }
.pn-rank-move.is-down { color: var(--mud-palette-error); background: rgba(var(--mud-palette-error-rgb), 0.1); }
.pn-rank-move.is-new { color: var(--pn-brand-text); background: var(--pn-brand-soft); }
.pn-rank-move.is-same { color: var(--mud-palette-text-secondary); }

/* ---------- Own row pinned under the list ---------- */

/* "Your position" when it is below the rows shown: pinned to the bottom of the screen while the list scrolls. */
.pn-rank-mine {
    position: sticky;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 2;
    margin-top: 12px;
    border: 1px solid rgba(var(--pn-brand-rgb), 0.35);
    background: color-mix(in srgb, var(--pn-brand) 8%, var(--mud-palette-surface));
    box-shadow: var(--pn-shadow-float);
}

@media (max-width: 959.98px) {
    .pn-has-bottomnav .pn-rank-mine { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

.pn-rank-more {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

/* ---------- Podium additions (decorated rows on /ranking) ---------- */

.pn-podium-decor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
}

.pn-podium-decor .pn-tier { height: 22px; font-size: 0.75rem; }

.pn-podium-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 20px;
}

/* ---------- How the board counts ---------- */

.pn-rank-rules {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.85rem;
}

.pn-rank-rules .mud-icon-root { flex: none; margin-top: 2px; }
.pn-rank-rules p { margin: 0; max-width: 75ch; text-wrap: pretty; }
.pn-rank-rules strong { color: var(--mud-palette-text-primary); }

@media (hover: hover) and (pointer: fine) {
    .pn-rank-row:has(.pn-rank-name):hover { background: var(--mud-palette-action-default-hover); }
    .pn-rank-me:hover { background: rgba(var(--pn-brand-rgb), 0.14); }
    .pn-rank-period:not([aria-current]):hover { color: var(--mud-palette-text-primary); }
}

.pn-rank-row:has(.pn-rank-name):active { background: var(--mud-palette-action-default-hover); }

@media (max-width: 959.98px) {
    .pn-rank-standing.is-ranked { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    .pn-rank-filters { gap: 10px; }
    .pn-rank-periods { width: 100%; }
    .pn-rank-period { flex: 1 1 0; justify-content: center; min-height: 40px; }
    .pn-rank-scope.mud-input-control { flex: 1 1 100%; }

    .pn-rank-standing { padding: 12px 16px; }
    .pn-rank-standing > .mud-button-root { width: 100%; }
    .pn-rank-standing-num { font-size: 2.5rem; }

    .pn-rank-row { grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 8px; padding: 10px 4px; }
    /* On a phone the movement sits under the place instead of taking a column. */
    .pn-rank-row.has-move { grid-template-columns: 2rem minmax(0, 1fr) auto; grid-template-rows: auto auto; }
    .pn-rank-row.has-move .pn-rank-pos { grid-row: 1; align-self: end; }
    .pn-rank-row.has-move .pn-rank-move-slot { grid-row: 2; grid-column: 1; align-self: start; }
    .pn-rank-row.has-move .pn-rank-who { grid-row: 1 / span 2; grid-column: 2; }
    .pn-rank-row.has-move .pn-rank-stat { grid-row: 1 / span 2; grid-column: 3; }
    .pn-rank-move { min-width: 0; height: 18px; padding: 0 4px; font-size: 0.68rem; }
    .pn-rank-meter { min-width: 4.5rem; max-width: 5.5rem; }
    .pn-rank-live-text { max-width: 9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pn-rank-row, .pn-rank-period { transition: none; }
}