/* CyberForge Arcade — Menu button visual fix
 *
 * Resolves two stacked issues on the .app-menu-button:
 *
 *   1. When the side panel opens, the existing rule
 *        .app-menu-button.active .app-menu-button-text { opacity: 0; }
 *      made the "Menu" label completely disappear. We override it back to
 *      opacity:1 — the bars-to-X icon morph already communicates state, so
 *      the label staying readable is the right behavior.
 *
 *   2. On some Android browser skins, tapping the button triggers a
 *      translucent default focus / tap-highlight rectangle that reads as
 *      "the box filled in". We force a transparent background across all
 *      interaction states and turn off the WebKit tap-highlight, while
 *      preserving a subtle keyboard `:focus-visible` outline.
 *
 * Loaded last so it wins without `!important` arms races.
 */

.app-menu-button.active .app-menu-button-text {
    opacity: 1;
}

.app-menu-button,
.app-menu-button:hover,
.app-menu-button:focus,
.app-menu-button:focus-visible,
.app-menu-button:active {
    background: none;
    background-color: transparent;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

/* Keyboard focus only: keep an accessible outline. */
.app-menu-button:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
}

/* Touch / mouse focus (no keyboard navigation): no outline so the button
   doesn't appear to "fill in" after a tap. */
.app-menu-button:focus:not(:focus-visible) {
    outline: none;
}

/* Make sure the inner icon bars and label always reflect the current
   theme text color, even after the parent loses focus, so a stale
   browser hover state can't leave them mismatched against the theme. */
.app-menu-button .app-menu-button-icon span {
    background-color: var(--text);
}

.app-menu-button .app-menu-button-text {
    color: var(--text);
}

/* -----------------------------------------------------------------------
 * Defeat the generic `button.gamepad-focused` fill rule from styles.css.
 *
 * styles.css contains:
 *   button.gamepad-focused,
 *   .app-menu-item.gamepad-focused {
 *       background: var(--primary) !important;
 *       color: var(--background) !important;
 *       transform: scale(1.05);
 *   }
 *
 * Because that rule uses `!important`, the more specific outline-only
 * treatment in inputManager.css lost the cascade for the top-bar buttons,
 * which made the Menu button render as a filled silver rectangle (with
 * the label going black-on-near-black) whenever it picked up focus —
 * including the sticky tap-focus left behind on some Android browsers.
 *
 * Restore the intended subtle-outline-only focus look for the three
 * top-bar buttons. */
.app-menu-button.gamepad-focused,
.menu-toggle.gamepad-focused,
.theme-toggle.gamepad-focused,
.mobile-search-trigger.gamepad-focused {
    background: none !important;
    background-color: transparent !important;
    color: var(--text) !important;
    transform: none !important;
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
    box-shadow: 0 0 16px var(--glow-color-60);
}

/* Same defense for plain :focus / :active states (touch tap focus on
   mobile) so neither persistent focus nor any user-agent default can
   leave the button filled. */
.app-menu-button:focus,
.app-menu-button:active,
.app-menu-button:hover,
.menu-toggle:focus:not(:focus-visible),
.theme-toggle:focus:not(:focus-visible),
.mobile-search-trigger:focus:not(:focus-visible) {
    background: none !important;
    background-color: transparent !important;
    color: var(--text) !important;
    transform: none !important;
}