/* ===========================================================================
   mobile.css, OddsFlow no celular
   ---------------------------------------------------------------------------
   CONCEITO: prancheta do técnico.
   Quadro verde-escuro, linhas de giz, peças magnéticas. O nome do app é
   OddsFlow, a estética vem do objeto que um técnico segura na beira do campo,
   não de um "dark mode" genérico.

   REGRAS DE MOBILE aplicadas aqui:
   - navegação fica embaixo (zona do polegar), nunca em menu escondido
   - todo alvo de toque tem no mínimo 48px
   - respeita a "safe area" do iPhone (área do notch e da barra inferior)
   - resposta visual instantânea ao toque (:active)
   - respeita quem desativou animações no sistema
   =========================================================================== */

@media (max-width: 820px) {

  :root {
    --chalk: #e9f1e7;
    --chalk-dim: rgba(233, 241, 231, .22);
    --board: #0e1a13;
    --tab-h: 62px;
  }

  /* --- Corpo: espaço embaixo pra barra de navegação não cobrir conteúdo --- */
  body {
    padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom));
  }

  /* Só as laterais, de propósito. Em atalho ("padding: 0 18px") isso zerava
     também o espaçamento de CIMA de todo elemento .wrap, e o hero ficava
     grudado na barra de navegação no celular, sem respiro nenhum. */
  .wrap { padding-left: 18px; padding-right: 18px; }

  /* RITMO VERTICAL NO CELULAR
     Mesma escala do desktop, um degrau abaixo: 64px em vez de 96px. A tela
     é menor, então o mesmo respiro do desktop empurraria conteúdo demais
     pra fora da primeira dobra, mas continua sendo espaço suficiente pra
     uma seção não parecer colada na seguinte. */
  section { margin-block: var(--sp-5); }
  section:first-of-type { margin-block-start: var(--sp-3); }

  /* Cabecalho de pagina: 40px em vez de 64px. Na tela do celular, 64px em
     cima empurraria o titulo pra fora da primeira dobra. Sem esta regra,
     o padding do desktop valia tambem aqui e cada pagina abria com uma
     distancia diferente da barra de cima. */
  .page-head { padding-block: var(--sp-4) var(--sp-3); }
  .page-content { padding-bottom: var(--sp-4); }

  /* -------------------------------------------------------------------------
     TOPO, enxuto. Só marca e conta. O resto vai pra barra de baixo.
     ------------------------------------------------------------------------- */
  nav { padding-top: env(safe-area-inset-top); }

  .nav-in { padding: 11px 18px; }

  .nav-links { display: none; }          /* vira a barra inferior */

  .logo { font-size: 25px; }

  /* Linha de giz sob o topo: a marcação lateral do campo */
  nav::after {
    content: "";
    display: block;
    height: 1px;
    background: repeating-linear-gradient(
      to right,
      var(--chalk-dim) 0 14px,
      transparent 14px 22px
    );
  }

  /* -------------------------------------------------------------------------
     BARRA INFERIOR, o alcance do polegar
     ------------------------------------------------------------------------- */
  .tabbar {
    position: fixed;
    /* "top: auto" é o que conserta a tela tampada no celular.
       Em style.css existe "nav{position:sticky;top:0}" pra barra de cima.
       A barra de baixo também é um <nav>, então herdava aquele "top:0".
       Aqui a classe .tabbar troca o position pra fixed, mas nada disputava
       a propriedade "top", e ela continuava valendo 0. Com top:0 E bottom:0
       ao mesmo tempo, um elemento fixed estica e ocupa a ALTURA INTEIRA da
       tela. Como esta barra tem fundo escuro quase opaco e desfoque, ela
       virava uma cortina por cima da página toda: os 4 ícones apareciam
       centralizados no meio da tela e o resto do site sumia atrás dela. */
    top: auto;
    bottom: 0; left: 0; right: 0;
    width: 100%;
    z-index: 90;
    background: rgba(7, 15, 10, .93);
    backdrop-filter: blur(18px);
    border-top: 1px solid var(--chalk-dim);
    padding-bottom: env(safe-area-inset-bottom);

    /* Colunas iguais, ponta a ponta, sem rolagem. grid-template-columns vem
       inline no base.html (repeat(N, 1fr), N = quantidade real de itens),
       não fixo aqui: assim o CSS não precisa saber quantos itens existem.
       Tentativa anterior usava só grid-auto-flow:column + grid-auto-columns:
       1fr, sem grid-template-columns nenhum. Parece equivalente na teoria,
       mas na prática as colunas não ficavam iguais, o total ficava mais
       largo que a tela, e o excesso ficava escondido fora da viewport, os
       últimos itens (Contato, Meu perfil) sumiam. Comprovado com Chromium
       headless: grid-auto-columns:1fr sozinho NÃO distribui a largura
       igualmente aqui, grid-template-columns:repeat(N,1fr) sim. */
    display: grid;
  }

  /* 6 ITENS (o caso de hoje: Esportes, Análise, Comparador, Calculadora,
     Contato, Meu perfil/Entrar): o grid continua uniforme, só com respiro
     mais justo pra "Comparador" e "Calculadora" caberem numa linha só a
     375px. Se algum rótulo mesmo assim não couber, ".tl" corta com
     reticências em vez de quebrar linha ou estourar a coluna vizinha. */
  .tabbar.muitos a {
    padding-left: 2px;
    padding-right: 2px;
    font-size: 9.5px;
    letter-spacing: .2px;
  }

  .tabbar a {
    min-height: 48px;                     /* alvo de toque confortável */
    /* Item de grid tem min-width:auto por padrão: NUNCA encolhe abaixo do
       conteúdo. Com white-space:nowrap embaixo, o rótulo "Comparador" trava
       a coluna no tamanho do texto inteiro, os 6 "1fr" não conseguem ficar
       iguais de verdade, a grade fica mais larga que a tela e, com
       overflow-x:hidden no body, os últimos itens saem cortados. De fora
       parecia tudo empurrado pra esquerda. min-width:0 deixa a coluna
       encolher de verdade, e o ".tl" (abaixo) trunca o texto se precisar. */
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 4px 8px;
    text-decoration: none;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
    /* Rótulo em uma linha só. "Comparador" e "Calculadora" são longos e,
       podendo quebrar, empurrariam a barra pra duas linhas de altura. */
    white-space: nowrap;
    /* align-items:center deixa os filhos do tamanho do CONTEÚDO deles, não
       da coluna, então nada aqui cortava o rótulo, ele só vazava por cima
       da coluna vizinha. overflow:hidden garante que nada escape. */
    overflow: hidden;
  }

  .tabbar a .ti { display:flex; flex-shrink:0; }
  .tabbar a .ti svg { width:20px; height:20px; }
  .tabbar a .tl {
    /* align-self:stretch pega a largura REAL da coluna (que align-items:
       center do pai não dava), só assim max-width/ellipsis abaixo têm
       contra o que cortar de verdade, em vez de só encolher visualmente
       sem nunca truncar. */
    align-self: stretch;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }

  .tabbar a.on { color: var(--chalk); }

  /* Marcador da aba ativa: um risco de giz curto, como quem sublinha à mão */
  .tabbar a.on::before {
    content: "";
    position: absolute;
    top: 0;
    width: 26px;
    height: 2px;
    background: var(--amber);
    border-radius: 2px;
  }

  .tabbar a { position: relative; }

  .tabbar a:active { color: var(--amber); }

  /* -------------------------------------------------------------------------
     TÍTULOS, placar de estádio
     ------------------------------------------------------------------------- */
  h1 { font-size: 38px !important; line-height: .95; }

  /* Arco de giz no canto do título: o círculo central do campo, cortado */
  /* Sem padding-top proprio: quando o .board-arc tambem e .page-head, os
     26px daqui venciam os 40px do cabecalho (esta regra vem depois no
     arquivo) e a pagina de esportes abria mais colada que as outras. O arco
     de giz e posicionado por absolute, nao precisa desse espaco. */
  .board-arc {
    position: relative;
  }
  .board-arc::before {
    content: "";
    position: absolute;
    top: -34px; right: -46px;
    width: 128px; height: 128px;
    border: 1px solid var(--chalk-dim);
    border-radius: 50%;
    pointer-events: none;
  }

  /* -------------------------------------------------------------------------
     TIRA DE CATEGORIAS, rolagem horizontal com encaixe
     ------------------------------------------------------------------------- */
  .esp-strip {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 3px 18px 14px;
    margin: 0 -18px;
    scrollbar-width: none;
  }
  .esp-strip::-webkit-scrollbar { display: none; }

  .esp-strip .chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 15px;
    border: 1px solid var(--chalk-dim);
    border-radius: 100px;
    background: transparent;
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .esp-strip .chip.on {
    background: var(--chalk);
    border-color: var(--chalk);
    color: #08130c;
  }
  .esp-strip .chip:active { transform: scale(.96); }

  /* -------------------------------------------------------------------------
     PEÇAS, cada esporte/liga é uma peça magnética no quadro
     ------------------------------------------------------------------------- */
  .esp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .esp-card {
    min-height: 112px;
    padding: 15px 14px;
    border-radius: 15px;
    background: var(--board);
    border: 1px solid var(--chalk-dim);
    -webkit-tap-highlight-color: transparent;
    transition: transform .1s ease;
  }
  /* Peça sendo pressionada contra o quadro */
  .esp-card:active { transform: scale(.97); }
  .esp-card:hover { transform: none; }

  .esp-card .ic { font-size: 25px; margin-bottom: 8px; }
  .esp-card .tt { font-size: 14.5px; line-height: 1.2; }
  .esp-card .sb { font-size: 11.5px; }
  .esp-tag { top: 9px; right: 9px; font-size: 8.5px; padding: 2px 6px; }

  /* -------------------------------------------------------------------------
     JOGO, o confronto, escrito como num quadro de escalação
     ------------------------------------------------------------------------- */
  .esp-jogo {
    padding: 15px 14px;
    border-radius: 15px;
    background: var(--board);
  }

  .esp-jogo .times {
    font-size: 15.5px;
    line-height: 1.35;
    margin-bottom: 13px;
  }

  .esp-res { grid-template-columns: 1fr; gap: 7px; }

  /* Resultado deitado: nome à esquerda, número à direita. Escaneável no polegar. */
  .esp-res .r {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 13px;
    min-height: 48px;
  }
  .esp-res .r .n { margin-bottom: 0; flex: 1; padding-right: 12px; }
  .esp-res .r .p { font-size: 21px; }
  .esp-res .r .o { text-align: right; }

  /* Barra de giz: a probabilidade desenhada, não preenchida */
  .esp-res .r { position: relative; overflow: hidden; }
  .esp-res .r::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    height: 2px;
    width: var(--pct, 0%);
    background: var(--amber);
    opacity: .55;
  }

  .esp-trilha { font-size: 12px; margin-bottom: 16px; }
  .esp-aviso { padding: 13px 14px; font-size: 13px; border-radius: 13px; }

  /* -------------------------------------------------------------------------
     RODAPÉ, encolhe. No celular ninguém lê rodapé gigante.
     ------------------------------------------------------------------------- */
  .foot-in { flex-direction: column; gap: var(--sp-3); }
  /* precisa ser "footer.wrap" pelo mesmo motivo explicado em style.css:
     a classe .wrap tem mais peso que o seletor "footer" sozinho e zerava
     esse espaçamento. */
  footer.wrap { padding: var(--sp-5) 18px var(--sp-3); }

  /* -------------------------------------------------------------------------
     ALVO DE TOQUE dos links secundários.
     Medido no celular: link de rodapé tinha 31px de altura, "Esqueci minha
     senha" 15px, migalha de navegação 17px. Tudo abaixo do mínimo confortável,
     e é onde o dedo erra. Aqui só cresce a área tocável, o desenho não muda.
     ------------------------------------------------------------------------- */
  .foot-col a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 4px 0;
  }

  .page-head .crumb a { display: inline-block; padding: 14px 0; }

  .nav-login { display: inline-flex; align-items: center; min-height: 48px; padding: 0 8px; }

  /* Link no meio de uma frase ("Já tem conta? Entrar"): ganha área tocável
     por fora sem quebrar a linha do texto. */
  .auth-foot a { display: inline-block; padding: 13px 8px; margin: 0 -8px; }

  /* Marca no topo, é o atalho pra home */
  .nav-in > a:first-child { display: inline-flex; align-items: center; min-height: 48px; }

  /* Ação secundária do topo da home. O risco de giz acompanha o novo
     espaçamento pra não descolar do texto. */
  .hero-link { display: inline-block; padding: 12px 0; }
  .hero-link::after { bottom: 10px; }

  /* -------------------------------------------------------------------------
     FORMULÁRIOS, 16px evita o zoom automático do iOS ao focar o campo
     ------------------------------------------------------------------------- */
  input, select, textarea { font-size: 16px !important; min-height: 48px; }

  /* Alvo de toque confortável em todo botão, mas SEM forçar largura total:
     forçar 100% quebrava qualquer caixa com dois botões lado a lado
     (era o que travava o aviso de idade no celular). */
  .btn { min-height: 48px; padding: 13px 20px; }

  /* Largura total só onde o botão é a ação única da seção */
  .hero-cta .btn,
  form .btn,
  .btn-block { width: 100%; }

  /* ---- Aviso de idade: empilha os botões e cabe em tela estreita ---- */
  .age-gate { padding: 16px; }
  .age-gate-box { padding: 28px 20px; width: 100%; max-width: 380px; }
  .age-gate-box h2 { font-size: 19px; }
  .age-gate-box p { font-size: 13.5px; }
  .age-gate-btns { flex-direction: column; gap: 10px; }
  .age-gate-btns .btn { width: 100%; }
}

