body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: linear-gradient(135deg, #eef2ff, #f8fafc);
  text-align: center;
  margin: 0;
  }

/* container */
.container {
  max-width: 800px;
  margin: auto;
}

/* Navbar */

.navbar {
  background: #111827;
  color: white;
  padding: 15px;
}

.nav-container {
  max-width: 800px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-weight: bold;
  font-size: 18px;
}

.navbar nav a {
  color: #e5e7eb;
  margin-right: 15px;
  text-decoration: none;
  font-size: 14px;
}

.navbar nav a:hover {
  color: white;
}

/* heading */
h2 {
  font-size: 28px;
  color: #1e293b;
  margin-bottom: 10px;
}

/* info */
p {
  font-size: 16px;
  color: #475569;
  margin: 5px;
}

/* kata acak */
.word {
  font-size: 48px;
  letter-spacing: clamp(4px, 2vw, 8px);
  margin: 10px auto;
  font-weight: bold;
  color: #0f172a;
  word-wrap: break-word;
  text-transform:uppercase;
}

/* container huruf */
#jawaban-box {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  padding: 0 10px;
}

/*  kotak huruf responsive */
.letter-box {
  width: clamp(45px, 12vw, 60px);
  height: clamp(55px, 14vw, 70px);
  font-size: clamp(20px, 6vw, 28px);
  text-align: center;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  font-weight: bold;
  outline: none;
  transition: 0.2s;
  text-transform:uppercase;
}

/* focus */
.letter-box:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}

/* warna wordle */
.correct {
  background: #22c55e;
  color: white;
  border-color: #22c55e;
}

.present {
  background: #eab308;
  color: white;
  border-color: #eab308;
}

.absent {
  background: #6b7280;
  color: white;
  border-color: #6b7280;
}

/* hasil */
#hasil {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}

/* animasi salah */
.salah {
  animation: shake 0.3s;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

/* toggle */
.toggle {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: #334155;
}
.game-info {
  display: flex;
  flex-wrap: wrap;        /* responsive di mobile */
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
  }

.game-info .info-item {
  align-items: center;  
  margin: 0;
  gap: 10px;
  font-size: 14px;
  }
.info-level {
   display: flex; 
   text-align:center;
   justify-content: center;
  align-items: center;
  margin-bottom:10px;
    }
.mode-info {
    font-size:11px;
    margin-left:10px;
}
.info-utama {
    text-align:center;
    }

.info-utama h2{
    color:#000;
   }    
    
.info-skor {
    font-size:19px;
    color: red;
    font-weight: bold;
}
.info-kesempatan {
    font-size:18px;
    color: red;
    font-weight: bold;
    margin-top:10px;
}
.info-skor h2{
    color:red;
    font-size:18px;
    text-align:center;
    margin:0px;
}

.info-waktu{
    font-size:14px;
    }

/* tombol restart */
#restartBtn {
  margin-top: 20px;
  padding: 12px 20px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  background: #6366f1;
  color: white;
  cursor: pointer;
}

#restartBtn:hover {
  background: #4f46e5;
}

.restart-now  {
  padding: 5px 10px 5px 10px;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  background: #248c8c;
  color: white;
  cursor: pointer;
  margin-right:15px;
}

.restart-now:hover {
  background: #4f46e5;
}

#modeSelect {
  padding: 5px 10px 5px 10px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  outline: none;
}

/* hover */
#modeSelect:hover {
  border-color: #888;
}

/* focus (klik) */
#modeSelect:focus {
  border-color: #4caf50;
  box-shadow: 0 0 3px rgba(76, 175, 80, 0.5);
}

/* timer */
#timer {
  color: #ef4444;
  font-weight: bold;
}
.reset-timer {
    color:green; 
    }
    
/*  MOBILE OPTIMIZATION */
@media (max-width: 480px) {
    
  #jawaban-box {
    gap: 8px;
    padding: 0 10px;
    flex-wrap: wrap; /* biar bisa pindah baris */
    margin-top:10px;
  }

  #jawaban-box .letter-box {
    width: 35px;        /* ini tested a15*/
    height: 40px;       
    font-size: 36px;    
    margin-bottom: 5px; 
  }
  .word {
      background:#d7eee5;
      font-size: 36px; 
      margin-top:5px;
  }
  .info-level {
   font-size:12px;
   margin-bottom:5px;
    }
   .restart-now {
   font-size:12px;
    }
   #modeSelect {
   font-size:12px;
    }
 .info-utama h2 {
    display:none;
   } 
  .info-hariini h2 {
    font-size:14px;
    margin-top:10px;
     } 
  .info-waktu{
    font-size:12px;
    }     
 .game-info {
   margin-top: 5px;
   margin-bottom:5px;
  }
 .game-info .info-item {
  display: flex;          
  }
 .toggle {
  margin-top: 0px;
   }
 .info-skor{
    font-size:15px !important; 
    color: red;
    font-weight: bold;
   }  

}

/*  Tablet OPTIMIZATION */
@media (max-width: 780px) {

   .letter-box {
   width: 100%; 
   aspect-ratio: 1 / 1;
    font-size: 48px; /* font dinamis */
  }

}

/* Petunjuk */
.petunjuk {
  margin-top: 20px;
}

.petunjuk .item {
  display: flex;
  align-items: center; 
  gap: 8px;
  margin-bottom:10px;
}

/* Kotak warna */
.petunjuk .block {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid #ccc;
}

.block.correct { background-color: #22c55e; }  
.block.present { background-color: #eab308; }  
.block.absent { background-color: #6b7280; }  

.petunjuk p {
  font-size: 14px;
  line-height: 1.6;
}

/* Share */

.share-btn.whatsapp {
  background: #32C03C;
  margin-top: 5px;
  color: #fff;
  padding: 5px 10px 5px 10px;
  display: inline flow-root;
  border-radius: 5px;
}
.share-btn.twitter {
  background: #000000;
  margin-top: 5px;
  color: #fff;
  padding: 5px 10px 5px 10px;
  display: inline flow-root;
  border-radius: 5px;
}
.share-btn.facebook {
  background: #3B5998;
  margin-top: 5px;
  color: #fff;
  padding: 5px 10px 5px 10px;
  display: inline flow-root;
  border-radius: 5px;
}
/* FOOTER */
.footer {
    max-width: 800px;
  margin: 60px auto;
  padding: 20px;
  background: #f3f4f6;
  text-align: left;
  font-size: 14px;
  color: #6b7280;
}
.footer p {
    font-size: 12px;
    text-align:justify;
}

.footer a {
  color: #7e7d8e;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}
.home-footer {
   margin-top:40px;
}

.last-footer {
   margin-top:40px;
}