/**
 * Compact Layout Master Stylesheet
 * Ensures ALL screens have compact, centered layout
 * NO huge spacing between elements
 */

/* Global container limits */
#gameMode,
#singleSetup,
#multiSetup,
#singlePlayerCollection,
#lobby,
#game,
#singleRoleDisplay,
#singleQuestions,
#singleVoting,
#singleResults {
    max-width: 500px !important;
    max-height: 90vh !important; /* ✅ FIX: Prevent content from exceeding viewport */
    margin: 0 auto !important;
    padding: 20px !important;
    overflow-y: auto !important; /* ✅ FIX: Enable scrolling for tall content */
    overflow-x: hidden !important; /* Keep horizontal overflow hidden */
}

/* Reduce excessive margins globally */
* {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
    margin: 15px 0 10px 0 !important;
}

p {
    margin: 10px 0 !important;
}

button {
    margin: 15px auto !important;
}

/* Fix spacing between elements */
div + div {
    margin-top: 15px !important;
}

/* Player inputs specific */
#playerInputFields,
#playerInputs,
.player-inputs {
    max-width: 400px !important;
    margin: 20px auto !important;
    padding: 0 !important;
}

.player-input-group {
    margin: 8px 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    height: auto !important;
}

.player-input-group + .player-input-group {
    margin-top: 8px !important;
}

/* Remove all br tags that create unnecessary spacing */
br {
    display: none !important;
}

/* Compact select dropdowns */
select {
    margin: 10px 0 !important;
    padding: 8px !important;
}

/* Labels should be inline and compact */
label {
    display: inline-block !important;
    margin: 5px 10px 5px 0 !important;
    font-size: 14px !important;
}

/* Input fields compact */
input[type="text"],
input[type="number"],
input[type="email"] {
    margin: 5px 0 !important;
    padding: 8px !important;
    height: 36px !important;
}

/* Mode buttons should not have huge spacing */
.mode-button {
    margin: 10px !important;
}

/* Category buttons compact */
.category-button,
.kategorie-button {
    margin: 8px !important;
    padding: 12px 20px !important;
}

/* Player circles compact */
.player-circle {
    margin: 5px !important;
}

/* Remove excessive padding from containers */
.container,
.wrapper,
.content {
    padding: 15px !important;
}

/* Tutorial and Highscore buttons stay in corners */
.tutorial-button-homepage,
.highscore-button-homepage {
    position: fixed !important;
    margin: 0 !important;
}

/* Fix any divs with inline styles that have huge margins */
div[style*="margin-top: 30px"],
div[style*="margin-top: 40px"],
div[style*="margin-top: 50px"],
div[style*="margin-bottom: 30px"],
div[style*="margin-bottom: 40px"],
div[style*="margin-bottom: 50px"] {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

/* Specific fixes for problem areas */
#singleSetup > * {
    margin: 10px 0 !important;
}

#singleSetup > *:first-child {
    margin-top: 0 !important;
}

#singleSetup > *:last-child {
    margin-bottom: 0 !important;
}

/* Player count selector area */
#playerCountSelect {
    margin: 10px 0 !important;
}

/* Start button should be close to inputs */
#startGameButton,
#startSingleGameBtn {
    margin-top: 20px !important;
    margin-bottom: 10px !important;
}

/* Fix any padding issues */
[style*="padding: 30px"],
[style*="padding: 40px"],
[style*="padding: 50px"] {
    padding: 20px !important;
}

/* Ensure the body doesn't have excessive padding */
body {
    padding: 10px !important;
}

/* Keep game screens centered and compact */
.game-screen,
.screen {
    max-width: 500px !important;
    max-height: 90vh !important; /* ✅ FIX: Prevent content from exceeding viewport */
    margin: 0 auto !important;
    padding: 20px !important;
    overflow-y: auto !important; /* ✅ FIX: Enable scrolling for tall content */
    overflow-x: hidden !important; /* Keep horizontal overflow hidden */
}

/* Fix list spacing */
ul, ol {
    margin: 10px 0 !important;
    padding-left: 20px !important;
}

li {
    margin: 5px 0 !important;
}

/* Animations should not affect layout */
.fade-in,
.slide-in {
    margin: inherit !important;
}

/* CRITICAL: Override any height that causes spacing */
[style*="min-height: 90px"] {
    min-height: auto !important;
}

[style*="height: 90px"] {
    height: auto !important;
}

/* Ensure visibility without spacing */
[style*="overflow: visible"] {
    margin: 0 !important;
    padding: 0 !important;
}