.tzq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tzq-spacing-2);
  padding: var(--tzq-btn-padding-md);
  font-family: var(--tzq-font-heading);
  font-size: var(--tzq-text-base);
  font-weight: var(--tzq-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tzq-tracking-wide);
  text-decoration: none;
  line-height: var(--tzq-leading-none);
  background: var(--tzq-gradient-primary);
  color: var(--tzq-text-inverse);
  border: 1px solid var(--tzq-primary-light);
  border-radius: var(--tzq-radius-md);
  box-shadow: var(--tzq-shadow-primary);
  cursor: pointer;
  user-select: none;
  transition: var(--tzq-transition-all);
  position: relative;
  overflow: hidden;
  min-height: var(--tzq-btn-min-height);
  min-width: var(--tzq-btn-min-width);
}
.tzq-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: var(--tzq-radius-md);
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition:
    width 0.6s,
    height 0.6s;
}
.tzq-btn:active::after {
  width: 300px;
  height: 300px;
}
.tzq-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
}
.tzq-btn:hover::before {
  left: 100%;
}
.tzq-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--tzq-shadow-primary-lg);
  text-decoration: none;
}
.tzq-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--tzq-shadow-md);
}
.tzq-btn:focus {
  outline: none;
  box-shadow: var(--tzq-shadow-primary-lg), var(--tzq-focus-ring);
}
.tzq-btn:disabled,
.tzq-btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}
.tzq-btn--primary {
  background: var(--tzq-gradient-primary);
  box-shadow: var(--tzq-shadow-primary);
}
.tzq-btn--primary-modern {
  display: inline-flex;
  align-items: center;
  gap: var(--tzq-spacing-sm);
  padding: var(--tzq-spacing-md) var(--tzq-spacing-2xl);
  border-radius: var(--tzq-radius-md);
  font-weight: 700;
  box-shadow: 0 4px 12px var(--tzq-primary-rgba-25);
  transition: all 0.2s ease;
}
.tzq-btn--primary-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--tzq-primary-rgba-35);
}
.tzq-btn--primary-solid {
  background: var(--theme-primary, var(--tzq-primary));
  box-shadow: 0 4px 12px
    color-mix(
      in srgb,
      var(--theme-primary, var(--tzq-primary)) 30%,
      transparent
    );
}
.tzq-btn--secondary {
  background: var(--tzq-gradient-secondary);
  box-shadow: var(--tzq-shadow-secondary);
}
.tzq-btn--accent {
  background: var(--tzq-gradient-accent);
  color: var(--tzq-text-primary);
  box-shadow: var(--tzq-shadow-accent);
}
.tzq-btn--success {
  background: var(--tzq-gradient-success);
  box-shadow: var(--tzq-shadow-primary);
}
.tzq-btn--error,
.tzq-btn--danger {
  background: var(--tzq-gradient-error);
  box-shadow: var(--tzq-shadow-error);
}
.tzq-btn--danger:hover {
  background: linear-gradient(135deg, var(--tzq-error-dark), var(--tzq-error));
  box-shadow: var(--tzq-shadow-error-lg);
}
.tzq-btn--hero {
  background: var(--tzq-gradient-primary);
  box-shadow: var(--tzq-shadow-md);
  padding: var(--tzq-spacing-md) var(--tzq-spacing-xl);
  font-size: var(--tzq-text-sm);
  font-weight: 700;
}
.tzq-btn--warning {
  background: var(--tzq-gradient-warning);
  color: var(--tzq-text-primary);
  box-shadow: var(--tzq-shadow-warning);
}
.tzq-btn--outline {
  background: transparent;
  border-color: var(--tzq-primary);
  color: var(--tzq-primary);
  box-shadow: none;
}
.tzq-btn--outline:hover {
  background: var(--tzq-primary);
  color: var(--tzq-text-inverse);
  box-shadow: var(--tzq-shadow-primary);
}
.tzq-btn--outline-secondary {
  border-color: var(--tzq-secondary);
  color: var(--tzq-secondary);
}
.tzq-btn--outline-secondary:hover {
  background: var(--tzq-secondary);
  color: var(--tzq-text-inverse);
}
.tzq-btn--ghost {
  background: transparent;
  border: 1px solid var(--tzq-primary-light);
  box-shadow: none;
  color: var(--tzq-primary);
}
.tzq-btn--ghost:hover {
  background: var(--tzq-bg-blue-light);
}
.tzq-btn--pinterest {
  background: #e60023;
  color: #fff;
  border-color: #e60023;
  box-shadow: 0 4px 12px rgba(230, 0, 35, 0.25);
  text-transform: none;
  font-weight: 600;
}
.tzq-btn--pinterest:hover {
  background: #bd081c;
  border-color: #bd081c;
  box-shadow: 0 6px 16px rgba(230, 0, 35, 0.4);
  color: #fff;
}
.tzq-btn--light {
  background: var(--tzq-bg-light);
  color: var(--tzq-text-primary);
  box-shadow: var(--tzq-shadow-sm);
}
.tzq-btn--light:hover {
  background: var(--tzq-bg-light-hover);
  box-shadow: var(--tzq-shadow-md);
}
.tzq-btn--retry:hover,
.tzq-btn--restart:hover,
.tzq-btn--new-game:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--tzq-primary-rgba-40);
}
.tzq-btn--save,
.tzq-btn--save-score,
.tzq-btn--next-level,
.tzq-btn--continue {
  padding: var(--tzq-spacing-4) var(--tzq-spacing-12);
  font-size: var(--tzq-text-lg);
  font-weight: 700;
  color: white;
  background: var(--tzq-gradient-success);
  box-shadow: 0 4px 12px var(--tzq-success-rgba-30);
}
.tzq-btn--save:disabled,
.tzq-btn--save-score:disabled {
  background: var(--tzq-bg-secondary);
  opacity: 0.6;
  box-shadow: var(--tzq-shadow-black-md);
  cursor: not-allowed;
}
.tzq-btn--save:hover,
.tzq-btn--save-score:hover,
.tzq-btn--next-level:hover,
.tzq-btn--continue:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--tzq-success-rgba-40);
}
.tzq-btn--game {
  padding: var(--tzq-spacing-3-5) var(--tzq-spacing-8);
  font-size: var(--tzq-text-base);
  font-weight: 700;
  border: 1px solid var(--tzq-primary-light);
  border-radius: var(--tzq-radius-md);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.tzq-btn--game::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: var(--tzq-radius-md);
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition:
    width 0.6s,
    height 0.6s;
}
.tzq-btn--game:hover::before {
  width: 300px;
  height: 300px;
}
.tzq-btn--game:hover {
  transform: translateY(-2px);
  box-shadow: var(--tzq-shadow-black-lg-alt);
}
.tzq-btn--game:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}
.tzq-btn--game-secondary {
  color: var(--tzq-primary);
  background: transparent;
  border: 1px solid var(--tzq-primary-light);
  box-shadow: none;
}
.tzq-btn--game-secondary:hover {
  background: var(--tzq-primary);
  color: white;
}
.tzq-btn--sm {
  padding: var(--tzq-btn-padding-sm);
  font-size: var(--tzq-text-sm);
}
.tzq-btn--lg {
  padding: var(--tzq-btn-padding-lg);
  font-size: var(--tzq-text-lg);
}
.tzq-btn--block {
  width: 100%;
  display: flex;
}
@keyframes btn-pulse {
  0%,
  100% {
    box-shadow: 0 4px 12px var(--tzq-primary-rgba-30);
  }
  50% {
    box-shadow: 0 4px 20px var(--tzq-primary-rgba-50);
  }
}
.tzq-btn--pulse {
  animation: btn-pulse 2s ease-in-out infinite;
}
.tzq-btn--loading {
  position: relative;
  pointer-events: none;
}
.tzq-btn--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--tzq-primary-light);
  border-top-color: transparent;
  border-radius: var(--tzq-radius-md);
  animation: spin 0.8s linear infinite;
}
.tzq-btn--start-game,
.tzq-start-btn {
  padding: var(--tzq-spacing-4) var(--tzq-spacing-12);
  font-size: var(--tzq-text-lg);
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--tzq-gradient-primary);
  color: white;
  box-shadow:
    0 4px 12px var(--tzq-primary-rgba-30),
    0 0 0 0 var(--tzq-primary-rgba-50);
  margin-bottom: var(--tzq-spacing-lg);
  position: relative;
  overflow: hidden;
}
.tzq-btn--start-game::before,
.tzq-start-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: var(--tzq-radius-md);
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition:
    width 0.6s,
    height 0.6s;
}
.tzq-btn--start-game:hover::before,
.tzq-start-btn:hover::before {
  width: 300px;
  height: 300px;
}
.tzq-btn--start-game:hover,
.tzq-start-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px var(--tzq-primary-rgba-40),
    0 0 0 4px var(--tzq-primary-rgba-10);
}
.tzq-btn--xl {
  padding: var(--tzq-spacing-6) var(--tzq-spacing-12);
  font-size: var(--tzq-text-xl);
}

.tzq-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--tzq-icon-sm);
}
.tzq-btn--primary .tzq-btn__icon {
  display: none;
}
.tzq-btn__text {
  display: inline;
}