/*
 * Единая шкала кнопок игрового интерфейса.
 * Desktop — базовые значения; далее только два осознанных адаптивных режима.
 */

.primary-button.cta-l,
.coin-button.cta-l,
.bar-progress button.cta-l {
  min-height: 52px !important;
  font-size: var(--type-button-lg, 17px) !important;
}

.primary-button.cta-m,
.coin-button.cta-m,
.bar-reward-card button.cta-m,
.story-image-viewer .primary-button.cta-m {
  min-height: 48px !important;
  font-size: var(--type-button-md, 16px) !important;
}

.primary-button.cta-s,
.coin-cancel-btn.cta-s,
.bar-reward-card .bar-reward-dev-link.cta-s {
  min-height: 40px !important;
  font-size: var(--type-button-sm, 14px) !important;
}

.game-number-action .primary-button.cta-m {
  height: auto !important;
  min-height: 48px !important;
}

.quiz-option.choice-button,
.swap-modal-actions .primary-button.choice-button,
.cocktail-choice.choice-button {
  min-height: 48px;
  font-size: var(--type-button-md, 16px);
}

.cocktail-choice.choice-button .cocktail-choice-text strong {
  font-size: var(--type-button-md, 16px);
}

.ingredient-card.tile-button .ingredient-name {
  font-size: 11px;
}

@media (max-width: 767px) and (orientation: portrait) {
  .primary-button.cta-l,
  .coin-button.cta-l,
  .bar-progress button.cta-l {
    min-height: 48px !important;
    font-size: var(--type-button-lg, 16px) !important;
  }

  .primary-button.cta-m,
  .coin-button.cta-m,
  .bar-reward-card button.cta-m,
  .story-image-viewer .primary-button.cta-m {
    min-height: 44px !important;
    font-size: var(--type-button-md, 15px) !important;
  }

  .primary-button.cta-s,
  .coin-cancel-btn.cta-s,
  .bar-reward-card .bar-reward-dev-link.cta-s {
    min-height: 40px !important;
    font-size: var(--type-button-sm, 14px) !important;
  }

  .game-number-action .primary-button.cta-m {
    min-height: 44px !important;
  }

  .quiz-option.choice-button,
  .swap-modal-actions .primary-button.choice-button,
  .cocktail-choice.choice-button {
    min-height: 44px;
    font-size: var(--type-button-md, 15px);
  }

  .cocktail-choice.choice-button .cocktail-choice-text strong {
    font-size: var(--type-button-md, 15px);
  }

  .ingredient-card.tile-button .ingredient-name {
    font-size: 10px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .primary-button.cta-l,
  .coin-button.cta-l,
  .bar-progress button.cta-l {
    min-height: 36px !important;
    font-size: var(--type-button-lg, 13px) !important;
  }

  .primary-button.cta-m,
  .coin-button.cta-m,
  .bar-reward-card button.cta-m,
  .story-image-viewer .primary-button.cta-m {
    min-height: 36px !important;
    font-size: var(--type-button-md, 13px) !important;
  }

  .primary-button.cta-s,
  .coin-cancel-btn.cta-s,
  .bar-reward-card .bar-reward-dev-link.cta-s {
    min-height: 32px !important;
    font-size: var(--type-button-sm, 12px) !important;
  }

  .game-number-action .primary-button.cta-m {
    min-height: 36px !important;
  }

  .quiz-option.choice-button,
  .swap-modal-actions .primary-button.choice-button,
  .cocktail-choice.choice-button {
    min-height: 32px;
    font-size: var(--type-button-sm, 12px);
  }

  .cocktail-choice.choice-button .cocktail-choice-text strong {
    font-size: var(--type-button-sm, 12px);
  }

  .cocktail-shelf:has(.ingredient-card.tile-button) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .ingredient-card.tile-button .ingredient-name {
    font-size: 9px;
  }
}