/* =====================================================================
   home-shark.css — layout da HOME no estilo da referência (vermelho/preto)
   Tudo escopado em body.sk para não alterar as outras páginas.
   A classe .sk é adicionada ao <body> pela própria pages/home.php.
   ===================================================================== */

/* FALLBACK DAS CORES — precisa ficar em :root, NÃO em body.sk.
   Motivo: variável declarada em body.sk vale para tudo que está dentro do
   body e VENCE a mesma variável declarada em :root, porque o seletor é
   mais específico. Com o fallback em body.sk, a cor escolhida no admin
   era sempre ignorada. Em :root a disputa é empate de especificidade e
   ganha quem vem depois — e o <style> do header.php é carregado depois
   deste arquivo, então o painel manda. */
:root{
  --sk-red:#e11d2a;
  --sk-red-2:#ff3b45;
  --sk-red-esc:#c1121f;
  --sk-red-rgb:225,29,42;
  --sk-gold:#f5c542;
  --sk-gold-rgb:245,197,66;
  --sk-bg:#0a0a0d;
  --sk-bg-rgb:10,10,13;
  --sk-bg-esc:#070709;
}

body.sk{
  /* superfícies translúcidas: o degradê do fundo continua visível
     por trás dos cartões, em vez de virar um bloco cinza chapado */
  --sk-surface:rgba(255,255,255,.045);
  --sk-surface-2:rgba(255,255,255,.075);
  --sk-line:rgba(255,255,255,.09);
  --sk-dim:rgba(255,255,255,.55);

  /* Fundo em degradê, não preto chapado: brilho quente no topo,
     escurece no miolo e volta a aquecer perto do rodapé.
     O background-attachment:fixed faz o brilho ficar parado enquanto
     a página rola, que é o efeito da referência. */
  background:
    radial-gradient(125% 45% at 50% 0%,   rgba(var(--sk-red-rgb),.22), transparent 62%),
    radial-gradient(100% 40% at 50% 100%, rgba(var(--sk-red-rgb),.14), transparent 65%),
    linear-gradient(180deg,
      rgba(var(--sk-red-rgb),.10) 0%,
      rgba(var(--sk-red-rgb),.03) 22%,
      transparent 55%,
      rgba(var(--sk-red-rgb),.04) 100%),
    var(--sk-bg);
  background-attachment:fixed;
  background-repeat:no-repeat;

  padding-top:52px;              /* espaço da faixa de afiliado fixa */
  padding-bottom:84px;
}

/* ---------------------------------------------------------------
   1. FAIXA DE AFILIADO (topo, fixa)
   --------------------------------------------------------------- */
.sk-topbar{
  position:fixed;top:0;left:0;right:0;z-index:90;
  height:52px;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:0 10px;color:#fff;text-decoration:none;
  background:
    radial-gradient(120% 180% at 50% 50%,
      var(--sk-red-2) 0%,
      var(--sk-red) 42%,
      rgba(var(--sk-red-rgb),.35) 78%,
      rgba(var(--sk-red-rgb),.18) 100%),
    var(--sk-bg-esc);
  box-shadow:0 2px 14px rgba(var(--sk-red-rgb),.35);
}
.sk-topbar-ico{
  width:34px;height:34px;flex:none;border-radius:9px;
  display:grid;place-items:center;font-size:17px;
  border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.2);
}
.sk-topbar-txt{
  font-size:.86rem;font-weight:700;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sk-topbar-txt b{color:var(--sk-gold)}
.sk-topbar-cta{
  flex:none;background:#fff;color:var(--sk-red-esc);font-weight:800;font-size:.75rem;
  letter-spacing:.04em;padding:9px 16px;border-radius:999px;white-space:nowrap;
}
.sk-topbar:active{filter:brightness(.95)}

/* ---------------------------------------------------------------
   2. CABEÇALHO (reaproveita o .hdr existente, só reveste)
   --------------------------------------------------------------- */
body.sk .hdr{
  top:52px;                       /* fica logo abaixo da faixa */
  /* translúcido + blur: o degradê quente do topo aparece por trás */
  background:linear-gradient(180deg, rgba(var(--sk-red-rgb),.10), transparent), rgba(var(--sk-bg-rgb),.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--sk-line);
}
body.sk .hdr-in{padding:10px 12px;gap:8px}
body.sk .hdr .drawer-open,
body.sk .hdr .lang-wrap,
body.sk .hdr-nav{display:none}      /* menu e idioma vivem no rodapé */

body.sk .brand img{height:34px}
body.sk .brand-txt{color:#fff;font-size:1.15rem}

body.sk .hdr-act{gap:9px}

/* Botão REGISTRE-SE com selo de bônus */
body.sk .hdr-act .btn-primary{
  position:relative;overflow:visible;
  background:linear-gradient(180deg,var(--sk-red-2),var(--sk-red-esc));
  color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.02em;
  padding:12px 20px;border-radius:999px;
  box-shadow:0 0 18px rgba(var(--sk-red-rgb),.55), inset 0 1px 0 rgba(255,255,255,.25);
}
body.sk .hdr-act .btn-primary::after{
  content:"🎁 100%";
  position:absolute;top:-11px;right:-6px;
  background:linear-gradient(180deg, rgba(var(--sk-gold-rgb),.85), var(--sk-gold));
  color:#4a2c00;font-size:.6rem;font-weight:900;
  padding:3px 7px;border-radius:999px;
  border:1px solid rgba(0,0,0,.25);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}

/* Botão ENTRAR contornado */
body.sk .hdr-act .btn-ghost{
  background:transparent;color:#fff;font-weight:800;font-size:.8rem;
  padding:12px 20px;border-radius:999px;
  border:1.5px solid var(--sk-red);
}

/* Pílula de saldo (usuário logado) */
body.sk .bal-pill{border-color:rgba(var(--sk-red-rgb),.5)}
body.sk .bal-add{background:var(--sk-red);color:#fff}

/* ---------------------------------------------------------------
   3. CARROSSEL COM SETAS
   --------------------------------------------------------------- */
/* ALTURA DO CARROSSEL VEM DA PRÓPRIA ARTE.
   Histórico dos dois bugs já corrigidos aqui:
     1. aspect-ratio no .slide (flex item) fazia o slide sair estreito;
     2. aspect-ratio no .carousel + object-fit:cover cortava topo e base
        da arte quando o banner não era exatamente 3/1.
   Solução: o carrossel não tem altura fixa. A imagem do banner entra no
   fluxo normal (position:static) com height:auto, então a altura do
   slide é a altura real da arte — aparece inteira, sem corte e sem
   faixa preta, qualquer que seja a proporção que você subir. */
body.sk .carousel{
  margin:12px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(var(--sk-red-rgb),.35);
  box-shadow:0 0 24px rgba(var(--sk-red-rgb),.18);
  background:var(--sk-bg-esc);
}
body.sk .carousel-track{width:100%;align-items:stretch}

body.sk .slide,
body.sk .slide-clean{
  flex:0 0 100%;width:100%;
  min-height:0;height:auto;aspect-ratio:auto;   /* anula o style.css */
  background:var(--sk-bg-esc);
}

/* Banner só-imagem: a arte define a altura. */
body.sk .slide-clean{display:block;position:relative}
body.sk .slide-clean .slide-img{
  position:static;
  width:100%;height:auto;
  object-fit:contain;
  opacity:1;display:block;
}

/* Banner COM texto: aí a arte fica de fundo e o texto por cima. */
body.sk .slide:not(.slide-clean){min-height:170px;position:relative}
body.sk .slide:not(.slide-clean) .slide-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.45;
}
body.sk .slide-body{padding:18px 16px}
body.sk .slide-body h1{font-size:1.2rem}
body.sk .slide-kicker{
  color:var(--sk-red-2);background:rgba(var(--sk-red-rgb),.14);border-color:rgba(var(--sk-red-rgb),.4);
}

/* Bolinhas na cor do tema */
body.sk .dots{bottom:9px}
body.sk .dot.on{background:var(--sk-red)}

.sk-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(18,18,22,.62);color:#fff;
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(4px);font-size:17px;line-height:1;
}
.sk-arrow:active{transform:translateY(-50%) scale(.92)}
.sk-arrow.prev{left:6px}
.sk-arrow.next{right:6px}

/* ---------------------------------------------------------------
   4. BUSCA — "ENCONTRE SEU JOGO"
   --------------------------------------------------------------- */
.sk-find{padding:18px 14px 0}
.sk-find h2{
  font-size:.9rem;font-weight:800;letter-spacing:.14em;
  color:var(--sk-gold);text-transform:uppercase;margin-bottom:12px;
}
.sk-search{
  display:flex;align-items:center;gap:12px;
  background:var(--sk-surface);border:1px solid var(--sk-line);
  border-radius:14px;padding:14px 16px;
}
.sk-search .ico{width:20px;height:20px;color:var(--sk-red);flex:none}
.sk-search input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  color:#fff;font-size:.95rem;
}
.sk-search input::placeholder{color:rgba(255,255,255,.35)}
.sk-find-hint{margin:10px 2px 0;font-size:.84rem;color:var(--sk-dim)}

/* Atalhos de categoria em cartões */
.sk-cats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:9px;
  margin-top:14px;
}
.sk-cat{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:14px 4px 12px;border-radius:14px;
  background:var(--sk-surface);border:1px solid var(--sk-line);
  text-align:center;
}
.sk-cat:active{transform:scale(.97)}
.sk-cat-ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:rgba(var(--sk-red-rgb),.12);border:1px solid rgba(var(--sk-red-rgb),.45);
  color:var(--sk-red-2);
}
.sk-cat-ico .ico{width:22px;height:22px}
.sk-cat span{font-size:.72rem;font-weight:700;line-height:1.15}

/* ---------------------------------------------------------------
   5. TOP GANHOS
   --------------------------------------------------------------- */
.sk-wins{padding:22px 0 0}
.sk-wins-tabs{
  display:flex;align-items:center;gap:14px;
  padding:0 14px 12px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.sk-wins-tabs::-webkit-scrollbar{display:none}
.sk-wins-tabs .lbl{
  display:flex;align-items:center;gap:6px;flex:none;
  font-size:.85rem;font-weight:700;color:var(--sk-dim);
}
.sk-wins-tab{
  flex:none;font-size:.88rem;font-weight:700;color:var(--sk-dim);
  padding:4px 2px;border-bottom:2px solid transparent;white-space:nowrap;
}
.sk-wins-tab.on{color:#fff;border-bottom-color:var(--sk-red)}

.sk-wins-strip{position:relative;padding-left:14px}
.sk-wins-trophy{
  position:absolute;left:14px;top:0;z-index:4;
  width:96px;height:100%;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:linear-gradient(180deg, rgba(var(--sk-gold-rgb),.14), transparent), var(--sk-bg-esc);
  border:1px solid rgba(var(--sk-gold-rgb),.55);
  font-size:.63rem;font-weight:800;letter-spacing:.06em;color:var(--sk-gold);
  text-align:center;line-height:1.2;
}
.sk-wins-trophy .emo{font-size:24px}
.sk-wins-track{
  display:flex;gap:10px;overflow-x:auto;padding:0 14px 4px 106px;
  scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity;
}
.sk-wins-track::-webkit-scrollbar{display:none}
.sk-win{
  flex:0 0 76%;max-width:290px;scroll-snap-align:start;
  display:flex;align-items:center;gap:11px;padding:10px 12px;
  border-radius:12px;background:var(--sk-surface);
  border:1px solid rgba(var(--sk-gold-rgb),.35);
}
.sk-win img{width:52px;height:52px;border-radius:9px;object-fit:cover;flex:none}
.sk-win-info{min-width:0;flex:1}
.sk-win-info strong{
  display:block;font-size:.86rem;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sk-win-info em{
  display:block;font-style:normal;font-size:.75rem;color:var(--sk-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sk-win-info b{display:block;font-size:1rem;color:var(--sk-gold);margin-top:2px}

/* ---------------------------------------------------------------
   6. VITRINES (linhas de jogos)
   --------------------------------------------------------------- */
.sk-row{padding:22px 0 0}
.sk-row-hd{
  display:flex;align-items:center;gap:10px;
  padding:0 14px 12px;
}
.sk-row-hd h2{
  display:flex;align-items:center;gap:8px;
  font-size:1.12rem;font-weight:800;line-height:1.1;
  padding-left:10px;border-left:4px solid var(--sk-red);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sk-nav{display:flex;gap:6px;flex:none}
.sk-nav button{
  width:38px;height:34px;border-radius:999px;
  display:grid;place-items:center;font-size:15px;line-height:1;
  background:var(--sk-surface);border:1px solid var(--sk-line);color:#fff;
}
.sk-nav button:active{background:var(--sk-surface-2)}
.sk-all{
  margin-left:auto;flex:none;
  padding:10px 18px;border-radius:999px;
  font-size:.75rem;font-weight:800;letter-spacing:.05em;
  background:var(--sk-surface);border:1px solid var(--sk-line);color:#fff;
}

/* Faixa destacada (ex.: +Jogados da semana) */
.sk-row.boxed{
  margin:22px 12px 0;padding:16px 0 14px;border-radius:16px;
  background:linear-gradient(180deg,rgba(var(--sk-red-rgb),.09),rgba(var(--sk-red-rgb),.02));
  border:1px solid rgba(var(--sk-red-rgb),.35);
}
.sk-row.boxed .sk-row-hd{padding:0 14px 12px;border-bottom:1px solid var(--sk-line);margin-bottom:12px}

/* Trilho e cards */
.sk-track{
  display:flex;gap:11px;overflow-x:auto;padding:0 14px 4px;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.sk-track::-webkit-scrollbar{display:none}
.sk-card{
  position:relative;flex:0 0 47%;max-width:210px;scroll-snap-align:start;
  border-radius:13px;overflow:hidden;aspect-ratio:1/1.02;
  background:var(--sk-surface-2);border:1px solid var(--sk-line);
  display:block;
}
.sk-card img{width:100%;height:100%;object-fit:cover}
.sk-card::after{           /* gradiente para o nome ficar legível */
  content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
}
.sk-card-badge{
  position:absolute;top:9px;left:9px;z-index:2;
  background:var(--sk-red);color:#fff;
  font-size:.6rem;font-weight:800;letter-spacing:.06em;
  padding:5px 10px;border-radius:999px;
}
.sk-card-name{
  position:absolute;left:11px;right:52px;bottom:11px;z-index:2;
  font-size:.82rem;font-weight:700;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sk-card-play{
  position:absolute;right:10px;bottom:10px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--sk-red);color:#fff;
  box-shadow:0 3px 12px rgba(var(--sk-red-rgb),.5);
}
.sk-card-play .ico{width:17px;height:17px}
.sk-card:active{transform:scale(.98)}

/* ---------------------------------------------------------------
   7. RODAPÉ
   --------------------------------------------------------------- */
/* O rodapé tem um brilho quente próprio no topo (igual à referência),
   que se dissolve no fundo da página. */
body.sk .ftr{
  border-top:1px solid var(--sk-line);margin-top:26px;
  background:linear-gradient(180deg,
    rgba(var(--sk-red-rgb),.26) 0%,
    rgba(var(--sk-red-rgb),.10) 30%,
    transparent 65%);
}
.sk-ftr{padding:26px 16px 20px}
.sk-ftr-brand{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}
.sk-ftr-brand img{height:38px}
.sk-ftr-brand span{font-size:1.3rem;font-weight:800}
.sk-ftr-tag{font-size:.95rem;color:var(--sk-dim);line-height:1.5;margin-bottom:26px}

.sk-ftr-lbl{
  font-size:.78rem;font-weight:800;letter-spacing:.14em;
  color:var(--sk-gold);text-transform:uppercase;margin:24px 0 12px;
}
.sk-ftr-links{display:flex;flex-direction:column;gap:12px}
.sk-ftr-links a{font-size:.95rem;color:var(--sk-dim)}
.sk-ftr-links a:active{color:#fff}

.sk-pix{margin:18px 0 4px;height:34px;width:auto;opacity:.9}

.sk-ftr-sep{border:0;border-top:1px solid var(--sk-line);margin:22px 0}

.sk-ftr-cards{display:flex;flex-direction:column;gap:12px}
.sk-ftr-card{
  padding:16px;border-radius:13px;
  background:var(--sk-surface);border:1px solid var(--sk-line);
}
.sk-ftr-card strong{display:block;font-size:.95rem;margin-bottom:6px}
.sk-ftr-card span{font-size:.88rem;color:var(--sk-dim);line-height:1.45}

.sk-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.sk-chip{
  padding:13px 20px;border-radius:999px;
  font-size:.88rem;font-weight:700;
  background:var(--sk-surface);border:1px solid var(--sk-line);
}

.sk-about{font-size:.92rem;color:var(--sk-dim);line-height:1.62}
.sk-about.clamped{
  display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden;
}
.sk-more{
  display:block;width:100%;text-align:center;margin-top:14px;
  font-size:.92rem;font-weight:700;color:#fff;
}
.sk-made{text-align:center;font-size:.95rem;margin:18px 0 4px}

.sk-seals{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px}
.sk-seals img{
  height:38px;width:auto;
  /* Os selos oficiais costumam ser pretos ou coloridos sobre fundo claro.
     Como o rodapé é escuro, um leve clareamento evita que sumam. */
  filter:brightness(1.15);
  opacity:.9;
}
.sk-seals a{display:inline-flex;align-items:center}
.sk-seals a:active img{opacity:1}
.sk-seal-txt{font-size:.85rem;opacity:.7}
.sk-seal-18{
  width:44px;height:44px;border-radius:50%;border:2px solid #fff;
  display:grid;place-items:center;font-weight:800;font-size:.85rem;
}
.sk-ftr-title{font-size:.95rem;font-weight:700;margin-top:6px}

.sk-lang{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:22px auto 0;padding:14px 22px;border-radius:12px;
  background:var(--sk-surface);border:1px solid var(--sk-line);
  font-size:.95rem;font-weight:600;width:max-content;
}

/* Botão "De volta ao topo" */
.sk-top{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(78px + env(safe-area-inset-bottom));z-index:75;
  display:flex;align-items:center;gap:9px;
  padding:12px 22px;border-radius:999px;
  background:rgba(26,26,33,.94);color:#fff;
  border:1px solid rgba(255,255,255,.14);
  font-size:.9rem;font-weight:700;backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.sk-top.on{opacity:1;pointer-events:auto}

/* ---------------------------------------------------------------
   8. BARRA INFERIOR com botão central de depósito
   --------------------------------------------------------------- */
body.sk .btm-nav{
  background:linear-gradient(180deg, rgba(var(--sk-red-rgb),.07), transparent), rgba(var(--sk-bg-rgb),.97);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--sk-line);
  /* Espaço em cima para a bolha se projetar, e alinhamento pela BASE:
     assim todos os rótulos ficam na mesma linha, com ou sem bolha. */
  padding:10px 0 max(9px, env(safe-area-inset-bottom));
  align-items:flex-end;
  overflow:visible;
}
body.sk .btm-item{
  position:relative;
  justify-content:flex-end;gap:4px;
  padding-bottom:2px;
  font-size:.66rem;color:var(--sk-dim);
}
body.sk .btm-item .ico{width:22px;height:22px}
body.sk .btm-item.on{color:#fff}

/* Item central que vira o botão flutuante.
   ERA O BUG DA BARRA: a bolha estava com position:absolute e o rótulo
   ganhava margin-top:26px para "desviar" dela. Só que essa margem
   empurrava o texto para fora da barra e o "Depósito" sumia.
   Agora a bolha fica no fluxo normal e sobe por margem negativa — ela
   se projeta para cima e o rótulo continua dentro da barra. */
body.sk .btm-item.sk-fab{color:#fff;font-weight:700}
body.sk .btm-item.sk-fab .sk-fab-circle{
  position:static;
  margin:-32px 0 3px;
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  font-size:31px;line-height:1;font-weight:400;
  background:linear-gradient(180deg,var(--sk-red-2),var(--sk-red-esc));color:#fff;
  border:4px solid var(--sk-bg);
  box-shadow:0 0 22px rgba(var(--sk-red-rgb),.6);
}
body.sk .btm-item.sk-fab span{margin-top:0}

/* ponto de "ao vivo" */
body.sk .btm-item .sk-live-dot{
  position:absolute;top:-2px;right:calc(50% - 16px);
  width:7px;height:7px;border-radius:50%;background:var(--sk-red);
}

/* ---------------------------------------------------------------
   9. Telas maiores — mantém a coluna do app centralizada
   --------------------------------------------------------------- */
@media(min-width:900px){
  .sk-topbar{
    left:50%;transform:translateX(-50%);
    width:var(--app,460px);border-radius:0 0 4px 4px;
  }
  .sk-card{flex:0 0 168px}
  .sk-win{flex:0 0 260px}
}

/* =====================================================================
   10. TEMA GLOBAL
   O header.php carrega este arquivo em TODAS as páginas e põe class="sk"
   no <body>. As regras abaixo tiram o verde herdado do style.css e
   deixam o site inteiro no vermelho da referência.
   ===================================================================== */

/* Cores base: sobrepõem o :root que o header monta a partir do admin.
   Se você quiser voltar a mandar pela tela de Aparência do admin,
   é só apagar este bloco. */
body.sk{
  /* --primary e --accent JÁ vêm do admin pelo :root do header.php.
     Antes eu forçava vermelho aqui e isso ignorava o painel — era por
     isso que mudar a cor no admin não fazia efeito nenhum. */
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.09);
}

body.sk .btn-primary{
  background:linear-gradient(180deg,var(--sk-red-2),var(--sk-red-esc));color:#fff;
  box-shadow:0 4px 16px rgba(var(--sk-red-rgb),.35);
}
body.sk .btn-ghost{background:var(--sk-surface-2);border:1px solid var(--sk-line);color:#fff}
body.sk .link-all:hover,
body.sk .drawer-links .ico{color:var(--sk-red-2)}

/* =====================================================================
   11. MENU LATERAL (drawer)
   ===================================================================== */
.sk-drawer{
  background:linear-gradient(180deg, rgba(var(--sk-red-rgb),.08), transparent 40%), var(--sk-bg);
  width:min(88vw,380px);
  padding-bottom:100px;overflow-y:auto;
}
.sk-dr-hd{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 16px 6px;
}
.sk-dr-brand{display:flex;align-items:center;gap:10px;min-width:0}
.sk-dr-brand img{height:34px;width:auto}
.sk-dr-brand span{font-size:1.05rem;font-weight:800;letter-spacing:-.01em}
.sk-dr-x{
  width:52px;height:52px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:var(--sk-surface-2);border:1px solid var(--sk-line);color:#fff;
}
.sk-dr-x .ico{width:24px;height:24px}

/* cartões coloridos */
.sk-dr-cards{display:flex;flex-direction:column;gap:11px;padding:14px 16px 4px}
.sk-dr-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-radius:13px;color:#fff;
}
.sk-dr-card:active{transform:scale(.985)}
.sk-dr-card .txt{display:flex;flex-direction:column;min-width:0}
.sk-dr-card em{font-style:normal;font-size:.85rem;opacity:.85;line-height:1.2}
.sk-dr-card strong{font-size:1.08rem;font-weight:800;line-height:1.25}
.sk-dr-card .emo{font-size:26px;flex:none}
.sk-dr-card.verde  {background:linear-gradient(100deg,#2fa36a,#3cbf7d)}
.sk-dr-card.laranja{background:linear-gradient(100deg,#e8820f,#f59b1e)}
.sk-dr-card.roxo   {background:linear-gradient(100deg,#6d28d9,#7c3aed)}

/* bloco do usuário / botões de entrar */
.sk-dr-user{
  display:flex;align-items:center;gap:11px;
  margin:16px;padding:13px 14px;border-radius:13px;
  background:var(--sk-surface);border:1px solid var(--sk-line);
}
.sk-dr-user .ico{width:34px;height:34px;padding:7px;border-radius:50%;background:var(--sk-surface-2);flex:none}
.sk-dr-user div{flex:1;min-width:0}
.sk-dr-user strong{display:block;font-size:.92rem}
.sk-dr-user span{font-size:.8rem;color:var(--sk-gold);font-weight:700}
.sk-dr-dep{
  flex:none;padding:9px 15px;border-radius:999px;
  font-size:.78rem;font-weight:800;color:#fff;
  background:linear-gradient(180deg,var(--sk-red-2),var(--sk-red-esc));
}
.sk-dr-auth{display:grid;gap:9px;padding:16px}

/* rótulos e lista de links */
.sk-dr-lbl{
  padding:22px 18px 10px;
  font-size:.74rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.42);
}
.sk-dr-nav{display:flex;flex-direction:column;padding:0 10px}
.sk-dr-nav a{
  position:relative;
  display:flex;align-items:center;gap:16px;
  padding:15px 12px;border-radius:12px;
  font-size:1rem;font-weight:600;color:rgba(255,255,255,.72);
}
.sk-dr-nav a .ico{width:23px;height:23px;flex:none;color:rgba(255,255,255,.6)}
.sk-dr-nav a:active,
.sk-dr-nav a.on{background:var(--sk-surface-2);color:#fff}
.sk-dr-nav a.on .ico{color:#fff}
.sk-dr-nav a.dourado,
.sk-dr-nav a.dourado .ico{color:var(--sk-gold)}
/* pontinho vermelho de "ao vivo" / pendência */
.sk-dr-nav a.tem-dot::before{
  content:"";position:absolute;left:26px;top:11px;
  width:8px;height:8px;border-radius:50%;background:var(--sk-red);
}
.sk-dr-fim{height:20px}

/* =====================================================================
   12. LOGIN E REGISTRO
   ===================================================================== */
body.sk .auth-page,
body.sk .auth-page-premium{background:transparent;padding:22px 14px 30px}
body.sk .auth-card,
body.sk .auth-card-premium{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--sk-line);
  border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
body.sk .auth-card h1,
body.sk .auth-card-premium .auth-heading h1{color:#fff}
body.sk .auth-kicker{color:var(--sk-red-2)}

/* campos */
body.sk .auth-card input,
body.sk .auth-input-wrap{
  background:rgba(255,255,255,.04);
  border:1px solid var(--sk-line);
  border-radius:12px;color:#fff;
}
body.sk .auth-card input:focus{
  outline:none;border-color:var(--sk-red);
  box-shadow:0 0 0 3px rgba(var(--sk-red-rgb),.16);
}
body.sk .auth-input-wrap:focus-within{
  border-color:var(--sk-red);
  box-shadow:0 0 0 3px rgba(var(--sk-red-rgb),.16);
}
body.sk .auth-input-wrap:focus-within .ico{color:var(--sk-red-2)}

/* botão principal com o brilho vermelho da referência */
body.sk .auth-card .btn-primary,
body.sk .auth-card-premium .btn-primary{
  background:linear-gradient(180deg,var(--sk-red-2),var(--sk-red-esc));
  color:#fff;border-radius:12px;padding:16px;
  font-size:1rem;font-weight:800;
  box-shadow:0 0 26px rgba(var(--sk-red-rgb),.45);
}
body.sk .auth-card a{color:var(--sk-red-2)}

/* abas Entrar / Registre-se do modal */
body.sk .tabs{
  display:flex;gap:6px;padding:5px;margin-bottom:16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--sk-line);border-radius:13px;
}
body.sk .tab{
  flex:1;padding:13px 8px;border-radius:10px;
  font-size:.95rem;font-weight:700;color:var(--sk-dim);
  background:transparent;border:0;
}
body.sk .tab.on{
  background:linear-gradient(180deg,var(--sk-red-2),var(--sk-red-esc));color:#fff;
  box-shadow:0 3px 14px rgba(var(--sk-red-rgb),.4);
}
body.sk .modal-box{
  background:linear-gradient(180deg, rgba(var(--sk-red-rgb),.09), transparent), var(--sk-bg);
  border:1px solid var(--sk-line);
}

/* =====================================================================
   13. MODAL "ESPERE, VOCÊ AINDA NÃO TERMINOU"
   ===================================================================== */
.sk-exit{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:16px}
.sk-exit[hidden]{display:none}
.sk-exit-bg{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.sk-exit-box{
  position:relative;width:100%;max-width:420px;
  max-height:92vh;overflow-y:auto;
  padding:26px 22px 24px;border-radius:20px;text-align:center;
  background:linear-gradient(180deg, rgba(var(--sk-red-rgb),.11), transparent), var(--sk-bg);
  border:1px solid rgba(var(--sk-red-rgb),.35);
  box-shadow:0 24px 70px rgba(0,0,0,.7);
}
.sk-exit-x{
  position:absolute;top:16px;right:16px;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid var(--sk-line);color:#fff;
}
.sk-exit-x .ico{width:24px;height:24px}
.sk-exit-ico{
  width:96px;height:96px;margin:6px auto 20px;border-radius:22px;
  display:grid;place-items:center;font-size:44px;
  background:radial-gradient(circle at 50% 40%, rgba(var(--sk-gold-rgb),.2), rgba(var(--sk-red-rgb),.18));
  border:1px solid rgba(var(--sk-gold-rgb),.55);
  box-shadow:0 0 28px rgba(var(--sk-gold-rgb),.28);
}
.sk-exit-box h2{font-size:1.5rem;font-weight:800;line-height:1.22;margin-bottom:12px}
.sk-exit-sub{font-size:1rem;color:var(--sk-dim);line-height:1.45;margin-bottom:22px}
.sk-exit-list{display:flex;flex-direction:column;gap:11px;margin-bottom:22px}
.sk-exit-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:13px;text-align:left;
  font-size:1rem;font-weight:700;
  background:rgba(255,255,255,.035);border:1px solid var(--sk-line);
}
.sk-exit-item .ic{
  width:44px;height:44px;flex:none;border-radius:11px;
  display:grid;place-items:center;font-size:21px;
  background:rgba(var(--sk-gold-rgb),.12);border:1px solid rgba(var(--sk-gold-rgb),.3);
}
.sk-exit-nota{font-size:1rem;font-weight:700;color:var(--sk-gold);margin-bottom:20px}
.sk-exit-cta{
  width:100%;padding:18px;border-radius:13px;
  font-size:1rem;font-weight:800;letter-spacing:.03em;color:#fff;
  background:linear-gradient(180deg,var(--sk-red-2),var(--sk-red-esc));
  box-shadow:0 0 30px rgba(var(--sk-red-rgb),.5);
}
.sk-exit-cta:active{transform:scale(.985)}

/* =====================================================================
   14. CAMPOS DE CPF E TELEFONE COM DDI
   ===================================================================== */
body.sk .fld-ddi{
  display:flex;align-items:stretch;gap:8px;
}
body.sk .fld-ddi .ddi{
  flex:none;display:flex;align-items:center;gap:6px;
  padding:0 14px;border-radius:12px;
  font-size:.92rem;font-weight:700;white-space:nowrap;
  background:rgba(255,255,255,.04);
  border:1px solid var(--sk-line);
}
body.sk .fld-ddi input{flex:1;min-width:0;margin:0}

/* linha de termos, igual à referência */
body.sk .modal-termos{
  font-size:.88rem;line-height:1.5;text-align:center;
  color:var(--sk-dim);margin:6px 0 16px;
}
body.sk .modal-termos a{color:var(--sk-red-2);font-weight:700}

/* rótulo "(opcional)" discreto */
body.sk .opt{font-style:normal;font-weight:500;color:var(--sk-dim)}

/* =====================================================================
   15. CAMPOS NO ESTILO DA REFERÊNCIA
   Rótulo DENTRO da caixa, no topo à esquerda; a caixa inteira acende em
   vermelho quando o campo está em foco. Vale para o modal (.fld) e para
   as páginas /login e /registro (.auth-card label).
   ===================================================================== */
body.sk .fld,
body.sk .auth-card label,
body.sk .auth-form-premium label{
  display:block;position:relative;
  margin-bottom:14px;padding:11px 16px 9px;
  border-radius:13px;
  background:rgba(255,255,255,.035);
  border:1.5px solid var(--sk-line);
  transition:border-color .16s, box-shadow .16s, background .16s;
}
body.sk .fld:focus-within,
body.sk .auth-card label:focus-within,
body.sk .auth-form-premium label:focus-within{
  border-color:var(--sk-red);
  background:rgba(var(--sk-red-rgb),.05);
  box-shadow:0 0 0 3px rgba(var(--sk-red-rgb),.14);
}

/* o rótulo vira legenda interna */
body.sk .fld>span,
body.sk .auth-card label{font-size:.8rem;font-weight:600;color:var(--sk-dim)}
body.sk .fld>span{margin-bottom:2px}

/* campo sem moldura própria: a moldura agora é a do rótulo */
body.sk .fld input,
body.sk .auth-card label input,
body.sk .auth-form-premium label input{
  width:100%;margin:2px 0 0;padding:5px 0 2px;
  background:none;border:0;border-radius:0;
  font-size:1.02rem;font-weight:600;color:#fff;
}
body.sk .fld input:focus,
body.sk .auth-card label input:focus,
body.sk .auth-form-premium label input:focus{
  outline:none;border:0;box-shadow:none;
}
body.sk .fld input::placeholder,
body.sk .auth-card input::placeholder{color:rgba(255,255,255,.28);font-weight:500}

/* asterisco vermelho de obrigatório */
body.sk .fld>span .req,
body.sk .auth-card label .req{color:var(--sk-red-2);font-weight:800}

/* linha com dois campos (Senha / Confirmar) */
body.sk .fld-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}

/* DDI do telefone dentro da mesma caixa */
body.sk .fld-ddi{display:flex;align-items:center;gap:10px;margin:0}
body.sk .fld-ddi .ddi{
  flex:none;padding:0;border:0;background:none;
  font-size:1rem;font-weight:700;color:#fff;
}
body.sk .fld-ddi input{flex:1;min-width:0}

/* olho de mostrar/ocultar senha */
body.sk .fld-olho{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-size:17px;line-height:1;
  color:var(--sk-dim);background:none;border:0;
}
body.sk .fld-olho:active{background:rgba(255,255,255,.06)}
body.sk .fld:has(.fld-olho) input,
body.sk .auth-card label:has(.fld-olho) input{padding-right:40px}

/* Linha do X, logo abaixo do banner.
   O position:sticky mantém o botão visível enquanto a pessoa rola o
   formulário — sem isso, num cadastro longo ela precisaria voltar ao
   topo só para conseguir fechar. */
body.sk .modal-xrow{
  position:sticky;top:0;z-index:6;
  display:flex;justify-content:flex-end;
  padding:10px 0 2px;
  pointer-events:none;            /* a linha não bloqueia cliques */
}
body.sk .modal-xrow .modal-x{pointer-events:auto}

body.sk .modal-x{
  position:static;                /* sai do canto absoluto antigo */
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(var(--sk-bg-rgb),.85);
  border:1px solid var(--sk-line);color:#fff;
  backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(0,0,0,.45);
}
body.sk .modal-x .ico{width:24px;height:24px}
body.sk .modal-box{padding-top:26px}

/* marca do modal centralizada */
body.sk .modal-brand{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:6px 0 18px;text-align:left;
}
body.sk .modal-brand img{height:42px;width:auto}
body.sk .modal-title{font-size:1.25rem;font-weight:800}
body.sk .modal-brand p{font-size:.88rem;color:var(--sk-dim)}

/* =====================================================================
   16. BARRA DO USUÁRIO LOGADO
   Depositar (com selo Pix) · saldo com atualizar · foto que abre o menu
   ===================================================================== */
body.sk .hdr-act{gap:8px}

/* botão Depositar */
.sk-dep{
  position:relative;flex:none;
  padding:13px 22px;border-radius:999px;
  font-size:.95rem;font-weight:800;color:#fff;white-space:nowrap;
  background:linear-gradient(180deg,var(--sk-red-2),var(--sk-red-esc));
  box-shadow:0 0 20px rgba(var(--sk-red-rgb),.55), inset 0 1px 0 rgba(255,255,255,.22);
}
.sk-dep:active{transform:scale(.97)}
.sk-dep-pix{
  position:absolute;top:-10px;right:-8px;
  padding:3px 9px 3px 20px;border-radius:999px;
  font-size:.62rem;font-weight:900;letter-spacing:.04em;color:#0a3b3a;
  background:#f5c542;border:1px solid rgba(0,0,0,.25);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
/* losango do Pix desenhado em CSS, sem depender de imagem */
.sk-dep-pix::before{
  content:"";position:absolute;left:5px;top:50%;
  width:11px;height:11px;margin-top:-5.5px;
  background:#32bcad;border-radius:2px;transform:rotate(45deg);
}

/* pílula de saldo */
.sk-saldo{
  display:flex;align-items:center;gap:9px;flex:none;
  padding:12px 18px;border-radius:999px;
  font-size:.95rem;font-weight:700;color:#fff;white-space:nowrap;
  background:rgba(255,255,255,.05);border:1px solid var(--sk-line);
}
.sk-saldo-ico{font-size:1.05rem;line-height:1;color:var(--sk-dim);display:inline-block}
.sk-saldo.girando .sk-saldo-ico{animation:skGira .8s linear infinite}
@keyframes skGira{to{transform:rotate(360deg)}}

/* foto / inicial do usuário */
.sk-perfil{position:relative;flex:none}
.sk-perfil-btn{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  font-size:1.15rem;font-weight:800;color:#04220f;
  background:linear-gradient(150deg,#3ddc84,#16a34a);
  border:2px solid rgba(255,255,255,.18);
}
.sk-perfil.on .sk-perfil-btn{box-shadow:0 0 0 3px rgba(61,220,132,.25)}

/* ---------- menu que abre ao clicar na foto ---------- */
.sk-perfil-menu{
  position:absolute;top:calc(100% + 12px);right:-6px;z-index:120;
  width:min(88vw,340px);
  border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg, rgba(var(--sk-red-rgb),.10), transparent), var(--sk-bg);
  border:1px solid var(--sk-line);
  box-shadow:0 22px 60px rgba(0,0,0,.66);
}
.sk-perfil-menu[hidden]{display:none}

.sk-perfil-topo{padding:14px;background:rgba(255,255,255,.04)}
.sk-perfil-nome{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-bottom:12px;
}
.sk-perfil-nome strong{
  font-size:1.02rem;font-weight:800;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sk-perfil-nome a{font-size:1.1rem;color:var(--sk-red-2);flex:none}

.sk-perfil-linha{display:flex;align-items:stretch;gap:12px}
.sk-perfil-foto{
  width:92px;height:92px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  font-size:2.1rem;font-weight:800;color:#04220f;
  background:linear-gradient(150deg,#3ddc84,#16a34a);
  border:3px solid var(--sk-red);
}
.sk-perfil-nivel{
  flex:1;min-width:0;
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:10px 12px;border-radius:11px;
  background:rgba(255,255,255,.05);
}
.sk-perfil-nivel em{font-style:normal;font-size:.8rem;color:var(--sk-dim);text-align:center}
.sk-perfil-nivel strong{
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:1.05rem;font-weight:800;
}
.sk-perfil-nivel strong small{font-size:.78rem;font-weight:600;color:var(--sk-dim)}
.sk-nivel-selo{
  width:15px;height:15px;flex:none;border-radius:3px;transform:rotate(45deg);
  border:1px solid rgba(0,0,0,.35);
}
.sk-nivel-barra{
  display:block;height:5px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.1);
}
.sk-nivel-barra span{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg, var(--sk-gold), rgba(var(--sk-gold-rgb),.6));
}
.sk-nivel-btn{
  display:block;text-align:center;margin-top:2px;
  padding:8px;border-radius:9px;
  font-size:.86rem;font-weight:700;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid var(--sk-line);
}
.sk-perfil-criada{
  margin-top:10px;padding:9px;border-radius:9px;text-align:center;
  font-size:.85rem;color:var(--sk-dim);
  background:rgba(255,255,255,.04);
}

.sk-perfil-nav{display:flex;flex-direction:column;padding:6px}
.sk-perfil-nav a{
  display:flex;align-items:center;gap:14px;
  padding:14px 12px;border-radius:10px;
  font-size:.98rem;font-weight:600;color:rgba(255,255,255,.85);
}
.sk-perfil-nav a .ico{width:21px;height:21px;flex:none;color:var(--sk-dim)}
.sk-perfil-nav a:active{background:rgba(255,255,255,.06)}
.sk-perfil-nav a.sair,
.sk-perfil-nav a.sair .ico{color:var(--sk-red-2)}

/* telas estreitas: encolhe o que dá para tudo caber numa linha */
@media(max-width:400px){
  .sk-dep{padding:12px 15px;font-size:.86rem}
  .sk-saldo{padding:11px 12px;font-size:.86rem;gap:6px}
  .sk-perfil-btn{width:42px;height:42px}
  body.sk .brand img{height:28px}
}


/* =====================================================================
   17. BOTÃO FLUTUANTE DO TELEGRAM
   ===================================================================== */
.sk-tg{
  position:fixed;z-index:840;
  right:calc(16px + env(safe-area-inset-right));
  bottom:calc(92px + env(safe-area-inset-bottom));   /* acima da barra */
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  color:#fff;background:linear-gradient(180deg,#38b0e3,#1d92c9);
  border:2px solid rgba(var(--sk-gold-rgb),.75);
  box-shadow:0 6px 20px rgba(0,0,0,.5), 0 0 18px rgba(56,176,227,.45);
}
.sk-tg svg{width:32px;height:32px;margin-right:2px}   /* o ícone é levemente torto à direita */
.sk-tg:active{transform:scale(.93)}

/* Não pode brigar com o "De volta ao topo", que também flutua.
   O topo fica centralizado, o Telegram na direita — mas em tela estreita
   os dois se encostam, então ali o Telegram sobe um pouco. */
@media(max-width:380px){
  .sk-tg{width:54px;height:54px;bottom:calc(150px + env(safe-area-inset-bottom))}
  .sk-tg svg{width:28px;height:28px}
}

/* =====================================================================
   17. CENTRAL DE SUPORTE (/suporte)
   ===================================================================== */
.sk-sup{padding:18px 14px 30px;max-width:720px;margin:0 auto}

/* --- cabeçalho --- */
.sk-sup-hero{text-align:center;margin-bottom:26px}
.sk-sup-ico{
  width:78px;height:78px;margin:0 auto 16px;border-radius:22px;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%, rgba(var(--sk-red-rgb),.3), rgba(var(--sk-red-rgb),.08));
  border:1px solid rgba(var(--sk-red-rgb),.45);
  box-shadow:0 0 30px rgba(var(--sk-red-rgb),.25);
}
.sk-sup-ico .ico{width:36px;height:36px;color:var(--sk-red-2)}
.sk-sup-hero h1{font-size:1.55rem;font-weight:800;margin-bottom:8px}
.sk-sup-hero p{font-size:.98rem;color:var(--sk-dim);line-height:1.5}

/* --- cartões de canal --- */
.sk-sup-canais{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.sk-sup-canal{
  position:relative;overflow:hidden;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"marca txt" "cta cta";
  align-items:center;gap:14px;
  padding:16px;border-radius:16px;
  background:var(--sk-surface);
  border:1px solid var(--sk-line);
  transition:transform .12s, border-color .15s;
}
.sk-sup-canal:active{transform:scale(.99)}

/* faixa colorida na borda esquerda, na cor do canal */
.sk-sup-canal::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--c);
}
.sk-sup-whatsapp{--c:#25d366}
.sk-sup-telegram{--c:#38b0e3}
.sk-sup-email{--c:var(--sk-red)}
.sk-sup-canal:hover{border-color:var(--c)}

.sk-sup-marca{
  grid-area:marca;
  width:54px;height:54px;flex:none;border-radius:14px;
  display:grid;place-items:center;color:var(--c);
  background:rgba(255,255,255,.05);
  border:1px solid var(--sk-line);
}
.sk-sup-marca svg{width:29px;height:29px}

.sk-sup-txt{grid-area:txt;display:flex;flex-direction:column;gap:3px;min-width:0}
.sk-sup-txt strong{font-size:1.08rem;font-weight:800}
.sk-sup-txt small{font-size:.86rem;color:var(--sk-dim);line-height:1.4}
.sk-sup-txt em{
  font-style:normal;font-size:.82rem;font-weight:700;color:var(--c);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.sk-sup-cta{
  grid-area:cta;margin-top:4px;
  padding:12px;border-radius:11px;text-align:center;
  font-size:.9rem;font-weight:800;color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid var(--sk-line);
}
.sk-sup-canal:hover .sk-sup-cta{background:var(--c);color:#06120a}

/* em tela larga o botão volta para a direita, na mesma linha */
@media(min-width:560px){
  .sk-sup-canal{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"marca txt cta";
  }
  .sk-sup-cta{margin-top:0;padding:12px 18px}
}

.sk-sup-vazio,
.sk-sup-fone{text-align:center;font-size:.92rem;color:var(--sk-dim);margin-bottom:8px}
.sk-sup-fone a{color:var(--sk-red-2);font-weight:700}

/* --- títulos de seção --- */
.sk-sup-tit{
  margin:32px 0 14px;
  font-size:.82rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sk-gold);
  scroll-margin-top:110px;    /* âncora não fica atrás do cabeçalho fixo */
}

/* --- FAQ --- */
.sk-faq{display:flex;flex-direction:column;gap:9px}
.sk-faq-item{
  border-radius:13px;overflow:hidden;
  background:var(--sk-surface);
  border:1px solid var(--sk-line);
}
.sk-faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px;cursor:pointer;list-style:none;
  font-size:.98rem;font-weight:700;
}
.sk-faq-item summary::-webkit-details-marker{display:none}

/* seta em CSS puro, sem depender de fonte de ícone */
.sk-faq-item summary i{
  flex:none;width:11px;height:11px;
  border-right:2px solid var(--sk-dim);
  border-bottom:2px solid var(--sk-dim);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s;
}
.sk-faq-item[open] summary i{transform:rotate(-135deg) translate(-3px,-3px)}
.sk-faq-item[open] summary{color:var(--sk-red-2)}
.sk-faq-item[open] summary i{border-color:var(--sk-red-2)}
.sk-faq-item p{
  padding:0 16px 16px;margin:0;
  font-size:.93rem;line-height:1.6;color:var(--sk-dim);
}

/* --- jogo responsável --- */
.sk-jr-topo{
  padding:15px;border-radius:13px;margin-bottom:14px;
  font-size:.95rem;line-height:1.6;
  background:rgba(var(--sk-gold-rgb),.08);
  border:1px solid rgba(var(--sk-gold-rgb),.3);
}
.sk-jr-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.sk-jr-card{
  display:flex;flex-direction:column;gap:5px;
  padding:15px;border-radius:13px;
  background:var(--sk-surface);
  border:1px solid var(--sk-line);
}
.sk-jr-card span{font-size:25px;line-height:1}
.sk-jr-card strong{font-size:.95rem;font-weight:800}
.sk-jr-card small{font-size:.83rem;line-height:1.45;color:var(--sk-dim)}

.sk-jr-alerta{
  padding:16px;border-radius:13px;
  background:rgba(var(--sk-red-rgb),.07);
  border:1px solid rgba(var(--sk-red-rgb),.32);
}
.sk-jr-alerta strong{display:block;font-size:1rem;margin-bottom:8px}
.sk-jr-alerta p{font-size:.92rem;line-height:1.6;color:var(--sk-dim);margin-bottom:10px}
.sk-jr-fecha{font-weight:600}
.sk-jr-alerta ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.sk-jr-alerta li{
  padding:11px 13px;border-radius:10px;
  font-size:.9rem;line-height:1.5;
  background:rgba(255,255,255,.04);
}
.sk-jr-alerta a{color:var(--sk-red-2);font-weight:700;text-decoration:underline}

/* =====================================================================
   18. PROGRAMA VIP (/vip)
   ===================================================================== */
.sk-vip{padding:18px 14px 30px;max-width:720px;margin:0 auto}

.sk-vip-hero{text-align:center;margin-bottom:22px}
.sk-vip-coroa{
  display:grid;place-items:center;
  width:78px;height:78px;margin:0 auto 14px;border-radius:22px;font-size:36px;
  background:radial-gradient(circle at 50% 35%, rgba(var(--sk-gold-rgb),.28), rgba(var(--sk-gold-rgb),.06));
  border:1px solid rgba(var(--sk-gold-rgb),.5);
  box-shadow:0 0 30px rgba(var(--sk-gold-rgb),.22);
}
.sk-vip-hero h1{font-size:1.55rem;font-weight:800;margin-bottom:8px}
.sk-vip-hero p{font-size:.96rem;color:var(--sk-dim);line-height:1.55}

/* --- painel do nível atual --- */
.sk-vip-atual{
  padding:17px;border-radius:16px;margin-bottom:8px;
  background:linear-gradient(180deg, rgba(var(--sk-gold-rgb),.10), transparent), var(--sk-surface);
  border:1px solid rgba(var(--sk-gold-rgb),.32);
}
.sk-vip-atual-topo{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sk-vip-emoji{
  width:58px;height:58px;flex:none;border-radius:15px;
  display:grid;place-items:center;font-size:29px;
  background:rgba(255,255,255,.05);border:1px solid var(--sk-line);
}
.sk-vip-atual-topo em{display:block;font-style:normal;font-size:.83rem;color:var(--sk-dim)}
.sk-vip-atual-topo strong{font-size:1.3rem;font-weight:800}
.sk-vip-atual-topo strong small{font-size:.85rem;font-weight:600;color:var(--sk-dim)}

.sk-vip-barra{
  height:9px;border-radius:99px;overflow:hidden;margin-bottom:10px;
  background:rgba(255,255,255,.1);
}
.sk-vip-barra span{display:block;height:100%;border-radius:99px;transition:width .4s}
.sk-vip-falta{font-size:.93rem;line-height:1.5;color:var(--sk-dim)}
.sk-vip-falta strong{color:#fff}
.sk-vip-total{margin-top:9px;font-size:.85rem;color:var(--sk-dim)}
.sk-vip-total strong{color:var(--sk-gold)}

.sk-vip-cta{
  padding:17px;border-radius:16px;margin-bottom:8px;text-align:center;
  background:var(--sk-surface);border:1px solid var(--sk-line);
}
.sk-vip-cta p{font-size:.96rem;color:var(--sk-dim);margin-bottom:13px}

.sk-vip-tit{
  margin:28px 0 13px;
  font-size:.82rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sk-gold);
}

/* --- cartões de nível --- */
.sk-vip-lista{display:flex;flex-direction:column;gap:11px}
.sk-vip-card{
  position:relative;overflow:hidden;
  padding:16px;border-radius:15px;
  background:var(--sk-surface);
  border:1px solid var(--sk-line);
}
/* faixa lateral na cor da faixa VIP */
.sk-vip-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cor);
}
.sk-vip-card.atual{
  border-color:var(--cor);
  box-shadow:0 0 0 1px var(--cor), 0 8px 26px rgba(0,0,0,.4);
}
/* nível ainda não alcançado fica apagado, mas continua legível */
.sk-vip-card.bloqueado{opacity:.62}

.sk-vip-card-hd{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.sk-vip-card-ico{
  width:48px;height:48px;flex:none;border-radius:13px;
  display:grid;place-items:center;font-size:24px;
  background:rgba(255,255,255,.05);border:1px solid var(--sk-line);
}
.sk-vip-card-hd>div{flex:1;min-width:0}
.sk-vip-card-hd strong{display:block;font-size:1.05rem;font-weight:800}
.sk-vip-card-hd strong small{font-size:.8rem;font-weight:600;color:var(--sk-dim)}
.sk-vip-card-hd em{font-style:normal;font-size:.83rem;color:var(--sk-dim)}

.sk-vip-tag{
  flex:none;padding:6px 11px;border-radius:999px;
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
}
.sk-vip-tag.atual{background:var(--cor);color:#0d0b06}
.sk-vip-tag.feito{background:rgba(255,255,255,.09);color:var(--sk-dim)}

.sk-vip-bens{list-style:none;display:flex;flex-direction:column;gap:7px}
.sk-vip-bens li{
  position:relative;padding-left:24px;
  font-size:.9rem;line-height:1.45;color:var(--sk-dim);
}
/* check desenhado em CSS */
.sk-vip-bens li::before{
  content:"";position:absolute;left:4px;top:5px;
  width:6px;height:10px;
  border-right:2px solid var(--cor);
  border-bottom:2px solid var(--cor);
  transform:rotate(45deg);
}

.sk-vip-nota{
  margin-top:20px;padding:14px;border-radius:12px;
  font-size:.86rem;line-height:1.55;color:var(--sk-dim);
  background:rgba(255,255,255,.035);border:1px solid var(--sk-line);
}
.sk-vip-nota a{color:var(--sk-red-2);font-weight:700}

/* =====================================================================
   19. CUPOM E ROLLOVER
   ===================================================================== */
.sk-cupom{
  padding:15px;border-radius:15px;margin-bottom:16px;
  background:linear-gradient(180deg, rgba(var(--sk-gold-rgb),.09), transparent), var(--sk-surface);
  border:1px solid rgba(var(--sk-gold-rgb),.3);
}
.sk-cupom-hd{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sk-cupom-ico{
  width:46px;height:46px;flex:none;border-radius:12px;
  display:grid;place-items:center;font-size:23px;
  background:rgba(var(--sk-gold-rgb),.12);
  border:1px solid rgba(var(--sk-gold-rgb),.3);
}
.sk-cupom-hd strong{display:block;font-size:1.02rem;font-weight:800}
.sk-cupom-hd em{font-style:normal;font-size:.85rem;color:var(--sk-dim)}

.sk-cupom-linha{display:flex;gap:9px}
.sk-cupom-in{
  flex:1;min-width:0;padding:14px 15px;border-radius:11px;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:1rem;font-weight:700;letter-spacing:.09em;
  color:#fff;background:rgba(0,0,0,.28);
  border:1.5px solid var(--sk-line);
}
.sk-cupom-in:focus{
  outline:none;border-color:var(--sk-gold);
  box-shadow:0 0 0 3px rgba(var(--sk-gold-rgb),.16);
}
.sk-cupom-in::placeholder{color:rgba(255,255,255,.25);letter-spacing:.06em}

.sk-cupom-btn{
  flex:none;padding:14px 22px;border-radius:11px;
  font-size:.92rem;font-weight:800;color:#0f0b02;
  background:linear-gradient(180deg, rgba(var(--sk-gold-rgb),.9), var(--sk-gold));
  box-shadow:0 3px 14px rgba(var(--sk-gold-rgb),.3);
}
.sk-cupom-btn:disabled{opacity:.6}

.sk-cupom-msg{
  margin-top:11px;padding:11px 13px;border-radius:10px;
  font-size:.9rem;line-height:1.45;
}
.sk-cupom-msg.ok{
  color:#8ef0b4;
  background:rgba(23,201,100,.1);border:1px solid rgba(23,201,100,.35);
}
.sk-cupom-msg.erro{
  color:#ffb3b8;
  background:rgba(var(--sk-red-rgb),.1);border:1px solid rgba(var(--sk-red-rgb),.4);
}

/* --- barra de rollover na tela de saque --- */
.sk-roll{
  padding:16px;border-radius:15px;margin-bottom:16px;
  background:linear-gradient(180deg, rgba(var(--sk-red-rgb),.09), transparent), var(--sk-surface);
  border:1px solid rgba(var(--sk-red-rgb),.35);
}
.sk-roll.ok{
  background:linear-gradient(180deg, rgba(23,201,100,.1), transparent), var(--sk-surface);
  border-color:rgba(23,201,100,.4);
}

.sk-roll-hd{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.sk-roll-ico{
  width:44px;height:44px;flex:none;border-radius:12px;
  display:grid;place-items:center;font-size:21px;
  background:rgba(255,255,255,.05);border:1px solid var(--sk-line);
}
.sk-roll-hd>div{flex:1;min-width:0}
.sk-roll-hd strong{display:block;font-size:1.02rem;font-weight:800}
.sk-roll-hd em{font-style:normal;font-size:.87rem;line-height:1.4;color:var(--sk-dim)}
.sk-roll-pct{flex:none;font-size:1.15rem;font-weight:800;color:var(--sk-gold)}
.sk-roll.ok .sk-roll-pct{color:#3ddc84}

.sk-roll-barra{
  height:11px;border-radius:99px;overflow:hidden;
  background:rgba(0,0,0,.35);
  border:1px solid var(--sk-line);
}
.sk-roll-barra span{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg, var(--sk-gold), rgba(var(--sk-gold-rgb),.55));
  transition:width .45s;
}
.sk-roll.ok .sk-roll-barra span{background:linear-gradient(90deg,#17c964,#3ddc84)}

.sk-roll-num{
  margin-top:8px;text-align:center;
  font-size:.9rem;font-weight:700;color:var(--sk-dim);
}
.sk-roll-itens{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:7px}
.sk-roll-itens li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-radius:9px;
  font-size:.85rem;background:rgba(255,255,255,.04);
}
.sk-roll-itens span{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700}
.sk-roll-itens em{font-style:normal;color:var(--sk-dim)}
.sk-roll-ajuda{
  margin-top:11px;font-size:.83rem;line-height:1.5;color:var(--sk-dim);
}
