/* Spin Club — Torneios. Identidade: preto #F7F7F7, laranja #FF6A00 (até #B23B09), cards #FFFFFF, Poppins. */
:root{
  --bg:#F7F7F7;
  --card:#FFFFFF;
  --card-2:#F4F4F4;
  --line:#E2E2E2;
  --text:#151413;
  --text-2:#3B3A39;   /* texto de apoio: cinza bem escuro para ler fácil no fundo branco */
  --mute:#545454;
  --orange:#FF6A00;
  --orange-2:#B23B09;
  --grad:linear-gradient(135deg, #FF6A00 0%, #B23B09 100%);
  --erro:#D93636;
  --ok:#157347;
  --faixa:#FFF4EA;        /* fundo das faixas que separam as seções (laranja bem suave) */
  --faixa-linha:#FFE0C7;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{font-family:'Poppins',sans-serif; font-weight:400; background:var(--bg); color:var(--text); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;}
h1,h2,h3,.titulo{font-family:'Poppins',sans-serif; font-weight:700; font-style:italic; text-transform:uppercase; letter-spacing:0.005em; line-height:1.05;}
a{color:var(--orange-2);}
img{display:block; max-width:100%; height:auto;}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px;}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- Faixas: seções de largura total que separam os assuntos da página ----------
   .faixa dá o espaço; .faixa-cor pinta o fundo. Dentro de .faixas, as faixas se alternam sozinhas (1ª pintada, 2ª não...). */
.faixa{padding:56px 0;}
.faixa-cor, .faixas > .faixa:nth-child(odd){background:var(--faixa); border-top:1px solid var(--faixa-linha); border-bottom:1px solid var(--faixa-linha);}
.cabeca.faixa-cor{padding-bottom:40px; margin-bottom:32px;}

/* ---------- Topo e menu ---------- */
.topo{position:sticky; top:0; z-index:20; background:rgba(247, 247, 247,0.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.topo .wrap{display:flex; align-items:center; gap:18px; min-height:64px;}
.marca{display:flex; align-items:center; gap:8px; font-weight:700; font-style:italic; text-transform:uppercase; font-size:18px; color:var(--text); text-decoration:none; white-space:nowrap;}
.marca .ponto{width:10px; height:10px; border-radius:50%; background:var(--grad);}
.selo-beta{align-self:flex-end; transform:translateY(4px); margin-left:-2px; padding:1px 6px; border-radius:100px; border:1px solid rgba(255,106,0,.6); color:var(--orange-2); font-size:9.5px; font-weight:700; font-style:normal; letter-spacing:.12em; line-height:1.4;}
.menu{display:flex; gap:4px; margin-left:auto; overflow-x:auto; scrollbar-width:none;}
.menu::-webkit-scrollbar{display:none;}
.menu a{display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:100px; color:var(--text-2); text-decoration:none; font-weight:500; font-size:15px; white-space:nowrap;}
.menu a:hover{color:var(--text);}
.menu a[aria-current=page]{color:var(--text); background:var(--card-2);}

/* ---------- Botões ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px; border-radius:100px; font-family:'Poppins',sans-serif; font-weight:600; font-size:15px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; text-align:center;}
.btn-laranja{background:var(--grad); color:#fff;}
.btn-laranja:hover{filter:brightness(1.06);}
.btn-contorno{background:transparent; border-color:var(--line); color:var(--text);}
.btn-contorno:hover{border-color:var(--orange);}
/* Segundo botão ao lado de um laranja: laranja claro, com mais cor que o contorno */
.btn-laranja-claro{background:rgba(255,106,0,.12); border-color:var(--orange); color:var(--orange-2);}
.btn-laranja-claro:hover{background:rgba(255,106,0,.2);}
.btn-whats{background:#25D366; color:#151413;}
.btn-whats svg{width:20px; height:20px;}

/* ---------- Cabeçalho da página ---------- */
.cabeca{padding:48px 0 28px;}
.cabeca .sobre{color:var(--orange-2); font-weight:600; font-size:14px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:10px;}
.cabeca h1{font-size:clamp(36px, 7vw, 64px); margin-bottom:14px;}
.cabeca p{color:var(--text); max-width:58ch; font-size:17px;}
.cabeca .acoes{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px;}

/* ---------- Filtro ---------- */
.filtro{display:flex; gap:8px; overflow-x:auto; padding:4px 0 18px; scrollbar-width:none;}
.filtro::-webkit-scrollbar{display:none;}
.filtro a{flex-shrink:0; display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:100px; border:1.5px solid var(--line); color:var(--text-2); text-decoration:none; font-weight:500; font-size:14.5px;}
.filtro a[aria-current=true]{background:var(--text); border-color:var(--text); color:var(--bg); font-weight:600;}

/* ---------- Lista ---------- */
.lista{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; padding-bottom:80px;}
.tcard{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden; text-decoration:none; color:var(--text); transition:border-color 0.15s ease, transform 0.15s ease;}
.tcard:hover{border-color:var(--orange); transform:translateY(-2px);}
.tcard-capa{position:relative; aspect-ratio:16/9; background:var(--card-2);}
.tcard-capa img{width:100%; height:100%; object-fit:cover;}
.capa-vazia{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 80% 20%, rgba(255,106,0,0.35), transparent 60%), var(--card-2);}
.capa-vazia span{font-weight:700; font-style:italic; text-transform:uppercase; font-size:22px; color:rgba(21, 20, 19, 0.18);}
.selo-mod{position:absolute; left:12px; top:12px; background:var(--grad); color:#fff; font-size:12px; font-weight:600; padding:5px 12px; border-radius:100px;}
.tcard-corpo{display:flex; flex-direction:column; gap:10px; padding:18px 18px 20px; flex:1;}
.tcard-data{color:var(--orange-2); font-weight:600; font-size:14px;}
.tcard h2{font-size:20px; line-height:1.15;}
.tcard-local{color:var(--text-2); font-size:14px;}
.tcard-rodape{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:12px; border-top:1px solid var(--line); font-size:14px;}
.tcard-valor{font-weight:600;}
.prazo{color:var(--mute); font-size:13px; text-align:right;}
.prazo.fechado{color:var(--erro);}
.vazio{grid-column:1/-1; background:var(--card); border:1px dashed var(--line); border-radius:20px; padding:40px 24px; text-align:center;}
.vazio h2{font-size:22px; margin-bottom:10px;}
.vazio p{color:var(--text-2); margin-bottom:20px;}

/* ---------- Página do torneio ---------- */
.voltar{display:inline-flex; align-items:center; min-height:44px; color:var(--text-2); text-decoration:none; font-size:14.5px; margin-top:16px;}
.voltar:hover{color:var(--text);}
.torneio{display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(280px, 1fr); grid-template-areas:"topo resumo" "corpo resumo"; gap:0 28px; align-items:start; padding:12px 0 90px;}
.torneio-topo{grid-area:topo;}
.torneio-corpo{grid-area:corpo;}
.torneio .resumo{grid-area:resumo;}
.torneio-banner{border-radius:20px; overflow:hidden; aspect-ratio:16/9; background:var(--card-2); margin-bottom:24px; position:relative;}
.torneio-banner img{width:100%; height:100%; object-fit:cover;}
.torneio h1{font-size:clamp(30px, 5.5vw, 48px); margin:10px 0 14px;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;}
.chip{display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:100px; background:var(--card-2); border:1px solid var(--line); color:var(--text-2); font-size:13.5px; font-weight:500;}
.chip.forte{background:var(--grad); border-color:transparent; color:#fff; font-weight:600;}
.secao{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:22px; margin-bottom:18px;}
.secao h2{font-size:18px; margin-bottom:12px; color:var(--orange-2);}
.texto-livre{color:var(--text-2); white-space:pre-line; overflow-wrap:anywhere;}
.resumo{position:sticky; top:84px; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:22px;}
.resumo dl{display:grid; gap:14px; margin-bottom:20px;}
.resumo dt{font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--mute); font-weight:600;}
.resumo dd{font-weight:500; overflow-wrap:anywhere;}
.resumo .valor{font-size:26px; font-weight:700; font-style:italic;}
.resumo .btn{width:100%;}
.resumo .nota{color:var(--mute); font-size:13px; margin-top:12px;}
.aviso-previa{background:rgba(178, 59, 9,0.12); border:1px solid rgba(178, 59, 9,0.45); color:var(--orange-2); border-radius:14px; padding:12px 16px; margin-top:16px; font-weight:500;}

/* ---------- Formulário ---------- */
.form{max-width:820px; padding-bottom:90px;}
.bloco{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px 22px; margin-bottom:18px;}
.bloco h2{font-size:20px; margin-bottom:6px;}
.bloco .ajuda{color:var(--mute); font-size:14px; margin-bottom:18px;}
.campo{margin-bottom:18px; border:0;}
.campo > label, .campo legend{display:block; font-size:14px; font-weight:600; color:var(--text); margin-bottom:8px;}
.campo .opc{color:var(--mute); font-weight:400;}
.campo .dica{display:block; color:var(--mute); font-size:13px; margin-top:6px;}
.obr{color:var(--orange-2);}
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], input[type=password], select, textarea{
  width:100%; font-family:'Poppins',sans-serif; font-size:16px; color:var(--text); background:var(--bg);
  border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; min-height:48px; color-scheme:dark;
}
textarea{min-height:140px; resize:vertical; line-height:1.5;}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,106,0,0.2);}
[aria-invalid=true]{border-color:var(--erro) !important;}
.erro{color:var(--erro); font-size:13.5px; font-weight:500; margin-top:6px;}
.grade2{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
.grade3{display:grid; grid-template-columns:repeat(3, 1fr); gap:0 16px;}
.grade-cidade{display:grid; grid-template-columns:1fr 110px; gap:0 16px;}
.opcoes{display:flex; flex-wrap:wrap; gap:8px;}
.opcao{position:relative; cursor:pointer;}
.opcao input{position:absolute; opacity:0; width:1px; height:1px;}
.opcao span{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:100px; border:1.5px solid var(--line); background:var(--bg); color:var(--text-2); font-size:14.5px; font-weight:500;}
.opcao input:checked + span{background:var(--grad); border-color:transparent; color:#fff; font-weight:600;}
.opcao input:focus-visible + span{outline:2px solid var(--orange); outline-offset:2px;}
fieldset[aria-invalid=true] .opcao span{border-color:var(--erro);}
.isca{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}
.alerta{background:rgba(255,107,107,0.12); border:1px solid rgba(255,107,107,0.45); border-radius:14px; padding:14px 16px; margin-bottom:18px; font-weight:500;}
.alerta ul{margin:8px 0 0 18px; font-weight:400; color:var(--text-2);}
.enviar{width:100%; min-height:54px; font-size:16px;}
.enviar[disabled]{opacity:0.6; cursor:wait;}
.lgpd{color:var(--mute); font-size:13px; margin:-4px 0 16px;}

.sucesso{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:36px 26px; text-align:center; max-width:640px; margin:0 auto 90px;}
.sucesso h2{font-size:clamp(24px, 5vw, 34px); margin-bottom:12px;}
.sucesso p{color:var(--text-2); margin-bottom:12px;}
.sucesso .acoes{display:flex; flex-direction:column; gap:12px; margin-top:22px;}

.rodape{border-top:1px solid var(--line); padding:28px 0 40px; color:var(--mute); font-size:13.5px;}
.rodape a{color:var(--text-2);}

/* ---------- Aviso de cookies (aparece até o visitante escolher; o JS fica em analytics.js) ---------- */
.cookies{position:fixed; left:16px; right:16px; bottom:16px; z-index:60; display:flex; align-items:center; gap:16px; max-width:760px; margin:0 auto; padding:16px 18px; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--orange); border-radius:18px; box-shadow:0 18px 40px rgba(21, 20, 19, .18); font-size:14.5px; color:var(--text-2);}
.cookies[hidden]{display:none;}
.cookies p{flex:1;}
.cookies-botoes{display:flex; gap:8px; flex:none;}
@media (max-width:620px){
  .cookies{flex-direction:column; align-items:stretch; left:10px; right:10px; bottom:10px; gap:12px;}
  .cookies-botoes .btn{flex:1;}
}

@media (max-width:960px){
  .lista{grid-template-columns:1fr 1fr;}
  .torneio{grid-template-columns:1fr; grid-template-areas:"topo" "resumo" "corpo";}
  .torneio .resumo{margin-bottom:18px;}
  .resumo{position:static;}
}
@media (max-width:620px){
  .lista{grid-template-columns:1fr; gap:16px;}
  .grade2, .grade3{grid-template-columns:1fr;}
  .cabeca{padding:30px 0 20px;}
  .faixa{padding:36px 0;}
  .cabeca.faixa-cor{padding-bottom:28px; margin-bottom:24px;}
  .bloco, .secao, .resumo{padding:20px 16px;}
  .topo .wrap{gap:10px;}
  .menu a{padding:0 10px; font-size:14px;}
  .marca{font-size:16px;}
  .menu .menu-inicio{display:none;}
}

/* Campo de arquivo no tema escuro */
input[type=file]{width:100%; color:var(--text-2); font-family:'Poppins',sans-serif; font-size:14px;}
input[type=file]::file-selector-button{margin-right:12px; min-height:44px; padding:0 18px; border-radius:100px; border:1.5px solid var(--line); background:var(--card-2); color:var(--text); font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; cursor:pointer;}
input[type=file]::file-selector-button:hover{border-color:var(--orange);}

/* ---------- Topo: Jogar agora + saldo/entrar (todas as páginas) ---------- */
.menu .menu-inicio{display:none;}
.menu a{padding:0 12px; font-size:14.5px;}
.topo-acoes{display:flex; align-items:center; gap:8px; flex:none;}
.topo-jogar{display:inline-flex; align-items:center; min-height:40px; padding:0 18px; border-radius:100px; background:var(--grad); color:#fff; font-weight:700; font-style:italic; text-transform:uppercase; font-size:14px; letter-spacing:.02em; text-decoration:none; white-space:nowrap;}
.topo-jogar:hover{filter:brightness(1.06);}
.topo-jogar[aria-current=page]{box-shadow:0 0 0 2px rgba(178, 59, 9,.45);}
/* Destaque do Desafie um amigo, ao lado do Jogar agora */
.topo-desafio{display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:100px; border:1.5px solid var(--orange); background:rgba(255,106,0,.12); color:var(--orange-2); font-weight:700; font-style:italic; text-transform:uppercase; font-size:14px; letter-spacing:.02em; text-decoration:none; white-space:nowrap;}
.topo-desafio:hover{background:rgba(255,106,0,.22); color:var(--text);}
.topo-desafio[aria-current=page]{background:var(--orange); color:#FFFFFF;}
.topo-acoes .td-curto{display:none;}
@media (max-width:620px){ .topo-desafio .td-longo{display:none;} .topo-desafio .td-curto{display:inline;} .topo-desafio{padding:0 14px; font-size:13px;} }
@media (max-width:520px){ .topo-acoes .td-longo{display:none;} .topo-acoes .td-curto{display:inline;} .topo-acoes{gap:6px;} }
.topo-entrar, .topo-saldo{display:inline-flex; align-items:center; gap:4px; min-height:40px; padding:0 14px; border-radius:100px; border:1.5px solid var(--line); color:var(--text); font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap;}
.topo-entrar:hover, .topo-saldo:hover{border-color:var(--orange);}
/* Quantas coisas esperam uma ação do jogador (desafios e torneios) */
.topo-pend{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; margin-left:6px; padding:0 6px; border-radius:100px; background:var(--orange); color:#fff; font-size:12px; font-weight:700; line-height:1;}
.topo-saldo strong{color:var(--orange-2);}
/* O topo usa uma largura maior que o conteúdo para o menu caber numa linha; abaixo disso o menu vai para a linha de baixo */
/* (1640: cabe o menu inteiro, até "Comprar pontos", com saldo, Minha conta e o aviso de pendências do jogador logado) */
.topo .wrap{max-width:1640px;}
@media (max-width:1680px){
  .topo .wrap{flex-wrap:wrap; row-gap:0; padding-top:8px;}
  .topo-acoes{margin-left:auto;}
  .menu{order:3; width:100%; margin-left:0; padding-bottom:4px;}
  .menu a{min-height:40px;}
}
@media (max-width:420px){
  .topo-jogar{padding:0 14px; font-size:13px;}
  .topo-entrar, .topo-saldo{padding:0 12px; font-size:13px;}
  .topo-entrar{position:relative;}
  .topo-pend{position:absolute; top:-7px; right:-3px; min-width:18px; height:18px; margin:0; padding:0 5px; font-size:11px; box-shadow:0 0 0 2px var(--bg, #F7F7F7);}
}

/* ---------- Jogador: foto (ou inicial) + nickname, onde o nome aparece em público ---------- */
.jogador{display:inline-flex; align-items:center; gap:8px; min-width:0; vertical-align:middle;}
.jogador-nome{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.avatar{display:inline-block; flex:none; border-radius:50%; object-fit:cover; background:var(--card-2); border:1.5px solid var(--line);}
.avatar-letra{display:inline-grid; place-items:center; color:var(--orange-2); font-weight:700; font-style:normal; line-height:1;}
a.jogador, a.jogador-link{color:inherit; text-decoration:none;}
a.jogador:hover .jogador-nome, a.jogador-link:hover{text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:3px;}

@media (max-width:1060px){ .topo .marca{margin-bottom:6px;} }
/* Celulares bem estreitos (360px) logados: saldo + conta + jogar + desafiar cabem sem rolar para o lado */
@media (max-width:380px){ .topo-acoes{gap:4px;} .topo-entrar, .topo-saldo{padding:0 10px;} }

/* ---------- Topo no celular: 2 linhas em vez de 3 ----------
   Linha 1: marca + saldo + conta/entrar. Linha 2: Desafiar e Jogar (em destaque) abrindo o menu, que rola para o lado.
   Os botões Desafiar/Jogar da direita somem e aparecem como os primeiros itens do menu. */
.menu .menu-fixos{display:none;}
@media (max-width:620px){
  .topo .wrap{padding-top:6px; row-gap:2px;}
  .topo .marca{margin-bottom:0; font-size:16px;}
  .topo-acoes{gap:6px;}
  .topo-acoes .topo-desafio, .topo-acoes .topo-jogar{display:none;}
  .topo-entrar, .topo-saldo{min-height:38px;}
  .menu{align-items:center; gap:2px; padding-bottom:6px;}
  .menu a{min-height:40px;}
  /* Desafiar e Jogar ficam presos no começo da linha; só o resto do menu rola por baixo deles */
  .menu .menu-fixos{display:flex; align-items:center; flex:none; position:sticky; left:0; z-index:1; padding-right:8px; background:var(--bg); box-shadow:10px 0 10px -6px var(--bg);}
  .menu .menu-desafio, .menu .menu-jogar{display:inline-flex; min-height:36px; padding:0 14px; border-radius:100px; font-weight:700; font-style:italic; text-transform:uppercase; font-size:13px; letter-spacing:.02em;}
  .menu .menu-desafio{border:1.5px solid var(--orange); background:rgba(255,106,0,.12); color:var(--orange-2);}
  .menu .menu-desafio[aria-current=page]{background:var(--orange); color:#FFFFFF;}
  .menu .menu-jogar{margin-left:6px; background:var(--grad); color:#FFFFFF;}
  .menu .menu-jogar[aria-current=page]{box-shadow:0 0 0 2px rgba(178, 59, 9,.45);}
}
@media (max-width:360px){ .selo-beta{display:none;} }

/* ---------- Ícone claro/escuro do topo (lua no site claro, sol no escuro) ---------- */
.topo-tema{display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--line); color:var(--text); text-decoration:none;}
.topo-tema:hover{border-color:var(--orange); color:var(--orange-2);}
.topo-tema .tema-sol{display:none;}
html[data-tema="escuro"] .topo-tema .tema-lua{display:none;}
html[data-tema="escuro"] .topo-tema .tema-sol{display:block;}
@media (max-width:620px){ .topo-tema{width:38px; height:38px;} }
/* Tablet: com o ícone claro/escuro, os botões usam os nomes curtos para o topo continuar com 2 linhas */
@media (max-width:900px){ .topo-acoes .td-longo{display:none;} .topo-acoes .td-curto{display:inline;} }