body {
    font-family: 'Poppins', sans-serif;
    background: #f4f4f4;
    margin: 20px;
}

.screen {
    display: none;
}

.visible {
    display: block;
}

/* Ensure the black cards container uses flexbox for alignment */
#black-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Center the cards horizontally */
    gap: 10px;
    /* Add some space between the cards */
    margin: 20px 0;
    /* Add some margin for better spacing */
}

.black-card,
.white-card,
.grey-card,
.chosen-white-card,
.chosen-black-card {
    border: 2px solid #000;
    overflow-y: auto;
    border-radius: 8px;
    padding: 10px;
    margin: 10px;
    font-size: 14px;
    /*font-weight: bold;*/
    cursor: pointer;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    flex: 0 0 200px;
    /* Fixed height and width for each card */
    height: 150px;
    width: 200px;
    
    display: flex;
    align-items: center;
    /* Center text vertically */
    justify-content: center;
    /* Center text horizontally */
    text-align: center;
    /* Ensure text is centered */
    box-sizing: border-box;
    /* Include padding and border in the element's total width and height */
}

.black-card {
    background: #371F76;
    color: #fff;
}

/* Optional: Add a minimum height for the black card text to prevent misalignment */
.black-card p, .white-card p, .grey-card p {
    margin: 0;
    /* Remove default margin */
    padding: 10px;
    /* Add some padding for better readability */
    overflow-y: auto;
    max-height: 130px;
}

.white-card {
    background: #fff;
    color: #000;
}

.grey-card {
    background: #808080;
    color: #000;
}

.chosen-black-card {
    background: #371F76;
    color: #fff;
}

.chosen-white-card {
    background: #fff;
    color: #000;
}

#chosen-white-cards {
    display: flex;             /* Use flexbox */
    flex-direction: row;       /* Align chosen cards in a row */
    gap: 10px;                 /* Space between cards */
    justify-content: center;   /* Center horizontally, optional */
}

.players-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    justify-content: center;
}

.player-section {
    border: 1px solid #ccc;
    margin: 10px;
    padding: 15px;
    width: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.controls {
    margin-top: 20px;
    text-align: center;
}

button {
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    cursor: pointer;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 5px;
}

button:hover {
    background: #333;
}

/* Logo styling */
.logo-container {
    text-align: center;
    margin-bottom: 20px;
}

#logo {
    max-width: 150px;
    width: 100%;
    height: auto;
}

/* Container styling */
.container {
    max-width: 1800px;
    max-height: 1500px;
    margin: 10px auto;
    padding: 5px;
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 8px;
    text-align: center;
    align-items: center;
    overflow-x: auto;
    /* Allow horizontal scrolling if necessary */
}

.instruction-container {
    text-align: left;
}

/* Second Round Screen */
#second-round-screen .second-round-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

#second-round-screen .left-side {
    flex: 3;
    margin-right: 20px;
}

#second-round-screen .right-side {
    flex: 1;
    max-width: 300px;
}

#second-round-screen .card-row {
    margin-bottom: 20px;
}

#second-round-screen .card-container {
    display: flex;
    gap: 10px;
    /* Space between cards */
    justify-content: flex-start;
    /* Center the cards horizontally */
}

#second-round-screen .card-container .white-card,
#second-round-screen .card-container .grey-card,
#second-round-screen .card-container .black-card {
    flex: 0 0 200px;
    /* Fixed width for each card */
    overflow-y: auto;
    padding: 10px;
    height: 175px;
    width: 225px;
    /* Fixed height for each card */
    display: flex;
    align-items: center;
    /* Center text vertically */
    justify-content: center;
    /* Center text horizontally */
    text-align: center;
    /* Ensure text is centered */
    box-sizing: border-box;
    /* Include padding and border in the element's total width and height */
    cursor: pointer;
    /* Add pointer cursor to indicate clickability */
}

.white-card-container {
    display: grid;                   /* Use CSS Grid */
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px;                       /* Spacing between cards */
    max-width: auto;
}

#second-round-screen .selected-cards-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

#second-round-screen .selected-card-white {
    background: #fff;
    color: #000;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 14px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    margin: 10px;
    width: 225px;
    /*font-weight: bold;*/
    cursor: pointer;
    flex: 0 0 200px;
    height: 175px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

#second-round-screen .selected-card-black {
    background: #371F76;
    color: #fff;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 14px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    margin: 10px;
    width: 225px;
    /*font-weight: bold;*/
    cursor: pointer;
    flex: 0 0 200px;
    height: 175px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

#second-round-screen .selected-card-grey {
    background: #808080;
    color: #000;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 14px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    margin: 10px;
    width: 225px;
    /*font-weight: bold;*/
    cursor: pointer;
    flex: 0 0 200px;
    height: 175px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

#second-round-screen #submitSecondRoundBtn {
    margin-top: 20px;
}

#second-round-screen #successMessage {
    color: green;
    font-weight: bold;
    margin-top: 10px;
}