.game-container-wp{width:500px; min-height:50vh; max-width:100%;}
#game-container {
  width: 100%;
  max-width: 500px;
  margin: 20px auto;
  display: grid;
  gap: 5px;
}
.cell {
  background-color: #A2A269;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s, transform 0.5s;
  aspect-ratio: 1/1;
  cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-drag: none;
-webkit-user-drag: none;
touch-action: manipulation;
position: relative;
}
.cell.correct {
  background-color: #2F2FE1;
}
.cell.clicked {
  pointer-events: none;
}
#status {
  margin: 10px;
}
#result, #start-screen {
  display: none;
  margin-top: 20px;
}
button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background: #2F2FE1;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
}
#timer {
  font-weight: bold;
  color: #e12f2f;
}
.modal {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 999;
}
.modal-content {
background: #fff;
padding: 20px;
border-radius: 10px;
text-align: center;
width: 90%;
max-width: 400px;
}
.modal-error .modal-content { border: 3px solid #e12f2f; }
.modal-warning .modal-content { border: 3px solid #e1b32f; }
.modal-success .modal-content { border: 3px solid #2fe12f; }