:root {
  --papel: #f0eee6;
  --papel-card: #ffffff;
  --tinta: #1f2a44;
  --tinta-suave: #5b6478;
  --linha: #d8d4c6;
  --lapis: #c9962b;
  --lapis-fundo: #fbf0d9;
  --certo: #3f7a5c;
  --certo-fundo: #e4f0e9;
  --erro: #b23a48;
  --erro-fundo: #f8e6e8;
  --raio: 10px;
  --fonte-titulo: Georgia, 'Times New Roman', serif;
  --fonte-corpo: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonte-mono: 'Courier New', monospace;
  /* Tamanho da célula da cruzadinha: fixo por faixa de tela, nunca encolhe
     pra "caber tudo" — quem se adapta é o espaço disponível pra grade, não a letra. */
  --cel-tam: 34px;
}

@media (min-width: 700px) {
  :root {
    --cel-tam: 38px;
  }
}

@media (min-width: 1000px) {
  :root {
    --cel-tam: 44px;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

.pagina {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
  min-height: 100vh;
}

/* Tablet: um pouco mais de respiro, tabuleiros/grades maiores e mais fáceis de tocar */
@media (min-width: 700px) {
  .pagina {
    max-width: 600px;
    padding-top: 2rem;
  }
}

/* Desktop: centraliza como um "cartão" de app, sem esticar a grade até virar gigante */
@media (min-width: 1000px) {
  body {
    display: flex;
    justify-content: center;
  }

  .pagina {
    max-width: 640px;
    padding-top: 2.5rem;
  }

  nav.rodape {
    max-width: 640px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-left: 1px solid var(--linha);
    border-right: 1px solid var(--linha);
    border-radius: var(--raio) var(--raio) 0 0;
  }
}

/* Cruzadinha: a grade pode ter muitas colunas, então ela aproveita bem mais
   espaço em telas maiores (tablet/desktop) do que as outras páginas do app,
   que ficam com layout mais "de formulário". Seletor composto pra garantir
   prioridade sobre as regras genéricas de .pagina acima. */
@media (min-width: 700px) {
  .pagina.pagina-cruzadinha {
    max-width: 90vw;
  }
}

@media (min-width: 1000px) {
  .pagina.pagina-cruzadinha {
    max-width: min(1400px, 94vw);
  }
}

.link-hub {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--tinta-suave);
  text-decoration: none;
  margin-bottom: 0.75rem;
}

.link-hub:active {
  color: var(--tinta);
}

header.topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--tinta);
}

header.topo h1 {
  font-family: var(--fonte-titulo);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

header.topo .subtitulo {
  font-size: 0.8rem;
  color: var(--tinta-suave);
}

.cartao {
  background: var(--papel-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.lista-temas {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.item-tema {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--papel-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 0.9rem 1rem;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
  font-family: var(--fonte-corpo);
  color: var(--tinta);
  transition: border-color 0.15s ease;
}

.item-tema:active {
  border-color: var(--lapis);
}

.item-tema .contagem {
  font-family: var(--fonte-mono);
  font-size: 0.75rem;
  color: var(--tinta-suave);
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--tinta);
  color: var(--papel-card);
  border: none;
  border-radius: var(--raio);
  padding: 0.85rem 1.1rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--fonte-corpo);
  cursor: pointer;
  width: 100%;
}

.botao:active {
  opacity: 0.85;
}

.botao.secundario {
  background: transparent;
  color: var(--tinta);
  border: 1.5px solid var(--tinta);
}

.botao.pequeno {
  width: auto;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
}

.aviso {
  font-size: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: var(--raio);
  margin-bottom: 1rem;
}

.aviso.erro {
  background: var(--erro-fundo);
  color: var(--erro);
}

.aviso.sucesso {
  background: var(--certo-fundo);
  color: var(--certo);
}

nav.rodape {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--papel-card);
  border-top: 1px solid var(--linha);
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 0.6rem 0 calc(0.6rem + env(safe-area-inset-bottom));
}

nav.rodape a {
  color: var(--tinta-suave);
  text-decoration: none;
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

nav.rodape a.ativo {
  color: var(--tinta);
  font-weight: 600;
}

/* --- Tela central (hub) --- */

.lista-jogos {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Título de cada categoria da home (Cartas, Tabuleiro & Estratégia, etc.) —
   fica dentro de .lista-jogos junto com os .jogo-card, só pra agrupar
   visualmente sem precisar de containers separados por categoria. */
.categoria-titulo {
  font-family: var(--fonte-corpo);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
  margin: 1.1rem 0 -0.15rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.categoria-titulo:first-child {
  margin-top: 0;
}

.jogo-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--papel-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 1rem;
  text-decoration: none;
  color: var(--tinta);
  transition: border-color 0.15s ease;
}

.jogo-card:active {
  border-color: var(--lapis);
}

.jogo-card.desabilitado {
  opacity: 0.5;
  pointer-events: none;
}

.jogo-card .icone {
  font-size: 1.8rem;
  line-height: 1;
  width: 2.4rem;
  text-align: center;
  flex-shrink: 0;
}

.jogo-card .texto {
  flex: 1;
  min-width: 0;
}

.jogo-card .texto h3 {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
  font-family: var(--fonte-titulo);
}

.jogo-card .texto p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--tinta-suave);
}

.selo-em-breve {
  font-family: var(--fonte-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-suave);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  flex-shrink: 0;
}

/* --- Caça-Palavras --- */

.segmentado {
  display: flex;
  gap: 0.5rem;
}

.segmento {
  flex: 1;
  background: var(--papel);
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  padding: 0.6rem 0.5rem;
  font-family: var(--fonte-corpo);
  font-size: 0.8rem;
  color: var(--tinta-suave);
  cursor: pointer;
  line-height: 1.4;
}

.segmento small {
  font-weight: 400;
  font-size: 0.68rem;
}

.segmento.ativo {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel-card);
}

