/* =============================================================================
   leaderboards.css - Leaderboards addon styles

   Linked after theme.css. Spaces the board tabs and the buttons under a
   list, fits a board's table and the widget's rows to a phone's width,
   marks the viewer's own row, sizes the medals of the viewer's
   badges and lays out the best results of a public profile; then paints
   the medals (getMedalSVG(): the --medal- tokens, which a project's
   theme.css may redefine), the medal mark beside a name
   (getMedalStackHTML()) and the trophy shelf of a public profile. Built
   from the style.css and theme.css tokens, so it follows the theme and
   dark mode.
   ============================================================================= */

/* The medals of the trophy shelf and the boards (never flip: metal looks
   like metal on either canvas). Each metal and gem is a gradient of three
   stops, light to dark; --medal-shine-rgb is the light that sweeps over
   the shelf once. */
:root {
    --medal-gold-hi:      #FFF3B0;
    --medal-gold:         #F2C230;
    --medal-gold-lo:      #A87400;
    --medal-silver-hi:    #FFFFFF;
    --medal-silver:       #C9D1DA;
    --medal-silver-lo:    #7D8794;
    --medal-bronze-hi:    #FFD7B0;
    --medal-bronze:       #CD7F32;
    --medal-bronze-lo:    #7A4316;
    --medal-platinum-hi:  #FFFFFF;
    --medal-platinum:     #DCE6F0;
    --medal-platinum-lo:  #8FA3B8;
    --medal-ruby-hi:      #FF9AAE;
    --medal-ruby:         #E11D48;
    --medal-ruby-lo:      #7F0A26;
    --medal-sapphire-hi:  #9CC3FF;
    --medal-sapphire:     #2563EB;
    --medal-sapphire-lo:  #10307A;
    --medal-emerald-hi:   #8EF0C6;
    --medal-emerald:      #059669;
    --medal-emerald-lo:   #04412E;
    --medal-amethyst-hi:  #E2C4FF;
    --medal-amethyst:     #8B3FE0;
    --medal-amethyst-lo:  #3E1475;
    --medal-flame-hi:     #FFE15A;
    --medal-flame:        #FF8A1F;
    --medal-flame-lo:     #D7261E;
    --medal-ribbon-a:     #1E4FB8;
    --medal-ribbon-b:     #3B82F6;
    --medal-well:         #1E2A3A;
    --medal-shine-rgb:    255, 255, 255;
}

/* Board tabs: one button per board and period, the shown one as the main
   button and the others as secondary ones; they wrap on a narrow screen */
.leaderboards-tabs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.leaderboards-tabs button {
    margin-inline-end: 8px;
    margin-bottom: 8px;
}

.leaderboards-subtabs button {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: .875rem;
}

.leaderboards-reset {
    margin-bottom: 16px;
    color: var(--gray);
}

/* The signed-in viewer's own row on a board or in a widget */
.leaderboards-viewer-row {
    background: rgba(var(--brand-rgb), .08);
    font-weight: 600;
}

