:root{
  /* Avisa o navegador que o site é escuro. Sem isto, tudo que ele desenha
     sozinho sai claro sobre o fundo preto: a barra de rolagem cinza, a
     lista que abre num <select>, o seletor de data. Uma linha resolve os
     três — o resto do CSS só refina. */
  color-scheme: dark;
  --bg:#0a0a0c;
  --bg-panel:#141317;
  --bg-panel-2:#1b1a1f;
  --line:#2a2930;
  --line-soft:#201f24;
  --red:#9146ff;
  --red-2:#a970ff;
  --red-dim:#2a1350;
  --steel:#4a4a52;
  --text:#f3f2f0;
  --text-dim:#9a99a1;
  --text-faint:#67666d;
  --success:#2ecc71;
  --success-dim:rgba(46,204,113,.12);
  --amber:#e8a33d;
  /* Kanit é a fonte da arte do ClovaoRP — o nome dele já usava, então ela
     manda em tudo que é título; Barlow (estreitinha, de placar) fica no
     texto corrido. O par Space Grotesk/Manrope que estava aqui era bonito
     mas sem cara de nada: parecia template. */
  --font-d:'Kanit',sans-serif;
  --font-logo:'Kanit',sans-serif;
  --font-b:'Barlow',system-ui,sans-serif;
  /* Oxanium no lugar da fonte de código: chip, contador, ticket e HUD
     tinham cara de terminal, o que deixava o site com jeito de template.
     Ela é geométrica e angulosa, combina com CS2 e não é a monoespaçada
     que todo mundo usa. Não é monoespaçada de verdade, então onde o
     número precisa ficar alinhado eu peço tabular-nums. */
  --font-m:'Oxanium',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
/* números do mesmo tamanho onde eles mudam sozinhos (contador, cronômetro,
   tickets) — senão o texto "pula" a cada segundo */
.mono,[class*="-num"],.sd-info .valor,.stats .num,.tw-card-tix{font-variant-numeric:tabular-nums;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-b);
  line-height:1.6;
  min-height:100vh;
  background-image:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(145,70,255,.15), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 1px, transparent 3px);
}
/* moldura FIXA de armas/facas nas laterais — a mesma arte do hero, presa
   na viewport (fica no lugar ao rolar). Um degradê horizontal deixa o
   centro escuro (oculta o resto da arte e mantém o conteúdo legível) e
   revela só as skins nas pontas esquerda/direita, preenchendo o vazio
   dos lados ao descer a página. */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 60% at 0% 30%, rgba(145,70,255,.12), transparent 60%),
    radial-gradient(58% 60% at 100% 30%, rgba(145,70,255,.10), transparent 60%),
    radial-gradient(90% 55% at 50% 120%, rgba(120,45,232,.08), transparent 70%);
  opacity:.95;
}
::selection{background:var(--red);color:#fff;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;}
img{max-width:100%;display:block;}
h1,h2,h3{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.02em;}
.mono{font-family:var(--font-m);}
.hidden{display:none !important;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ---- card: retângulo arredondado com barra roxa no topo (assinatura
   própria do ClovaoRP — acende no hover) ---- */
.cut-card{
  position:relative;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cut-card:hover{
  transform:translateY(-4px);
  border-color:rgba(145,70,255,.5);
  box-shadow:0 16px 36px -14px rgba(145,70,255,.35);
}
.cut-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:4;
  background:linear-gradient(90deg, transparent, var(--red), transparent);
  opacity:.35;transition:opacity .18s ease;pointer-events:none;
}
.cut-card:hover::before{opacity:1;}
.cut-card.glow{border-color:rgba(145,70,255,.35);box-shadow:0 0 0 1px rgba(145,70,255,.08), 0 12px 32px -12px rgba(145,70,255,.25);}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-m);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:2px;
}
.badge.ativo{background:var(--success-dim);color:var(--success);border:1px solid rgba(46,204,113,.3);}
.badge.encerrado{background:rgba(154,153,161,.1);color:var(--text-dim);border:1px solid var(--line);}
.badge.dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;}

.btn{
  font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  font-size:.92rem;padding:12px 26px;border:none;border-radius:9px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{background:var(--red);color:#fff;}
.btn-primary:hover{background:var(--red-2);box-shadow:0 8px 24px -8px rgba(145,70,255,.6);transform:translateY(-1px);}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--line);}
.btn-outline:hover{border-color:var(--red);color:var(--red-2);}
.btn-sm{padding:8px 16px;font-size:.78rem;}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none !important;box-shadow:none !important;}
.btn-block{width:100%;}

/* ---- topbar ---- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(10,10,12,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1180px;margin:0 auto;gap:12px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{width:34px;height:34px;filter:drop-shadow(0 0 8px rgba(145,70,255,.5));}
.brand span{font-family:var(--font-logo);font-weight:700;font-size:1.25rem;letter-spacing:.03em;}
nav.mainnav{display:flex;gap:4px;}
nav.mainnav button, nav.mainnav a{
  background:transparent;border:none;color:var(--text-dim);font-family:var(--font-d);font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;font-size:.85rem;padding:9px 14px;border-bottom:2px solid transparent;display:inline-block;
}
nav.mainnav button:hover, nav.mainnav a:hover{color:var(--text);}
nav.mainnav button.active{color:var(--red-2);border-bottom-color:var(--red);}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);padding:8px 10px;}
.topbar-right{display:flex;align-items:center;gap:14px;}
.social-icons{display:flex;gap:12px;align-items:center;}
.social-icons a{color:var(--text-dim);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);}
.social-icons a:hover{color:var(--red-2);border-color:var(--red);}
.social-icons svg{width:16px;height:16px;fill:currentColor;}
.social-icons a.ext-btn{width:auto;gap:6px;padding:0 12px;border-color:var(--red);color:var(--red-2);background:rgba(145,70,255,.08);}
.social-icons a.ext-btn span{font-family:var(--font-m);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;}
.social-icons a.ext-btn:hover{background:var(--red);color:#fff;}
.footer-ext-link{color:var(--red-2)!important;font-weight:700;}
.footer-ext-link:hover{color:var(--red)!important;}

.account-pill{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:5px 12px 5px 5px;font-family:var(--font-m);font-size:.78rem;color:var(--text-dim);}
.account-pill img{width:22px;height:22px;border-radius:50%;}
.account-pill button{background:none;border:none;color:var(--text-faint);font-size:.72rem;text-decoration:underline;}
/* selo de admin: a conta do Google que administra o site vê a porta do
   painel aqui no topo, em vez de um link solto no rodapé */
.account-pill.is-admin{border-color:var(--red-dim);}
.admin-badge{display:inline-flex;align-items:center;gap:4px;background:var(--red-dim);color:var(--red-2);border:1px solid var(--red);border-radius:6px;padding:3px 9px;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transition:background .15s ease,color .15s ease;}
.admin-badge:hover{background:var(--red);color:#fff;}
.btn-google{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#1f1f1f;font-family:var(--font-b);font-weight:600;font-size:.82rem;padding:9px 16px;border:none;}
.btn-google:hover{background:#f1f1f1;}
.btn-google svg{width:16px;height:16px;}

/* ---- botão de login do Google ------------------------------------------
   O botão vem de dentro de um iframe do accounts.google.com, e esse iframe
   parou de obedecer o theme:'filled_black' que a gente pedia — agora ele
   desenha SEMPRE o retângulo branco, que na barra preta acende feito
   lanterna. É outro domínio: nenhum CSS daqui entra lá.

   Então o botão que aparece é este (.gsi-skin) e o do Google fica por cima,
   invisível. Quem define o tamanho é o .gsi-real (o de verdade, no fluxo);
   a capa é absoluta em cima dele e não intercepta clique nenhum, então o
   clique cai no botão do Google como sempre caiu. Se um dia o Google voltar
   a respeitar o tema, dá pra tirar isto daqui e o login continua igual. */
.gsi-wrap{position:relative;display:inline-flex;min-width:124px;min-height:32px;}
.gsi-real{opacity:0;}
.gsi-skin{position:absolute;inset:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line);border-radius:999px;background:var(--bg-panel-2);
  color:var(--text);font-family:var(--font-b);font-weight:600;font-size:.78rem;
  white-space:nowrap;transition:border-color .2s ease,background .2s ease;}
.gsi-skin svg{width:16px;height:16px;flex:0 0 auto;}
.gsi-wrap:hover .gsi-skin{border-color:var(--red);background:var(--bg-panel);}


/* ---- topbar: espaço pra respirar ---------------------------------------
   O que apertava: com a conta logada, o cartão (foto + nome + selo de admin
   + Sair) ocupa uns 240px e entra numa barra que já tem a marca, o menu,
   os ícones de rede e o botão EXTENSÃO. Sobrava tão pouco que o NOME DO
   SITE era o primeiro a ser cortado — virava "CLOVAO…".

   A regra agora: a marca nunca encolhe (é a identidade do site, não pode
   ser a primeira a ceder), e quem sai de cena é o que está repetido em
   outro lugar — os ícones de rede soltos, que continuam inteiros no rodapé
   e (na home) embaixo do título. */
.brand{flex:0 0 auto;}
/* logado, os ícones soltos saem do topo em QUALQUER largura: é exatamente o
   espaço que o cartão da conta passa a ocupar. A classe entra e sai no
   renderAccountWidget (auth.js). */
body.logado .topbar .social-icons a:not(.ext-btn){display:none;}
/* nome comprido não empurra o resto da barra */
.account-pill span{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* O topo tinha ficado o único lugar quadrado do site depois que os cantos
   chanfrados saíram. */
.social-icons a{border-radius:8px;}
.account-pill{border-radius:10px;}
.nav-toggle{border-radius:8px;}
.btn-google{border-radius:9px;}

/* Faixa do meio (tablet/notebook pequeno): aqui o menu ainda é horizontal e
   o cartão da conta já existe. Sem isto o menu era espremido e as abas
   ficavam cortadas — o botão EXTENSÃO vira só o ícone (o link é o mesmo). */
@media (max-width:1000px){
  .topbar .social-icons a.ext-btn{width:32px;padding:0;}
  .topbar .social-icons a.ext-btn span{display:none;}
}
/* No celular sobra pouca largura pra tudo: fica a foto no cartão da conta
   (o nome sai) e, na marca, só o logo. O nome escrito do site cabia num
   nome curto e estourava a barra num comprido — "WARRIORSPEEK" sozinho leva
   160px. Com o logo, vale pra qualquer nome e ninguém vê "WARRIORSPE…". */
@media (max-width:600px){
  .account-pill span{display:none;}
  .account-pill{padding-right:8px;}
  .brand span{display:none;}
}

/* ---- topbar: a barra não pode estourar a largura da tela ----------------
   Entre ~860px e ~1100px de janela o conjunto (logo + menu + redes +
   EXTENSÃO + botão do Google) não cabia — mas o breakpoint de 860px ainda
   não tinha escondido nada. A página ficava com rolagem horizontal e,
   quando o iframe do botão do Google terminava de carregar (~1s), o
   navegador arrastava a página pro lado pra trazer o iframe pra vista:
   o botão EXTENSÃO "sumia", cortado na esquerda. Não era o navegador —
   era a largura da janela.
   Correção: deixar os itens encolherem e, antes do aperto, tirar de cena
   só os ícones de rede social soltos. EXTENSÃO e login continuam. */
.topbar-inner{min-width:0;}
.topbar-inner > *{min-width:0;}
.brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topbar-right{flex:0 0 auto;}
/* o botão do Google é um iframe que o próprio script dele redesenha depois
   de carregar; sem isto essa remedida volta a empurrar a topbar */
#accountWidget{flex:0 0 auto;display:flex;align-items:center;}

@media (max-width:1100px){
  .topbar-inner{gap:8px;padding:14px 16px;}
  nav.mainnav{gap:0;}
  nav.mainnav button, nav.mainnav a{padding:9px 10px;}
  .topbar .social-icons{gap:0;}
  .topbar .social-icons a:not(.ext-btn){display:none;}
}

@media (max-width:860px){
  nav.mainnav{position:fixed;top:63px;left:0;right:0;background:var(--bg-panel);border-bottom:1px solid var(--line);flex-direction:column;padding:8px;display:none;z-index:39;}
  nav.mainnav.open{display:flex;}
  nav.mainnav button, nav.mainnav a{text-align:left;border-bottom:none;border-left:2px solid transparent;}
  nav.mainnav button.active{border-left-color:var(--red);background:rgba(145,70,255,.06);}
  .nav-toggle{display:block;}
  .topbar .social-icons{display:none;}
}

/* ---- hero ---- */
.hero{
  padding:48px 24px 40px;text-align:center;position:relative;overflow:hidden;
  /* proporção igual à da imagem (1727x963) — assim o cover mostra ela
     inteira, sem borda e sem cortar as armas/facas. min-height segura o
     conteúdo em telas largas; flex centraliza tudo dentro. */
  aspect-ratio:1745 / 931;
  min-height:560px;
  /* max-width segura o efeito colateral da dupla aspect-ratio + min-height:
     numa caixa flex, quando a altura mínima é maior que a altura que a
     proporção daria, o navegador faz o contrário — ESTICA A LARGURA pra
     manter a proporção (560px × 1,87 = 1050px). Abaixo de ~1050px de tela o
     hero ficava mais largo que a página e o site inteiro rolava pro lado. */
  max-width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background-color:var(--bg);
  /* a arte do hero (gorila realista à esquerda, mascote à direita) é o fundo
     da PRÓPRIA seção — mesma proporção da imagem (1745x931), então o cover
     mostra ela inteira com os gorilas emoldurando as laterais. Um degradê
     radial escurece o centro pra manter o texto legível e desvanece a arte
     na cor da página embaixo. Tudo em `scroll` (fica preso na caixa do hero,
     não na viewport) pra não desenquadrar ao rolar. */
  background-image:
    radial-gradient(ellipse 60% 75% at 50% 45%, rgba(10,10,12,.72), rgba(10,10,12,.35) 60%, transparent 85%),
    linear-gradient(180deg, rgba(10,10,12,0) 74%, rgba(10,10,12,.65) 92%, var(--bg) 100%),
    url('HERO.webp');
  background-size:cover, cover, cover;
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-position:center, center, center;
  background-attachment:scroll, scroll, scroll;
}
/* No celular o fundo `fixed` do hero desenquadra: o iOS Safari ignora
   `fixed` e o Android dimensiona a imagem pela viewport inteira (tela
   alta e estreita), ampliando a arte e cortando as skins das pontas.
   No mobile volta pra `scroll` (dimensiona pela caixa do próprio hero) e
   solta a proporção/altura fixa, pra a arte enquadrar de forma proporcional
   em vez de virar uma faixa estreita e alta com zoom. */
@media(max-width:860px){
  .hero{
    /* no celular a arte do hero (moldura de armas/facas) desenquadra e vira
       um "banner" atrás do texto — então tira a imagem e deixa só o fundo. */
    background-image:none;
    aspect-ratio:auto;
    min-height:auto;
    padding:44px 20px 40px;
  }
}
.hero-logo{width:120px;height:120px;margin:0 auto 22px;filter:drop-shadow(0 0 30px rgba(145,70,255,.45));}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:.75rem;letter-spacing:.15em;
  color:var(--red-2);text-transform:uppercase;margin-bottom:18px;
}
.eyebrow::before,.eyebrow::after{content:'';width:24px;height:1px;background:var(--red-dim);}
.hero h1{font-size:clamp(2.6rem,7vw,4.6rem);font-weight:700;line-height:1;margin-bottom:16px;}
/* a descrição é a bio da Twitch dele, bem mais longa que uma tagline de uma
   linha — daí a caixa mais larga e a fonte um tico menor, pra não virar uma
   coluna alta e estreita empurrando o resto da home pra baixo */
.hero p.sub{color:var(--text-dim);max-width:680px;margin:0 auto 30px;font-size:1rem;line-height:1.65;}
.hero p.sub strong{color:var(--text);font-weight:700;}
.live-badge{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:.78rem;letter-spacing:.06em;
  padding:7px 16px;border:1px solid var(--line);margin-bottom:28px;text-transform:uppercase;
}
.live-badge.on{color:var(--success);border-color:rgba(46,204,113,.35);}
.live-badge.on .liv-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success);animation:pulse 1.4s infinite;}
.live-badge.off{color:var(--text-faint);}
.live-badge.off .liv-dot{width:8px;height:8px;border-radius:50%;background:var(--text-faint);}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.live-embed{position:relative;width:100%;max-width:840px;flex:none;margin:0 auto 30px;border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:0 0 40px rgba(145,70,255,.18);}
.live-embed::before{content:'';display:block;padding-top:56.25%;}
.live-embed.hidden{display:none;}
.live-embed iframe{position:absolute;inset:0;width:100%;height:100%;display:block;border:0;}
.live-embed-off{display:flex;justify-content:center;}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:34px;}
.hero .social-icons{justify-content:center;flex-wrap:wrap;}
/* ---- hero com a live aberta ----
   A altura do hero é travada pela proporção da arte de fundo (aspect-ratio),
   e o player da Twitch (16:9, até 840px) não cabe nessa caixa: o conteúdo
   estourava e o `overflow:hidden` cortava justamente o fim — os botões e os
   ícones das redes ficavam espremidos na borda, encostando na seção de baixo.
   Com a live no ar o hero passa a ter a altura do que tem dentro; a arte
   continua de fundo (cover), só um pouco mais alta. */
