/* Snap Explosivo no navegador. Cores, fontes e componentes vêm do Grimório (tokens.css, bundle.css);
   aqui fica só o layout da página e da mesa (a mesa segue o painel do hp-snap, em tamanho fluido). */

@font-face { font-family: "Cinzel"; font-weight: 400 900; src: url("fonts/Cinzel-Variable.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400; src: url("fonts/Alegreya-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 400; src: url("fonts/Alegreya-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; font-weight: 500; src: url("fonts/AlegreyaSans-500.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Alegreya Sans"; font-weight: 700; src: url("fonts/AlegreyaSans-700.woff2") format("woff2"); font-display: swap; }

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { background: var(--surface-0); overflow-x: hidden; }
[hidden] { display: none !important; }

.sn-fundo {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7, 10, 16, 0.55), rgba(7, 10, 16, 0.92) 70%),
    url("castelo-noite.webp") center top / cover no-repeat,
    var(--surface-0);
}

/* ---------- Cabeçalho ---------- */
.sn-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-4);
}
.sn-brasao { width: 40px; height: 40px; filter: drop-shadow(0 0 10px var(--gold-glow)); }
.sn-sobretitulo { margin: 0; color: var(--ink-muted); }
.sn-titulo { margin: 0; color: var(--gold-bright); }
.sn-som { margin-left: auto; }

/* ---------- Layout: a mesa e o ranking ao lado ---------- */
.sn-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: var(--space-6);
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-6);
}
.sn-jogo { padding: var(--space-6); min-height: 560px; }
.sn-tela { display: grid; gap: var(--space-4); }
.sn-pe { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-4) var(--space-6); text-align: center; color: var(--ink-muted); }
.sn-pe a { color: var(--gold); }

/* ---------- Início ---------- */
.sn-intro { margin: 0; font-size: 18px; line-height: 28px; }
.sn-intro strong { color: var(--gold-bright); font-weight: 400; }
.sn-regras { margin: 0; padding-left: var(--space-6); color: var(--ink-muted); display: grid; gap: var(--space-1); }
.sn-niveis { border: 0; margin: 0; padding: 0; }
.sn-niveis legend { padding: 0; margin-bottom: var(--space-1); }
.sn-jogar { justify-self: start; min-width: 220px; }
.sn-aviso { margin: 0; color: var(--danger); }

/* ---------- HUD da partida ---------- */
.sn-hud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.sn-hud__item { display: grid; justify-items: center; gap: 2px; padding: var(--space-2); border: 1px solid var(--line-faint); background: rgba(0, 0, 0, 0.25); }
.sn-hud__item .rotulo { color: var(--ink-muted); font-size: 11px; }
.sn-hud__valor { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.sn-hud__valor.is-pulso { animation: sn-pulso 300ms ease-out; }
@keyframes sn-pulso { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ---------- A mesa: a carta de baixo e, por cima, a que chega de verso e desvira ---------- */
.sn-mesa {
  --mesa-w: clamp(200px, 58vw, 300px);
  --mesa-h: calc(var(--mesa-w) * 1.07);
  position: relative;
  display: grid;
  place-items: center;
  height: var(--mesa-h);
  margin: var(--space-2) 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.sn-mesa > * { grid-area: 1 / 1; }
.sn-virar { position: relative; width: var(--mesa-w); height: var(--mesa-h); perspective: 1200px; transform-style: preserve-3d; }
.sn-face { position: absolute; inset: 0; }
.sn-face--verso { visibility: hidden; }
.sn-virar.is-chegando .sn-face { animation: sn-frente var(--sn-virar-ms, 400ms) step-end both; }
.sn-virar.is-chegando .sn-face--verso { animation-name: sn-verso; }
@keyframes sn-frente { 0% { visibility: hidden; } 72.5% { visibility: visible; } }
@keyframes sn-verso { 0% { visibility: visible; } 72.5% { visibility: hidden; } }
.sn-face--verso.gr-carta { --w: calc(var(--mesa-h) * 0.73); --h: var(--mesa-h); width: var(--w); height: var(--h); left: 50%; margin-left: calc(var(--w) / -2); transform: rotateY(180deg); }
.sn-virar.is-chegando { animation: sn-chegar var(--sn-virar-ms, 400ms) ease-out both; }
@keyframes sn-chegar {
  0% { transform: translate(70px, -26px) rotateY(180deg) rotateZ(8deg); opacity: 0.2; }
  45% { transform: translate(0, 0) rotateY(180deg) rotateZ(0); opacity: 1; }
  100% { transform: translate(0, 0) rotateY(0) rotateZ(0); opacity: 1; }
}
.sn-carta--baixo { opacity: 0.85; }
/* A arte já traz moldura e nome; o gr-carta só guarda o lugar, o par e a explosão. */
.sn-carta { --w: var(--mesa-w); --h: var(--mesa-h); width: var(--w); height: var(--h); padding: 0; background: none; border: 0; box-shadow: none; display: grid; place-items: center; }
.sn-carta .gr-carta__nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sn-arte { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6)); user-select: none; -webkit-user-drag: none; }
.sn-carta.gr-carta--vazia { border: 1.5px dashed var(--line); border-radius: var(--radius-m); }
.sn-carta.gr-carta--vazia .sn-arte { display: none; }
.sn-carta--baixo.gr-carta--vazia { border-color: transparent; }
.sn-carta.is-par .sn-arte { filter: drop-shadow(0 0 16px var(--gold-glow)) drop-shadow(0 0 4px var(--gold-bright)) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.6)); }
.sn-carta.is-explodiu { animation: sn-tranco 450ms ease-out; }
.sn-carta.is-explodiu .sn-arte { filter: drop-shadow(0 0 18px var(--danger)) sepia(0.6) saturate(2) hue-rotate(-20deg) brightness(0.8); }
@keyframes sn-tranco {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  15% { transform: translate(-10px, 4px) rotate(-4deg); }
  30% { transform: translate(9px, -6px) rotate(3deg); }
  45% { transform: translate(-6px, 3px) rotate(-2deg); }
  60% { transform: translate(4px, -2px) rotate(1deg); }
}

