body{
  margin:0;
  font-family:Arial;
  background:#0e0e0e;
  color:#fff;
  text-align:center;
}

.intro{
  max-width:600px;
  margin:10px auto;
  opacity:0.7;
}

.grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  padding:20px;
}

.card{
  width:260px;
  cursor:pointer;
}

.card img{
  width:100%;
  border-radius:10px;
}

.viewer img{
  max-width:95%;
  margin-top:20px;
  border-radius:10px;
}

.timer{
  font-size:26px;
}

.difficulty {
  margin-top: 10px;
}

.difficulty-label {
  font-size: 14px;
  opacity: 0.6;
  margin-bottom: 4px;
  letter-spacing: 1px;
}

.stars img{
  width:26px;
}

.info{
  margin-top:10px;
  opacity:0.8;
}

.controls {
  display: flex;
  flex-direction: column !important;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

.home-btn {
  display: block;
  text-align: center;
}

.controls button,
.controls a {
  width: 80%;
  max-width: 300px;
}

.home-btn img{
  width:40px;
}

/* mobile */
@media(max-width:768px){
  .card{width:90%;}
  .timer{font-size:30px;}
  button{width:80%;}
}

.controls {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 15px;
  margin-top: 20px;
}

#nextBtn {
  width: 80%;
  max-width: 300px;
}

.home-wrapper {
  width: 80%;
  display: flex;
  justify-content: center;
}

.home-wrapper img {
  width: 40px;
  display: block;
}

/* 🔥 Фікс кнопки для мобілок */
button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 14px 28px;
  font-size: 18px;

  background: #ffffff15;
  color: #fff;

  border: 1px solid #ffffff30;
  border-radius: 10px;

  cursor: pointer;
}

/* щоб не було синіх/сірих тап-ефектів */
button:focus,
button:active {
  outline: none;
  box-shadow: none;
}

/* однаковий розмір як на ПК */
#nextBtn {
  width: 80%;
  max-width: 300px;
}