/* Esportes (Sportacore) — página /esportes (06/10/2026), no modelo da página de esportes do site de
   referência pedido pelo dono: faixa de anúncio no topo, cabeçalho de ponta a ponta (logo, divisória, abas
   Cassino/Esportes, busca, caixa de saldo com Depositar e o botão da conta) e o sportsbook em tela cheia, fundo
   preto, sem menu lateral fixo, rodapé, barra de baixo nem balão do chat. Medidas do modelo (cabeçalho de 64 px,
   56 no celular; caixas de 40 px com cantos de 12; faixa de 43), cores da bet (verde no lugar do azul).
   Este arquivo só carrega nesta página: as regras sobre a moldura (.n1-top, .n1-side…) não mexem nas outras. */

.n1{
  --sb-faixa:0px;
  --sb-topo:64px;
  --sb-caixa:rgba(37,211,102,.07);      /* fundo das caixas do cabeçalho (o "secundário" do modelo, em verde) */
  --sb-linha:rgba(255,255,255,.05);     /* borda das caixas */
  --sb-linha-2:rgba(255,255,255,.10);   /* borda do cabeçalho e divisória */
}
body.sb-com-faixa{--sb-faixa:43px}

/* ===== Faixa de anúncio ===== */
.sb-faixa{
  position:fixed;top:0;left:0;right:0;z-index:125;height:43px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,#17B26A 0%,#0E7A47 100%);color:#fff;
  border-bottom:1px solid var(--sb-linha-2);box-shadow:0 1px 2px rgba(0,0,0,.25);
  font:14px/20px var(--n1-font);
}
.sb-faixa-corpo{
  flex:1 1 auto;width:100%;display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;height:100%;
  padding:0 40px;color:inherit;text-decoration:none;cursor:pointer;
}
div.sb-faixa-corpo{cursor:default}
.sb-faixa-corpo svg{width:16px;height:16px;flex:0 0 auto}
.sb-faixa-texto{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700;text-transform:uppercase}
.sb-faixa-botao{
  flex:0 0 auto;height:30px;display:inline-flex;align-items:center;padding:0 12px;border-radius:6px;
  background:#fff;color:#000;border:1px solid rgba(0,0,0,.1);font:600 12px var(--n1-font);transition:opacity .2s;
}
.sb-faixa-corpo:hover .sb-faixa-botao{opacity:.9}
.sb-faixa-fechar{
  position:absolute;right:12px;top:50%;width:28px;height:28px;margin-top:-14px;display:grid;place-items:center;
  border:0;border-radius:6px;background:transparent;color:inherit;opacity:.8;cursor:pointer;transition:background .2s,opacity .2s;
}
.sb-faixa-fechar svg{width:16px;height:16px}
.sb-faixa-fechar:hover{background:rgba(0,0,0,.1);opacity:1}
.sb-faixa a:focus-visible,.sb-faixa-fechar:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:2px}

/* ===== Menu lateral: gaveta em qualquer largura (abre pelo "Menu" da conta; o esportes.js cuida, com a classe
   sb-gaveta-aberta — o novo1.js tira a mobile-open a cada resize no PC). Fechada fica invisível de verdade: sem
   a sombra vazando na borda e fora do Tab. ===== */
.n1 .n1-side{
  width:286px;padding:0 12px 16px;transform:translateX(-100%);visibility:hidden;box-shadow:none;z-index:130;
  transition:transform .25s,visibility 0s linear .25s;
}
.n1 .n1-side.sb-gaveta-aberta{transform:none;visibility:visible;box-shadow:0 0 40px rgba(0,0,0,.6);transition:transform .25s}
.n1 .sidebar-overlay{z-index:128}

