:root{--volt-hi:var(--ball-600);--focus:#16150F;--btn2-hover:rgba(22,21,15,.06);--line-strong:rgba(22,21,15,.28)}
html[data-theme="dark"]{--volt-hi:var(--ball-500);--focus:#F3F1EA;--btn2-hover:rgba(243,241,234,.08);--line-strong:rgba(243,241,234,.32)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:99px;font-family:inherit;font-weight:600;line-height:1;letter-spacing:var(--ls-t2);
  text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease,
             transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease,gap .2s ease}
.btn-lg{min-height:56px;padding:0 30px;font-size:var(--t4)}
.btn-md{min-height:48px;padding:0 24px;font-size:var(--t5)}
.btn-sm{min-height:40px;padding:0 18px;font-size:var(--t6);gap:7px}

.btn-1{background:var(--volt-surf);color:var(--ink)}
.btn-1:hover{background:var(--volt-hi)}
.btn-2{background:transparent;color:var(--fg);border-color:var(--line-strong)}
.btn-2:hover{border-color:var(--fg);background:var(--btn2-hover)}
.btn-3{background:transparent;color:var(--fg);padding-inline:2px;min-height:34px}
.btn-3 .ar{transition:transform .2s cubic-bezier(.22,1,.36,1)}
.btn-3:hover .ar{transform:translateX(4px)}
.btn-3::after{content:"";position:absolute}

 
.onx .btn-2{color:var(--sand-100);border-color:rgba(243,241,234,.46)}
.onx .btn-2:hover{border-color:var(--sand-100);background:rgba(243,241,234,.11)}
.onx .btn-3{color:var(--sand-100)}

 
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--focus)}
.onx .btn:focus-visible{box-shadow:0 0 0 3px var(--band),0 0 0 6px var(--volt-surf)}
 
.btn:active{transform:scale(.985)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.42;pointer-events:none}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

 
@media(max-width:600px){.btn-lg,.btn-md{width:100%;min-height:54px;font-size:var(--t4)}}

 
@media(pointer:coarse){.btn,.btn-sm,.btn-3{min-height:44px}}


 
.tick,.lcband2,.on-ball{
   
  --bg:var(--volt-field,var(--ball-500)); --fg:var(--iron-800); --acc:var(--iron-800);
  --mut:rgba(22,21,15,.72); --dim:rgba(22,21,15,.55);
  --line:rgba(22,21,15,.16); --line-strong:rgba(22,21,15,.50);
  --btn-fill:var(--iron-800); --btn-label:var(--ball-500);
  --chip-edge:color-mix(in srgb, var(--fg) 24%, transparent);
   
  --offer-fg:var(--clay-700); --offer-surf:var(--clay-700); --offer-label:var(--sand-050);
}
 
.opsec,.on-court{
  --btn-fill:var(--ball-500); --btn-label:var(--iron-800);
}

 
 
.btn{
  --btn-fill-hover:color-mix(in srgb, var(--btn-fill) 82%, var(--btn-label));
   
  --btn-edge:color-mix(in srgb, var(--fg) 52%, transparent);
   
  --btn-wash:color-mix(in srgb, var(--fg) 10%, transparent);
  background:var(--btn-fill)!important; color:var(--btn-label)!important;
  border:0!important; box-shadow:inset 0 0 0 1.6px transparent;
   
  transition:background-color .14s cubic-bezier(.4,0,1,1),
             color .14s cubic-bezier(.4,0,1,1),
             box-shadow .14s cubic-bezier(.4,0,1,1)}
 
.btn:hover{
  background:var(--btn-fill-hover)!important; color:var(--btn-label)!important;
  box-shadow:none;
   
  transition:background-color .38s cubic-bezier(.22,1,.36,1),
             color .38s cubic-bezier(.22,1,.36,1),
             box-shadow .38s cubic-bezier(.22,1,.36,1)}
 
 
.btn-2{background:transparent!important;color:var(--fg)!important;
  border:0!important;box-shadow:inset 0 0 0 1.6px var(--btn-edge);
   
  transition:background-color .14s cubic-bezier(.4,0,1,1),
             color .14s cubic-bezier(.4,0,1,1),
             box-shadow .14s cubic-bezier(.4,0,1,1)}
.btn-2:hover{background:var(--btn-wash)!important;color:var(--fg)!important;
  box-shadow:inset 0 0 0 1.6px var(--fg);
  transition:background-color .38s cubic-bezier(.22,1,.36,1),
             color .38s cubic-bezier(.22,1,.36,1),
             box-shadow .38s cubic-bezier(.22,1,.36,1)}
 
.btn-3{background:transparent!important;color:var(--fg)!important;box-shadow:none!important}
.btn-3:hover{background:transparent!important;color:var(--fg)!important;transform:none}
 
.btn-2[aria-disabled="true"],.btn-2[disabled]{opacity:1;pointer-events:none;
  color:var(--dim)!important;box-shadow:inset 0 0 0 1.6px var(--line)}
 
@media(prefers-reduced-motion:reduce){
  .btn,.btn:hover,.btn-2,.btn-2:hover{transition:none;transform:none}}