/* ══ Go/No-Go ═════════════════════════════════════════════════════════════ */
/* Selector de modo de estímulo (sonido / visual), en la pantalla de instrucciones. */
.gng-mode-picker { display: flex; gap: 10px; justify-content: center; }
.gng-mode-btn.is-active {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hi);
  font-weight: 700;
}

/* Modo sonido: puramente auditivo, sin ningún elemento visual sincronizado con el
   tono dentro del botón — solo su contorno, para que la tarea dependa del audio. */
.gng-pad {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  width: min(100%, 260px); padding: 40px 32px;
  background: var(--surface); border: 2px solid var(--line); border-radius: 16px;
  cursor: pointer; transition: border-color 150ms ease;
}
.gng-pad.is-correct { border-color: var(--ok); }
.gng-pad.is-error { border-color: var(--danger); }
@keyframes gng-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Modo visual: forma + color redundantes (círculo verde / cuadrado rojo), nunca
   solo color, para que la señal sea igual de clara con cualquier tipo de
   percepción del color. En reposo (entre ensayos) no muestra ninguna de las dos,
   para no anticipar la respuesta. */
.gng-shape {
  width: 64px; height: 64px;
  background: var(--bg); border: 2px dashed var(--line); border-radius: 50%;
}
.gng-shape.is-go {
  border-radius: 50%; background: var(--ok); border: 2px solid var(--ok);
  animation: gng-pulse 150ms ease;
}
.gng-shape.is-nogo {
  border-radius: 10px; background: var(--danger); border: 2px solid var(--danger);
  animation: gng-pulse 150ms ease;
}

/* Miniaturas de la misma pareja forma+color, usadas en el ejemplo de instrucciones. */
.gng-swatch {
  display: inline-block; width: 14px; height: 14px; margin-right: 4px;
  vertical-align: -2px;
}
.gng-swatch--go { border-radius: 50%; background: var(--ok); }
.gng-swatch--nogo { border-radius: 3px; background: var(--danger); }