/* /Components/Leaderboard.razor.rz.scp.css */
/* Hoja de alcance acotado (scoped) del componente Leaderboard.

   PILOTO del encargo 190 de I-30: es la PRIMERA .razor.css del repo. Blazor reescribe cada
   selector de aca agregandole un atributo `[b-XXXXXXXXXX]` que solo llevan los elementos que
   RENDERIZA ESTE COMPONENTE, y junta todas las hojas asi en `Chase.styles.css`.

   Dos consecuencias que hay que tener presentes antes de mover otra pieza:

   1. Un selector de aca NO alcanza el marcado de un componente HIJO. Leaderboard renderiza
      <ModuleLoading>, cuyas clases `.module-loading-*` siguen en app.css a proposito. Para
      llegar a un hijo hace falta `::deep`, que no se usa aca porque no hace falta.

   2. La reescritura SUBE la especificidad de (0,1,0) a (0,2,0). Es inocuo para estas trece
      reglas porque ningun otro selector de la hoja global compite con el prefijo
      `.leaderboard-`, medido sobre 514b2d5; no lo des por cierto para el proximo bloque.

   Y la condicion sin la cual nada de esto se ve: `wwwroot/index.html` tiene que enlazar
   `Chase.styles.css`. Si ese <link> falta, esta hoja se compila igual, el build queda verde
   y los estilos simplemente no llegan al navegador. Lo cuida
   Chase.Tests/HojaDeAlcanceAcotadoTests.cs. */

/*leaderboard (own layout: a three-field ranking fits on one line at any width, so unlike
  the admin .player-list it never needs to collapse into cards)*/
.leaderboard-list[b-lc3tfrq1lf] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.leaderboard-row[b-lc3tfrq1lf] {
    display: flex;
    align-items: center;
    gap: .7em;
    padding: .55em .7em;
    border: 1px solid #e0c9a6;
    border-radius: 8px;
    margin-bottom: .4em;
    background: #fff7ec;
}

.leaderboard-rank[b-lc3tfrq1lf] {
    flex: 0 0 auto;
    min-width: 1.9em;
    height: 1.9em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ece2d3;
    color: #4a4033;
    font-weight: 700;
    font-size: .9em;
}

.leaderboard-rank-1[b-lc3tfrq1lf] { background: #f4c542; color: #4a3a00; }
.leaderboard-rank-2[b-lc3tfrq1lf] { background: #d8d8d8; color: #3d3d3d; }
.leaderboard-rank-3[b-lc3tfrq1lf] { background: #d9a06a; color: #40260f; }

/* The name is the only elastic part, so it absorbs every width change and truncates
   rather than pushing the score off the row. */
.leaderboard-name[b-lc3tfrq1lf] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-score[b-lc3tfrq1lf] {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.leaderboard-rival-card[b-lc3tfrq1lf] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "sprite badge score"
        "sprite name score";
    align-items: center;
    gap: .15em .65em;
    margin-top: .65em;
    padding: .65em .75em;
    border: 1px dashed #b98545;
    border-radius: 10px;
    background: #fffaf1;
}

.leaderboard-rival-sprite[b-lc3tfrq1lf] {
    grid-area: sprite;
    width: 34px;
    height: auto;
}

.leaderboard-rival-badge[b-lc3tfrq1lf] {
    grid-area: badge;
    font-size: .72em;
    font-weight: 700;
    color: #7a4f1f;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.leaderboard-rival-name[b-lc3tfrq1lf] {
    grid-area: name;
    font-weight: 700;
}

.leaderboard-rival-score[b-lc3tfrq1lf] {
    grid-area: score;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}