.grid {
  width: min(420px, 100%);
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  touch-action: none;
  padding: 8px;
  border-radius: 18px;
  background: linear-gradient(180deg, #12382c, #0c241d);
  box-shadow: 0 0 0 2px #f0d48a, 0 0 0 5px #6d4318;
}

.cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #071510;
  color: #fff6e8;
  font-family: Fredoka, "Trebuchet MS", sans-serif;
  font-size: clamp(13px, 3.4vw, 18px);
}

.cell.on { background: #fff6e8; color: #1b120c; }
.cell.got { color: #1b120c; }
.cell.w0 { background: #ff5c73; }
.cell.w1 { background: #ffe14a; }
.cell.w2 { background: #3ddea0; }
.cell.w3 { background: #6eb0ff; }
.cell.w4 { background: #c48bff; }
.cell.w5 { background: #ff9d42; }
.cell.got.on { outline: 2px solid #fff6e8; outline-offset: -2px; }

.words {
  width: min(420px, 100%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.words b {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .22);
  color: #f6e6d2;
}

.words b.got {
  color: #9dffe8;
  text-decoration: line-through;
}