/* =========================
BUTTON SYSTEM
========================= */

.action-btn {
  min-width: 180px;
  height: 52px;

  padding: 0 26px;

  text-align: center;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;

  border: none;

  background:
    linear-gradient(
      135deg,
      #ffe45e,
      #ffd43b
    );

  color:
    #111;

  font-weight:
    700;

  font-size:
    16px;

  letter-spacing:
    0.02em;

  box-shadow:
    0 14px 34px rgba(255,212,59,0.28);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;

  cursor: pointer;
}

.action-btn:hover {
  transform:
    translateY(-2px);

  filter:
    brightness(1.03);

  box-shadow:
    0 20px 40px rgba(255,212,59,0.34);
}

/* =========================
PLAY / STOP
========================= */

.action-btn.btn-play,
.action-btn.btn-stop {
  position: relative;

  min-width: 0;

  width: 38px;
  height: 38px;

  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  font-size: 15px;
  line-height: 1;

  border:
    1px solid rgba(255,255,255,0.12);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.035)
    );

  box-shadow:
    0 12px 28px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.32);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    filter 0.18s ease;
}

.action-btn.btn-play {
  color: #7dff9e;

  text-shadow:
    0 0 12px rgba(112,255,152,0.36);

  box-shadow:
    0 12px 28px rgba(0,0,0,0.30),
    0 0 24px rgba(112,255,152,0.12),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.32);
}

.action-btn.btn-play:hover {
  color: #08180f;

  background:
    linear-gradient(
      180deg,
      #7dff9e,
      #4eea78
    );

  border-color:
    rgba(125,255,158,0.72);

  box-shadow:
    0 16px 34px rgba(0,0,0,0.34),
    0 0 30px rgba(112,255,152,0.24),
    inset 0 1px 0 rgba(255,255,255,0.36);
}

.action-btn.btn-stop {
  color: #ff6b6b;

  text-shadow:
    0 0 12px rgba(255,87,87,0.34);

  box-shadow:
    0 12px 28px rgba(0,0,0,0.30),
    0 0 24px rgba(255,87,87,0.10),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.32);
}

.action-btn.btn-stop:hover {
  color: #210707;

  background:
    linear-gradient(
      180deg,
      #ff7474,
      #ff4e4e
    );

  border-color:
    rgba(255,116,116,0.72);

  box-shadow:
    0 16px 34px rgba(0,0,0,0.34),
    0 0 30px rgba(255,87,87,0.22),
    inset 0 1px 0 rgba(255,255,255,0.34);
}

.action-btn.btn-play:hover,
.action-btn.btn-stop:hover {
  transform:
    translateY(-2px) scale(1.03);

  filter:
    brightness(1.04);
}

.action-btn.btn-play:active,
.action-btn.btn-stop:active {
  transform:
    translateY(0) scale(0.96);

  filter:
    brightness(0.96);
}

.lesson-btn-group {
  display: flex;
  justify-content: center;

  gap: 12px;

  margin-top: 0;
}

.action-btn.is-disabled,
.action-btn:disabled {
  opacity: 0.28;
  filter: grayscale(1);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

@media (max-width: 768px) {
  .action-btn {
    min-width: 0;
    min-height: 46px;
    height: auto;

    padding: 13px 24px;

    font-size: 15.5px;
    line-height: 1.15;

    border-radius: 999px;
  }

  .bottom-zone > .action-btn,
  .practice-actions .action-btn,
  .lesson-completion-action .action-btn {
    width: min(100%, 360px);
  }

  .action-btn.btn-play,
  .action-btn.btn-stop {
    min-height: 0;
    padding: 0;
  }
}

@media (max-width: 420px) {
  .action-btn {
    min-height: 42px;

    padding: 11px 20px;

    font-size: 15px;
  }

  .bottom-zone > .action-btn,
  .practice-actions .action-btn,
  .lesson-completion-action .action-btn {
    width: min(100%, 320px);
  }

  .action-btn.btn-play,
  .action-btn.btn-stop {
    min-height: 0;
    padding: 0;
  }
}