* {
     box-sizing: border-box;
     margin: 0;
     padding: 0px; 
     font-family: "Poppins", Arial, Helvetica, sans-serif;
     box-shadow: none;
}

body {
     background-color: #0f172a;
     color: #f8fafc;
     margin: 0px;
}

img {
     height: 20px;
}

.box-container {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: start;
          flex-wrap: wrap;
          width: 95vw;
     }

 #palavra-secreta{
          color: #38bdf8;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: start;
          flex-wrap: wrap;
          font-size: 1.2em;
          margin-top: 60px;
     }

#box-secreta {
          border: 1px solid rgba(255, 255, 255, 0.1);
          background-color: rgba(30, 41, 59, 0.5);
          border-radius: 15px;
          text-align:center;
          box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
          color: #e2e8f0;
          width: 350px;
          min-height: 200px;
          font-size: 1.1em;
          margin-top: 10px;
          padding: 10px;
     }
     
.box-letra {
          border: 1px solid rgba(255, 255, 255, 0.1); 
          background-color: #1e293b;
          border-radius: 8px;
          text-align:center;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
          color: #f8fafc;
          cursor:pointer;  
          width: 26px;
          height: 26px;
          margin: 7px;
          padding: 5px;
          transition: all 0.2s ease;

          font-size: 0.8em;
     }

.box-letra.btn-reiniciar {
          background-color: #22c55e;
          color: #ffffff;
}

.box-letra:hover{
          background-color:#38bdf8;   
          color: #0f172a;
          transform: scale(1.1);
          cursor:pointer;
     }
     
.letras{
          border-bottom: 3px solid #38bdf8; 
          width: 10px;
          margin-left: 2px;
          margin-right: 2px;
          text-transform: uppercase;
          font-weight: 600;
     }

.espaco {
          border-bottom: none;
}
     
#box-tentativas {
          text-align:center;
          color: #f43f5e;
          font-weight: 600;
          width: 350px;
          min-height: 20px;
          margin-top: 20px;
          padding: 5px 0px;
          font-size: 1.0em;
     }

#box-resposta {
          text-align:center;
          color: #ffffff;
          background-color: transparent;
          border-radius: 8px;
          width: 350px;
          min-height: 30px;
          margin-top: 20px;
          padding: 8px 0px;
          font-size: 0.7em;
          font-weight: bold;
          transition: background-color 0.3s;
     }

#tema-select {
     background-color: #1e293b;
     color: #fff;
     border: 2px solid #38bdf8;
     padding: 10px 15px;
     border-radius: 8px;
     font-size: 1em;
     font-family: "Poppins", Arial, Helvetica, sans-serif;
     cursor: pointer;
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
     width: 200px;
     margin: 10px;
}

#tema-select:hover {
     border-color: #fff;
     box-shadow: 0 0 10px rgba(6, 21, 236, 0.5);
}

#tema-select option {
     background-color: #1e293b;
     color: #fff;
     padding: 10px;
}

#tema-select option:hover {
     background-color: #38bdf8;
}

label[for="tema-select"] {
     color: #38bdf8;
     font-size: 1.1em;
     margin-right: 10px;
     font-weight: bold;
}

/*Dispositivos extra small (telefones em modo retrato, com menos de 576px)*/
@media (min-width: 575.98px) { 
     img{
     height:25px;
}
     #palavra-secreta{
          font-size: 1.5em;
     }
     
     #box-secreta {
          width: 550px;
          min-height: 200px;
          font-size: 1.5em;
          margin-top: 10px;
          padding: 10px;
     }
     
     .letras{
          width: 20px;
          margin-left: 2px;
          margin-right: 2px;
     }
     
     #box-tentativas {
          width: 550px;
          min-height: 30px;
          margin-top: 20px;
          padding: 5px 0px;
          font-size: 1.5em;
     }
     
     #box-resposta {
          width: 550px;
          min-height: 30px;
          margin-top: 20px;
          padding: 5px 0px;
          font-size: 1.2em;
     }
     
     .box-letra {
          width: 46px;
          height: 46px;
          margin: 8.5px;
          padding: 6px;
          font-size: 1.8em;
          cursor:pointer;
          }
     .box-letra:hover{
          background-color:#38bdf8;   
          color: #0f172a;
          transform: scale(1.1);
          cursor:pointer;
     }
     .box-container {
          width: 95vw;
     }   
}



/*Dispositivos médios (tablets com menos de 992px)*/
@media (min-width: 991.98px) {
     img {
          height: 50px;
     }
     .box-container {
          width: 95vw;
          margin:5px 10px;
     }
     
     #palavra-secreta{
          margin-top: 80px;
          font-size: 1.5em;
     }
     
     #box-secreta {
          width: 980px;
          min-height: 300px;
          border: 1px solid rgba(255, 255, 255, 0.1);
          margin-top: 30px;
          padding: 20px;
          border-radius: 20px;
          font-size: 2em;
     }
     
     .box-letra {
          width: 90px;
          height: 90px;
          border: 1px solid rgba(255, 255, 255, 0.1);
          margin: 10px;
          padding: 10px;
          border-radius: 10px;
          font-size: 3.5em;
     }
     
     .box-letra:hover{
          background-color:#38bdf8;
          color: #0f172a;
          transform: scale(1.1);
     }
     
     .letras{
          border-bottom: 3px solid #000000;
          width: 30px;
          margin-left: 10px;
          margin-right: 10px;
     }
     
     #box-tentativas {
          width: 980px;
          min-height: 70px;
          margin-top: 20px;
          padding: 10px 0px;
          font-size: 2em;
     }

#box-resposta {
          width: 980px;
          min-height: 50px;
          margin-top: 5px;
          padding: 10px 0px;
          font-size: 1.5em;
          border-radius:5px;
     }
     

     


}



/*Dispositivos extra small (telefones em modo retrato, com menos de 576px) - adicional para responsividade*/
@media (max-width: 575.98px) {
     .box-container {
          width: 100vw;
          margin: 5px;
     }

     #tema-select {
          width: 100%;
          margin: 10px 0;
     }

     label[for="tema-select"] {
          display: block;
          margin-bottom: 5px;
     }

     .box-letra {
          width: 30px;
          height: 30px;
          margin: 5px;
          font-size: 0.6em;
     }

     .box-letra:hover {
          transform: scale(1.1);
     }

     #palavra-secreta {
          font-size: 0.8em;
     }

     #box-secreta {
          width: 90vw;
          min-height: 150px;
          font-size: 0.8em;
          padding: 5px;
     }

     #box-tentativas {
          width: 90vw;
          font-size: 0.8em;
     }

     #box-resposta {
          width: 90vw;
          font-size: 0.6em;
     }
}

/*Dispositivos small (telefones em modo paisagem, tablets pequenos, com menos de 768px)*/
@media (min-width: 576px) and (max-width: 767.98px) {
     .box-container {
          width: 95vw;
     }

     #tema-select {
          width: 250px;
     }

     .box-letra {
          width: 40px;
          height: 40px;
          margin: 6px;
          font-size: 1.2em;
     }

     .box-letra:hover {
          transform: scale(1.1);
     }
}