/* Shared action buttons. Use app-button plus a color variant on buttons or links. */
:root {
  --button-corner-radius: 1rem;
  --button-height: 2.5rem;
  --button-font-size: .825rem;
}

.app-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--button-height);
  max-width: 100%;
  padding: .5rem 1.2rem;
  border: 1px solid var(--button-border, #3f3f46);
  border-radius: var(--button-corner-radius);
  background: var(--button-background, #202023);
  color: var(--button-color, #f4f4f5);
  font-family: inherit;
  font-size: var(--button-font-size);
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color .18s ease, border-color .18s ease, filter .18s ease, transform .18s ease;
}

.app-button--primary {
  --button-background: #c7cf4a;
  --button-color: #000;
  --button-border: transparent;
}

.app-button--secondary {
  --button-background: #202023;
  --button-color: #f4f4f5;
  --button-border: #3f3f46;
}

.app-button--outline {
  --button-background: transparent;
  --button-color: #c7cf4a;
  --button-border: #7f8128;
}

.app-button--danger {
  --button-background: #ef4444;
  --button-color: #fff;
  --button-border: transparent;
}

.app-button--danger-outline {
  --button-background: transparent;
  --button-color: #fca5a5;
  --button-border: #ef444466;
}

.app-button--warning {
  --button-background: #f59e0b;
  --button-color: #000;
  --button-border: transparent;
}

.app-button--ghost {
  --button-background: transparent;
  --button-color: #a1a1aa;
  --button-border: transparent;
}

.app-button--icon {
  width: var(--button-height);
  padding: .5rem;
  flex-shrink: 0;
}

/* Candidate selection rows keep room for their portrait and player details. */
.app-button--choice {
  justify-content: flex-start;
  text-align: left;
}

.app-button:hover:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(.96);
  transform: translateY(-1px);
}

.app-button--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.app-button--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background: #2e2e32;
  color: #fff;
}

.app-button--outline:hover:not(:disabled):not([aria-disabled="true"]) {
  background: #c7cf4a;
  color: #000;
}

.app-button--danger-outline:hover:not(:disabled):not([aria-disabled="true"]) {
  background: #ef44441a;
}

.app-button--choice:hover:not(:disabled):not([aria-disabled="true"]) {
  background: #171717;
  color: #fff;
  border-color: #7f8128;
}

.app-button:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(0);
}

.app-button:focus-visible {
  outline: 2px solid #c7cf4a;
  outline-offset: 3px;
}

.app-button:disabled,
.app-button[aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
}

.app-button[aria-busy="true"] {
  cursor: wait;
}

/* Keep conditional controls hidden despite the shared inline-flex display. */
.app-button.hidden,
.app-button[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .app-button { transition: none; }
  .app-button:hover:not(:disabled):not([aria-disabled="true"]),
  .app-button:active:not(:disabled):not([aria-disabled="true"]) { transform: none; }
}

@media (forced-colors: active) {
  .app-button { border-color: ButtonText; }
  .app-button:focus-visible { outline-color: Highlight; }
}