.cp-selecao-atual {
  position: sticky;
  top: 0.5rem;
  z-index: 5;
  min-height: 2.6rem;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tinta);
  color: var(--papel-card);
  border-radius: 10px;
  font-family: var(--fonte-mono);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  opacity: 0;
  transform: translateY(4px) scale(0.97);
  transition: opacity 0.1s ease, transform 0.1s ease;
  pointer-events: none;
  padding: 0.4rem 1rem;
  box-shadow: 0 4px 14px rgba(31, 42, 68, 0.25);
}

.cp-selecao-atual.visivel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cp-grade-wrapper {
  overflow: auto;
  margin-bottom: 1rem;
  border: 2px solid var(--tinta);
  border-radius: 4px;
  background: var(--tinta);
  padding: 1px;
}

.cp-grade {
  display: grid;
  gap: 1px;
  background: var(--tinta);
  width: 100%;
  aspect-ratio: 1 / 1;
  user-select: none;
  -webkit-user-select: none;
}

.cp-celula {
  background: var(--papel-card);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: clamp(0.75rem, 3.8vw, 1.4rem);
  color: var(--tinta);
  cursor: pointer;
}

.cp-celula.preview {
  background: var(--lapis-fundo);
}

.cp-celula.achada {
  background: var(--certo-fundo);
  color: var(--certo);
}

.cp-lista-palavras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cp-item-palavra {
  font-family: var(--fonte-mono);
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--tinta);
}

.cp-item-palavra.resolvida {
  background: var(--certo-fundo);
  border-color: var(--certo);
  color: var(--certo);
  text-decoration: line-through;
}

/* --- Batalha Naval --- */

.bn-tabuleiro-wrapper {
  overflow: auto;
}

.bn-tabuleiro {
  display: grid;
  gap: 1px;
  background: var(--tinta);
  border: 2px solid var(--tinta);
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  user-select: none;
  -webkit-user-select: none;
}

.bn-celula {
  background: var(--papel-card);
  cursor: pointer;
  aspect-ratio: 1 / 1;
}

.bn-celula:active {
  background: var(--lapis-fundo);
}

.bn-celula.agua {
  background: var(--accent-bn-agua, #dbe6f5);
  cursor: default;
}

.bn-celula.agua.revelada {
  opacity: 0.6;
}

.bn-celula.acerto {
  background: var(--erro-fundo);
  cursor: default;
}

.bn-celula.afundado {
  background: var(--erro);
  cursor: default;
}

.bn-legenda {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: var(--tinta-suave);
}

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

.bn-amostra {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid var(--linha);
}

.bn-amostra-agua { background: #dbe6f5; }
.bn-amostra-acerto { background: var(--erro-fundo); }
.bn-amostra-afundado { background: var(--erro); }

.bn-frota {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bn-item-navio {
  font-family: var(--fonte-mono);
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--tinta);
  letter-spacing: 0.05em;
}

.bn-item-navio.afundado {
  background: var(--erro-fundo);
  border-color: var(--erro);
  color: var(--erro);
  text-decoration: line-through;
}

/* --- Sudoku --- */

.sk-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--fonte-mono);
  font-size: 0.85rem;
  color: var(--tinta-suave);
  margin-bottom: 0.9rem;
}

.sk-stats #errorsStat.com-erros b {
  color: var(--erro);
}

.sk-stats b {
  color: var(--tinta);
  font-weight: 700;
}

.sk-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--tinta);
  border: 2px solid var(--tinta);
  border-radius: 4px;
  overflow: hidden;
  gap: 1px;
  user-select: none;
  -webkit-user-select: none;
}

.sk-celula {
  background: var(--papel-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-mono);
  font-size: clamp(1.15rem, 6.2vw, 1.9rem);
  font-weight: 700;
  color: var(--lapis);
  cursor: pointer;
  position: relative;
}

.sk-celula.dada {
  color: var(--tinta);
  font-weight: 700;
}

