/* ============================================================
   Anagrama — tema sunset. Azulejos estilo Scrabble (creme).
   ============================================================ */

.sj-game-host:has(.ang) {
  --sj-text:           #2d2438;
  --sj-text-dim:       #5d5468;
  --sj-text-mute:      rgba(45, 36, 56, 0.42);
  --sj-bg-card:        rgba(255, 255, 255, 0.85);
  --sj-bg-elev:        rgba(255, 255, 255, 0.7);
  --sj-bg-card-hover:  rgba(255, 255, 255, 0.95);
  --sj-border:         rgba(255, 255, 255, 0.5);
  --sj-border-bright:  rgba(45, 36, 56, 0.18);
  --sj-accent:         #6b5bff;
  --sj-accent-hover:   #5347d6;
  --sj-accent-soft:    rgba(107, 91, 255, 0.12);
  --sj-gold:           #ffd93d;
  --sj-danger:         #ff3355;
  --sj-score-bg:       #fff;
  /* Azulejos: creme com aspecto de marfim, sombra baixa. */
  --ang-tile-bg:       #f4f1f9;
  --ang-tile-bg-hover: #fffaf2;
  --ang-tile-shadow:   #c2b8d2;
}
.sj-game-host:has(.ang),
body:has(.sj-game-stage) .sj-game-host:has(.ang) {
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(107,91,255,0.20), transparent 40%),
    linear-gradient(135deg, #ff7e5f 0%, #feb47b 45%, #ff6b95 100%);
}
.sj-game-stage-frame:has(.ang) {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ============ Wrapper ============ */
.ang {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 16px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
/* Reserva espaço pro teclado virtual quando visível (engine seta --sj-kb-h). */
.sj-game-host[data-kb="yes"] .ang {
  padding-bottom: calc(16px + var(--sj-kb-h, 160px));
}

.ang-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 720px;
}
.ang-game[hidden] { display: none; }

/* ============ Tópico (pill superior) ============ */
.ang-topic {
  font-family: var(--sj-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #2d2438;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 6px 14px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  min-height: 26px;
  display: inline-flex;
  align-items: center;
}
.ang-topic:empty { visibility: hidden; }

/* ============ Resposta (slots ordenados) ============ */
.ang-answer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.32);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.45),
    0 8px 28px rgba(45, 36, 56, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ang-slot { flex: 0 0 auto; }
.ang-answer.is-correct .ang-slot.is-filled { animation: ang-correct-pulse .45s ease-out both; }
.ang-answer.is-wrong   .ang-slot.is-filled { animation: ang-wrong-shake .42s ease-in-out; }

.ang-slot {
  width: var(--ang-tile, 58px);
  height: var(--ang-tile, 58px);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  border: 2px dashed rgba(255, 255, 255, 0.45);
  display: grid;
  place-items: center;
  font-family: var(--sj-font-display);
  font-weight: 900;
  font-size: calc(var(--ang-tile, 58px) * 0.5);
  line-height: 1;
  padding-top: 3px;
  box-sizing: border-box;
  color: #2d2438;
  transition: transform .14s, background .14s, border-color .14s;
}
.ang-slot.is-filled {
  background: var(--ang-tile-bg);
  border: 2px solid rgba(45, 36, 56, 0.18);
  box-shadow:
    0 3px 0 var(--ang-tile-shadow),
    0 5px 12px rgba(45, 36, 56, 0.14);
  cursor: pointer;
}
.ang-slot.is-filled:hover {
  background: var(--ang-tile-bg-hover);
  border-color: var(--sj-accent);
  transform: translateY(-2px);
}
/* Letra fixada por dica — verde, não-clicável. */
.ang-slot.is-locked,
.ang-slot.is-locked.is-filled {
  background: #c8f1d3;
  border-color: #22a544;
  color: #1a6e36;
  box-shadow:
    0 3px 0 #6ec486,
    0 5px 12px rgba(34, 165, 68, 0.25);
  cursor: not-allowed;
}
.ang-slot.is-locked:hover {
  background: #c8f1d3;
  transform: none;
}

/* ============ Pool (letras disponíveis) ============ */
.ang-pool {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  max-width: 100%;
  min-height: calc(var(--ang-tile, 58px) + 24px);
}

.ang-tile {
  width: var(--ang-tile, 58px);
  height: var(--ang-tile, 58px);
  border-radius: 10px;
  background: var(--ang-tile-bg);
  border: 2px solid rgba(45, 36, 56, 0.18);
  box-shadow:
    0 4px 0 var(--ang-tile-shadow),
    0 6px 14px rgba(45, 36, 56, 0.14);
  display: grid;
  place-items: center;
  font-family: var(--sj-font-display);
  font-weight: 900;
  font-size: calc(var(--ang-tile, 58px) * 0.5);
  line-height: 1;
  padding-top: 3px;
  box-sizing: border-box;
  color: #2d2438;
  cursor: pointer;
  transition: transform .14s, box-shadow .14s, background .14s, border-color .14s, opacity .14s;
}
.ang-tile:hover:not(.is-used):not(:disabled) {
  background: var(--ang-tile-bg-hover);
  border-color: var(--sj-accent);
  transform: translateY(-3px);
  box-shadow:
    0 7px 0 var(--ang-tile-shadow),
    0 10px 20px rgba(45, 36, 56, 0.18);
}
.ang-tile:active:not(.is-used):not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 2px 0 var(--ang-tile-shadow);
}
.ang-tile.is-used {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
}

