/* CORRECTED: Container Width Control for In-or-Out Game */
/* NO FULL WIDTH CONTAINERS ALLOWED! */

/* 1. Global Box-Sizing Reset for Predictable Sizing */
*, *::before, *::after {
    box-sizing: border-box !important;
}

/* 2. Fix Mode Buttons - Remove Unnecessary Overflow Hidden */
.mode-button {
    overflow: visible !important; /* Allow content to show properly */
}

/* 3. Question Display Container Fixes - BEGRENZTE BREITE */
.question-display {
    /* CONTAINED WIDTH - NOT FULL SCREEN */
    max-width: 500px !important;
    margin: 0 auto !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
    padding: 18px !important;
}

/* 4. Fix Nested Question Containers - BEGRENZTE BREITE */
#singleCurrentQuestion {
    max-width: 500px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    padding: 20px !important;
}

/* 5. Ensure All Text Inputs Stay Within Bounds - aber nur innerhalb Container */
input[type="text"], 
input[type="number"], 
textarea {
    width: 100% !important;
    max-width: 400px !important;  /* Begrenzt auf vernünftige Breite */
    box-sizing: border-box !important;
}

/* 6. Fix Container Hierarchy - KORREKT BEGRENZT */
.container {
    max-width: 500px !important;  /* Niemals volle Breite! */
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
}

/* 7. Prevent Inner Boxes from Overflowing */
.question-display > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 8. Fix Summary Content Overflow */
#singleSummaryContent {
    max-height: none !important; /* Remove height restriction */
    overflow-y: visible !important; /* Allow content to expand */
}

/* 9. Ensure Buttons Don't Overflow */
button {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
}

/* 10. Fix Voting Sections - BEGRENZTE BREITE */
.voting-section {
    max-width: 500px !important;  /* Niemals volle Breite! */
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* 11. Mobile-Specific Fixes */
@media (max-width: 768px) {
    .question-display {
        padding: 15px !important;
        margin: 10px auto !important;
    }
    
    .container {
        padding: 0 15px !important;
    }
    
    /* Ensure all content respects viewport width */
    body {
        overflow-x: hidden !important;
    }
    
    /* Fix any absolutely positioned elements */
    [style*="position: absolute"] {
        max-width: 100vw !important;
    }
}

/* 12. Fix Rule Highlight Boxes - BEGRENZTE BREITE */
.rule-highlight {
    max-width: 500px !important;  /* Niemals volle Breite! */
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding: 15px !important;
    overflow: visible !important;
}

/* 13. Ensure SVG Icons Don't Cause Overflow */
svg {
    max-width: 100% !important;
    height: auto !important;
}

/* 14. Fix Nested Containers in Game Sections - BEGRENZTE BREITE */
#singleDevice > div,
#multiDevice > div {
    max-width: 500px !important;  /* Niemals volle Breite! */
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* 15. Universal Content Container Fix - BEGRENZTE BREITE */
[class*="content"],
[class*="container"] {
    max-width: 500px !important;  /* Niemals volle Breite! */
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* 16. Prevent Horizontal Scrolling */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* 17. Fix Player Name Displays */
.player-name,
.current-player {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* 18. Ensure Proper Z-Index Stacking */
.question-display {
    z-index: 10 !important;
    position: relative !important;
}

/* 19. Fix Any Inline Styles with Overflow Hidden */
[style*="overflow: hidden"]:not(.mode-button) {
    overflow: visible !important;
}

/* 20. CORRECTED: Container Width Control - KEINE VOLLE BREITE! */
/* ENTFERNT: Die max-width: 100% Regel wurde entfernt! */
/* Spiel-Container dürfen NIEMALS volle Bildschirmbreite haben! */

/* Debug Helper - Uncomment to see box boundaries */
/*
* {
    outline: 1px solid red !important;
}
*/