.sk-celula.errada {
  color: var(--erro);
  background: var(--erro-fundo);
}

.sk-celula.vizinha {
  background: var(--lapis-fundo);
}

.sk-celula.mesmo-numero {
  background: var(--lapis-fundo);
}

.sk-celula.selecionada {
  box-shadow: inset 0 0 0 2px var(--lapis);
}

.sk-celula.errada.selecionada {
  box-shadow: inset 0 0 0 2px var(--erro);
}

.sk-celula.bloco-direita {
  border-right: 2px solid var(--tinta);
}

.sk-celula.bloco-baixo {
  border-bottom: 2px solid var(--tinta);
}

.sk-numpad {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0.4rem;
  margin-top: 1rem;
}

.sk-numpad button {
  font-family: var(--fonte-mono);
  font-size: clamp(1.3rem, 5.8vw, 1.7rem);
  font-weight: 700;
  padding: 0.6rem 0;
  border: 1px solid var(--linha);
  background: var(--papel-card);
  color: var(--tinta);
  border-radius: 7px;
  cursor: pointer;
}

.sk-numpad button:active {
  background: var(--lapis-fundo);
  border-color: var(--lapis);
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 42, 68, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  z-index: 10;
}

.overlay.show {
  display: flex;
}

.win-card {
  max-width: 320px;
  width: 100%;
  text-align: center;
}

.win-card .win-tag {
  font-family: var(--fonte-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lapis);
  margin: 0;
}

.win-card h2 {
  margin: 0.5rem 0 1.1rem;
  font-size: 1.3rem;
  font-family: var(--fonte-titulo);
}

.win-stats {
  display: flex;
  justify-content: center;
  gap: 1.75rem;
  margin-bottom: 1.25rem;
}

.win-stats div {
  font-family: var(--fonte-mono);
}

.win-stats b {
  display: block;
  font-size: 1.3rem;
  color: var(--tinta);
}

.win-stats span {
  font-size: 0.68rem;
  color: var(--tinta-suave);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Tela do jogo (cruzadinha) --- */

.info-jogo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-family: var(--fonte-mono);
  font-size: 0.85rem;
  color: var(--tinta-suave);
}

.grade-wrapper {
  overflow: auto;
  margin-bottom: 0.4rem;
  border: 2px solid var(--tinta);
  border-radius: 4px;
  background: var(--tinta);
  /* barra de rolagem sempre visível (não só ao passar o mouse), pra deixar
     claro que dá pra arrastar quando a grade não cabe inteira */
  scrollbar-width: auto;
  scrollbar-color: var(--lapis) var(--tinta);
}

.grade-wrapper::-webkit-scrollbar {
  height: 10px;
}

.grade-wrapper::-webkit-scrollbar-track {
  background: var(--tinta);
}

.grade-wrapper::-webkit-scrollbar-thumb {
  background: var(--lapis);
  border-radius: 6px;
}

.dica-rolagem {
  display: none;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--tinta-suave);
  margin-bottom: 0.75rem;
}

.dica-rolagem.visivel {
  display: flex;
}

.grade {
  display: grid;
  gap: 1px;
  background: var(--tinta);
  width: max-content;
  margin: 0 auto;
}

.celula {
  position: relative;
  width: var(--cel-tam, 34px);
  height: var(--cel-tam, 34px);
  background: var(--papel-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.celula.bloqueada {
  background: var(--tinta);
}

.celula input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-family: var(--fonte-corpo);
  font-size: clamp(0.9rem, calc(var(--cel-tam, 34px) * 0.5), 1.6rem);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--tinta);
  padding: 0;
}

.celula input:focus {
  outline: none;
  background: var(--lapis-fundo);
}

.celula.correta input {
  background: var(--certo-fundo);
  color: var(--certo);
}

.celula.na-palavra-ativa input {
  background: var(--lapis-fundo);
}

.celula .numero {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: clamp(0.5rem, calc(var(--cel-tam, 34px) * 0.17), 0.85rem);
  font-family: var(--fonte-mono);
  color: var(--tinta-suave);
  pointer-events: none;
}

.clue-ativa {
  background: var(--lapis-fundo);
  border: 1px solid var(--lapis);
  border-radius: var(--raio);
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.clue-ativa strong {
  font-family: var(--fonte-mono);
  margin-right: 0.4rem;
}

.lista-dicas {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.lista-dicas h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tinta-suave);
  margin: 0.5rem 0 0.3rem;
}

.dica-item {
  font-size: 0.9rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--linha);
  cursor: pointer;
}

.dica-item .num {
  font-family: var(--fonte-mono);
  color: var(--tinta-suave);
  margin-right: 0.4rem;
}

.dica-item.resolvida {
  color: var(--certo);
  text-decoration: line-through;
}

/* --- Nonograma --- */

.ng-tabuleiro-wrapper {
  overflow: auto;
  margin-bottom: 0.4rem;
  border: 2px solid var(--tinta);
  border-radius: 4px;
  background: var(--tinta);
  scrollbar-width: auto;
  scrollbar-color: var(--lapis) var(--tinta);
}

