/* components.buttons.css
 * Abstract button styling away from legacy .btn classes.
 */
:root {
  --btn-font-family: 'Bangers', cursive;
  --btn-radius: 8px;
  --btn-font-size: .8rem;
  --btn-spacing-x: 14px;
  --btn-spacing-y: 8px;
  --btn-primary-bg: linear-gradient(145deg,#ffb347,#ff8300);
  --btn-primary-color: #111;
  --btn-primary-border: 1px solid #ff9d1a;
  --btn-secondary-bg: linear-gradient(145deg,#3a4b63,#222d3a);
  --btn-secondary-color: #f0f0f0;
  --btn-secondary-border: 1px solid #445469;
  --btn-warning-bg: linear-gradient(145deg,#ff5757,#cc1717);
  --btn-warning-color: #fff;
  --btn-warning-border: 1px solid #d22;
  --btn-disabled-opacity: .45;
  --btn-transition: 160ms ease;
  --btn-shadow: 0 2px 6px -2px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
}

.k-btn { font-family:var(--btn-font-family); font-size:var(--btn-font-size); letter-spacing:1px; padding:var(--btn-spacing-y) var(--btn-spacing-x); border-radius:var(--btn-radius); font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:.35rem; line-height:1; cursor:pointer; border:1px solid transparent; background:#444; color:#eee; box-shadow:var(--btn-shadow); transition:background var(--btn-transition), transform var(--btn-transition), box-shadow var(--btn-transition); text-transform:uppercase; }
.k-btn:focus-visible { outline:2px solid #14161c; outline-offset:2px; box-shadow:0 0 0 4px rgba(255,255,255,.15); }
.k-btn:active:not([disabled]) { transform:translateY(1px); }
.k-btn[disabled] { opacity:var(--btn-disabled-opacity); cursor:not-allowed; pointer-events:none; }

.k-btn--primary { background:var(--btn-primary-bg); color:var(--btn-primary-color); border:var(--btn-primary-border); }
.k-btn--primary:hover:not([disabled]) { filter:brightness(1.05); }
.k-btn--primary[disabled] { opacity:0.6; }

.k-btn--secondary { background:var(--btn-secondary-bg); color:var(--btn-secondary-color); border:var(--btn-secondary-border); }
.k-btn--secondary:hover:not([disabled]) { filter:brightness(1.08); }
.k-btn--secondary[disabled] { opacity:0.5; }

.k-btn--warning { background:var(--btn-warning-bg); color:var(--btn-warning-color); border:var(--btn-warning-border); }
.k-btn--warning:hover:not([disabled]) { filter:brightness(1.05); }

.k-btn--small { --btn-font-size:.65rem; --btn-spacing-y:6px; --btn-spacing-x:10px; }

/* Accept Dice Results Glow - appears after 5 seconds to guide user */
.k-btn.accept-glow {
  animation: acceptButtonGlow 2s ease-in-out infinite;
  position: relative;
  z-index: 10;
}

@keyframes acceptButtonGlow {
  0%, 100% {
    box-shadow: 
      0 2px 6px -2px rgba(0,0,0,.55), 
      0 0 0 1px rgba(255,255,255,.06) inset,
      0 0 15px rgba(255, 179, 71, 0.6),
      0 0 30px rgba(255, 179, 71, 0.4);
    filter: brightness(1.1);
  }
  50% {
    box-shadow: 
      0 2px 6px -2px rgba(0,0,0,.55), 
      0 0 0 1px rgba(255,255,255,.06) inset,
      0 0 25px rgba(255, 179, 71, 0.9),
      0 0 50px rgba(255, 179, 71, 0.6);
    filter: brightness(1.3);
    transform: scale(1.15);
  }
}

/* Dim other buttons when Accept is glowing */
.k-btn:not(.accept-glow)[disabled] {
  opacity: 0.25 !important;
  filter: brightness(0.6);
}