:root{
  --bg:#0f1720; --card:#0b1220; --accent:#ffd166; --muted:#9aa7b2;
}

.app{
  background-image: url('/word-puzzle/images/bg-image.png');
  background-size: contain;
  position: relative;
  height: 448px;
  width: 672px;
  margin: 0 auto;
  transform-origin: top left;
}

#grid {
  position: absolute;
  top: 133px;
  left: 165px;
}

/* GRID */

.grid{
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  padding:12px;
  border-radius:10px;
  width: max-content;
}
.cell{
  width:40px;
  height:40px;
  font-size:28px;
  font-weight:700;
  letter-spacing:1px;
  border-radius:8px;
  background:rgba(230,230,230);
  color:transparent;
  transition:background .18s, color .18s, transform .08s;
  user-select:none;
  border:1px solid rgba(100,100,100);
}
.cell.revealed{ color: #000000; background: rgba(240,240,240); }
.cell.block{ background:transparent; border: none; }

.app .btn {
  border: 1px solid #000000;
}

.info{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:220px;
}
h1{
  margin:0;font-size:20px;
}
p.muted{ margin:0; color:var(--muted); font-size:13px; }

.panel-word {
  align-items:center;
  justify-content:center;
}

.circle-wrap {
  position: absolute;
  bottom: 10px;
  width: 100%;
}

#currentWord {
  color: #000000;
  position: absolute;
  bottom: 58px;
  font-weight: 900;
  width: 100%;
  left: 0;
  font-size: 30px;
}

/* Circle letters */
.letter-btn{
  --size:50px;
  width:var(--size); height:var(--size);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:24px;
  cursor:pointer;
  display: inline-block;
  border:none;
  outline:none;
  margin: 0px 3px;

  transition:transform .12s, box-shadow .12s, opacity .12s;
  box-shadow: 0 6px 18px rgba(2,8,20,0.6);
  user-select:none;
}
.letter-btn:active{ transform:scale(.94); }
.letter-btn.disabled{ opacity:.35; pointer-events:none; }

.current{
  font-size:31px;
  height: 50px;
}

.text-bottom {
  margin-top:5px;
  font-size:13px;
  text-align:center;
}

#btnShuffle {
  position: absolute;
  left: 110px;
  bottom: 13px;
  padding: 11px;
  width: 65px;
  cursor: pointer;
}

#btnHint {
  position: absolute;
  right: 110px;
  bottom: 13px;
  padding: 11px;
  width: 65px;
  cursor: pointer;
}

.done-modal, .done-modal img {
  border-radius: 10px;
}

.done-modal .btn-close {
    position: absolute;
    right: 10px;
    top: 10px;
}

.done-modal span {
  position: absolute;
  right: 40px;
  color: #000000;
  font-size: 175px;
}

@media (max-width: 768px) {
  .app {
    transform: scale(0.74);
  }
  .text-bottom {
    margin-top: -100px;
  }
}

@media (max-width: 537px) {
  .app {
    transform: scale(0.7);
  }
  .text-bottom {
    margin-top: -125px;
  }
}

@media (max-width: 511px) {
  .app {
    transform: scale(0.6);
  }
  .text-bottom {
    margin-top: -174px;
  }
}

@media (max-width: 443px) {
  .app {
    transform: scale(0.5);
  }
}