/* Mejoras de "Cuanto sabes de Riquelme" en 2027.
 *
 * cuanto-sabes-de-riquelme.css es un fichero minificado que comparten el
 * wrapper y el juego que va dentro del iframe, y ademas lo usa la copia de
 * 2026. No se toca: los arreglos van aqui y se carga despues. */

/* ---------- Las respuestas ----------
 *
 * Eran <input type="button" class="main-article-date"> y ahora son
 * <button class="respuesta">, asi que se les pasa el mismo aspecto que tenian
 * mas lo que un boton necesita y no trae de serie. */
.respuesta {
  font-family: inherit;
  font-size: 15px;
  width: min(250px, calc(50% - 6px));
  max-width: 100%;
  display: inline-block;
  padding: 5px;
  text-align: center;
  white-space: normal;
  line-height: 30px;
  margin-bottom: 10px;
  min-height: 75px;
  vertical-align: top;
  background-color: #05356F;
  color: #fff;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

.respuesta:hover {
  background-color: #04284f;
}

/* Al acertar o fallar el JavaScript pinta el fondo, y como el boton tiene
 * color de texto blanco ha de ganar el blanco del texto siempre. */
.respuesta:disabled {
  cursor: default;
  opacity: 0.85;
}

@media screen and (max-width: 800px) {
  .respuesta {
    width: 100%;
    display: block;
  }
}

/* ---------- Los dos botones con imagen ----------
 *
 * La portada y la imagen de nivel eran <img onclick>. Ahora son <button> con
 * la imagen dentro, para que se puedan pulsar con el teclado. El boton no
 * dibuja nada alrededor de la imagen. */
#cover-button,
#level-info-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

#cover-button img,
#level-info-button img {
  display: block;
  width: 100%;
  height: auto;
}

/* La imagen de nivel se estiraba con height:100%!important dentro de una
 * caja de alto fijo, asi que se deformaba. Con alto automatico mantiene su
 * proporcion, que es de 750x648. */
#level-info {
  min-height: 0;
}

.main-article-info {
  height: auto;
  min-height: 480px;
}

/* ---------- Estado "se acabaron las preguntas" ---------- */
.riquelmegame-terminado {
  width: min(560px, 92vw);
  margin: 0 auto;
  padding: 24px 20px;
  background: #fff;
  border: 1px solid #dcdcdc;
  box-sizing: border-box;
}

.riquelmegame-terminado h2 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.3;
  text-align: left;
  color: #05356F;
}

/* El h2 de las preguntas tiene line-height:50px y centrado, que en el estado
 * final hay que deshacer. */
.riquelmegame-terminado p {
  line-height: 1.5;
}

/* ---------- Foco visible ---------- */
.respuesta:focus-visible,
#cover-button:focus-visible,
#level-info-button:focus-visible {
  outline: 3px solid #05356F;
  outline-offset: 2px;
}

#level-info-button:focus-visible {
  outline-offset: -3px;
}

/* ---------- Publicidad y juego centrados ----------
 *
 * El wrapper no carga article-2027.css, asi que aqui no existian ni
 * .seccion-anuncio ni .ad-etiqueta: la etiqueta "Publicidad" y el anuncio
 * salian pegados a la izquierda, y el iframe iba a lo ancho de toda la
 * ventana mientras el resto de la pagina va en una columna centrada.
 * Se le da al anuncio y al juego el mismo ancho que las paginas de articulo
 * (85% de la ventana, tope 980px) y se centran. */
.seccion-anuncio,
.container {
    width: 85%;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Copiado de article-2027.css: centrar la etiqueta y reservar la altura del
 * anuncio para que la pagina no salte cuando AdSense lo pinta. */
.seccion-anuncio {
    margin-top: 22px;
    margin-bottom: 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.seccion-anuncio .ad-slot {
    width: 100%;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El <ins> vacio del hueco flex colapsa a 0px y AdSense responde
 * "No slot size for availableWidth=0". Misma regla que cards-2027.css. */
.seccion-anuncio .ad-slot .adsbygoogle {
    width: 100%;
    max-width: 100% !important;
}

.ad-etiqueta {
    display: block;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 8px;
}

@media screen and (max-width: 800px) {
    .seccion-anuncio,
    .container {
        width: 95%;
    }

    .seccion-anuncio .ad-slot { min-height: 250px; }
}

/* ---------- El titulo oculto ----------
 *
 * El cartel visible "¿CUÁNTO SABES DE RIQUELME?" se quito porque con el
 * <title> ya sobraba, pero la pagina necesita un <h1> para Google y para los
 * lectores de pantalla: se deja a pantalla completa para maquinas, invisible
 * para las personas. */
.solo-lectura {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- El juego centrado dentro del iframe ----------
 *
 * cuanto-sabes-de-riquelme.css (el compartido con 2026, no se toca) pone
 * .riquelmegame y .main-article-info al 50% de ancho sin margenes auto, asi
 * que la barra amarilla y el tablero quedaban pegados a la mitad izquierda
 * del iframe. En movil ya lo arreglaba su media query poniendolos al 100%;
 * aqui se centran en escritorio, manteniendo el 50%: fijados a 720px las
 * pantallas salian mas grandes que antes en cualquier ventana por debajo de
 * 1440 y el contenido de portada y de nivel se pasaba del alto del iframe.
 * Las respuestas se estrechan con el panel para seguir cabiendo dos por
 * fila. */
@media screen and (min-width: 801px) {
    .riquelmegame,
    .main-article-info {
        width: 50%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------- El iframe del wrapper ----------
 *
 * Venia con height:700px fijos. Con el juego se queda corto y sin preguntas
 * sobran casi 400px de blanco, asi que se le da una altura razonable y el
 * resto se ajusta con el alto automatico.
 *
 * Ojo con los cortes: la columna mide 85% del ancho de ventana con tope de
 * 980px, asi que el iframe pasa de 800px de ancho (el corte en el que el
 * juego cambia a su diseno de movil, que es mas alto) cuando la ventana baja
 * de 942px. El juego decide dentro, por eso el corte de aqui tiene que
 * seguir el mismo calculo y no el del viewport. */
iframe {
  width: 100%;
  height: 620px;
  min-height: 320px;
  border: 0;
  display: block;
}

@media screen and (max-width: 941px) {
  iframe {
    height: 760px;
  }
}

@media screen and (max-width: 800px) {
  iframe {
    height: 720px;
  }
}