/* Progreso del jugador (js/progress.js). */

/* Portada: «N de X resueltos» + barra de 3 px, encima del botón de la tarjeta
   de modalidad. El botón sigue anclado abajo para que los cuatro queden
   alineados. La barra usa el color del título de cada modalidad. */
.home-modality .home-modality-progress{display:grid;justify-items:stretch;gap:5px;width:max-content;margin:auto auto 12px;color:#765f48;font:500 12.5px/1.2 var(--sans);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.home-modality .home-modality-progress + .button{margin-top:0}
.home-modality-progress-bar{display:block;height:3px;border-radius:2px;background:rgba(118,95,72,.16);overflow:hidden}
.home-modality-progress-bar i{display:block;height:100%;border-radius:inherit;background:#6b2728}
.home-modality-progress[data-modality="escape"] .home-modality-progress-bar i{background:#273b31}
.home-modality-progress[data-modality="detective"] .home-modality-progress-bar i{background:#7b3227}
.home-modality-progress[data-modality="ajedrez"] .home-modality-progress-bar i{background:#29413f}
@media (max-width:720px){.home-modality .home-modality-progress{margin-bottom:10px;font-size:12px}}

/* Catálogos: insignia circular de «resuelto» sobre la esquina superior
   derecha de la etiqueta del juego. Círculo verde (#405044) con el ✓ claro
   de los botones (#f8f2e7) completamente dentro. Posición absoluta en la
   tarjeta (la calcula js/progress.js): no toca la etiqueta ni su texto. */
.case-card > .case-solved-badge{position:absolute;z-index:3;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#405044;pointer-events:none}
.case-solved-badge svg{display:block;width:17px;height:17px;fill:none;stroke:#f8f2e7;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1000px){
  .case-card > .case-solved-badge{width:20px;height:20px}
  .case-solved-badge svg{width:16px;height:16px}
}