/* =========================================================
   MEU NÚMERO FAVORITO
   Direção visual: painel de resultados / placar mecânico
   (split-flap board) com sotaque de bilhete de loteria.
   ========================================================= */

:root {
  /* cor */
  --bg: #0e1016;
  --bg-alt: #14171f;
  --painel: #1a1e28;
  --painel-borda: #2a2f3d;
  --tile: #20242f;
  --tile-borda: #333949;
  --tile-sombra: #05060a;
  --texto: #f2ede0;
  --texto-muted: #9096a6;
  --texto-fraco: #5c6274;
  --ouro: #e3b341;
  --ouro-forte: #f3d27e;
  --teal: #3ec2ab;
  --coral: #e2593f;

  /* tipografia */
  --f-display: 'Fraunces', Georgia, serif;
  --f-mono: 'Space Mono', 'Courier New', monospace;
  --f-ui: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;

  /* layout */
  --container: 1080px;
  --raio-card: 20px;
  --raio-tile: 6px;
  --sombra-card: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  --painel-lateral-largura: 380px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--f-ui);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--f-display); margin: 0; font-weight: 600; }
p { margin: 0; }

a { color: inherit; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

:focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 3px;
  border-radius: 4px;
}

/* leve textura de "mesa de feltro" no fundo, bem sutil */
.board-textura {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(227, 179, 65, 0.08), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(62, 194, 171, 0.06), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.012) 0px, rgba(255, 255, 255, 0.012) 1px, transparent 1px, transparent 3px),
    var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* =========================== HEADER =========================== */

.topo {
  padding: 20px 0;
  border-bottom: 1px solid var(--painel-borda);
  background: linear-gradient(var(--bg-alt), rgba(20, 23, 31, 0.4));
}

.topo-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.marca { display: flex; align-items: center; gap: 12px; }

.marca-selo {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 26px;
  color: var(--bg);
  background: var(--ouro);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  box-shadow: 0 4px 0 #a87f21, 0 8px 16px -6px rgba(227, 179, 65, 0.5);
  transform: rotate(-4deg);
  flex-shrink: 0;
}

.marca-texto {
  font-family: var(--f-display);
  font-size: 18px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.contador-geral { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.contador-geral-rotulo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-muted);
}

.btn-compartilhar-meus {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ouro-forte);
  background: transparent;
  border: 1px solid rgba(227, 179, 65, 0.4);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.btn-compartilhar-meus:hover { background: rgba(227, 179, 65, 0.12); border-color: var(--ouro); }
.btn-compartilhar-meus:disabled { opacity: 0.6; cursor: wait; }

/* =========================== FLIP TILES =========================== */

.flip-grupo { display: flex; gap: 3px; }

.flip-tile {
  position: relative;
  font-family: var(--f-mono);
  font-weight: 700;
  background: var(--tile);
  border: 1px solid var(--tile-borda);
  color: var(--ouro-forte);
  border-radius: var(--raio-tile);
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -6px 10px -6px rgba(0, 0, 0, 0.6), 0 2px 0 var(--tile-sombra);
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

.flip-tile::after {
  /* linha de dobra do painel mecânico */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.55);
  transform: translateY(-0.5px);
}

.flip-tile.girando { animation: flipar 260ms cubic-bezier(.4,0,.2,1); }

@keyframes flipar {
  0%   { transform: rotateX(0deg); }
  45%  { transform: rotateX(-92deg); }
  55%  { transform: rotateX(-92deg); }
  100% { transform: rotateX(0deg); }
}

/* tamanho padrão (contador do topo) */
.contador-geral .flip-tile { width: 22px; height: 30px; font-size: 17px; }

/* tamanho grande (tiles de input de número) */
.tile-linha { display: flex; gap: 6px; align-items: center; justify-content: center; }

.tile-input {
  width: 38px;
  height: 50px;
  font-size: 24px;
  /* largura/altura são border-box (1px de borda de cada lado) — a
     line-height precisa bater com a caixa de conteúdo (50 - 2px)
     pra centralizar o dígito de verdade */
  line-height: 48px;
  color: var(--texto);
  border: 1px solid var(--tile-borda);
  background: var(--tile);
}
.tile-input.preenchido { color: var(--teal); border-color: rgba(62, 194, 171, 0.5); }

