select {
   padding: 10px;
   margin-bottom: 20px;
   font-size: 16px;
 }

 #word-grid {
   display: grid;
   grid-template-columns: repeat(15, 40px);
   justify-content: center;
   margin-bottom: 20px;
   user-select: none;
 }

 .word-search-grid {
   display: flex;
   gap: 20px;
 }

 .cell {
   width: 40px;
   height: 40px;
   border: 1px solid #ccc;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: bold;
   cursor: pointer;
   background: white;
 }

 .cell.selected {
   background: #cdb4ff;
 }

 #word-list {
   margin-top: 20px;
   text-align: left;
   display: inline-block;
 }

 #word-list li {
   list-style: none;
   font-size: 18px;
   margin-bottom: 10px;
 }

 #word-list li.found {
   text-decoration: line-through;
 
   color: rgb(72, 65, 65) !important;
 }

 /* hidden by default */
 #winner-popup {
   display: none;
   position: fixed;
   top: 0;
   left: 0%;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   justify-content: center;
   align-items: center;
   z-index: 999999;
 }

 #winner-popup .popup-content {
   background: #FFF;
   padding: 40px 60px;
   border-radius: 12px;
   text-align: center;
   color: #fff;
   font-family: "Arial", sans-serif;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
   max-width: 400px;
   width: 90%;
   position: absolute;
   top: 35%;
   left: 40%;

 }

 #winner-popup .popup-content h5 {
   font-size: 2rem;
   margin-bottom: 15px;
   font-weight: bold;

 }

 #winner-popup .popup-content p {
   font-size: 1rem;
   margin-bottom: 15px;
 }

 #winner-popup .popup-content button {
   display: block;
   width: 100%;
   margin: 10px 0;
   padding: 12px;
   font-size: 1rem;
   border: none;
   border-radius: 6px;
   background: green;
   color: #fff;
   cursor: pointer;
   transition: background 0.3s;
 }

 #winner-popup .popup-content button:hover {
   background: rgb(6, 145, 6);
 }

 .custom-dropdown {
   position: relative;
   width: 400px;
   cursor: pointer;
   user-select: none;
   margin-bottom: 10px;
 }

 .dropdown-selected {
   padding: 10px;
   border: 1px solid #ccc;
   background: #fff;
   border-radius: 6px;
 }

 .dropdown-selected::after {
   content: "▼";
   font-size: 12px;
   position: absolute;
   right: 12px;
   top: 55%;
   transform: translateY(-50%);
   transition: transform 0.3s ease;
   pointer-events: none;
   color: #555;
 }


 .custom-dropdown.open .dropdown-selected::after {
   transform: translateY(-50%) rotate(180deg);
   transition: 0.5s ease-out;
 }

 .dropdown-options {
   list-style: none;
   margin: 0;
   padding: 0;
   border: 1px solid #ccc;
   border-radius: 6px;
   background: #fff;
   position: absolute;
   width: 100%;
   display: none;
   max-height: 200px;
   overflow-y: auto;
   z-index: 1000;
 }

 .dropdown-options.show {
   display: block;
 }

 .dropdown-options li {
   padding: 10px;
   cursor: pointer;
 }

 .dropdown-options li:hover {
   background: #f0f0f0;
 }

 
/* responsive section start here */

 @media (max-width:1200px) {
  
   #winner-popup .popup-content {
     left: 35%;
     
   }
 }

  @media (max-width:992px) {
  
   #winner-popup .popup-content {
     left: 30%;
     
   }
 }

 

 @media (max-width: 768px) {
   #word-grid {
     grid-template-columns: repeat(15, 28px);
   }

   .cell {
     width: 28px;
     height: 28px;
     font-size: 12px;
   }
   #winner-popup .popup-content {
     left: 25%; 
   }
 }

 @media (max-width:680px) {
    #winner-popup .popup-content {
     left:20%; 
   }
 }

@media (max-width:576px) {
  .hero-section{
    padding: 0px !important;
  }
}
 
 @media (max-width:575px) {
   .word-search-grid {
     flex-direction: column;

   }

   #word-list {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 2px 1px;
     width: 100%;
     margin-top: 0px;
   }
    #winner-popup .popup-content {
     left: 13%;
     
   }

 }


 @media (max-width: 480px) {
   #word-grid {
     grid-template-columns: repeat(15, 22px);
   }

   .cell {
     width: 22px;
     height: 22px;
     font-size: 10px;
   }

   .custom-dropdown {
     max-width: 280px;
   }

   #winner-popup .popup-content {
     left: 6%;
     padding: 29px 31px;
   }
   #word-list {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 15px 10px;
     width: 100%;
     margin-top: 0px;  
   }
   .hero-section{
    margin: 0px;
   }
   .container{
    padding: 0px;
   }
   
 }



 @media (max-width:350px) {
   #word-grid {
     grid-template-columns: repeat(15, 20px);
   }

   .cell {
     width: 20px;
     height: 20px;
     font-size: 10px;
   }
   .hero-section{
    margin: 0px;
   }
 }