/* ═══════════════════════════════════════════════════════════════════════════
   eufaço.com: a folha de estilo de TODAS as páginas.

   O mundo é o do app, sem tradução: céu ameixa, poço de feltro petróleo com
   aro de latão, interface fosca com contorno escuro e aresta chapada (o
   "plinto" do botão âmbar), lilás só pra interação. As cartas candy são as
   ÚNICAS peças brilhantes da tela; é isso que separa interface de baralho.

   As fontes são as mesmas do app, servidas daqui (nada de Google Fonts: a
   página de privacidade promete que o IP do visitante não vai pra terceiro).
   O woff2 `-l` é um recorte latino de ~17 KB; o .ttf inteiro só desce se a
   página precisar de um caractere fora dele.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Titan One';font-display:swap;src:url('/f/titan-l.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303,U+0327,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215}
@font-face{font-family:'Titan One';font-display:swap;src:url('/f/titan.ttf') format('truetype');
  unicode-range:U+0100-0130,U+0132-0151,U+0154-024F,U+1E00-1EFF}
@font-face{font-family:'Baloo 2';font-weight:400;font-display:swap;src:url('/f/baloo400-l.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303,U+0327,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215}
@font-face{font-family:'Baloo 2';font-weight:400;font-display:swap;src:url('/f/baloo400.ttf') format('truetype');
  unicode-range:U+0100-0130,U+0132-0151,U+0154-024F,U+1E00-1EFF}
@font-face{font-family:'Baloo 2';font-weight:800;font-display:swap;src:url('/f/baloo800-l.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303,U+0327,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215}
@font-face{font-family:'Baloo 2';font-weight:800;font-display:swap;src:url('/f/baloo800.ttf') format('truetype');
  unicode-range:U+0100-0130,U+0132-0151,U+0154-024F,U+1E00-1EFF}

/* Os tokens são os de `apps/mobile/constants/theme.ts` (tema "botequim"),
   com os mesmos nomes de papel. Mudou lá, muda aqui. */
:root{
  --ceu:#8E4B7A; --ameixa:#3A2150; --noite:#1F1130; --breu:#160B24;
  --sup:#4C2A5E; --sup2:#613778; --contorno:#150B22;
  --texto:#FFFFFF; --sec:#E0CDEC; --fraco:#B9A2CC;
  --ambar:#FFAE4D; --ambar-claro:#FFD59A; --cobre:#A85F1E; --tinta-ambar:#2A1510;
  --lilas:#B98CFF;
  --feltro:#163C42; --feltro-fundo:#0E2A2F; --latao:#D2A25E; --texto-feltro:#E6F1EC;
  --bronze:#C77E3A; --prata:#B7BCC6; --ouro:#FFC24A; --diamante:#20C9DE;
  --certo:#3DDC84; --perigo:#FF8A8A;
  --raio:20px; --raio-p:14px;
  --sombra:0 14px 34px rgba(12,5,22,.5);
  --largura:1180px; --gutter:20px;
  --display:'Titan One',system-ui,sans-serif;
  --corpo:'Baloo 2',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* A "batida" do display: contorno escuro de 2px + a sombra chapada pra
     baixo, o mesmo adesivo dos títulos do app e das peças de divulgação. */
  --batida:0 4px 0 var(--contorno),2px 2px 0 var(--contorno),-2px 2px 0 var(--contorno),
    2px -1px 0 var(--contorno),-2px -1px 0 var(--contorno),0 10px 22px rgba(12,5,22,.45);
  --batida-p:0 3px 0 var(--contorno),1.5px 1.5px 0 var(--contorno),-1.5px 1.5px 0 var(--contorno),
    1.5px -1px 0 var(--contorno),-1.5px -1px 0 var(--contorno);
  color-scheme:dark;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{
  background:var(--ameixa);
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-behavior:smooth;scroll-padding-top:84px;
  scrollbar-color:var(--sup2) var(--noite);
}
body{
  min-height:100vh;overflow-x:clip;
  /* O céu: claro no topo (a "luz do teto" do app), assentando no ameixa e
     escurecendo no pé da página. Fixo em pixels pra a luz morar em cima em
     qualquer altura de página, não esticar junto com ela. */
  background:
    radial-gradient(1100px 520px at 72% -80px,rgba(255,174,77,.16),transparent 70%),
    linear-gradient(180deg,var(--ceu) 0,#653577 380px,var(--ameixa) 860px,#2E1A44 1600px,#26153A 100%);
  background-color:var(--ameixa);
  color:var(--texto);font-family:var(--corpo);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  caret-color:var(--ambar);
}
::selection{background:var(--ambar);color:var(--tinta-ambar);text-shadow:none}
img{display:block;max-width:100%;height:auto}
svg{display:block}
a{color:var(--ambar);text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:.22em;text-decoration-color:rgba(255,174,77,.45);
  transition:text-decoration-color .15s,color .15s}
a:hover{text-decoration-color:var(--ambar)}
:focus-visible{outline:3px solid var(--lilas);outline-offset:3px;border-radius:6px}
strong,b{font-weight:800;color:var(--texto)}
p{color:var(--sec)}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--texto);
  line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:normal;color:var(--ambar)}
