/* Palavra Secreta */

.jogo-palavra-secreta {
  --largura-jogo: 560px;
}

.ps {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 560px;
  margin: 0 auto;
}

.ps-legenda {
  display: grid;
  gap: 6px;
  justify-self: stretch;
  font-size: .9rem;
}

.ps-legenda span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.ps-legenda .ps-letra {
  width: 1.7rem;
  font-size: .9rem;
  font-style: normal;
  border-radius: 6px;
}

.ps-quadro {
  display: grid;
  gap: 8px;
}

.ps-linha {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.ps-letra {
  display: grid;
  place-items: center;
  width: min(3.6rem, 15vw);
  aspect-ratio: 1;
  border: 2px solid var(--linha);
  border-radius: 10px;
  background: var(--cartao);
  color: var(--tinta);
  font-weight: 700;
  font-size: min(1.9rem, 8vw);
  line-height: 1;
  text-transform: uppercase;
}

.ps-linha.atual .ps-letra {
  border-color: var(--linha-forte);
}

.ps-letra.digitada {
  border-color: var(--tinta);
}

.ps-letra.certo,
.ps-letra.existe,
.ps-letra.nao {
  border-color: transparent;
  color: var(--sobre-t);
}

.ps-letra.certo { background: var(--t-certo); }
.ps-letra.existe { background: var(--t-existe); }
.ps-letra.nao { background: var(--t-nao); }

.ps-aviso {
  text-align: center;
}

/* teclado na tela */

.ps-teclado {
  display: grid;
  gap: 8px;
  width: 100%;
}

.ps-linha-teclas {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.ps-tecla {
  flex: 1 1 0;
  min-width: 0;
  max-width: 3.2rem;
  min-height: 3.3rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--linha);
  color: var(--tinta);
  font: inherit;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
}

.ps-tecla:active {
  transform: translateY(1px);
}

.ps-tecla.larga {
  flex: 1.7 1 0;
  max-width: 5.6rem;
  font-size: .85rem;
}

@media (max-width: 480px) {
  .ps-tecla.larga { font-size: .68rem; }
}

.ps-tecla.certo,
.ps-tecla.existe,
.ps-tecla.nao {
  color: var(--sobre-t);
}

.ps-tecla.certo { background: var(--t-certo); }
.ps-tecla.existe { background: var(--t-existe); }
.ps-tecla.nao { background: var(--t-nao); }

/* miniatura do início */

.mini-ps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  width: 92%;
}

.mini-ps span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 5px;
  color: var(--sobre-t);
  font-weight: 700;
  font-size: .7rem;
  line-height: 1;
}

@media (max-width: 480px) {
  .mini-ps span { font-size: .5rem; }
}

.mini-ps .certo { background: var(--t-certo); }
.mini-ps .existe { background: var(--t-existe); }
.mini-ps .nao { background: var(--t-nao); }