/* El juego de cartas.
   Solo se carga en /juego, así la landing no arrastra CSS que no usa.
   Todos los colores salen de los tokens del design system. */

.juego { padding-bottom: var(--space-9); }

.juego-cabecera { padding: var(--space-6) 0 var(--space-8); }
.juego-cabecera h1 { font-size: var(--text-h1); color: var(--ink-900); margin-top: var(--space-3); }
.juego-cabecera .lede { margin-top: var(--space-4); }

/* ---------- las cartas barajándose al empezar la partida ---------- */

/* Cinco naipes que se levantan, salen a un lado y se meten por debajo del
   mazo, cada uno desfasado un quinto del ciclo. Es un barajado de mano, no
   un reparto: se ve cómo las cartas se mezclan.

   La versión anterior movía las cartas en translateZ dentro de un contenedor
   SIN perspective, así que no se movía nada: se veía un bulto rosa quieto.
   Esta va en 2D a propósito — se lee igual y no depende de la perspectiva. */

.juego-cargando {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8) 0;
  color: var(--text-muted);
  font-size: var(--text-body-sm);
  transition: opacity 200ms ease;
}

.juego-cargando.saliendo { opacity: 0; }

.mazo-barajando {
  --naipe: 58px;
  --ciclo: 1.5s;
  position: relative;
  width: calc(var(--naipe) * 2.5);
  height: calc(var(--naipe) * 1.5 + 16px);
}

.mazo-barajando i {
  position: absolute;
  top: 8px;
  left: calc(var(--naipe) * 0.35);
  width: var(--naipe);
  aspect-ratio: 2 / 3;                /* la misma proporción que los naipes */
  border-radius: 3px;
  background: var(--ink-900);
  border: 1px solid var(--rosegold-deep);
  box-shadow: 0 4px 12px rgba(20, 10, 15, 0.18);
  animation: barajar var(--ciclo) infinite ease-in-out;
}

/* La A del reverso, para que sean las cartas del juego y no rectángulos. */
.mazo-barajando i::before {
  content: "A";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: calc(var(--naipe) * 0.46);
  line-height: 1;
  color: var(--pink-100);
}

/* Retardos negativos: al aparecer ya están repartidas por todo el ciclo, en
   vez de arrancar las cinco juntas desde el mismo sitio. */
.mazo-barajando i:nth-child(1) { animation-delay: 0s; }
.mazo-barajando i:nth-child(2) { animation-delay: -0.3s; }
.mazo-barajando i:nth-child(3) { animation-delay: -0.6s; }
.mazo-barajando i:nth-child(4) { animation-delay: -0.9s; }
.mazo-barajando i:nth-child(5) { animation-delay: -1.2s; }

@keyframes barajar {
  0%,
  100% { transform: translate(0, 0) rotate(0deg);       z-index: 2; }
  14%  { transform: translate(4%, -9px) rotate(-1deg);  z-index: 5; }
  38%  { transform: translate(112%, -5px) rotate(7deg); z-index: 5; }
  56%  { transform: translate(112%, 7px) rotate(7deg);  z-index: 1; }
  80%  { transform: translate(6%, 5px) rotate(1deg);    z-index: 1; }
}

/* Sin animación se queda el mazo quieto; el texto ya dice lo que pasa. */
@media (prefers-reduced-motion: reduce) {
  .mazo-barajando i { animation: none; }
  .mazo-barajando i:nth-child(2) { transform: translate(3%, 3px) rotate(1deg); }
  .mazo-barajando i:nth-child(3) { transform: translate(6%, 6px) rotate(2deg); }
  .mazo-barajando i:nth-child(4) { transform: translate(9%, 9px) rotate(3deg); }
  .mazo-barajando i:nth-child(5) { transform: translate(12%, 12px) rotate(4deg); }
}

.aviso-noscript {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  color: var(--ink-800);
  font-size: var(--text-body-md);
}

/* ---------- bloques de configuración ---------- */

.bloque { padding: var(--space-6) 0; border-top: 1px solid var(--line); }

.bloque-titulo {
  font-size: var(--text-h3);
  color: var(--ink-900);
  margin: 0 0 var(--space-4);
}

