body {
    /* font-family removed - Bootstrap handles */
    /* display: flex removed - Bootstrap container handles */
    /* flex-direction removed */
    /* align-items removed */
    background-color: #f0f0f0; /* Keep background */
    /* margin-top removed - Bootstrap utilities handle */
    /* padding removed - Bootstrap container handles */
    /* box-sizing removed - Bootstrap handles */
    /* width removed - Bootstrap container handles */
    min-height: 100vh;
}

h1 {
    color: #333;
    /* margin-top removed */
    /* margin-bottom removed - Bootstrap utilities handle */
    /* font-size removed - Bootstrap handles */
}

#game-info {
    /* margin-bottom removed - Bootstrap utilities handle */
    /* text-align removed - Bootstrap container handles */
    /* width removed - Bootstrap container handles */
}

#status {
    /* font-size removed - Bootstrap handles */
    /* font-weight removed - Bootstrap handles */
    min-height: 1.5em; /* Keep to prevent layout shift */
    /* margin-bottom removed - Bootstrap utilities handle */
    /* Use Bootstrap alert classes instead of direct styling */
}

/* --- Responsive Board --- */
#board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 90vw;
    max-width: 450px;
    aspect-ratio: 1 / 1;
    gap: 1.5vw;
    padding: 1.5vw;
    background-color: #ccc;
    border: 3px solid #555;
    border-radius: 5px;
    position: relative;
    /* margin-left: auto; */ /* Replaced by mx-auto class on element */
    /* margin-right: auto; */ /* Replaced by mx-auto class on element */
}

/* --- Overlay for when computer is thinking --- */
#board.computer-thinking::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(200, 200, 200, 0.3);
    z-index: 10;
    cursor: wait;
    border-radius: inherit; /* Match board's rounded corners */
}


/* Spot takes available space from grid */
.spot {
    background-color: #fff;
    border: 1px solid #aaa;
    position: relative; /* Needed for absolute positioning of pieces */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    overflow: hidden; /* Ensure pieces don't visually bleed out */
}

/* Pieces scale using percentages relative to the spot */
.piece-slot {
    position: absolute;
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; /* Added transform/shadow */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    border-width: 2px;
}

/* --- Sizes (Percentages are key here) --- */
.piece-slot.large {
    width: 85%;
    height: 85%;
    border-style: dashed;
    border-color: #ddd;
}
.piece-slot.medium {
    width: 55%;
    height: 55%;
    border-style: dashed;
    border-color: #ccc;
}
.piece-slot.small {
    width: 25%;
    height: 25%;
    border-style: dashed;
    border-color: #bbb;
}

/* --- Hover effect only on empty slots AND when it's human's turn --- */
#board:not(.computer-thinking) .piece-slot:not(.player1):not(.player2):hover {
   background-color: rgba(200, 200, 200, 0.3);
   border-color: #aaa;
}


/* --- Player Colors --- */
.piece-slot.player1,
.piece-slot.player2 {
    border-style: solid; /* Solid border for placed pieces */
    cursor: not-allowed;
}

.piece-slot.player1 {
    background-color: dodgerblue;
    border-color: darkblue;
}

.piece-slot.player2 {
    background-color: orangered;
    border-color: darkred;
}

/* --- Highlighting Winning Line --- */
.piece-slot.win {
   transform: scale(1.1);
   box-shadow: 0 0 8px gold; /* Slightly smaller shadow */
   border-width: 3px; /* Slightly thicker border for winners */
   z-index: 5;
}

/* Prevent clicking inner occupied pieces through outer empty ones */
.piece-slot.player1,
.piece-slot.player2 {
    pointer-events: none;
}
.spot {
    pointer-events: auto;
}
.piece-slot {
    pointer-events: auto;
}


/* Media query adjustments might need review with Bootstrap */
@media (max-width: 360px) {
    #board {
        width: 92vw;
        gap: 1vw;
        padding: 1vw;
    }
}