input.tile-input {
  text-align: center;
  padding: 0;
  font-family: var(--f-mono);
  font-weight: 700;
  caret-color: var(--teal);
}
input.tile-input:focus { border-color: var(--ouro); box-shadow: 0 0 0 3px rgba(227, 179, 65, 0.18); outline: none; }

/* tamanho pequeno (linhas do ranking) */
.mini-numero { display: flex; gap: 2px; }
.mini-numero .flip-tile { width: 20px; height: 26px; font-size: 13px; border-radius: 4px; }
.mini-contador { display: flex; gap: 2px; }
.mini-contador .flip-tile { width: 16px; height: 22px; font-size: 11px; border-radius: 4px; }

/* Todo número (nas caixinhas de registro e no ranking) sempre tem as
   duas primeiras casas em destaque dourado — o resto fica escuro,
   igual em qualquer estado e categoria. */
.tile-input:nth-child(-n+2),
.mini-numero .flip-tile:nth-child(-n+2) {
  background: var(--ouro);
  border-color: var(--ouro-forte);
  color: var(--bg);
}
.tile-input:nth-child(-n+2).preenchido { color: var(--bg); border-color: var(--ouro-forte); }
.tile-input:nth-child(-n+2):focus { border-color: var(--bg); box-shadow: 0 0 0 3px rgba(227, 179, 65, 0.35); }

/* =========================== HERO =========================== */

.hero {
  padding: 56px 24px 40px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: start;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}
.hero h1 em { color: var(--ouro); font-style: normal; }

.regra {
  font-size: 17px;
  color: var(--texto-muted);
  max-width: 46ch;
}
.regra strong { color: var(--texto); }

/* =========================== PAINEL (ranking + registro) =========================== */

.painel {
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
  padding: 22px;
}

.painel-cabecalho { margin-bottom: 14px; }
.painel-titulo { font-size: 20px; }
.painel-aviso {
  margin-top: 8px;
  font-size: 13px;
  color: var(--coral);
  background: rgba(226, 89, 63, 0.1);
  border: 1px solid rgba(226, 89, 63, 0.3);
  padding: 8px 10px;
  border-radius: 8px;
}

.tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.tabs[hidden] { display: none; }

.tab-categoria {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 13px;
  color: var(--texto-muted);
  background: transparent;
  border: 1px solid var(--painel-borda);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 150ms, border-color 150ms, background 150ms;
}
.tab-categoria:hover { color: var(--texto); border-color: var(--texto-fraco); }
.tab-categoria[aria-selected="true"] {
  color: var(--bg);
  background: var(--ouro);
  border-color: var(--ouro);
}
.tab-categoria .badge-registrado { margin-left: 6px; opacity: 0.7; }

.categoria-view { display: none; }
.categoria-view.ativa { display: block; animation: surgir 200ms ease; }

@keyframes surgir { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* --- ranking primeiro, sempre visível --- */
.ranking-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--painel-borda);
  margin-bottom: 4px;
}
.ranking-titulo { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--texto-muted); }
.ranking-total { font-size: 12px; color: var(--texto-fraco); }

/* sem altura máxima nem scroll — se tiver mais linhas, o card cresce */
.ranking-lista { list-style: none; margin: 0; padding: 0; }

.ranking-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px dashed var(--painel-borda);
}
.ranking-item:last-child { border-bottom: none; }
.ranking-item.destaque { background: linear-gradient(90deg, rgba(227, 179, 65, 0.08), transparent); border-radius: 8px; }

.ranking-esquerda { display: flex; align-items: center; gap: 8px; }
.coroa { font-size: 13px; }

.ranking-direita { display: flex; align-items: center; gap: 10px; }

.ranking-vazio { font-size: 13.5px; color: var(--texto-fraco); padding: 14px 4px; }

/* --- campos sempre abertos + um único botão (Registrar/Salvar) --- */
.tile-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}
/* o atributo [hidden] tem a mesma especificidade da regra acima —
   sem isso aqui, "display: flex" ganha do "display: none" nativo e
   o formulário nunca some de verdade nos estados que não são o seu */
.tile-form[hidden] { display: none; }