.hero.com-live{
  aspect-ratio:auto;
  min-height:auto;
  padding-top:56px;
  padding-bottom:64px;
}
.hero.com-live .social-icons{margin-top:6px;}

/* ---- account summary ---- */
.account-summary{max-width:480px;margin:0 auto 10px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.account-summary .txt{font-size:.85rem;color:var(--text-dim);}
.account-summary strong{color:var(--red-2);}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:720px;margin:0 auto;}
.stats div{background:var(--bg-panel);padding:22px 10px;text-align:center;}
.stats .num{font-family:var(--font-m);font-size:1.8rem;font-weight:700;color:var(--red-2);}
.stats .lbl{font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-top:4px;}

/* ---- sections ---- */
section.block{padding:64px 24px;}
.block-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:32px;gap:8px;}
.block-head h2{font-size:clamp(1.5rem,3vw,2.1rem);position:relative;padding-bottom:16px;}
/* A linha é um fio de 1px bem largo que se apaga nas pontas — sem começo
   nem fim visível, então não fica aquela "barrinha" solta no meio do nada.
   O brilho não está na linha (box-shadow vira tubo de neon e briga com o
   fundo texturizado): é um halo largo e fraco POR BAIXO dela, como luz
   vazando no fundo. */
.block-head h2::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:min(560px, 80vw);height:1px;
  background:linear-gradient(90deg,
    transparent 0%, rgba(145,70,255,.25) 20%, var(--red) 42%,
    var(--red-2) 50%, var(--red) 58%, rgba(145,70,255,.25) 80%, transparent 100%);
}
.block-head h2::before{
  content:'';position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);
  width:min(300px, 60vw);height:16px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(169,112,255,.30), rgba(145,70,255,.12) 45%, transparent 72%);
  filter:blur(5px);
}
.block-head p{color:var(--text-dim);font-size:.92rem;margin-top:4px;}
.block-head .link{color:var(--red-2);font-family:var(--font-m);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--red-dim);}
/* flex em vez de grid de colunas fixas — assim, com poucos cards
   (1 ou 2), eles ficam centralizados em vez de colados à esquerda
   com um vão vazio do lado. */
.grid3{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;}
.grid3 > *{flex:1 1 440px;max-width:540px;}
.grid4{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;}
.grid4 > *{flex:1 1 260px;max-width:330px;}
@media(max-width:600px){.stats{grid-template-columns:1fr;}}

.empty-state{padding:40px 20px;text-align:center;color:var(--text-faint);border:1px dashed var(--line);font-size:.9rem;}

/* ---- prize icon (svg facet placeholder) ---- */
.prize-icon{width:100%;height:280px;display:flex;align-items:center;justify-content:center;background:
   linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel));border-bottom:1px solid var(--line);overflow:hidden;position:relative;}
.prize-icon svg{width:52px;height:52px;}
.prize-icon .pi-blur{position:absolute;inset:-20%;background-size:cover;background-position:center;filter:blur(20px) brightness(.55);}
/* imagem preenche toda a área do topo do card (cover), sem sobrar vão
   vazio nas laterais — igual aos banners largos do site de referência. */
.prize-icon .pi-fg{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;}

/* ---- sorteio card ---- */
.sorteio-card{display:flex;flex-direction:column;}

/* sorteio e brinde herdam o card arredondado + barra roxa do topo do .cut-card */

/* ---- brilho neon que acompanha o mouse pela borda do card ----
   Um <div class="card-glow"> dentro do card (ver app.js) + JS que atualiza
   --mx/--my com a posição do mouse relativa ao card. O gradiente radial
   fica só visível bem fino na borda (mask "vaza" o miolo). */
.card-glow{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;
  opacity:0;transition:opacity .25s ease;
  padding:2px;box-sizing:border-box;
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%), var(--red-2), transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  filter:drop-shadow(0 0 6px var(--red-2));
}
.cut-card:hover .card-glow, .vid-card:hover .card-glow{opacity:1;}
.sc-body{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column;gap:10px;}
.sc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.sc-cat{font-family:var(--font-m);font-size:.68rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;}
.sc-title{font-family:var(--font-d);font-size:1.2rem;font-weight:700;line-height:1.15;}
.sc-prize{color:var(--text-dim);font-size:.88rem;}
.sc-value{font-family:var(--font-m);color:var(--amber);font-size:.9rem;}
.sc-meta{font-size:.78rem;color:var(--text-faint);margin-top:auto;padding-top:6px;border-top:1px solid var(--line-soft);}
.sc-winner{font-family:var(--font-m);color:var(--success);font-size:.85rem;}

/* ---- sorteio com vários prêmios (1º, 2º, 3º) ---- */
.sc-premios{list-style:none;display:flex;flex-direction:column;gap:4px;margin:2px 0 0;}
.sc-premios li{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:.86rem;color:var(--text-dim);counter-increment:premio;}
.sc-premios li::before{content:counter(premio) 'º';font-family:var(--font-m);font-size:.7rem;font-weight:700;color:var(--red-2);min-width:18px;}
.sc-premios li span{flex:1;color:var(--text);}
.sc-premios li em{font-style:normal;font-family:var(--font-m);color:var(--amber);font-size:.8rem;white-space:nowrap;}
.sc-premios{counter-reset:premio;}
.sc-vencedores{list-style:none;display:flex;flex-direction:column;gap:4px;margin:2px 0 0;}
.sc-vencedores li{display:flex;align-items:baseline;gap:7px;font-family:var(--font-m);font-size:.82rem;color:var(--success);}
.sc-vencedores .pos{color:var(--red-2);font-weight:700;}
.sc-vencedores em{font-style:normal;color:var(--text-faint);font-size:.76rem;}
/* lista de ganhadores dentro do painel */
.vencedores-lista{list-style:none;display:flex;flex-direction:column;gap:6px;margin:4px 0 0;}
.vencedores-lista li{display:flex;align-items:baseline;gap:9px;font-family:var(--font-d);font-size:1rem;color:var(--red-2);}
.vencedores-lista .pos{font-family:var(--font-m);font-size:.78rem;font-weight:700;color:var(--text-faint);min-width:22px;}
.vencedores-lista .premio{font-family:var(--font-b);font-size:.82rem;color:var(--text-dim);}