/* ===== Cabeçalho ===== */
.n1 .n1-top{
  left:0;top:var(--sb-faixa);height:var(--sb-topo);gap:0;padding:0 16px 0 0;
  background:#000;border-bottom:1px solid var(--sb-linha-2);
}
.n1 .n1-hamb{display:none}
/* logo (128 × 32) e a divisória de 1 px depois dele */
.n1 .n1-top-logo{position:relative;display:flex;align-items:center;flex:0 0 auto;height:100%;padding:0 16px}
.n1 .n1-top-logo img{width:128px;height:32px;max-width:none;object-fit:contain;object-position:left}
.n1 .n1-top-logo::after{content:'';position:absolute;right:-1px;top:50%;width:1px;height:32px;margin-top:-16px;background:var(--sb-linha-2)}

/* abas Cassino/Esportes: caixa de 40 px, cada aba metade, a ligada em verde com brilho por cima */
.n1 .n1-abas{
  position:relative;flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:222px;height:40px;padding:2px;gap:0;margin-left:17px;
  border-radius:12px;border:1px solid var(--sb-linha);background:var(--sb-caixa);
}
.n1 .n1-aba{
  position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:100%;padding:0 12px;overflow:hidden;
  border:1px solid transparent;border-radius:9px;background:transparent;color:var(--n1-muted);
  font:700 12px var(--n1-font);white-space:nowrap;text-decoration:none;transition:color .2s;
}
.n1 .n1-aba svg{width:18px;height:18px;flex:0 0 auto}
.n1 .n1-aba:hover{color:var(--n1-accent)}
.n1 .n1-aba.is-on{
  color:var(--n1-accent-ink);
  background:
    linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 55%) padding-box,
    linear-gradient(180deg,#25D366 0%,rgba(37,211,102,.9) 50%,#1A9E4C 100%) padding-box,
    linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.1) 50%,rgba(0,0,0,.4)) border-box;
}
.n1 .n1-aba.is-on:hover{color:var(--n1-accent-ink)}
.n1 .n1-aba:focus-visible{outline:2px solid var(--n1-accent);outline-offset:2px}

/* busca (vai para /games?search=) */
.n1-busca-topo{
  flex:1 1 0;max-width:22rem;min-width:140px;height:40px;margin-left:8px;display:flex;align-items:center;gap:12px;padding:0 12px;
  border-radius:12px;border:1px solid var(--sb-linha);background:var(--sb-caixa);color:var(--n1-muted);
  transition:border-color .2s,color .2s;
}
.n1-busca-topo:hover,.n1-busca-topo:focus-within{border-color:var(--sb-linha-2);color:var(--n1-text)}
.n1-busca-topo svg{width:16px;height:16px;flex:0 0 auto;opacity:.7}
.n1-busca-topo input{
  flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:transparent;
  color:var(--n1-text);font:400 14px var(--n1-font);-webkit-appearance:none;appearance:none;
}
.n1-busca-topo input::placeholder{color:var(--n1-muted);opacity:1}
.n1-busca-topo input::-webkit-search-cancel-button{display:none}

