/* ================================================================
   RETO AHORCADO
================================================================ */

/* ---- Card contenedor ----------------------------------------- */

.reto-card {
  border:        1px solid rgba(139, 92, 246, 0.25);
  border-radius: var(--radius-md);
  padding:       var(--space-5);
  background:    rgba(139, 92, 246, 0.05);
  margin-bottom: var(--space-4);
}

.reto-card:last-child { margin-bottom: 0; }

.reto-card-incoming {
  border-color: rgba(236, 72, 153, 0.35);
  background:   rgba(236, 72, 153, 0.05);
}

.reto-card-playing {
  border-color: rgba(139, 92, 246, 0.45);
  background:   rgba(139, 92, 246, 0.07);
}

.reto-card-ganado {
  border-color: rgba(16, 185, 129, 0.40);
  background:   rgba(16, 185, 129, 0.06);
}

.reto-card-perdido {
  border-color: rgba(239, 68, 68, 0.30);
  background:   rgba(239, 68, 68, 0.05);
}

/* ---- Labels -------------------------------------------------- */

.reto-label {
  font-size:     var(--text-sm);
  color:         var(--text-secondary);
  margin-bottom: var(--space-3);
}

.reto-spectator-label {
  text-align:    center;
  font-size:     var(--text-xs);
  color:         var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
}

/* ---- Countdown ----------------------------------------------- */

.reto-countdown {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  font-size:     var(--text-sm);
  color:         var(--text-muted);
  margin-bottom: var(--space-3);
  flex-wrap:     wrap;
}

.reto-timer {
  font-weight:    var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color:          var(--text-secondary);
}

.reto-countdown.urgente .reto-timer { color: var(--color-danger); }

/* ---- Máscara de letras --------------------------------------- */

.reto-mask-row {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--space-2);
  justify-content: center;
  margin:          var(--space-4) 0;
}

.reto-tile {
  width:           36px;
  height:          44px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border-radius:   var(--radius-sm);
  font-size:       var(--text-lg);
  font-weight:     var(--weight-extrabold);
  border:          2px solid;
  transition:      all var(--transition-normal);
}

.reto-tile-hidden {
  border-color: rgba(139, 92, 246, 0.30);
  background:   var(--bg-surface-2);
  color:        var(--text-muted);
  font-size:    var(--text-md);
}

.reto-tile-revealed {
  border-color: rgba(16, 185, 129, 0.50);
  background:   rgba(16, 185, 129, 0.12);
  color:        var(--color-success);
  animation:    fadeInUp var(--duration-fast) var(--ease-out) both;
}

/* ---- Círculos de intentos ------------------------------------ */

.reto-attempts {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  margin-bottom:   var(--space-4);
}

.reto-attempt-circle {
  width:         14px;
  height:        14px;
  border-radius: var(--radius-full);
  border:        2px solid;
  transition:    all var(--transition-normal);
}

.reto-attempt-circle.free { border-color: var(--border-strong); background: transparent; }

.reto-attempt-circle.used {
  background:  var(--color-danger);
  border-color: var(--color-danger);
  box-shadow:  0 0 8px rgba(239, 68, 68, 0.45);
}

/* ---- Teclado ------------------------------------------------- */

.reto-keyboard {
  display:         flex;
  flex-wrap:       wrap;
  gap:             6px;
  justify-content: center;
  max-width:       380px;
  margin:          0 auto var(--space-3);
}

.reto-key {
  width:           36px;
  height:          36px;
  border-radius:   var(--radius-sm);
  border:          1px solid var(--border-default);
  background:      var(--bg-surface-2);
  color:           var(--text-primary);
  font-family:     var(--font-sans);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-semibold);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      all var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.reto-key:hover:not(:disabled) {
  border-color: var(--color-primary);
  background:   var(--color-primary-dim);
  transform:    scale(1.12);
}

.reto-key:active:not(:disabled) { transform: scale(0.95); }

.reto-key.correcto {
  background:   rgba(16, 185, 129, 0.18);
  border-color: var(--color-success);
  color:        var(--color-success);
}

.reto-key.incorrecto {
  background:   rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.40);
  color:        var(--text-muted);
}

.reto-key:disabled { cursor: not-allowed; opacity: 0.45; }

/* ---- Resultado final ----------------------------------------- */

.reto-resultado {
  text-align: center;
  padding:    var(--space-4) var(--space-2);
}

.reto-resultado-icon {
  font-size:     2.5rem;
  line-height:   1;
  margin-bottom: var(--space-3);
}

.reto-resultado-palabra {
  font-size:    var(--text-2xl);
  font-weight:  var(--weight-extrabold);
  background:   var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.1em;
  margin:       var(--space-3) 0 var(--space-2);
}

.reto-resultado-puntos {
  font-size:   var(--text-lg);
  font-weight: var(--weight-bold);
}

/* ---- Crear reto ---------------------------------------------- */

.reto-create { text-align: center; }

.reto-word-input {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight:    var(--weight-bold);
  text-align:     center;
}

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

/* ---- Responsive --------------------------------------------- */

@media (max-width: 400px) {
  .reto-key { width: 30px; height: 30px; font-size: var(--text-xs); }
  .reto-tile { width: 30px; height: 38px; font-size: var(--text-md); }
}