.btn-acao {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--bg);
  background: var(--teal);
  border: none;
  padding: 13px 22px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 0 #21806f;
  transition: transform 120ms, box-shadow 120ms;
}
.btn-acao:hover { transform: translateY(-1px); }
.btn-acao:active { transform: translateY(2px); box-shadow: 0 2px 0 #21806f; }
.btn-acao:disabled {
  background: var(--tile);
  color: var(--texto-fraco);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.feedback {
  font-size: 13.5px;
  padding: 9px 12px;
  border-radius: 8px;
  margin-top: 14px;
  text-align: center;
}
.feedback.erro { background: rgba(226, 89, 63, 0.12); color: #ff9c86; border: 1px solid rgba(226, 89, 63, 0.35); }
.feedback.sucesso { background: rgba(62, 194, 171, 0.12); color: #8fe9d8; border: 1px solid rgba(62, 194, 171, 0.35); }
.feedback.aviso { background: rgba(227, 179, 65, 0.12); color: var(--ouro-forte); border: 1px solid rgba(227, 179, 65, 0.35); }

.shake { animation: balancar 320ms; }
@keyframes balancar {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* =========================== MAPA =========================== */

.mapa-secao { padding: 20px 24px 80px; }

.mapa-cabecalho { text-align: center; max-width: 560px; margin: 0 auto 30px; }
.mapa-cabecalho h2 { font-size: 28px; margin-bottom: 8px; }
.mapa-cabecalho p { color: var(--texto-muted); font-size: 15px; }

/* mapa à esquerda, painel do estado sempre à direita e do mesmo
   tamanho — em telas estreitas os dois empilham */
.mapa-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

@media (min-width: 881px) {
  .mapa-grid { grid-template-columns: 1fr var(--painel-lateral-largura); }
  .painel-lateral { position: sticky; top: 24px; }
}

.mapa-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.mapa-svg-wrap { width: min(560px, 100%); }
.mapa-svg-wrap svg { width: 100%; height: auto; display: block; }

.mapa-svg-wrap :is(path) {
  fill: var(--tile);
  stroke: var(--bg-alt);
  stroke-width: 1.1;
  cursor: pointer;
  transition: fill 150ms ease, filter 150ms ease;
}
.mapa-svg-wrap .circle { fill: var(--tile); stroke: var(--bg-alt); }
.mapa-svg-wrap text {
  fill: var(--texto-muted);
  font-family: var(--f-mono);
  font-size: 10px;
  pointer-events: none;
  transition: fill 150ms ease;
}

/* o próprio preenchimento dourado já serve de indicador de foco pro
   teclado — o contorno padrão do navegador vira um retângulo grande
   e feio em cima do contorno irregular do estado, então tiramos ele
   (em ambas as variantes — alguns navegadores aplicam o outline
   nativo via :focus mesmo sem bater com :focus-visible) */
.mapa-svg-wrap .estado:focus,
.mapa-svg-wrap .estado:focus-visible {
  outline: none;
}

.mapa-svg-wrap .estado:hover path,
.mapa-svg-wrap .estado:focus-visible path,
.mapa-svg-wrap .estado.hover path {
  fill: var(--ouro);
  filter: drop-shadow(0 0 8px rgba(227, 179, 65, 0.65));
}
.mapa-svg-wrap .estado:hover .circle,
.mapa-svg-wrap .estado.hover .circle { fill: var(--ouro); }
.mapa-svg-wrap .estado:hover text,
.mapa-svg-wrap .estado.hover text { fill: var(--bg); }

.mapa-svg-wrap .estado.selecionado path {
  fill: var(--teal);
  filter: drop-shadow(0 0 10px rgba(62, 194, 171, 0.75));
  animation: pulsar 1.8s ease-in-out infinite;
}
.mapa-svg-wrap .estado.selecionado .circle { fill: var(--teal); }
.mapa-svg-wrap .estado.selecionado text { fill: var(--bg); }

/* estados fora de alcance: cor sólida, sem opacity (opacity em ~26
   paths ao mesmo tempo deixa transparecer onde os contornos dos
   estados se sobrepõem — comum em mapas SVG — criando aquelas
   "sombras" manchadas nas bordas). O clique continua normal: dá pra
   entrar e ver o ranking, só não registra número ali. */
.mapa-svg-wrap .estado.travado path {
  fill: var(--bg-alt);
  stroke: var(--bg);
}
.mapa-svg-wrap .estado.travado text { fill: var(--texto-fraco); }

@keyframes pulsar {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(62, 194, 171, 0.55)); }
  50% { filter: drop-shadow(0 0 14px rgba(62, 194, 171, 0.9)); }
}

.mapa-legenda {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--texto-muted);
  min-height: 18px;
  text-align: center;
}
.mapa-legenda strong { color: var(--ouro); }

/* estado já escolhido: vira um selo dourado bem visível, deixando
   claro que essa escolha não muda mais */
.mapa-legenda.travada {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ouro-forte);
  font-weight: 700;
  background: rgba(227, 179, 65, 0.1);
  border: 1px solid rgba(227, 179, 65, 0.35);
  padding: 7px 14px;
  border-radius: 999px;
}
.mapa-legenda.travada strong { color: var(--ouro-forte); }

/* =========================== PAINEL LATERAL (estado) =========================== */

/* Fica sempre visível ao lado do mapa. Sem altura fixa e sem scroll
   interno — se o conteúdo não cabe, o card cresce (nunca aparece
   barra de rolagem). O min-height é só um piso, pro card não ficar
   pequeno demais quando está vazio/placeholder. */
.painel-lateral .painel {
  min-height: 360px;
  display: flex;
  flex-direction: column;
}

.painel-estado-placeholder {
  margin: auto;
  text-align: center;
  color: var(--texto-fraco);
  font-size: 14px;
  max-width: 26ch;
}

/* =========================== COMPARTILHAR (modal) =========================== */

/* Fallback pra quando o compartilhamento nativo (com a imagem já
   anexada) não está disponível no navegador — dá as opções que
   realmente funcionam via link: WhatsApp (texto), Facebook (link do
   site) e baixar a imagem pra postar manualmente em qualquer lugar,
   Instagram incluso. */
.compartilhar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 7, 10, 0.7);
  backdrop-filter: blur(2px);
  z-index: 70;
  opacity: 0;
  transition: opacity 200ms ease;
}
.compartilhar-overlay.visivel { opacity: 1; }

