/* ================================================================
   El Rosco — el círculo de letras es el protagonista: relieve,
   letra activa agrandada con halo dorado y anillo de cronómetro
   que se vacía alrededor del rosco.
   Se carga DESPUÉS de style.css.
   ================================================================ */

.rs-screen { gap: 12px; }

/* ---- marcador ---- */

.rs-screen .vs-bar {
  width: 100%;
  justify-content: center;
  font-size: 1rem;
}

.rs-screen .vs-bar .player-you,
.rs-screen .vs-bar .player-opp {
  padding: 5px 14px;
  border-radius: 999px;
  font-weight: 800;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rs-screen .vs-bar .player-you {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.22), rgba(251, 191, 36, 0.10));
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.45);
}

.rs-screen .vs-bar .player-opp {
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.22), rgba(56, 189, 248, 0.10));
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.45);
}

.rs-level-chip {
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* ---- barra de tiempo: queda solo como respaldo ----
   Donde el navegador soporta mask (todos los modernos) el cronómetro es el
   anillo del rosco y la barra se esconde; si no, la barra sigue estando. */

.rs-screen .tv-timer { height: 5px; opacity: 0.75; }

@supports ((-webkit-mask: radial-gradient(#000, #000)) or (mask: radial-gradient(#000, #000))) {
  .rs-screen .tv-timer { display: none; }
}

/* ---- el rosco ---- */

.rs-wheel {
  /* el ancho deja lugar para el anillo, que vive 26px por fuera del círculo */
  width: min(70vw, 286px);
  margin: 10px auto 6px;
  /* paño hundido con un anillo de apoyo, para que el círculo tenga cuerpo */
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(134, 239, 172, 0.10), rgba(0, 0, 0, 0) 62%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.30) 58%, rgba(0, 0, 0, 0) 72%);
  box-shadow: inset 0 0 42px rgba(0, 0, 0, 0.35);
}

/* anillo de progreso del cronómetro: conic-gradient recortado a un aro.
   --t (1 → 0) lo escribe rosco.js en cada tick. */
.rs-wheel::before {
  content: '';
  position: absolute;
  /* por fuera de las letras (que llegan al 52% del rosco, y la activa al 57%
     cuando late): así el anillo se lee entero y no lo tapan las fichas */
  inset: -26px;
  border-radius: 50%;
  /* arranca arriba, igual que la primera letra del rosco, y se vacía en
     sentido horario (from 0deg ya es las 12 en punto) */
  background: conic-gradient(
    from 0deg,
    var(--ring-a, #fbbf24) 0deg,
    var(--ring-b, #f59e0b) calc(var(--t, 1) * 360deg),
    rgba(255, 255, 255, 0.09) calc(var(--t, 1) * 360deg)
  );
  -webkit-mask: radial-gradient(closest-side, rgba(0, 0, 0, 0) calc(100% - 8px), #000 calc(100% - 8px));
  mask: radial-gradient(closest-side, rgba(0, 0, 0, 0) calc(100% - 8px), #000 calc(100% - 8px));
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.35));
  transition: filter 0.4s ease;
  pointer-events: none;
}

/* últimos segundos: el anillo se pone rojo y late */
.rs-wheel.low::before {
  --ring-a: #f87171;
  --ring-b: #dc2626;
  filter: drop-shadow(0 0 10px rgba(248, 113, 113, 0.6));
  animation: rs-ring-alarm 0.9s ease-in-out infinite;
}

@keyframes rs-ring-alarm {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* la mini del rival: mismo círculo pero sin anillo de cronómetro */
.rs-wheel.mini {
  width: 88px;
  margin: 0;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.12), rgba(0, 0, 0, 0.20) 72%);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
}

.rs-wheel.mini::before { content: none; }

/* ---- las letras ---- */

.rs-letter {
  /* tamaño relativo al rosco: escala parejo en cualquier pantalla */
  width: 11.8%;
  height: 11.8%;
  font-size: clamp(0.72rem, 3.4vw, 1rem);
  letter-spacing: 0;
  border: none;
  color: #eff6ff;
  background: linear-gradient(160deg, #3b82f6, #1e3a8a);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -2px 3px rgba(0, 0, 0, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.40);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  /* solo transform/box-shadow/background: nada que dispare layout */
  transition: transform 0.3s cubic-bezier(0.3, 0.9, 0.4, 1), background 0.35s ease,
    box-shadow 0.35s ease, color 0.35s ease;
  will-change: transform;
}

/* Acierto y error no se distinguen solo por color: en un rosco de 26 letras
   las fichas casi se tocan, así que una chapita se le montaría a la vecina.
   La diferencia va en la forma de la propia ficha: la acertada queda entera
   y con aro blanco, la errada se achica y se hunde apagada. */

.rs-letter.ok {
  background: linear-gradient(160deg, #4ade80, #15803d);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.85),
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    0 0 12px rgba(74, 222, 128, 0.5);
  color: #f0fdf4;
}

.rs-letter.bad {
  transform: translate(-50%, -50%) scale(0.78);
  background: linear-gradient(160deg, #b91c1c, #650a0a);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14);
  color: #fca5a5;
  text-shadow: none;
}

/* letra en juego: más grande, dorada y con halo */
.rs-letter.cur {
  background: linear-gradient(160deg, #fde68a, #f59e0b);
  color: #451a03;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 3px rgba(180, 83, 9, 0.5),
    0 0 0 3px rgba(251, 191, 36, 0.25),
    0 0 22px rgba(251, 191, 36, 0.7);
  text-shadow: none;
  z-index: 3;
  animation: rs-pulse 1.5s ease-in-out infinite;
}

@keyframes rs-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1.32); }
  50%      { transform: translate(-50%, -50%) scale(1.48); }
}

/* la mini del rival: puntitos, sin texto */
.rs-letter.sm {
  width: 12%;
  height: 12%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ---- centro del rosco ---- */

.rs-center { inset: 27%; gap: 4px; }

.rs-big-letter {
  font-size: clamp(2.6rem, 15vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fde68a;
  text-shadow:
    0 0 26px rgba(251, 191, 36, 0.55),
    0 3px 0 rgba(120, 53, 15, 0.55),
    0 5px 12px rgba(0, 0, 0, 0.5);
}

.rs-count {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: #bbf7d0;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 999px;
  padding: 2px 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ---- definición + respuesta ---- */

.rs-def {
  font-size: 0.96rem;
  line-height: 1.35;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.18));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 3px 10px rgba(0, 0, 0, 0.22);
  border-left: 3px solid rgba(251, 191, 36, 0.7);
}

.rs-input-row input {
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.32);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.rs-input-row input:focus {
  border-color: #fbbf24;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(251, 191, 36, 0.18);
}

.rs-input-row input:disabled { opacity: 0.5; }

/* ---- el rosco del rival ---- */

.rs-opp {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.10), rgba(0, 0, 0, 0.22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.rs-opp-status { color: #7dd3fc; }

/* ---- fin de ronda ---- */

.rs-reveal-row {
  background: rgba(0, 0, 0, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.rs-reveal-row.bad {
  background: rgba(127, 29, 29, 0.28);
  border-color: rgba(248, 113, 113, 0.55);
}

/* ---- selector de dificultad ---- */

.rs-lvl-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(0, 0, 0, 0.28));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 5px rgba(0, 0, 0, 0.25);
}

.rs-lvl-btn.selected {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.30), rgba(217, 119, 6, 0.16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 14px rgba(251, 191, 36, 0.28);
}

@media (max-width: 360px) {
  .rs-wheel { width: 72vw; }
  .rs-wheel::before { inset: -20px; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-letter.cur { animation: none; transform: translate(-50%, -50%) scale(1.35); }
  .rs-wheel.low::before { animation: none; }
}