/* El «?» junto al título de un juego (mas-o-menos.php, reto.php): un <details>
   que, abierto, enseña sus reglas flotando bajo el título, a todo su ancho.
   js/titulo-ayuda.js lo cierra al tocar fuera o con Escape; sin JS, con el «?». */

.titulo-ayuda { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: .5em; }
.titulo-ayuda h1 { margin: 0; }
.titulo-ayuda__boton > summary {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 50%;
    color: var(--texto-suave);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    transition: color var(--transicion), border-color var(--transicion);
}
.titulo-ayuda__boton > summary::-webkit-details-marker { display: none; }
.titulo-ayuda__boton > summary:hover,
.titulo-ayuda__boton[open] > summary { border-color: var(--acento); color: var(--acento); }
.titulo-ayuda__boton > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.titulo-ayuda__texto {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 5;
    padding: 16px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-pequeno);
    background: var(--superficie);
    color: var(--texto-suave);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.titulo-ayuda__texto h2 { margin: 0 0 8px; color: var(--texto); font-size: 1.1rem; }
.titulo-ayuda__texto p { margin: 0; }
.titulo-ayuda__texto p + p { margin-top: 10px; }