.bloque-nota {
  font-size: var(--text-body-md);
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 60ch;
  margin: calc(-1 * var(--space-2)) 0 var(--space-5);
}
.bloque-nota strong { color: var(--ink-900); font-weight: 600; }

.opciones { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Tarjeta-botón: mismos radios y líneas que el resto del sitio. */
.opcion {
  flex: 1 1 180px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--dur-fast) var(--ease-brand);
}
.opcion:hover { background: var(--pink-50); }
.opcion:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.opcion.sel {
  background: var(--ink-900);
  border-color: var(--ink-900);
}
.opcion.sel .opcion-n { color: var(--pink-100); }
.opcion.sel .opcion-d { color: var(--ink-300); }

.opcion-n {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  color: var(--ink-900);
  display: flex;
  align-items: center;
  gap: 2px;
}
.opcion-d { font-size: var(--text-body-sm); color: var(--text-muted); }

.llama { color: var(--danger); flex: none; }
.opcion.sel .llama { color: var(--pink-300); }

/* ---------- inventario ---------- */

.inventario {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-5);
}

.grupo { border: none; margin: 0; padding: 0; min-width: 0; }

.grupo legend {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--rosegold-deep);
  padding: 0 0 var(--space-2);
}

.grupo ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}

.grupo label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  color: var(--ink-800);
  cursor: pointer;
  line-height: 1.5;
}
.grupo label:hover { color: var(--ink-900); }
.grupo input { accent-color: var(--rosegold); cursor: pointer; margin-top: 2px; flex: none; }

.inv-pie {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-5) 0 0;
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.enlace-sobrio {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--rosegold-deep);
  text-decoration: underline;
  cursor: pointer;
}
.enlace-sobrio:hover { color: var(--ink-900); }

/* ---------- barra de empezar ---------- */

.empezar-barra {
  border-top: 1px solid var(--line);
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.resumen-mazo {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  color: var(--ink-900);
  margin: 0;
}

.aviso-bloqueadas {
  font-size: var(--text-body-sm);
  color: var(--rosegold-deep);
  margin: 0;
}

#empezar { margin-top: var(--space-2); }
#empezar:disabled { opacity: 0.4; cursor: default; }

.consentimiento {
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 56ch;
  margin: var(--space-3) 0 0;
}

/* ---------- la baraja ---------- */

/* El ángulo del borde animado. Se declara con @property para que el navegador
   sepa que es un ángulo y pueda interpolarlo: sin esto, animar un gradiente
   es imposible en CSS. */
@property --giro {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}

.partida {
  padding: var(--space-6) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.partida:focus { outline: none; }

.carta-contador {
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  margin: 0 0 var(--space-5);
}

/* Proporción de naipe (2:3), no de caja de texto. Es lo que hace que se lea
   como una carta antes de leer nada. */
.baraja {
  --alto: clamp(380px, 62vh, 560px);
  --ancho: calc(var(--alto) / 1.5);
  position: relative;
  width: var(--ancho);
  height: var(--alto);
  perspective: 1400px;
  margin-bottom: var(--space-6);
}

/* Las de debajo asoman giradas, para que se vea que hay mazo y no una sola. */
.naipe {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--dur-med) var(--ease-brand),
              opacity var(--dur-med) var(--ease-brand);

  /* Sin esto, arrastrar la carta para pasarla SELECCIONA el texto: el gesto es
     exactamente el mismo que hace el navegador para seleccionar, así que pasaba
     siempre, no de vez en cuando. La carta quedaba con el título y el texto
     resaltados en rosa.

     -webkit-touch-callout va con esto: en iOS, mantener el dedo sobre la carta
     abre el menú de copiar/compartir encima del naipe. Los enlaces de producto
     siguen funcionando — esto no afecta a los clics. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.naipe[data-pos="1"] { transform: translateY(10px) scale(0.95) rotate(-3deg); opacity: 0.75; }
.naipe[data-pos="2"] { transform: translateY(20px) scale(0.90) rotate(2.5deg); opacity: 0.5; }
.naipe[data-pos="1"], .naipe[data-pos="2"] { pointer-events: none; }

/* La de arriba se puede arrastrar. */
.naipe[data-pos="0"] { cursor: grab; touch-action: pan-y; }
.naipe[data-pos="0"].arrastrando { cursor: grabbing; transition: none; }

/* Volteada: se ve el anverso. */
.naipe.abierta { transform: rotateY(180deg); }

/* La que sale del mazo al pasar de carta. */
.naipe.saliendo {
  transition: transform 420ms var(--ease-brand), opacity 420ms var(--ease-brand);
  opacity: 0;
}

.cara {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cara-anverso { transform: rotateY(180deg); }

/* ---------- reverso ---------- */

/* El reverso es el logo: tres estrellas y la A, sobre el negro de la marca,
   con un filete oro rosa como el marco galería del design system. */
.cara-reverso {
  background: var(--ink-900);
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  border: 1px solid var(--rosegold-deep);
}

.cara-reverso::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--rosegold-deep);
  border-radius: 2px;
  opacity: 0.55;
  pointer-events: none;
}

.reverso-estrellas { color: var(--rosegold); font-size: 15px; letter-spacing: 0.45em; }

.reverso-a {
  font-family: var(--font-display);
  font-size: clamp(72px, 16vh, 128px);
  line-height: 1;
  color: var(--pink-100);
}

.reverso-sub {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rosegold);
}