/* ---- ficha do participante (clicar no card da grade) ---- */
.sd-part.clicavel{cursor:pointer;}
.sd-part.clicavel:hover{border-color:var(--red);}
.sd-part .foto{position:relative;}
/* selo "3×" = pessoa que mandou vários formulários e foi somada num perfil só */
.pt-envios-selo{position:absolute;right:-4px;bottom:-4px;background:var(--red);color:#fff;font-family:var(--font-m);font-size:.62rem;font-weight:700;line-height:1;padding:3px 5px;border-radius:6px;border:2px solid var(--bg-panel);}
.sd-info .sd-sub{display:block;font-family:var(--font-m);font-size:.68rem;font-weight:500;color:var(--text-faint);letter-spacing:.02em;}
.pt-resumo{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.pt-resumo>div{background:var(--bg-panel-2);border:1px solid var(--line-soft);border-radius:8px;padding:10px;text-align:center;}
.pt-resumo h5{font-family:var(--font-m);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:4px;}
.pt-resumo strong{font-family:var(--font-d);font-size:1.15rem;color:var(--red-2);}
.pt-dados{display:flex;flex-direction:column;gap:3px;font-size:.84rem;color:var(--text-dim);margin-bottom:16px;word-break:break-all;}
.pt-dados strong{color:var(--text);font-weight:600;}
.pt-titulo{font-family:var(--font-d);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);margin-bottom:8px;}
.pt-envios{display:flex;flex-direction:column;gap:12px;}
.pt-envio{border:1px solid var(--line-soft);border-radius:8px;padding:10px 12px;background:var(--bg-panel-2);}
.pt-envio-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.pt-envio-num{font-family:var(--font-m);font-size:.7rem;font-weight:700;color:var(--text-faint);}
.pt-envio-topo strong{font-family:var(--font-m);color:var(--amber);}
.pt-envio-tix{font-family:var(--font-m);font-size:.74rem;color:var(--red-2);}
.pt-envio-data{font-size:.72rem;color:var(--text-faint);flex:1;min-width:90px;}
.pt-print{max-width:100%;margin-top:8px;border:1px solid var(--line-soft);border-radius:6px;}
.pt-sem-print{display:block;margin-top:6px;font-size:.76rem;color:var(--text-faint);font-style:italic;}

/* ---- um bloco de roleta por prêmio, empilhados no board do sorteio ---- */
.sd-roleta h4{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.sd-roleta-pos{font-family:var(--font-m);font-size:.8rem;font-weight:700;color:var(--red-2);background:var(--red-dim);border:1px solid var(--red);border-radius:6px;padding:2px 8px;}
.sd-roleta-valor{font-family:var(--font-m);font-size:.84rem;font-weight:600;color:var(--amber);text-transform:none;letter-spacing:0;}
/* prêmio já decidido: some a roleta e fica só a faixa do ganhador */
.sd-ganhador{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--bg-panel-2);border:1px solid var(--line-soft);border-left:3px solid var(--success);border-radius:8px;padding:12px 14px;margin-top:10px;}
.sd-ganhador .tag{font-family:var(--font-m);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--success);}
.sd-ganhador strong{font-family:var(--font-d);font-size:1.1rem;color:var(--text);flex:1;min-width:120px;}

/* ---- editor de prêmios (form de criar/editar sorteio) ---- */
.premio-linha{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.premio-linha .premio-num{font-family:var(--font-m);font-size:.78rem;font-weight:700;color:var(--red-2);min-width:24px;}
.premio-linha .premio-nome{flex:2;}
.premio-linha .premio-valor{flex:1;}
.premio-linha .premio-remover{padding:6px 12px;line-height:1;}
@media(max-width:600px){
  .premio-linha{flex-wrap:wrap;}
  .premio-linha .premio-nome,.premio-linha .premio-valor{flex:1 1 100%;}
}
/* faixa com o prêmio da vez, no topo da roleta */
.roleta-premio{display:flex;align-items:baseline;justify-content:center;gap:10px;padding:0 24px 10px;}
.roleta-premio strong{font-family:var(--font-d);text-transform:uppercase;letter-spacing:.04em;color:var(--text);}
.roleta-premio span{font-family:var(--font-m);color:var(--amber);font-size:.88rem;}
.winner-premio{font-family:var(--font-m);font-size:.8rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;}
.winner-premio strong{color:var(--amber);}

/* ---- countdown (timer opcional do sorteio) ---- */
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:2px 0 2px;}
.countdown .cd-box{background:var(--bg-panel-2);border:1px solid var(--line);padding:8px 4px;text-align:center;}
.countdown .cd-num{font-family:var(--font-m);font-size:1.25rem;font-weight:700;color:var(--text);line-height:1;}
.countdown .cd-lbl{font-size:.6rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;margin-top:4px;}
.countdown.ended{grid-template-columns:1fr;}
.countdown.ended .cd-box{color:var(--text-dim);font-family:var(--font-m);font-size:.82rem;}

/* ---- card da rodada de brinde ---- */
.brinde-card{display:flex;flex-direction:column;}
.bc-body{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column;gap:10px;}
.bc-title{font-family:var(--font-d);font-weight:700;font-size:1.15rem;}
.bc-desc{color:var(--text-dim);font-size:.85rem;}
.bc-cupom{font-family:var(--font-m);color:var(--red-2);font-size:.9rem;}
.bc-cupom strong{letter-spacing:.06em;}
.bc-meta{margin-top:auto;padding-top:8px;font-family:var(--font-m);font-size:.72rem;color:var(--text-faint);}

/* ---- página de brindes: os 3 passos ---- */
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
.passo{position:relative;background:var(--bg-panel);border:1px solid var(--line);border-radius:14px;padding:24px 20px 20px;}
.passo-num{position:absolute;top:-14px;left:20px;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--font-d);font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 14px rgba(145,70,255,.45);}
.passo strong{display:block;font-family:var(--font-d);text-transform:uppercase;font-size:.95rem;letter-spacing:.02em;margin-bottom:6px;}
.passo p{color:var(--text-dim);font-size:.86rem;}
.passo-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;}

/* ---- calculadora + tabela de brindes ----
   Lado a lado no desktop, com a calculadora presa na tela (sticky) enquanto
   a tabela de 32 linhas rola do lado. No celular vira uma coluna só. */
.brindes-wrap{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:20px;align-items:start;}
.brinde-calc{padding:24px 22px;position:sticky;top:90px;}
.brinde-calc label{display:block;font-family:var(--font-d);font-weight:600;text-transform:uppercase;font-size:.82rem;letter-spacing:.03em;margin-bottom:10px;}
.calc-row{display:flex;align-items:center;gap:10px;}
.calc-cifra{font-family:var(--font-m);font-size:1.1rem;font-weight:700;color:var(--text-faint);}
.calc-row input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);color:var(--text);font-family:var(--font-m);font-size:1.2rem;font-weight:700;padding:12px 14px;}
.calc-row input:focus{outline:none;border-color:var(--red);}
.calc-out{margin-top:14px;padding:12px 14px;border:1px dashed var(--line);color:var(--text-faint);font-family:var(--font-m);font-size:.9rem;text-align:center;}
.calc-out.sim{border-style:solid;border-color:rgba(46,204,113,.35);background:var(--success-dim);color:var(--success);font-weight:700;}
.calc-out.nao{border-style:solid;border-color:var(--line);color:var(--text-dim);}

.brindes-tabela{padding:8px 8px 0;overflow:hidden;}
.bt-scroll{max-height:520px;overflow-y:auto;}
.brindes-tabela table{width:100%;border-collapse:collapse;font-size:.9rem;}
.brindes-tabela th{position:sticky;top:0;z-index:1;background:var(--bg-panel-2);font-family:var(--font-d);text-transform:uppercase;font-size:.74rem;letter-spacing:.05em;color:var(--text-dim);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);}
.brindes-tabela td{padding:10px 14px;border-bottom:1px solid var(--line-soft);font-family:var(--font-m);color:var(--text-dim);}
.brindes-tabela tbody tr:hover td{background:rgba(145,70,255,.05);color:var(--text);}
.brindes-tabela td strong{color:var(--red-2);}
.brindes-tabela tr.bt-nota td{background:var(--bg);color:var(--amber);font-family:var(--font-b);font-size:.82rem;font-style:italic;}
.brindes-tabela tr.bt-nota:hover td{background:var(--bg);}
.bt-acima{padding:14px;color:var(--text-dim);font-size:.85rem;text-align:center;border-top:1px solid var(--line);}

/* várias miniaturas na área de print, quando a pessoa manda mais de um */
.dz-previews{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:10px;}
.dz-previews img.preview{max-height:80px;margin:0;}

/* No celular a calculadora deixa de ser barra lateral: vira o primeiro
   bloco, em cima da tabela, e sai do sticky (que ali só roubava altura). */
@media(max-width:860px){
  .brindes-wrap{grid-template-columns:1fr;}
  .brinde-calc{position:static;}
  .bt-scroll{max-height:none;}
}

/* ---- lista de formulários de brinde (admin) ---- */
.brinde-barra{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.admin-row.entregue{opacity:.62;border-color:var(--line-soft);}

/* ---- faixa de profits (iframe do livedrop) ----
   O widget é de outro serviço e vem com o visual dele; aqui só entra a
   moldura, pra ele pousar dentro da mesma linguagem dos cards. O teto de
   largura é a conta de 3 cards do widget + os vãos, senão em monitor
   grande ele estica e os cards ficam perdidos no meio do vazio. */
.profits-frame{border:1px solid var(--line);border-radius:14px;background:#121212;overflow:hidden;}
/* 210px = os 208 que a lista de drops ocupa lá dentro (medido no desktop e
   no celular; o que muda é quantos cards cabem na largura, não a altura) */
.profits-frame iframe{display:block;width:100%;height:210px;border:0;
  /* O widget de drops vem de outro domínio, com fundo transparente e sem
     declarar color-scheme (ou seja, "claro"). Se o iframe disser que é
     escuro, os dois não batem e o navegador pinta um fundo BRANCO opaco
     atrás dos cards. Com "normal" os dois batem, o fundo fica
     transparente e aparece o escuro do site por trás. */
  color-scheme:normal;}

/* ---- video card ---- */
.vid-card{aspect-ratio:9/13;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--bg-panel-2);border:1px solid var(--line);border-radius:14px;position:relative;overflow:hidden;transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;}
.vid-card .play{width:44px;height:44px;border-radius:50%;border:1px solid var(--red);display:flex;align-items:center;justify-content:center;color:var(--red-2);}
.vid-card .play svg{width:16px;height:16px;fill:currentColor;margin-left:2px;}
.vid-card span{font-family:var(--font-m);font-size:.72rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;}
.vid-card:hover{border-color:var(--red);transform:translateY(-4px);box-shadow:0 16px 36px -14px rgba(145,70,255,.35);}
.vid-card.has-thumb{background-size:cover;background-position:center;justify-content:flex-end;align-items:flex-start;padding:12px;box-sizing:border-box;}
.vid-card.has-thumb span{font-family:var(--font-b);font-weight:600;color:#fff;text-transform:none;letter-spacing:0;font-size:.8rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.vid-card.has-thumb .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

/* ---- partners ---- */
.partners-row{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:stretch;}
/* card = só o pôster clicável. Todos com a MESMA altura; a largura acompanha
   a proporção natural de cada arte (object-fit:contain, então nada é cortado —
   inclusive a exitlag, que é mais quadrada). */
.partner-card{height:360px;display:flex;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;background:var(--bg-panel);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
.partner-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px -14px rgba(145,70,255,.35);border-color:rgba(145,70,255,.5);}
.partner-card img{height:100%;width:auto;object-fit:contain;display:block;}
@media(max-width:600px){.partner-card{height:280px;}}

/* ---- footer ---- */
footer{border-top:1px solid var(--line-soft);padding:48px 24px 28px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;max-width:1180px;margin:0 auto;}
.footer-grid h4{font-family:var(--font-d);text-transform:uppercase;font-size:.85rem;letter-spacing:.06em;color:var(--text-dim);margin-bottom:14px;}
.footer-grid ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
.footer-grid ul a{color:var(--text-dim);font-size:.88rem;}
.footer-grid ul a:hover{color:var(--red-2);}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.footer-brand img{width:28px;height:28px;}
.footer-brand span{font-family:var(--font-logo);font-style:italic;font-weight:800;}
.footer-note{color:var(--text-faint);font-size:.82rem;max-width:340px;}
.footer-bottom{max-width:1180px;margin:36px auto 0;padding-top:20px;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--text-faint);font-size:.78rem;}
.footer-bottom a{color:var(--text-faint);}
.footer-bottom a:hover{color:var(--red-2);}
.footer-credit{max-width:1180px;margin:16px auto 0;text-align:center;color:var(--text-faint);font-size:.8rem;letter-spacing:.02em;}
.footer-credit strong{
  font-family:var(--font-d);font-weight:700;letter-spacing:.06em;font-size:.95rem;
  background:linear-gradient(90deg,#1e9bff,#4f7cff,#8b3dff,#c04dff,#8b3dff,#4f7cff,#1e9bff);
  background-size:800% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:gnzRgb 5s linear infinite,gnzGlow 5s ease-in-out infinite;
}
@keyframes gnzRgb{from{background-position:0% 50%;}to{background-position:-114.2857% 50%;}}
@keyframes gnzGlow{
  0%,100%{filter:drop-shadow(0 0 9px rgba(30,155,255,.75));}
  50%{filter:drop-shadow(0 0 12px rgba(176,77,255,.8));}
}
.footer-credit a{display:inline-block;transition:transform .18s ease;}
.footer-credit a:hover{transform:scale(1.06);}
/* sem corte por prefers-reduced-motion: e so troca de cor (0.2Hz), nao tem movimento */
@media(prefers-reduced-motion:reduce){
  .footer-credit strong{animation:gnzRgb 5s linear infinite;filter:drop-shadow(0 0 9px rgba(100,110,255,.7));}
}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr;}}

