/* /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;
}
/* /Components/PantallaDeEscenarioInexistente.razor.rz.scp.css */
/* Hoja de alcance acotado (scoped) de PantallaDeEscenarioInexistente.

   Va acá y no en wwwroot/css/app.css siguiendo el piloto del encargo 190 (ver
   Components/Leaderboard.razor.css): app.css es el archivo mas colisionado del repo y estas
   reglas no las necesita nadie mas. Blazor le agrega a cada selector el atributo [b-XXXXXXXXXX]
   de este componente y las junta en Chase.styles.css, que wwwroot/index.html enlaza --- sin ese
   <link> la hoja se compila igual, el build queda verde y los estilos no llegan; lo cuida
   Chase.Tests/HojaDeAlcanceAcotadoTests.cs. */

.escenario-inexistente[b-k3stedsi3w] {
    padding: 1.5rem 1rem 2rem;
    max-width: 42rem;
    margin: 0 auto;
}

.escenario-inexistente h1[b-k3stedsi3w] {
    font-size: 1.4rem;
    margin: 0 0 0.75rem;
}

/* El h1 lo enfoca FocusOnNavigate (App.razor) con tabindex="-1", y el navegador le dibuja el
   anillo de foco. Se deja a proposito: es la unica senal de que el lector de pantalla aterrizo
   en el titulo del error y no a mitad de la lista. */

.escenario-inexistente h2[b-k3stedsi3w] {
    font-size: 1.05rem;
    margin: 1.5rem 0 0.5rem;
}

.escenario-inexistente-explicacion[b-k3stedsi3w] {
    margin: 0 0 1rem;
    /* El id lo escribio un desconocido y puede venir largo o sin espacios: que corte donde sea
       antes de estirar la pagina a lo ancho, que en un telefono la deja inusable. */
    overflow-wrap: anywhere;
}

.escenario-inexistente-salida a[b-k3stedsi3w] {
    font-weight: bold;
}

.escenario-inexistente-lista[b-k3stedsi3w] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.escenario-inexistente-lista li[b-k3stedsi3w] {
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
}

.escenario-inexistente-lista code[b-k3stedsi3w] {
    opacity: 0.7;
    font-size: 0.85em;
}