/* ════════════════════════════════════════════════════════════════
   MI TURNO · layout/action-button.css
   Botón de acción 3D – iOS 26 physics press
   ════════════════════════════════════════════════════════════════ */

.action-stage {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.action-btn {
  will-change: transform, box-shadow;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #fff;
  position: relative;
  overflow: hidden;
  /* efecto glass: desenfoca lo que queda detrás del botón */
  backdrop-filter: blur(13px) saturate(170%);
  -webkit-backdrop-filter: blur(13px) saturate(170%);
  /* spring en release, ease-out en press */
  transition:
    transform 0.13s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.13s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Brillo especular superior (gloss) tipo Liquid Glass */
.action-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.08) 38%,
    rgba(255, 255, 255, 0) 60%
  );
  pointer-events: none;
}

/* ── GO – Iniciar ──────────────────────────────────────────── */
.action-btn-go {
  background: linear-gradient(
    155deg,
    rgba(159, 190, 255, 0.95) 0%,
    rgba(125, 168, 255, 0.93) 20%,
    rgba(91, 134, 229, 0.93) 64%,
    rgba(74, 113, 212, 0.96) 100%
  );
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 7px 0 0 #3550a8,
    0 15px 45px rgba(91, 134, 229, 0.12);
  transform: translateY(0);
  animation: btn3dBreathe 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.action-btn-go:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.22),
    0 2px 0 0 #3550a8,
    0 4px 12px rgba(91, 134, 229, 0.08);
  animation: none;
}

/* ── STOP – Parar ──────────────────────────────────────────── */
.action-btn-stop {
  background: linear-gradient(
    155deg,
    rgba(248, 113, 113, 0.95) 0%,
    rgba(239, 68, 68, 0.93) 40%,
    rgba(220, 38, 38, 0.95) 100%
  );
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 7px 0 0 #7f1d1d,
    0 15px 45px rgba(220, 38, 38, 0.12);
  transform: translateY(0);
}

.action-btn-stop:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 2px 0 0 #7f1d1d,
    0 4px 12px rgba(220, 38, 38, 0.08);
}

/* ── Animación respira-flota 3D ────────────────────────────── */
/* La sombra lateral sube +3px cuando el botón sube -3px      */
/* → el "piso" visual no se mueve, solo el botón flota         */
@keyframes btn3dBreathe {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1),
      0 7px 0 0 #3550a8,
      0 15px 45px rgba(91, 134, 229, 0.12);
  }
  50% {
    transform: translateY(-3px);
    box-shadow:
      inset 0 1.5px 0 rgba(255, 255, 255, 0.58),
      inset 0 -1px 0 rgba(0, 0, 0, 0.08),
      0 10px 0 0 #3550a8,
      0 25px 60px rgba(91, 134, 229, 0.18);
  }
}

.action-icon {
  line-height: 1;
  display: block;
  /* sombra en dos capas → relieve glossy como el chulo de la referencia */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
.action-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}