/* ---- som da roleta (sorteio) ---- */
.roulette-sound{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;}
.roulette-sound-toggle{background:transparent;border:1px solid var(--line);color:var(--text-dim);font-size:1rem;line-height:1;padding:7px 10px;cursor:pointer;}
.roulette-sound-toggle:hover{border-color:var(--red);}
.roulette-sound-toggle.is-muted{opacity:.5;}
.roulette-sound-select{background:var(--bg-panel-2);border:1px solid var(--line);color:var(--text-dim);font-family:var(--font-m);font-size:.75rem;padding:7px 10px;max-width:260px;cursor:pointer;}
.roulette-sound-select:disabled{opacity:.4;cursor:default;}
.roulette-sound-volume{-webkit-appearance:none;appearance:none;width:120px;height:4px;border-radius:2px;background:var(--line);outline:none;cursor:pointer;}
.roulette-sound-volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--red);cursor:pointer;border:none;}
.roulette-sound-volume::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--red);cursor:pointer;border:none;}
.roulette-sound-volume:disabled{opacity:.4;cursor:default;}

/* ---- views ---- */
.page-head{padding:56px 24px 20px;text-align:center;}
.page-head h1{font-size:clamp(2rem,5vw,2.8rem);}
.page-head p{color:var(--text-dim);margin-top:8px;}
.tabs{display:flex;gap:8px;justify-content:center;margin:22px 0 10px;flex-wrap:wrap;}
.tab-btn{background:transparent;border:1px solid var(--line);color:var(--text-dim);font-family:var(--font-m);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;padding:9px 18px;}
.tab-btn.active{border-color:var(--red);color:var(--red-2);background:rgba(145,70,255,.06);}

/* ---- forms ---- */
.field{margin-bottom:18px;text-align:left;}
.field label{display:block;font-family:var(--font-d);font-weight:600;text-transform:uppercase;font-size:.82rem;letter-spacing:.03em;margin-bottom:8px;}
.field .hint{font-size:.78rem;color:var(--text-faint);margin-top:6px;}
.field .hint a{color:var(--red-2);text-decoration:underline;}
.field .hint.warn{color:var(--red-2);}
.field input[type=text],.field input[type=number],.field input[type=tel],.field input[type=email],.field textarea,.field select{
  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);padding:12px 14px;font-size:.92rem;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--red);}
.dropzone{border:1px dashed var(--line);padding:30px 20px;text-align:center;cursor:pointer;position:relative;}
.dropzone:hover{border-color:var(--red);}
.dropzone strong{display:block;font-family:var(--font-d);font-weight:700;text-transform:uppercase;}
.dropzone span{font-size:.78rem;color:var(--text-faint);}
.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.dropzone img.preview{max-height:90px;margin:0 auto 10px;}
.total-badge{display:inline-flex;align-items:center;gap:8px;background:var(--success-dim);color:var(--success);border:1px solid rgba(46,204,113,.3);padding:8px 14px;font-family:var(--font-m);font-size:.82rem;}

/* ---- sorteio da twitch (admin) ---- */
.tw-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:.85rem;color:var(--text);background:var(--bg-panel-2);border:1px solid var(--line);padding:8px 14px;}
.tw-status .liv-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red);animation:pulse 1.4s infinite;}
.tw-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;max-height:280px;overflow-y:auto;}
.tw-chip{font-family:var(--font-m);font-size:.78rem;color:var(--text-dim);background:var(--bg-panel-2);border:1px solid var(--line);padding:5px 10px;border-radius:2px;}
.tw-chip.sub{color:var(--amber);border-color:rgba(232,163,61,.4);}
.tw-conn{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--bg-panel-2);border:1px solid var(--line);padding:12px 14px;margin-bottom:14px;font-size:.85rem;color:var(--text-dim);}
.tw-conn.ok{border-color:rgba(46,204,113,.35);color:var(--success);}
.tw-conn.warn{border-color:rgba(232,163,61,.4);color:var(--amber);}
.tw-conn strong{color:var(--text);}
.tw-tix-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;}
/* aviso de carregamento do cadastro de subs/seguidores, acima da roleta */
.tw-roster-note{font-size:.78rem;color:var(--text-faint);margin:-6px 0 12px;font-family:var(--font-m);}

/* ---- BALLS (corrida de bolinhas) ----
   A arena FICA no board, não é modal: o campo já aparece com o sorteio
   aberto e as bolinhas vão caindo no funil conforme a galera entra. */
/* ============================================================
   PÁGINA DO SORTEIO (admin) — abre ao clicar num sorteio da lista.
   Mesma cara pros dois tipos: sorteio de depósito e o da Twitch.
   ============================================================ */
.sd-topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px;}
.sd-voltar{background:none;border:1px solid var(--line);color:var(--text-dim);border-radius:8px;padding:6px 12px;font-size:.8rem;font-family:var(--font-m);}
.sd-voltar:hover{border-color:var(--red);color:var(--red-2);}
.sd-titulo{font-family:var(--font-d);font-size:clamp(1.4rem,3.4vw,2.3rem);text-transform:uppercase;letter-spacing:.02em;text-align:center;margin:10px 0 4px;}
.sd-titulo-linha{width:min(420px,70%);height:2px;margin:0 auto 26px;background:linear-gradient(90deg,transparent,var(--red),transparent);}

/* caixa de instruções com a borda neon */
.sd-instrucoes{position:relative;border:1px solid var(--red-dim);border-radius:12px;padding:18px 22px;background:var(--bg-panel);color:var(--text-dim);font-size:.9rem;line-height:1.7;margin-bottom:22px;overflow:hidden;}
.sd-instrucoes::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--red),transparent);}
.sd-instrucoes strong{color:var(--red-2);}

/* barra de informações */
.sd-infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:26px;}
.sd-info{background:var(--bg-panel);padding:16px 18px;}
.sd-info h5{font-family:var(--font-m);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);margin-bottom:8px;}
.sd-info .valor{font-family:var(--font-d);font-size:1.15rem;color:var(--text);}
.sd-chip{display:inline-block;background:var(--red-dim);color:var(--red-2);border:1px solid var(--red);border-radius:6px;padding:3px 10px;font-family:var(--font-m);font-size:.8rem;}
.sd-status{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-d);font-size:1rem;}
.sd-status i{width:9px;height:9px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success);}
.sd-status.off i{background:var(--steel);box-shadow:none;}

/* participantes */
.sd-bloco{border:1px solid var(--line);border-radius:14px;background:var(--bg-panel);padding:20px;margin-bottom:22px;}
.sd-bloco > h4{font-family:var(--font-d);font-size:1.05rem;margin-bottom:14px;}
/* campo de busca: sem estilo próprio ele saía branco, do jeito que o
   navegador desenha, gritando no meio do painel escuro. A lupa é um SVG
   embutido no próprio CSS (sem arquivo/pedido extra). */