.ng-tabuleiro-wrapper::-webkit-scrollbar {
  height: 10px;
}

.ng-tabuleiro-wrapper::-webkit-scrollbar-track {
  background: var(--tinta);
}

.ng-tabuleiro-wrapper::-webkit-scrollbar-thumb {
  background: var(--lapis);
  border-radius: 6px;
}

.ng-grade {
  display: grid;
  gap: 1px;
  background: var(--tinta);
  width: max-content;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
}

.ng-canto {
  background: var(--papel-card);
  width: var(--ng-largura-pista, 2.2rem);
  height: var(--ng-altura-pista, 2.2rem);
}

.ng-pista-coluna,
.ng-pista-linha {
  background: var(--papel-card);
  display: flex;
  font-family: var(--fonte-mono);
  font-weight: 700;
  color: var(--tinta-suave);
  line-height: 1.15;
}

.ng-pista-coluna {
  width: var(--ng-cel, 28px);
  height: var(--ng-altura-pista, 2.2rem);
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  font-size: clamp(0.55rem, calc(var(--ng-cel, 28px) * 0.32), 0.85rem);
  padding-bottom: 0.15rem;
}

.ng-pista-linha {
  width: var(--ng-largura-pista, 2.2rem);
  height: var(--ng-cel, 28px);
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.22rem;
  font-size: clamp(0.55rem, calc(var(--ng-cel, 28px) * 0.32), 0.85rem);
  padding-right: 0.3rem;
  white-space: nowrap;
}

/* Linha/coluna cuja única pista é "0" (vazia) mostra um traço discreto,
   em vez do número 0, que soa estranho num quebra-cabeça de pintura. */
.ng-pista-coluna .zero,
.ng-pista-linha .zero {
  color: var(--linha);
}

.ng-celula {
  width: var(--ng-cel, 28px);
  height: var(--ng-cel, 28px);
  background: var(--papel-card);
  cursor: pointer;
  position: relative;
  touch-action: none;
}

.ng-celula.pintada {
  background: var(--tinta);
}

.ng-celula.marcada::before,
.ng-celula.marcada::after {
  content: '';
  position: absolute;
  top: 22%;
  left: 22%;
  width: 56%;
  height: 2px;
  background: var(--erro);
}

.ng-celula.marcada::before {
  transform: rotate(45deg);
}

.ng-celula.marcada::after {
  transform: rotate(-45deg);
}

/* Marca de grupo a cada 5 células, pra facilitar contar em grades grandes */
.ng-celula.grupo-vertical {
  border-left: 2px solid var(--tinta);
}

.ng-celula.grupo-horizontal {
  border-top: 2px solid var(--tinta);
}

.ng-modo-linha {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

/* Overlay de vitória do Nonograma: não deve esconder o desenho que acabou
   de ser formado — fica embaixo (não sobre a grade) e com fundo bem mais
   transparente que o padrão dos outros jogos. */
.ng-overlay {
  align-items: flex-end;
  background: rgba(31, 42, 68, 0.18);
  padding-bottom: 1.5rem;
}

.ng-overlay .win-card {
  background: var(--papel-card);
  box-shadow: 0 -4px 18px rgba(31, 42, 68, 0.25);
}

/* --- Lógica (Einstein) --- */

.lg-lista {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.lg-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 2px solid var(--linha);
  background: var(--papel-card);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
}

.lg-item:active {
  border-color: var(--lapis);
}

.lg-item .titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  color: var(--tinta);
}

.lg-tag {
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.lg-tag.facil { background: #dff3e3; color: #1e7a3c; }
.lg-tag.medio { background: #fdf0d6; color: #9a6a12; }
.lg-tag.dificil { background: #fbdede; color: #a32b2b; }

.lg-pistas {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}

.lg-pistas li {
  margin-bottom: 0.45rem;
  line-height: 1.4;
}

.lg-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}

.lg-aba {
  font-family: var(--fonte-mono);
  font-size: 0.78rem;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  border: 2px solid var(--linha);
  background: var(--papel-card);
  color: var(--tinta-suave);
  cursor: pointer;
}

.lg-aba.ativa {
  border-color: var(--lapis);
  color: var(--tinta);
  background: #fff6e6;
}

.lg-grade-wrap {
  overflow: auto;
  border: 2px solid var(--tinta);
  border-radius: 6px;
}

.lg-grade {
  display: grid;
  gap: 1px;
  background: var(--tinta);
  width: max-content;
}

.lg-celula-canto,
.lg-celula-cabecalho {
  background: var(--papel-card);
  font-family: var(--fonte-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--tinta-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  text-align: center;
  line-height: 1.15;
  min-width: 3.4rem;
}

.lg-celula {
  background: var(--papel-card);
  min-width: 3.4rem;
  min-height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  user-select: none;
}

.lg-celula.marca-sim { color: var(--certo); font-weight: 700; }
.lg-celula.marca-nao { color: var(--erro); }

.lg-resposta-tabela {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.6rem;
  font-size: 0.85rem;
}

.lg-resposta-tabela th,
.lg-resposta-tabela td {
  border: 1px solid var(--linha);
  padding: 0.45rem 0.6rem;
  text-align: left;
}

.lg-resposta-tabela th {
  background: #fff6e6;
  font-family: var(--fonte-mono);
  font-size: 0.75rem;
}

/* --- Upload --- */

textarea, input[type="file"] {
  width: 100%;
  font-family: var(--fonte-mono);
  font-size: 0.85rem;
}

.centro {
  text-align: center;
  color: var(--tinta-suave);
  padding: 2rem 1rem;
}

/* --- Dominó --- */
.dm-cartao{
  --wood-dark:#2a1810;
  --wood-mid:#4a2c1a;
  --wood-light:#6b4128;
  --wood-grain:#3a2214;
  --felt:#1f3d2e;
  --felt-dark:#153027;
  --ivory:#f2e8d5;
  --ivory-shade:#ddccab;
  --ink:#241a12;
  --gold:#c9a227;
  --gold-bright:#e8c94a;
  --cream:#ede2c9;
  --cream-dim:#c9bb9c;
  --good:#5a8a5f;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.05), transparent 60%),
    repeating-linear-gradient(90deg, var(--wood-mid) 0px, var(--wood-light) 3px, var(--wood-mid) 7px, var(--wood-grain) 11px),
    var(--wood-dark);
  border: none;
  color: var(--cream);
  font-family: 'Inter', var(--fonte-corpo);
}
.dm-cartao .dm-titulo-fraunces,
.dm-msg{ font-family:'Fraunces', var(--fonte-titulo); }

.dm-placar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-bottom:1rem;
}
.dm-chip{
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.2));
  border:1.5px solid var(--gold);
  border-radius:999px;
  padding:6px 14px;
  font-family:'Courier New', monospace;
  font-weight:700;
  font-size:0.85rem;
  display:flex; gap:8px; align-items:center;
}
.dm-chip b{color:var(--gold-bright); font-size:1.05rem;}

.dm-zona-label{
  font-family:'Courier New', monospace;
  font-size:0.7rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--cream-dim);
  margin:0 0 6px 4px;
  display:flex; align-items:center; gap:8px;
}
.dm-pensando{ color:var(--gold-bright); animation:dm-pulse 1s ease-in-out infinite; }
@keyframes dm-pulse{0%,100%{opacity:0.4}50%{opacity:1}}

.dm-cpu-hand{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap; min-height:44px; margin-bottom:0.9rem; }
.dm-cartao .tile-back{
  width:26px;height:40px;
  border-radius:5px;
  background:linear-gradient(155deg, #7a3f2a, #5a2c1c);
  border:1px solid rgba(0,0,0,0.4);
  box-shadow:0 2px 3px rgba(0,0,0,0.4);
  position:relative;
}
.dm-cartao .tile-back::after{
  content:'';
  position:absolute; inset:4px;
  border:1px solid rgba(232,201,74,0.35);
  border-radius:3px;
}

.dm-felt-wrap{
  background:radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-dark) 100%);
  border-radius:20px;
  border:5px solid var(--gold);
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.5),
    0 4px 12px rgba(0,0,0,0.4);
  padding:20px 14px;
  min-height:200px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  margin-bottom:0.9rem;
}
.dm-chain{ position:relative; }
.dm-chain .placeholder{
  font-family:'Fraunces', var(--fonte-titulo);
  font-style:italic;
  color:rgba(237,226,201,0.4);
  font-size:0.95rem;
}
.dm-cartao .dm-chain .tile{ position:absolute; flex-shrink:0; }
.dm-cartao .dropzone{
  position:absolute;
  width:24px;height:24px;
  border:2px dashed var(--gold-bright);
  border-radius:50%;
  background:rgba(232,201,74,0.15);
  cursor:pointer;
  animation:dm-glow 1.1s ease-in-out infinite;
  transform:translate(-50%,-50%);
}
@keyframes dm-glow{0%,100%{opacity:0.55}50%{opacity:1}}

.dm-stock-row{
  display:flex; justify-content:center; align-items:center; gap:10px;
  font-family:'Courier New', monospace;
  font-size:0.8rem;
  color:var(--cream-dim);
  margin-bottom:0.9rem;
}
.dm-stock-stack{ display:flex; }
.dm-stock-stack .tile-back{ width:14px;height:23px;margin-left:-8px; }
.dm-stock-stack .tile-back:first-child{ margin-left:0; }

.dm-msg{
  text-align:center;
  font-style:italic;
  font-size:0.95rem;
  color:var(--gold-bright);
  min-height:1.4em;
  margin:0 0 4px 0;
}
.dm-player-hand{
  display:flex; justify-content:center; gap:2px; flex-wrap:wrap;
  min-height:70px; padding:8px 0;
}

