body.stat-mode {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

.stats-background {
  background-color: #272630;
  min-height: 0vh;
  padding: 1px;
}


.stats-container {
  display: flex;
  gap: 6px;
  margin-top: 40px;
  flex-wrap: wrap;
  justify-content: center;
  
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.diamondd {
  width: 37px;
  height: 37px;
  border: 1.2px solid #007a7a;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: changeColor 5s infinite alternate ease-in-out;
  box-shadow: 0 0 4px rgba(0,0,0,0.15);
}

@keyframes changeColor {
  0%   { background-color: #fff9db; } /* Och limon sariq */
  25%  { background-color: #fff3c4; } /* Pastel sariq */
  50%  { background-color: #ffe8a3; } /* Iliq och sariq */
  75%  { background-color: #ffedc2; } /* Krem-sariq aralash */
  100% { background-color: #faf3dd; } /* Qumrang-sariq */
}

.count {
  transform: rotate(-45deg);
  font-size: 16px;
  color: #007a7a;
  font-weight: bold;
}
.label {
  margin-top: 4px;
  font-size: 11px;
  color: #007a7a;
  border: 1px solid #007a7a;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 500;
  text-align: center;
  background-color: #fee466;
}
#logContainer {
  width: 100%;
  padding: 20px;
}
#logTable {
  width: 95%;
  margin: 40px auto;
  border-collapse: collapse;
  display: none;
}
#logTable thead {
  background: #007a7a;
  color: white;
}
#logTable th, #logTable td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  font-size: 14px;
}
#resetBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #007a7a;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  z-index: 1000;
}
@media (max-width: 500px) {
  .diamond { width: 36px; height: 36px; }
  .count { font-size: 11px; }
  .label { font-size: 9px; padding: 2px 6px; }
  .container { gap: 10px; }
}