/* ¿Qué carta es? (tanda 570). Solo la carga carta-del-dia.html. */

.cd-pagina {
  max-width: 560px;
}

.cd-cabecera {
  margin-bottom: var(--e-md);
  text-align: center;
}

.cd-sobre {
  margin: 0 0 var(--e-xs);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cd-cabecera h1 {
  margin-bottom: var(--e-xs);
}

.cd-tablero {
  display: grid;
  gap: var(--e-md);
}

/* La carta borrosa (tanda 572). El `scale` tapa el borde que el
   desenfoque deja transparente; `--cd-desenfoque` lo pone el JS por
   intento. Sin transición si hay «menos movimiento». */
.cd-recorte {
  width: min(100%, 320px);
  margin: 0 auto;
  aspect-ratio: 245 / 342;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: 0 10px 30px rgb(0 0 0 / 25%);
}

.cd-recorte img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  filter: blur(var(--cd-desenfoque, 28px));
  transition: filter 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .cd-recorte img {
    transition: none;
  }
}

.cd-ayer {
  margin: 0;
  text-align: center;
}

.cd-pistas,
.cd-intentos {
  display: grid;
  gap: var(--e-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cd-pista {
  display: flex;
  align-items: center;
  gap: var(--e-xs);
  padding: var(--e-xs) var(--e-sm);
  border-radius: var(--radius-md);
  background: var(--bg);
  font-size: var(--t-sm);
}

.cd-pista-cerrada {
  color: var(--text-mid);
}

.cd-intento {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-sm);
  min-height: 44px;
  padding: 0 var(--e-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--white);
}

.cd-intento-vacio {
  border-style: dashed;
  color: var(--text-dim);
}

.cd-intento-nombre {
  overflow: hidden;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Las cuatro casillas: nombre, era, tipo y rareza. */
.cd-casillas {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
}

.cd-casilla {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  background: var(--danger-solid);
}

.cd-casilla.bien {
  background: var(--success);
}

.cd-acciones {
  display: flex;
  justify-content: center;
}

.cd-final {
  display: grid;
  gap: var(--e-sm);
  padding: var(--e-lg);
  border-radius: var(--radius-lg);
  background: var(--bg);
  text-align: center;
}

.cd-final-titulo {
  margin: 0;
  font-size: var(--t-xl);
  font-weight: 700;
}

.cd-final-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-sm);
}

.cd-leyenda {
  text-align: center;
}