/* Domino tile — base shape (real size is set inline by JS per context) */
.dm-cartao .tile{
  width:44px; height:88px;
  background:linear-gradient(160deg, var(--ivory), var(--ivory-shade));
  border-radius:6px;
  border:1px solid #9c8a63;
  box-shadow:0 2px 4px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.4);
  display:flex; flex-direction:column;
  cursor:pointer;
  position:relative;
  transition:transform .15s ease, box-shadow .15s ease;
  flex-shrink:0;
}
.dm-cartao .tile .half{
  flex:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  padding:4px 5px;
}
.dm-cartao .tile .half.top{ border-bottom:1.5px solid #9c8a63; }
.dm-cartao .dot{
  width:100%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #4a3a28, var(--ink) 70%);
  align-self:center; justify-self:center;
}

/* Hand tiles: horizontal, fanned */
.dm-player-hand .tile{ flex-direction:row; }
.dm-player-hand .tile .half{ padding:4px; }
.dm-player-hand .tile .half.top{ border-bottom:none; border-right:1.5px solid #9c8a63; }
.dm-player-hand .tile:hover:not(.unplayable){ transform:translateY(-6px); box-shadow:0 8px 14px rgba(0,0,0,0.5); }
.dm-player-hand .tile.playable{ box-shadow:0 2px 4px rgba(0,0,0,0.45), 0 0 0 2px var(--good); }
.dm-player-hand .tile.unplayable{ opacity:0.45; cursor:not-allowed; }
.dm-player-hand .tile.selected{ transform:translateY(-10px); box-shadow:0 10px 16px rgba(0,0,0,0.55), 0 0 0 2px var(--gold-bright); }
.dm-player-hand .tile.shake{ animation:dm-shake .35s ease; }
@keyframes dm-shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-6px);}
  75%{transform:translateX(6px);}
}