.sd-busca{
  width:100%;max-width:320px;margin-bottom:16px;
  background-color:var(--bg);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font-family:var(--font-b);font-size:.88rem;
  padding:10px 14px 10px 40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a99a1' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:14px center;background-size:16px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.sd-busca::placeholder{color:var(--text-faint);}
.sd-busca:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-dim);}
/* o "x" de limpar do Chrome vem escuro e some no fundo — troca por um claro */
.sd-busca::-webkit-search-cancel-button{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;cursor:pointer;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f2f0' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 5l14 14M19 5L5 19'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sd-busca::-webkit-search-cancel-button:hover{opacity:1;}
/* A foto ocupa o card inteiro e o nome fica numa faixa por cima do rodapé
   — quem não tem foto ganha um bloco de cor com a inicial. Sem paginação
   a grade virava um rolo infinito; agora ela mostra uma página por vez. */
.sd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;padding:2px;}
.sd-part{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:14px;background:var(--cor,var(--bg-panel-2));overflow:hidden;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;}
.sd-part:hover{transform:translateY(-3px);border-color:var(--red);box-shadow:0 12px 26px -14px var(--red);}
.sd-part .foto{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.sd-part .foto img{width:100%;height:100%;object-fit:cover;display:block;}
.sd-part .inicial{font-family:var(--font-d);font-weight:700;font-size:2.8rem;color:rgba(0,0,0,.55);}
.sd-part .info{position:absolute;left:0;right:0;bottom:0;padding:26px 8px 9px;text-align:center;background:linear-gradient(180deg,transparent,rgba(6,6,8,.92) 55%);}
.sd-part .nome{display:block;font-size:.82rem;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sd-part .tix{display:inline-block;margin-top:3px;font-family:var(--font-m);font-size:.66rem;letter-spacing:.03em;color:var(--text-dim);text-transform:uppercase;}

/* páginas da grade (« ‹ 1 … 5 6 7 … 13 › ») */
.sd-paginacao{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin-top:18px;}
.sd-paginacao:empty{display:none;}
.sd-pag-btn{min-width:34px;height:34px;padding:0 10px;background:var(--bg-panel-2);border:1px solid var(--line);color:var(--text-dim);border-radius:8px;font-family:var(--font-m);font-size:.82rem;cursor:pointer;transition:border-color .15s ease,color .15s ease;}
.sd-pag-btn:hover:not(:disabled){border-color:var(--red);color:var(--text);}
.sd-pag-btn:disabled{opacity:.35;cursor:default;}
.sd-pag-btn.ativa{background:var(--red);border-color:var(--red);color:#fff;font-weight:700;}
.sd-pag-gap{color:var(--text-faint);padding:0 2px;}
.sd-vazio{color:var(--text-faint);font-size:.88rem;padding:26px;text-align:center;}

/* contagem regressiva antes do giro */
.sd-contagem{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(8,8,11,.82);z-index:6;pointer-events:none;}
.sd-contagem span{font-family:var(--font-d);font-weight:700;font-size:clamp(3.5rem,11vw,7rem);line-height:1;color:#fff;text-shadow:0 0 30px var(--red);animation:sd-contagem-pulso .55s ease-out;}
@keyframes sd-contagem-pulso{from{transform:scale(1.6);opacity:0;}to{transform:scale(1);opacity:1;}}
.sd-contagem small{font-family:var(--font-m);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-top:10px;}

/* selo de "em teste" — o jogo ainda está sendo feito e o streamer
   precisa ver isso antes de usar num sorteio de verdade */
/* aviso de Twitch desconectada (sem foto de perfil / sem tier e seguidor),
   com o botão de reconectar ali mesmo, sem precisar encerrar o sorteio */
.tw-aviso{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;border:1px solid var(--amber);border-left-width:4px;border-radius:10px;background:rgba(232,163,61,.10);padding:12px 16px;margin-bottom:16px;}
.tw-aviso span{color:var(--text-dim);font-size:.85rem;line-height:1.6;flex:1 1 320px;}
.tw-aviso strong{color:var(--text);}

.tw-beta{display:inline-block;background:var(--amber);color:#1a1a1a;font-family:var(--font-m);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border-radius:4px;vertical-align:middle;margin-left:4px;}
.balls-zoom{display:inline-flex;align-items:center;gap:6px;color:var(--text-dim);font-family:var(--font-m);font-size:.8rem;}
.balls-zoom .btn{min-width:32px;padding:0 8px;}
/* Campo em cima ocupando a largura toda, lista embaixo. Antes era lado a
   lado, e como o canvas passou a usar a largura inteira do painel, a
   lista era empurrada pra FORA do card. */
.balls-arena{display:flex;flex-direction:column;gap:12px;margin-top:6px;}
.balls-arena canvas{display:block;width:100%;border-radius:12px;background:#0b0b0f;border:1px solid var(--line);}
.balls-side{width:100%;}
.balls-side h4{font-family:var(--font-d);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--red-2);margin-bottom:8px;}
.balls-side ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;}
.balls-side li{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--text-dim);}
.balls-side li i{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
/* ordem de chegada: 1º, 2º, 3º… com o pódio destacado */
.balls-side li b{font-family:var(--font-m);font-size:.74rem;font-weight:700;color:var(--text-faint);min-width:26px;text-align:right;font-variant-numeric:tabular-nums;}
.balls-side li.p1,.balls-side li.p2,.balls-side li.p3{color:var(--text);font-weight:600;}
.balls-side li.p1 b{color:#ffd257;}
.balls-side li.p2 b{color:#d8dde6;}
.balls-side li.p3 b{color:#d9a06b;}
.tw-types{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 18px;}
.tw-type-btn{flex:1 1 200px;font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:.9rem;color:var(--text-dim);background:var(--bg-panel-2);border:1px solid var(--line);padding:14px 12px;cursor:pointer;transition:all .15s ease;}
.tw-type-btn:hover:not([disabled]){border-color:var(--red);color:var(--text);}
.tw-type-btn.active{border-color:var(--red);color:var(--text);background:var(--red-dim);box-shadow:inset 0 0 0 1px var(--red);}
.tw-type-btn[disabled]{opacity:.4;cursor:not-allowed;}
.tw-bits{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft);}
/* board ao vivo */
/* escapa do max-width:900px do .admin-panel pra roleta caber mais nomes.
   Centraliza com MARGEM (não com transform) — o .cut-card:hover usa
   transform pra "levantar" o card e sobrescreveria a centralização,
   fazendo o painel saltar pro lado ao passar o mouse. */
.tw-board-card{width:min(94vw,1500px);max-width:none;margin-left:calc((100% - min(94vw,1500px)) / 2);}
/* painel grande não precisa do efeito de levantar do card */
.tw-board-card:hover{transform:none;border-color:rgba(145,70,255,.35);box-shadow:0 0 0 1px rgba(145,70,255,.08), 0 12px 32px -12px rgba(145,70,255,.25);}
/* parado, os participantes ficam centralizados; no giro a classe sai e
   volta a alinhar à esquerda (senão o translateX da animação desalinha). */
.roulette-strip.tw-centered{width:100%;justify-content:center;}
.tw-board-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.tw-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-family:var(--font-m);font-size:.85rem;pointer-events:none;}
.tw-card-bits{font-family:var(--font-m);font-size:.7rem;color:var(--amber);font-weight:700;}
/* tickets do participante, embaixo do nome (no lugar da estrelinha de sub) */
.tw-card-tix{font-family:var(--font-m);font-size:.72rem;font-weight:700;color:var(--red-2);background:var(--red-dim);border:1px solid rgba(145,70,255,.35);padding:1px 7px;line-height:1.5;white-space:nowrap;}
.roulette-card.landed .tw-card-tix{color:#fff;background:var(--red);border-color:var(--red);}
/* cronômetro de resposta do vencedor (só no sorteio por palavra-chave) */
.tw-answer-timer{margin-top:16px;border:1px solid var(--line);background:var(--bg-panel-2);padding:12px 14px;}
.tw-answer-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.tw-answer-label{font-family:var(--font-d);font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.04em;color:var(--text-dim);}
.tw-answer-num{font-family:var(--font-m);font-size:1.5rem;font-weight:700;color:var(--red-2);}
.tw-answer-bar{margin-top:8px;height:6px;background:var(--bg);border:1px solid var(--line-soft);overflow:hidden;}
.tw-answer-bar i{display:block;height:100%;background:var(--red);transition:width 1s linear;}
.tw-answer-timer.ok{border-color:rgba(46,204,113,.5);background:var(--success-dim);}
.tw-answer-timer.ok .tw-answer-label,.tw-answer-timer.ok .tw-answer-num{color:var(--success);}
.tw-answer-timer.ok .tw-answer-bar i{background:var(--success);}
.tw-answer-timer.out{border-color:var(--amber);}
.tw-answer-timer.out .tw-answer-label,.tw-answer-timer.out .tw-answer-num{color:var(--amber);}
.tw-answer-timer.out .tw-answer-bar i{background:var(--amber);}
.tw-winner-feed{margin-top:16px;border:1px solid var(--line);background:var(--bg-panel-2);}
.tw-feed-title{font-family:var(--font-d);font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.04em;color:var(--red-2);padding:10px 14px;border-bottom:1px solid var(--line);}
#twWinnerFeed{max-height:180px;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:6px;}
.tw-feed-msg{font-size:.88rem;color:var(--text);background:var(--bg);border-left:2px solid var(--red);padding:6px 10px;}
.tw-feed-wait{font-size:.8rem;color:var(--text-faint);font-style:italic;}
.tw-bits-toggle{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-d);font-weight:600;text-transform:uppercase;font-size:.82rem;letter-spacing:.03em;color:var(--text);cursor:pointer;}
.tw-bits-toggle input{width:auto;}
.tw-bits select{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);padding:12px 14px;font-size:.92rem;}
.stepper{display:flex;align-items:center;gap:12px;}
.stepper button{width:38px;height:38px;background:var(--bg-panel-2);border:1px solid var(--line);color:var(--text);font-size:1.1rem;font-family:var(--font-m);}
.stepper button:hover{border-color:var(--red);}
.stepper .val{font-family:var(--font-m);font-size:1.2rem;min-width:40px;text-align:center;}

.signin-gate{text-align:center;padding:20px 0;}
.signin-gate p{color:var(--text-dim);font-size:.9rem;margin-bottom:16px;}

/* ---- roleta do sorteio (fileira horizontal, foto grande + faixa com o nome) ---- */
.roulette-strip-wrap{position:relative;height:240px;overflow:hidden;margin:14px 0;background:var(--bg-panel-2);border:1px solid var(--line-soft);border-radius:14px;}
.roulette-strip-wrap::before,.roulette-strip-wrap::after{content:'';position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none;}
.roulette-strip-wrap::before{left:0;background:linear-gradient(90deg, var(--bg-panel-2), transparent);}
.roulette-strip-wrap::after{right:0;background:linear-gradient(270deg, var(--bg-panel-2), transparent);}
.roulette-marker{position:absolute;left:50%;top:0;bottom:0;width:3px;background:var(--red);z-index:3;transform:translateX(-1.5px);box-shadow:0 0 10px var(--red);}
/* Cada carta é a FOTO da pessoa ocupando o card inteiro, com uma faixa
   colorida embaixo com o nome — na live dá pra reconhecer quem está
   passando mesmo de longe. Antes era uma bolinha pequena num card cinza
   e, em movimento, virava tudo igual.
   A largura (150px) TEM que bater com ROULETTE_STEP no admin.js, senão o
   giro para no lugar errado. O respiro entre as cartas vem do padding
   (por dentro), então o passo do giro continua exato. */
.roulette-strip{display:flex;position:absolute;top:0;left:0;height:100%;align-items:stretch;gap:0;padding:0;}
.roulette-strip.idle-scroll{animation-name:roulette-idle;animation-timing-function:linear;animation-iteration-count:infinite;}
@keyframes roulette-idle{from{transform:translateX(0);}to{transform:translateX(calc(-1 * var(--lap-w, 300px)));}}
.roulette-card{width:150px;flex:0 0 auto;display:flex;flex-direction:column;padding:16px 5px;position:relative;--cor:var(--red);}
/* duas cores alternadas — separam uma carta da outra mesmo em movimento */
.roulette-card:nth-child(even){--cor:var(--red-2);}
.roulette-card img,.roulette-card .avatar-fallback{width:100%;flex:1 1 auto;min-height:0;object-fit:cover;display:block;background:var(--bg-panel);border:2px solid var(--cor);border-bottom:none;border-radius:12px 12px 0 0;}
.roulette-card .avatar-fallback{display:flex;align-items:center;justify-content:center;color:var(--cor);font-family:var(--font-d);font-weight:700;font-size:2.2rem;}
.roulette-card span{display:block;background:var(--cor);color:#fff;font-family:var(--font-d);font-weight:700;font-size:.82rem;text-align:center;line-height:1.5;padding:4px 6px;border-radius:0 0 12px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.35);}
/* tickets e bits viram etiquetas por cima da foto, sem roubar espaço dela */
.roulette-card .tw-card-tix{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:2;border-radius:6px;background:rgba(10,10,12,.88);}
.roulette-card .tw-card-bits{position:absolute;top:38px;left:50%;transform:translateX(-50%);z-index:2;border-radius:6px;background:rgba(10,10,12,.88);padding:1px 7px;}
/* o sorteado cresce e ganha moldura branca — igual à referência */
.roulette-card.landed{z-index:4;}
.roulette-card.landed img,.roulette-card.landed .avatar-fallback{border-color:#fff;transform:scale(1.05);transform-origin:bottom center;}
.roulette-card.landed span{background:#fff;color:#111;transform:scale(1.05);transform-origin:top center;}
.roulette-card.landed::after{content:'';position:absolute;inset:12px 1px;border-radius:14px;box-shadow:0 0 34px 6px rgba(255,255,255,.35);pointer-events:none;}

/* ---- painel de vencedor (fica aberto até fechar manualmente) ---- */
@keyframes winnerPop{from{opacity:0;transform:scale(.85) translateY(6px);}to{opacity:1;transform:none;}}
.winner-reveal{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;align-items:center;gap:10px;animation:winnerPop .45s cubic-bezier(.2,.9,.3,1.2) both;}
.winner-photo img,.winner-photo .avatar-fallback{width:88px;height:88px;border-radius:50%;object-fit:cover;border:3px solid var(--red);box-shadow:0 0 20px rgba(145,70,255,.5);}
.winner-photo .avatar-fallback{display:flex;align-items:center;justify-content:center;background:var(--bg-panel-2);color:var(--red-2);font-family:var(--font-d);font-weight:700;font-size:2rem;}
.winner-name{font-family:var(--font-d);font-size:1.3rem;font-weight:700;color:var(--text);}
.winner-detail{font-size:.85rem;color:var(--text-dim);line-height:1.6;text-align:left;background:var(--bg-panel-2);padding:14px 16px;border:1px solid var(--line-soft);max-width:340px;}
.winner-detail.hidden{display:none;}
.winner-actions{display:flex;gap:10px;margin-top:4px;}

.duration-input{width:56px;background:var(--bg-panel-2);border:1px solid var(--line);color:var(--text);padding:8px 6px;text-align:center;font-family:var(--font-m);}
.duration-label{display:inline-flex;flex-direction:column;align-items:center;gap:4px;font-size:.68rem;color:var(--text-faint);font-family:var(--font-m);text-transform:uppercase;letter-spacing:.03em;}

/* ---- formulário recolhível no admin ---- */
.admin-form-collapse{margin-bottom:20px;}
.admin-form-collapse summary{cursor:pointer;list-style:none;padding:10px 16px;border:1px solid var(--line);color:var(--text-dim);font-family:var(--font-d);text-transform:uppercase;font-size:.85rem;letter-spacing:.03em;}
.admin-form-collapse summary:hover{border-color:var(--red);color:var(--text);}
.admin-form-collapse summary::-webkit-details-marker{display:none;}
.admin-form-collapse[open] summary{border-bottom:none;}
.admin-form-collapse .admin-form{border-top:none;}

/* ---- modal ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:100;overflow-y:auto;}
.modal{background:var(--bg-panel);border:1px solid var(--line);max-width:520px;width:100%;position:relative;}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line-soft);}
.modal-head h3{font-size:1.15rem;}
.modal-close{background:none;border:none;color:var(--text-dim);font-size:1.4rem;line-height:1;}
.modal-close:hover{color:var(--red-2);}
.modal-body{padding:24px;}

/* ---- admin ---- */
.admin-gate{max-width:380px;margin:60px auto;padding:32px;text-align:center;}
.admin-gate h3{margin-bottom:6px;}
.admin-gate p{color:var(--text-dim);font-size:.88rem;margin-bottom:20px;}
.admin-panel{max-width:900px;margin:0 auto;padding:0 24px 80px;}
.admin-form{padding:24px;margin-bottom:32px;}
.admin-form h3{margin-bottom:18px;}
.admin-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--line);margin-bottom:10px;flex-wrap:wrap;}
.admin-row .info strong{display:block;font-family:var(--font-d);font-size:1rem;}
.admin-row .info span{font-size:.78rem;color:var(--text-faint);font-family:var(--font-m);}
.admin-row .actions{display:flex;gap:8px;flex-wrap:wrap;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:600px){.two-col{grid-template-columns:1fr;}}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--bg-panel);border:1px solid var(--success);color:var(--success);padding:12px 22px;font-family:var(--font-m);font-size:.85rem;z-index:200;box-shadow:0 10px 30px -8px rgba(0,0,0,.5);}
.toast.err{border-color:var(--red);color:var(--red-2);}

/* fonte do titulo/brand igual à arte do ClovaoRP (Chakra Petch não batia) */
.hero h1{font-family:'Kanit',var(--font-d);font-style:italic;font-weight:800;}
.brand span{font-family:'Kanit',var(--font-logo);font-style:italic;font-weight:800;}

/* ============================================================
   SORTEIO AO VIVO (Twitch) — card na home + tela do sorteio
   O card entra na frente dos sorteios ativos enquanto o sorteio
   do chat está aberto no painel; clicar abre a mesma roleta que
   o streamer está girando na live.
   ============================================================ */
.live-card{cursor:pointer;}
.badge-ao-vivo{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--red);color:#fff;border-radius:6px;
  padding:4px 11px;font-family:var(--font-m);font-weight:700;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 0 18px -2px var(--red);
}
.badge-ao-vivo i{width:7px;height:7px;border-radius:50%;background:#fff;animation:live-pulso 1.4s ease-in-out infinite;}
@keyframes live-pulso{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.72);}}
/* sem animação no sistema, a bolinha fica parada mas continua visível */
@media (prefers-reduced-motion:reduce){.badge-ao-vivo i{animation:none;}}

/* o "palco" ocupa o lugar da imagem do prêmio nos outros cards */
.live-palco{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;min-height:210px;padding:26px 18px;text-align:center;
  /* as cores saem das variáveis do tema — o mesmo bloco serve pros três
     sites (vermelho, teal e roxo) sem trocar nada */
  background:
    radial-gradient(circle at 50% 35%, var(--red-dim), transparent 62%),
    linear-gradient(160deg, var(--bg-panel-2), var(--bg) 70%);
  border-bottom:1px solid var(--line-soft);overflow:hidden;
}
.live-palco::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px);
}
.live-palco .badge-ao-vivo{position:absolute;top:14px;left:14px;}
.live-chamada{font-family:var(--font-b);font-size:.82rem;color:var(--text-dim);}
.live-chave{
  font-family:var(--font-m);font-weight:700;font-size:clamp(1.4rem,4.4vw,2rem);
  color:#fff;background:rgba(10,10,12,.6);border:1px solid var(--red);
  border-radius:12px;padding:8px 22px;letter-spacing:.02em;
  text-shadow:0 0 22px var(--red);
}
.live-plataformas{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.live-plataformas em{
  font-style:normal;font-family:var(--font-m);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-dim);
  background:var(--bg-panel);border:1px solid var(--line);border-radius:20px;padding:3px 11px;
}

