/* Accessibility Fixes for In-or-Out Game */
/* WCAG AAA Compliance - Minimum 44x44px touch targets */

/* Fix sound, tutorial, and stats buttons */
.sound-toggle, 
.tutorial-trigger, 
.stats-button,
button.sound-toggle,
button.tutorial-trigger,
button.stats-button,
div.sound-toggle,
div.tutorial-trigger,
div.stats-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure proper icon sizing within buttons */
.sound-toggle svg,
.tutorial-trigger svg,
.stats-button svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2 !important;
}

/* Fix close buttons */
.overlay-close,
.close-btn,
button.overlay-close,
button.close-btn,
button[aria-label="close"],
button[title="close"] {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

/* Fix back buttons */
.back-btn,
button.back-btn,
button[onclick*="back"],
button[onclick*="goBack"] {
    min-height: 44px !important;
    padding: 10px 20px !important;
}

/* Mobile specific adjustments - maintain 44px minimum */
@media (max-width: 600px) {
    .sound-toggle,
    .tutorial-trigger,
    .stats-button {
        width: 44px !important;
        height: 44px !important;
        bottom: 15px !important;
    }
    
    .sound-toggle {
        left: 15px !important;
    }
    
    .tutorial-trigger {
        left: 64px !important; /* Adjusted for 44px width */
    }
    
    .stats-button {
        right: 15px !important;
    }
    
    /* Maintain icon sizes */
    .sound-toggle svg,
    .tutorial-trigger svg,
    .stats-button svg {
        width: 22px !important;
        height: 22px !important;
    }
}

/* Ensure all interactive elements have proper focus indicators */
button:focus-visible,
.sound-toggle:focus-visible,
.tutorial-trigger:focus-visible,
.stats-button:focus-visible,
.overlay-close:focus-visible {
    outline: 3px solid var(--color-out, #FF6B9D) !important;
    outline-offset: 2px !important;
}

/* Add visual feedback for selections */
.setting-button.selected,
.language-button.selected,
.category-button.selected {
    background: linear-gradient(135deg, var(--color-in) 0%, #7DD3C0 100%) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(78, 205, 196, 0.4) !important;
}

/* Loading state for buttons */
button.loading {
    position: relative !important;
    color: transparent !important;
    pointer-events: none !important;
}

button.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--text-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Improved touch target spacing */
.settings-buttons-row {
    gap: 20px !important; /* Increased gap for better touch separation */
}

/* Ensure adequate spacing between interactive elements */
button + button,
.player-tag + .player-tag {
    margin-left: 8px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    button,
    .sound-toggle,
    .tutorial-trigger,
    .stats-button {
        border: 2px solid currentColor !important;
    }
}