/*
    Gráficas de partidas en los posts (JC08). HTML de Services/GraficasPartida.cs y dibujo de grafica-partida.js.
    El enlace a la partida conserva el estilo de los enlaces del contenido (contenido-editor.css).
*/

.grafica-partida {
    margin: var(--qg-public-space-md) 0;
    padding: var(--qg-public-space-sm);
    border: .0625rem solid var(--qg-public-border-subtle);
    border-radius: var(--qg-public-radius-md);
    background: var(--qg-public-surface-sunken);
}

/* Más específico que «.qg-contenido figcaption», que centra los pies de las imágenes. */
.grafica-partida .grafica-partida__cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    align-items: baseline;
    margin-bottom: var(--qg-public-space-sm);
    color: var(--qg-public-text-base);
    font-size: 1rem;
    text-align: left;
}

.grafica-partida__titulo {
    color: var(--qg-public-text-strong);
    font-family: var(--qg-public-font-heading);
    font-size: 1.1rem;
    font-weight: 700;
}

.grafica-partida__partida {
    font-weight: 600;
}

.grafica-partida__aviso {
    flex-basis: 100%;
    color: var(--qg-public-text-muted);
    font-size: .875rem;
}

/* Chart.js toma el alto del contenedor (sin proporción fija). La comparación por turno lo calcula al dibujar. */
.grafica-partida__lienzo {
    position: relative;
    height: clamp(20rem, 52vw, 26rem);
}

.grafica-partida--alquimia .grafica-partida__lienzo {
    height: clamp(18rem, 52vw, 28rem);
}

/*
    Gráfica de alquimia: un ancla transparente encima de cada icono de conjuro (grafica-partida.js). La que tiene tarjeta
    es un botón que la abre sobre la página (game-element.js); se marca con el dorado de la web al pasar, al enfocarla y
    mientras su tarjeta está abierta. La usan también el detalle de partida.
*/
.grafica-partida__anclas {
    position: absolute;
    pointer-events: none;
}

.grafica-partida__ancla {
    position: absolute;
    padding: 0;
    border: 0;
    border-radius: var(--qg-public-radius-circle);
    background: transparent;
    pointer-events: auto;
    transition: box-shadow .15s ease;
}

button.grafica-partida__ancla {
    cursor: pointer;
}

button.grafica-partida__ancla:hover,
button.grafica-partida__ancla[aria-expanded="true"] {
    box-shadow: 0 0 0 .1875rem var(--qg-public-color-gold);
}

button.grafica-partida__ancla:focus-visible {
    outline: .125rem solid var(--qg-public-color-gold);
    outline-offset: .1875rem;
}

@media (max-width: 575.98px) {
    .grafica-partida {
        padding: .75rem;
    }
}