/* Portugueses Pelo Mundo — lobby. */
/* ?v=1 dá cache de 1 ano (immutable): ao trocar um .woff2, subir o ?v= aqui E nos <link rel="preload"> do build_lobby.py (iguais letra a letra). */
@font-face { font-family: Poppins; src: url('../fonts/poppins-400.woff2?v=1') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url('../fonts/poppins-500.woff2?v=1') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Poppins; src: url('../fonts/poppins-600.woff2?v=1') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Poppins; src: url('../fonts/poppins-700.woff2?v=1') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Poppins; src: url('../fonts/poppins-800.woff2?v=1') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  --fundo: #0a0a0a;
  --cartao: #161616;
  --tinta: #f4f4f5;
  --tinta-2: rgba(244, 244, 245, .66);
  --tinta-3: rgba(244, 244, 245, .46);
  --linha: rgba(255, 255, 255, .09);
  --cinza: #222222;
  --cinza-2: #2e2e2e;
  --violeta: #e0112b;
  --violeta-2: #b80d22;
  --violeta-suave: rgba(224, 17, 43, .16);
  --r-g: 24px;
  --r-m: 16px;
  --r-p: 12px;
  --espaco: 24px;
  --topo: 92px;
  /* Cor por casino. `--g-*` = o chão da marca (banner, chapa do logo); `--c-*` = o acento (ponto do filtro). */
  --g-gangsta: linear-gradient(135deg, #1f2c7a 0%, #0f1848 55%, #050a24 100%);   /* azul-noite do banner da Gangsta Sino */
  --g-fiery: linear-gradient(135deg, #5c1019 0%, #2c070d 55%, #140306 100%);     /* vermelho do cartão de bónus da Fiery Play */
  --c-gangsta: #ffd43b; --c-fiery: #ed2224;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo) + 16px); }
body { margin: 0; background: radial-gradient(80% 34% at 52% 0, rgba(224,17,43,.09), transparent 72%), var(--fundo); color: var(--tinta); font: 400 14px/1.5 Poppins, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--violeta); outline-offset: 2px; border-radius: 10px; }
.ic { width: 22px; height: 22px; fill: currentColor; flex: none; }
.so-leitor, .jogo-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--violeta); color: #fff; padding: 10px 16px; border-radius: 12px; font-weight: 600; }
.saltar:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Botões ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 20px; font-weight: 600; font-size: 14px; white-space: nowrap; transition: background-color .15s, transform .15s; }
.botao.violeta { background: var(--violeta); color: #fff; }
.botao.violeta:hover { background: var(--violeta-2); }
.botao.cinza { background: var(--cinza); color: var(--tinta); }
.botao.cinza:hover { background: var(--cinza-2); }
.botao.branco { background: #fff; color: #141c29; height: 52px; padding: 0 24px; border-radius: 26px; font-size: 15px; font-weight: 500; }
.botao.branco:hover { transform: translateY(-1px); }
.botao.largo { width: 100%; height: 50px; border-radius: 25px; font-size: 15px; }
.botao.pequeno { height: 34px; padding: 0 14px; border-radius: 17px; font-size: 13px; }

/* ---------- Topo ---------- */
.topo { position: sticky; top: 0; z-index: 30; height: var(--topo); display: flex; align-items: center; gap: 24px; padding: 0 var(--espaco); background: rgba(10,10,10,.92); border-bottom: 1px solid rgba(224,17,43,.06); box-shadow: 0 10px 28px rgba(0,0,0,.045); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.marca { display: inline-flex; align-items: baseline; gap: 5px; font-size: 25px; line-height: 1; letter-spacing: -.03em; font-weight: 500; white-space: nowrap; }
.marca b { font-weight: 800; position: relative; }
.marca b::after { content: ""; position: absolute; right: -9px; bottom: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--violeta); }
.pesquisa-botao { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 180px; height: 40px; padding: 0 14px 0 16px; border-radius: 20px; background: var(--cinza); color: var(--tinta-2); font-size: 14px; margin-left: 12px; }
.pesquisa-botao .ic { width: 18px; height: 18px; }
.pesquisa-botao:hover { background: var(--cinza-2); }
.alternar { margin: 0 auto; display: inline-flex; padding: 4px; border-radius: 22px; background: var(--cinza); }
.alternar a { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 18px; border-radius: 18px; font-weight: 500; font-size: 14px; }
.alternar a .ic { width: 18px; height: 18px; }
.alternar a.ativo { background: var(--violeta); color: #fff; }
.topo-acoes { display: flex; gap: 8px; }

/* ---------- Grelha e lateral ---------- */
.grelha { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; max-width: 1720px; margin: 0 auto; padding: 32px var(--espaco) 48px; }
.lado { position: sticky; top: calc(var(--topo) + 32px); align-self: start; display: flex; flex-direction: column; gap: 16px; max-height: calc(100vh - var(--topo) - 48px); overflow-y: auto; scrollbar-width: none; padding-bottom: 8px; }
.lado::-webkit-scrollbar { display: none; }
.lado-premio a { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 16px; border-radius: var(--r-m); background: linear-gradient(95deg, #e0112b, #ff6a3d); color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 6px 18px -8px rgba(224, 17, 43, .55); }
.lado-premio .ic { width: 28px; height: 28px; }
.lado-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lado-duplo a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 72px; border-radius: var(--r-m); background: var(--cartao); font-weight: 600; font-size: 13px; }
.lado-duplo a.ativo { background: var(--violeta); color: #fff; }
.lado-lista { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--r-g); background: var(--cartao); }
.lado-lista a { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 14px; border-radius: 14px; font-weight: 600; font-size: 14px; }
.lado-lista a:hover { background: var(--cinza); }
.lado-lista a small { display: block; font-weight: 500; font-size: 11.5px; color: var(--tinta-2); line-height: 1.3; }
.lado-lista .ic { width: 22px; height: 22px; color: var(--tinta); }
.mini { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; padding: 5px; }
.mini-logo { max-height: 100%; max-width: 100%; object-fit: contain; }

/* Cores de casino (fundos das marcas; os logótipos são claros) */
.c-gangsta { background: var(--g-gangsta); }
.c-fiery { background: var(--g-fiery); }

/* ---------- Conteúdo ---------- */
.conteudo { min-width: 0; display: flex; flex-direction: column; gap: var(--espaco); }
.cartao { background: var(--cartao); border-radius: var(--r-g); padding: var(--espaco); }
.movel-alternar { display: none; }
.topo-grelha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espaco); }

/* Banner */
.banner { position: relative; border-radius: var(--r-g); overflow: hidden; min-height: 300px; color: #fff; isolation: isolate; }
/* Telemóvel: o browser trata do scroll vertical; o gesto horizontal fica para o carrossel (sem arrastar a página para os lados). */
.banner { touch-action: pan-y; }
.slide { position: absolute; inset: 0; display: flex; padding: 30px 32px 44px; overflow: hidden; }
.slide:not([hidden]) { animation: entra .45s ease both; }
@keyframes entra { from { opacity: 0; } to { opacity: 1; } }
.s-gangsta { background: var(--g-gangsta); } .s-fiery { background: var(--g-fiery); box-shadow: inset 0 0 0 2px rgba(237, 34, 36, .7); } .slide-texto { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 62%; }
.slide-logo { display: inline-flex; align-items: center; height: 30px; margin-bottom: 4px; }
.slide-escolha { display: inline-flex; align-items: center; min-height: 23px; padding: 0 9px; border-radius: 12px; color: rgba(255,255,255,.88); background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.16); font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.slide-logo img { height: 26px; width: auto; max-width: 150px; object-fit: contain; }
.slide-valor { font-size: clamp(28px, 2.6vw, 38px); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
.s-fiery .slide-valor { color: #ffc93d; } .slide-linha { font-size: 16px; font-weight: 600; line-height: 1.45; opacity: .94; max-width: 26ch; }
.slide-texto .botao { margin-top: auto; }
.slide-arte { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); z-index: 0; width: auto; height: 86%; max-width: 44%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .45)); }
.slide-foto { position: absolute; right: 0; bottom: 0; width: 48%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(1) contrast(1.08); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%); mask-image: linear-gradient(90deg, transparent 0, #000 45%); mix-blend-mode: luminosity; opacity: .95; }
.pontos { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2; display: flex; gap: 6px; }
.ponto { width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .5); transition: width .2s, background-color .2s; }
.ponto[aria-current="true"] { width: 22px; background: #fff; }

/* Encontra o teu casino */
.quiz { background: var(--cartao); border-radius: var(--r-g); padding: 28px 32px; display: flex; flex-direction: column; min-height: 300px; }
.quiz h2 { font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.quiz-sub { margin-top: 6px; font-size: 15px; font-weight: 500; }
.quiz-pergunta { margin: 18px 0 10px; font-size: 14px; font-weight: 600; color: var(--tinta-2); }
.opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcao { height: 52px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--cinza-2); background: var(--cartao); font-weight: 600; font-size: 14.5px; text-align: center; transition: border-color .15s, background-color .15s; }
.opcao:hover { border-color: var(--violeta); background: var(--violeta-suave); }
.quiz-voltar { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--tinta-2); }
.quiz-voltar .ic { width: 18px; height: 18px; }
.quiz-voltar:hover { color: var(--violeta); }
.quiz-passo { display: flex; flex-direction: column; }
.resultado { display: flex; flex-direction: column; gap: 12px; }
.resultado-rotulo { font-size: 13px; font-weight: 600; color: var(--violeta); }
.resultado-casino { display: flex; align-items: center; gap: 14px; }
.resultado-logo { display: grid; place-items: center; width: 84px; height: 56px; flex: none; border-radius: 14px; padding: 10px; }
.resultado-logo img { max-height: 100%; max-width: 100%; object-fit: contain; }
.resultado-titulo { font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.resultado-porque { font-size: 14.5px; color: var(--tinta-2); }
.resultado-porque b { color: var(--tinta); }
.resultado-alt { font-size: 13px; color: var(--tinta-2); }
.resultado-alt a { color: var(--violeta); font-weight: 600; }
.resultado .botao.largo { height: 56px; border-radius: 28px; font-size: 16px; }

/* ---------- Filas ---------- */
.rail { background: linear-gradient(100deg, var(--cartao) 45%, #1c0c0e); }
.rail-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.rail-titulo { display: flex; align-items: center; gap: 14px; font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.rail-icone { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: var(--r-p); color: #fff; }
.rail-icone .ic { width: 24px; height: 24px; }
.g-vermelho { background: linear-gradient(135deg, #ff5a5a, #e0123b); } .g-laranja { background: linear-gradient(135deg, #ffae2e, #ff5e1a); }
.g-violeta { background: linear-gradient(135deg, #ff5566, #e0112b); } .g-verde { background: linear-gradient(135deg, #2fd08b, #0f9d62); }
.g-amarelo { background: linear-gradient(135deg, #ffcf3a, #f29a00); } .g-azul { background: linear-gradient(135deg, #52a0ff, #1f5fe0); }
.rail-acoes { display: flex; align-items: center; gap: 8px; }
.seta { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cartao); box-shadow: 0 1px 4px rgba(20, 28, 41, .08); }
.seta:hover:not(:disabled) { background: var(--cinza); }
.seta:disabled { opacity: .35; cursor: default; box-shadow: none; }
.todos { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 22px; background: var(--cartao); box-shadow: 0 1px 4px rgba(20, 28, 41, .08); font-weight: 500; font-size: 14.5px; white-space: nowrap; }
.todos:hover { background: var(--cinza); }
.rail-sub { margin: -6px 0 16px; color: var(--tinta-2); font-size: 13.5px; }
.trilho { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 24px) / 6); gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; margin: -2px; }
.trilho::-webkit-scrollbar { display: none; }
.trilho > * { scroll-snap-align: start; }
.trilho.aberto { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; }

/* Capas de jogo */
.jogo { position: relative; display: block; aspect-ratio: 342 / 511; border-radius: var(--r-m); overflow: hidden; background: #1f1f1f; }
.jogo img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.jogo:hover img { transform: scale(1.04); }
.jogo::after { content: "Jogar"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20, 28, 41, .45); color: #fff; font-weight: 600; font-size: 15px; opacity: 0; transition: opacity .2s; }
.jogo:hover::after, .jogo:focus-visible::after { opacity: 1; }
.jogo-casino { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 3px 9px; border-radius: 8px; color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .01em; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.jogo-fornecedor { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 1; max-width: 88%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 9px; border-radius: 10px; background: var(--cartao); color: var(--tinta); font-size: 10.5px; font-weight: 500; }
.jogo.escondido-filtro { display: none; }

/* Casinos */
.trilho-casinos { grid-auto-columns: calc((100% - 2 * 24px) / 3); }
.casino { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--cartao); border: 1px solid var(--linha); }
.casino-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 96px; padding: 0 20px; }
.casino-topo .logo { height: 30px; width: auto; max-width: 55%; object-fit: contain; }
.casino-selo { padding: 6px 11px; border-radius: 10px; background: rgba(255, 255, 255, .18); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; backdrop-filter: blur(4px); }
.casino-corpo { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 18px 20px 18px; }
.casino-melhor { font-size: 12.5px; color: var(--tinta-2); }
.casino-melhor b { color: var(--violeta); font-weight: 600; }
.casino-valor { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.casino-linha { font-size: 13.5px; color: var(--tinta-2); }
/* Um painel cinzento leve para o miolo do cartão: sem ele os benefícios e os pagamentos ficavam texto solto
   sobre o branco. Os pagamentos já viviam numa caixa própria — passam a partilhar esta, separados por um fio. */
.casino-detalhe { margin: 10px 0 14px; padding: 13px 14px; border-radius: var(--r-p); background: var(--cinza); }
.casino-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.casino-lista li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.casino-lista .ic { width: 18px; height: 18px; color: var(--violeta); margin-top: 1px; }
.casino-corpo .botao { margin-top: auto; }
.casino-nota { margin-top: 8px; font-size: 11.5px; color: var(--tinta-3); text-align: center; }

/* Comparar */
.tabela-rolar { overflow-x: auto; }
.comp { width: 100%; border-collapse: collapse; font-size: 14px; }
.comp th, .comp td { padding: 14px; text-align: left; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.comp thead th { font-size: 12.5px; font-weight: 600; color: var(--tinta-2); padding-top: 6px; }
.comp tbody tr:last-child th, .comp tbody tr:last-child td { border-bottom: 0; }
.comp tbody tr:hover { background: #1d1d1d; }
.comp td b { font-weight: 700; font-size: 16px; }
.comp-casino { display: inline-grid; place-items: center; width: 118px; height: 46px; padding: 0 14px; border-radius: 12px; }
.comp-casino img { max-height: 24px; width: auto; max-width: 100%; object-fit: contain; }
.melhor-selo { margin-left: 8px; padding: 2px 8px; border-radius: 8px; background: var(--violeta-suave); color: var(--violeta); font-size: 11px; font-weight: 700; vertical-align: 2px; }
.comp-cta { text-align: right !important; }
.nota { margin-top: 14px; font-size: 12.5px; color: var(--tinta-2); }

/* Jogos: título e filtros */
.jogos-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 8px 4px 0; }
.jogos-titulo { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 20px; background: var(--cartao); font-weight: 600; font-size: 13.5px; }
.filtro i { width: 9px; height: 9px; border-radius: 50%; }
.filtro.c-gangsta, .filtro.c-fiery { background: var(--cartao); }
.filtro.c-gangsta i { background: var(--c-gangsta); }
.filtro.c-fiery i { background: var(--c-fiery); }
.filtro[aria-pressed="true"] { background: var(--violeta); color: #fff; }
.filtro[aria-pressed="true"] i { box-shadow: 0 0 0 2px #fff; }
.rail.vazio-filtro { display: none; }

/* O primeiro rail muda o ritmo visual e dá energia ao início do lobby. */
#rail-rapidos { color: #fff; background:
  radial-gradient(circle at 82% 18%, rgba(38,210,255,.28), transparent 27%),
  radial-gradient(circle at 12% 110%, rgba(255,62,201,.28), transparent 34%),
  linear-gradient(135deg, #d4102a, #7a0716 55%, #2a0508); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 55px -35px rgba(120,8,20,.8); }
#rail-rapidos .rail-sub { color: rgba(255,255,255,.72); }
#rail-rapidos .todos, #rail-rapidos .seta { color: #fff; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.14); box-shadow: none; }
#rail-rapidos .todos:hover, #rail-rapidos .seta:hover:not(:disabled) { background: rgba(255,255,255,.2); }
#rail-rapidos .jogo { box-shadow: 0 12px 28px rgba(0,0,0,.32); }

/* Grandes prémios */
.trilho-venc { grid-auto-columns: calc((100% - 6 * 16px) / 7); gap: 16px; }

/* Canal */
.trilho-promos { grid-auto-columns: calc((100% - 3 * 24px) / 4); }

/* Sobre */
.sobre { display: block; }
.sobre-texto { display: flex; flex-direction: column; gap: 12px; }
.sobre h2, .faq h2 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.sobre p { font-size: 15px; color: var(--tinta-2); max-width: 64ch; }

/* FAQ */
.faq h2 { margin-bottom: 8px; }
.pergunta { border-top: 1px solid var(--linha); }
.pergunta summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after { content: ""; width: 12px; height: 12px; flex: none; border-right: 2px solid var(--tinta-2); border-bottom: 2px solid var(--tinta-2); transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s; }
.pergunta[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.pergunta p { margin: -4px 0 18px; font-size: 15px; color: var(--tinta-2); max-width: 72ch; }

/* Jogo responsável e rodapé */
.responsavel { display: flex; align-items: center; gap: 22px; }
.dezoito { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%; border: 3px solid var(--tinta); font-size: 20px; font-weight: 800; }
.responsavel h2 { font-size: 19px; font-weight: 600; margin-bottom: 4px; }
.responsavel p { font-size: 14px; color: var(--tinta-2); max-width: 90ch; }
.rodape { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 32px var(--espaco); border-radius: var(--r-g); background: var(--cartao); text-align: center; }
.rodape-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font-size: 15px; font-weight: 500; }
.rodape-links a:hover { color: var(--violeta); }
.rodape-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 20px 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); width: 100%; }
.rodape-logos span { display: grid; place-items: center; height: 44px; padding: 0 16px; border-radius: 12px; }
.rodape-logo { height: 20px; width: auto; max-width: 110px; object-fit: contain; }
.rodape-aviso { font-size: 12.5px; color: var(--tinta-2); max-width: 88ch; }
.rodape-copia { font-size: 13px; font-weight: 600; }

/* ---------- Barra de baixo (telemóvel) ---------- */
.dock { display: none; }

/* ---------- Painéis (pesquisa, menu, vídeo, idade) ---------- */
dialog { padding: 0; border: 0; color: var(--tinta); }
dialog::backdrop { background: rgba(20, 28, 41, .55); backdrop-filter: blur(4px); }
.painel { width: min(1040px, calc(100vw - 48px)); max-height: calc(100vh - 80px); border-radius: var(--r-g); background: var(--cartao); overflow: hidden; }
.painel[open] { display: flex; flex-direction: column; }
.painel-topo { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--linha); }
.fechar { display: grid; place-items: center; width: 44px; height: 44px; flex: none; margin-left: auto; border-radius: 50%; background: var(--cinza); }
.fechar:hover { background: var(--cinza-2); }
.pesquisa-campo { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; height: 52px; padding: 0 18px; border-radius: 26px; background: var(--cinza); color: var(--tinta-2); }
.pesquisa-campo input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 500 16px Poppins, sans-serif; color: var(--tinta); }
.pesquisa-contagem { padding: 12px 20px 0; font-size: 13px; color: var(--tinta-2); }
/* grid-auto-rows: max-content — a grelha é o bloco que encolhe (e rola) dentro do painel; com filas «auto» e cartões
   com overflow:hidden + aspect-ratio (altura mínima 0), as filas ficavam com 27 px e as capas sobrepunham-se. */
.grelha-jogos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 16px; padding: 12px 20px 20px; overflow-y: auto; }
.menu { width: min(420px, 100vw); max-height: 100vh; height: 100vh; margin: 0 0 0 auto; border-radius: 0; }
.menu-corpo { display: flex; flex-direction: column; gap: 16px; padding: 16px; overflow-y: auto; background: var(--fundo); flex: 1; }
.idade { width: min(440px, calc(100vw - 32px)); border-radius: var(--r-g); background: var(--cartao); }
.idade-caixa { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 28px 26px; text-align: center; }
.idade-marca { font-size: 20px; font-weight: 500; letter-spacing: -.03em; margin-bottom: 6px; }
.idade-marca b { font-weight: 800; }
.idade h2 { font-size: 24px; font-weight: 700; }
.idade p { color: var(--tinta-2); font-size: 14.5px; }
.idade-botoes { display: grid; gap: 10px; width: 100%; margin-top: 8px; }
.idade-nota { font-size: 12.5px !important; }
html.idade-pendente body { overflow: hidden; }

/* ---------- Tablet e telemóvel ---------- */
@media (max-width: 1280px) {
  .trilho { grid-auto-columns: calc((100% - 4 * 20px) / 5); gap: 20px; }
  .trilho.aberto { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .trilho-casinos { grid-auto-columns: calc((100% - 24px) / 2.25); }
  .trilho-venc { grid-auto-columns: calc((100% - 4 * 16px) / 5); }
  .trilho-promos { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
}
@media (max-width: 1100px) {
  :root { --topo: 64px; --espaco: 16px; }
  .grelha { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 16px 16px calc(104px + env(safe-area-inset-bottom)); }
  .lado, .pesquisa-botao, .alternar, .so-desktop { display: none; }
  .topo { gap: 12px; padding: 0 16px; justify-content: space-between; }
  .marca { font-size: 22px; }
  .topo-acoes .botao { height: 44px; padding: 0 20px; border-radius: 22px; font-size: 15px; }
  .movel-alternar { display: flex; padding: 6px; border-radius: var(--r-g); background: var(--cartao); }
  .movel-alternar a { flex: 1; display: grid; place-items: center; height: 44px; border-radius: 20px; font-size: 16px; font-weight: 500; }
  .movel-alternar a.ativo { background: var(--violeta); color: #fff; }
  .conteudo { gap: 16px; }
  .topo-grelha { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cartao { padding: 20px 16px; }
  .rail-titulo { font-size: 22px; gap: 12px; }
  .rail-icone { width: 40px; height: 40px; }
  .rail-icone .ic { width: 20px; height: 20px; }
  .rail-topo { margin-bottom: 14px; }
  .trilho { grid-auto-columns: calc((100% - 2 * 12px) / 2.45); gap: 12px; }
  .trilho.aberto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trilho-casinos { grid-auto-columns: 84%; }
  .trilho-venc { grid-auto-columns: calc((100% - 2 * 12px) / 2.6); }
  .trilho-promos { grid-auto-columns: 78%; }
  /* Barra de baixo: pastilha a flutuar, centrada, com o item atual aberto com o nome.
     Largura FIXA de propósito — o nome muda de item ao rolar e a barra nunca salta nem se re-centra.
     A altura é fixa e o env(safe-area-inset-bottom) entra só no afastamento: no iPhone esse valor muda de
     0 para ~34px quando a barra do Safari encolhe, e dentro da altura fazia a barra mudar de tamanho a meio do scroll. */
  .dock { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40;
    display: flex; align-items: center; justify-content: center; gap: 2px;
    width: 328px; max-width: calc(100vw - 24px); height: 58px; padding: 0 7px;
    background: var(--cartao); border-radius: 29px; border: 1px solid var(--linha);
    box-shadow: 0 14px 34px rgba(20, 28, 41, .18), 0 2px 8px rgba(20, 28, 41, .06);
    transform: translateX(-50%) translateZ(0); transform-origin: 50% 100%; backface-visibility: hidden;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
  /* Encolher ao rolar: só `transform`, que o browser resolve no compositor — sem relayout, sem repintar, sem tremer. */
  .dock[data-encolhida] { transform: translateX(-50%) translateZ(0) scale(.9); }
  .dock a, .dock button { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 22px; color: var(--tinta-2); }
  .dock .ic { width: 22px; height: 22px; }
  .dock span { display: none; }
  /* O item atual abre-se com o nome. Largura fixa também: o «Pesquisar» e o «Menu» ocupam o mesmo espaço. */
  .dock [aria-current="true"] { grid-auto-flow: column; justify-content: center; gap: 7px; width: 128px; background: var(--violeta-suave); color: var(--violeta); }
  .dock [aria-current="true"] span { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
  .painel { width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; border-radius: 0; margin: 0; }
  .menu { width: 100vw; }
}
@media (max-width: 374px) {
  /* Cabeçalho dos carrosséis: o <h2> é item flex e o `min-width: auto` impede-o de encolher abaixo da palavra mais
     comprida — «Megaways» e «Novidades» empurravam o «Ver todos» para fora e davam scroll horizontal à PÁGINA.
     `min-width: 0` deixa-o encolher e o `overflow-wrap` garante que nenhuma palavra futura volta a empurrar. */
  .rail-titulo { min-width: 0; font-size: 19px; gap: 10px; overflow-wrap: anywhere; }
  .rail-icone { width: 34px; height: 34px; }
  .rail-icone .ic { width: 18px; height: 18px; }
  .rail-acoes { flex: none; }
  .dock { width: 296px; gap: 0; padding: 0 5px; }
  .dock a, .dock button { width: 40px; }
  .dock [aria-current="true"] { width: 116px; gap: 6px; }
  .dock [aria-current="true"] span { font-size: 12px; }
}
@media (max-width: 700px) {
  .seta { display: none; }
  .banner { min-height: 0; aspect-ratio: auto; }
  .slide { position: relative; padding: 26px 24px 46px; min-height: 330px; }
  .slide[hidden] { display: none !important; }
  .slide-texto { max-width: 70%; }
  .slide-valor { font-size: 30px; }
  .slide-linha { font-size: 15px; }
  .slide-arte { right: 3%; top: auto; bottom: 44px; transform: none; height: 40%; max-width: 38%; }
  .slide-foto { width: 58%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60%); mask-image: linear-gradient(90deg, transparent 0, #000 60%); }
  .slide .botao.branco { height: 50px; margin-top: 18px; }
  .slide-escolha { min-height: 21px; font-size: 7px; }
  .quiz { padding: 22px 18px; min-height: 0; }
  .quiz h2 { font-size: 24px; }
  .opcao { height: 50px; font-size: 14px; }
  .jogos-titulo { font-size: 22px; }
  .filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro { flex: none; }
  .sobre h2, .faq h2 { font-size: 22px; }
  .sobre p { font-size: 14px; }
  .responsavel { align-items: flex-start; gap: 14px; }
  .dezoito { width: 48px; height: 48px; font-size: 16px; }
  .pergunta summary { font-size: 15px; }
}
@media (max-width: 380px) {
  .marca { font-size: 19px; }
  .topo-acoes .botao { padding: 0 16px; font-size: 14px; }
  .slide-valor { font-size: 26px; }
  .opcoes { grid-template-columns: 1fr; }
}

/* Logótipos dentro de caixas: ocupam a caixa sem a ultrapassar */
.mini { width: 56px; height: 36px; padding: 7px 8px; }
.mini-logo, .resultado-logo img, .comp-casino img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; }
.comp-casino img { height: 24px; }
.resultado-logo { width: 96px; height: 58px; padding: 12px 14px; }

/* Atalhos (telemóvel) */
.atalhos { display: none; }
@media (max-width: 1100px) {
  .atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .atalho { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 104px; border-radius: var(--r-g); color: #fff; font-size: 16px; font-weight: 600; }
  .atalho .ic { width: 32px; height: 32px; }
}

/* ---------- Pesquisa: filtros por casino e cartões com nome ---------- */
.pesquisa .painel-topo, .pesquisa-filtros, .pesquisa-contagem { flex: none; }
.pesquisa-filtros { display: flex; gap: 8px; overflow-x: auto; padding: 14px 20px 0; scrollbar-width: none; }
.pesquisa-filtros::-webkit-scrollbar { display: none; }
.pesquisa-filtros button { flex: none; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--cinza); font-size: 13.5px; font-weight: 500; }
.pesquisa-filtros button span { margin-left: 2px; color: var(--tinta-3); font-weight: 500; }
.pesquisa-filtros button:hover { background: var(--cinza-2); }
.pesquisa-filtros button[aria-pressed="true"] { background: var(--violeta); color: #fff; }
.pesquisa-filtros button[aria-pressed="true"] span { color: rgba(255, 255, 255, .75); }
.resultados-pesquisa { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 16px; padding-bottom: 28px; }
.resultado { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-m); }
.resultado .jogo { margin-bottom: 8px; }
.resultado:focus-visible { outline: 2px solid var(--violeta); outline-offset: 3px; }
.resultado:focus-visible .jogo::after { opacity: 1; }
.resultado-nome { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultado-fornecedor { font-size: 12px; color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pesquisa-vazia { grid-column: 1 / -1; padding: 32px 12px; text-align: center; color: var(--tinta-2); font-size: 14px; }

@media (max-width: 700px) {
  .pesquisa-filtros { padding: 12px 16px 0; }
  .pesquisa-contagem { padding: 10px 16px 0; }
  .resultados-pesquisa { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; padding: 10px 16px calc(28px + env(safe-area-inset-bottom)); }
  .resultados-pesquisa .jogo { border-radius: 12px; }
  .resultados-pesquisa .jogo-casino { top: 6px; left: 6px; padding: 2px 7px; font-size: 9.5px; }
  .resultado-nome { font-size: 12.5px; }
  .resultado-fornecedor { font-size: 11px; }
}

/* ---------- Compara lado a lado (mais abaixo na página): tabela no desktop, lista compacta no tablet e telemóvel ---------- */
.comp-ordenar, .comp-lista, .so-movel-comp { display: none; }
@media (max-width: 1100px) {
  .comparar .tabela-rolar { display: none; }
  .so-movel-comp { display: inline; }
  .comp-ordenar { display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 6px; max-width: 420px; margin: 2px 0 6px; font-size: 13px; color: var(--tinta-2); }
  .comp-ordenar span { margin-right: 4px; }
  .comp-ordenar button { height: 36px; padding: 0 10px; border-radius: 18px; background: var(--cinza); font-size: 13px; font-weight: 500; color: var(--tinta); white-space: nowrap; }
  .comp-ordenar button[aria-pressed="true"] { background: var(--violeta); color: #fff; }
  .comp-lista { display: block; margin: 0; padding: 0; list-style: none; }
  .comp-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
  .comp-item:last-child { border-bottom: 0; }
  .comp-abrir { display: grid; grid-template-columns: 88px minmax(0, max-content) 12px; justify-content: start; align-items: center; gap: 12px; min-height: 48px; text-align: left; }
  .comp-abrir::after { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--tinta-3); border-bottom: 2px solid var(--tinta-3); transform: rotate(45deg) translateY(-2px); justify-self: center; transition: transform .15s; }
  .comp-abrir[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
  .comp-logo { display: grid; place-items: center; height: 42px; padding: 0 10px; border-radius: 12px; }
  .comp-logo img { width: 100%; height: 20px; object-fit: contain; }
  .comp-num { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.25; }
  .comp-num b { font-size: 16px; font-weight: 700; white-space: nowrap; }
  .comp-num small { font-size: 12px; color: var(--tinta-2); }
  .comp-ir { height: 38px; padding: 0 16px; border-radius: 19px; }
  .comp-selo { margin-top: 4px; padding: 1px 8px; border-radius: 8px; background: var(--violeta-suave); color: var(--violeta); font-size: 11px; font-style: normal; font-weight: 600; white-space: nowrap; }
  .comp-mais { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; padding: 12px 14px; border-radius: var(--r-p); background: var(--cinza); font-size: 13px; line-height: 1.4; }
  .comp-mais[hidden] { display: none; }
  .comp-mais span { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; color: var(--tinta-3); }
}
@media (max-width: 380px) {
  .comp-abrir { grid-template-columns: 64px minmax(0, max-content) 10px; gap: 10px; }
  .comp-logo { padding: 0 8px; }
  .comp-num b { font-size: 15px; }
  .comp-num small { font-size: 11px; white-space: nowrap; }
  .comp-ordenar span { display: none; }
  .comp-ordenar { grid-template-columns: 1fr 1fr; }
  .comp-ir { padding: 0 12px; }
}

/* ---------- Métodos de depósito (logótipos reais; só os que se usam em Portugal) ---------- */
.pagamentos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 2px 0 14px; padding: 10px 12px; border-radius: var(--r-p); background: var(--cinza); }
.casino-detalhe .pagamentos { margin: 12px 0 0; padding: 12px 0 0; border-radius: 0; background: none; border-top: 1px solid var(--linha); }
.pag-rotulo { font-size: 12.5px; color: var(--tinta-2); white-space: nowrap; }
.pag-rotulo b { color: var(--tinta); font-weight: 600; }
.pag-chips { display: flex; flex-wrap: wrap; gap: 5px; }
img.pag { display: block; width: 38px; height: 24px; border-radius: 4px; }

/* ---------- Grandes prémios: capa do jogo, posição e valor por cima ---------- */
.venc { display: block; min-width: 0; border-radius: var(--r-m); }
.venc-capa { position: relative; display: block; aspect-ratio: 342 / 511; border-radius: var(--r-m); overflow: hidden; background: #1a0a0c; }
.venc-capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.venc:hover .venc-capa img { transform: scale(1.04); }
.venc-capa::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, transparent, rgba(12, 4, 6, .92)); pointer-events: none; }
.venc-pos { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px;
  background: rgba(255, 255, 255, .92); color: #141c29; font-size: 12px; font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.venc-pos.p1 { background: linear-gradient(135deg, #ffe27a, #f5b301); color: #3b2a00; }
.venc-pos.p2 { background: linear-gradient(135deg, #f1f3f6, #b9c0cb); color: #1f2733; }
.venc-pos.p3 { background: linear-gradient(135deg, #f3c29a, #c7773e); color: #3a1d06; }
.venc-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 12px; color: #fff; }
.venc-valor { font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.venc-jogo { font-size: 12px; font-weight: 500; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venc:focus-visible { outline: 2px solid var(--violeta); outline-offset: 3px; }
@media (max-width: 700px) { .venc-valor { font-size: 16px; } }

/* ---------- Promoções desta semana ---------- */
.promo { display: flex; flex-direction: column; gap: 4px; min-width: 0; border-radius: var(--r-m); }
.promo-capa { position: relative; display: block; aspect-ratio: 2 / 1; margin-bottom: 6px; border-radius: var(--r-m); overflow: hidden; background: #1a0a0c; }
.promo-capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.promo:hover .promo-capa img { transform: scale(1.03); }
.promo-fim { position: absolute; top: 8px; right: 8px; padding: 3px 9px; border-radius: 8px; background: rgba(255, 255, 255, .94); color: #141c29; font-size: 11px; font-weight: 600; }
.promo-titulo { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.promo-texto { font-size: 13px; color: var(--tinta-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.promo:focus-visible { outline: 2px solid var(--violeta); outline-offset: 3px; }

/* Só para leitores de ecrã e motores de busca (h1 da página): não ocupa espaço nem se vê. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Página de bónus (/bonus/fiery-play/) e link "Informações do bónus" ---------- */
.casino-info { align-self: center; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--violeta); text-underline-offset: 4px; }
.casino-info:hover { color: var(--violeta); }
.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--tinta-2); }
.migalhas a:hover { color: var(--tinta); }
.migalhas [aria-current] { color: var(--tinta); font-weight: 600; }
.bonus-banner { min-height: 320px; }
.bonus-banner .slide { position: relative; min-height: 320px; }
.bonus-banner .slide-arte { height: 94%; max-width: 40%; }
.bonus-resumo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.bonus-resumo div { font-size: 12.5px; color: var(--tinta-2); }
.bonus-resumo b { display: block; font-size: 24px; font-weight: 700; color: var(--tinta); line-height: 1.2; letter-spacing: -.02em; }
.bonus-depositos { display: grid; gap: 22px; }
.bonus-deposito-titulo { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.bonus-deposito-titulo small { font-size: 13px; font-weight: 500; color: var(--violeta); }
.bonus-niveis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bonus-nivel { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--r-m); background: var(--cinza); border: 1px solid var(--linha); }
.bonus-nivel-min { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--tinta-2); }
.bonus-nivel-min b { color: var(--tinta); }
.bonus-nota { padding: 2px 8px; border-radius: 8px; background: var(--violeta-suave); color: var(--violeta); font-size: 11px; font-weight: 700; }
.bonus-linha { display: flex; align-items: center; gap: 12px; }
.bonus-linha img { width: 44px; height: 44px; flex: none; object-fit: contain; }
.bonus-linha img.bonus-jogo { border-radius: 10px; object-fit: cover; }
.bonus-linha p { display: flex; flex-direction: column; font-size: 14.5px; line-height: 1.3; }
.bonus-linha small { font-size: 12.5px; color: var(--tinta-2); }
.bonus-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bonus-passo { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: var(--r-m); background: var(--cinza); }
.bonus-passo img { width: 35px; height: 35px; flex: none; }
.bonus-passo b { display: block; font-size: 15px; margin-bottom: 2px; }
.bonus-passo p { font-size: 13.5px; color: var(--tinta-2); line-height: 1.45; }
.bonus-colunas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.bonus-colunas .casino-detalhe { margin: 0; }
.bonus-sub { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.bonus-termos li { font-weight: 400; color: var(--tinta-2); }
.bonus-final { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.bonus-final .logo { height: 40px; width: auto; margin-bottom: 4px; }
.bonus-final .botao { max-width: 420px; margin-top: 8px; }
@media (max-width: 1100px) {
  .bonus-resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bonus-niveis, .bonus-colunas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .bonus-banner, .bonus-banner .slide { min-height: 330px; }
  .bonus-banner .slide-arte { height: 46%; max-width: 40%; bottom: 40px; }
  .bonus-resumo { grid-template-columns: 1fr 1fr; }
  .bonus-resumo b { font-size: 20px; }
  .bonus-niveis, .bonus-passos, .bonus-colunas { grid-template-columns: 1fr; }
}

/* Nome da marca no cabeçalho em telemóveis estreitos: "Portugueses Pelo Mundo" não pode empurrar o botão para fora do ecrã. */
@media (max-width: 700px) { .topo .marca { font-size: clamp(14px, 4.1vw, 19px); } }

/* Banner da Gangsta Sino: igual aos outros slides; à direita o personagem do banner oficial, a desvanecer para o fundo. */
.s-gangsta .slide-valor { color: #ffd43b; }
.slide-personagem { position: absolute; right: 0; top: 0; z-index: 0; width: 44%; height: 100%; object-fit: cover; object-position: center 18%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); }
@media (max-width: 700px) {
  .slide-personagem { top: auto; bottom: 0; width: 46%; height: 58%; object-position: center top; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%); mask-image: linear-gradient(90deg, transparent 0, #000 40%); }
}

/* ---------- Landing do bónus da Gangsta Sino (/bonus/gangsta-sino/): visual do casino ---------- */
.gs { --gs-fundo: #0a1234; --gs-cartao: #0e1a4a; --gs-amarelo: #ffd65a; --gs-vermelho: #e8284f; --gs-azul: #9db4ff; --gs-teal: #1f7f86;
  display: flex; flex-direction: column; gap: var(--espaco); padding: var(--espaco); border-radius: var(--r-g); color: #fff;
  background:
    linear-gradient(180deg, rgba(10, 18, 52, .55), rgba(5, 9, 28, .9)),
    repeating-linear-gradient(0deg, transparent 0 33px, rgba(0, 0, 0, .35) 33px 35px),
    repeating-linear-gradient(90deg, transparent 0 68px, rgba(0, 0, 0, .28) 68px 70px),
    #121c4a; }
.gs-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 20px 20px 26px; border-radius: 22px;
  background: linear-gradient(180deg, #16214f 0%, #070c24 100%); box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .9); }
.gs-logo { height: 30px; width: auto; }
.gs-hero-arte { width: 100%; max-width: 420px; border-radius: 22px; overflow: hidden; background: #0b0a10; }
.gs-hero-arte video { display: block; width: 100%; height: auto; aspect-ratio: 656 / 868; object-fit: cover; }
.gs-hero-sobre { position: relative; margin-top: -150px; font-size: 18px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #c8cbd6; }
.gs-hero-valor { position: relative; font-size: 34px; font-weight: 800; line-height: 1.15; text-transform: uppercase; letter-spacing: -.01em; }
.gs-hero-nota { font-size: 12.5px; color: var(--gs-azul); }
.gs-botao { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: min(420px, 100%); height: 58px; margin: 10px 8px 4px; padding: 0 28px;
  background: var(--gs-amarelo); color: #111; font-size: 18px; font-weight: 800; border-radius: 6px; box-shadow: 0 0 0 3px #0a1234, 0 0 0 6px var(--gs-vermelho), 8px 8px 0 3px var(--gs-vermelho);
  transition: transform .15s ease; }
.gs-botao:hover { transform: translate(-1px, -2px); }
.gs-botao .gs-explosao { position: absolute; width: 30px; height: 30px; pointer-events: none; }
.gs-botao .gs-explosao:first-child { left: -14px; top: -14px; }
.gs-botao .gs-explosao:last-child { right: -18px; bottom: -18px; }
.gs-bloco { display: flex; flex-direction: column; gap: 16px; }
.gs-titulo { font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.gs-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gs-cartao { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px 20px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(14, 26, 74, .92), rgba(7, 13, 40, .96)); border: 3px solid var(--gs-amarelo); }
.gs-cartao h3, .gs-cartao h2 { font-size: 20px; font-weight: 800; text-transform: uppercase; line-height: 1.2; }
.gs-cartao > p { font-size: 15px; line-height: 1.5; color: var(--gs-azul); font-weight: 500; }
.gs-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: var(--gs-teal); color: #d9f2f2; font-size: 13px; font-weight: 700; }
.gs-tag svg { width: 15px; height: 15px; fill: currentColor; }
.gs-planos { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gs-plano { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(157, 180, 255, .25); }
.gs-plano-cofre { font-size: 12px; color: var(--gs-azul); }
.gs-plano-cofre b { color: #fff; }
.gs-plano-valor { font-size: 22px; font-weight: 800; color: var(--gs-amarelo); line-height: 1.1; }
.gs-plano-valor small { display: block; font-size: 12.5px; font-weight: 600; color: #fff; }
.gs-plano-rg { font-size: 12.5px; font-weight: 600; }
.gs-codigo { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--gs-azul); }
.gs-codigo code { padding: 6px 12px; border-radius: 8px; border: 2px dashed var(--gs-amarelo); color: var(--gs-amarelo); font: 800 17px/1 Poppins, sans-serif; letter-spacing: .06em; user-select: all; }
.gs-contas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gs-contas div { padding: 14px; border-radius: 12px; background: rgba(14, 26, 74, .85); border: 1px solid rgba(157, 180, 255, .2); font-size: 12.5px; color: var(--gs-azul); }
.gs-contas b { display: block; font-size: 22px; font-weight: 800; color: #fff; }
.gs-total { font-size: 16px; color: var(--gs-azul); }
.gs-total b { color: var(--gs-amarelo); }
.gs-reembolso { max-width: 720px; }
.gs-final { align-items: center; text-align: center; padding: 8px 0 4px; }
.gs-final .gs-hero-valor { font-size: 26px; }
.gs-nota { max-width: 70ch; font-size: 12.5px; color: var(--gs-azul); line-height: 1.5; }
@media (max-width: 1100px) { .gs-contas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .gs { padding: 14px; gap: 18px; }
  .gs-hero { padding: 16px 12px 22px; }
  .gs-hero-valor { font-size: 26px; }
  .gs-hero-sobre { font-size: 15px; margin-top: -120px; }
  .gs-botao { height: 54px; font-size: 16px; min-width: 0; width: calc(100% - 16px); }
  .gs-titulo { font-size: 21px; }
  .gs-passos { grid-template-columns: 1fr; }
  .gs-planos { grid-template-columns: 1fr; }
}
.venc-jogador { font-size: 11px; font-weight: 600; color: #9db4ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }