/* =====================================================================
   Sala de Jogos — CSS comum a todos os jogos (engine).
   Regras específicas do site (index, ranking, etc) ficam em layout.css.
   Regras específicas de cada jogo ficam em games/<slug>/game.css.
   ===================================================================== */

/* =====================================================================
   1. HUD (topo do palco)
   ===================================================================== */
.sj-hud {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.sj-scoreboard {
  display: flex;
  gap: 2px;
  min-width: 0;
  justify-content: center;
}
.sj-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}
.sj-hud.is-empty .sj-scoreboard { display: none; }

/* =====================================================================
   2. Scores (placares dentro do scoreboard)
   ===================================================================== */
.sj-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 70px;
  padding: 9px 14px;
  border: 0;
  border-radius: 10px;
  /* --sj-score-bg permite que cada jogo defina sua própria cor de fundo
     dos placares (sunset usa branco puro pra contraste com o gradiente). */
  background: var(--sj-score-bg, var(--sj-bg-elev));
  /* borda suave via box-shadow inset — a cor é setada pelas variantes
     abaixo via --sj-score-ring (sem precisar redeclarar box-shadow). */
  box-shadow:
    inset 0 0 0 3px var(--sj-score-ring, rgba(45, 36, 56, 0.18)),
    0 2px 10px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.sj-score-label {
  font-family: var(--sj-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--sj-text-dim);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.sj-score-value {
  font-family: var(--sj-font-display);
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  color: var(--sj-text);
}
/* Variantes de cor — passadas via SJ.colors no JS. Cada variante define
   o anel via --sj-score-ring (consumido pelo box-shadow do .sj-score). */
.sj-score--accent  .sj-score-label { color: var(--sj-accent); }
.sj-score--gold    .sj-score-label { color: var(--sj-gold, #ffcc00); }
.sj-score--danger  .sj-score-label { color: var(--sj-danger, #ff3355); }
.sj-score--neutral .sj-score-label { color: var(--sj-text-dim); }
.sj-score--accent  { --sj-score-ring: rgba(107, 91, 255, 0.75); }
.sj-score--gold    { --sj-score-ring: rgba(255, 217, 61, 0.75); }
.sj-score--danger  { --sj-score-ring: rgba(255,  51, 85, 0.75); }
.sj-score--neutral { --sj-score-ring: rgba( 45, 36, 56, 0.75); }
/* Indicador "vez do jogador" — score pulsa quando .is-turn está ativo.
   Usado em jogos multiplayer (memoria CPU/PvP) pra destacar quem joga. */
.sj-score.is-turn { animation: sj-score-pulse 1.5s ease-in-out infinite; }
@keyframes sj-score-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* =====================================================================
   3. Botões fixos (restart, sound-toggle, pause)
   ===================================================================== */
.sj-btn {
  background: var(--sj-bg-elev);
  border: 1px solid var(--sj-border-bright);
  color: var(--sj-text);
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.sj-btn:hover { border-color: var(--sj-accent); color: var(--sj-accent); }
.sj-btn:active { background: var(--sj-bg-card-hover); }
.sj-btn svg { display: block; }
.sj-btn[hidden] { display: none !important; }
/* Desistir: laranja pra chamar atenção (warning sem ser destrutivo, o que
   fica reservado ao restart). Respiro extra dos vizinhos. */
.sj-btn[data-sj-role="giveup"] {
  margin-left: 10px;
  margin-right: 4px;
  background: #f97316;
  border-color: #f97316;
  color: #fff;
}
.sj-btn[data-sj-role="giveup"]:hover:not(:disabled) {
  background: #ea580c;
  border-color: #ea580c;
  color: #fff;
}
.sj-btn[data-sj-role="giveup"] svg { stroke: #fff; }
/* Fim de partida: fica cinza+inativo em vez de sumir do HUD. */
.sj-btn[data-sj-role="giveup"]:disabled {
  background: rgba(45, 36, 56, 0.15);
  border-color: rgba(45, 36, 56, 0.2);
  color: rgba(45, 36, 56, 0.4);
  cursor: not-allowed;
}
.sj-btn[data-sj-role="giveup"]:disabled svg { stroke: rgba(45, 36, 56, 0.4); }

/* Botão CPU (toggle 2 estados) — engine-owned via enableCpuToggle().
   Acende quando 'cpu'; risca diagonal quando 'pvp'. */
.sj-btn.sj-btn--cpu { position: relative; }
.sj-btn.sj-btn--cpu[data-mode="cpu"] {
  background: var(--sj-accent);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--sj-accent), 0 2px 8px rgba(107, 91, 255, 0.3);
}
.sj-btn.sj-btn--cpu[data-mode="pvp"] { color: rgba(45, 36, 56, 0.45); }
.sj-btn.sj-btn--cpu[data-mode="pvp"]::after {
  content: '';
  position: absolute;
  left: 18%; right: 18%; top: 50%;
  height: 2.5px;
  background: var(--sj-danger, #ff3355);
  border-radius: 2px;
  transform: translateY(-1px) rotate(-32deg);
  transform-origin: center;
  pointer-events: none;
}

/* Botão Ranking (taça) — só aparece no mobile (sidebar já mostra em desktop) */
@media (min-width: 901px) {
  .sj-btn.sj-btn--ranking { display: none; }
}
/* Modal de ranking — card mais alto, lista scrollável */
.sj-modal-card--ranking {
  width: 100%;
  max-width: 420px;
  max-height: 85%;
  display: flex;
  flex-direction: column;
}
.sj-ranking-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 4px -8px 8px;
  padding: 0 8px;
}

/* Restart = primary CTA */
.sj-btn--restart {
  background: var(--sj-accent);
  border-color: var(--sj-accent);
  color: #fff;
}
.sj-btn--restart:hover {
  background: var(--sj-accent-hover);
  border-color: var(--sj-accent-hover);
  color: #fff;
}
.sj-btn--restart svg { stroke: #fff; }

/* =====================================================================
   4. Stage (área onde o jogo renderiza)
   ===================================================================== */
.sj-stage {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Nada vaza do stage. Jogos que precisam de scroll criam um container
     interno com overflow:auto. */
  overflow: hidden;
}

/* =====================================================================
   5. Mensagens — overlay sobre o stage
   ===================================================================== */
.sj-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  padding: 16px;
  z-index: 10;
}
.sj-overlay.is-active        { display: flex; }
.sj-overlay.is-clickable     { pointer-events: auto; cursor: pointer; }
/* Overlay bloqueante — usado no modo actionInline. Bloqueia cliques no stage
   embaixo (senão o board continua interativo pós-fim de partida). O card e o
   botão herdam o pointer-events: auto normalmente. */
.sj-overlay.is-blocking      { pointer-events: auto; }
.sj-overlay-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px 32px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 16px);
  text-align: center;
  animation: sj-overlay-card-in .28s cubic-bezier(.18,.89,.32,1.28);
}
@keyframes sj-overlay-card-in {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.sj-overlay-main {
  font-family: var(--sj-font-display);
  font-weight: 900;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.05;
  color: #2d2438;
}
.sj-overlay-main--accent { color: #6b5bff; }
.sj-overlay-main--gold   { color: var(--sj-gold, #ffcc00); }
.sj-overlay-main--danger { color: var(--sj-danger, #ff3355); }
.sj-overlay-sub {
  font-family: var(--sj-font-mono);
  font-size: 12px;
  font-weight: 500;
  color: #5d5468;
  line-height: 1.45;
  letter-spacing: 0.04em;
  max-width: 320px;
}
/* Botão inline dentro do card (overlay com actionInline: true).
   pointer-events: auto é necessário porque o .sj-overlay tem none por default
   (só vira auto via .is-clickable, que nao aplicamos nesse fluxo). */
.sj-overlay-action {
  pointer-events: auto;
  margin-top: 6px;
  background: var(--sj-accent, #6b5bff);
  color: #fff;
  border: 0;
  border-radius: 9999px;
  padding: 12px 26px;
  font-family: var(--sj-font-display);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform .08s, filter .12s;
  touch-action: manipulation;
}
@media (hover: hover) {
  .sj-overlay-action:hover { filter: brightness(1.08); }
}
.sj-overlay-action:active { transform: scale(0.96); }
/* Linha de botões (ex: [Repetir]  [Próximo nível]) */
.sj-overlay-action-row {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
  justify-content: center;
  pointer-events: auto;
}
.sj-overlay-action-row .sj-overlay-action { margin-top: 0; }
/* Botão secundário: outline, mais discreto */
.sj-overlay-action--secondary {
  background: transparent;
  color: #2d2438;
  box-shadow: inset 0 0 0 2px rgba(45, 36, 56, 0.35);
}
@media (hover: hover) {
  .sj-overlay-action--secondary:hover { background: rgba(45, 36, 56, 0.06); filter: none; }
}

/* Botão flutuante "Nova partida" — etapa 2 do fim de jogo.
   Z-index acima do overlay (10) e do pause-veil pra não ser ocluído. */
.sj-newround-btn {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  background: var(--sj-accent, #6b5bff);
  color: #fff;
  border: 0;
  border-radius: 9999px;
  padding: 14px 28px;
  font-family: var(--sj-font-display);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.18);
  animation: sj-newround-in .26s cubic-bezier(.18,.89,.32,1.28);
  touch-action: manipulation;
}
.sj-newround-btn[hidden] { display: none; }
.sj-newround-btn:hover  { filter: brightness(1.08); }
.sj-newround-btn:active { transform: translateX(-50%) scale(0.96); }
@keyframes sj-newround-in {
  from { transform: translate(-50%, 14px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}

/* =====================================================================
   6. Teclado virtual — SJ.keyboard
   ===================================================================== */
.sj-keyboard {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  padding: 2px 0 calc(2px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(45, 36, 56, 0.14);
  display: flex;
  flex-direction: column;
  gap: 0;
  user-select: none;
  touch-action: manipulation;
}
.sj-keyboard[hidden] { display: none; }
.sj-kb-row {
  display: flex;
  justify-content: center;
  gap: 0;
}
/* Teclas "colapsadas": sem gap, sem shadow, separadas só por borda fina. */
.sj-kb-key {
  flex: 1 1 0;
  min-width: 0;
  max-width: 44px;
  height: 34px;
  border: 0;
  border-right: 1px solid rgba(45, 36, 56, 0.16);
  border-bottom: 1px solid rgba(45, 36, 56, 0.10);
  border-radius: 0;
  background: transparent;
  color: #2d2438;
  font-family: var(--sj-font-display);
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
  box-shadow: none;
  padding: 0 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
  line-height: 1;
}
.sj-kb-key:last-child { border-right: 0; }
.sj-kb-row:last-child .sj-kb-key { border-bottom: 0; }
/* Quando o ENVIAR está hidden via CSS, ele ainda é o :last-child do DOM, então
   o "M" mantinha border-right. Remove dele também nesse caso. */
.sj-keyboard:not(.has-submit) .sj-kb-row:last-child .sj-kb-key:nth-last-child(2) {
  border-right: 0;
}
.sj-kb-key.is-press,
.sj-kb-key:active { background: rgba(107, 91, 255, 0.18); }
/* Estados de feedback (jogos tipo forca usam via SJ.keyboard.setKeyState) */
.sj-kb-key.is-hit {
  background: var(--sj-accent, #6b5bff);
  color: #fff;
  animation: sj-kb-hit .22s ease-out;
}
.sj-kb-key.is-miss {
  background: rgba(255, 51, 85, 0.10);
  color: rgba(45, 36, 56, 0.4);
  text-decoration: line-through;
  cursor: default;
}
.sj-kb-key.is-disabled { opacity: 0.4; cursor: default; }
@keyframes sj-kb-hit {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.sj-kb-key--util {
  flex: 1.5 1 0;
  max-width: 60px;
  color: #4a4258;
}
.sj-kb-key--submit {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #4a4258;
}
/* Sem onSubmit: esconde o botão Enviar */
.sj-keyboard:not(.has-submit) .sj-kb-key--submit { display: none; }
@media (min-width: 600px) {
  .sj-kb-key { font-size: 19px; height: 40px; max-width: 50px; }
  .sj-kb-key--util { max-width: 76px; }
  .sj-kb-key--submit { font-size: 12px; }
}

/* Hint = pill discreto a 75% da altura do stage (não bloqueia visão) */
.sj-hint {
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 90%;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(60, 66, 78, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: var(--sj-font-mono);
  font-size: 12px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.05em;
  z-index: 11;
  cursor: pointer;
  pointer-events: auto;
}
.sj-hint[hidden] { display: none !important; }

/* =====================================================================
   6. Toasts (canto, efêmeros)
   ===================================================================== */
.sj-toast-stack {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse; /* mais novo aparece embaixo, empurra anteriores pra cima */
  align-items: center;
  gap: 8px;
  z-index: 1000;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}
.sj-toast {
  background: rgba(60, 66, 78, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--sj-text);
  font-family: var(--sj-font-mono);
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
  animation: sj-toast-in .25s ease-out;
}
.sj-toast.is-leaving { animation: sj-toast-out .25s ease-in forwards; }
.sj-toast--accent  { border-color: var(--sj-accent); }
.sj-toast--danger  { border-color: var(--sj-danger, #ff3355); }
@keyframes sj-toast-in {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes sj-toast-out {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(24px); opacity: 0; }
}

/* =====================================================================
   7. Modal (full-page, centralizado)
   ===================================================================== */
.sj-modal {
  /* Position: fixed → cobre o viewport inteiro (HUD, header e tudo mais).
     A intenção é ser verdadeiramente modal: nada interativo por baixo. */
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  z-index: 2000;
  padding: 24px;
  box-sizing: border-box;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* O modal vive no body (fora de .sj-game-host), então as CSS vars do tema
     sunset não cascateiam até aqui. Reseta o tema localmente pra que o card
     sempre seja branco + texto escuro, independente da página. */
  --sj-text:          #2d2438;
  --sj-text-dim:      #5d5468;
  --sj-text-mute:     rgba(45, 36, 56, 0.42);
  --sj-bg-card:       #fff;
  --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-modal.is-open { display: flex; }
.sj-modal-card {
  background: #fff;
  color: var(--sj-text);
  border: 1px solid var(--sj-border-bright);
  border-radius: 14px;
  padding: 28px 24px;
  max-width: 400px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.sj-modal-title {
  font-family: var(--sj-font-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.2;
  color: var(--sj-text);
  margin: 0;
}
.sj-modal-body {
  font-family: var(--sj-font-mono);
  font-size: 13px;
  color: var(--sj-text-dim);
  line-height: 1.5;
}
.sj-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}
.sj-modal-btn {
  padding: 10px 20px;
  border-radius: 6px;
  font-family: var(--sj-font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  border: 1px solid var(--sj-border-bright);
  background: transparent;
  color: var(--sj-text-dim);
  transition: all .15s;
}
.sj-modal-btn:hover { color: var(--sj-text); border-color: var(--sj-accent); }
.sj-modal-btn--primary {
  background: var(--sj-accent);
  border-color: var(--sj-accent);
  color: #fff;
}
.sj-modal-btn--primary:hover {
  background: var(--sj-accent-hover);
  border-color: var(--sj-accent-hover);
  color: #fff;
}
/* Modo seleção: ambos botões com mesmo visual (outline neutro), atual
   ganha destaque sutil + ✓ no texto (prepend feito pelo JS). */
.sj-modal-actions--selection .sj-modal-btn,
.sj-modal-actions--selection .sj-modal-btn--primary {
  background: transparent;
  color: var(--sj-text, #2d2438);
  border: 1px solid rgba(45, 36, 56, 0.22);
}
.sj-modal-actions--selection .sj-modal-btn:hover,
.sj-modal-actions--selection .sj-modal-btn--primary:hover {
  background: rgba(45, 36, 56, 0.06);
  border-color: rgba(45, 36, 56, 0.38);
  color: var(--sj-text, #2d2438);
}
.sj-modal-actions--selection .sj-modal-btn[data-current],
.sj-modal-actions--selection .sj-modal-btn--primary[data-current] {
  background: var(--sj-accent-soft, rgba(107,91,255,0.12));
  border-color: var(--sj-accent, #6b5bff);
  color: var(--sj-accent, #6b5bff);
}
.sj-modal-btn { box-sizing: border-box; }

/* Picker — modal de seleção rica (cards com title/sub/icon). Usado por
   SJ.message.picker. Compartilha o backdrop + card do modal padrão. */
.sj-modal-card--picker {
  max-width: 520px;
  text-align: center;
}
.sj-modal-card--picker .sj-modal-body {
  text-align: center;
}
/* Grupo de opções: section com título opcional + linha de cards. Em modo
   "single" (sem groups), só tem um único grupo sem título. */
.sj-picker-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sj-picker-group-title {
  font-family: var(--sj-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--sj-text-dim);
  text-align: left;
  margin: 0;
}
.sj-picker-options {
  display: grid;
  /* --cols injetado inline pelo JS pra suportar 2-N opções */
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 8px;
}
.sj-picker-opt {
  background: #fff;
  border: 0;
  border-radius: 10px;
  padding: 14px 8px;
  font-family: var(--sj-font-mono);
  color: var(--sj-text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform .12s, box-shadow .15s;
  box-shadow:
    inset 0 0 0 1.5px rgba(45, 36, 56, 0.10),
    0 2px 6px rgba(45, 36, 56, 0.06);
}
.sj-picker-opt:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1.5px var(--sj-accent),
    0 6px 14px rgba(45, 36, 56, 0.10);
}
.sj-picker-opt.is-current {
  background: var(--sj-accent);
  color: #fff;
  box-shadow:
    inset 0 0 0 1.5px var(--sj-accent),
    0 4px 12px rgba(107, 91, 255, 0.35);
}
.sj-picker-opt.is-current .sj-picker-opt-title::before { content: '✓ '; }
.sj-picker-opt-icon  { font-size: 22px; line-height: 1; }
.sj-picker-opt-title { font-size: 14px; font-weight: 700; }
.sj-picker-opt-sub   { font-size: 11px; opacity: 0.75; }
/* Wrapper do botão "Começar" — só aparece em modo groups */
.sj-picker-confirm {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}
.sj-picker-confirm .sj-modal-btn { min-width: 140px; }
.sj-modal-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Mobile estreito: empilha vertical (primário em cima, padrão CTA mobile),
   reduz padding e título pra caber em viewport bem estreito. */
@media (max-width: 400px) {
  .sj-modal       { padding: 12px; }
  .sj-modal-card  { padding: 20px 18px; gap: 12px; }
  .sj-modal-title { font-size: 18px; word-break: break-word; }
  .sj-modal-body  { word-break: break-word; }
  .sj-modal-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .sj-modal-btn { width: 100%; padding: 12px 14px; }
  .sj-picker-opt { padding: 10px 6px; }
}

/* =====================================================================
   7b. Tour (onboarding por elemento)
   ===================================================================== */
.sj-tour-target {
  position: relative !important;
  z-index: 3000 !important;
}
.sj-tour-target::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 3px solid var(--sj-gold, #ffd93d);
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(15, 8, 30, 0.6);
  pointer-events: none;
  animation: sj-tour-pulse 1.5s ease-in-out infinite;
}
@keyframes sj-tour-pulse {
  0%,100% { box-shadow: 0 0 0 9999px rgba(15,8,30,0.6), 0 0 0 0  rgba(255,217,61,0.55); }
  50%     { box-shadow: 0 0 0 9999px rgba(15,8,30,0.6), 0 0 0 12px rgba(255,217,61,0); }
}
.sj-tour-bubble {
  position: fixed;
  background: #fff;
  color: #2d2438;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.32);
  max-width: 320px;
  width: calc(100vw - 32px);
  z-index: 5000;
  animation: sj-tour-bubble-in .25s ease-out;
}
@keyframes sj-tour-bubble-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.sj-tour-counter {
  font-family: var(--sj-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8d8398;
  margin-bottom: 6px;
}
.sj-tour-title {
  font-family: var(--sj-font-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 6px;
  color: #2d2438;
}
.sj-tour-body {
  font-family: var(--sj-font-body, system-ui);
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 14px;
  color: #5d5468;
}
.sj-tour-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.sj-tour-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-family: var(--sj-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  border: 1px solid rgba(45,36,56,0.2);
  background: transparent;
  color: #5d5468;
  transition: all .15s;
}
.sj-tour-btn:hover { color: #2d2438; border-color: rgba(45,36,56,0.4); }
.sj-tour-btn--primary {
  background: var(--sj-accent, #6b5bff);
  border-color: var(--sj-accent, #6b5bff);
  color: #fff;
}
.sj-tour-btn--primary:hover {
  background: var(--sj-accent-hover, #5347d6);
  border-color: var(--sj-accent-hover, #5347d6);
  color: #fff;
}
.sj-tour-btn--skip { margin-right: auto; }

/* Variante "slide": tour sem alvo (centralizado, mais largo). Usado pra
   guias com ilustração própria — ex.: como jogar do 2048. */
.sj-tour-bubble--slide {
  max-width: 380px;
  width: calc(100vw - 24px);
}
.sj-tour-bubble--slide .sj-tour-body { font-size: 13px; }

/* =====================================================================
   8. Aviso de rotação (landscape mobile)
   ===================================================================== */
.sj-rotate-warn {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--sj-bg-card);
  z-index: 50;
  padding: 24px;
  text-align: center;
}
.sj-rotate-warn[hidden] { display: none !important; }
.sj-rotate-warn-icon {
  font-size: 56px;
  animation: sj-rotate-pulse 1.6s ease-in-out infinite;
}
@keyframes sj-rotate-pulse {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(-90deg); }
}
.sj-rotate-warn-title {
  font-family: var(--sj-font-display);
  font-weight: 900;
  font-size: 20px;
  color: var(--sj-text);
}
.sj-rotate-warn-body {
  font-family: var(--sj-font-mono);
  font-size: 12px;
  color: var(--sj-text-dim);
  max-width: 280px;
  line-height: 1.5;
}

/* Ativa o aviso quando: mobile (max-width 900) + landscape + classe no host */
body:has(.sj-game-stage) .sj-game-host.is-rotated .sj-rotate-warn { display: flex; }
body:has(.sj-game-stage) .sj-game-host.is-rotated > :not(.sj-rotate-warn) {
  visibility: hidden;
}

/* =====================================================================
   9. Layout interno do host — HUD topo + Stage central
   Funciona em desktop e mobile. O .sj-game-host em mobile (layout.css)
   já é position:fixed + flex column; aqui só distribuímos altura entre
   HUD (auto) e stage (1fr).
   ===================================================================== */
.sj-game-host {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  position: relative;
  /* Desktop: ocupa a altura útil disponível (viewport menos header, padding
     do main, header do jogo e padding do frame — total ~400px de cromas).
     Em mobile, layout.css força position: fixed cobrindo o viewport todo,
     então esse min-height é ignorado lá. */
  min-height: calc(100dvh - 400px);
  /* Bloqueia seleção de texto/arrasto em toda a GUI do jogo — clique em
     célula/carta não vira "selecionei o caractere". Inputs específicos que
     precisem de texto podem reativar com user-select: text. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.sj-game-host > .sj-hud   { flex: 0 0 auto; }
.sj-game-host > .sj-stage { flex: 1 1 0; min-height: 0; min-width: 0; width: 100%; }

/* ========== PAUSE VEIL ==========
   Layer opaca cobrindo o stage quando o jogo está pausado.
   Esconde perguntas/cartas/tabuleiro (impede "espionagem" via pause) e
   exibe mensagem clicável pra retomar. Criada pela engine quando
   game.json tem `pause: 'manual'|'auto'`.
   Visibilidade controlada por host[data-paused="yes"]. */
.sj-pause-veil {
  position: absolute;
  inset: 0;
  z-index: 200;
  background: rgba(10, 10, 14, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.sj-game-host[data-paused="yes"] .sj-pause-veil { display: flex; }
.sj-pause-veil-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 48px;
  text-align: center;
  pointer-events: none;
}
.sj-pause-veil-title {
  font-family: var(--sj-font-display, 'Big Shoulders Display', sans-serif);
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
}
.sj-pause-veil-sub {
  font-family: var(--sj-font-mono, 'JetBrains Mono', monospace);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 600px) {
  .sj-pause-veil-title { font-size: 44px; }
  .sj-pause-veil-sub   { font-size: 11px; letter-spacing: 0.14em; }
}

/* Mobile fullscreen — ajustes de tamanho de fonte e tipografia */
@media (max-width: 900px) {
  body:has(.sj-game-stage) .sj-hud { max-width: 100%; }
  body:has(.sj-game-stage) .sj-score {
    width: auto;
    flex: 1 1 0;
    padding: 6px 8px;
  }
  body:has(.sj-game-stage) .sj-score-value { font-size: 18px; }
  body:has(.sj-game-stage) .sj-score-label { font-size: 10px; }

  body:has(.sj-game-stage) .sj-toast-stack {
    bottom: max(12px, env(safe-area-inset-bottom, 12px));
  }
  body:has(.sj-game-stage) .sj-toast { font-size: 12px; padding: 8px 14px; }
}

/* Mobile estreito: HUD em 2 linhas — botões em cima, placares embaixo.
   Evita que muitos botões (cpu+level+sound+help+restart) colidam com os
   placares na mesma linha. */
@media (max-width: 600px) {
  .sj-hud {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .sj-controls   { grid-row: 1; justify-content: center; }
  .sj-scoreboard { grid-row: 2; }
}

/* =====================================================================
   10. Versão (badge inferior — útil pra cache busting visual)
   ===================================================================== */
.sj-game-version {
  position: absolute;
  bottom: 4px;
  left: 8px;
  font-family: var(--sj-font-mono);
  font-size: 10px;
  color: var(--sj-text-mute);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}