/* Pontos ganhos subindo da carta. */
.sn-ganho { pointer-events: none; z-index: 3; font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--gold-bright); text-shadow: 0 0 14px var(--gold-glow), 0 2px 4px #000; opacity: 0; }
.sn-ganho.is-subindo { animation: sn-subir 900ms ease-out both; }
.sn-ganho.is-perda { color: var(--danger); text-shadow: 0 0 12px rgba(239, 106, 90, 0.5), 0 2px 4px #000; }
@keyframes sn-subir { 0% { opacity: 0; transform: translateY(10px) scale(0.8); } 20% { opacity: 1; transform: translateY(-10px) scale(1.1); } 100% { opacity: 0; transform: translateY(-80px) scale(1); } }

/* Explosão: clarão, fumaça e cartas voando (como as cartas que se espalham na mesa do jogo). */
.sn-estilhacos { position: relative; width: 0; height: 0; pointer-events: none; z-index: 2; }
.sn-clarao { position: absolute; left: -180px; top: -180px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 160, 0.95), rgba(239, 106, 90, 0.6) 30%, rgba(60, 40, 30, 0.5) 55%, transparent 70%); animation: sn-clarao 1100ms ease-out both; }
@keyframes sn-clarao { 0% { transform: scale(0.1); opacity: 1; } 30% { opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
.sn-voando { position: absolute; left: -22px; top: -30px; --w: 44px; --h: 60px; animation: sn-voar 900ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes sn-voar { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }
.sn-jogo.is-tremendo { animation: sn-tremer 380ms linear; }
@keyframes sn-tremer { 0%, 100% { transform: translate(0); } 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }

.sn-situacao { margin: 0; min-height: 32px; text-align: center; font-family: var(--font-body); font-size: 20px; line-height: 32px; color: var(--ink); }
.sn-situacao.is-snap { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; color: var(--gold-bright); text-shadow: 0 0 10px var(--gold-glow); }
.sn-situacao.is-bum { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; color: var(--danger); }
.sn-situacao.is-contagem { font-family: var(--font-display); font-size: 28px; color: var(--gold-bright); }

.sn-botao-snap { justify-self: center; min-width: min(320px, 100%); min-height: 56px; font-size: 16px; touch-action: manipulation; }
.sn-botao-snap.is-apertado { filter: drop-shadow(0 0 14px var(--gold-glow)); transform: scale(0.97); }
.sn-rodape { display: flex; justify-content: center; }

/* ---------- Fim ---------- */
.sn-fim__titulo { margin: 0; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 26px; color: var(--gold-bright); }
.sn-fim__pontos { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: var(--space-2); }
.sn-fim__pontos strong { font-family: var(--font-display); font-size: 56px; line-height: 64px; font-weight: 700; color: var(--gold-bright); text-shadow: 0 0 20px var(--gold-glow); font-variant-numeric: tabular-nums; }
.sn-fim__pontos .rotulo { color: var(--ink-muted); }
.sn-fim__ranking { margin: 0; text-align: center; min-height: 20px; color: var(--ink); }
.sn-fim__ranking.is-erro { color: var(--danger); }
.sn-fim__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.sn-resultado__grupos { display: grid; gap: var(--space-3); max-height: 320px; overflow-y: auto; }
.sn-grupo { display: grid; gap: var(--space-1); }
.sn-grupo__titulo { margin: 0; font-family: var(--font-label); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.sn-grupo.is-seus .sn-grupo__titulo { color: var(--gold); }
.sn-grupo.is-bum .sn-grupo__titulo { color: var(--danger); }
.sn-grupo__cartas { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.sn-grupo__vazio { font-family: var(--font-body); font-size: 15px; color: var(--ink-muted); }
.sn-mini { width: 64px; height: 70px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55)); }
.sn-grupo.is-bum .sn-mini { filter: grayscale(0.6) drop-shadow(0 0 6px var(--danger)); }

/* ---------- Ranking ---------- */
.sn-ranking { display: grid; gap: var(--space-3); position: sticky; top: var(--space-4); }
.sn-ranking .gr-tab { flex: 1; }
.sn-ranking__niveis .gr-chip span { min-width: 80px; }
.sn-lista { list-style: none; margin: 0; padding: 0; display: grid; max-height: 520px; overflow-y: auto; }
.sn-lista li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-1); border-bottom: 1px solid var(--line-faint); }
.sn-lista li:last-child { border-bottom: 0; }
.sn-lista__pos { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink-muted); text-align: center; }
.sn-lista li:nth-child(1) .sn-lista__pos { color: var(--gold-bright); text-shadow: 0 0 10px var(--gold-glow); font-size: 18px; }
.sn-lista li:nth-child(2) .sn-lista__pos { color: #d8d4cc; }
.sn-lista li:nth-child(3) .sn-lista__pos { color: #c98a52; }
.sn-lista__nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-lista__detalhe { display: block; font-family: var(--font-ui); font-size: 12px; color: var(--ink-muted); }
.sn-lista__pontos { font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold-bright); }
.sn-lista li.is-voce { background: var(--lavagem); }
.sn-lista li.is-voce .sn-lista__nome { color: var(--gold-bright); }
.sn-lista__vazia { margin: 0; color: var(--ink-muted); text-align: center; }

/* ---------- Telas menores: o ranking desce para baixo da mesa ---------- */
@media (max-width: 860px) {
  .sn-layout { grid-template-columns: minmax(0, 1fr); }
  .sn-ranking { position: static; }
}
@media (max-width: 520px) {
  .sn-cabecalho { padding-top: var(--space-4); }
  .sn-titulo { font-size: 22px; line-height: 28px; }
  .sn-jogo { padding: var(--space-4); min-height: 0; }
  .sn-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-hud__valor { font-size: 18px; line-height: 24px; }
  .sn-jogar { justify-self: stretch; }
  .sn-intro { font-size: 16px; line-height: 24px; }
  .sn-mesa { --mesa-w: min(62vw, 300px); }
}
/* Durante a partida no celular, a mesa ocupa a tela e o ranking sai do caminho. */
body.is-jogando .sn-ranking, body.is-jogando .sn-pe { display: none; }
body.is-jogando .sn-layout { grid-template-columns: minmax(0, 1fr); max-width: 720px; }

@media (prefers-reduced-motion: reduce) {
  .sn-virar.is-chegando, .sn-carta.is-explodiu, .sn-jogo.is-tremendo, .sn-hud__valor.is-pulso { animation-duration: 1ms; }
  .sn-voando, .sn-clarao { display: none; }
}

/* Em tela de toque não há Espaço nem Esc: some a dica da tecla nos botões da partida. */
@media (hover: none) and (pointer: coarse) {
  .sn-botao-snap .gr-key, .sn-rodape .gr-key, .sn-jogar .gr-key, .sn-fim__acoes .gr-key { display: none; }
}