:root {
  --metal-100: #e6e8ea;   
  --metal-200: #d9dcde;   
  --metal-300: #c2c6c8;   
  --metal-500: #96999c;   
  --metal-700: #606568;   
  --metal-800: #373c3e;   
  --metal-900: #1b2022;   
  --metal-950: #121517;   

  
  --metal-silver: linear-gradient(178deg,
    var(--metal-500) 0%, var(--metal-300) 12%, var(--metal-200) 30%, var(--metal-100) 46%,
    var(--metal-300) 62%, var(--metal-500) 80%, var(--metal-700) 92%, var(--metal-300) 100%);
  
  --metal-black: linear-gradient(178deg,
    var(--metal-700) 0%, var(--metal-800) 10%, var(--metal-900) 45%, var(--metal-950) 80%, var(--metal-800) 100%);
  
  --metal-brush: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.04) 1px 2px);
}

.btn--silver, .btn--black {
  position: relative;
  background-blend-mode: overlay, normal;
  border: 1px solid var(--metal-700);
  text-shadow: none;
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn--silver {
  background: var(--metal-brush), var(--metal-silver);
  color: var(--metal-900);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.18);
}
.btn--black {
  background: var(--metal-brush), var(--metal-black);
  color: var(--metal-200);
  border-color: var(--metal-500);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.28);
}
.btn--silver:hover { background: var(--metal-brush), var(--metal-silver); color: var(--metal-900); filter: brightness(1.08); transform: translateY(-1px); }
.btn--black:hover { background: var(--metal-brush), var(--metal-black); color: var(--metal-200); filter: brightness(1.08); transform: translateY(-1px); }
.btn--silver:active, .btn--black:active { filter: brightness(.94); transform: translateY(0); }
.btn--silver:focus-visible, .btn--black:focus-visible { outline: 2px solid var(--metal-500); outline-offset: 3px; }

.btn--chrome-tex, .btn--chrome {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 4px rgba(0,0,0,.8), 0 0 1px rgba(0,0,0,1);   
  border: 1px solid var(--metal-800);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.35);
  transition: filter .18s ease, transform .18s ease;
}
.btn--chrome-tex { background: url("../img/ui/chrome-w-dark.jpg") center / cover no-repeat; }
.btn--chrome {
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 18%, rgba(0,0,0,.62) 34%, rgba(0,0,0,.66) 66%, rgba(0,0,0,0) 84%),   
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 26%, rgba(0,0,0,.25) 60%, rgba(255,255,255,.22) 100%),
    linear-gradient(108deg, #0f1214 0%, #1c2123 20%, #3a3f42 30%, #b4b8bb 40%, #c9cdd0 44%, #8a8f92 50%, #23282a 60%, #0f1214 72%, #34393c 86%, #a9adb0 95%, #5a5f62 100%);
}
.btn--chrome-tex:hover, .btn--chrome:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn--chrome-tex:active, .btn--chrome:active { filter: brightness(.95); transform: translateY(0); }
.btn--chrome-tex:focus-visible, .btn--chrome:focus-visible { outline: 2px solid var(--metal-500); outline-offset: 3px; }

.btn--gold {
  color: #1f1608;
  text-shadow: 0 1px 0 rgba(255, 240, 200, .55);
  border: 1px solid #8a5f0c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.45), 0 2px 8px rgba(120, 80, 0, .3);
  background:
    linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 28%, rgba(0,0,0,.18) 62%, rgba(255,255,255,.25) 100%),
    linear-gradient(108deg, #7a520a 0%, #a97314 20%, #d7981c 30%, #f7d67a 40%, #fbe7a6 44%, #e6b13a 50%, #a06d12 60%, #7a520a 72%, #c48a1c 86%, #f1c85f 95%, #b07a15 100%);
  transition: filter .18s ease, transform .18s ease;
}
.btn--gold:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn--gold:active { filter: brightness(.95); transform: translateY(0); }
.btn--gold:focus-visible { outline: 2px solid #b9841a; outline-offset: 3px; }

.btn--dark {
  color: #fff;
  background: linear-gradient(180deg, #3b322a 0%, #241d18 55%, #1a1411 100%);
  border: 1px solid #15100d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.18);
  transition: filter .18s ease, transform .18s ease;
}
.btn--dark:hover { filter: brightness(1.15); transform: translateY(-1px); color: #fff; background: linear-gradient(180deg, #3b322a 0%, #241d18 55%, #1a1411 100%); }
.btn--dark:active { filter: brightness(.95); transform: translateY(0); }
.btn--dark:focus-visible { outline: 2px solid #6b5a48; outline-offset: 3px; }