/* Shared button styles for the game pages, kept out of each game's own CSS: the Back buttons ("Back to game",
   "Back to matches"...), the Battle/Versus setup Cancel buttons, and Number Connect's best-score chip. Back
   buttons get a frosted chip with the arrow in its own accent disc, which slides left on hover.

   Loaded after each game's own stylesheet and kept apart from it. Each game's CSS still styles these
   buttons the old way (a transparent outline pill, with !important in places), so every rule here is
   prefixed with body:not(#gsBackNone) to outrank those - including Fruit Frenzy's per-difficulty
   colour rules. display is set without !important so the inline display:none that hides some of these
   buttons still applies. */

/* The chip's glass. Plain colours, not --section-background-color - that one is a gradient, which colour-mix
   can't take. */
body { --gs-back-ground: rgba(255, 255, 255, 0.78); --gs-back-ground-hover: rgba(255, 255, 255, 0.96); }
body[data-theme="Dark"] { --gs-back-ground: rgba(255, 255, 255, 0.07); --gs-back-ground-hover: rgba(118, 107, 255, 0.18); }

body:not(#gsBackNone) :is(#backToGameBtn, #backFromHelpBtn, #backFromDailyHighScoresBtn, #backFromActivityBtn, #backFromSpectateBtn, #battleBackBtn, #backFromBattleLeaderboardBtn,
    #backToSecretWordGameBtn, #backFromSecretWordHelpBtn, #secretWordVersusBackBtn,
    #backToShellBreachGameBtn, #backFromShellBreachHelpBtn, #sbVersusBackBtn,
    #ffBackFromHelpBtn, #ffBackFromSpectateBtn) {
    --gs-back-accent: var(--input-button-background-color, #766BFF);
    cursor: pointer; display: inline-flex; align-items: center; gap: 9px; user-select: none; vertical-align: middle;
    margin: 0 0 14px 0; padding: 5px 16px 5px 5px; line-height: 20px; font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
    text-decoration: none !important; color: var(--body-text-color, #34363E) !important;
    border: 1px solid color-mix(in srgb, var(--gs-back-accent) 22%, transparent) !important; border-radius: 999px;
    background: var(--gs-back-ground) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

    /* The arrow disc - replaces the old back.png icon. */
    body:not(#gsBackNone) :is(#backToGameBtn, #backFromHelpBtn, #backFromDailyHighScoresBtn, #backFromActivityBtn, #backFromSpectateBtn, #battleBackBtn, #backFromBattleLeaderboardBtn,
        #backToSecretWordGameBtn, #backFromSecretWordHelpBtn, #secretWordVersusBackBtn,
        #backToShellBreachGameBtn, #backFromShellBreachHelpBtn, #sbVersusBackBtn,
        #ffBackFromHelpBtn, #ffBackFromSpectateBtn)::before {
        content: ""; float: none; flex: none; display: block; width: 26px; height: 26px; margin: 0; border-radius: 50%; filter: none;
        background-color: var(--gs-back-accent);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6M11.5 6.5 6 12l5.5 5.5'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: center; background-size: 15px;
        box-shadow: 0 2px 6px color-mix(in srgb, var(--gs-back-accent) 45%, transparent);
        transition: transform .2s ease;
    }

    body:not(#gsBackNone) :is(#backToGameBtn, #backFromHelpBtn, #backFromDailyHighScoresBtn, #backFromActivityBtn, #backFromSpectateBtn, #battleBackBtn, #backFromBattleLeaderboardBtn,
        #backToSecretWordGameBtn, #backFromSecretWordHelpBtn, #secretWordVersusBackBtn,
        #backToShellBreachGameBtn, #backFromShellBreachHelpBtn, #sbVersusBackBtn,
        #ffBackFromHelpBtn, #ffBackFromSpectateBtn):hover {
        color: var(--body-text-color, #34363E) !important;
        border-color: color-mix(in srgb, var(--gs-back-accent) 45%, transparent) !important;
        background: var(--gs-back-ground-hover) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 22px color-mix(in srgb, var(--gs-back-accent) 22%, transparent) !important;
    }

        body:not(#gsBackNone) :is(#backToGameBtn, #backFromHelpBtn, #backFromDailyHighScoresBtn, #backFromActivityBtn, #backFromSpectateBtn, #battleBackBtn, #backFromBattleLeaderboardBtn,
            #backToSecretWordGameBtn, #backFromSecretWordHelpBtn, #secretWordVersusBackBtn,
            #backToShellBreachGameBtn, #backFromShellBreachHelpBtn, #sbVersusBackBtn,
            #ffBackFromHelpBtn, #ffBackFromSpectateBtn):is(:hover, :active)::before { filter: none; transform: translateX(-3px); }

    body:not(#gsBackNone) :is(#backToGameBtn, #backFromHelpBtn, #backFromDailyHighScoresBtn, #backFromActivityBtn, #backFromSpectateBtn, #battleBackBtn, #backFromBattleLeaderboardBtn,
        #backToSecretWordGameBtn, #backFromSecretWordHelpBtn, #secretWordVersusBackBtn,
        #backToShellBreachGameBtn, #backFromShellBreachHelpBtn, #sbVersusBackBtn,
        #ffBackFromHelpBtn, #ffBackFromSpectateBtn):active { transform: scale(0.96); }

    body:not(#gsBackNone) :is(#backToGameBtn, #backFromHelpBtn, #backFromDailyHighScoresBtn, #backFromActivityBtn, #backFromSpectateBtn, #battleBackBtn, #backFromBattleLeaderboardBtn,
        #backToSecretWordGameBtn, #backFromSecretWordHelpBtn, #secretWordVersusBackBtn,
        #backToShellBreachGameBtn, #backFromShellBreachHelpBtn, #sbVersusBackBtn,
        #ffBackFromHelpBtn, #ffBackFromSpectateBtn):focus-visible { outline: 2px solid var(--gs-back-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    body:not(#gsBackNone) :is(#backToGameBtn, #backFromHelpBtn, #backFromDailyHighScoresBtn, #backFromActivityBtn, #backFromSpectateBtn, #battleBackBtn, #backFromBattleLeaderboardBtn,
        #backToSecretWordGameBtn, #backFromSecretWordHelpBtn, #secretWordVersusBackBtn,
        #backToShellBreachGameBtn, #backFromShellBreachHelpBtn, #sbVersusBackBtn,
        #ffBackFromHelpBtn, #ffBackFromSpectateBtn),
    body:not(#gsBackNone) :is(#backToGameBtn, #backFromHelpBtn, #backFromDailyHighScoresBtn, #backFromActivityBtn, #backFromSpectateBtn, #battleBackBtn, #backFromBattleLeaderboardBtn,
        #backToSecretWordGameBtn, #backFromSecretWordHelpBtn, #secretWordVersusBackBtn,
        #backToShellBreachGameBtn, #backFromShellBreachHelpBtn, #sbVersusBackBtn,
        #ffBackFromHelpBtn, #ffBackFromSpectateBtn)::before { transition: none; }
}

/* ---- Cancel buttons on the Battle / Versus setup panels ----
   Number Connect's and Word Snaps' setup Cancel was bare text (each game's CSS clears its background,
   border and colour with !important). Here it becomes a secondary to the purple Continue beside it: the
   same frosted glass as the Back chips, with an x that turns red on hover. Layout - flex basis and
   padding - stays with the game's own CSS. The doubled :not() outranks those games' (1,2,0) !important rules. */
body:not(#gsBackNone):not(#gsBackNone2) :is(.nm-battle-setup-cancel-btn, .secret-word-versus-setup-cancel-btn) {
    --gs-cancel-red: #E5484D;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; opacity: 1;
    color: var(--body-text-color, #34363E) !important;
    border: 1px solid rgba(128, 128, 128, 0.32) !important;
    background: var(--gs-back-ground) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 14px rgba(0, 0, 0, 0.1) !important;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}

    body:not(#gsBackNone):not(#gsBackNone2) :is(.nm-battle-setup-cancel-btn, .secret-word-versus-setup-cancel-btn)::before {
        content: ""; flex: none; width: 14px; height: 14px; background-color: currentColor; opacity: 0.75;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
        transition: transform .2s ease, opacity .2s ease;
    }

    body:not(#gsBackNone):not(#gsBackNone2) :is(.nm-battle-setup-cancel-btn, .secret-word-versus-setup-cancel-btn):hover {
        color: var(--gs-cancel-red) !important;
        border-color: color-mix(in srgb, var(--gs-cancel-red) 55%, transparent) !important;
        background: var(--gs-back-ground-hover) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 22px color-mix(in srgb, var(--gs-cancel-red) 20%, transparent) !important;
    }

        body:not(#gsBackNone):not(#gsBackNone2) :is(.nm-battle-setup-cancel-btn, .secret-word-versus-setup-cancel-btn):hover::before { opacity: 1; transform: rotate(90deg); }

    body:not(#gsBackNone):not(#gsBackNone2) :is(.nm-battle-setup-cancel-btn, .secret-word-versus-setup-cancel-btn):active { transform: scale(0.97); }

body[data-theme="Dark"]:not(#gsBackNone):not(#gsBackNone2) :is(.nm-battle-setup-cancel-btn, .secret-word-versus-setup-cancel-btn) { --gs-cancel-red: #FF6B70; border-color: rgba(255, 255, 255, 0.18) !important; }
    body[data-theme="Dark"]:not(#gsBackNone):not(#gsBackNone2) :is(.nm-battle-setup-cancel-btn, .secret-word-versus-setup-cancel-btn):hover { background: rgba(255, 107, 112, 0.12) !important; border-color: rgba(255, 107, 112, 0.5) !important; }

@media (prefers-reduced-motion: reduce) {
    body:not(#gsBackNone):not(#gsBackNone2) :is(.nm-battle-setup-cancel-btn, .secret-word-versus-setup-cancel-btn),
    body:not(#gsBackNone):not(#gsBackNone2) :is(.nm-battle-setup-cancel-btn, .secret-word-versus-setup-cancel-btn)::before { transition: none; }
    body:not(#gsBackNone):not(#gsBackNone2) :is(.nm-battle-setup-cancel-btn, .secret-word-versus-setup-cancel-btn):hover::before { transform: none; }
}

/* ---- Number Connect: the best score in the HUD ----
   Tapping the best score (top right, above the board) opens the leaderboard - it stands in for the hidden
   "View High Scores" / "View Scores" links (Compact HUD in numbersMatchup.js) - but it read as a plain
   number. Here it becomes a chip: a "High scores >" label over the trophy and score, mirroring the Score
   label on the left, in the same frosted glass as the Back chips. Daily's streak line sits underneath.
   display is left without !important so the inline display:none for guests and the other mode applies. */
body:not(#gsBackNone) #nmHud :is(#highScore, #dailyHighScore) {
    display: grid; grid-template-columns: auto auto; grid-template-areas: "label label" "icon pts" "sub sub";
    align-items: center; justify-content: end; column-gap: 4px; row-gap: 1px;
    padding: 5px 10px 6px 10px; border-radius: 12px; line-height: 1.15;
    border: 1px solid color-mix(in srgb, var(--input-button-background-color, #766BFF) 30%, transparent);
    background: var(--gs-back-ground);
    -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 14px rgba(0, 0, 0, 0.1);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

    body:not(#gsBackNone) #nmHud :is(#highScore, #dailyHighScore)::before { grid-area: icon; margin: 0; top: 0; }
    body:not(#gsBackNone) #nmHud :is(#highScore, #dailyHighScore) .points { grid-area: pts; }
    body:not(#gsBackNone) #nmHud #dailyHighScoreStreak { grid-area: sub; text-align: right; }
    body:not(#gsBackNone) #nmHud #dailyHighScoreStreak:empty { display: none; }

    /* The label - the accent colour, with a chevron that nudges right on hover. */
    body:not(#gsBackNone) #nmHud :is(#highScore, #dailyHighScore)::after {
        content: "High scores \203A"; grid-area: label; justify-self: end; white-space: nowrap;
        font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
        color: var(--input-button-background-color, #766BFF); transition: transform .2s ease;
    }
    body:not(#gsBackNone) #nmHud #dailyHighScore::after { content: "Leaderboard \203A"; }
    body[data-theme="Dark"]:not(#gsBackNone) #nmHud :is(#highScore, #dailyHighScore)::after { color: #B3A9FF; }

    body:not(#gsBackNone) #nmHud :is(#highScore, #dailyHighScore):hover {
        background: var(--gs-back-ground-hover);
        border-color: color-mix(in srgb, var(--input-button-background-color, #766BFF) 60%, transparent);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 22px rgba(118, 107, 255, 0.25);
    }
        body:not(#gsBackNone) #nmHud :is(#highScore, #dailyHighScore):hover::after { transform: translateX(2px); }
    body:not(#gsBackNone) #nmHud :is(#highScore, #dailyHighScore):active { transform: scale(0.96); }

@media screen and (max-width: 420px) {
    body:not(#gsBackNone) #nmHud :is(#highScore, #dailyHighScore) { padding: 4px 8px 5px 8px; }
        body:not(#gsBackNone) #nmHud :is(#highScore, #dailyHighScore)::after { font-size: 10px; letter-spacing: 0.3px; }
}

@media (prefers-reduced-motion: reduce) {
    body:not(#gsBackNone) #nmHud :is(#highScore, #dailyHighScore),
    body:not(#gsBackNone) #nmHud :is(#highScore, #dailyHighScore)::after { transition: none; }
    body:not(#gsBackNone) #nmHud :is(#highScore, #dailyHighScore):hover::after { transform: none; }
}

/* ---- Title screen option icons ----
   A small line icon ahead of each option under a game's Play button - How to play, High scores /
   Leaderboard, Sound on|off, Music on|off, Quick tour and Live games. Keyed off data-title-action, so the
   markup stays as it is; the sound and music icons follow aria-pressed, which flips along with their
   "on" / "off" text. The icon is a mask
   filled with currentColor, so it takes whatever text colour the game and theme give the option. */
body:not(#gsBackNone) .gs-title-option:is([data-title-action="howto"], [data-title-action="scores"], [data-title-action="sound"], [data-title-action="music"], [data-title-action="tour"], [data-title-action="watch"]) {
    display: inline-flex; align-items: center; gap: 6px;
}
    body:not(#gsBackNone) .gs-title-option:is([data-title-action="howto"], [data-title-action="scores"], [data-title-action="sound"], [data-title-action="music"], [data-title-action="tour"], [data-title-action="watch"])::before {
        content: ""; flex: none; width: 15px; height: 15px; background-color: currentColor;
        -webkit-mask: var(--gs-option-icon) center / contain no-repeat; mask: var(--gs-option-icon) center / contain no-repeat;
        transition: transform .2s ease;
    }
    body:not(#gsBackNone) .gs-title-option:is([data-title-action="howto"], [data-title-action="scores"], [data-title-action="sound"], [data-title-action="music"], [data-title-action="tour"], [data-title-action="watch"]):hover::before { transform: scale(1.12); }

body:not(#gsBackNone) .gs-title-option[data-title-action="howto"] {
    --gs-option-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M9.4 9.3a2.7 2.7 0 0 1 5.2 1c0 1.8-2.6 2.3-2.6 3.9'/%3E%3Cpath d='M12 17.3h.01'/%3E%3C/svg%3E");
}
body:not(#gsBackNone) .gs-title-option[data-title-action="scores"] {
    --gs-option-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v5.5a4 4 0 0 1-8 0z'/%3E%3Cpath d='M8 6.5H5.2a3 3 0 0 0 3.1 4'/%3E%3Cpath d='M16 6.5h2.8a3 3 0 0 1-3.1 4'/%3E%3Cpath d='M12 13.5V17'/%3E%3Cpath d='M8.5 20h7'/%3E%3C/svg%3E");
}
body:not(#gsBackNone) .gs-title-option[data-title-action="sound"] {
    --gs-option-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6'/%3E%3Cpath d='M18.2 6.4a7.6 7.6 0 0 1 0 11.2'/%3E%3C/svg%3E");
}
body:not(#gsBackNone) .gs-title-option[data-title-action="sound"][aria-pressed="false"] {
    --gs-option-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='m16 9.5 5 5'/%3E%3Cpath d='m21 9.5-5 5'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
    body:not(#gsBackNone) .gs-title-option[data-title-action]::before { transition: none; }
    body:not(#gsBackNone) .gs-title-option[data-title-action]:hover::before { transform: none; }
}

body:not(#gsBackNone) .gs-title-option[data-title-action="music"] {
    --gs-option-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17.5V5.5l10-2v12'/%3E%3Ccircle cx='6.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='15.5' r='2.5'/%3E%3C/svg%3E");
}
body:not(#gsBackNone) .gs-title-option[data-title-action="music"][aria-pressed="false"] {
    --gs-option-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17.5V5.5l10-2v12'/%3E%3Ccircle cx='6.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='15.5' r='2.5'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}

/* Quick tour - a compass; Live games (Fruit Frenzy) - a broadcast signal. */
body:not(#gsBackNone) .gs-title-option[data-title-action="tour"] {
    --gs-option-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5z'/%3E%3C/svg%3E");
}
body:not(#gsBackNone) .gs-title-option[data-title-action="watch"] {
    --gs-option-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Cpath d='M8.3 15.7a5.2 5.2 0 0 1 0-7.4'/%3E%3Cpath d='M15.7 8.3a5.2 5.2 0 0 1 0 7.4'/%3E%3Cpath d='M5.4 18.6a9.3 9.3 0 0 1 0-13.2'/%3E%3Cpath d='M18.6 5.4a9.3 9.3 0 0 1 0 13.2'/%3E%3C/svg%3E");
}

/* ---- Dock music button ----
   Games with music (GameShell's Menu music) get a round button at the end of the dock, after a divider -
   the same size and feel as the dock's Home button - so the music can be turned off without going back to
   the title screen. Note icon, struck through when off. */
body:not(#gsBackNone) #gsDock .gs-dock-music {
    flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border-radius: 50%; color: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color .2s ease-in-out, transform .15s ease-in-out, opacity .2s ease-in-out;
}
    body:not(#gsBackNone) #gsDock .gs-dock-music::before {
        content: ""; width: 20px; height: 20px; background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17.5V5.5l10-2v12'/%3E%3Ccircle cx='6.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='15.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17.5V5.5l10-2v12'/%3E%3Ccircle cx='6.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='15.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
    }
    body:not(#gsBackNone) #gsDock .gs-dock-music[aria-pressed="false"] { opacity: 0.6; }
        body:not(#gsBackNone) #gsDock .gs-dock-music[aria-pressed="false"]::before {
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17.5V5.5l10-2v12'/%3E%3Ccircle cx='6.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='15.5' r='2.5'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17.5V5.5l10-2v12'/%3E%3Ccircle cx='6.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='15.5' r='2.5'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") center / contain no-repeat;
        }
    body:not(#gsBackNone) #gsDock .gs-dock-music:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.08); background-color: var(--link-hover-background-color); }
    body:not(#gsBackNone) #gsDock .gs-dock-music:active { transform: scale(0.9); }

@media screen and (max-width: 775px) {
    body:not(#gsBackNone) #gsDock .gs-dock-music { width: 40px; height: 40px; }
}
/* On a phone the dock sits inside the game card, and the music button costs each mode tab about 12px - enough
   to wrap "Casual" and "Versus" onto two lines. Only for a dock that has the button (Shell Breach's has none):
   slightly smaller tab icons and padding, a smaller music button with no divider, and labels kept to one line. */
@media screen and (max-width: 440px) {
    body:not(#gsBackNone) #gsDock.gs-dock-inline:has(.gs-dock-music) .gs-dock-tab { gap: 3px; padding: 0 5px 0 4px; white-space: nowrap; }
        body:not(#gsBackNone) #gsDock.gs-dock-inline:has(.gs-dock-music) .gs-dock-tab img { width: 16px; height: 16px; }
    body:not(#gsBackNone) #gsDock.gs-dock-inline .gs-dock-music { width: 32px; height: 32px; }
        body:not(#gsBackNone) #gsDock.gs-dock-inline .gs-dock-music::before { width: 18px; height: 18px; }
    body:not(#gsBackNone) #gsDock.gs-dock-inline .gs-dock-music-divider { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body:not(#gsBackNone) #gsDock .gs-dock-music { transition: none; }
    body:not(#gsBackNone) #gsDock .gs-dock-music:active { transform: none; }
}

/* ---- App header music button ----
   The app version (body[data-mode="spa"]) swaps the dock for its bottom tab bar on screens 775px and under,
   so the mid-game music switch sits in its header instead - right of the Theme button, in the same round
   chip (spa.css's .themeQuickSelect::before). Not on the title screen, which has its own Music option. */
header .gs-header-music { display: none; }
@media screen and (max-width: 775px) {
    body[data-mode="spa"]:not(.gs-title-showing) header .gs-header-music {
        display: flex; align-items: center; justify-content: center; float: left; position: relative;
        width: 34px; height: 34px; margin: 14px 0 0 2px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
        pointer-events: auto; color: #FFF; background: var(--theme-selector-background-color);
        -webkit-tap-highlight-color: transparent; transition: transform .15s ease-in-out, opacity .2s ease-in-out;
    }
        body[data-mode="spa"] header .gs-header-music::before {
            content: ""; width: 18px; height: 18px; background-color: currentColor;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17.5V5.5l10-2v12'/%3E%3Ccircle cx='6.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='15.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17.5V5.5l10-2v12'/%3E%3Ccircle cx='6.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='15.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
        }
        body[data-mode="spa"] header .gs-header-music[aria-pressed="false"] { opacity: 0.65; }
            body[data-mode="spa"] header .gs-header-music[aria-pressed="false"]::before {
                -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17.5V5.5l10-2v12'/%3E%3Ccircle cx='6.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='15.5' r='2.5'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17.5V5.5l10-2v12'/%3E%3Ccircle cx='6.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='15.5' r='2.5'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") center / contain no-repeat;
            }
        body[data-mode="spa"] header .gs-header-music:active { transform: scale(0.9); }
        body[data-mode="spa"] header .gs-header-music:focus-visible { outline: 2px solid #864cff; outline-offset: 2px; }
}
@media screen and (max-width: 775px) {
    /* Light theme: the chip is light there, and the Theme button's icon dark - the note follows suit. */
    body[data-mode="spa"][data-theme="Default"]:not(.gs-title-showing) header .gs-header-music { color: #34363E; }
}

/* ---- Sound and Music in the game card ----
   Number Connect: #muteBtn is the board's Sound switch ("Sound on" / "Sound off"); #nmMusicBtn beside it is
   the game shell's Music switch (.gs-music-toggle). Word Snaps: #swMusicBtn, the same Music switch, at the
   foot of the game card. The Music buttons take the look numbersMatchup.css gives #muteBtn, and both games
   swap the old note / empty-set characters for line icons - a speaker for sound, a note for music - struck
   through when off. */
body:not(#gsBackNone) :is(#nmMusicBtn, #swMusicBtn) {
    float: right; cursor: pointer; display: inline-block; user-select: none; line-height: 18px;
    color: #34363E; color: var(--body-text-color); padding: 5px 10px; margin: 0 3px; font-size: 14px;
    border-radius: 20px; background-color: transparent; transition: all .2s ease-in-out;
}
    body:not(#gsBackNone) :is(#nmMusicBtn, #swMusicBtn):hover { background-color: rgba(0, 0, 0, 0.1); background-color: var(--link-hover-background-color); box-shadow: rgba(0, 0, 0, 0.4) 0 2px 4px; }
    body:not(#gsBackNone) :is(#nmMusicBtn, #swMusicBtn):active { transform: scale(0.9); }
    body:not(#gsBackNone) :is(#nmMusicBtn, #swMusicBtn)[aria-pressed="false"] { opacity: 0.45; }
body:not(#gsBackNone) :is(#muteBtn, #nmMusicBtn, #swMusicBtn):focus-visible { outline: 2px solid #864cff; outline-offset: 2px; }

body:not(#gsBackNone) :is(#muteBtn, #nmMusicBtn, #swMusicBtn)::before {
    content: ""; display: inline-block; width: 14px; height: 14px; margin: -3px 5px 0 0; vertical-align: middle;
    background-color: currentColor; -webkit-mask: var(--gs-board-icon) center / contain no-repeat; mask: var(--gs-board-icon) center / contain no-repeat;
}
body:not(#gsBackNone) #muteBtn { --gs-board-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6'/%3E%3Cpath d='M18.2 6.4a7.6 7.6 0 0 1 0 11.2'/%3E%3C/svg%3E"); }
body:not(#gsBackNone) #muteBtn.muted { --gs-board-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/%3E%3Cpath d='m16 9.5 5 5'/%3E%3Cpath d='m21 9.5-5 5'/%3E%3C/svg%3E"); }
body:not(#gsBackNone) :is(#nmMusicBtn, #swMusicBtn) { --gs-board-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17.5V5.5l10-2v12'/%3E%3Ccircle cx='6.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='15.5' r='2.5'/%3E%3C/svg%3E"); }
body:not(#gsBackNone) :is(#nmMusicBtn, #swMusicBtn)[aria-pressed="false"] { --gs-board-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17.5V5.5l10-2v12'/%3E%3Ccircle cx='6.5' cy='17.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='15.5' r='2.5'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
    body:not(#gsBackNone) :is(#nmMusicBtn, #swMusicBtn) { transition: none; }
    body:not(#gsBackNone) :is(#nmMusicBtn, #swMusicBtn):active { transform: none; }
}
/* New game, Music and Sound share one row under the board - a little tighter on a phone, so all three fit. */
@media screen and (max-width: 420px) {
    body:not(#gsBackNone) :is(#newGame, #muteBtn, #nmMusicBtn) { padding: 5px 7px; margin-left: 1px; margin-right: 1px; }
}