/* The small medal before each line of the viewer's badges */
.leaderboards-badge-medal {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.leaderboards-badge-medal .medal {
    width: 100%;
    height: 100%;
}

.leaderboards-badge-list {
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
}

.leaderboards-badge-list li {
    margin-bottom: 4px;
}

/* Show more and Jump to my row under a board or a widget list; they wrap
   under each other on a phone */
.leaderboards-more {
    display: flex;
    flex-wrap: wrap;
    margin-top: 12px;
}

.leaderboards-more button {
    margin-inline-end: 8px;
    margin-bottom: 8px;
}

/* A name with its medal mark: the name keeps to one line and is cut short
   with an ellipsis when it does not fit; the mark always shows */
.leaderboards-name {
    display: flex;
    align-items: center;
    min-width: 0;
}

.leaderboards-name-text {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboards-name .medal-stack {
    flex: 0 0 auto;
}

/* The board's table fits its card on a phone: fixed columns for the
   rank, the player and the score; the date column (leaderboards-col-extra)
   is left out and the date shows under the name (leaderboards-sub). From
   768px the date has its column again. */
.leaderboards-table {
    table-layout: fixed;
}

.leaderboards-table th,
.leaderboards-table td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.leaderboards-table .leaderboards-col-rank {
    width: 48px;
}

.leaderboards-table .leaderboards-col-score {
    width: 96px;
}

.leaderboards-table .leaderboards-col-extra {
    display: none;
}

.leaderboards-sub {
    display: block;
    margin-top: 4px;
    color: var(--gray);
    font-size: .8rem;
}

@media (min-width: 768px) {
    .leaderboards-table {
        table-layout: auto;
    }

    .leaderboards-table .leaderboards-col-rank {
        width: 64px;
    }

    .leaderboards-table .leaderboards-col-score {
        width: auto;
    }

    .leaderboards-table .leaderboards-col-extra {
        display: table-cell;
    }

    .leaderboards-sub {
        display: none;
    }
}

/* Widget: a numbered list of rows, each the name with its mark and then
   the score at the end; the numbers get more room once they reach three
   digits */
.leaderboards-widget-list {
    margin: 0 0 8px 0;
    padding-inline-start: 24px;
}

.leaderboards-widget-list-wide {
    padding-inline-start: 40px;
}

.leaderboards-widget-list li {
    padding-top: 4px;
    padding-bottom: 4px;
}

.leaderboards-widget-row {
    display: flex;
    align-items: center;
    min-width: 0;
}

.leaderboards-widget-name {
    flex: 1 1 auto;
    min-width: 0;
    margin-inline-end: 8px;
}

.leaderboards-widget-row strong {
    flex: 0 0 auto;
}

/* A public profile's best results: one line per board, the place and the
   score, then the project's link */
.leaderboards-profile-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.leaderboards-profile-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.leaderboards-profile-list li:last-child {
    border-bottom: 0;
}

.leaderboards-profile-board {
    display: block;
    color: var(--gray);
    font-size: .85rem;
}

.leaderboards-profile-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.leaderboards-profile-rank {
    margin-inline-end: 8px;
    color: var(--gray);
}

.leaderboards-profile-score {
    margin-inline-end: 8px;
    font-variant-numeric: tabular-nums;
}

/* A result's link as a small button with a play icon, at the end of its
   line (getLeaderboardsResultButtonHTML(), also for a project's own
   replay links) */
.leaderboards-result-button {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 0;
    margin: 0;
    margin-inline-start: auto;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--black);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
}

.leaderboards-result-button:hover {
    border-color: var(--gray);
    background: var(--light);
}

.leaderboards-result-button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.leaderboards-result-icon {
    width: 12px;
    height: 12px;
    margin-inline-end: 8px;
    fill: currentColor;
    flex: 0 0 auto;
}

/* -- The trophy shelf and the medals ------------------------------------- */

/* The trophy shelf: a row of medals that wraps, each a button with its
   name under it and a count badge on a medal won more than once */
.trophy-shelf h2 {
    margin-bottom: 16px;
}

.trophy-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -4px;
    padding: 0;
    list-style: none;
}

.trophy {
    flex: 0 0 33.333%;
    padding: 0 4px 8px 4px;
}

@media (min-width: 768px) {
    .trophy {
        flex: 0 0 16.666%;
    }
}

@media (min-width: 1280px) {
    .trophy {
        flex: 0 0 12.5%;
    }
}

.trophy-button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 12px 4px 8px 4px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--black);
    box-shadow: none;
}

.trophy-button:hover,
.trophy-button.is-selected {
    border-color: var(--border);
    background: var(--light);
}

.trophy-medal {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
}

@media (min-width: 768px) {
    .trophy-medal {
        width: 72px;
        height: 72px;
    }
}

/* A soft shadow on the shelf under each medal */
.trophy-medal::after {
    content: "";
    position: absolute;
    right: 16%;
    bottom: -8px;
    left: 16%;
    height: 8px;
    border-radius: 50%;
    background: rgba(var(--shadow-rgb), .22);
}

.trophy-medal .medal {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 3px rgba(var(--shadow-rgb), .3));
    transition: transform .15s ease;
}

.trophy-button:hover .medal,
.trophy-button.is-selected .medal {
    transform: translateY(-2px) scale(1.06);
}

.trophy-count {
    position: absolute;
    right: -8px;
    bottom: -4px;
    min-width: 24px;
    padding: 0 4px;
    border-radius: 12px;
    background: var(--black);
    color: var(--white);
    font-size: .75rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.trophy-label {
    display: block;
    margin-top: 16px;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
}

/* The line under the shelf: the medal's name in strong text, then what
   it was won for */
.trophy-detail {
    min-height: 24px;
    margin: 8px 0 0 0;
    color: var(--gray);
    font-size: .9rem;
    line-height: 1.6;
}

.trophy-detail strong {
    color: var(--black);
    font-weight: 600;
}

.trophy-detail-text::before {
    content: "\00b7\00a0";
}

.trophy-shelf-empty {
    margin: 0;
    color: var(--gray);
}

/* The one shine of a profile's first view: a band of light sweeps across
   each medal, one after the other; none with reduced motion */
.trophy-shelf.is-shining .trophy-button::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, rgba(var(--medal-shine-rgb), 0) 0%, rgba(var(--medal-shine-rgb), .55) 50%, rgba(var(--medal-shine-rgb), 0) 100%);
    pointer-events: none;
    animation: trophy-shine 1.1s ease-out .2s 1 both;
}

