.metal-button{--button-image:url('button-normal.webp');position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-width:112px;min-height:45px;padding:9px 23px;background:transparent;border:0;color:#e7f2eb;text-shadow:0 2px 3px #000;font-family:'Barlow Condensed',Impact,sans-serif;font-size:18px;font-weight:700;letter-spacing:.07em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:filter .2s,transform .15s}
.metal-button::before{content:'';position:absolute;inset:-7px -3px;z-index:-1;pointer-events:none;background:var(--button-image) center/100% 100% no-repeat}
.metal-button:hover,.metal-button:focus-visible{--button-image:url('button-hover.webp');filter:brightness(1.12);color:#fff}
.metal-button:active{--button-image:url('button-pressed.webp');transform:scale(.985)}
.metal-button:focus-visible{outline:2px solid #97ffcd;outline-offset:8px}
.metal-button:disabled{opacity:.5;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){.metal-button{transition:none}}