@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background: #232323;
    font-family: "Roboto", sans-serif;
}
body::selection {
  color: #232323;
  background-color: #d82934; 
}
.container{
    display: block;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
.header-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin-bottom: 2rem;
    color: #d82934;
}

.header-container h1 {
    margin: 0; 
    font-size: 2.5rem; 
}

.header-container h2 {
    font-size: 1.8rem; 
}
.game{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.game #title{
    color: #d82934;
    font-weight: 400;
}

.board{
    position: relative;
    width: 56vmin;
    height: 56vmin;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.box{
    width: 18vmin;
    height: 18vmin;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;
    font-size: 2.5rem;
    color: #232323;
    font-weight: 500;
    background-color: #d82934;

}


.msg-container{
    position: relative;
    display: flex;
    min-width: 300px; 
    align-items: center;  
    text-align: center
}
.title-text {
  position: absolute; 
  width: 100%;
  left: 0;
  margin: 0;  
  opacity: 0;
  pointer-events: none; 
}


.title-text.active {
  opacity: 1;  
  pointer-events: auto;
}

#msg{
    color: #d82934;
    font-weight: 400;
}

.toggle{
    display: flex;
    width: 56vmin;
    justify-content: space-between;

}

.btn{
    border: none;
    margin: 2rem 0;
    padding: 0.6rem;
    border-radius: 2px;
    background: #d82934;
}

.hide{
    display: none;
}



/* win line  */
.board.win-pat-0::after{
    content: '';
    position: absolute;
    width: 90%;
    height: 5px;
    top: 16.5%;
    left: 5%;
    transform: translateY(-50%);
    background: #232323;
    animation: drawLine 0.5s ease-in-out;
}
.board.win-pat-1::after {
  content: '';  
  position: absolute;
  width: 5px;
  height: 90%;
  top: 5%;
  left: 16.5%;
  transform: translateX(-50%);
  background: #232323;
  animation: drawLine 0.5s ease-in-out;

}
.board.win-pat-2::after {
  content: '';  
  position: absolute;
  width: 135%; 
  height: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #232323;
  animation: drawLine 0.5s ease-in-out;

}
.board.win-pat-3::after {
  content: '';  
  position: absolute;
  background: #232323;
  width: 5px;
  height: 90%;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  animation: drawLine 0.5s ease-in-out;

}
.board.win-pat-4::after {
  content: '';  
  position: absolute;
  background: #232323;
  width: 5px;
  height: 90%;
  top: 5%;
  left: 83.5%;
  transform: translateX(-50%);
  animation: drawLine 0.5s ease-in-out;

}
.board.win-pat-5::after {
  content: '';  
  position: absolute;
  background: #232323;
  width: 135%;
  height: 5px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  animation: drawLine 0.5s ease-in-out;

}
.board.win-pat-6::after {
  content: '';
  position: absolute;
  background: #232323;
  width: 90%;
  height: 5px;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  animation: drawLine 0.5s ease-in-out;

}
.board.win-pat-7::after {
  content: '';  
  position: absolute;
  background: #232323;
  width: 90%;
  height: 5px;
  top: 83.5%;
  left: 5%;
  transform: translateY(-50%);
  animation: drawLine 0.5s ease-in-out;

}
@keyframes drawLine {
  from {
    height: 5px;
    clip-path: inset(0 100% 0 0);
  }
  to {
    /* The final width will be determined by the specific class */
    clip-path: inset(0 0 0 0);
  }
}



/* responsiveness */
@media (max-width: 1023px) {
    .btn{
        padding: 8px 4px;
    }
}

@media (max-width: 767px) {
    /* Target tablets in portrait and all mobile phones */

    /* Reduce header font sizes for a better fit */
    .header-container h1,
    #msg {
        font-size: 2rem;
    }

    .header-container h2 {
        font-size: 1.4rem;
    }

    /* Make the 'X' and 'O' scale perfectly with the box size */
    .box {
        font-size: 8vmin;
    }

    /* Adjust button sizes and spacing */
    .btn {
        padding: 8px 4px;
        /* font-size: 1.2rem; */
        margin: 1.5rem 0;
    }

    .toggle {
        gap: 0.2rem;
    }

    /* Make the winning line thinner on smaller screens */
    .board.win-pat-0::after,
    .board.win-pat-1::after,
    .board.win-pat-2::after,
    .board.win-pat-6::after,
    .board.win-pat-7::after,
    .board.win-pat-5::after {
        height: 3px;
    }

    .board.win-pat-3::after,
    .board.win-pat-4::after {
        width: 3px;
    }
}

/* =============================================== */
/* Responsive Styles for Small Mobile Phones       */
/* =============================================== */
/* =============================================== */
/* Responsive Styles for Mobile View               */
/* =============================================== */

@media (max-width: 550px) {

    /* Stack header items vertically on small screens */
    .header-container {
        flex-direction: column; 
        gap: 0.5rem;            
        margin-top: 2rem;       
        margin-bottom: 1.5rem;
    }
    
    /* Adjust the main game container to prevent overflow */
    .game {
        height: auto;
        justify-content: flex-start;
    }

    /* Adjust button font size for a better fit */
    .btn {
        font-size: 0.7rem;
        padding: 8px 6px;
    }
    .board{
        width: 57vmin;
    }
}
@media (max-width: 376px){
.btn {
        font-size: 0.6rem;
        padding: 8px 7px;
    }
}
@media (max-width: 321px){
    .btn {
        font-size: 0.6rem;
        padding: 8px 1px;
    }
}