.trophy-shelf.is-shining .trophy:nth-child(2) .trophy-button::after {
    animation-delay: .35s;
}

.trophy-shelf.is-shining .trophy:nth-child(3) .trophy-button::after {
    animation-delay: .5s;
}

.trophy-shelf.is-shining .trophy:nth-child(n+4) .trophy-button::after {
    animation-delay: .65s;
}

@keyframes trophy-shine {
    from {
        left: -60%;
    }
    to {
        left: 120%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trophy-shelf.is-shining .trophy-button::after {
        content: none;
        animation: none;
    }

    .trophy-medal .medal {
        transition: none;
    }
}

/* The medals' paint: each gradient stop of getMedalSVG()'s shared
   gradients takes its medal- token */
.medal-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.medal-stop-gold-hi { stop-color: var(--medal-gold-hi); }
.medal-stop-gold { stop-color: var(--medal-gold); }
.medal-stop-gold-lo { stop-color: var(--medal-gold-lo); }
.medal-stop-silver-hi { stop-color: var(--medal-silver-hi); }
.medal-stop-silver { stop-color: var(--medal-silver); }
.medal-stop-silver-lo { stop-color: var(--medal-silver-lo); }
.medal-stop-bronze-hi { stop-color: var(--medal-bronze-hi); }
.medal-stop-bronze { stop-color: var(--medal-bronze); }
.medal-stop-bronze-lo { stop-color: var(--medal-bronze-lo); }
.medal-stop-platinum-hi { stop-color: var(--medal-platinum-hi); }
.medal-stop-platinum { stop-color: var(--medal-platinum); }
.medal-stop-platinum-lo { stop-color: var(--medal-platinum-lo); }
.medal-stop-ruby-hi { stop-color: var(--medal-ruby-hi); }
.medal-stop-ruby { stop-color: var(--medal-ruby); }
.medal-stop-ruby-lo { stop-color: var(--medal-ruby-lo); }
.medal-stop-sapphire-hi { stop-color: var(--medal-sapphire-hi); }
.medal-stop-sapphire { stop-color: var(--medal-sapphire); }
.medal-stop-sapphire-lo { stop-color: var(--medal-sapphire-lo); }
.medal-stop-emerald-hi { stop-color: var(--medal-emerald-hi); }
.medal-stop-emerald { stop-color: var(--medal-emerald); }
.medal-stop-emerald-lo { stop-color: var(--medal-emerald-lo); }
.medal-stop-amethyst-hi { stop-color: var(--medal-amethyst-hi); }
.medal-stop-amethyst { stop-color: var(--medal-amethyst); }
.medal-stop-amethyst-lo { stop-color: var(--medal-amethyst-lo); }
.medal-stop-flame-hi { stop-color: var(--medal-flame-hi); }
.medal-stop-flame { stop-color: var(--medal-flame); }
.medal-stop-flame-lo { stop-color: var(--medal-flame-lo); }

.medal-outline {
    stroke: rgba(var(--shadow-rgb), .28);
    stroke-width: 1;
}

.medal-rim {
    fill: none;
    stroke: rgba(var(--shadow-rgb), .22);
    stroke-width: 2;
}

.medal-emboss {
    fill: rgba(var(--medal-shine-rgb), .6);
    stroke: rgba(var(--shadow-rgb), .18);
    stroke-width: 1;
}

.medal-glint {
    fill: rgba(var(--medal-shine-rgb), .75);
}

.medal-ribbon-a {
    fill: var(--medal-ribbon-a);
}

.medal-ribbon-b {
    fill: var(--medal-ribbon-b);
}

.medal-well {
    fill: var(--medal-well);
}

.medal-flame-core {
    fill: var(--medal-flame-hi);
}

.medal-check {
    fill: none;
    stroke: var(--on-accent);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The medal mark beside a name (getMedalStackHTML()): one 18px icon,
   every design on the same 64 by 64 box, centred on the name's line, then
   a muted "+N" */
.medal-stack {
    display: inline-flex;
    align-items: center;
    height: 18px;
    margin-inline-start: 8px;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
}

.medal-stack-more {
    margin-inline-start: 4px;
    color: var(--gray);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1;
}

.medal-stack-item {
    display: inline-flex;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.medal-stack-item .medal {
    display: block;
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 1px 1px rgba(var(--shadow-rgb), .35));
}