body{
    text-align: center;
    background-color: black;
    margin: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Game wrapper */
#gameContainer{
    font-family: "Permanent Marker", cursive;
    color: white;
    width: 100%;
    max-width: 420px;  
}
.heading{
    font-size: clamp(30px, 8vw, 45px);
    margin-bottom: 30px;
}

/* Grid container */
#cellContainer{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 90%;
    max-width: 300px;
    margin: 0 auto;
}

.cell{
    aspect-ratio: 1 / 1;         
    border: 2px solid white;
    cursor: pointer;
    background-color: black;
    color: white;

    /*glow effect */
    box-shadow: 0 0 0 2px white;

    /* Center content */
    display: flex;
    justify-content: center;
    align-items: center;
}

.cell1{ border-radius: 10% 0 0 0; }
.cell3{ border-radius: 0 10% 0 0; }
.cell7{ border-radius: 0 0 0 10%; }
.cell9{ border-radius: 0 0 10% 0; }

.icon{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#restartBtn{
    height: 32px;
    width: 150px;
    color: white;
    font-size: 18px;
    background-color: rgb(201, 3, 201);
    border-radius: 15px;
    border: none;
    margin-bottom: 80px;
    font-weight: 600;
    box-shadow: 1px 1px 1px 1px rgb(165, 2, 165);
    cursor: pointer;
}

#restartBtn:hover{
    filter: brightness(1.5);
    transition: filter 0.3s ease; 
}

/* Animations */
@keyframes fadeup{
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes bounce{
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-18px); }
    60% { transform: translateY(-7px); }
}

.winner{
    color: aqua;
    animation: bounce 1.3s ease;
    text-shadow: 0 0 10px aqua;
    font-size: clamp(26px, 6vw, 37px);
}

.draw{
    color: #fbe8b1;
    animation: fadeup 1s ease;
    font-size: clamp(26px, 6vw, 37px);
}