/**
 * Button Visibility Fix - Ensures all button text is visible and WCAG compliant
 * Addresses issues found in comprehensive testing
 */

/* CRITICAL: Fix mode selection buttons that have invisible text */
.mode-button,
#singleModeBtn,
#multiModeBtn {
    /* Ensure adequate size for text visibility */
    min-width: 350px !important;
    min-height: 100px !important;
    width: 100% !important;
    max-width: 400px !important;
    padding: 25px 30px !important;
    
    /* Keep original display flex from CSS */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    
    /* Typography improvements for text content */
    font-size: 17px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
}

/* Fix the text content inside mode buttons */
.mode-button .text-content {
    flex-grow: 1 !important;
    text-align: left !important;
    margin-left: 15px !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
}

/* Fix the small text inside mode buttons */
.mode-button small {
    display: block !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-top: 4px !important;
    line-height: 1.2 !important;
    opacity: 0.9 !important;
}

/* Ensure SVG icons in mode buttons are properly sized */
.mode-button .icon-3d {
    width: 70px !important;
    height: 70px !important;
    flex-shrink: 0 !important;
    margin-right: 20px !important;
}

/* WCAG AA Compliance: Minimum 44x44px touch targets */
button {
    min-width: 44px !important;
    min-height: 44px !important;
}

/* Fix small circular buttons to meet WCAG standards */
.close-btn,
.control-btn,
button.icon-btn,
button.circular-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    padding: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Sound toggle and tutorial buttons - increase from 40px to 48px */
button[onclick*="toggleSound"],
button[onclick*="showTutorial"],
.tutorial-btn,
.sound-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 50% !important;
    font-size: 16px !important;
}

/* Language flag buttons - ensure adequate size */
#langBtnDe,
#langBtnEn,
.language-flag-mini {
    min-width: 80px !important;
    min-height: 50px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

/* Primary action buttons - ensure text visibility */
.primary-btn,
#startSingleGameBtn,
button[onclick*="startSingleDeviceGame"] {
    min-width: 200px !important;
    min-height: 54px !important;
    padding: 15px 30px !important;
    border-radius: 27px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
}

/* Secondary buttons */
.secondary-btn,
button[onclick*="goBack"],
button[onclick*="backTo"] {
    min-width: 120px !important;
    min-height: 44px !important;
    padding: 12px 20px !important;
    border-radius: 22px !important;
    font-size: 14px !important;
}

/* Category and settings buttons */
#categoryButton,
#hostCategoryButton,
#hostLanguageButton {
    min-width: 160px !important;
    min-height: 44px !important;
    padding: 12px 20px !important;
    border-radius: 22px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
}

/* Player input and collection screen buttons */
#singlePlayerCollection .primary-btn,
#singlePlayerCollection button {
    min-width: 150px !important;
    min-height: 48px !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
}

/* Role display buttons */
#singleRoleDisplay button,
#multiRoleDisplay button {
    min-width: 180px !important;
    min-height: 54px !important;
    padding: 15px 25px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
}

/* Questions screen navigation */
#singleQuestions button,
#game button {
    min-width: 160px !important;
    min-height: 48px !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
}

/* Voting screen buttons - player selection */
.player-vote-btn {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    border-radius: 50% !important;
    padding: 8px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    text-align: center !important;
    word-break: break-word !important;
    hyphens: auto !important;
}

/* Lobby screen buttons */
#lobby button {
    min-width: 140px !important;
    min-height: 48px !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
}

/* Multi-device setup buttons */
#multiSetup button,
#multiChoice button {
    min-width: 180px !important;
    min-height: 54px !important;
    padding: 15px 25px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
}

/* Ensure all text is readable */
button {
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Prevent text cutoff in smaller buttons */
button span,
button .button-text {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* Special handling for buttons with icons and text */
button:has(svg) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* Mobile responsiveness improvements */
@media (max-width: 768px) {
    /* Increase touch targets for mobile */
    button {
        min-width: 48px !important;
        min-height: 48px !important;
    }
    
    /* Mode selection buttons even larger on mobile */
    #singleModeBtn,
    #multiModeBtn {
        min-width: 300px !important;
        min-height: 140px !important;
        font-size: 18px !important;
        padding: 25px 35px !important;
    }
    
    /* Ensure primary buttons are thumb-friendly */
    .primary-btn,
    #startSingleGameBtn {
        min-height: 56px !important;
        font-size: 18px !important;
        padding: 16px 32px !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    button {
        border: 2px solid currentColor !important;
        font-weight: bold !important;
    }
}

/* Focus states for accessibility */
button:focus,
button:focus-visible {
    outline: 3px solid #4C9AFF !important;
    outline-offset: 2px !important;
    z-index: 10 !important;
}

/* Hover states */
button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Active states */
button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}