.reverso-toque {
  position: absolute;
  bottom: var(--space-5);
  font-size: var(--text-body-sm);
  color: var(--ink-300);
}

/* ---------- anverso ---------- */

.cara-anverso {
  background: var(--ink-900);
  padding: var(--space-7) var(--space-6);
  justify-content: center;
  border: 1px solid var(--ink-700);
}

.carta-kicker {
  font-size: var(--text-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--rosegold);
  margin: 0;
}

.cara-anverso h2 {
  font-size: clamp(26px, 4.6vh, 38px);
  color: var(--pink-100);
  margin: var(--space-4) 0 0;
}

.carta-texto {
  font-size: var(--text-body-md);
  line-height: 1.7;
  color: var(--ink-300);
  margin: var(--space-4) 0 0;
  overflow-y: auto;
}

.carta-producto {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink-700);
  font-size: var(--text-body-sm);
  color: var(--ink-300);
}
.carta-producto a { color: var(--pink-100); text-decoration: underline; }
.carta-producto a:hover { color: var(--pink-200); }

/* ---------- el borde que gira ---------- */

/* El gradiente es el FONDO de la cara, y un ::after opaco lo tapa dejando
   solo 2px asomando: eso es el marco. La primera versión ponía el gradiente
   en un ::before con z-index:-1, pero el `isolation:isolate` lo pintaba por
   encima del fondo y el degradado se comía la carta entera.

   Solo en la de arriba y solo cuando está abierta: todo el mazo girando a la
   vez sería una feria. */
@supports (background: linear-gradient(var(--giro), red, blue)) {
  .naipe[data-pos="0"].abierta .cara-anverso {
    background-image: linear-gradient(var(--giro),
      var(--pink-100), var(--rosegold) 43%, var(--rosegold-deep));
    border-color: transparent;
    animation: girar 4s linear infinite;
  }

  .naipe[data-pos="0"].abierta .cara-anverso::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: var(--ink-900);
    border-radius: 3px;
    z-index: 0;
  }

  /* El contenido, por encima del tapón. */
  .naipe[data-pos="0"].abierta .cara-anverso > * { position: relative; z-index: 1; }

  /* El resplandor de debajo: el mismo gradiente, desenfocado y algo más abajo,
     como en la referencia. Va en el contenedor y no en el naipe porque el
     naipe rota 180° al voltearse y se lo llevaría consigo. */
  .baraja:has(.naipe[data-pos="0"].abierta)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--radius-md);
    background-image: linear-gradient(var(--giro),
      var(--pink-100), var(--rosegold) 43%, var(--rosegold-deep));
    filter: blur(34px);
    opacity: 0.45;
    transform: scale(0.9) translateY(16px);
    animation: girar 4s linear infinite;
  }

  @keyframes girar {
    to { --giro: 492deg; }
  }
}

