/* The Button component (Shaun, 2026-10-13: "Every button uses our Button component"). Every new button on every page
   is an <a> or <button> with .mk-btn plus one variant. Built from docs/STYLE-GUIDE.md: colours from assets/tokens.css,
   spacing from the --muck-space-* scale. Load it after tokens.css.

     <a class="mk-btn mk-btn--primary" href="...">Play now <span aria-hidden="true">↗</span></a>
     <button type="button" class="mk-btn mk-btn--secondary">Cancel</button>

   Variants: --primary (gold, dark ink, one per view), --secondary (grey), --ghost (transparent, a soft gold outline: the
   quieter partner of a primary, e.g. the homepage's How to Play), --danger (red outline: delete, leave, cancel a
   membership). Size: default 44px tall, --sm 40px (the touch minimum) for
   dense rows. --block fills its container. A trailing glyph goes in a <span aria-hidden="true">. */
.mk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--muck-space-3);
  min-height: 44px; padding: var(--muck-space-3) var(--muck-space-5);
  border: 1px solid transparent; border-radius: var(--muck-radius-btn);
  font: 800 14px/1.2 var(--muck-font); letter-spacing: -.01em; text-align: center; text-decoration: none;
  cursor: pointer; transition: background var(--muck-dur-fast), border-color var(--muck-dur-fast), color var(--muck-dur-fast), transform var(--muck-dur-fast);
}
.mk-btn > span { color: inherit; }
.mk-btn:focus-visible { outline: 2px solid var(--muck-gold); outline-offset: 2px; }
.mk-btn:disabled, .mk-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.mk-btn--primary { background: var(--muck-gold-cta); color: var(--muck-gold-ink); }
.mk-btn--primary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--muck-gold-cta-hover); border-color: var(--muck-gold-cta-hover-line); transform: translateY(-1px); }

.mk-btn--secondary { background: var(--muck-surface-3); border-color: var(--muck-line-strong); color: var(--muck-text); }
.mk-btn--secondary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--muck-surface-2); border-color: var(--muck-gold-muted); }

.mk-btn--ghost { background: transparent; border-color: color-mix(in srgb, var(--muck-gold-muted) 70%, transparent); color: var(--muck-text); }
.mk-btn--ghost:not(:disabled):not([aria-disabled="true"]):hover { border-color: var(--muck-gold); background: color-mix(in srgb, var(--muck-gold) 8%, transparent); }

.mk-btn--sm { min-height: 40px; padding: var(--muck-space-2) var(--muck-space-4); font-size: 13px; }
.mk-btn--block { display: flex; width: 100%; }

.mk-btn--danger { background: var(--muck-surface-3); border-color: var(--muck-red); color: var(--muck-red); }
.mk-btn--danger:not(:disabled):not([aria-disabled="true"]):hover { background: var(--muck-red); color: var(--muck-text); }

@media (prefers-reduced-motion: reduce) { .mk-btn { transition: none; } .mk-btn:hover { transform: none; } }