/* zaxfun — capa «Reto del día».
   Hereda las variables de la portada (hub.css). Si el juguete no las trae,
   los fallbacks de cada var() dejan el panel presentable igual. */

.reto-caja {
  background: var(--panel, rgba(255,255,255,.045));
  border: 1px solid var(--panel-borde, rgba(255,255,255,.09));
  border-radius: var(--radio, 20px);
  padding: 1.15rem 1.15rem 1rem;
  max-width: 22rem;
  margin: 0 auto;
  text-align: center;
  font-family: var(--tipo-texto, system-ui, sans-serif);
  color: var(--texto, #e9edfb);
  position: relative;
  overflow: hidden;
}

/* Al terminar, un aro de luz: el premio visual de haber cerrado el día. */
.reto-caja.reto-hecho::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, var(--oro, #ffd479), transparent 55%, var(--cian, #6fd3ff));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.reto-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .5rem;
  margin-bottom: .8rem;
}

.reto-etiqueta {
  font-family: var(--tipo-titulo, system-ui, sans-serif);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-tenue, #8e97b8);
}

.reto-numero {
  font-family: var(--tipo-titulo, system-ui, sans-serif);
  font-weight: 700;
  color: var(--oro, #ffd479);
  font-size: .95rem;
}

.reto-nota {
  margin: 0 0 .9rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--texto-tenue, #8e97b8);
}

.reto-resultado { margin: .2rem 0 1rem; }

/* Los cuadritos son el producto entero: tienen que leerse grandes y con aire,
   porque son lo que alguien pega en un chat. */
.reto-cuadros {
  font-size: 1.65rem;
  letter-spacing: .12em;
  line-height: 1.35;
  word-break: break-word;
}

.reto-titular {
  font-family: var(--tipo-titulo, system-ui, sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  margin-top: .35rem;
}

.reto-boton {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: .78rem 1.2rem;
  font-family: var(--tipo-titulo, system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: #06070f;
  background: linear-gradient(120deg, var(--oro, #ffd479), var(--cian, #6fd3ff));
  cursor: pointer;
  transition: transform .12s ease, filter .2s ease;
}
.reto-boton:hover { filter: brightness(1.08); }
.reto-boton:active { transform: scale(.97); }

.reto-pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--panel-borde, rgba(255,255,255,.09));
  font-size: .84rem;
  color: var(--texto-tenue, #8e97b8);
}

.reto-racha b { color: var(--texto, #e9edfb); font-size: 1.05rem; }
.reto-racha.reto-viva b { color: var(--oro, #ffd479); }

.reto-reloj {
  margin-top: .55rem;
  font-size: .78rem;
  color: var(--texto-tenue, #8e97b8);
}
.reto-reloj b { color: var(--cian, #6fd3ff); font-variant-numeric: tabular-nums; }
.reto-oculto { display: none; }

/* El modo libre va deliberadamente apagado: existe para que el juguete nunca
   sea un botón muerto, pero no debe competir con el reto del día. */
.reto-suelto {
  margin-top: .7rem;
  background: none;
  border: 0;
  color: var(--texto-tenue, #8e97b8);
  font-size: .78rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-family: inherit;
}
.reto-suelto:hover { color: var(--texto, #e9edfb); }