/* Barra inferior só existe no celular */
@media (min-width: 821px) {
  .tabbar { display: none; }
}

/* Quem pediu menos movimento no sistema, recebe menos movimento */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Foco visível pra quem navega por teclado */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ===========================================================================
   TELAS ESTREITAS (375px = iPhone SE / iPhone 13 mini / a maioria dos Android)
   ---------------------------------------------------------------------------
   Aqui é onde site feito no desktop costuma quebrar: algo estoura a largura,
   aparece rolagem horizontal e a página fica torta. As regras abaixo garantem
   que nada ultrapasse a borda da tela.
   =========================================================================== */

@media (max-width: 400px) {

  /* Nada, em hipótese alguma, é mais largo que a tela */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* "footer.wrap" entra na lista: sozinha, a regra .wrap perde pro
     footer.wrap declarado em style.css, e o rodapé ficava com folga
     lateral diferente do resto da página.
     ".foot-in" sai da lista: agora quem dá a folga é o próprio footer.wrap,
     e manter os dois somava 16 + 16 = 32px só nas colunas do rodapé. */
  .wrap, .nav-in, footer.wrap { padding-left: 16px; padding-right: 16px; }

  /* Título: 48px em 375px de tela estourava com palavras longas */
  h1 { font-size: 33px !important; letter-spacing: .5px; max-width: 100%; }
  .hero p.lead { font-size: 15px; margin: 18px 0 26px; }
  h2 { font-size: 25px !important; }

  /* Botões da primeira dobra empilham em vez de espremer lado a lado */
  .hero-cta { display: flex; flex-direction: column; gap: 10px; }
  .hero-cta a { width: 100%; }
  .hero-cta .btn { width: 100%; }

  /* Peças menores, mas ainda com alvo de toque confortável */
  .esp-grid { gap: 8px; }
  .esp-card { min-height: 104px; padding: 13px 12px; }
  .esp-card .mono { width: 34px; height: 34px; font-size: 12.5px; }
  .esp-card .tt { font-size: 13.5px; }
  .esp-card .sb { font-size: 11px; }

  /* Nome de time longo (Atlético-MG x Athletico-PR) quebra em vez de vazar */
  .esp-jogo .times { font-size: 14.5px; word-break: break-word; }

  /* Tabelas largas ganham rolagem própria em vez de empurrar a página */
  table, .odds-grid, .compare-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Palavra comprida (URL, e-mail) não estoura o cartão */
  p, li, td, .sb, .lead { overflow-wrap: anywhere; }

  /* Imagem nunca passa da largura disponível */
  img, svg, canvas { max-width: 100%; height: auto; }

  /* Rótulo das abas encolhe pra caber 4 colunas em 375px */
  .tabbar a { font-size: 9.5px; letter-spacing: .2px; }

  .ad-bloco { padding: 8px; margin: 20px 0; }
}