/* ════ Raised button style, shared by every solid (filled) button ════
   Same recipe as the home "Start learning free" button: a light-to-base
   gradient over each button's own colour (the colour itself is not
   changed), light on the top edge, a darker bottom edge, a tight contact
   shadow and a soft glow tinted with the button's colour. Pressed: sinks
   1px and the shadow turns inward. Loaded last so it layers on top of
   each button's own rules. Outline, tinted and text buttons are left as
   they are. */
:is(.btn-next,.ov-primary,.ls-done,.pd-timer,.ib-install,.btn-update,.btn-modal-save,
    .btn-add-word,.btn-admin-login,.listen-play,.sxf-continue,.gbtn-m,.gbtn-f,.gbtn-n){
  --btn-glow:color-mix(in srgb,var(--accent) 60%,transparent);
  background-image:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,0));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.2),
    0 1px 2px rgba(0,0,0,.4),0 8px 24px -6px var(--btn-glow);
  transition:transform .08s,box-shadow .08s,background-color .15s;
  -webkit-tap-highlight-color:transparent;
}
/* Glow follows each button's colour */
.gbtn-f{--btn-glow:color-mix(in srgb,var(--fem) 60%,transparent);}
.gbtn-n,.ls-done.is-done,.pd-timer.running{--btn-glow:color-mix(in srgb,#10b981 60%,transparent);}
.sxf-continue{--btn-glow:rgba(0,0,0,.25);}

:is(.btn-next,.ov-primary,.ls-done,.pd-timer,.ib-install,.btn-update,.btn-modal-save,
    .btn-add-word,.btn-admin-login,.listen-play,.sxf-continue,.gbtn-m,.gbtn-f,.gbtn-n):not(:disabled):active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.27);
}
/* Answer buttons: keep the white "this was right" ring; flat when disabled */
.gbtn.hl{box-shadow:0 0 0 3px #fff,inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.2);}
:is(.gbtn-m,.gbtn-f,.gbtn-n):disabled:not(.hl){box-shadow:none;}