/* Chain tiles: h-tile = deitada, v-tile = em pé (dobre ou peça de virada) */
.dm-chain .tile.v-tile{ flex-direction:column; }
.dm-chain .tile.h-tile{ flex-direction:row; }
.dm-chain .tile.h-tile .half.top{ border-bottom:none; border-right:1.5px solid #9c8a63; }
.dm-chain .tile .half{ padding:4px 5px; }
.dm-chain .tile.double{ box-shadow:0 2px 4px rgba(0,0,0,0.45), 0 0 0 2px var(--gold-bright), 0 0 8px rgba(232,201,74,0.5); }
.dm-chain .tile.newest{ animation:dm-pop .28s ease; }
@keyframes dm-pop{0%{transform:scale(0.5); opacity:0;}100%{transform:scale(1); opacity:1;}}

@media (prefers-reduced-motion: reduce){
  .dm-cartao *{ animation:none !important; transition:none !important; }
}

/* --- Jogo da Memória --- */

.mem-stats {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.mem-stat {
  flex: 1;
  min-width: 0;
  background: var(--papel-card);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 0.6rem 0.5rem;
  text-align: center;
}

.mem-stat .valor {
  font-family: var(--fonte-mono);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--tinta);
}

.mem-stat .rotulo {
  font-size: 0.65rem;
  color: var(--tinta-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.1rem;
}

.mem-board {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.mem-card {
  aspect-ratio: 1 / 1;
  perspective: 800px;
  cursor: pointer;
}

.mem-card.virada,
.mem-card.encontrada {
  cursor: default;
}

.mem-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mem-card.virada .mem-card-inner,
.mem-card.encontrada .mem-card-inner {
  transform: rotateY(180deg);
}

.mem-face {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
}

.mem-face-verso {
  background: var(--tinta);
  border: 1px solid var(--linha);
}

.mem-face-verso::after {
  content: '✦';
  color: var(--papel-card);
  opacity: 0.4;
  font-size: 1.2rem;
}

.mem-face-frente {
  background: var(--papel-card);
  border: 1px solid var(--linha);
  transform: rotateY(180deg);
  padding: 12%;
}

.mem-face-frente img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mem-card.encontrada .mem-face-frente {
  background: var(--certo-fundo);
  border-color: var(--certo);
}

.mem-vitoria {
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .mem-card-inner {
    transition: none;
  }
}

/* --- Sequência (Genius) --- */

.sq-cartao {
  --sq-panel: #171f38;
  --sq-border: rgba(255, 255, 255, 0.08);
  --sq-text: #f4f2ff;
  --sq-text-muted: #9c9ac7;
  --sq-danger: #ff5d6c;
  --sq-verde: #4fdb8f;

  background: radial-gradient(circle at 50% 0%, #1a2340 0%, #0f1729 65%);
  color: var(--sq-text);
  text-align: center;
}

.sq-stats {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}

.sq-stat {
  background: var(--sq-panel);
  border: 1px solid var(--sq-border);
  border-radius: 10px;
  padding: 0.45rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.sq-mute {
  background: var(--sq-panel);
  border: 1px solid var(--sq-border);
  border-radius: 10px;
  width: 2.1rem;
  height: 2.1rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--sq-text);
}

.sq-msg {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--sq-text-muted);
  min-height: 1.2rem;
  margin: 0 0 1rem;
}

.sq-msg.vez {
  color: var(--sq-verde);
}

.sq-msg.erro {
  color: var(--sq-danger);
}

.sq-pad-wrap {
  position: relative;
  width: min(280px, 68vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto 1.15rem;
}

.sq-pad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  width: 100%;
  height: 100%;
}

.sq-quad {
  border: none;
  padding: 0;
  cursor: pointer;
  filter: brightness(0.72) saturate(0.85);
  transition: filter 0.1s;
}

.sq-quad:disabled {
  cursor: default;
}

.sq-quad.tl {
  border-radius: 100% 0 0 0;
}
.sq-quad.tr {
  border-radius: 0 100% 0 0;
}
.sq-quad.bl {
  border-radius: 0 0 0 100%;
}
.sq-quad.br {
  border-radius: 0 0 100% 0;
}

.sq-quad.ativa {
  filter: brightness(1.2) saturate(1.1);
}

.sq-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: #0f1729;
  border: 3px solid var(--sq-panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.sq-center .nivel {
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.sq-center .rotulo {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sq-text-muted);
  margin-top: 0.2rem;
}

.sq-gameover {
  background: var(--sq-panel);
  border: 1px solid var(--sq-border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.9rem;
}

.sq-gameover .titulo {
  color: var(--sq-danger);
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  margin: 0 0 0.2rem;
}

.sq-gameover .desc {
  color: var(--sq-text-muted);
  font-size: 0.8rem;
  margin-bottom: 0.7rem;
}

.sq-salvar {
  display: flex;
  gap: 0.4rem;
}

.sq-salvar input {
  flex: 1;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid var(--sq-border);
  background: #0f1729;
  color: var(--sq-text);
  padding: 0.5rem 0.6rem;
  font-family: var(--fonte-corpo);
  font-size: 0.85rem;
}

.sq-salvo {
  color: var(--sq-verde);
  font-size: 0.78rem;
  margin: 0.6rem 0 0;
}

.sq-salvo.sq-erro-salvar {
  color: var(--sq-danger);
}

.sq-ranking h3 {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tinta-suave);
}

.sq-ranking-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.1rem;
  border-bottom: 1px solid var(--linha);
  font-size: 0.85rem;
}

.sq-ranking-item:last-child {
  border-bottom: none;
}

.sq-ranking-item .pos {
  font-family: var(--fonte-mono);
  color: var(--tinta-suave);
  width: 1.8rem;
  flex-shrink: 0;
}

.sq-ranking-item .nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sq-ranking-item .nivel {
  font-family: var(--fonte-mono);
  font-weight: 700;
  color: var(--tinta);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sq-quad {
    transition: none;
  }
}

/* --- Quebra-cabeça Deslizante --- */

.qc-board {
  display: grid;
  gap: 4px;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.qc-tile {
  border-radius: 8px;
  background: var(--tinta);
  color: var(--papel-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-mono);
  font-weight: 700;
  font-size: clamp(1rem, 4vw, 1.4rem);
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--linha);
}

.qc-tile:active {
  filter: brightness(1.15);
}

.qc-tile.vazio {
  visibility: hidden;
  cursor: default;
}

.qc-tile.imagem {
  background-color: var(--papel-card);
  background-repeat: no-repeat;
  color: transparent;
}

/* --- Damas --- */

.dc-placar {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.dc-chip {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-family: var(--fonte-mono);
  font-size: 0.8rem;
  color: var(--tinta-suave);
}

.dc-chip b {
  color: var(--tinta);
  font-size: 0.95rem;
}

.dc-msg {
  text-align: center;
  font-size: 0.9rem;
  color: var(--tinta-suave);
  min-height: 1.3em;
  margin: 0 0 0.9rem;
}

.dc-msg.pensando {
  color: var(--lapis);
  animation: dc-pulse 1s ease-in-out infinite;
}

@keyframes dc-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.dc-frame-wrapper {
  overflow: auto;
}

.dc-frame {
  background: var(--papel);
  border: 2px solid var(--tinta);
  border-radius: 6px;
  padding: 6px;
}

.dc-tabuleiro {
  --dc-clara: var(--lapis-fundo);
  --dc-escura: #8a6a45;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--tinta);
  user-select: none;
  -webkit-user-select: none;
}

.dc-celula {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
}

.dc-celula.clara { background: var(--dc-clara); }
.dc-celula.escura { background: var(--dc-escura); cursor: pointer; }

.dc-celula.selecionada {
  box-shadow: inset 0 0 0 3px var(--lapis);
}

.dc-celula.obrigatoria {
  box-shadow: inset 0 0 0 3px var(--erro);
}

.dc-destino {
  width: 24%;
  height: 24%;
  border-radius: 50%;
  background: var(--certo);
  opacity: 0.85;
}

.dc-peca {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 55%;
  box-sizing: border-box;
}

.dc-peca.voce {
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #f2f1ea 38%, #d8d5c8 72%, #b9b5a6 100%);
  border: 1px solid #8f8b7c;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45), inset 0 -4px 6px rgba(90, 85, 70, 0.35), inset 0 3px 4px rgba(255, 255, 255, 0.7);
  color: var(--lapis);
}

.dc-peca.cpu {
  background: radial-gradient(circle at 32% 28%, #4a4a4a 0%, #262626 40%, #0e0e0e 75%, #000000 100%);
  border: 1px solid #000000;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.6), inset 0 -4px 6px rgba(0, 0, 0, 0.6), inset 0 3px 4px rgba(255, 255, 255, 0.18);
  color: var(--gold-bright, #e8c94a);
}

.dc-peca::after {
  content: '';
  position: absolute;
  top: 12%; left: 12%; right: 12%; bottom: 12%;
  border-radius: 50%;
  pointer-events: none;
}

.dc-peca.voce::after {
  border: 1px solid rgba(140, 130, 100, 0.45);
}

.dc-peca.cpu::after {
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.dc-peca .dc-coroa {
  line-height: 1;
  position: relative;
}

/* --- Gamão --- */

.gm-placar {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.gm-chip {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  font-family: var(--fonte-mono);
  font-size: 0.75rem;
  color: var(--tinta-suave);
}

.gm-chip b {
  color: var(--tinta);
  font-size: 0.9rem;
}

.gm-msg {
  text-align: center;
  font-size: 0.9rem;
  color: var(--tinta-suave);
  min-height: 1.3em;
  margin: 0 0 0.9rem;
}

.gm-dados-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.8rem;
}

.gm-dados-area {
  display: flex;
  gap: 6px;
}

.gm-dado {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: var(--papel-card);
  border: 1px solid var(--tinta);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 3px;
  box-sizing: border-box;
}

.gm-dado.usado {
  opacity: 0.35;
}

.gm-dado .pino {
  border-radius: 50%;
  background: var(--tinta);
  width: 60%;
  height: 60%;
  margin: auto;
}

.gm-board-wrapper {
  display: flex;
  gap: 6px;
  width: 100%;
}

.gm-grid {
  --gm-clara: #a97c52;
  --gm-escura: #8a5a3a;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr) 0.55fr repeat(6, 1fr);
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 1.7 / 1;
  background: #3d2818;
  border: 3px solid #2a1a10;
  border-radius: 4px;
  padding: 2px;
  gap: 2px;
  user-select: none;
  -webkit-user-select: none;
}

.gm-ponto {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.gm-ponto.linha-topo {
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 4px;
}

.gm-ponto.linha-baixo {
  flex-direction: column-reverse;
  justify-content: flex-start;
  padding-bottom: 4px;
}

.gm-ponto.par { background: var(--gm-escura); }
.gm-ponto.impar { background: var(--gm-clara); }

.gm-ponto.selecionado {
  box-shadow: inset 0 0 0 3px var(--lapis);
}

.gm-ponto.jogavel {
  box-shadow: inset 0 0 0 2px var(--erro);
}

.gm-destino {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--certo);
  border: 1px solid var(--certo);
  opacity: 0.85;
}

.gm-ponto.linha-topo .gm-destino { top: 6px; }
.gm-ponto.linha-baixo .gm-destino { bottom: 6px; }

.gm-barra {
  grid-row: 1 / 3;
  grid-column: 7;
  background: #2a1a10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0;
  cursor: default;
}

.gm-barra.jogavel {
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--erro);
}

.gm-barra.selecionado {
  box-shadow: inset 0 0 0 3px var(--lapis);
}

.gm-barra-metade {
  display: flex;
  align-items: center;
}

.gm-barra-metade.topo { flex-direction: column; }
.gm-barra-metade.baixo { flex-direction: column-reverse; }

.gm-peca {
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: -10% auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 55%;
  font-weight: 500;
  box-sizing: border-box;
  flex-shrink: 0;
}

.gm-peca.voce {
  background: var(--papel-card);
  border: 1.5px solid var(--tinta);
  color: var(--tinta);
}

.gm-peca.cpu {
  background: #2f5fa8;
  border: 1.5px solid #dce6f5;
  color: #eef3fb;
}

.gm-off-trays {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 11%;
}

.gm-off-tray {
  flex: 1;
  background: var(--papel);
  border: 2px solid var(--tinta);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--tinta);
  cursor: pointer;
  margin-bottom: 2px;
}

.gm-off-tray:last-child {
  margin-bottom: 0;
  margin-top: 2px;
}

.gm-off-tray.destino-valido {
  box-shadow: inset 0 0 0 2px var(--lapis);
}