/* lado direito: caixa do saldo com Depositar dentro, e o botão da conta */
.n1 .n1-top-dir{margin-left:auto;padding-left:16px;gap:8px}
.n1 .n1-logado{gap:8px}
.n1 .n1-logado .topbar-notif{display:none}
.n1 .n1-carteira{height:40px;gap:8px;padding:2px 2px 2px 8px;border-radius:12px;border:1px solid var(--sb-linha);background:var(--sb-caixa)}
.n1 .n1-carteira-saldo{align-items:flex-end;text-align:right;gap:2px;padding:0}
.n1 .n1-carteira-saldo small{font-size:10px;font-weight:600;line-height:1;letter-spacing:.14em;color:var(--n1-muted)}
.n1 .n1-carteira-saldo .topbar-balance-val{font-size:14px;font-weight:700;line-height:1.1;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.n1 .n1-carteira-recarregar{display:none}
/* Depositar como no modelo: verde-esmeralda com texto e ícone brancos, borda de brilho e reflexo no alto. O ícone
   da carteira em duas tonalidades vem por máscara (o SVG do cabeçalho é o de todas as páginas). */
.n1 .n1-carteira-depositar{
  width:auto;height:100%;margin:0;padding:0 16px;gap:8px;border:1px solid transparent;border-radius:9px;color:#fff;
  font:700 12px var(--n1-font);
  background:
    linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 60%) padding-box,
    linear-gradient(180deg,#10B981 0%,#10B981 50%,#0B815A 100%) padding-box,
    linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.1) 50%,rgba(0,0,0,.4)) border-box;
}
.n1 .n1-carteira-depositar span{display:inline}
.n1 .n1-carteira-depositar svg{display:none}
.n1 .n1-carteira-depositar::before{
  content:'';flex:0 0 auto;width:16px;height:16px;background:currentColor;forced-color-adjust:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath opacity='.4' d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5V8H6.5a1 1 0 0 0 0 2H20v7.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5z'/%3E%3Cpath d='M15 12h6v4h-6a2 2 0 0 1 0-4zm.5 1.25a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath opacity='.4' d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5V8H6.5a1 1 0 0 0 0 2H20v7.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5z'/%3E%3Cpath d='M15 12h6v4h-6a2 2 0 0 1 0-4zm.5 1.25a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.n1 .topbar-user-btn{
  display:flex;align-items:center;gap:6px;width:auto;height:40px;padding:2px 8px 2px 2px;
  border-radius:12px;border:1px solid var(--sb-linha);background:var(--sb-caixa);box-shadow:none;
}
/* o tema verde (hn-tema.css) pinta borda e brilho com html.hn-tema: só cor aqui, para não passar por cima das
   medidas do celular abaixo */
html.hn-tema:not([data-theme="light"]) .n1 .topbar-user-btn{border-color:var(--sb-linha);box-shadow:none}
html.hn-tema:not([data-theme="light"]) .n1 .topbar-user-btn:hover{border-color:var(--sb-linha-2);box-shadow:none}
.n1 .topbar-user-btn .topbar-user-avatar{box-sizing:border-box;width:34px;height:34px;flex:0 0 auto;border-radius:9px;object-fit:cover;background:rgba(0,0,0,.5)}
/* sem foto: quadrado com o ícone de pessoa de 16 px no meio, como no modelo (o topo3.svg já é o ícone) */
.n1 .topbar-user-btn .topbar-user-avatar[src*="/img/novo/topo3.svg"]{padding:9px;object-fit:contain;background:#0f3a25}
/* no tema claro o theme.css pinta avatar .svg de branco (filter no <img> inteiro, fundo junto): aqui o ícone já é
   claro sobre o verde escuro */
html[data-theme="light"] .n1 .topbar-user-btn .topbar-user-avatar[src*="/img/novo/topo3.svg"]{filter:none;opacity:1}
/* seta do menu da conta, numa caixa de 32 × 34 (28 no celular) */
.n1 .topbar-user-btn::after{
  content:'';flex:0 0 auto;width:32px;height:100%;border-radius:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238fa69a'%3E%3Cpath opacity='.4' d='M6.6 9.5H12V16a1.3 1.3 0 0 1-.9-.4L5.9 10.8c-.5-.5-.1-1.3.7-1.3z'/%3E%3Cpath d='M12 9.5h5.4c.8 0 1.2.8.7 1.3l-5.2 4.8a1.3 1.3 0 0 1-.9.4z'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:background-color .2s;
}
.n1 .topbar-user-btn:hover::after{
  background:rgba(0,0,0,.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eaf7ef'%3E%3Cpath opacity='.4' d='M6.6 9.5H12V16a1.3 1.3 0 0 1-.9-.4L5.9 10.8c-.5-.5-.1-1.3.7-1.3z'/%3E%3Cpath d='M12 9.5h5.4c.8 0 1.2.8.7 1.3l-5.2 4.8a1.3 1.3 0 0 1-.9.4z'/%3E%3C/svg%3E") center/16px no-repeat;
}
/* visitante: Entrar e Criar conta com a mesma altura das caixas (medidas do PC também a 768 px, onde o novo1.css
   já aplica as do celular) */
.n1 .n1-entrar,.n1 .n1-criar,html.hn-tema:not([data-theme="light"]) .n1 .n1-criar{height:40px;border-radius:12px;font-size:13.5px}
.n1 .n1-entrar{padding:0 14px}
.n1 .n1-criar,html.hn-tema:not([data-theme="light"]) .n1 .n1-criar{padding:0 18px}

/* ===== Sportsbook em tela cheia, embaixo do cabeçalho ===== */
.n1 .n1-main{margin-left:0;padding:0}
.n1 .n1-bnav{display:none}
.n1 .cb-root[data-cb-open="false"] .cb-bubble{display:none}
.sb-oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.sb{position:fixed;left:0;right:0;bottom:0;top:calc(var(--sb-faixa) + var(--sb-topo));z-index:1;background:#000}
.sb-quadro{position:absolute;inset:0;overflow:hidden;background:#000}
/* O iframe carrega por baixo da tela de "abrindo" (visibility, não display: com display:none o sportsbook
   mediria largura zero ao abrir). */
.sb-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000;color-scheme:dark;visibility:hidden}
.sb-quadro[data-estado="aberto"] .sb-frame{visibility:visible}

.sb-estado{position:absolute;inset:0;z-index:1;display:none;place-items:center;padding:20px;background:#000;text-align:center}
.sb-quadro[data-estado="carregando"] .sb-estado--carregando,
.sb-quadro[data-estado="visitante"] .sb-estado--visitante,
.sb-quadro[data-estado="fechado"] .sb-estado--fechado,
.sb-quadro[data-estado="erro"] .sb-estado--erro,
.sb-quadro[data-estado="expirado"] .sb-estado--expirado{display:grid}
.sb-estado--visitante,.sb-estado--fechado,.sb-estado--erro,.sb-estado--expirado{
  background:radial-gradient(90% 70% at 50% 0%,rgba(37,211,102,.08) 0%,rgba(37,211,102,0) 60%),#000;
}

.sb-estado--carregando{align-content:center;gap:14px;color:var(--n1-muted);font:600 14px var(--n1-font)}
.sb-estado--carregando p{margin:0}
.sb-roda{width:38px;height:38px;border-radius:50%;border:3px solid rgba(37,211,102,.18);border-top-color:var(--n1-accent);animation:sb-gira .8s linear infinite;justify-self:center}
@keyframes sb-gira{to{transform:rotate(360deg)}}

.sb-cartao{
  max-width:440px;display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 24px;
  border-radius:12px;border:1px solid var(--sb-linha);background:var(--sb-caixa);
}
.sb-cartao h2{margin:0;font:800 20px/1.25 var(--n1-font);color:var(--n1-text)}
.sb-cartao p{margin:0;color:var(--n1-muted);font:500 14px/1.55 var(--n1-font)}
.sb-cartao .sb-18{display:flex;align-items:center;gap:8px;font-size:12px}
.sb-icone{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(37,211,102,.12);border:2px solid rgba(37,211,102,.5);color:var(--n1-accent);box-shadow:0 6px 16px rgba(0,0,0,.35)}
.sb-icone svg{width:32px;height:32px}
.sb-icone--alerta{background:rgba(250,204,21,.10);border-color:rgba(250,204,21,.5);color:#facc15}

.sb-botoes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}
.sb-btn{
  display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:140px;padding:0 22px;border:0;border-radius:12px;
  background:linear-gradient(135deg,#34D399 0%,#25D366 50%,#1A9E4C 100%);color:var(--n1-accent-ink);
  font:700 14px var(--n1-font);text-decoration:none;cursor:pointer;transition:filter .2s,transform .15s;
}
.sb-btn:hover{filter:brightness(1.08)}
.sb-btn:active{transform:translateY(1px)}
.sb-btn:focus-visible{outline:2px solid var(--n1-accent);outline-offset:2px}
.sb-btn--linha{background:transparent;color:var(--n1-text);border:1px solid var(--sb-linha-2)}
.sb-btn--linha:hover{background:rgba(255,255,255,.06);filter:none}

@media(prefers-reduced-motion:reduce){.sb-roda{animation:none}}
@media(forced-colors:active){.n1 .n1-carteira-depositar::before{background:ButtonText}}

/* ===== Até 1024 px: o novo1.css mexe no cabeçalho e no menu; aqui fica igual ao PC ===== */
@media(max-width:1024px){
  .n1 .n1-top{padding:0 16px 0 0;gap:0}
  .n1 .n1-top-logo{display:flex}
  .n1 .n1-hamb{display:none}
  .n1 .n1-main{padding:0}
  .n1 .cb-root{bottom:22px}
}
/* a busca precisa de espaço: abaixo de 960 px ela ficaria espremida (campo de 0 px) ou, com o mínimo de 140 e um
   saldo de 7 dígitos, empurraria a conta para fora da tela */
@media(max-width:959.98px){
  .n1-busca-topo{display:none}
}

/* ===== Celular (abaixo de 768 px, o "md" do modelo): cabeçalho de 56 px, logo à esquerda e, encostados à
   direita, a caixa do saldo (só o tamanho do valor) e a conta ===== */
@media(max-width:767.98px){
  .n1{--sb-topo:56px}
  .n1 .n1-top{padding:0}
  .n1 .n1-top-logo{padding:0 8px 0 16px}
  .n1 .n1-top-logo img{width:112px;height:36px;max-width:none}
  .n1 .n1-top-logo::after{display:none}
  .n1 .n1-abas{display:none}
  .n1 .n1-top-dir{flex:0 1 auto;min-width:0;padding:0 12px 0 8px;gap:6px}
  .n1 .n1-logado{flex:0 1 auto;min-width:0;justify-content:flex-end;gap:6px}
  .n1 .n1-carteira{flex:0 1 auto;min-width:0;max-width:100%;height:40px;gap:4px;padding:2px 2px 2px 8px}
  .n1 .n1-carteira-saldo{flex:1 1 auto;min-width:0}
  .n1 .n1-carteira-saldo .topbar-balance-val{font-size:12px}
  .n1 .n1-carteira-depositar{flex:0 0 36px;width:36px;height:36px;padding:0;gap:0}
  .n1 .n1-carteira-depositar span{display:none}
  .n1 .topbar-user-btn{padding:2px 6px 2px 2px;gap:4px}
  .n1 .topbar-user-btn::after{width:28px}
  .n1 .n1-auth{gap:6px}
  .n1 .n1-entrar{padding:0 10px}
  .n1 .n1-criar,html.hn-tema:not([data-theme="light"]) .n1 .n1-criar{padding:0 12px;font-size:12.5px}
  .sb-cartao h2{font-size:18px}
  .sb-btn{min-width:0;flex:1 1 140px}
}
@media(max-width:639.98px){
  .sb-faixa-corpo{padding:0 40px 0 12px}
  .sb-faixa-fechar{right:8px}
}
@media(max-width:379.98px){
  .n1 .n1-top-logo img{width:96px}
  .n1 .n1-top-dir{padding:0 8px 0 4px;gap:4px}
  .n1 .n1-carteira{gap:2px;padding-left:8px}
  .n1 .n1-carteira-saldo{padding:0 4px}
  .n1 .n1-carteira-saldo small{font-size:8px;letter-spacing:normal}
  .n1 .n1-carteira-depositar{flex-basis:32px;width:32px;height:32px}
  .n1 .topbar-user-btn{width:40px;padding:2px;gap:0}
  .n1 .topbar-user-btn::after{display:none}
  .n1 .topbar-dropdown{right:-6px}
}