/* ---------- acciones ---------- */

.carta-acciones {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

.btn-ghost-oscuro {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-800);
}
.btn-ghost-oscuro:hover { background: var(--pink-50); color: var(--ink-900); }

.carta-nota {
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  margin: var(--space-4) 0 0;
  text-align: center;
}

.carta-final {
  text-align: center;
  padding: var(--space-8) var(--space-6);
  background: var(--ink-900);
  border-radius: var(--radius-md);
  max-width: 420px;
}
.carta-final h2 { font-size: var(--text-h2); color: var(--pink-100); margin: var(--space-3) 0 0; }
.carta-final .carta-texto { color: var(--ink-300); }

/* Quien tenga las animaciones desactivadas no necesita bordes girando. */
@media (prefers-reduced-motion: reduce) {
  .naipe, .naipe.saliendo { transition: none; }
  .naipe[data-pos="0"].abierta .cara-anverso::before { animation: none; }
}

/* ---------- móvil ---------- */

@media (max-width: 700px) {
  .juego-cabecera h1 { font-size: 30px; }
  .opcion { flex-basis: 100%; max-width: none; }
  .inventario { grid-template-columns: 1fr; gap: var(--space-4); }
  .baraja { --alto: min(70vh, 480px); }
  .cara-anverso { padding: var(--space-6) var(--space-5); }
  .carta-acciones { width: 100%; }
  .carta-acciones .btn { width: 100%; }
}

/* ---------- el tipo de carta ---------- */

/* El pie recoge el modo y el nivel, que ahora bajan del kicker: al voltear,
   lo que hace falta saber es si toca preguntar, hacer o cambiar la regla. */
.carta-pie {
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rosegold-deep);
  opacity: 0.75;
}

/* Un comodín no se hace: cambia una regla. Si se viera igual que un reto,
   se leería como una actividad más y se cumpliría como tal.

   Va INVERTIDO — claro sobre oscuro — porque el anverso normal ya es negro y
   un cambio de matiz no se habría notado. Al voltear, la diferencia tiene que
   entrar por el ojo antes de leer la etiqueta. */
/* El negro de la carta abierta NO lo pone .cara-anverso: lo pone el ::after
   que tapa el gradiente del borde. Cambiar solo el background de la cara dejó
   el comodín con el fondo negro y el texto en negro encima, ilegible. */
.naipe[data-tipo="comodin"] .cara-anverso { background: var(--pink-100); }
.naipe[data-tipo="comodin"][data-pos="0"].abierta .cara-anverso::after {
  background: var(--pink-100);
}

.naipe[data-tipo="comodin"] .cara-anverso h2,
.naipe[data-tipo="comodin"] .cara-anverso .carta-texto { color: var(--ink-900); }
.naipe[data-tipo="comodin"] .carta-kicker,
.naipe[data-tipo="comodin"] .carta-pie { color: var(--rosegold-deep); opacity: 1; }
.naipe[data-tipo="comodin"] .carta-producto a { color: var(--ink-900); }

/* ---------- la cartera y la tienda ---------- */