.compartilhar-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(360px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-card);
  padding: 22px;
  z-index: 71;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.compartilhar-modal.visivel { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }

.compartilhar-fechar {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--painel-borda);
  background: var(--tile);
  color: var(--texto-muted);
  cursor: pointer;
  font-size: 13px;
}
.compartilhar-fechar:hover { color: var(--texto); border-color: var(--texto-fraco); }

.compartilhar-preview {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--painel-borda);
  margin: 8px 0 18px;
  display: block;
}

.compartilhar-acoes { display: flex; flex-direction: column; gap: 10px; }

.compartilhar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms;
}
.compartilhar-btn:hover { transform: translateY(-1px); }
.compartilhar-btn:active { transform: translateY(1px); }

.compartilhar-btn.whatsapp { background: #2fae60; color: #06120a; }
.compartilhar-btn.facebook { background: #4c7ed9; color: #06101f; }
.compartilhar-btn.baixar { background: var(--tile); color: var(--texto); border: 1px solid var(--painel-borda); }

.compartilhar-nota {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--texto-fraco);
  text-align: center;
}

/* =========================== TOAST =========================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 20px);
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  color: var(--texto);
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: var(--sombra-card);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 60;
  max-width: 90vw;
  text-align: center;
  white-space: pre-line;
}
.toast.visivel { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* =========================== RODAPÉ =========================== */

.rodape { padding: 30px 24px 50px; text-align: center; }
.rodape p { color: var(--texto-fraco); font-size: 13px; }

/* =========================== RESPONSIVO =========================== */

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; padding-top: 36px; }
}

@media (max-width: 640px) {
  .topo-inner { justify-content: center; text-align: center; }
  .contador-geral { align-items: center; }

  .hero { padding: 30px 18px 20px; gap: 28px; }
  .hero h1 { font-size: 30px; }

  .mapa-secao { padding: 10px 16px 60px; }

  .tile-input { width: 32px; height: 44px; font-size: 20px; line-height: 42px; }

  .painel-lateral .painel { min-height: 320px; }
}