/**
 * Button Shape Fix - Ensures all buttons maintain proper shapes
 * Fixes oval distortion issues found in testing
 */

/* Fix for Start Game button - make it a proper rounded rectangle, not distorted */
#startSingleGameBtn,
button[onclick*="startSingleDeviceGame"],
button[onclick*="startGame"] {
    min-width: 200px !important;
    max-width: 280px !important;
    height: 54px !important;
    border-radius: 27px !important;  /* Half of height for perfect pill shape */
    aspect-ratio: unset !important;  /* Remove any aspect ratio constraints */
}

/* Fix for circular icon buttons - ensure they stay circular */
button.icon-btn,
button.circular-btn,
.close-btn,
.control-btn,
button[style*="border-radius: 50%"] {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fix for Install App button */
#pwa-install-btn {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 20px !important;
    border-radius: 23px !important;  /* Half of height */
    width: auto !important;
    min-width: 150px !important;
    max-width: 200px !important;
}

/* Ensure primary buttons have consistent styling */
.primary-btn,
.secondary-btn {
    height: 48px !important;
    padding: 0 24px !important;
    border-radius: 24px !important;
    min-width: 120px !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* Language and mode selection buttons */
#langBtnDe,
#langBtnEn,
#singleModeBtn,
#multiModeBtn {
    min-height: 60px !important;
    padding: 12px 24px !important;
    border-radius: 30px !important;  /* Properly rounded, not distorted */
}

/* Category and overlay buttons */
#categoryButton,
#hostCategoryButton,
#hostLanguageButton {
    height: 44px !important;
    padding: 0 20px !important;
    border-radius: 22px !important;
    min-width: 140px !important;
}

/* Player vote buttons in voting phase */
.player-vote-btn {
    width: 65px !important;
    height: 65px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    word-break: break-word !important;
}

/* Back buttons */
button[onclick*="goBack"],
button[onclick*="backTo"] {
    height: 40px !important;
    padding: 0 16px !important;
    border-radius: 20px !important;
    min-width: 100px !important;
}

/* Ensure no button overflow */
button {
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Special styling for icon-only buttons */
button:has(svg):not(:has(span)) {
    width: 36px !important;
    height: 36px !important;
    padding: 8px !important;
    border-radius: 50% !important;
}

/* Prevent distortion on mobile */
@media (max-width: 768px) {
    button {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
    }
    
    /* Ensure touch targets are at least 44x44 */
    button {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* Big reveal button centering and styling */
.big-reveal-button {
    width: auto !important;
    max-width: 320px !important;
    min-width: 250px !important;
    height: auto !important;
    padding: 20px 30px !important;
    margin: 20px auto !important;
    display: block !important;
    text-align: center !important;
    border-radius: 25px !important;
    white-space: normal !important;
    line-height: 1.4 !important;
}

.big-reveal-button span {
    display: block !important;
    font-size: 1.3em !important;
    font-weight: bold !important;
    margin-bottom: 8px !important;
}

.big-reveal-button small {
    display: block !important;
    font-size: 0.9em !important;
    opacity: 0.8 !important;
    font-weight: normal !important;
}

/* Anti-distortion protection */
button {
    transform: none !important;
    -webkit-transform: none !important;
    contain: layout style size !important;
    isolation: isolate !important;
}