/* ============================================================================
   RETO · juego.css — Estilos propios del ROSCO
   (lo común está en /retos/assets/estilos.css; los colores de la web son
   variables --r-…). Los colores de las letras son los de siempre:
   azul = pendiente, verde = acertada, rojo = fallada, amarillo = pasada.
   ========================================================================== */
.rosco-circulo {
  position: relative; width: min(100%, 360px); aspect-ratio: 1; margin: 0 auto 16px;
}
.rosco-letra {
  position: absolute; transform: translate(-50%, -50%);
  width: 11%; aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: clamp(12px, 3.6vw, 16px); color: #fff;
  background: #1f4fa8; border: 2px solid #3a6fd8;
  transition: background .25s ease, transform .25s ease;
}
.rosco-acertada { background: #1f8a4c; border-color: #3fc27a; }
.rosco-fallada  { background: #b0233c; border-color: #ff5b78; }
.rosco-pasada   { background: #a77b10; border-color: #e3b33a; }
.rosco-actual   { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.35); transform: translate(-50%, -50%) scale(1.18); }
.rosco-centro {
  position: absolute; inset: 22%; border-radius: 50%; background: #0b0b0b; border: 1px solid var(--r-borde);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.rosco-reloj { font-size: clamp(30px, 10vw, 46px); font-weight: 800; color: var(--r-acento-claro); font-variant-numeric: tabular-nums; line-height: 1; }
.rosco-marcas { display: flex; gap: 12px; font-size: 15px; }
.rosco-ok { color: #3fc27a; } .rosco-mal { color: #ff5b78; }
.rosco-enunciado { text-align: center; color: var(--r-acento-claro); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin: 6px 0 4px; }
.rosco-enunciado.rosco-aviso { color: #ffd0d8; text-transform: none; letter-spacing: 0; }
.rosco #rosco-definicion { text-align: center; font-size: 20px; min-height: 2.6em; }
.rosco-form input {
  width: 100%; padding: 14px; border-radius: 12px; border: 1px solid #444; background: #0b0b0b; color: #fff;
  font-size: 18px; text-align: center; margin-bottom: 10px;
}
.rosco-form input:focus { outline: 2px solid var(--r-acento); border-color: transparent; }
.rosco-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Pasapalabra: de contorno amarillo (el color de las letras pasadas), para
   que nunca se confunda con «Responder», sea cual sea el color de la web. */
.rosco-pasar { background: transparent; box-shadow: inset 0 0 0 2px #e3b33a; color: #ffd76a; }  /* sombra interior: misma altura que «Responder» */
.rosco-pasar:hover { background: #2a2108; }
.rosco-plantarse { display: block; margin: 14px auto 0; background: none; border: 0; color: #aaa; text-decoration: underline; cursor: pointer; font-size: 14px; }
.rosco-resumen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0 4px; }
.rosco-resumen .rosco-letra { position: static; transform: none; width: 30px; height: 30px; font-size: 13px; }
.retos-juego--urgente .rosco-reloj { animation: retos-latido 1s infinite; }
@media (prefers-reduced-motion: reduce) { .retos-juego--urgente .rosco-reloj { animation: none; } }