/* ============ Ações (Verificar / Embaralhar) ============ */
.ang-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.ang-btn {
  font-family: var(--sj-font-mono);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .15s, box-shadow .15s, background .2s, opacity .2s;
}
.ang-btn--primary {
  background: var(--sj-accent);
  color: #fff;
  box-shadow: 0 3px 0 #3d2e9d, 0 6px 18px rgba(107, 91, 255, 0.35);
}
.ang-btn--primary:hover:not(:disabled) {
  background: var(--sj-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #3d2e9d, 0 10px 22px rgba(107, 91, 255, 0.4);
}
.ang-btn--primary:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: 0 2px 0 #3d2e9d;
}
.ang-btn--ghost {
  background: rgba(255, 255, 255, 0.78);
  color: #2d2438;
  box-shadow: 0 3px 0 rgba(45, 36, 56, 0.18), 0 5px 14px rgba(45, 36, 56, 0.1);
}
.ang-btn--ghost:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 rgba(45, 36, 56, 0.22), 0 8px 18px rgba(45, 36, 56, 0.14);
}
.ang-btn--ghost.ang-btn--danger {
  color: #b91d3a;
}
.ang-btn--ghost.ang-btn--danger:hover:not(:disabled) {
  background: #fff;
  color: var(--sj-danger);
  box-shadow: 0 5px 0 rgba(185, 29, 58, 0.22), 0 8px 18px rgba(185, 29, 58, 0.18);
}
.ang-btn--hint {
  background: #fff7d3;
  color: #8a6500;
  box-shadow: 0 3px 0 #d6b85a, 0 5px 14px rgba(214, 184, 90, 0.22);
}
.ang-btn--hint:hover:not(:disabled) {
  background: #fff;
  color: #6b4d00;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #d6b85a, 0 8px 18px rgba(214, 184, 90, 0.3);
}
.ang-btn--hint:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: 0 2px 0 #d6b85a;
}
.ang-btn--hint em {
  font-style: normal;
  font-weight: 900;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(138, 101, 0, 0.18);
}
.ang-btn--hint:disabled em { background: rgba(0, 0, 0, 0.12); }

.ang-btn--def {
  background: #d8edff;
  color: #08416b;
  box-shadow: 0 3px 0 #6ba7cf, 0 5px 14px rgba(107, 167, 207, 0.22);
}
.ang-btn--def:hover {
  background: #fff;
  color: #062c4a;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #6ba7cf, 0 8px 18px rgba(107, 167, 207, 0.3);
}

/* ============ Animações ============ */
@keyframes ang-correct-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  60%  { background: rgba(107, 91, 255, 0.2); }
  100% { transform: scale(1); }
}
@keyframes ang-wrong-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px);  background: rgba(255, 51, 85, 0.18); }
  60%      { transform: translateX(-4px); background: rgba(255, 51, 85, 0.18); }
  80%      { transform: translateX(4px); }
}
/* Pisca a letra correta em vermelho 3× quando o usuário desiste. */
.ang-slot.is-reveal {
  animation: ang-reveal-flash 0.5s ease-in-out 3;
  background: #ffe1e7;
  border-color: var(--sj-danger);
  color: var(--sj-danger);
  cursor: default;
}
@keyframes ang-reveal-flash {
  0%, 100% {
    background: #ffe1e7;
    color: var(--sj-danger);
    transform: scale(1);
  }
  50% {
    background: var(--sj-danger);
    color: #fff;
    transform: scale(1.05);
  }
}

/* ============ Mobile ============ */
@media (max-width: 700px) {
  .ang { padding: 10px; gap: 14px; }
  .ang-game { gap: 14px; }
  .ang-answer { padding: 6px; gap: 5px; }
  .ang-pool { gap: 7px; padding: 6px; }
  .ang-btn { font-size: 12px; padding: 10px 18px; }
}

/* Em telas bem estreitas (≤ 400px) o HUD tem 5 placares e fica apertado.
   O "Recorde" é o menos crítico durante a partida, então some. */
@media (max-width: 400px) {
  .sj-game-host:has(.ang) [data-sj-score="best"] { display: none; }
}

/* Tamanho do azulejo via JS (--ang-tile). Fallbacks por palavra grande:
   o layout() reduz quando a palavra tem 9+ letras pra evitar overflow. */