/* SPAGhetti sticker UI, shared across every page.
   Bold ink outline (drawn as a box-shadow ring so it never resizes the button),
   a hard offset shadow, and a press-down on tap. Matches the thick-outline art.

   Loaded AFTER each page's inline <style>, so single-class rules here win by source
   order. Two-class state rules (.pod.right, .bandbtn.on, .lvl.locked) keep a higher
   specificity, so selected/correct/locked feedback is preserved. */

.mbtn, .mx, .rbtn, .btn, .lvl, .bandbtn, .pod, .hearbtn,
.serve, .hear, .peek, .end {
  box-shadow: 0 0 0 3px #3A1C0F, 4px 4px 0 #3A1C0F;
  transition: transform .07s ease, box-shadow .07s ease;
}

.mbtn:active, .mx:active, .rbtn:active, .btn:active,
.bandbtn:active, .pod:active, .hearbtn:active, .lvl:active,
.serve:active, .hear:active, .peek:active, .end:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 3px #3A1C0F, 1px 1px 0 #3A1C0F;
}

/* Pop-up cards float above the world as a sticker card. */
.modal {
  box-shadow: 0 0 0 3px #3A1C0F, 8px 9px 0 #3A1C0F;
}

@media (prefers-reduced-motion: reduce) {
  .mbtn:active, .mx:active, .rbtn:active, .btn:active,
  .bandbtn:active, .pod:active, .hearbtn:active, .lvl:active { transform: none; }
}