/* Pedrada (latinha): estilos só deste jogo. Carrega depois do style.css: o que estiver aqui sobrepõe a seção
   "LATINHA NA BALADEIRA" de lá (que fica congelada; mudanças novas vêm para cá). */

/* HUD com cara de desenho animado, igual ao jogo: contorno escuro grosso, cor chapada e sombra deslocada de adesivo */
.stage[data-game='latinha'] {
  --lat-ink: #150f24;
}

/* divisória entre as metades: sarjeta de história em quadrinhos (faixa escura com fio dourado no meio) */
.stage[data-game='latinha'] .lat-hud::after {
  left: calc(50% - 4px);
  width: 8px;
  box-shadow: none;
  background: linear-gradient(90deg, var(--lat-ink) 0 3px, var(--gold) 3px 5px, var(--lat-ink) 5px 8px);
}
.stage[data-game='latinha'] .lat-hud.stacked::after {
  left: 0;
  right: 0;
  top: calc(50% - 4px);
  width: auto;
  height: 8px;
  background: linear-gradient(180deg, var(--lat-ink) 0 3px, var(--gold) 3px 5px, var(--lat-ink) 5px 8px);
}

.stage[data-game='latinha'] .lat-name {
  padding: 3px 10px 2px;
  border: 2px solid var(--lat-ink);
  border-radius: 99px;
  background: var(--paper);
  color: var(--lat-ink);
  box-shadow: 0 3px 0 var(--lat-ink);
  letter-spacing: 0.06em;
}
.stage[data-game='latinha'] .lat-side.me .lat-name {
  background: var(--gold);
  color: var(--lat-ink);
  border-color: var(--lat-ink);
}

.stage[data-game='latinha'] .lat-score {
  color: var(--gold);
  transform: rotate(-4deg);
  text-shadow:
    0.055em 0 0 var(--lat-ink),
    -0.055em 0 0 var(--lat-ink),
    0 0.055em 0 var(--lat-ink),
    0 -0.055em 0 var(--lat-ink),
    0.04em 0.04em 0 var(--lat-ink),
    -0.04em 0.04em 0 var(--lat-ink),
    0.04em -0.04em 0 var(--lat-ink),
    -0.04em -0.04em 0 var(--lat-ink),
    0 0.12em 0 var(--lat-ink);
}

/* pedras que sobram: pedrinha cinza com contorno; as gastas viram só o buraco */
.stage[data-game='latinha'] .lat-stones {
  gap: 3px;
  margin-top: 8px;
}
.stage[data-game='latinha'] .lat-stones i {
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  background: #d4d8e2;
  border: 2px solid var(--lat-ink);
  box-shadow: inset -2px -2px 0 #9aa1b4;
}
.stage[data-game='latinha'] .lat-stones i.used {
  opacity: 1;
  background: rgba(21, 15, 36, 0.35);
  border-color: rgba(21, 15, 36, 0.55);
  box-shadow: none;
}

.stage[data-game='latinha'] .lat-stage {
  color: var(--paper);
  text-shadow:
    1px 0 0 var(--lat-ink),
    -1px 0 0 var(--lat-ink),
    0 1px 0 var(--lat-ink),
    0 -1px 0 var(--lat-ink),
    0 2px 0 var(--lat-ink),
    0 0 6px rgba(21, 15, 36, 0.7);
}

/* "+2", "LIMPOU!", "NADA": letreiro de desenho com contorno */
.stage[data-game='latinha'] .lat-pop,
.stage[data-game='latinha'] .lat-pop.mine {
  font-size: clamp(30px, 6cqi, 60px);
  letter-spacing: 0.02em;
  color: var(--paper);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  filter: none;
  text-shadow:
    0.05em 0 0 var(--lat-ink),
    -0.05em 0 0 var(--lat-ink),
    0 0.05em 0 var(--lat-ink),
    0 -0.05em 0 var(--lat-ink),
    0.036em 0.036em 0 var(--lat-ink),
    -0.036em 0.036em 0 var(--lat-ink),
    0.036em -0.036em 0 var(--lat-ink),
    -0.036em -0.036em 0 var(--lat-ink),
    0 0.11em 0 var(--lat-ink);
}
.stage[data-game='latinha'] .lat-pop.mine {
  color: var(--gold);
}
.stage[data-game='latinha'] .lat-pop.opp {
  color: #ff7a8a;
}
.stage[data-game='latinha'] .lat-pop.muted {
  font-size: clamp(18px, 3.4cqi, 30px);
  color: #ece6f6;
}

/* dica embaixo: balão de fala claro */
.stage[data-game='latinha'] .lat-hint {
  bottom: 12px;
  background: var(--paper);
  color: var(--lat-ink);
  border: 2px solid var(--lat-ink);
  box-shadow: 0 3px 0 var(--lat-ink);
}
.stage[data-game='latinha'] .lat-hint:empty {
  visibility: hidden;
} /* sem o balão vazio piscando enquanto some */

/* contagem da largada */
.stage[data-game='latinha'] .lat-count {
  color: var(--gold);
  text-shadow:
    0.045em 0 0 var(--lat-ink),
    -0.045em 0 0 var(--lat-ink),
    0 0.045em 0 var(--lat-ink),
    0 -0.045em 0 var(--lat-ink),
    0.032em 0.032em 0 var(--lat-ink),
    -0.032em 0.032em 0 var(--lat-ink),
    0.032em -0.032em 0 var(--lat-ink),
    -0.032em -0.032em 0 var(--lat-ink),
    0 0.09em 0 var(--lat-ink);
}
.stage[data-game='latinha'] .lat-count.go {
  color: var(--paper);
}