/* Temas de página desbloqueables
   (archivo: css/components/unlockable-themes.css) */
/* ============================================================
   ╔══════════════════════════════════════════════════════════╗
   ║     RECOMPENSAS: TEMAS DE PÁGINA DESBLOQUEABLES            ║
   ╚══════════════════════════════════════════════════════════╝
   Cada tema se activa poniendo una clase "theme-<id>" en <body>.
   Se desbloquean al conseguir el trofeo asociado en la Sala de
   Trofeos (ver THEMES en el script, al final del archivo) y se
   activan/desactivan desde la tarjeta o el modal de ese trofeo.
   ============================================================ */

/* (El tema desbloqueable "Nah, I'd Win" se ha eliminado.) */

/* ── Recompensa: bloque de tema dentro de tarjeta/modal de trofeo ── */
.trophy-card-reward-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Fredoka One', cursive;
  font-size: .6rem;
  color: var(--trophy-unlock);
  background: rgba(79,209,255,.1);
  border: 1px solid rgba(79,209,255,.35);
  border-radius: 999px;
  padding: 3px 9px;
  margin-bottom: 8px;
}
.trophy-reward-block {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(79,209,255,.06);
  border: 1.5px dashed rgba(79,209,255,.4);
  text-align: left;
}
.trophy-reward-block-title {
  font-family: 'Fredoka One', cursive;
  font-size: .74rem;
  color: var(--trophy-unlock);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.trophy-reward-block-desc {
  font-family: 'Fredoka', sans-serif;
  font-size: .74rem;
  color: #aaa;
  line-height: 1.5;
  margin-bottom: 10px;
}
.theme-reward-btn {
  width: 100%;
  background: linear-gradient(135deg, rgba(79,209,255,.16), rgba(79,209,255,.05));
  border: 1.5px solid var(--trophy-unlock);
  color: var(--trophy-unlock);
  font-family: 'Fredoka One', cursive;
  font-size: .7rem;
  border-radius: 8px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.theme-reward-btn:hover:not(:disabled) { background: rgba(79,209,255,.24); transform: translateY(-1px); }
.theme-reward-btn:disabled { opacity: .5; cursor: not-allowed; }
.theme-reward-btn.active { background: var(--trophy-unlock); color: #06222b; }