.so-leitor{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pular{position:absolute;left:12px;top:-60px;z-index:60;background:var(--ambar);color:var(--tinta-ambar);
  font-weight:800;padding:10px 16px;border-radius:12px;border:2px solid var(--contorno);text-decoration:none}
.pular:focus{top:12px}

.caixa-larga{width:100%;max-width:var(--largura);margin:0 auto;padding:0 var(--gutter)}

/* ── Botões ──────────────────────────────────────────────────────────────
   Peça de brinquedo: contorno escuro, face chapada e o plinto (a aresta de
   baixo) que afunda quando aperta. É a gramática do botão JOGAR do app. */
.botao{
  --face:var(--ambar);--plinto:var(--cobre);--tinta:var(--tinta-ambar);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:12px 22px;border-radius:16px;
  background:var(--face);color:var(--tinta);border:2.5px solid var(--contorno);
  font-family:var(--corpo);font-weight:800;font-size:17px;line-height:1.1;text-decoration:none;
  box-shadow:0 5px 0 var(--plinto),0 5px 0 2.5px var(--contorno),0 14px 24px rgba(12,5,22,.42);
  transform:translateY(0);cursor:pointer;
  transition:transform .12s cubic-bezier(.2,.8,.3,1),box-shadow .12s cubic-bezier(.2,.8,.3,1),filter .15s;
}
.botao:hover{filter:brightness(1.06);text-decoration:none}
.botao:active{transform:translateY(4px);
  box-shadow:0 1px 0 var(--plinto),0 1px 0 2.5px var(--contorno),0 6px 12px rgba(12,5,22,.4)}
.botao--fosco{--face:var(--sup2);--plinto:#3B1F52;--tinta:var(--texto)}
.botao--claro{--face:#F4ECFA;--plinto:#9C86B4;--tinta:var(--noite)}
.botao svg{width:22px;height:22px;flex:none}
.botao small{display:block;font-size:12px;font-weight:400;opacity:.85;line-height:1}
.botao .rotulo{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.lojas{display:flex;flex-wrap:wrap;gap:14px}
.lojas .botao{min-width:200px;justify-content:flex-start}

/* ── Cabeçalho ───────────────────────────────────────────────────────── */
.topo{position:sticky;top:0;z-index:40;background:var(--noite);
  border-bottom:2px solid var(--contorno);box-shadow:0 8px 22px rgba(12,5,22,.32)}
.topo-dentro{display:flex;align-items:center;gap:18px;height:66px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texto);flex:none}
.marca img{width:46px;height:46px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
.marca span{font-family:var(--display);font-size:22px;letter-spacing:-.01em;text-shadow:var(--batida-p)}
.menu-largo{display:flex;align-items:center;gap:4px;margin-left:auto}
.menu-largo a{color:var(--sec);text-decoration:none;font-weight:800;font-size:16px;
  padding:9px 13px;border-radius:12px;transition:background .15s,color .15s}
.menu-largo a:hover{background:rgba(255,255,255,.07);color:var(--texto)}
.menu-largo a[aria-current="page"]{color:var(--ambar);background:rgba(255,174,77,.1)}
.topo .botao{min-height:44px;padding:8px 16px;font-size:16px;border-radius:13px;margin-left:10px;
  box-shadow:0 4px 0 var(--plinto),0 4px 0 2.5px var(--contorno),0 8px 16px rgba(12,5,22,.35)}
.topo .botao:active{transform:translateY(3px);box-shadow:0 1px 0 var(--plinto),0 1px 0 2.5px var(--contorno)}

/* Em /baixar o botão do topo apontaria pra própria página. */
body[data-pagina="baixar"] .topo .botao{display:none}
body[data-pagina="baixar"] .menu-largo,body[data-pagina="baixar"] .menu-curto{margin-left:auto}

/* O menu do celular é um <details>: abre e fecha sem JavaScript nenhum. O
   script só acrescenta fechar no Esc e ao tocar fora. */
.menu-curto{display:none;position:relative}
.menu-curto summary{list-style:none;cursor:pointer;width:46px;height:46px;border-radius:13px;
  display:grid;place-items:center;background:var(--sup);border:2.5px solid var(--contorno);
  box-shadow:0 3px 0 var(--contorno)}
.menu-curto summary::-webkit-details-marker{display:none}
.menu-curto summary svg{width:22px;height:22px}
.menu-curto .ico-fecha{display:none}
.menu-curto[open] .ico-abre{display:none}
.menu-curto[open] .ico-fecha{display:block}
.menu-curto[open]::before{content:"";position:fixed;left:0;right:0;top:66px;bottom:0;background:rgba(12,5,22,.62);
  animation:veu .2s ease-out}
@keyframes veu{from{opacity:0}to{opacity:1}}
.menu-curto nav{position:fixed;left:0;right:0;top:66px;background:var(--noite);
  border-bottom:2px solid var(--contorno);box-shadow:0 24px 40px rgba(12,5,22,.55);
  padding:10px var(--gutter) 22px;display:grid;gap:4px;
  animation:desce .22s cubic-bezier(.16,1,.3,1)}
.menu-curto nav a{display:flex;align-items:center;gap:14px;min-height:54px;padding:6px 10px;
  color:var(--texto);text-decoration:none;font-weight:800;font-size:19px;border-radius:14px}
.menu-curto nav a:hover,.menu-curto nav a[aria-current="page"]{background:rgba(255,255,255,.06)}
.menu-curto nav a[aria-current="page"]{color:var(--ambar)}
.menu-curto nav img{width:34px;height:34px}
.menu-curto nav .botao{margin-top:12px;justify-content:center}
@keyframes desce{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ── Rodapé ──────────────────────────────────────────────────────────── */
.pe{margin-top:96px;background:var(--breu);border-top:2px solid var(--contorno);padding:56px 0 40px}
.pe-dentro{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:32px 40px}
.pe .marca img{width:56px;height:56px}
.pe-frase{margin-top:14px;font-size:15px;color:var(--fraco);max-width:30ch}
.pe-titulo{font-weight:800;font-size:14px;color:var(--fraco);letter-spacing:.02em;margin-bottom:4px}
.pe ul{list-style:none;display:grid;gap:0}
.pe ul a{display:inline-flex;align-items:center;min-height:40px;color:var(--sec);text-decoration:none;font-weight:800;font-size:16px}
.pe ul a:hover{color:var(--ambar)}
.pe .lojas{flex-direction:column;gap:12px}
.pe .lojas .botao{min-width:0;width:100%;min-height:48px;font-size:15px}
.pe-legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.08);padding-top:22px;margin-top:8px;
  display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;color:var(--fraco)}
.pe-legal p{color:var(--fraco)}

/* ── Feltro: o poço da mesa ──────────────────────────────────────────────
   A textura é a MESMA do app (assets/textures/felt-petroleo.png), com a
   poça de luz por cima e o aro de latão em volta. */
.feltro{
  position:relative;border-radius:30px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%,rgba(255,213,154,.15),transparent 72%),
    radial-gradient(ellipse 120% 90% at 50% 50%,transparent 55%,rgba(5,16,19,.55) 100%),
    url('/kit/feltro.webp') center/520px auto,
    var(--feltro);
  border:5px solid var(--latao);
  box-shadow:0 0 0 3px var(--contorno),inset 0 0 0 2px rgba(0,0,0,.28),inset 0 12px 30px rgba(0,0,0,.35),
    0 26px 50px rgba(8,3,16,.55);
  color:var(--texto-feltro);
}

/* ── Cartas ──────────────────────────────────────────────────────────────
   A arte é a do app; a proporção é a da carta (276×420). `contain` porque
   a arte de família tem proporção um pouco diferente e, com `cover`, a
   manilha saía maior que as comuns ao lado (cicatriz do app). */
.carta{--l:72px;width:var(--l);aspect-ratio:276/420;flex:none;position:relative}
.carta img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.42))}
.carta.acesa img{filter:drop-shadow(0 0 7px var(--luz,#FFD59A)) drop-shadow(0 0 16px var(--luz,#FFD59A)) drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.carta.apagada{opacity:.42}
.carta.cangou img{filter:grayscale(.6) brightness(.8) drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.luz-bronze{--luz:var(--bronze)}.luz-prata{--luz:#E4E8EE}.luz-ouro{--luz:var(--ouro)}
.luz-diamante{--luz:var(--diamante)}.luz-branca{--luz:#FFFFFF}
.carta .selo{position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--corpo);font-weight:800;font-size:12px;line-height:1;padding:5px 8px;border-radius:999px;
  background:var(--noite);color:var(--texto);border:2px solid var(--contorno)}
.carta .selo.ambar{background:var(--ambar);color:var(--tinta-ambar)}

/* O VERBO desenhado entre cartas (o `<Vence>` do app): uma regra com
   cartas sem verbo é uma lista de substantivos. */
.vence{width:30px;height:30px;flex:none;color:var(--ambar);filter:drop-shadow(0 2px 0 var(--contorno))}
.vence.menor{transform:scaleX(-1)}

/* ── Plaquinhas (chips de palpite) ───────────────────────────────────── */
.plaq{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-size:17px;line-height:1;
  padding:7px 12px 6px;border-radius:999px;background:var(--ambar);color:var(--tinta-ambar);
  border:2.5px solid var(--contorno);box-shadow:0 3px 0 var(--contorno);white-space:nowrap}
.plaq--fosca{background:var(--sup2);color:var(--texto)}
.plaq--feltro{background:rgba(9,26,30,.72);color:var(--texto-feltro);border-color:rgba(0,0,0,.6)}
.plaq img{width:20px;height:20px}

/* ── Seções, títulos e texto corrido ─────────────────────────────────── */
.secao{padding:96px 0 0}
.secao>.caixa-larga>h2,.cabeca h2{font-size:clamp(32px,4.2vw,50px);text-shadow:var(--batida)}
.cabeca{max-width:760px;margin-bottom:34px}
.cabeca p{margin-top:14px;font-size:clamp(17px,1.6vw,19px);max-width:60ch}
.lede{font-size:clamp(18px,1.8vw,21px);color:var(--sec);max-width:58ch}
.mais{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:17px;margin-top:22px}
.mais svg{width:18px;height:18px;transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.mais:hover svg{transform:translateX(3px)}

/* Placa fosca: o painel de interface do app (contorno escuro, sem brilho). */
.placa{background:var(--sup);border:2.5px solid var(--contorno);border-radius:var(--raio);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.07),var(--sombra);padding:24px}

/* ── Páginas de leitura (regras, mão do dia, suporte, privacidade) ────── */
.abertura-leitura{padding:64px 0 8px}
.abertura-leitura h1{font-size:clamp(40px,6vw,72px);text-shadow:var(--batida);max-width:15ch}
.abertura-leitura .lede{margin-top:20px}
.texto{max-width:68ch}
.texto h2{font-size:clamp(28px,3.4vw,40px);text-shadow:var(--batida);margin:72px 0 16px}
.texto h3{font-family:var(--corpo);font-weight:800;font-size:20px;line-height:1.3;margin:30px 0 8px;letter-spacing:0}
.texto p{margin:0 0 14px}
.texto ul,.texto ol{margin:0 0 16px 1.2em;color:var(--sec)}
.texto li{margin-bottom:8px;padding-left:4px}
.texto li::marker{color:var(--ambar)}
.data{font-size:15px;color:var(--fraco)}

/* ── Fecho: o último convite de cada página ──────────────────────────── */
.fecho{margin-top:110px}
.fecho .feltro{padding:56px 40px;display:grid;grid-template-columns:1fr auto;gap:28px 48px;align-items:center;overflow:hidden}
.fecho h2{font-size:clamp(34px,4.6vw,56px);text-shadow:var(--batida)}
.fecho p{color:var(--texto-feltro);margin-top:12px;max-width:44ch;font-size:18px}
.fecho .lojas{flex-direction:column}
.fecho-cartas{position:absolute;right:-30px;top:-40px;display:flex;gap:0;opacity:.18;pointer-events:none}

@media (max-width:980px){
  .menu-largo{display:none}
  .menu-curto{display:block}
  .topo .botao{margin-left:auto}
  .pe-dentro{grid-template-columns:1fr 1fr}
  .pe-dentro>:first-child{grid-column:1/-1}
  .pe .lojas{grid-column:1/-1;flex-direction:row}
  .pe .lojas .botao{width:auto;flex:1 1 200px}
  .fecho .feltro{grid-template-columns:1fr;padding:44px 26px}
  .fecho .lojas{flex-direction:row}
}
@media (max-width:560px){
  :root{--gutter:16px}
  body{font-size:17px}
  .topo-dentro{height:60px;gap:10px}
  .menu-curto nav{top:60px}
  .menu-curto[open]::before{top:60px}
  .marca img{width:40px;height:40px}
  .marca span{font-size:19px}
  .topo .botao{padding:8px 13px;font-size:15px}
  .secao{padding-top:72px}
  .lojas .botao{flex:1 1 100%;min-width:0}
  .fecho{margin-top:84px}
  .fecho .feltro{padding:38px 20px;border-radius:24px}
  .abertura-leitura{padding-top:40px}
  .pe{padding-top:44px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA INICIAL: uma rodada do começo ao fim.
   ═══════════════════════════════════════════════════════════════════════════ */
.abre{position:relative;overflow:hidden;padding:56px 0 8px}
/* As cartas desfocadas ao fundo: profundidade, como nas peças de divulgação.
   Miniaturas de 88px ampliadas e borradas (o desfoque esconde a resolução). */
.abre-fundo{position:absolute;inset:0;pointer-events:none}
.abre-fundo img{position:absolute;left:var(--x);top:var(--y);width:var(--t);
  transform:translate(-50%,-50%) rotate(var(--r));filter:blur(5px) saturate(.9);opacity:.32}
.abre-dentro{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:40px 64px;align-items:center}
.abre h1{font-size:clamp(34px,3.9vw,56px);line-height:1.02;text-shadow:var(--batida);letter-spacing:-.015em}
.abre h1 em{display:block}
.abre-lede{margin:22px 0 30px}
.abre-curta{display:none}
.selos{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px}
.selos li{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--sec)}
.selos img{width:26px;height:26px}

/* ── A rodada de mostra ── */
.demo{width:100%}
.demo-mesa{padding:18px 16px 18px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.demo-rivais{grid-area:1/1}.demo-centro{grid-area:2/1}.demo-pe{grid-area:3/1}
.demo-rivais{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.demo-rivais li{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.demo-rivais img{width:56px;height:56px;border-radius:50%;background:var(--sup2);
  border:3px solid var(--contorno);box-shadow:0 0 0 2px rgba(210,162,94,.7),0 6px 12px rgba(0,0,0,.35)}
.demo-rivais b{font-size:14px;line-height:1.1;color:var(--texto)}
.demo-rivais .plaq{font-size:14px;padding:5px 9px 4px;box-shadow:none}
.demo-centro{position:relative;min-height:170px;display:grid;align-items:center;justify-items:center}
.demo-dica{max-width:34ch;text-align:center;font-size:15.5px;line-height:1.45;color:var(--texto-feltro);
  background:rgba(7,22,26,.62);border:2px solid rgba(0,0,0,.45);border-radius:16px;padding:10px 14px;
  transition:opacity .2s}
.demo-dica b{color:var(--ambar-claro)}
.demo-vaza{display:none;gap:10px;justify-content:center;align-items:flex-start}
.demo-vaza.ativa{display:flex}
.demo[data-estado="jogando"] .demo-centro{align-content:start;gap:10px}
.demo[data-estado="jogando"] .demo-dica{font-size:14px;padding:5px 12px;background:rgba(7,22,26,.5)}
.demo[data-estado="fim"] .demo-centro,.demo[data-estado="fim"] .demo-pe{visibility:hidden}
.slot{display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transform:translateY(-22px) scale(.92);
  transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .38s cubic-bezier(.16,1,.3,1)}
.slot[data-quem="voce"]{transform:translateY(36px) scale(.92)}
.slot.caiu{opacity:1;transform:none}
.slot .carta{--l:60px;transition:opacity .25s,filter .25s}
.slot .carta.acesa{transform:scale(1.08);transition:transform .32s cubic-bezier(.16,1,.3,1)}
.slot i{font-style:normal;font-weight:800;font-size:12.5px;color:var(--texto-feltro);opacity:.85}
.slot.levou i{color:var(--ambar);opacity:1}
.demo-vaza.limpando .slot{opacity:0;transform:translateY(-8px);transition-duration:.25s}
.demo-pe{display:flex;flex-direction:column;align-items:center;gap:12px}
.demo-mao{display:flex;justify-content:center;padding:6px 0 2px}
.demo-mao .carta{--l:84px;transition:opacity .35s,transform .35s cubic-bezier(.16,1,.3,1)}
.demo-mao .carta+.carta{margin-left:-14px}
.demo-mao .carta:nth-child(1){transform:rotate(-9deg) translateY(8px)}
.demo-mao .carta:nth-child(2){transform:translateY(-4px);z-index:1}
.demo-mao .carta:nth-child(3){transform:rotate(9deg) translateY(8px)}
.demo-mao .carta.jogada{opacity:.16}
.demo-pe{position:relative;padding-bottom:18px}
.demo-placar{font-size:18px;position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);z-index:2}
.demo-placar b{color:inherit}
.demo-placar[hidden]{display:inline-flex;visibility:hidden}
.demo-conta{font-family:var(--corpo);font-weight:800;font-size:14px;background:var(--noite);color:var(--texto);
  border-radius:999px;padding:3px 9px 2px;margin-left:4px}
.demo-placar.bateu .demo-conta{background:#11402A;color:#9CF5C3}

.demo-barra{margin-top:16px;background:var(--sup);border:2.5px solid var(--contorno);border-radius:22px;padding:16px 16px 14px;
  text-align:center;box-shadow:inset 0 2px 0 rgba(255,255,255,.07),var(--sombra)}
.demo-fim[hidden],.demo-depois[hidden]{display:none}
.demo[data-estado="jogando"] .num{pointer-events:none;opacity:.42}
.demo[data-estado="jogando"] .num.escolhido{opacity:1;background:var(--ambar);color:var(--tinta-ambar);
  box-shadow:0 4px 0 var(--cobre),0 4px 0 2.5px var(--contorno)}
.demo[data-estado="fim"] .demo-pergunta,.demo[data-estado="fim"] .demo-numeros,.demo[data-estado="fim"] .demo-trava{display:none}
.demo-depois{display:grid;gap:4px;align-content:center;height:100%;animation:sobe .4s cubic-bezier(.16,1,.3,1)}
.demo[data-estado="fim"] .demo-barra{display:grid;align-items:center}
.demo-pergunta{font-family:var(--display);font-size:24px;color:var(--texto);text-shadow:var(--batida-p);line-height:1.1}
.demo-numeros{display:flex;justify-content:center;gap:12px;margin:14px 0 10px}
.num{position:relative;width:62px;height:62px;border-radius:50%;cursor:pointer;
  font-family:var(--display);font-size:28px;line-height:1;color:var(--texto);background:var(--sup2);
  border:2.5px solid var(--contorno);box-shadow:0 4px 0 #3B1F52,0 4px 0 2.5px var(--contorno);
  transition:transform .12s cubic-bezier(.2,.8,.3,1),box-shadow .12s,background .15s}
.num:hover{background:#74438E;box-shadow:0 4px 0 #3B1F52,0 4px 0 2.5px var(--contorno),0 0 0 4px rgba(185,140,255,.45)}
.num:active{transform:translateY(3px);box-shadow:0 1px 0 #3B1F52,0 1px 0 2.5px var(--contorno)}
.num:focus-visible{outline-offset:4px;border-radius:50%}
.num.travado{background:#3B2350;color:rgba(255,255,255,.45);cursor:not-allowed;box-shadow:0 4px 0 #2A1740,0 4px 0 2.5px var(--contorno)}
.num.travado img{position:absolute;right:-6px;bottom:-4px;width:24px;height:24px}
.num.treme{animation:treme .38s cubic-bezier(.36,.07,.19,.97)}
@keyframes treme{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.demo-trava{font-size:14px;line-height:1.4;color:var(--fraco);max-width:38ch;margin:0 auto;transition:color .2s}
.demo-trava.aceso{color:var(--ambar-claro)}
.demo-sem-js{margin-top:12px;font-size:15px;color:var(--sec)}

.demo-fim{grid-row:2/4;grid-column:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  position:relative;padding:4px 0}
.demo-carimbo{position:relative;text-align:center;padding:18px 0 4px}
.demo-raios{position:absolute;left:50%;top:50%;width:330px;max-width:none;transform:translate(-50%,-56%);opacity:.9;pointer-events:none;
  animation:raios .7s cubic-bezier(.16,1,.3,1) both}
@keyframes raios{from{opacity:0;transform:translate(-50%,-56%) scale(.5) rotate(-20deg)}to{opacity:.9;transform:translate(-50%,-56%) scale(1) rotate(0)}}
.demo-titulo{position:relative;font-family:var(--display);font-size:62px;line-height:1;color:var(--ambar);text-shadow:var(--batida);
  transform:rotate(-4deg);animation:carimbo .5s cubic-bezier(.16,1,.3,1) both}
@keyframes carimbo{from{opacity:0;transform:rotate(-4deg) scale(1.7)}to{opacity:1;transform:rotate(-4deg) scale(1)}}
.demo-frase{position:relative;margin-top:12px;font-weight:800;font-size:16px;line-height:1.35;color:var(--texto-feltro)}
.demo-fim.errou .demo-raios{display:none}
.demo-fim.errou .demo-titulo{font-size:48px;color:var(--perigo)}
.demo-placar-mesa{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;
  animation:sobe .45s .15s cubic-bezier(.16,1,.3,1) both}
.demo-placar-mesa li{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;padding:8px 4px 7px;
  background:rgba(7,22,26,.66);border:2px solid rgba(0,0,0,.5);border-radius:14px}
.demo-placar-mesa b{font-size:13px;line-height:1.1;color:var(--texto)}
.demo-placar-mesa span{font-size:12px;line-height:1.25;color:var(--texto-feltro);opacity:.85}
.demo-placar-mesa em{font-style:normal;font-family:var(--display);font-size:15px;line-height:1.1}
.demo-placar-mesa li.eu{border-color:rgba(255,174,77,.75)}
.demo-placar-mesa li.eu b{color:var(--ambar)}
.demo-placar-mesa .ok{color:#8EF2B9}
.demo-placar-mesa .perde{color:var(--perigo)}
.demo-moral{font-size:15.5px;line-height:1.45;color:var(--sec);text-align:left}
.demo-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.demo-acoes .botao{flex:1 1 180px}

/* ── Como é uma rodada ── */
.tempos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);padding:30px 14px}
.tempos li{padding:6px 22px 8px;border-left:1px solid rgba(210,162,94,.32)}
.tempos li:first-child{border-left:0}
.tempo-fig{height:96px;display:flex;align-items:center;justify-content:flex-start;gap:6px;margin-bottom:12px}
.tempo-leque .carta:nth-child(1){transform:rotate(-10deg)}
.tempo-leque .carta:nth-child(2){margin-left:-18px;transform:translateY(-4px)}
.tempo-leque .carta:nth-child(3){margin-left:-18px;transform:rotate(10deg)}
.tempos h3{font-size:30px;color:var(--ambar);text-shadow:var(--batida-p);margin-bottom:8px}
.tempos p{color:var(--texto-feltro);font-size:16px;line-height:1.5}
.plaq--grande{font-size:24px;padding:10px 18px 9px;box-shadow:0 4px 0 var(--contorno)}
.conta-mini{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:19px;line-height:1.1;color:var(--texto-feltro)}
.conta-mini img{width:44px;height:44px}

/* ── Duas colunas: figura e texto ── */
.dupla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 64px;align-items:center}
.dupla-texto h2{font-size:clamp(32px,4.2vw,50px);text-shadow:var(--batida);margin-bottom:18px}
.fig-manilha{display:flex;align-items:center;justify-content:center;gap:18px;padding:46px 24px 42px;min-height:300px}
.leque-uns{display:flex;padding-left:30px}
.leque-uns .carta{--l:94px;margin-left:-32px}
.leque-uns .carta:nth-child(1){transform:rotate(-12deg) translateY(10px)}
.leque-uns .carta:nth-child(2){transform:rotate(-4deg)}
.leque-uns .carta:nth-child(3){transform:rotate(4deg)}
.leque-uns .carta:nth-child(4){transform:rotate(12deg) translateY(10px)}
.vence-grande{width:46px;height:46px}
.carta-dez{--l:94px}
.regrinhas{list-style:none;margin-top:22px;display:grid;gap:14px}
.regrinhas li{display:flex;gap:14px;align-items:flex-start;color:var(--sec);font-size:17px;line-height:1.5}
.regrinhas img{width:40px;height:40px;flex:none;margin-top:-2px}

/* ── Mão do Dia ── */
.hoje{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:7px 18px 7px 7px;border-radius:999px;
  background:var(--sup);border:2.5px solid var(--contorno);box-shadow:0 3px 0 var(--contorno);color:var(--sec);font-size:16px}
.hoje img{width:46px;height:46px;border-radius:50%;background:var(--sup2);border:2.5px solid var(--contorno)}
.hoje b{color:var(--texto)}
.hoje-num{color:var(--ambar);font-weight:800}
.recibo{position:relative;justify-self:center;width:min(100%,420px);transform:rotate(-2deg);
  background:#F7F1FB;color:var(--noite);border:3px solid var(--contorno);border-radius:24px;padding:34px 26px 22px;
  box-shadow:0 6px 0 #9C86B4,0 6px 0 3px var(--contorno),0 26px 46px rgba(8,3,16,.5)}
.recibo figcaption{position:absolute;top:-16px;left:22px;font-weight:800;font-size:13px;line-height:1;
  background:var(--lilas);color:var(--noite);border:2.5px solid var(--contorno);border-radius:999px;padding:7px 12px}
.recibo-texto{display:grid;gap:4px;color:var(--noite);font-size:18px;line-height:1.35}
.recibo-texto>span:first-child{font-weight:800}
.recibo-grade{font-size:34px;letter-spacing:4px;line-height:1.2;margin:4px 0}
.recibo-legenda{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:16px;padding-top:14px;
  border-top:2px dashed rgba(31,17,48,.18);font-size:14px;font-weight:800;color:#5B3A70}

/* ── Rivais e modos ── */
.elenco{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px 22px}
.elenco li{display:flex;flex-direction:column;align-items:center;text-align:center}
.elenco img{width:132px;height:132px;border-radius:50%;background:var(--sup2);border:4px solid var(--contorno);
  box-shadow:0 0 0 3px rgba(210,162,94,.75),0 14px 26px rgba(8,3,16,.45)}
.elenco b{font-family:var(--display);font-weight:400;font-size:24px;margin-top:14px;text-shadow:var(--batida-p)}
.elenco p{position:relative;margin-top:14px;background:#F7F1FB;color:var(--noite);font-weight:800;font-size:15.5px;
  line-height:1.35;border:2.5px solid var(--contorno);border-radius:16px;padding:10px 14px;max-width:24ch;
  box-shadow:0 4px 0 var(--contorno)}
.elenco p::before{content:"";position:absolute;left:50%;top:-11px;width:16px;height:16px;background:#F7F1FB;
  border-left:2.5px solid var(--contorno);border-top:2.5px solid var(--contorno);transform:translateX(-50%) rotate(45deg)}
.elenco-mais{text-align:center;margin-top:26px;color:var(--fraco);font-size:16px}
.modos{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px;padding:28px 14px}
.modos li{display:flex;gap:16px;align-items:flex-start;padding:6px 22px;border-left:1px solid rgba(210,162,94,.32)}
.modos li:first-child{border-left:0}
.modos img{width:56px;height:56px;flex:none}
.modos h3{font-size:26px;color:var(--ambar);text-shadow:var(--batida-p);margin-bottom:6px}
.modos p{font-size:15.5px;line-height:1.5;color:var(--texto-feltro)}
.codigo{font-family:var(--display);font-size:14px;letter-spacing:.04em;color:var(--ambar);background:var(--noite);
  border:2px solid var(--contorno);border-radius:8px;padding:1px 7px;white-space:nowrap}

/* ── Nomes ── */
.nomes-faixa{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px 48px;align-items:center;padding:48px}
.nomes-faixa h2{font-size:clamp(30px,3.8vw,46px);text-shadow:var(--batida);margin-bottom:14px}
.nomes-faixa p{color:var(--texto-feltro);font-size:17px;max-width:46ch}
.nomes-faixa .mais{color:var(--ambar-claro)}
.nomes-placas{list-style:none;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.nomes-placas li{font-family:var(--display);line-height:1;color:var(--texto);background:var(--noite);
  border:2.5px solid var(--contorno);border-radius:16px;padding:12px 18px 11px;box-shadow:0 4px 0 var(--contorno)}
.nomes-placas .n1{font-size:44px;background:var(--ambar);color:var(--tinta-ambar);transform:rotate(-3deg);
  box-shadow:0 5px 0 var(--cobre),0 5px 0 2.5px var(--contorno)}
.nomes-placas .n2{font-size:28px;transform:rotate(2deg)}
.nomes-placas .n3{font-size:28px;transform:rotate(-1.5deg)}
.nomes-placas .n4{font-size:24px;background:var(--sup2);transform:rotate(2.5deg)}
.nomes-placas .n5{font-size:18px;background:var(--sup2);transform:rotate(-1deg)}

/* ── Famílias e promessas ── */
.familias ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start}
.familias li{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.familias .carta{--l:min(100%,124px);width:var(--l)}
.familias li:nth-child(1) .carta{transform:rotate(-5deg)}
.familias li:nth-child(2) .carta{transform:rotate(-1.5deg) translateY(-6px)}
.familias li:nth-child(3) .carta{transform:rotate(1.5deg) translateY(-6px)}
.familias li:nth-child(4) .carta{transform:rotate(5deg)}
.familias b{font-family:var(--display);font-weight:400;font-size:18px;margin-top:12px;text-shadow:var(--batida-p)}
.familias small{font-size:13px;font-weight:800;color:var(--fraco)}
.promessas{list-style:none;margin-top:22px;display:grid;gap:12px}
.promessas li{display:flex;align-items:center;gap:12px;font-weight:800;font-size:17px;line-height:1.35;color:var(--texto)}
.promessas img{width:34px;height:34px;flex:none}

@media (max-width:980px){
  .abre{padding-top:32px}
  .abre-dentro{grid-template-columns:1fr;gap:26px}
  .abre-texto{display:contents}
  .abre h1{order:1}
  .demo{max-width:560px;justify-self:center;width:100%}
  .abre-curta{display:block;order:2;font-size:17.5px;line-height:1.5;color:var(--sec);margin-top:-10px;max-width:46ch}
  .abre-lede{display:none}
  .demo{order:3}
  .abre .lojas{order:4}
  .selos{order:5;margin-top:0}
  .tempos{grid-template-columns:1fr 1fr;row-gap:22px}
  .tempos li:nth-child(3){border-left:0}
  .dupla{grid-template-columns:1fr}
  .dupla--invertida .recibo{margin-top:8px}
  .modos{grid-template-columns:1fr;padding:12px 6px}
  .modos li{border-left:0;border-top:1px solid rgba(210,162,94,.28);padding:20px 16px}
  .modos li:first-child{border-top:0}
  .nomes-faixa{grid-template-columns:1fr;padding:36px 26px}
  .elenco{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .abre{padding-top:20px}
  .abre-dentro{gap:18px}
  .abre h1{font-size:clamp(30px,9.2vw,40px)}
  .abre-curta{font-size:16.5px;margin-top:-6px}
  .demo-mesa{padding:12px 10px 10px;gap:6px;border-radius:24px}
  .demo-rivais img{width:40px;height:40px;border-width:2.5px}
  .demo-rivais b{font-size:13px}
  .demo-rivais .plaq{font-size:12.5px;padding:4px 8px 3px}
  .demo-centro{min-height:124px}
  .demo-dica{font-size:14px;padding:8px 12px}
  .slot .carta{--l:48px}
  .slot i{font-size:11.5px}
  .demo-vaza{gap:8px}
  .demo-mao{padding-top:2px}
  .demo-mao .carta{--l:62px}
  .demo-placar{font-size:16px}
  .demo-barra{margin-top:12px;padding:12px 12px 10px}
  .demo-pergunta{font-size:21px}
  .demo-numeros{margin:10px 0 8px;gap:10px}
  .num{width:54px;height:54px;font-size:25px}
  .demo-trava{font-size:13px}
  .demo-titulo{font-size:52px}
  .demo-fim.errou .demo-titulo{font-size:40px}
  .demo-raios{width:270px}
  .demo-placar-mesa{gap:5px}
  .demo-placar-mesa li{padding:7px 2px 6px;border-radius:12px}
  .demo-placar-mesa b{font-size:12px}
  .demo-placar-mesa span{font-size:11px}
  .demo-placar-mesa em{font-size:13px}
  .tempos{grid-template-columns:1fr;padding:12px 6px}
  .tempos li{border-left:0;border-top:1px solid rgba(210,162,94,.28);padding:22px 16px}
  .tempos li:first-child{border-top:0}
  .tempo-fig{height:80px}
  .fig-manilha{gap:10px;padding:34px 12px;min-height:0}
  .leque-uns{padding-left:22px}
  .leque-uns .carta{--l:62px;margin-left:-22px}
  .carta-dez{--l:62px}
  .vence-grande{width:30px;height:30px}
  .elenco{gap:24px 12px}
  .elenco img{width:104px;height:104px}
  .elenco p{font-size:14.5px}
  .nomes-placas .n1{font-size:36px}
  .familias ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;max-width:300px;margin:0 auto}
  .familias .carta{--l:108px}
  .familias b{font-size:17px}
  .recibo{padding:30px 18px 18px}
  .recibo-texto{font-size:16.5px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   REGRAS: leitura com sumário e figuras de cartas.
   ═══════════════════════════════════════════════════════════════════════════ */
.resumo{display:flex;gap:14px;align-items:flex-start;margin-top:28px;max-width:720px;padding:16px 20px;
  background:var(--sup);border:2.5px solid var(--contorno);border-radius:var(--raio);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.07),var(--sombra);color:var(--sec);font-size:17px;line-height:1.5}
.resumo img{width:44px;height:44px;flex:none}
.leitura{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px 64px;align-items:start;margin-top:56px}
.lado{position:sticky;top:92px}
.sumario summary{list-style:none;cursor:pointer;font-weight:800;font-size:15px;color:var(--fraco);
  padding:6px 0 12px;display:flex;align-items:center;justify-content:space-between}
.sumario summary::-webkit-details-marker{display:none}
.sumario summary::after{content:"";width:10px;height:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.sumario[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.sumario ol{list-style:none;display:grid;gap:2px;border-left:2px solid rgba(255,255,255,.1)}
.sumario a{display:block;padding:6px 0 6px 16px;margin-left:-2px;border-left:2px solid transparent;
  color:var(--sec);text-decoration:none;font-weight:800;font-size:15px;line-height:1.35}
.sumario a:hover{color:var(--ambar);border-left-color:var(--ambar)}
.regras{max-width:760px}
.regra{padding-top:20px;margin-top:56px}
.regra:first-child{margin-top:0;padding-top:0}
.regra h2{font-size:clamp(28px,3.2vw,40px);text-shadow:var(--batida);margin-bottom:16px}
.regra>p{margin-bottom:14px;max-width:66ch;font-size:17.5px}
.regra>p a{font-weight:800}
.a-regra{display:flex;align-items:center;gap:12px;margin:20px 0 4px!important;padding:12px 16px;
  border:2px solid rgba(255,174,77,.55);background:rgba(255,174,77,.1);border-radius:16px;
  font-weight:800;color:var(--texto)!important;line-height:1.35}
.a-regra img{width:34px;height:34px;flex:none}
.fig{margin:22px 0 8px;padding:30px 18px 22px;display:flex;flex-direction:column;align-items:center;gap:22px}
.fig figcaption{font-size:14.5px;line-height:1.45;color:var(--texto-feltro);text-align:center;max-width:52ch;opacity:.92}
.fig .linha{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.fig .carta{--l:70px}
.divisa{width:min(320px,80%);height:1px;background:rgba(210,162,94,.35)}
.rotulo-fig{font-weight:800;font-size:14px;color:var(--texto-feltro);background:rgba(7,22,26,.55);
  border:2px solid rgba(0,0,0,.45);border-radius:999px;padding:4px 11px;white-space:nowrap}

.baralho{display:grid;grid-template-columns:30px repeat(10,minmax(0,1fr));gap:7px 6px;align-items:center;width:100%;max-width:620px}
.baralho img{width:100%;aspect-ratio:276/420;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.baralho .medalha{aspect-ratio:1;width:30px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}

.vidas{gap:14px}
.coracoes{display:flex;gap:4px}
.coracoes img{width:38px;height:38px}

.escada{display:flex;align-items:flex-end;gap:5px;height:170px;width:100%;max-width:560px;padding-top:24px}
.escada span{position:relative;flex:1;height:calc(var(--n) * 10.5%);min-height:14px;background:var(--ambar);
  border:2px solid var(--contorno);border-radius:6px 6px 3px 3px;box-shadow:inset 0 2px 0 rgba(255,255,255,.35)}
.escada span.testa-barra{background:var(--lilas)}
.escada span.topo-barra{background:var(--ambar-claro)}
.escada b{position:absolute;left:50%;top:-22px;transform:translateX(-50%);font-family:var(--display);font-weight:400;
  font-size:14px;color:var(--texto-feltro)}
.tabela{border-collapse:separate;border-spacing:0;margin:6px 0 10px;font-size:16px;overflow:hidden;
  border:2.5px solid var(--contorno);border-radius:16px;background:var(--sup);box-shadow:var(--sombra)}
.tabela th,.tabela td{padding:10px 14px;text-align:center;border-left:1px solid rgba(255,255,255,.08)}
.tabela thead th{background:var(--noite);font-weight:800;color:var(--fraco);font-size:14px}
.tabela tbody td{font-family:var(--display);font-size:20px;color:var(--ambar)}
.tabela th:first-child,.tabela td:first-child{border-left:0;text-align:left}
.tabela tbody th{font-weight:800;color:var(--fraco);font-size:14px}

.pedidos{gap:18px}
.pedido{display:flex;flex-direction:column;align-items:center;gap:4px}
.pedido img{width:52px;height:52px;border-radius:50%;background:var(--sup2);border:3px solid var(--contorno);
  box-shadow:0 0 0 2px rgba(210,162,94,.7)}
.pedido b{font-size:13.5px;color:var(--texto)}
.pedido .plaq{font-size:16px;padding:5px 12px 4px;box-shadow:none}
.numeros-fig{gap:12px}
.num-fig{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  font-family:var(--display);font-size:24px;color:var(--texto);background:var(--sup2);border:2.5px solid var(--contorno);
  box-shadow:0 4px 0 #3B1F52,0 4px 0 2.5px var(--contorno)}
.num-fig.travado{background:#3B2350;color:rgba(255,255,255,.45)}
.num-fig.travado img{position:absolute;right:-6px;bottom:-4px;width:22px;height:22px}

.contas{display:grid;gap:12px}
.conta{display:flex;align-items:center;gap:12px;color:var(--texto-feltro)}
.conta .plaq{font-size:16px;box-shadow:none}
.saldo{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-size:20px;line-height:1}
.saldo img{width:30px;height:30px}
.saldo.ok{color:#8EF2B9}.saldo.perde{color:var(--perigo)}

.grupo-uns{display:flex;padding-left:24px}
.grupo-uns .carta{margin-left:-24px}
.grupo-uns .carta:nth-child(1){transform:rotate(-10deg) translateY(6px)}
.grupo-uns .carta:nth-child(2){transform:rotate(-3deg)}
.grupo-uns .carta:nth-child(3){transform:rotate(3deg)}
.grupo-uns .carta:nth-child(4){transform:rotate(10deg) translateY(6px)}
.escada-uns{gap:6px}
.escada-uns .carta{--l:62px}
.escada-uns .vence{width:22px;height:22px}
.carta .selo{bottom:-10px}
.fig .carta.cangou,.fig .carta.acesa{margin-bottom:6px}

.testa{gap:36px;align-items:flex-start}
.coluna-testa{display:flex;flex-direction:column;align-items:center;gap:12px}
.coluna-testa .linha{gap:10px}
.carta.sua{outline:3px dashed rgba(185,140,255,.8);outline-offset:6px;border-radius:10px}

.glossario{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.glossario div{background:var(--sup);border:2.5px solid var(--contorno);border-radius:16px;padding:14px 16px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.06)}
.glossario dt{font-family:var(--display);font-size:20px;color:var(--ambar);text-shadow:var(--batida-p)}
.glossario dd{color:var(--sec);font-size:15.5px;line-height:1.45;margin-top:4px}
.perguntas{display:grid;gap:10px;margin-top:18px}
.perguntas details{background:var(--sup);border:2.5px solid var(--contorno);border-radius:16px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.06)}
.perguntas summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 18px;font-weight:800;font-size:17px;color:var(--texto);min-height:52px}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:"";flex:none;width:10px;height:10px;border-right:2.5px solid var(--ambar);
  border-bottom:2.5px solid var(--ambar);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.perguntas details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.perguntas details p{padding:0 18px 16px;color:var(--sec)}

@media (max-width:1000px){
  .leitura{grid-template-columns:1fr;margin-top:32px}
  .lado{position:static}
  .sumario{background:var(--sup);border:2.5px solid var(--contorno);border-radius:16px;padding:6px 16px}
  .sumario summary{padding:10px 0;color:var(--texto);font-size:16px}
  .sumario ol{margin:2px 0 12px}
}
@media (max-width:560px){
  .fig{padding:26px 10px 18px;border-radius:22px}
  .fig .carta{--l:58px}
  .fig .linha{gap:8px}
  .escada-uns .carta{--l:48px}
  .escada-uns{gap:3px}
  .escada-uns .vence{width:16px;height:16px}
  .baralho{gap:5px 3px;grid-template-columns:22px repeat(10,minmax(0,1fr))}
  .baralho .medalha{width:22px}
  .coracoes img{width:34px;height:34px}
  .vidas{flex-direction:column;gap:10px}
  .vidas .vence{transform:rotate(90deg)}
  .escada{gap:3px;height:140px}
  .escada b{font-size:11px;top:-18px}
  .tabela{font-size:14px;width:100%}
  .tabela th,.tabela td{padding:8px 6px}
  .tabela tbody td{font-size:17px}
  .pedidos{gap:10px}
  .testa{gap:18px}
  .conta{gap:8px}
  .conta .plaq{font-size:14px;padding:6px 9px 5px}
  .saldo{font-size:17px}
  .glossario{grid-template-columns:1fr}
  .regra>p{font-size:17px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOMES: o mural de nomes, as listas e a comparação de mesas.
   ═══════════════════════════════════════════════════════════════════════════ */
.abertura-nomes{padding:60px 0 0}
.abertura-nomes-dentro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px 56px;align-items:center}
.abertura-nomes h1{font-size:clamp(36px,4.6vw,62px);text-shadow:var(--batida);line-height:1.04}
.abertura-nomes h1 em{display:block}
.abertura-nomes .lede{margin:22px 0 28px}
/* Os nomes como adesivos colados na parede do bar: fosco, contorno escuro,
   cada um num ângulo. */
.mural{position:relative;display:flex;flex-wrap:wrap;gap:14px 12px;justify-content:center;align-content:center;
  padding:34px 20px;min-height:340px}
.mural span{font-family:var(--display);line-height:1;color:var(--texto);background:var(--sup);
  border:2.5px solid var(--contorno);border-radius:14px;padding:11px 16px 10px;box-shadow:0 4px 0 var(--contorno),0 12px 22px rgba(8,3,16,.35)}
.mural .m1{font-size:52px;background:var(--ambar);color:var(--tinta-ambar);transform:rotate(-4deg);
  box-shadow:0 5px 0 var(--cobre),0 5px 0 2.5px var(--contorno),0 14px 24px rgba(8,3,16,.4)}
.mural .m2{font-size:34px;transform:rotate(3deg);background:var(--sup2)}
.mural .m3{font-size:32px;transform:rotate(-2deg)}
.mural .m4{font-size:24px;transform:rotate(4deg);background:#F7F1FB;color:var(--noite)}
.mural .m5{font-size:30px;transform:rotate(-3deg);background:var(--feltro);color:var(--texto-feltro);border-color:var(--contorno)}
.mural .m6{font-size:19px;transform:rotate(2deg)}
.mural .m7{font-size:20px;transform:rotate(-1.5deg);background:var(--sup2)}
.mural .m8{font-size:22px;transform:rotate(3deg);background:var(--lilas);color:var(--noite)}

.ref{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;margin-left:4px;vertical-align:2px;
  font-family:var(--corpo);font-weight:800;font-size:12px;line-height:1;text-decoration:none;
  color:var(--noite);background:var(--lilas);border-radius:999px}
.ref:hover{background:var(--ambar)}
.ref+.ref{margin-left:3px}

.nomes-lista{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.nomes-lista li{background:var(--sup);border:2.5px solid var(--contorno);border-radius:var(--raio);padding:22px 24px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.07),var(--sombra)}
.nomes-lista b{display:block;font-family:var(--display);font-weight:400;font-size:34px;line-height:1.05;text-shadow:var(--batida-p)}
.nomes-lista p{margin-top:10px;font-size:16.5px;line-height:1.55}
.nomes-lista .destaque{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:10px 32px;align-items:center;
  background:var(--ambar);border-color:var(--contorno);box-shadow:0 6px 0 var(--cobre),0 6px 0 2.5px var(--contorno),var(--sombra)}
.nomes-lista .destaque b{font-size:clamp(44px,6vw,72px);color:var(--tinta-ambar);text-shadow:none}
.nomes-lista .destaque p{margin:0;color:var(--tinta-ambar);font-size:18px;max-width:58ch}
.nomes-lista .destaque .ref{background:var(--noite);color:var(--ambar)}

.primos{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.primos li{display:flex;flex-direction:column;gap:2px;background:var(--sup);border:2.5px solid var(--contorno);
  border-radius:16px;padding:12px 16px;box-shadow:inset 0 2px 0 rgba(255,255,255,.06)}
.primos b{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.15;color:var(--texto)}
.primos span{font-size:14px;font-weight:800;color:var(--fraco)}

.iguais{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 40px;padding:32px 36px}
.iguais li{display:flex;gap:16px;align-items:flex-start;padding:12px 0}
.iguais img{width:52px;height:52px;flex:none}
.iguais p{color:var(--texto-feltro);font-size:16.5px;line-height:1.5}
.iguais b{color:var(--texto)}

.compara{border:2.5px solid var(--contorno);border-radius:var(--raio);overflow:hidden;background:var(--sup);box-shadow:var(--sombra)}
.compara-cab,.compara-linha{display:grid;grid-template-columns:170px minmax(0,1fr) minmax(0,1fr)}
.compara-cab span{background:var(--noite);padding:14px 20px;font-weight:800;font-size:14px;color:var(--fraco)}
.compara-cab span:last-child{color:var(--ambar)}
.compara-linha>span{padding:16px 20px;border-top:1px solid rgba(255,255,255,.08);color:var(--sec);font-size:16px;line-height:1.5}
.compara-linha>span:first-child{font-family:var(--display);font-size:18px;color:var(--texto);line-height:1.2}
.compara-linha>span:last-child{background:rgba(255,174,77,.08)}

.fig-fala{display:flex;flex-direction:column;align-items:center;gap:22px;padding:44px 20px 40px}
.fig-fala .plaq--grande{font-size:30px;transform:rotate(-3deg)}
.linha-fala{display:flex;padding-left:20px}
.linha-fala .carta{--l:96px;margin-left:-20px}
.linha-fala .carta:nth-child(1){transform:rotate(-8deg) translateY(6px)}
.linha-fala .carta:nth-child(3){transform:rotate(8deg) translateY(6px)}

.fontes h2{font-size:28px;text-shadow:var(--batida-p);margin-bottom:8px}
.fontes p{font-size:15px;color:var(--fraco)}
.fontes ol{margin:14px 0 0 1.3em;display:grid;gap:8px;color:var(--sec);font-size:15.5px;max-width:80ch}
.fontes li{scroll-margin-top:96px;padding-left:4px}
.fontes li::marker{color:var(--lilas);font-weight:800}
.fontes li:target{color:var(--texto)}
.fontes a{overflow-wrap:anywhere}

@media (max-width:980px){
  .abertura-nomes-dentro{grid-template-columns:1fr}
  .mural{min-height:0;padding:10px 0 0}
  .nomes-lista{grid-template-columns:1fr}
  .nomes-lista .destaque{grid-template-columns:1fr}
  .iguais{grid-template-columns:1fr;padding:22px 24px}
  .compara-cab{display:none}
  .compara-linha{grid-template-columns:1fr;border-top:2px solid var(--contorno)}
  .compara-linha:first-of-type{border-top:0}
  .compara-linha>span{border-top:0;padding:10px 18px}
  .compara-linha>span:first-child{padding-top:16px}
  .compara-linha>span:nth-child(2)::before{content:"Em muita roda: ";font-weight:800;color:var(--fraco)}
  .compara-linha>span:last-child{padding-bottom:16px}
  .compara-linha>span:last-child::before{content:"No Eu Faço!: ";font-weight:800;color:var(--ambar)}
}
@media (max-width:560px){
  .abertura-nomes{padding-top:40px}
  .mural{gap:10px 8px}
  .mural .m1{font-size:38px}
  .mural .m2{font-size:26px}.mural .m3{font-size:24px}.mural .m5{font-size:22px}
  .mural .m4,.mural .m6,.mural .m7,.mural .m8{font-size:16px}
  .nomes-lista li{padding:18px}
  .nomes-lista b{font-size:28px}
  .primos{grid-template-columns:1fr 1fr}
  .primos b{font-size:16px}
  .primos li{padding:10px 12px}
  .iguais li{padding:8px 0}
  .linha-fala .carta{--l:76px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MÃO DO DIA
   ═══════════════════════════════════════════════════════════════════════════ */
.abertura-dia{padding:60px 0 0}
.abertura-dia-dentro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px 72px;align-items:center}
.abertura-dia h1{font-size:clamp(48px,7vw,92px);text-shadow:var(--batida)}
.abertura-dia .lede{margin-top:18px}
.hoje--grande{padding:8px 22px 8px 8px;font-size:18px;margin-top:28px}
.hoje--grande img{width:60px;height:60px}
.hoje--grande b{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.15}
.hoje-linha{display:inline}
.hoje-junto{white-space:nowrap}
.mesa-hoje{width:min(440px,100%);padding:30px 22px 22px;display:flex;flex-direction:column;align-items:center;gap:20px}
.mesa-hoje-lugares{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
.mesa-hoje-lugares li{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.mesa-hoje-rosto{position:relative;display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:var(--sup2);
  border:3.5px solid var(--contorno);box-shadow:0 0 0 3px rgba(210,162,94,.75),0 12px 22px rgba(0,0,0,.4);overflow:hidden}
.mesa-hoje-rosto img{width:100%;height:100%;object-fit:cover}
.mesa-hoje-rosto i{font-style:normal;font-family:var(--display);font-size:38px;color:var(--texto)}
.mesa-hoje-lugares li:first-child .mesa-hoje-rosto{box-shadow:0 0 0 3px var(--ambar),0 12px 22px rgba(0,0,0,.4)}
.mesa-hoje-lugares b{font-family:var(--display);font-weight:400;font-size:17px;line-height:1.15;color:var(--texto);text-shadow:var(--batida-p)}
.mesa-hoje-voce{display:flex;align-items:flex-end;gap:0;padding-left:20px}
.mesa-hoje-voce .carta{--l:58px;margin-left:-20px}
.mesa-hoje-voce .carta:nth-child(1){transform:rotate(-8deg) translateY(4px)}
.mesa-hoje-voce .carta:nth-child(3){transform:rotate(8deg) translateY(4px)}
.mesa-hoje-voce b{margin-left:14px;font-family:var(--display);font-weight:400;font-size:17px;color:var(--ambar-claro)}
.mesa-hoje figcaption{font-size:14.5px;line-height:1.45;color:var(--texto-feltro);text-align:center;max-width:36ch}
.cinco{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:34px 22px 26px;align-items:end}
.cinco li{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.cinco .leque{display:flex;justify-content:center;height:98px;align-items:flex-end;margin-bottom:10px;padding-left:22px}
.cinco .leque img{width:52px;max-width:none;flex:none;margin-left:-22px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.cinco .leque img:nth-child(odd){transform:rotate(-6deg)}
.cinco .leque img:nth-child(even){transform:rotate(5deg) translateY(-3px)}
.cinco b{font-family:var(--display);font-weight:400;font-size:30px;line-height:1;color:var(--ambar);text-shadow:var(--batida-p)}
.cinco span{font-size:14px;font-weight:800;color:var(--texto-feltro)}
.cinco li:first-child span{color:var(--lilas)}
.fatos{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.fatos li{display:flex;gap:14px;align-items:flex-start;padding:4px 4px}
.fatos img{width:44px;height:44px;flex:none}
.fatos p{font-size:16px;line-height:1.5}

.semana{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.semana li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:16px 6px 14px;
  background:var(--sup);border:2.5px solid var(--contorno);border-radius:18px;box-shadow:inset 0 2px 0 rgba(255,255,255,.06)}
.semana img{width:72px;height:72px;border-radius:50%;background:var(--sup2);border:3px solid var(--contorno);margin-bottom:8px}
.semana b{font-family:var(--display);font-weight:400;font-size:18px;line-height:1.1}
.semana span{font-size:13.5px;font-weight:800;color:var(--fraco);line-height:1.25}
.semana li[data-dia="5"] img{box-shadow:0 0 0 3px var(--perigo)}
.semana li.hoje{background:var(--ambar);box-shadow:0 5px 0 var(--cobre),0 5px 0 2.5px var(--contorno);transform:translateY(-6px)}
.semana li.hoje b,.semana li.hoje span{color:var(--tinta-ambar)}

.trilha{padding:28px 24px 22px}
.trilha ol{list-style:none;display:flex;justify-content:space-between;gap:8px;max-width:640px;margin:0 auto;position:relative}
.trilha ol::before{content:"";position:absolute;left:28px;right:28px;top:27px;height:4px;background:rgba(255,255,255,.12);border-radius:4px}
.trilha li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}
.trilha b{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;font-family:var(--display);font-weight:400;
  font-size:24px;border:3px solid var(--contorno);background:var(--noite);color:var(--texto)}
.trilha .feito b{background:var(--ambar);color:var(--tinta-ambar);box-shadow:0 3px 0 var(--cobre),0 3px 0 3px var(--contorno)}
.trilha .falta b{background:#2A1740;border-style:dashed;border-color:rgba(255,255,255,.25)}
.trilha .vem b{background:transparent;border-color:rgba(255,255,255,.18)}
.trilha .agora b{outline:3px solid var(--lilas);outline-offset:4px}
.trilha span{font-size:13px;font-weight:800;color:var(--fraco)}
.trilha figcaption{text-align:center;margin-top:20px;font-size:14.5px;color:var(--fraco)}

@media (max-width:980px){
  .abertura-dia-dentro{grid-template-columns:1fr}
  .mesa-hoje{justify-self:center}
  .fatos{grid-template-columns:1fr}
  .semana{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:560px){
  .abertura-dia{padding-top:40px}
  .hoje--grande{font-size:16px;padding-right:16px}
  .hoje--grande img{width:52px;height:52px}
  .hoje--grande b{font-size:18px}
  .cinco{padding:24px 8px 18px;gap:4px}
  .cinco .leque{height:64px;padding-left:23px}
  .cinco .leque img{width:30px;margin-left:-23px}
  .cinco b{font-size:24px}
  .cinco span{font-size:12px}
  .semana{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .semana li{padding:12px 3px 10px;border-radius:14px}
  .semana img{width:48px;height:48px;margin-bottom:6px}
  .semana b{font-size:14.5px}
  .semana span{font-size:12px}
  .trilha{padding:22px 10px 18px}
  .trilha ol::before{left:18px;right:18px;top:19px}
  .trilha b{width:40px;height:40px;font-size:18px;border-width:2.5px}
  .trilha ol{gap:2px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   SUPORTE, PRIVACIDADE E BAIXAR
   ═══════════════════════════════════════════════════════════════════════════ */
.contato{display:inline-flex;align-items:center;gap:16px;margin-top:28px;padding:18px 24px 18px 18px}
.contato img{width:56px;height:56px;flex:none}
.contato-email{font-family:var(--display);font-size:clamp(20px,2.6vw,26px);line-height:1.2;overflow-wrap:anywhere;text-decoration:none}
.contato .data{margin-top:4px}
.texto>h2:first-child{margin-top:48px}
.texto-legal{margin-top:24px}
.texto-legal>.data{margin-bottom:8px;color:var(--sec)}
.resumo-priv{margin:18px 0 8px}
.resumo-priv ul{margin-bottom:0}
.resumo-priv li:last-child{margin-bottom:0}

.baixar{padding:56px 0 0}
.baixar-mesa{max-width:720px;margin:0 auto;text-align:center;padding:48px 28px 40px;display:flex;flex-direction:column;align-items:center}
.baixar-brasao{width:150px;height:150px;filter:drop-shadow(0 12px 22px rgba(0,0,0,.45));margin-bottom:8px}
.baixar-mesa h1{font-size:clamp(44px,6vw,72px);text-shadow:var(--batida)}
.baixar-mesa #aviso{color:var(--texto-feltro);font-size:18px;max-width:36ch;margin:14px 0 28px}
.baixar-lojas{display:flex;flex-direction:column;gap:14px;width:100%;max-width:340px}
.baixar-lojas .botao{min-height:62px;font-size:19px;justify-content:center}
.baixar-lojas .botao svg{width:26px;height:26px}
.baixar-nota{margin-top:26px;font-size:15px;color:var(--texto-feltro)}
.baixar-nota b{color:var(--texto)}
@media (max-width:560px){
  .baixar{padding-top:28px}
  .baixar-mesa{padding:36px 18px 30px}
  .baixar-brasao{width:120px;height:120px}
}