.ui-direction-a .icon-button,
.ui-direction-a .mode-button,
.ui-direction-a .join-row button,
.ui-direction-a .waiting-room-card button,
.ui-direction-a .waiting-home-button,
.ui-direction-a .phase-action,
.ui-direction-a .card {
  transition:
    transform var(--ui-duration-fast) var(--ui-ease-out),
    border-color var(--ui-duration-fast) var(--ui-ease-standard),
    background-color var(--ui-duration-fast) var(--ui-ease-standard),
    box-shadow var(--ui-duration-fast) var(--ui-ease-standard),
    opacity var(--ui-duration-fast) var(--ui-ease-standard),
    filter var(--ui-duration-fast) var(--ui-ease-standard);
}

.ui-direction-a .icon-button:active,
.ui-direction-a .join-row button:active,
.ui-direction-a .waiting-room-card button:active,
.ui-direction-a .phase-action:active {
  transform: translateY(1px) scale(0.985);
}

@media (hover: hover) and (pointer: fine) {
  .ui-direction-a .mode-button:hover {
    transform: translateY(-3px);
    border-color: var(--ui-line-brass);
    box-shadow: var(--ui-inset-highlight), var(--ui-shadow-sm);
  }

  .ui-direction-a .card.playable:hover {
    z-index: 40;
    transform: translateY(-17px) scale(1.025) !important;
    border-color: var(--ui-brass-300);
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--ui-brass-300) 48%, transparent),
      0 24px 38px rgba(0, 0, 0, 0.5);
  }
}

.ui-direction-a.card-play-pending .card.playable {
  cursor: wait;
}

.ui-direction-a .connection-state[data-state="connecting"] .connection-dot,
.ui-direction-a .connection-state[data-state="reconnecting"] .connection-dot {
  animation: ui-connection-pulse 1.2s ease-in-out infinite;
}

@keyframes ui-connection-pulse {
  0%,
  100% {
    opacity: 0.58;
    transform: scale(0.88);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-direction-a *,
  .ui-direction-a *::before,
  .ui-direction-a *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .ui-direction-a .card.playable:hover {
    transform: none !important;
  }
}