* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
}

h1 {
    margin-bottom: 20px;
    color: #333;
}

/* Style for the game status message */
#game-status {
    margin-bottom: 20px;
    font-size: 1.5em;
    /* font-size: 1.2em; */
    font-weight: bold;
}

/* Style for the ultimate board (3x3 main boards) */
/* This is the main container for the game, which contains 9 main boards */
#ultimate-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 600px;
    height: 600px;
    margin: 0 auto 20px;
    padding: 10px;
    background-color: #333;
    border-radius: 10px;
}

/* Style for the main cells (3x3 boards) */
/* This is the main board, which contains 9 sub-boards */
.main-cell {
    background-color: #b8b7b7;
    border-radius: 5px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 5px;
    width: 185px;
    height: 185px;
}

/* Style for the sub-cells (individual cells in the main board) */
.sub-cell {
    /* Set a fixed width */
    width: 55px;
    /* Set a fixed height */
    height: 55px;
    /* Enable flexbox for centering */
    display: flex;
    /* Center content vertically */
    align-items: center;
    /* Center content horizontally */
    justify-content: center;

    /* Adjust font size as needed default: 30px*/
    font-size: 35px;

    font-weight: bold;
    border: 1px solid #ccc;
    cursor: pointer;
    box-sizing: border-box;
}

/* Color background orange for X and blue for O */
.sub-cell.x {
    background-color: orange;
    color: white;
}

.sub-cell.o {
    background-color: blue;
    color: white;
}

/* Highlight active playable board with yellow background */
.main-cell.playable {
    background-color: rgb(34, 190, 68) !important;
}

/* Prevent hover from overriding X and O backgrounds */
.sub-cell:hover {
    background-color: #d4d2d2;
}

.sub-cell.x:hover,
.sub-cell.o:hover {
    background-color: inherit;
}

.sub-cell.active {
    background-color: #71f802;
    /* background-color: #e0e0e0; */
}

/* Styles for when a main board (main-cell) is won */
.main-cell-won-x,
.main-cell-won-o {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 185px;
    /* Needed for positioning the pseudo-element default: relative*/
    display: flex;
    /* Use flexbox for centering the large letter */
    align-items: center;
    justify-content: center;
    cursor: default;
    /* Indicate it's no longer playable */
}

/* Hide the sub-cells grid when the main board is won */
.main-cell-won-x .sub-cell,
.main-cell-won-o .sub-cell {
    display: none;
}

/* Create the large X or O using a pseudo-element */
.main-cell-won-x::before,
.main-cell-won-o::before {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 185px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 120px;
    /* Adjust size as needed default: 120px*/
    font-weight: bold;
    color: white;
}

/* Specific styles for X win */
.main-cell-won-x {
    background-color: orange;
}

.main-cell-won-x::before {
    content: 'X';
}

/* Specific styles for O win */
.main-cell-won-o {
    background-color: blue;
}

.main-cell-won-o::before {
    content: 'O';
}

/* Remove previous simple win indicators if they exist */
.main-cell.won-x,
.main-cell.won-o {
    /* These might be redundant now, depending on previous CSS */
    border: none;
    /* Example: remove old border highlight */
}

/* Highlight active playable board with yellow background */
.main-cell.playable {
    background-color: rgb(210, 250, 117) !important;
    /* Keep yellow highlight for playable */
}

#reset-game {
    padding: 10px 20px;
    font-size: 1.1em;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#reset-game:hover {
    background-color: #45a049;
}