/**
 * Text Overflow Fix for In-or-Out
 * Prevents text from overflowing container boundaries
 */

/* Global text overflow prevention */
* {
    /* Prevent text overflow */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* All game containers - enforce text containment */
#gameMode, .game-container,
#singleSetup, #multiSetup, #multiChoice, #lobby, #game,
#singlePlayerCollection, #singleRoleReveal, #singleRoleDisplay, 
#singleQuestions, #singleSummary, #singleVoting, #singleResults,
#multiRoleDisplay,
.mode-button, .game-description {
    /* Text overflow prevention */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    
    /* Ensure content doesn't exceed container */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Specific fixes for problem areas */
h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
}

p, .description-text, label, span {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
}

/* Mode buttons */
.mode-button {
    max-width: 100% !important;
    overflow: hidden !important;
}

.mode-button h3,
.mode-button p {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    padding: 0 10px !important;
}

/* Input fields */
input[type="text"], 
input[type="number"], 
select {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Room codes */
.room-code-display,
.room-code-joined,
.room-code-single-frame {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    letter-spacing: 0.1em !important; /* Slightly reduced for better fit */
    max-width: 100% !important;
}

/* Player names */
.player-list li,
.player-name {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* Questions and answers */
.question-display,
#currentQuestion,
.answer-text {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
    padding: 0 5px !important;
}

/* Buttons */
button {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* Special containers that might have long text */
.game-rule,
.rule-highlight,
.error-message,
.info-message {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    padding: 10px !important;
    max-width: 100% !important;
}

/* Mobile-specific adjustments */
@media (max-width: 640px) {
    /* Even more aggressive breaking on mobile */
    * {
        word-break: break-all !important;
        hyphens: auto !important;
    }
    
    /* Reduce font sizes slightly if needed */
    .room-code-display,
    .room-code-joined {
        font-size: 1.8rem !important; /* Slightly smaller on mobile */
    }
}

/* Prevent layout breaking from long words */
.container,
.wrapper,
.content {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Force text to respect container boundaries */
[style*="display: block"],
[style*="display: flex"] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}