/* Tableau de score partagé : écran d'affichage et console arbitre du hub, page publique de l'application distante. */

/* --- Tableau de score (partagé : écran d'affichage et console arbitre) --- */
/* Le composant remplit son conteneur .score-host ; toutes les tailles sont en unités de
   conteneur (cqw/cqh) pour que le même tableau tienne en plein écran comme dans la moitié
   de la console arbitre, et reste lisible de loin (fort contraste). */
.score-host {
    container-type: size;
    height: 100vh;
}

.scoreboard {
    box-sizing: border-box;
    height: 100cqh;
    padding: 3cqh 3cqw;
    display: grid;
    grid-template-rows: 1fr 1fr auto;
    gap: 3cqh;
    background: #000;
    overflow: hidden;
}

.board {
    grid-row: 1 / span 2;
    display: grid;
    grid-template-rows: 1fr 1fr;
    /* Largeurs fixes des colonnes de score : les 3 sets et les points sont toujours réservés,
       le nom du joueur prend tout le reste (jamais rogné par l'arrivée d'un set). */
    --set-w: 9cqw;
    --points-w: 14cqw;
    /* Taille du code des pages joueur, quand l'écran en affiche (cf. .name .qr). Assez pour être scanné de
       près — la distance réelle d'un joueur qui vient chercher son lien — sans manger le nom. */
    --qr-w: 7cqw;
    column-gap: 1.5cqw;
    row-gap: 3cqh;
    align-items: stretch;
    min-height: 0;
}

.board > * {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    border-radius: 1.5cqh;
    background: #14171c;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.board .name {
    justify-content: flex-start;
    padding: 0 2cqw;
    font-size: min(12cqh, 5cqw);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Un long nom passe sur deux lignes (aux tirets et espaces) plutôt que d'être coupé ; au-delà, points de suspension. */
.board .name span {
    min-width: 0;
    line-height: 1.05;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.board .games {
    font-size: min(26cqh, 9cqw);
    color: #7d8794;
}

.board .games.pending {
    color: #3a414b;
}

.board .games.won {
    color: #fff;
}

.board .games.current {
    color: #fff;
    background: #1b5e20;
}

.board .points {
    font-size: min(26cqh, 9cqw);
    color: #000;
    background: #ffd60a;
}

.board .points.empty {
    background: transparent;
}

.board .name.leader {
    color: #ffd60a;
}

.winner-banner {
    text-align: center;
    font-size: min(11cqh, 6cqw);
    font-weight: 800;
    text-transform: uppercase;
    color: #000;
    background: #ffd60a;
    border-radius: 1.5cqh;
    padding: 2cqh 2cqw;
}

/* --- Code de la page personnelle d'un joueur, à gauche de son nom (écran du hub) --- */
/* Logé DANS la cellule du nom : il en prend le fond, et le tableau garde exactement ses colonnes quand il n'y
   a pas de code (console arbitre, page publique de l'application distante). Affiché en permanence : un joueur
   arrivé en retard, ou dont le téléphone s'éteint, retrouve son adresse en regardant l'écran.
   Largeur en cqw comme les autres colonnes, donc juste sur une télévision comme dans la moitié haute de la
   console arbitre. Pastille blanche arrondie plutôt qu'un carré brut, avec une marge qui sert aussi de zone
   calme supplémentaire au lecteur. */
.board .name .qr {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: var(--qr-w);
    height: auto;
    max-height: 80%;
    aspect-ratio: 1;
    margin: 0 2cqw 0 0;
    padding: 0.7cqh;
    background: #fff;
    border-radius: 1cqh;
}