/* --- tela do sorteio ao vivo (modal largo) --- */
/* o min-width:0 é o que deixa o modal encolher no celular: sem ele a barra de
   informações (grid de 150px por coluna) empurra a largura mínima e a página
   inteira sai rolando pro lado */
.modal.modal-largo{max-width:1080px;min-width:0;}
.live-aguardando{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:4;
  background:rgba(8,8,11,.86);border:1px solid var(--line);border-radius:20px;
  padding:7px 18px;font-family:var(--font-m);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-dim);pointer-events:none;
}
.live-vencedor-sub{font-family:var(--font-m);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);}
.live-balls-aviso{
  border:1px solid var(--line);border-radius:12px;background:var(--bg-panel-2);
  padding:18px;color:var(--text-dim);font-size:.88rem;line-height:1.6;
}
.live-rodape{color:var(--text-faint);font-size:.78rem;text-align:center;}
/* botão de participar dentro da tela do sorteio de depósito */
.live-participar{display:flex;justify-content:center;margin:0 0 20px;}
/* uma roleta por prêmio: o título do bloco precisa alinhar o selo do lugar */
.modal.modal-largo .sd-bloco > h4{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
@media(max-width:640px){
  .live-palco{min-height:170px;}
  .modal.modal-largo .modal-body{padding:16px;}
  .modal.modal-largo .sd-infos{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));}
  .modal.modal-largo .sd-info{padding:12px;}
  .modal.modal-largo .sd-bloco{padding:14px;}
  .modal.modal-largo .sd-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;}
}

/* ============================================================
   VIP — assinatura mensal (aba do site + selo no painel)
   O benefício vale só no SORTEIO DA TWITCH (o do chat).
   ============================================================ */
.vip-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
@media(max-width:860px){.vip-grid{grid-template-columns:1fr;}}
.vip-beneficios,.vip-painel{padding:26px;}
.vip-beneficios h3,.vip-painel h3{font-size:1.1rem;margin-bottom:14px;}
.vip-lista{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:22px;}
.vip-lista li{position:relative;padding-left:26px;color:var(--text-dim);font-size:.92rem;line-height:1.55;}
.vip-lista li::before{content:'👑';position:absolute;left:0;top:0;font-size:.9rem;}
.vip-lista strong{color:var(--text);}
.vip-preco{display:flex;align-items:baseline;gap:8px;justify-content:center;padding:18px;border:1px solid var(--red);border-radius:12px;background:var(--red-dim);}
.vip-preco span{font-family:var(--font-d);font-size:2.2rem;font-weight:800;color:var(--text);line-height:1;}
.vip-preco small{font-family:var(--font-m);font-size:.8rem;color:var(--red-2);text-transform:uppercase;letter-spacing:.08em;}
.vip-obs{margin-top:12px;color:var(--text-faint);font-size:.8rem;text-align:center;}

.vip-status{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:12px;border:1px solid var(--line);background:var(--bg-panel-2);margin-bottom:20px;}
.vip-status strong{font-family:var(--font-d);font-size:1rem;}
.vip-status span{font-family:var(--font-m);font-size:.78rem;color:var(--text-dim);}
.vip-status.ok{border-color:rgba(46,204,113,.45);}
.vip-status.ok strong{color:var(--success);}
.vip-status.aguardando{border-color:rgba(232,163,61,.45);}
.vip-status.aguardando strong{color:var(--amber);}
.vip-status.off strong{color:var(--text-dim);}

.vip-bloco{padding-top:18px;border-top:1px solid var(--line-soft);margin-top:18px;}
.vip-bloco:first-of-type{border-top:none;padding-top:0;margin-top:0;}
.vip-bloco h4{font-family:var(--font-d);font-size:.95rem;margin-bottom:6px;}
.vip-dica{color:var(--text-dim);font-size:.84rem;line-height:1.55;margin-bottom:12px;}
.vip-linha{display:flex;gap:10px;flex-wrap:wrap;}
.vip-linha input{flex:1 1 180px;background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:11px 14px;font-family:var(--font-b);font-size:.9rem;}
.vip-linha input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-dim);}
.vip-label{display:block;font-family:var(--font-m);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin:16px 0 8px;}
/* chave e QR do PIX (vieram das rifas, que aqui viraram Brindes — o VIP é
   quem usa agora). `user-select:all` deixa a chave ser copiada num clique. */
.pix-key{font-family:var(--font-m);font-size:1rem;font-weight:700;color:var(--red-2);background:var(--bg);
  border:1px dashed var(--red);border-radius:10px;padding:12px 14px;text-align:center;word-break:break-all;user-select:all;}
