/* ============================================================
   Cruzadinhas — tema sunset.
   ============================================================ */

.sj-game-host:has(.crz) {
  --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;
}
.sj-game-host:has(.crz),
body:has(.sj-game-stage) .sj-game-host:has(.crz) {
  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(.crz) {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ============ Wrapper ============ */
.crz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px;
  height: 100%;
  box-sizing: border-box;
  /* Palco scrollável verticalmente — no mobile tabuleiro + lista podem
     ultrapassar a altura da viewport. */
  overflow-y: auto;
}

.crz-game {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
}
.crz-game[hidden] { display: none; }

/* ============ Grid ============ */
.crz-board-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.crz-board {
  display: grid;
  /* cols/rows + --crz-cell setados via JS */
  gap: 2px;
  padding: 8px;
  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);
  user-select: none;
}

.crz-cell {
  position: relative;
  width: var(--crz-cell, 36px);
  height: var(--crz-cell, 36px);
  border: 0;
  padding: 0;
  background: transparent;
  font-family: var(--sj-font-display);
  font-weight: 900;
  font-size: calc(var(--crz-cell, 36px) * 0.55);
  line-height: 1;
  color: #2d2438;
  cursor: pointer;
  display: grid; place-items: center;
  border-radius: 3px;
  box-sizing: border-box;
}
.crz-cell.is-block {
  background: rgba(45, 36, 56, 0.78);
  cursor: default;
  border-radius: 3px;
}
.crz-cell.is-open {
  background: #fff;
  transition: background .12s, box-shadow .12s, color .12s;
}
.crz-cell.is-open:hover { background: #fffdf3; }
.crz-cell.is-active {
  background: var(--sj-accent);
  color: #fff;
}
.crz-cell.is-word {
  background: var(--sj-accent-soft);
  color: var(--sj-accent);
}
.crz-cell.is-locked {
  background: #b7f1c5;
  color: #1a6d34;
  cursor: default;
}
.crz-cell.is-active.is-locked {
  /* mantém destaque verde mesmo se a célula travada estiver "ativa" */
  background: #8fdfa3;
  color: #0d4a22;
}
/* Células reveladas via "Desistir" ficam vermelhas pra distinguir das que
   o jogador de fato acertou. */
.crz-cell.is-locked.is-revealed {
  background: rgba(255, 51, 85, 0.16);
  color: var(--sj-danger);
}
.crz-cell.is-locked.is-revealed .crz-num { color: rgba(180, 20, 40, 0.6); }

/* Número da palavra no canto superior esquerdo. */
.crz-cell .crz-num {
  position: absolute;
  top: 1px;
  left: 2px;
  font-family: var(--sj-font-mono);
  font-weight: 700;
  font-size: calc(var(--crz-cell, 36px) * 0.26);
  line-height: 1;
  color: rgba(45, 36, 56, 0.6);
  pointer-events: none;
}
.crz-cell.is-active .crz-num { color: rgba(255, 255, 255, 0.8); }
.crz-cell.is-locked .crz-num { color: rgba(13, 74, 34, 0.6); }

/* ============ Lista de dicas ============ */
.crz-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  width: 280px;
  flex: 0 0 280px;
  align-self: stretch;
  min-height: 0;
}
.crz-clues {
  background: rgba(255, 255, 255, 0.78);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: var(--sj-font-sans, system-ui);
  color: #2d2438;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.crz-clues-group { display: flex; flex-direction: column; gap: 4px; }
.crz-clues-title {
  margin: 0;
  font-family: var(--sj-font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sj-accent);
}
.crz-clues-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.crz-clues-list li {
  display: flex;
  gap: 6px;
  align-items: baseline;
  padding: 6px 8px;
  border-radius: 6px;
  font-family: var(--sj-font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.crz-clues-list li:hover { background: rgba(107, 91, 255, 0.08); }
.crz-clues-list li.is-active {
  background: var(--sj-accent);
  color: #fff;
}
.crz-clues-list li.is-active .crz-clue-num { color: rgba(255,255,255,0.85); }
.crz-clues-list li.is-solved {
  color: #1a6d34;
  background: rgba(183, 241, 197, 0.55);
  text-decoration: line-through;
  cursor: default;
}
/* Dicas reveladas via "Desistir" — combina com as células vermelhas do grid. */
.crz-clues-list li.is-revealed {
  color: var(--sj-danger);
  background: rgba(255, 51, 85, 0.12);
  text-decoration: line-through;
  cursor: default;
}
.crz-clues-list li.is-revealed .crz-clue-num { color: var(--sj-danger); }
.crz-clue-num {
  font-family: var(--sj-font-mono);
  font-weight: 800;
  font-size: 11px;
  min-width: 18px;
  color: var(--sj-accent);
  flex: 0 0 auto;
}

/* ============ Mobile ============ */
@media (max-width: 760px) {
  /* O .sj-game-host tem padding 12px global em mobile (layout.css). Reduzimos
     aqui só pra cruzadinhas pra liberar largura pro tabuleiro, mantendo um
     respiro mínimo nas bordas. */
  body:has(.sj-game-stage) .sj-game-host:has(.crz) { padding: 8px; }
  .crz { padding: 0; gap: 6px; justify-content: flex-start; }
  .crz-game {
    flex-direction: column;
    gap: 6px;
    height: auto;
    flex: 0 0 auto;
    width: 100%;
  }
  .crz-board-wrap { width: 100%; }
  .crz-board { padding: 2px; border-radius: 10px; }
  /* Sidebar continua visível — palco ganha scroll vertical (já em .crz).
     No mobile, a lista de dicas NÃO scrolla internamente: ela abre inteira
     e o scroll do `.crz` empurra o grid pra cima naturalmente. */
  .crz-side { width: 100%; align-self: stretch; flex: 0 0 auto; min-height: 0; }
  .crz-clues {
    max-height: none;
    overflow-y: visible;
    flex: 0 0 auto;
    min-height: 0;
  }
}

/* Quando o teclado virtual está visível, reserva sua altura (engine atualiza
   --sj-kb-h no host) pra o tabuleiro não ficar ocluído. */
.sj-game-host[data-kb="yes"] .crz {
  padding-bottom: var(--sj-kb-h, 160px);
}