/* ==========================================================================
   MOBILE PLAY BUTTONS: ICON-ONLY
   ==========================================================================
   Standalone stylesheet that collapses every chord/scale/sound "▶ Play"
   button down to just the ▶ icon on mobile, to save horizontal space in
   already-cramped control rows. Separate from every other mobile file
   and every desktop file on purpose — this only touches the play
   buttons listed below.

   Loaded only at mobile widths via the <link media="(max-width: 768px)">
   attribute in each page's <head>. The "Play" text itself lives in a
   <span class="btn-label-text"> inside each button so it can be hidden
   here without touching the ▶ character; the full label is preserved
   for screen readers via aria-label.
   ========================================================================== */

@media (max-width: 768px) {
    #scale-play-btn,
    #chordlib-play-btn,
    #capo-play-btn,
    #bass-play-btn,
    #keyboard-play-btn,
    #cpb-play-btn,
    #progression-play-btn {
        gap: 0;
        padding-left: 10px;
        padding-right: 10px;
        width: 38px;
        min-width: 38px;
        justify-content: center;
    }

    #scale-play-btn .btn-label-text,
    #chordlib-play-btn .btn-label-text,
    #capo-play-btn .btn-label-text,
    #bass-play-btn .btn-label-text,
    #keyboard-play-btn .btn-label-text,
    #cpb-play-btn .btn-label-text,
    #progression-play-btn .btn-label-text {
        display: none;
    }
}