.cartera {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.moneda {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/* La dura se distingue con el filete oro rosa, el mismo del marco galería del
   design system. No con otro color de fondo: dos cajas de colores distintos
   pelearían con las pills de categoría que ya están arriba. */
.moneda-dura { border-color: var(--rosegold-deep); }

.moneda-cifra {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  color: var(--ink-900);
}

.moneda-simbolo {
  font-size: 16px;
  margin-left: 3px;
  color: var(--rosegold-deep);
}

.moneda-nombre {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.canje { margin-bottom: var(--space-6); }

.canje label {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.canje-fila { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.canje-fila input {
  flex: 1 1 12ch;
  /* NO va min-width:0 aquí. Con eso el botón "Canjear" se comía la fila y el
     campo quedaba en 34 px de ancho en un móvil de 375: imposible teclear un
     código de diez caracteres. Con la base en 12ch y flex-wrap en la fila, o
     caben los dos o el botón baja debajo. */
  min-width: 12ch;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: var(--text-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-900);
}

.canje-fila input:focus-visible {
  outline: 2px solid var(--rosegold-deep);
  outline-offset: 1px;
}

.canje-aviso {
  margin-top: var(--space-3);
  min-height: 1.2em;         /* reservado: sin esto el bloque salta al avisar */
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.canje-aviso.bien { color: var(--rosegold-deep); }
.canje-aviso.mal { color: var(--danger); }

.tienda-titulo {
  margin: var(--space-6) 0 var(--space-3);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rosegold-deep);
}

.tienda-nota {
  margin-bottom: var(--space-4);
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.tienda-lista { list-style: none; margin: 0; padding: 0; }

.tienda-lista li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line);
}

/* El nombre empuja los botones a la derecha, y el detalle queda pegado a
   ellos: así se lee "Aceite de masajes … 12 cartas [15 plumas]". */
.tienda-cosa { flex: 1; font-size: var(--text-body); color: var(--ink-900); }

.tienda-detalle {
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.btn-mini {
  /* 40 px de alto mínimo: a 31 px estos botones eran incómodos con el pulgar,
     y la tienda se usa en el móvil más que en el escritorio. */
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  font-size: 10px;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.btn-mini[disabled] { opacity: 0.4; cursor: not-allowed; }

/* El aviso de plumas ganadas, dentro de la partida. Va sobre el negro. */
.aviso-plumas {
  margin-top: var(--space-4);
  font-size: var(--text-body-sm);
  color: var(--rosegold);
  transition: opacity 200ms ease;
}

/* En móvil los dos botones de un cosmético no caben al lado del nombre. */
@media (max-width: 460px) {
  .tienda-lista li { flex-wrap: wrap; }
  .tienda-cosa { flex: 1 0 100%; }
}

/* Una carta prestada dice qué pide, no "con tu": no lo tiene. La segunda
   línea lo deja claro para que nadie la juegue creyendo que le falta algo. */
.carta-prestada { border-top: 1px solid var(--rosegold-deep); padding-top: var(--space-3); }
.carta-prestada span {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rosegold-deep);
}

/* ---------- los reversos ---------- */

/* Cada reverso comprado cambia de verdad la cara de atrás del naipe. Vender un
   adorno que no se ve sería cobrar por nada, así que cada uno tiene su paleta.
   El de serie (rev-base) no lleva regla: es lo que ya hacía .cara-reverso. */

.naipe[data-reverso="rev-noche"] .cara-reverso {
  background: #0B1220;                       /* azul casi negro, no el ink de marca */
  border-color: #2C3E63;
}
.naipe[data-reverso="rev-noche"] .cara-reverso::before { border-color: #2C3E63; }
.naipe[data-reverso="rev-noche"] .reverso-estrellas,
.naipe[data-reverso="rev-noche"] .reverso-sub { color: #6E86B8; }

.naipe[data-reverso="rev-oro"] .cara-reverso {
  background: var(--rosegold-deep);
  border-color: var(--pink-100);
}
.naipe[data-reverso="rev-oro"] .cara-reverso::before { border-color: var(--pink-100); opacity: 0.7; }
.naipe[data-reverso="rev-oro"] .reverso-a { color: var(--pink-100); }
.naipe[data-reverso="rev-oro"] .reverso-estrellas,
.naipe[data-reverso="rev-oro"] .reverso-sub { color: var(--pink-100); }

.naipe[data-reverso="rev-crema"] .cara-reverso {
  background: var(--pink-100);
  border-color: var(--ink-900);
}
.naipe[data-reverso="rev-crema"] .cara-reverso::before { border-color: var(--rosegold-deep); }
.naipe[data-reverso="rev-crema"] .reverso-a { color: var(--ink-900); }
.naipe[data-reverso="rev-crema"] .reverso-estrellas,
.naipe[data-reverso="rev-crema"] .reverso-sub { color: var(--rosegold-deep); }

/* La muestra de la tienda: el mismo naipe en miniatura, para no comprar a
   ciegas. Misma proporción 2:3 que los de verdad. */
.reverso-muestra {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  aspect-ratio: 2 / 3;
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1;
  background: var(--ink-900);
  border: 1px solid var(--rosegold-deep);
  color: var(--pink-100);
}

.reverso-muestra[data-reverso="rev-noche"] { background: #0B1220; border-color: #2C3E63; color: #C9D6F0; }
.reverso-muestra[data-reverso="rev-oro"]   { background: var(--rosegold-deep); border-color: var(--pink-100); color: var(--pink-100); }
.reverso-muestra[data-reverso="rev-crema"] { background: var(--pink-100); border-color: var(--ink-900); color: var(--ink-900); }

/* Las ayudas de partida, debajo de los botones grandes. Van pequeñas y en
   secundario a propósito: son opcionales y no deben competir con "Siguiente". */
.ayudas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* ---------- la cuenta ---------- */

.cuenta { margin-bottom: var(--space-6); }

.cuenta-nota {
  margin-bottom: var(--space-4);
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.cuenta-guardada {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--rosegold-deep);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-800);
}

/* El correo no va en mayúsculas ni espaciado como el código: es un correo, no
   algo que se dicta por teléfono. */
.cuenta input[type="email"] {
  letter-spacing: normal;
  text-transform: none;
}

/* El saldo dentro de la partida, en la fila de las ayudas. Va delante de los
   botones porque se lee antes de decidir si gastar. */
.ayudas-saldo {
  align-self: center;
  margin-right: var(--space-2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.saldo-estrellas { color: var(--rosegold-deep); }

/* ---------- marcador y turnos ---------- */

.jugadoras { display: flex; flex-direction: column; gap: var(--space-3); }

.jugadora-fila { display: flex; align-items: center; gap: var(--space-3); }

.jugadora-nombre {
  flex: 1;
  min-width: 8ch;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--ink-900);
}

.jugadora-nombre:focus-visible {
  outline: 2px solid var(--rosegold-deep);
  outline-offset: 1px;
}

.marcador {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.marcador-j {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

/* A quién le toca, con el filete oro rosa. No con un color de fondo: el
   marcador va sobre el crema y una pastilla llena competiría con el naipe. */
.marcador-j.le-toca { border-color: var(--rosegold-deep); }

.marcador-n {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.marcador-j.le-toca .marcador-n { color: var(--rosegold-deep); }

.marcador-p {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
  color: var(--ink-900);
}

.marcador-turno {
  margin-bottom: var(--space-3);
  text-align: center;
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.final-titular {
  margin: var(--space-6) 0 var(--space-4);
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--pink-100);
}

.marcador-final { margin-top: var(--space-4); }

/* ---------- hacia dónde va la carta ---------- */

/* Mientras se arrastra, un filete dice qué va a pasar al soltar. Sin esto,
   arrastrar es una apuesta: no se distingue completar de descartar hasta que
   ya es tarde. Se usa el borde y no un color de fondo porque el design system
   no tiene verde ni rojo, y un semáforo aquí desentonaría. */
.naipe.hacia-si .cara  { box-shadow: inset 0 0 0 3px var(--rosegold); }
.naipe.hacia-no .cara  { box-shadow: inset 0 0 0 3px var(--line-strong); opacity: 0.75; }

.naipe.saliendo.completada { opacity: 0; }
.naipe.saliendo.descartada { opacity: 0; filter: grayscale(1); }

/* La racha, al lado de quién sigue jugando. Va en oro rosa porque es lo que
   está en juego: cuanto más larga, más duele descartar. */
.racha {
  margin-left: var(--space-3);
  padding: 1px var(--space-3);
  border: 1px solid var(--rosegold-deep);
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rosegold-deep);
  white-space: nowrap;
}

/* ---------- el cronómetro de la carta ---------- */

.crono {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(183, 110, 121, 0.35);
}

.crono-reloj {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  color: var(--pink-100);
  font-variant-numeric: tabular-nums;   /* sin esto los dígitos bailan al contar */
}

.crono.corriendo .crono-reloj { color: var(--rosegold); }

/* Al acabar, el reloj deja de ser un número y lo dice con palabras: un "0:00"
   se confunde con no haber empezado. */
.crono.sonando .crono-reloj {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rosegold);
}

.crono.sonando { animation: crono-acabo 900ms ease-out 2; }

@keyframes crono-acabo {
  0%, 100% { border-top-color: rgba(183, 110, 121, 0.35); }
  50%      { border-top-color: var(--rosegold); }
}

@media (prefers-reduced-motion: reduce) {
  .crono.sonando { animation: none; border-top-color: var(--rosegold); }
}

/* Aquí había reglas para el cronómetro dentro de un comodín. Sobran: un
   comodín cambia una regla del juego, no ocupa un rato, así que nunca lleva
   cronómetro (ver TIPOS_CON_TIEMPO en duracion.js). CSS muerto para un estado
   imposible es peor que no tenerlo: no se puede comprobar y da falsa
   sensación de estar cubierto. */

/* El botón del cronómetro vive DENTRO del naipe, y .btn-ghost-oscuro pinta el
   texto en --ink-800 porque está hecha para el fondo crema del resto de la
   página. Sobre el negro de la carta no se leía hasta pasar el ratón por
   encima — que en un móvil no existe.

   VA RELLENO, NO FANTASMA, y eso es lo que arregla el problema de raíz: un
   botón que se pinta a sí mismo el fondo se lee igual da lo que tenga detrás.
   El primer intento fue darle texto claro para la carta negra y texto oscuro
   para la del comodín, y eso es tener el mismo fallo esperando en cada fondo
   nuevo que se añada.

   Oro rosa con tinta encima da 4,81:1, que pasa el AA de WCAG. */
.crono .btn {
  background: var(--rosegold);
  border-color: var(--rosegold);
  color: var(--ink-900);
}

.crono .btn:hover,
.crono .btn:focus-visible {
  background: var(--pink-100);
  border-color: var(--pink-100);
  color: var(--ink-900);
}

/* El reloj y el interruptor de sonido, a la derecha del botón. "Se acabó" se
   partía en dos líneas y quedaba pegado al botón: con margin-left auto el
   reloj se va al extremo y hay sitio para las dos palabras. */
.crono-reloj { margin-left: auto; white-space: nowrap; }

.crono-sonido {
  flex: 0 0 auto;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid var(--rosegold-deep);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--rosegold);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.crono-sonido[aria-pressed="false"] { color: var(--text-muted); border-color: var(--line-strong); }
.crono-sonido:hover { background: var(--rosegold-deep); color: var(--pink-100); }

/* ---------- el inventario, plegado ---------- */

.inv-plegable > summary {
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--text-body);
  color: var(--ink-900);
  list-style: none;                 /* fuera el triángulo del navegador */
}

.inv-plegable > summary::-webkit-details-marker { display: none; }

/* Flecha propia, que gira al abrir. La del navegador no se puede estilar y
   desentona con el resto. */
.inv-plegable > summary::after {
  content: "›";
  float: right;
  transform: rotate(90deg);
  transition: transform var(--dur-fast) var(--ease-brand);
  color: var(--rosegold-deep);
}

.inv-plegable[open] > summary::after { transform: rotate(-90deg); }
.inv-plegable > summary:hover { border-color: var(--rosegold-deep); }
.inv-plegable > summary:focus-visible { outline: 2px solid var(--rosegold-deep); outline-offset: 2px; }

.inv-plegable[open] > summary { margin-bottom: var(--space-5); }

@media (prefers-reduced-motion: reduce) {
  .inv-plegable > summary::after { transition: none; }
}

/* ---------- buscar dentro del inventario ---------- */

.inv-buscar { margin-bottom: var(--space-5); }

.inv-buscar input {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--ink-900);
}

.inv-buscar input:focus-visible {
  outline: 2px solid var(--rosegold-deep);
  outline-offset: 1px;
}

.inv-encontrados {
  margin-top: var(--space-2);
  min-height: 1.1em;              /* reservado: sin esto la lista salta al escribir */
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

/* Al filtrar, lo que sigue visible solo porque estaba marcado se atenúa: así
   se distingue de lo que de verdad coincide con la búsqueda, sin ocultarlo
   —ocultarlo parecería que se ha desmarcado solo. */
#inventario li.solo-por-marcado { opacity: 0.5; }