/* Shared sculpted gold-and-jade controls for the site and its Arena preview. */
.button,.gold-button{
  --frame-outset:10px;--frame-y:18px;--frame-x:24px;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  gap:13px;min-height:54px;max-width:100%;padding:16px 28px;border:0;border-radius:0;
  background:none;box-shadow:none;overflow:visible;color:#f7dfaa;line-height:1.4;
  text-transform:uppercase;letter-spacing:1px;font-size:10px;font-weight:700;
  text-shadow:0 2px 2px #04160d,0 0 13px #dbb86133;
  transition:filter .2s,transform .2s;
}
.button::before,.gold-button::before{
  content:'';position:absolute;inset:2px 5px;width:auto;height:auto;opacity:1;z-index:-1;
  border:1px solid #b19b5655;pointer-events:none;
  clip-path:polygon(4% 0,96% 0,100% 13%,100% 87%,96% 100%,4% 100%,0 87%,0 13%);
  background:linear-gradient(180deg,#396449,#163e2e 36%,#09241b 70%,#28543d);
  box-shadow:inset 0 1px 3px #b9e0b46b,inset 0 -4px 7px #0008;
}
.button::after,.gold-button::after{
  content:'';position:absolute;inset:calc(-1 * var(--frame-outset));width:auto;height:auto;
  border:var(--frame-y) solid transparent;border-inline-width:var(--frame-x);
  border-image:url("assets/jade-gold-button-frame-ui.webp") 28.439% 13.228% 28.439% 13.228% stretch;
  opacity:1;z-index:1;pointer-events:none;filter:drop-shadow(0 4px 3px #0009);
}
.button-gold::before,.gold-button::before{background:linear-gradient(180deg,#b48f42,#395e35 30%,#183d27 66%,#917c38)}
.button:hover,.gold-button:hover{filter:brightness(1.18);transform:translateY(-2px);box-shadow:none}
.button:active,.gold-button:active{filter:brightness(.96);transform:translateY(1px)}
.button:disabled,.gold-button:disabled{opacity:.58;cursor:default;filter:saturate(.5);transform:none}
.button-small{--frame-outset:5px;--frame-y:12px;--frame-x:15px;min-height:37px;padding:10px 17px;font-size:8px;gap:8px;letter-spacing:.8px}
.hero .button-ornate{--frame-outset:12px;--frame-y:20px;--frame-x:26px;color:#f7dfaa;background:none}
.game-icon-button{position:relative;isolation:isolate;flex-shrink:0;background:linear-gradient(#315d45,#0e2b20);border:1px solid #c8aa65;box-shadow:inset 0 1px 0 #c1e5b344,inset 0 -3px 0 #04180f,0 3px 9px #0007;color:#f4d99d;text-shadow:0 2px 2px #000;border-radius:2px}
.game-icon-button::after{content:'';position:absolute;inset:0;pointer-events:none;border:7px solid transparent;border-inline-width:9px;border-image:url("assets/jade-gold-button-frame-ui.webp") 28.439% 13.228% 28.439% 13.228% stretch;opacity:.85}
.game-icon-button:hover{filter:brightness(1.2)}
.dialog-close{width:38px;height:38px;font-size:24px;right:13px;top:12px;padding:0;display:grid;place-items:center}
.footer-links>button{font-size:8px;padding:9px 16px;color:#f2d69a;min-height:35px;letter-spacing:.4px;white-space:nowrap}
.interest-dialog #interest-delete{display:inline-flex;padding:10px 18px;color:#e6cb93;font-size:8px;letter-spacing:.5px;margin-top:28px;text-transform:uppercase}
.interest-dialog #interest-done{margin-block:8px}
.interest-dialog form .button{margin-top:6px;margin-bottom:8px}
.price-card .button{margin-bottom:4px}
.tier-note{margin-top:22px}
.mobile-copy .button{margin-top:8px}
.mobile-copy .small-note{margin-top:27px}
.closing-banner .button{margin-top:7px}
.champion-tabs button{position:relative;isolation:isolate;min-width:0;border:1px solid #b69a5566;background:linear-gradient(#345139dd,#0e2b1ccc);box-shadow:inset 0 1px 0 #e6d2a14d,inset 0 -4px 0 #03180d,0 5px 14px #0008}
.champion-tabs button::after{content:'';position:absolute;inset:0;pointer-events:none;border:11px solid transparent;border-inline-width:13px;border-image:url("assets/jade-gold-button-frame-ui.webp") 28.439% 13.228% 28.439% 13.228% stretch;opacity:.62;z-index:2}
.champion-tabs button[aria-selected="true"]{background:linear-gradient(#5d7047,#22482e);box-shadow:inset 0 1px 0 #fbe5a56b,0 0 18px #d6b55a3d}
.champion-tabs button[aria-selected="true"]::after{opacity:1}
.champion-tabs button:hover{filter:brightness(1.16)}
.master-dot span{background:radial-gradient(circle at 35% 25%,#416849,#0d271d 75%);border-color:#d3b36b;box-shadow:inset 0 1px 0 #ffecb76b,0 2px 4px #000}
.battle-header button{min-height:29px;padding:6px 12px;font-size:8px;--frame-outset:2px;--frame-y:9px;--frame-x:10px;border:0;border-radius:0;background:none;color:#e8d2a0;box-shadow:none}
.battle-header button[aria-pressed="true"]{color:#ffefbe;border:0;background:none;filter:brightness(1.2)}
.battle-header button[aria-pressed="true"]::before{background:linear-gradient(#7f8c4a,#355e35,#193d27)}
.start-panel .gold-button,.result-overlay .gold-button{font-size:8px;min-height:42px;padding:13px 22px;--frame-outset:7px;--frame-y:14px;--frame-x:18px}
.squad-unit{border-color:#aa8c4f77;box-shadow:inset 0 1px 0 #ddc17a33,0 3px 7px #0008}
.squad-button{background:linear-gradient(130deg,#304f3766,#0b241b);box-shadow:inset 0 1px 0 #c5dc9c21,inset 0 -2px 0 #05170f}
.skill-button{background:linear-gradient(#2f493033,#102b1c);border-top-color:#c0a56655;box-shadow:inset 0 1px 0 #d9c58217;text-shadow:0 1px 3px #000}
@media(max-width:620px){
 .button,.gold-button{padding:15px 23px;font-size:9px;--frame-outset:8px;--frame-y:16px;--frame-x:21px}
 .button-small{min-height:34px;padding:9px 15px;font-size:7px;--frame-outset:4px;--frame-y:11px;--frame-x:13px}
 .hero .button-ornate{--frame-outset:9px;--frame-y:17px;--frame-x:20px}
 .champion-tabs button{padding:12px 6px;min-height:116px}
 .champion-tabs button::after{border-width:9px 11px}
 .footer-links{gap:20px;align-items:center}
 .battle-header button{min-height:26px;padding:5px 9px;font-size:7px;--frame-outset:1px;--frame-y:8px;--frame-x:9px}
 .start-panel .gold-button,.result-overlay .gold-button{font-size:7px;--frame-outset:6px;--frame-y:12px;--frame-x:16px;padding:12px 17px}
}
@media(prefers-reduced-motion:reduce){.button,.gold-button{transition:none}.button:hover,.gold-button:hover{transform:none}}