:root{--coal:#101010;--midnight:#0a1519;--mithril:#bbbbc1;--brass:#d8bd76;--el-dorado:#a27929;--copper:#804a00;--bronze:#5d3724;--runite:#285766;--adamantite:#1d3330;--necronblite:#6e5184;--orichalcum:#5b2a34;--focus-mint:#7fe7e0;--label-ink:#e8e8ec}.metal-btn{cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:0;border-radius:10px;padding:0;display:inline-block;position:relative}.metal-btn__plate{--plate-grad:linear-gradient(135deg, #e6cb85 0%, #d8bd76 40%, #a27929 100%);--sheen:none;--ink:var(--coal);--edge:#502e088c;--hi:#ffecbd8c;--rim-outer:#000000c7;--rim-inner:#fff3;border:1px solid var(--rim-outer);background-image:var(--sheen),var(--plate-grad);background-blend-mode:overlay,normal;color:var(--ink);letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--rim-inner),inset 0 1px 0 var(--hi),inset 0 -1px 0 var(--edge),0 0 0 1px #00000073,0 1px 1px #0009,0 8px 16px -6px #00000073,0 24px 40px -18px #0000008c;border-radius:9px;justify-content:center;align-items:center;padding:.75rem 1.6rem;font:600 14px/1 Inter,system-ui,sans-serif;transition:transform .2s,box-shadow .3s,filter .3s;display:inline-flex;position:relative}.metal-btn__label{z-index:1;text-shadow:0 1px #00000040;position:relative}.metal-btn[data-tier=brass] .metal-btn__plate{--plate-grad:linear-gradient(135deg, #e6cb85 0%, #d8bd76 35%, #a27929 75%, #804a00 100%);--sheen:none;--ink:#1a0e02;--edge:#502e0899;--hi:#ffecbd99}.metal-btn[data-tier=runite] .metal-btn__plate{--plate-grad:linear-gradient(140deg, #6fa5b4 0%, #3e7686 35%, #285766 70%, #15333e 100%);--sheen:radial-gradient(ellipse 140% 80% at 30% 0%, #c8e6f033, transparent 55%);--ink:#eaf4f7;--edge:#0000008c;--hi:#b4dce66b}.metal-btn[data-tier=adamantite] .metal-btn__plate{--plate-grad:linear-gradient(135deg, #4a7269 0%, #2d544a 40%, #1d3330 75%, #0e1f1c 100%);--sheen:radial-gradient(ellipse 100% 60% at 70% 10%, #b4dcc82e, transparent 60%);--ink:#deece6;--edge:#0009;--hi:#a0c8b961}.metal-btn[data-tier=necronblite] .metal-btn__plate{--plate-grad:linear-gradient(135deg, #9a82b8 0%, #7e64a0 35%, #6e5184 70%, #3e2c52 100%);--sheen:radial-gradient(ellipse 120% 70% at 50% 0%, #dcc8f538, transparent 55%);--ink:#f1e9fa;--edge:#14082399;--hi:#dcc8f573}.metal-btn[data-tier=orichalcum] .metal-btn__plate{--plate-grad:linear-gradient(135deg, #9a4a56 0%, #75333f 35%, #5b2a34 70%, #2e141a 100%);--sheen:radial-gradient(ellipse 110% 65% at 25% 5%, #ffc8b438, transparent 55%);--ink:#fce9e7;--edge:#14050899;--hi:#ffc8b96b}.metal-btn:hover:not(:disabled) .metal-btn__plate{filter:brightness(1.06);box-shadow:inset 0 0 0 1px var(--rim-inner),inset 0 1px 0 var(--hi),inset 0 -1px 0 var(--edge),0 0 0 1px #00000073,0 1px 1px #0009,0 10px 22px -6px #00000080,0 30px 56px -18px #0000008c}.metal-btn:active:not(:disabled) .metal-btn__plate{filter:brightness(.97);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rim-inner) 60%,transparent),inset 0 1px color-mix(in srgb,var(--hi) 70%,transparent),inset 0 -1px 0 var(--edge),0 0 0 1px #00000080,0 1px 1px #0009,0 4px 10px -4px #00000080;transform:translateY(1px)}.metal-btn:disabled{cursor:not-allowed}.metal-btn:disabled .metal-btn__plate{filter:saturate(.3)brightness(.6)}.metal-btn:focus-visible,.metal-btn.force-focus{outline:2px solid var(--focus-mint);outline-offset:3px;border-radius:11px}.opal-lab-btn{aspect-ratio:1920/540;background-color:#0000;background-image:var(--opal-default);cursor:pointer;width:360px;color:var(--label-ink);background-position:50%;background-repeat:no-repeat;background-size:contain;border:0;outline:none;padding:0;transition:filter .22s,transform .15s cubic-bezier(.2,.8,.2,1);display:inline-block;position:relative}.opal-lab-btn:before{content:"";clip-path:polygon(4% 0%,96% 0%,100% 35%,100% 65%,96% 100%,4% 100%,0% 65%,0% 35%);mix-blend-mode:screen;opacity:0;pointer-events:none;z-index:1;filter:blur(1px);background:radial-gradient(55% 110% at 12%,#7fe7e0bf,#0000 70%),radial-gradient(70% 120%,#b478e68c,#0000 75%),radial-gradient(55% 110% at 88%,#ff9650bf,#0000 70%),linear-gradient(#ffffff2e,#fff0 35%,#00000026);transition:opacity .24s;position:absolute;inset:2.5% 1.5%}.opal-lab-btn:after{content:"";filter:blur(6px);pointer-events:none;z-index:2;background:radial-gradient(#0000006b,#00000047 45%,#0000 75%);width:70%;height:55%;transition:opacity .18s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.opal-lab-btn:hover:not(:disabled){filter:brightness(1.18)saturate(1.25)contrast(1.05)}.opal-lab-btn:hover:not(:disabled):before{opacity:.85}.opal-lab-btn:active:not(:disabled){filter:brightness(.88)saturate(1.1)contrast(1.05);transform:translateY(1px)}.opal-lab-btn:active:not(:disabled):before{opacity:.5;transition-duration:.1s}.opal-lab-btn:focus-visible{filter:brightness(1.1)saturate(1.15);outline:2px solid var(--focus-mint);outline-offset:4px;border-radius:8px}.opal-lab-btn:focus-visible:before{opacity:.7}.opal-lab-btn:disabled{cursor:not-allowed;filter:grayscale(.7)brightness(.55)}.opal-lab-btn.is-hover{filter:brightness(1.18)saturate(1.25)contrast(1.05)}.opal-lab-btn.is-hover:before{opacity:.85}.opal-lab-btn.is-pressed{filter:brightness(.88)saturate(1.1)contrast(1.05);transform:translateY(1px)}.opal-lab-btn.is-pressed:before{opacity:.5}.opal-lab-btn.is-focus{filter:brightness(1.1)saturate(1.15);outline:2px solid var(--focus-mint);outline-offset:4px}.opal-lab-btn.is-focus:before{opacity:.7}.opal-lab-btn.is-disabled{filter:grayscale(.7)brightness(.55)}.opal-lab-btn__label{z-index:3;letter-spacing:.06em;text-transform:uppercase;color:#bbbbc1;text-shadow:0 1px #000000b3,0 -1px #ffffff1f,0 0 8px #00000059;pointer-events:none;justify-content:center;align-items:center;font:700 clamp(14px,2.6cqw,22px)/1 Inter,system-ui,sans-serif;transition:color .18s,filter .18s,transform .15s cubic-bezier(.2,.8,.2,1),text-shadow .18s;display:flex;position:absolute;inset:0}.opal-lab-btn{container-type:inline-size}.opal-lab-btn:hover:not(:disabled) .opal-lab-btn__label{filter:brightness(1.1)drop-shadow(0 1px #00000080)}.opal-lab-btn:active:not(:disabled) .opal-lab-btn__label{text-shadow:0 -1px #000000b3,0 1px #ffffff1a;transform:translateY(1px)}.opal-lab-btn:disabled .opal-lab-btn__label{filter:grayscale(.6)brightness(.7)}@media(prefers-reduced-motion:reduce){.metal-btn,.metal-btn__plate,.metal-btn__label,.opal-lab-btn,.opal-lab-btn:before,.opal-lab-btn__label{transition:none!important}.metal-btn:active:not(:disabled) .metal-btn__plate,.metal-btn:active:not(:disabled) .metal-btn__label,.opal-lab-btn:active:not(:disabled) .opal-lab-btn__label{transform:none}}
