/* Descubra a Palavra: figura em cima, vagas da palavra no meio, peças embaralhadas embaixo (mesmo visual do portal da home) */
.balao{font-size:clamp(19px,2.4dvh + .6vw,28px)}
.dica-milo{display:block;margin-top:4px;font-size:.82em;color:var(--milo-royal)}

.mesa-palavra{width:100%;height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto auto;justify-items:center;align-content:center;gap:clamp(10px,2.2dvh,22px)}
.figura{height:100%;max-height:clamp(110px,26dvh,240px);aspect-ratio:1;padding:6%;border-radius:26px;background:var(--branco);
  border:3px solid var(--noite-3);box-shadow:0 6px 0 var(--noite-3),0 12px 22px rgba(15,23,42,.18)}
.figura img{width:100%;height:100%;object-fit:contain}

.vagas-palavra,.pecas{--lado:clamp(27px,min(calc((100vw - 40px) / var(--n) - 7px),9dvh),64px);display:flex;flex-wrap:nowrap;justify-content:center;gap:6px}
.pecas{flex-wrap:wrap;max-width:calc(var(--n) * (var(--lado) + 6px))}
.vaga-letra{display:grid;place-items:center;width:var(--lado);height:calc(var(--lado) * 1.1);border-radius:14px;
  border:3px dashed rgba(32,42,179,.45);background:rgba(255,255,255,.55);font-family:var(--excon);font-weight:900;font-size:calc(var(--lado) * .6);color:var(--cor,var(--noite-3))}
.vaga-letra.cheia{border:4px solid var(--cor);background:var(--lua);animation:letra-encaixa .35s var(--mola)}
.vaga-letra.certa{animation:letra-comemora .5s var(--mola) both}
@keyframes letra-encaixa{from{transform:scale(.6)}to{transform:none}}
@keyframes letra-comemora{0%{transform:none}40%{transform:translateY(-12px) scale(1.12)}100%{transform:none}}

.peca{width:var(--lado);height:calc(var(--lado) * 1.1);padding:0;border-radius:14px;border:4px solid var(--cor);background:var(--lua);color:var(--cor);
  font-family:var(--excon);font-weight:900;font-size:calc(var(--lado) * .6);rotate:var(--giro);box-shadow:0 5px 0 rgba(15,23,42,.3);
  transition:transform .15s var(--ease),opacity .2s var(--ease)}
.peca:active{transform:translateY(3px)}
.peca.entra{animation:carta-entra .45s var(--mola) both;animation-delay:calc(var(--ordem,0) * 70ms)}
.peca.balanca{animation:carta-balanca .5s var(--ease)}
.peca.usada{opacity:.18;transform:scale(.85);pointer-events:none}
.peca.dica{box-shadow:0 5px 0 var(--nami-fundo),0 0 0 5px var(--nami),0 0 28px 8px rgba(250,189,5,.75);animation:carta-brilha 1.1s ease-in-out infinite}

@media (orientation:landscape) and (min-aspect-ratio:5/4){
  .figura{max-height:clamp(100px,24dvh,220px)}
}
@media (prefers-reduced-motion:reduce){
  .vaga-letra.cheia,.vaga-letra.certa,.peca.dica,.peca.entra{animation:none}
}