/* WP32: la franja de cifras del perfil.

   Antes era una rejilla de cuatro tarjetas de 200 px de ancho minimo y unos 200 px de alto, cada una con su
   relleno de 20 px, su icono en burbuja de 35 px, su valor a 32 px y un pie que en dos de ellas no significaba
   nada. Ocupaban 204 px de la cabecera para dar cuatro numeros.

   Ahora es una sola fila: el numero grande, y debajo su icono y su etiqueta. Los iconos se conservan, a peticion
   del usuario, pero pierden la burbuja y acompanan a la etiqueta en vez de flotar en la esquina. */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--qg-public-space-sm);
    width: 100%;
    margin-top: 0;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: var(--qg-public-space-sm) var(--qg-public-space-xs);
    border: .0625rem solid var(--qg-public-color-bronze-30);
    border-radius: var(--qg-public-radius-md);
    background: var(--qg-public-color-black-60);
    text-align: center;
    transition: border-color .2s ease, transform .2s ease;
}

.stat-card:hover {
    border-color: var(--qg-public-moc-highlight);
    transform: translateY(-2px);
}

.stat-value {
    color: var(--qg-public-moc-text);
    font-family: var(--qg-public-font-heading);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
}

/* La etiqueta, su icono y la ayuda van en flujo de texto, centrados bajo la cifra: asi el boton de ayuda se
   queda junto a la ultima palabra cuando la etiqueta parte en dos lineas, en vez de bajar a una tercera. */
.stat-header {
    margin-bottom: 0;
    line-height: 1.5;
    text-align: center;
}

.stat-header .qg-ayuda {
    vertical-align: middle;
}

.stat-label {
    color: var(--qg-public-moc-text);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* El icono deja de ser una burbuja de 35 px: es solo el simbolo, del tamano de la etiqueta. */
.stat-icon {
    font-size: .85rem;
    line-height: 1;
}

.icon-green {
    color: var(--qg-public-moc-positive);
}

.icon-gold {
    color: var(--qg-public-color-gold-pale);
}

.icon-purple {
    color: var(--qg-public-moc-accent);
}

.icon-bronze {
    color: var(--qg-public-moc-highlight);
}

/* Solo el rango lleva segunda linea: el lugar que ocupa entre los jugadores con partidas. */
.stat-subvalue {
    color: var(--qg-public-color-white-50);
    font-size: .75rem;
    font-weight: 400;
}

.text-highlight-green {
    color: var(--qg-public-moc-positive);
    font-weight: 700;
}

/* En movil, dos por fila; por debajo de 380 px las cifras de cuatro digitos ya no caben a pares. */
@media (max-width: 700px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-value {
        font-size: 1.6rem;
    }
}

/* El icono viaja dentro de la etiqueta para que no se quede solo en una linea cuando el texto parte. */
.stat-icon {
    margin-right: .3rem;
}