/* Gamepad navigation visuals - shared focus ring, hint toast, and prompt glyphs */

/* Unified, animated focus ring for gamepad-driven navigation.
 * The legacy `.gamepad-focused` class already exists in places (game-card,
 * app-menu-item, genre-list a, control-button); this adds consistent
 * fallback styling for everything else and animates the highlight. */
.gamepad-focused {
    position: relative;
    outline: none;
}

.gamepad-focused:not(.game-card):not(.app-menu-item):not(.genre-list a):not(.theme-button):not(.control-button):not(.app-menu-button):not(.menu-toggle):not(.theme-toggle) {
    box-shadow:
        0 0 0 2px var(--background),
        0 0 0 4px var(--primary),
        0 0 22px var(--glow-color-60);
    transition: box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
    transform: translateY(-1px);
    z-index: 5;
}

/* Tailored focus treatment for the top-bar buttons - just a subtle glow ring
 * that never covers their text or icon. */
.app-menu-button.gamepad-focused,
.menu-toggle.gamepad-focused,
.theme-toggle.gamepad-focused {
    outline: 2px solid var(--secondary);
    outline-offset: 3px;
    box-shadow: 0 0 16px var(--glow-color-60);
}

/* Game cards get a stronger glow when gamepad-focused */
.game-card.gamepad-focused {
    border-color: var(--secondary) !important;
    box-shadow:
        0 0 0 3px var(--primary),
        0 0 30px var(--glow-color-60),
        0 0 16px var(--glow-color-40) !important;
    transform: translateY(-3px) !important;
    z-index: 5;
}

/* Pulse for the gamepad-focused state so it's discoverable at a glance */
@keyframes gp-focus-pulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary), 0 0 22px var(--glow-color-60); }
    50%      { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--secondary), 0 0 32px var(--glow-color-60); }
}

.gamepad-focused:not(.game-card):not(.app-menu-item):not(.genre-list a):not(.theme-button):not(.control-button):not(.app-menu-button):not(.menu-toggle):not(.theme-toggle) {
    animation: gp-focus-pulse 1.6s ease-in-out infinite;
}

/* Toast hint */
.gamepad-hint {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translate(-50%, -8px);
    background: rgba(0, 0, 0, 0.92);
    border: 1px solid var(--primary);
    color: var(--text);
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), 0 0 18px var(--glow-color-40);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 2000;
    max-width: min(70vw, 460px);
    text-align: center;
}

.gamepad-hint.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Inline controller glyph badges (used wherever data-gp-prompt is attached) */
.gp-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3em;
    height: 1.3em;
    padding: 0 0.45em;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--primary);
    color: var(--text);
    font-size: 0.78em;
    letter-spacing: 0.02em;
    margin: 0 0.25em;
    vertical-align: middle;
}