.pix-qr{display:block;width:200px;max-width:70%;height:auto;margin:14px auto 0;border-radius:10px;background:#fff;padding:8px;}
.vip-aviso{border:1px solid var(--amber);border-radius:10px;background:rgba(232,163,61,.08);color:var(--text-dim);font-size:.86rem;line-height:1.55;padding:14px 16px;}

/* selo no painel (lista de usuários e carta da roleta) */
.vip-selo{display:inline-block;vertical-align:middle;margin-left:6px;background:var(--red);color:#fff;
  font-family:var(--font-m);font-size:.6rem;font-weight:700;letter-spacing:.1em;padding:2px 7px;border-radius:5px;}
/* no canto de cima da foto: antes ficava a 34px do pé da carta e, com a
   carta quadrada (mais baixa), caía em cima do nome */
.roulette-card .tw-card-vip{position:absolute;top:24px;right:10px;z-index:2;
  background:var(--red);color:#fff;font-family:var(--font-m);font-size:.58rem;font-weight:700;
  letter-spacing:.12em;padding:1px 7px;border-radius:5px;box-shadow:0 0 12px -2px var(--red);}

/* ---- VIP com cara de premium ----
   O selo e a carta de quem é VIP ganham RGB correndo e um brilho que passa
   de tempos em tempos: dá pra reconhecer o VIP na roleta de relance, até
   com ela girando. Vale no painel, no modo live e no espelho do site.
   Sem corte por reduced-motion de propósito: o Windows do streamer tem
   isso ligado, e o efeito sumiria justamente da live. */
:root{--vip-rgb:linear-gradient(90deg,#ff3b5c,#ffb020,#35e07a,#2fb8ff,#a45bff,#ff3b5c);}
@keyframes vip-rgb{to{background-position:300% 0;}}
@keyframes vip-brilho{0%,55%{transform:translateX(-130%) skewX(-20deg);}100%{transform:translateX(230%) skewX(-20deg);}}
@keyframes vip-borda{
  0%,100%{border-color:#ff3b5c;box-shadow:0 0 22px -6px #ff3b5c;}
  20%{border-color:#ffb020;box-shadow:0 0 22px -6px #ffb020;}
  40%{border-color:#35e07a;box-shadow:0 0 22px -6px #35e07a;}
  60%{border-color:#2fb8ff;box-shadow:0 0 22px -6px #2fb8ff;}
  80%{border-color:#a45bff;box-shadow:0 0 22px -6px #a45bff;}
}
.vip-selo,.roulette-card .tw-card-vip{
  position:relative;overflow:hidden;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);
  background:var(--vip-rgb);background-size:300% 100%;animation:vip-rgb 2.6s linear infinite;
  border:1px solid rgba(255,255,255,.55);box-shadow:0 0 14px -2px rgba(255,255,255,.45);
}
.roulette-card .tw-card-vip{position:absolute;}
.roulette-card .tw-card-vip::before{content:'★ ';}
/* o brilho que atravessa o selo */
.vip-selo::after,.roulette-card .tw-card-vip::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  animation:vip-brilho 2.4s ease-in-out infinite;
}
/* a carta de quem é VIP: borda da foto e faixa do nome em RGB */
.roulette-card:has(.tw-card-vip) img,
.roulette-card:has(.tw-card-vip) .avatar-fallback{animation:vip-borda 3s linear infinite;}
.roulette-card:has(.tw-card-vip) span{background:var(--vip-rgb);background-size:300% 100%;animation:vip-rgb 3s linear infinite;text-shadow:0 1px 2px rgba(0,0,0,.6);}
/* quando é o VIP que ganha, a carta segue o destaque branco de vencedor,
   mas a borda continua RGB */
.roulette-card.landed:has(.tw-card-vip) span{background:#fff;animation:none;text-shadow:none;}
.tw-vip-ganhou{margin-top:14px;padding:12px 16px;border:1px solid var(--red);border-radius:10px;
  background:var(--red-dim);color:var(--text);font-size:.88rem;}
.vip-pedido .info span b{color:var(--red-2);}

/* observação dos 15 dias de brinde e ciclo do assinante */
.vip-obs-bonus{border:1px dashed var(--red);border-radius:10px;padding:12px 14px;margin-top:12px;
  color:var(--text-dim);text-align:left;line-height:1.6;}
.vip-obs-bonus strong{color:var(--red-2);}
.vip-status .vip-ciclo{color:var(--text-faint);font-size:.74rem;}

/* adicionar VIP na mão (painel) */
.vip-add{display:flex;gap:10px;flex-wrap:wrap;}
.vip-add input{background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--text);
  padding:10px 13px;font-family:var(--font-b);font-size:.88rem;}
.vip-add input#vipAddEmail{flex:2 1 220px;}
.vip-add input#vipAddTwitch{flex:1 1 150px;}
.vip-add input#vipAddDias{width:88px;font-family:var(--font-m);}
.vip-add input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-dim);}
.vip-tag-manual{display:inline-block;vertical-align:middle;margin-left:6px;border:1px solid var(--line);
  color:var(--text-faint);font-family:var(--font-m);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 6px;border-radius:5px;}
/* quem fechou o ciclo sem ganhar nada fica marcado na lista */
.admin-row.merece-bonus{border-left:3px solid var(--amber);}

/* ficha da pessoa (clique no nome, na aba Usuários / VIP) */
.vip-nome{background:none;border:none;padding:0;color:var(--text);font:inherit;
  text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;cursor:pointer;}
.vip-nome:hover{color:var(--red-2);text-decoration-color:var(--red);}
.vip-ficha-topo{display:flex;gap:14px;align-items:center;margin-bottom:18px;}
.vip-ficha-topo img,.vip-ficha-inicial{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--red);background:var(--bg-panel-2);}
.vip-ficha-inicial{display:flex;align-items:center;justify-content:center;font-family:var(--font-d);
  font-weight:700;font-size:1.5rem;color:var(--red-2);}
.vip-ficha-topo strong{display:block;font-family:var(--font-d);font-size:1.05rem;}
.vip-ficha-topo span{display:block;font-size:.8rem;color:var(--text-dim);}
.vip-link{background:none;border:none;padding:0 0 0 6px;color:var(--red-2);font:inherit;font-size:.76rem;
  text-decoration:underline;cursor:pointer;}
.vip-ficha-status{border:1px solid var(--line);border-radius:10px;background:var(--bg-panel-2);
  padding:12px 14px;font-family:var(--font-d);font-size:.95rem;margin-bottom:6px;}
.vip-ficha-status.ok{border-color:rgba(46,204,113,.45);color:var(--success);}
.vip-ficha-status.off{color:var(--text-dim);}
.vip-ficha-status span{display:block;font-family:var(--font-m);font-size:.74rem;color:var(--text-faint);margin-top:3px;}
.vip-ficha-bloco{padding-top:16px;border-top:1px solid var(--line-soft);margin-top:16px;}
.vip-ficha-bloco h4{font-family:var(--font-d);font-size:.95rem;margin-bottom:4px;}
.vip-dias{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;}
.vip-dias input{width:86px;text-align:center;background:var(--bg);border:1px solid var(--red);border-radius:10px;
  color:var(--text);padding:10px;font-family:var(--font-m);font-size:1.1rem;font-weight:700;}
.vip-dias input:focus{outline:none;box-shadow:0 0 0 3px var(--red-dim);}
.vip-ficha-previa{text-align:center;color:var(--text-faint);font-size:.8rem;margin-top:10px;}
.vip-ficha-acoes{display:flex;gap:8px;flex-wrap:wrap;}

/* ================= BARRA LATERAL DO PAINEL =================
   O painel tinha três abas em cima e cabia. Com formulários, parceiros,
   personalização e usuários, a fileira de abas passaria de uma linha e a
   navegação viraria adivinhação. A barra lateral aguenta a lista crescer,
   agrupa por assunto e deixa o conteúdo com a largura inteira da tela.
   No celular ela vira gaveta (o ☰ ao lado do título abre e fecha).
   Tudo aqui usa as cores do tema — cada site puxa a sua sozinho. */
.admin-shell{display:grid;grid-template-columns:250px minmax(0,1fr);max-width:1340px;margin:0 auto;}
.admin-side{
  border-right:1px solid var(--line);
  padding:26px 14px 60px;
  position:sticky;top:63px;align-self:start;
  max-height:calc(100vh - 63px);overflow-y:auto;
}
.as-topo{padding:0 6px 20px;border-bottom:1px solid var(--line-soft);margin-bottom:18px;text-align:center;}
/* o brasão do topo é o mesmo do painel antigo, só que estreito pra caber
   na barra — sem isso as barras laterais dele (11vw) estouravam a coluna */
.as-nome{font-family:var(--font-d);font-size:.9rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;}
.as-nome strong{color:var(--text);}
.as-grupo{margin-bottom:20px;}
.as-grupo h6{
  font-family:var(--font-m);font-size:.64rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--text-faint);
  padding:0 10px;margin-bottom:8px;
}
.as-item{
  display:flex;align-items:center;gap:10px;width:100%;
  background:transparent;border:none;border-left:2px solid transparent;
  color:var(--text-dim);font-family:var(--font-d);font-size:.88rem;
  text-align:left;padding:9px 10px;cursor:pointer;
  transition:color .15s ease, background .15s ease, border-color .15s ease;
}
.as-item:hover{color:var(--text);background:var(--bg-panel);}
.as-item.active{color:var(--red-2);background:var(--bg-panel);border-left-color:var(--red);}
.as-ico{display:flex;width:17px;height:17px;flex:0 0 17px;}
.as-ico svg{width:100%;height:100%;fill:currentColor;}
.as-sair{
  width:100%;margin-top:8px;background:transparent;border:1px solid var(--line);
  color:var(--text-faint);font-family:var(--font-m);font-size:.75rem;
  text-transform:uppercase;letter-spacing:.08em;padding:9px;cursor:pointer;
}
.as-sair:hover{border-color:var(--red);color:var(--red-2);}
.as-toggle{display:none;background:transparent;border:1px solid var(--line);color:var(--text-dim);font-size:1.1rem;padding:4px 12px;cursor:pointer;}

/* a coluna de conteúdo: título à esquerda, sem o centro da página pública */
.admin-main{min-width:0;}
.admin-head{text-align:left;padding:30px 24px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
.admin-head h1{font-size:clamp(1.6rem,3.4vw,2.1rem);}
.admin-head p{margin-top:0;}
.admin-shell .admin-panel{max-width:100%;margin:0;}

@media(max-width:980px){
  .admin-shell{display:block;}
  .admin-side{
    position:fixed;top:63px;left:0;bottom:0;width:250px;z-index:45;
    background:var(--bg);max-height:none;
    transform:translateX(-100%);transition:transform .22s ease;
  }
  .admin-side.aberta{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.6);}
  .as-toggle{display:inline-block;}
  .admin-head{padding-top:20px;}
}

/* ---- parceiros ---- */
.pc-row{align-items:center;}
.pc-mini{width:52px;height:74px;object-fit:cover;border:1px solid var(--line-soft);flex:0 0 52px;}
.pc-mini-vazio{
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--font-m);font-size:.6rem;color:var(--text-faint);background:var(--bg-panel-2);
}
.pc-acoes{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;}

/* ---- construtor de formulários ---- */
.fb-modal{max-width:920px;}
.fb-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px;}
@media(max-width:820px){.fb-grid{grid-template-columns:1fr;}}
.fb-previa{border:1px solid var(--line);background:var(--bg-panel-2);padding:16px;border-radius:10px;}
.fb-campo{border:1px solid var(--line);background:var(--bg-panel-2);border-radius:10px;padding:12px;margin-bottom:10px;}
.fb-campo-topo{display:flex;align-items:center;gap:8px;}
.fb-campo-topo input[type=text]{flex:1;min-width:0;}
.fb-campo-topo select{width:auto;flex:0 0 auto;}
.fb-campo-num{
  font-family:var(--font-m);font-size:.7rem;color:var(--text-faint);
  border:1px solid var(--line);border-radius:4px;padding:2px 7px;flex:0 0 auto;
}
.fb-campo-baixo{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.fb-mini{
  background:transparent;border:1px solid var(--line);color:var(--text-dim);
  width:26px;height:26px;line-height:1;flex:0 0 26px;cursor:pointer;border-radius:4px;
}
.fb-mini:hover{border-color:var(--red);color:var(--red-2);}
.fb-mini-del:hover{color:var(--red-2);}
.fb-check{display:flex;align-items:center;gap:7px;font-family:var(--font-m);font-size:.76rem;color:var(--text-dim);}
.fb-check input{width:auto;}
.fb-chave{font-family:var(--font-m);font-size:.68rem;color:var(--text-faint);margin-top:7px;}
.fb-chave code{color:var(--text-dim);}
.fb-row .info span{display:block;}
.fb-padrao{border-style:dashed;}
.fb-tag{
  font-family:var(--font-m);font-size:.6rem;color:var(--text-faint);
  border:1px solid var(--line);border-radius:3px;padding:1px 6px;margin-left:6px;
  text-transform:uppercase;letter-spacing:.08em;font-weight:500;
}

/* ---- usuários ---- */
.usu-linha{
  display:flex;align-items:center;gap:12px;padding:11px 14px;
  border:1px solid var(--line);margin-bottom:8px;cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.usu-linha:hover{border-color:var(--red);background:var(--bg-panel);}
.usu-linha img,.usu-linha .avatar-fallback{width:34px;height:34px;flex:0 0 34px;border-radius:50%;object-fit:cover;}
.usu-quem{flex:1;min-width:0;}
.usu-quem strong{display:block;font-family:var(--font-d);font-size:.92rem;}
.usu-quem span{font-family:var(--font-m);font-size:.74rem;color:var(--text-faint);word-break:break-all;}
.usu-nums{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--font-m);font-size:.75rem;color:var(--text-dim);}
.usu-nums strong{color:var(--red-2);}
.usu-tag{
  font-family:var(--font-m);font-size:.62rem;color:var(--text-faint);
  border:1px solid var(--line);border-radius:3px;padding:2px 7px;
}
@media(max-width:560px){
  .usu-linha{flex-wrap:wrap;}
  .usu-nums{width:100%;}
}

/* ---- barra de rolagem ----
   A do sistema é larga e clara demais em cima do fundo preto (o modal do
   construtor de formulários era o caso mais gritante). Aqui ela fica fina
   e na cor das bordas do site. Firefox usa as duas propriedades de cima;
   o resto usa o ::-webkit. */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:var(--steel);}
::-webkit-scrollbar-corner{background:transparent;}

/* ---- campos do construtor de formulários ----
   Eles ficam fora de um `.field`, que é quem carrega o estilo dos
   formulários do site — por isso saíam brancos, com a cara do navegador.
   Esta regra dá a eles o mesmo visual, num tamanho menor porque são
   vários lado a lado dentro do cartão de cada campo. */
.fb-campo input[type=text],
.fb-campo input[type=number],
.fb-campo select{
  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);
  font-family:var(--font-b);font-size:.85rem;padding:8px 10px;border-radius:6px;
}
.fb-campo input[type=text]::placeholder{color:var(--text-faint);}
.fb-campo input[type=text]:focus,
.fb-campo input[type=number]:focus,
.fb-campo select:focus{outline:none;border-color:var(--red);}
.fb-campo select{cursor:pointer;}
/* cartão do campo: tipo + botões em cima, título grande com rótulo embaixo */
.fb-campo-topo .fb-campo-num{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);}
.fb-campo-topo select{width:auto;flex:1 1 auto;min-width:0;margin-left:auto;max-width:200px;}
.fb-campo-baixo{gap:10px;margin-top:12px;}
.fb-lbl{display:flex;flex-direction:column;gap:5px;}
.fb-lbl>span{font-family:var(--font-m);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);}
.fb-lbl-titulo>span{color:var(--text-dim);}
.fb-campo .fb-lbl-titulo input[type=text]{font-size:1rem;font-weight:600;padding:11px 12px;}
/* a caixinha do "obrigatório" também vinha crua */
.fb-check input[type=checkbox]{
  appearance:none;width:15px;height:15px;flex:0 0 15px;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:4px;position:relative;
}
.fb-check input[type=checkbox]:checked{background:var(--red);border-color:var(--red);}
.fb-check input[type=checkbox]:checked::after{
  content:'';position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.fb-check{cursor:pointer;}

/* ================= TORNEIO DOS BÔNUS =================
   Uma edição por vez em destaque, com a arte por cima e a tabela
   embaixo. A tabela é o coração da tela: ela precisa ler bem de
   longe, porque a galera acompanha ela durante a live. */
/* O conteúdo do torneio numa caixa centrada, como todo o resto: o site
   limita .grid3 em 540px por card, .stats em 720px, .account-summary em
   480px. Solto, o painel esticava de ponta a ponta da tela e por isso
   destoava de tudo. */
.tn-caixa{max-width:920px;margin:0 auto;}

/* O cartaz é VERTICAL e nunca ia caber bonito num retângulo deitado. Aqui
   ele usa o mesmo tratamento dos cards de sorteio e brinde (.prize-icon):
   uma cópia borrada dele preenche o fundo e o cartaz inteiro fica por
   cima, sem corte e sem tarja cinza em volta. */
.tn-painel{padding:0;}
.tn-arte{height:340px;}
.tn-arte .pi-fg{object-fit:contain;}
.tn-corpo{padding:24px;}
@media(max-width:600px){ .tn-arte{height:240px;} }

.tn-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
.tn-topo h2{font-size:1.4rem;margin-top:8px;}
.tn-quando{display:block;margin-top:4px;font-family:var(--font-m);font-size:.8rem;color:var(--text-dim);}
.tn-fechado{font-family:var(--font-m);font-size:.8rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.08em;}
.tn-infos{margin-bottom:22px;}
.tn-regras{margin-bottom:24px;}
.tn-regras h4{font-family:var(--font-d);font-size:1rem;margin-bottom:10px;}
.tn-regras ul{list-style:none;display:flex;flex-direction:column;gap:7px;}
.tn-regras li{position:relative;padding-left:18px;color:var(--text-dim);font-size:.88rem;line-height:1.5;}
.tn-regras li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--red);transform:rotate(45deg);}
.tn-tab-tit{font-family:var(--font-d);font-size:1rem;margin-bottom:12px;}

/* a tabela rola sozinha no celular em vez de empurrar a página */
.tn-tabela-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;}
.tn-tabela{width:100%;border-collapse:collapse;min-width:460px;}
.tn-tabela th{
  font-family:var(--font-m);font-size:.68rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-faint);text-align:left;
  padding:11px 14px;background:var(--bg-panel-2);border-bottom:1px solid var(--line);
}
.tn-tabela td{padding:11px 14px;border-bottom:1px solid var(--line-soft);font-size:.9rem;color:var(--text-dim);}
.tn-tabela tr:last-child td{border-bottom:none;}
.tn-tabela td:nth-child(2){color:var(--text);font-weight:600;}
.tn-tabela .num{text-align:right;font-family:var(--font-m);font-variant-numeric:tabular-nums;color:var(--text);}
.tn-tabela .pos{width:44px;color:var(--text-faint);font-family:var(--font-m);}
.tn-tabela tr.lider td{background:rgba(145,70,255,.10);color:var(--text);}
.tn-tabela tr.lider .num{color:var(--red-2);font-weight:700;}
.tn-campeao{
  margin-top:16px;padding:14px 16px;border:1px solid var(--red);border-radius:10px;
  background:var(--red-dim);color:var(--text);font-size:.92rem;
}

.tn-antigas-tit{margin:34px 0 14px;font-family:var(--font-d);font-size:1.05rem;}
.tn-antigas{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.tn-antiga{padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:5px;transition:transform .16s ease;}
.tn-antiga:hover{transform:translateY(-3px);}
.tn-antiga strong{font-family:var(--font-d);font-size:.95rem;}
.tn-antiga span{font-family:var(--font-m);font-size:.78rem;color:var(--text-faint);}
.tn-antiga-campeao{color:var(--red-2)!important;}

/* Cartão da home: é um card igual aos de sorteio e brinde (mesma
   .prize-icon, mesmo .sc-body), com a largura dos outros — antes era uma
   barra da largura da tela com um vão preto enorme do lado. */
.tn-home-wrap{display:flex;justify-content:center;}
.tn-home{width:100%;max-width:540px;display:flex;flex-direction:column;cursor:pointer;}
.tn-home .prize-icon{height:300px;}
.tn-home .pi-fg{object-fit:contain;}
.tn-home-nums{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--font-m);font-size:.82rem;color:var(--text-dim);}
.tn-home-nums b{color:var(--text);}
.tn-home-lider{font-family:var(--font-m);font-size:.84rem;color:var(--red-2);}

/* a chave PIX dentro do formulário de compra */
.tn-pix{border:1px solid var(--line);border-radius:10px;background:var(--bg-panel-2);padding:14px;margin-bottom:18px;}
.tn-pix-tit{display:block;font-family:var(--font-m);font-size:.8rem;color:var(--text-dim);margin-bottom:8px;}
.tn-pix-dica{display:block;font-family:var(--font-m);font-size:.8rem;color:var(--text-dim);margin-top:10px;}

/* ---- painel: preencher quanto cada bônus pagou ---- */
.tn-status-btns{display:flex;gap:8px;flex-wrap:wrap;}
.tn-lider-admin{
  margin-bottom:22px;padding:13px 16px;border:1px solid var(--red);border-radius:10px;
  background:var(--red-dim);font-size:.9rem;color:var(--text);
}
.tn-adm-lista{display:flex;flex-direction:column;gap:8px;}
.tn-adm-linha{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:10px;padding:11px 14px;background:var(--bg-panel-2);
}
.tn-adm-num{font-family:var(--font-m);font-size:.72rem;color:var(--text-faint);width:22px;flex:0 0 22px;}
.tn-adm-quem{flex:1;min-width:150px;}
.tn-adm-quem strong{display:block;font-family:var(--font-d);font-size:.95rem;}
.tn-adm-quem span{font-family:var(--font-m);font-size:.74rem;color:var(--text-faint);word-break:break-all;}
.tn-adm-valor{display:flex;align-items:center;gap:8px;}
.tn-adm-valor label{font-family:var(--font-m);font-size:.72rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;}
.tn-adm-valor input{
  width:110px;background:var(--bg);border:1px solid var(--line);color:var(--text);
  font-family:var(--font-m);font-variant-numeric:tabular-nums;font-size:.95rem;
  padding:8px 10px;border-radius:6px;text-align:right;
}
.tn-adm-valor input:focus{outline:none;border-color:var(--red);}
.tn-adm-valor input.salvando{border-color:var(--amber);}
.tn-adm-valor input.salvo{border-color:var(--success);}
.tn-adm-acoes{display:flex;gap:8px;flex-wrap:wrap;}
@media(max-width:560px){
  .tn-adm-valor input{width:100%;}
  .tn-adm-valor{width:100%;}
}
.tn-adm-topo{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.tn-arte-previa{width:110px;border:1px solid var(--line);border-radius:8px;display:block;margin-bottom:10px;}
.tn-qr-previa{width:110px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:6px;display:block;margin-bottom:10px;}
/* o QR dentro do modal de compra fica um pouco menor que o do VIP: ali
   embaixo dele ainda vem a chave e o formulário inteiro */
.tn-pix .pix-qr{width:170px;margin:12px auto;}


/* ---- roleta redonda (ordem de jogo do torneio) ----
   Veio do site do MAYK, onde ela sorteia o número da rifa. Aqui ela
   sorteia a ORDEM em que os bônus vão ser girados: cada fatia é um
   ticket, e onde o ponteiro parar é o próximo a jogar. As cores saem
   das variáveis do tema, então ela já nasce roxa. */
.wheel-wrap{position:relative;width:min(92vw,680px);height:min(92vw,680px);margin:64px auto 20px;}
.wheel-circle-mask{width:100%;height:100%;border-radius:50%;border:4px solid var(--line);overflow:hidden;}
.wheel-pointer{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-top:26px solid var(--red);z-index:3;filter:drop-shadow(0 0 6px rgba(232,51,43,.6));}
.wheel-center{position:absolute;top:50%;left:50%;width:18px;height:18px;background:var(--red);border-radius:50%;transform:translate(-50%,-50%);z-index:2;box-shadow:0 0 12px var(--red);}
.wheel-ticker{position:absolute;top:-58px;left:50%;transform:translateX(-50%);background:var(--bg-panel);border:1px solid var(--red);color:var(--text);font-family:var(--font-m);font-weight:700;font-size:.9rem;padding:8px 16px;white-space:nowrap;max-width:min(85vw,360px);overflow:hidden;text-overflow:ellipsis;z-index:4;box-shadow:0 0 12px rgba(232,51,43,.35);}
.modal-overlay.roulette-overlay{align-items:center;}

/* ---- fila de jogo do torneio (painel) ---- */
.tr-barra{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.tr-barra label{display:flex;flex-direction:column;gap:5px;font-family:var(--font-m);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);}
.tr-barra input{width:90px;background:var(--bg);border:1px solid var(--line);color:var(--text);font-family:var(--font-m);padding:8px 10px;border-radius:6px;}
.tr-barra input:focus{outline:none;border-color:var(--red);}
.tr-pronta{font-family:var(--font-m);font-size:.78rem;color:var(--success);text-transform:uppercase;letter-spacing:.06em;}
.tr-fila{list-style:none;counter-reset:none;display:flex;flex-direction:column;gap:6px;}
.tr-fila li{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;padding:9px 12px;background:var(--bg-panel-2);}
.tr-fila-pos{font-family:var(--font-m);font-weight:700;color:var(--red-2);width:34px;flex:0 0 34px;}
.tr-fila strong{font-family:var(--font-d);font-size:.92rem;}
.tr-fila span:not(.tr-fila-pos){font-family:var(--font-m);font-size:.78rem;color:var(--text-faint);}
.tn-adm-num.tr-tem-ordem{color:var(--red-2);font-weight:700;}

/* ---- a resposta da roleta ---- */
.tr-restam{font-family:var(--font-m);font-size:.8rem;color:var(--text-faint);}
.tr-resposta{padding-top:6px;}
.tr-pos{font-family:var(--font-m);font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--red-2);margin-bottom:6px;}
.tr-dono{color:var(--text-dim);font-size:.9rem;margin-top:2px;}
.tr-dono strong{color:var(--text);}

/* ============================================================
   CARREGANDO (bolinha girando)
   A tela de cada aba só é desenhada depois que o banco responde. Antes
   disso a área ficava em branco e parecia travamento — agora fica a
   bolinha. A tela de carregamento do site inteiro (#app-loader) mora
   dentro do index.html de propósito, pra aparecer sem esperar este arquivo.
   OBS: sem regra de prefers-reduced-motion aqui. Uma bolinha de carregar
   parada é pior que bolinha nenhuma: dá exatamente a cara de travado que
   ela existe pra evitar.
   ============================================================ */
.view-loading{
  min-height:46vh;
  display:flex;align-items:center;justify-content:center;
}
.view-spinner{
  width:44px;height:44px;border-radius:50%;
  border:3px solid var(--line);
  border-top-color:var(--red);
  animation:view-spin .8s linear infinite;
}
@keyframes view-spin{to{transform:rotate(360deg);}}