*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#011B36; --bg2:#01305F;
  --navy:#01306C; --teal:#0BA6B1; --cyan:#12D9D3; --green:#99CD3C;
  --card:rgba(255,255,255,.06); --card2:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.11);
  --tx:#EAF4F8; --mut:#8FB4C6; --mut2:#5F8AA1;
  --red:#FF6B6B; --amb:#F5B93C; --grn:#12D9D3; --fire:#99CD3C;
}
html,body{height:100%}
body{
  background:
    radial-gradient(90% 55% at 50% 108%,rgba(11,166,177,.30) 0%,rgba(11,166,177,0) 70%),
    radial-gradient(125% 85% at 50% -12%,#045C8E 0%,#01305F 46%,var(--bg) 100%) fixed;
  color:var(--tx);
  font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:0 0 40px;
}

/* ---------- fundo por ambiente ----------
   Uma foto discreta atras do conteudo, trocada junto com o ambiente (rio,
   represa, mar, pesqueiro). Duas camadas empilhadas fazem o crossfade: a
   proxima foto so aparece depois de carregada, entao nunca ha "piscada".
   A mascara apaga a imagem na parte de baixo da tela, onde ficam os cards
   com texto pequeno — ali a leitura vem antes do enfeite. */
#ambbg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#ambbg i{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;
  background-size:cover;background-position:center 28%;background-repeat:no-repeat;
  /* O truque do contraste: em vez de deixar a foto transparente (que apaga a
     paisagem inteira), a foto entra quase opaca mas ESCURECIDA. O olho continua
     lendo o rio, o mar, a arvore — e o texto claro por cima segue com o mesmo
     contraste de antes, porque o fundo continua escuro. */
  filter:brightness(.48) saturate(1.15) contrast(1.08);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.88) 40%,rgba(0,0,0,.5) 68%,transparent 90%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.88) 40%,rgba(0,0,0,.5) 68%,transparent 90%)}
#ambbg i.on{opacity:.65}
@media (prefers-reduced-motion:reduce){#ambbg i{transition:none}}

.wrap{max-width:470px;margin:0 auto;padding:0 18px calc(96px + env(safe-area-inset-bottom))}

/* ---------- header ---------- */
/* No iPhone o app ocupa a tela inteira (viewport-fit=cover): sem o
   safe-area, o logo e a cidade ficavam por baixo do relogio e da "ilha".
   Em Android/navegador o env() vale 0, entao nada muda la. */
header{padding:calc(22px + env(safe-area-inset-top)) 0 8px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:-.5px}
.logo img{width:31px;height:31px;border-radius:8px;box-shadow:0 3px 12px rgba(1,32,64,.5)}
.logo span{color:var(--cyan)}
.loc{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--mut);max-width:190px}
.loc b{color:var(--tx);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- species ---------- */
.spwrap{display:flex;gap:7px;overflow-x:auto;padding:12px 18px 4px;margin:0 -18px;scrollbar-width:none}
.spwrap::-webkit-scrollbar{display:none}
.sp{flex:0 0 auto;border:1px solid var(--line);background:var(--card);color:var(--mut);
  padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.sp.on{background:var(--tx);color:#04131b;border-color:var(--tx)}
.amb{flex:0 0 auto;border:1px solid transparent;background:transparent;color:var(--mut2);
  padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer;transition:.15s}
.amb.on{background:rgba(18,217,211,.14);color:var(--cyan);border-color:rgba(18,217,211,.3)}
.spnote{font-size:11.5px;color:var(--mut2);line-height:1.55;padding:9px 0 0}
.spnote b{color:var(--mut)}
.spnote a{color:var(--cyan);text-decoration:none;border-bottom:1px dotted rgba(18,217,211,.45);cursor:pointer}

/* ---------- days ---------- */
.days{display:flex;gap:7px;overflow-x:auto;padding:14px 18px 2px;margin:0 -18px;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{flex:0 0 auto;width:56px;border:1px solid var(--line);background:var(--card);border-radius:14px;
  padding:8px 0;text-align:center;cursor:pointer;transition:.15s}
.day.on{background:var(--card2);border-color:rgba(255,255,255,.35)}
.day .dn{font-size:10.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.day .dd{font-size:11px;color:var(--mut2);margin-top:1px}
.day .ds{font-size:16px;font-weight:800;margin-top:4px}

/* ---------- hero ---------- */
.hero{text-align:center;padding:18px 0 6px}
.ring{position:relative;width:212px;height:212px;margin:0 auto}
.ring svg{transform:rotate(-90deg)}
.ringtx{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.scoreN{font-size:64px;font-weight:800;line-height:.95;letter-spacing:-3px}
.scoreS{font-size:12px;color:var(--mut);margin-top:3px;letter-spacing:.5px}
.verdict{font-size:26px;font-weight:800;margin-top:14px;letter-spacing:-.6px}
.sub{font-size:13.5px;color:var(--mut);margin-top:6px;line-height:1.45}

/* ---------- window ---------- */
.win{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:15px 16px;text-align:center}
.win .lab{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:1.1px;font-weight:700}
.win .val{font-size:27px;font-weight:800;margin-top:5px;letter-spacing:-1px}
.win .val small{font-size:14px;font-weight:600;color:var(--mut);letter-spacing:0}
.win .nota{font-size:11.5px;color:var(--mut2);margin-top:5px;line-height:1.35}
.win2{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap;justify-content:center}
.chip{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:9px;padding:5px 9px;font-size:11.5px;color:var(--mut)}
.chip b{color:var(--tx);font-weight:700}

/* ---------- chart ---------- */
.chart{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:15px 12px 8px}
.chart .lab{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:1.1px;font-weight:700;padding-left:4px}
.xax{display:flex;justify-content:space-between;font-size:10px;color:var(--mut2);padding:2px 4px 0}

/* ---------- conditions ---------- */
h2.sec{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:1.1px;font-weight:700;margin:24px 0 10px}
.conds{display:flex;flex-direction:column;gap:8px}
.cond{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:15px;padding:12px 14px}
.cond .ic{font-size:19px;width:24px;text-align:center;flex:0 0 auto}
.cond .mid{flex:1;min-width:0}
.cond .t{font-size:12px;color:var(--mut);font-weight:600}
.cond .v{font-size:16px;font-weight:700;margin-top:1px;letter-spacing:-.3px}
.cond .r{font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:8px;flex:0 0 auto}
.bar{height:3px;border-radius:2px;background:rgba(255,255,255,.09);margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:2px}

/* ---------- buttons ---------- */
.btns{display:flex;flex-direction:column;gap:10px;margin-top:22px}
button.big{width:100%;border:0;border-radius:16px;padding:17px;font-size:15.5px;font-weight:800;cursor:pointer;
  font-family:inherit;letter-spacing:-.2px;transition:.15s}
.b1{background:linear-gradient(135deg,var(--cyan),var(--teal));color:#012040;box-shadow:0 8px 26px rgba(18,217,211,.26)}
.b2{background:var(--card2);color:var(--tx);border:1px solid var(--line)!important}
/* Comunidade: verde do WhatsApp, o único elemento não-DEU-PESCA da tela.
   É proposital — o pescador reconhece o botão antes de ler o texto. */
.b3{background:#1FA855;color:#fff;box-shadow:0 8px 26px rgba(31,168,85,.24);
  display:flex;align-items:center;justify-content:center;gap:9px}
button.big svg{width:19px;height:19px;flex:0 0 auto;vertical-align:-3px}
.b3 svg{width:19px;height:19px;flex:0 0 auto}
.b3 .em{font-size:11px;font-weight:800;letter-spacing:.06em;background:rgba(255,255,255,.22);
  padding:2px 7px;border-radius:6px}
/* Instagram: mesma lógica do verde — cor da própria marca, para o
   reconhecimento ser instantâneo. Vem depois da comunidade porque
   seguir é um compromisso menor que entrar num grupo. */
.b4{background:linear-gradient(105deg,#F9CE34 0%,#EE2A7B 48%,#6228D7 100%);color:#fff;
  box-shadow:0 8px 26px rgba(238,42,123,.22);
  display:flex;align-items:center;justify-content:center;gap:9px}
.b4 svg{width:19px;height:19px;flex:0 0 auto}
button.big:active{transform:scale(.985)}

/* ---------- how ---------- */
details.how{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
details.how summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--tx);list-style:none;display:flex;justify-content:space-between;align-items:center}
details.how summary::-webkit-details-marker{display:none}
details.how summary::after{content:"＋";color:var(--mut);font-size:15px}
details.how[open] summary::after{content:"−"}
.howc{font-size:12.5px;color:var(--mut);line-height:1.65;margin-top:12px}
.howc b{color:var(--tx)}
.wrow{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed rgba(255,255,255,.07);font-size:12.5px}
.wrow span:last-child{color:var(--tx);font-weight:700}
.tag{display:inline-block;font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px;margin-right:6px;vertical-align:1px}
.t-g{background:rgba(153,205,60,.17);color:#99CD3C}
.t-y{background:rgba(245,185,60,.16);color:#F5B93C}
.t-r{background:rgba(255,107,107,.16);color:#FF6B6B}

/* avisos legais */
.lei{border-radius:16px;padding:14px 16px;margin-top:14px;font-size:13px;line-height:1.6}
.lei .h{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-size:13.5px;font-weight:800;letter-spacing:-.2px;line-height:1.35}
.lei .c{margin-top:8px;color:rgba(255,255,255,.82)}
.lei .c b{color:#fff}
.lei .m{margin-top:10px;font-size:11px;color:rgba(255,255,255,.55);line-height:1.5}
.lei a{color:inherit;text-decoration:underline;opacity:.85}
.lei-x{background:rgba(255,107,107,.13);border:1px solid rgba(255,107,107,.42)}
.lei-x .h{color:#FF8A8A}
.lei-a{background:rgba(245,185,60,.12);border:1px solid rgba(245,185,60,.4)}
.lei-a .h{color:#F5B93C}
.lei-i{background:rgba(18,217,211,.10);border:1px solid rgba(18,217,211,.32)}
.lei-i .h{color:var(--cyan)}
.selo{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.06em;padding:2px 6px;
  border-radius:5px;white-space:nowrap;flex:0 0 auto}
.selo-o{background:rgba(153,205,60,.18);color:#99CD3C}
.selo-m{background:rgba(245,185,60,.18);color:#F5B93C}
.selo-b{background:rgba(255,107,107,.18);color:#FF8A8A}
.trow{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.07)}
.trow .tn{font-size:14.5px;font-weight:700;color:var(--tx)}
.trow .tc{font-size:11px;color:var(--mut2);font-style:italic;margin-top:1px}
.trow .tobs{font-size:11.5px;color:#F5B93C;margin-top:3px;line-height:1.4}
.trow .tv{font-size:13px;color:var(--mut);white-space:nowrap;flex:0 0 auto;text-align:right}
.trow .tv b{color:var(--cyan);font-size:15px}
/* banner rotativo — faixa baixa, entre as espécies e o score */
.adbar{margin-top:12px;position:relative;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);background:rgba(255,255,255,.04);cursor:pointer}
.adbar-jan{position:relative;width:100%;aspect-ratio:3.2/1;overflow:hidden}
.adbar-trk{display:flex;height:100%;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.adbar-sl{flex:0 0 100%;height:100%;position:relative}
.adbar-sl img{width:100%;height:100%;object-fit:contain;display:block;background:#01142a}
.adbar-fb{width:100%;height:100%;display:flex;align-items:center;gap:12px;padding:0 16px}
.adbar-fb .e{font-size:26px;flex:0 0 auto}
.adbar-fb .t{min-width:0}
.adbar-fb .m{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;opacity:.85}
.adbar-fb .h{font-size:14px;font-weight:800;line-height:1.2;margin-top:2px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.adbar-tag{position:absolute;top:6px;left:8px;font-size:7.5px;font-weight:800;letter-spacing:.1em;
  background:rgba(1,20,40,.62);color:rgba(255,255,255,.8);padding:2px 6px;border-radius:4px;
  backdrop-filter:blur(3px);pointer-events:none;z-index:2}
.adbar-i{position:absolute;top:5px;right:6px;width:19px;height:19px;border-radius:50%;
  background:rgba(1,20,40,.62);color:rgba(255,255,255,.8);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);z-index:2}
.adbar-dots{display:flex;justify-content:center;gap:5px;padding:6px 0 2px}
.adbar-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.2);transition:.25s}
.adbar-dots i.on{background:var(--cyan);width:14px;border-radius:3px}

/* Banner do torneio: SEM proporção fixa (mudou em 29/08 — o Adriano achou a
   faixa 4:1 pequena demais). O organizador de torneio já tem a arte pronta
   pro feed do Instagram (1080x1350 ou 1080x1080); forçar 4:1 obrigava a
   recortar o flyer e cortava justamente o que interessa (premiação, data).
   Agora `height:auto` deixa a altura vir da proporção do próprio arquivo —
   flyer vertical, quadrado ou a faixa antiga 4:1, todos aparecem inteiros.
   `object-fit:contain` nunca corta: só entra em ação quando o max-height
   segura uma arte alta demais, e aí sobra fundo nas laterais em vez de
   recorte. O teto em vh impede que um flyer 9:16 engula a tela e empurre
   data/local/premiação pra baixo da dobra.
   Continua diferente do banner de patrocínio (esse sim é 4:1 fixo, formato
   vendido ao ANUNCIANTE) — aqui é conteúdo do próprio torneio. */
.tbanner{width:100%;height:auto;max-height:62vh;object-fit:contain;border-radius:14px;
  border:1px solid var(--line);margin-bottom:12px;background:#01142a;display:block}
.tbanner-prev{width:100%;height:auto;max-height:42vh;object-fit:contain;border-radius:12px;
  border:1px solid var(--line);margin-top:8px;background:#01142a;display:none}

/* patrocínio */
.ad{margin-top:16px;background:linear-gradient(165deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  border:1px solid var(--line);border-radius:16px;padding:13px 15px 12px;cursor:pointer;transition:.15s}
.ad:active{transform:scale(.99)}
.ad-top{display:flex;align-items:center;gap:8px}
.ad-tag{font-size:8.5px;font-weight:800;letter-spacing:.11em;color:var(--mut2);
  border:1px solid var(--line);padding:2px 6px;border-radius:5px}
.ad-cat{font-size:10.5px;color:var(--mut2)}
.ad-body{display:flex;gap:12px;margin-top:10px}
.ad-ico{font-size:26px;width:44px;height:44px;flex:0 0 auto;border-radius:12px;
  background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center}
.ad-txt{flex:1;min-width:0}
.ad-marca{font-size:11px;color:var(--cyan);font-weight:700;letter-spacing:.02em}
.ad-tit{font-size:14.5px;font-weight:700;color:var(--tx);margin-top:2px;line-height:1.3}
.ad-lin{font-size:12.5px;color:var(--mut);margin-top:4px;line-height:1.45}
.ad-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:11px;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.ad-cta{font-size:12.5px;font-weight:700;color:var(--cyan)}
.ad-pq{font-size:10.5px;color:var(--mut2);text-decoration:underline;text-decoration-style:dotted}
.disc{font-size:11px;color:var(--mut2);line-height:1.65;margin-top:14px;
  border-top:1px solid rgba(255,255,255,.09);padding-top:12px}
.disc b{color:var(--mut)}
footer{text-align:center;font-size:11px;color:var(--mut2);margin-top:26px;line-height:1.7}
.badge{display:inline-block;background:rgba(153,205,60,.16);color:var(--green);font-size:10.5px;font-weight:800;
  padding:3px 9px;border-radius:7px;letter-spacing:.4px}

/* ---------- modal ---------- */
.ov{position:fixed;inset:0;background:rgba(1,15,32,.74);backdrop-filter:blur(7px);display:none;
  align-items:flex-end;justify-content:center;z-index:80}
.ov.on{display:flex}
.sheet{background:#022A50;border:1px solid var(--line);border-radius:26px 26px 0 0;width:100%;max-width:470px;
  padding:22px 20px calc(26px + env(safe-area-inset-bottom));max-height:92vh;overflow-y:auto;
  animation:up .26s cubic-bezier(.2,.9,.3,1)}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.grab{width:38px;height:4px;background:rgba(255,255,255,.2);border-radius:2px;margin:0 auto 18px}
.sheet h3{font-size:24px;font-weight:800;text-align:center;letter-spacing:-.7px}
.sheet .sh{font-size:13px;color:var(--mut);text-align:center;margin-top:7px;line-height:1.5}
.opts{display:flex;gap:9px;margin:20px 0 6px}
.opt{flex:1;background:var(--card);border:1.5px solid var(--line);border-radius:17px;padding:15px 6px;
  text-align:center;cursor:pointer;transition:.15s}
.opt.on{border-color:var(--cyan);background:rgba(18,217,211,.13)}
.opt .e{font-size:27px}
.opt .l{font-size:11.5px;color:var(--mut);margin-top:6px;font-weight:700;line-height:1.3}
.opt.on .l{color:var(--tx)}
.f{margin-top:13px}
.f label{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.9px;font-weight:700}
.f input,.f select,.f textarea{width:100%;margin-top:6px;background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:12px;padding:12px 13px;color:var(--tx);font-size:15px;font-family:inherit;outline:none}
.f input:focus,.f select:focus,.f textarea:focus{border-color:rgba(18,217,211,.55)}
.f select option{background:#022A50}
.row2{display:flex;gap:10px}
.row2 .f{flex:1}
.ok{text-align:center;padding:14px 0 4px}
.ok .e{font-size:52px}
.ok h3{margin-top:12px}
.priv{font-size:11px;color:var(--mut2);text-align:center;margin-top:14px;line-height:1.6}
.logn{font-size:11.5px;color:var(--mut);text-align:center;margin-top:14px}
.logn b{color:var(--cyan)}
.err{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:#fca5a5;font-size:12.5px;
  padding:11px 13px;border-radius:12px;margin-top:12px;line-height:1.5}
.sk{background:var(--card);border-radius:16px;height:14px;animation:pl 1.1s infinite}
@keyframes pl{0%,100%{opacity:.4}50%{opacity:.8}}

/* ---------- CONTA / MURO DE CADASTRO ---------- */
/* A tela de entrada tem foto de pescador de verdade — a mesma ideia do fundo
   por ambiente, so que aqui a foto e a protagonista. O pescador ocupa a parte
   de cima; a marca fica sobre a foto e o bloco de acao desce para o rodape,
   onde a imagem ja virou o azul do app. Quem abre o app ve gente pescando
   antes de ver um formulario. */
#gate{position:fixed;inset:0;z-index:90;display:none;overflow-y:auto;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  background:linear-gradient(170deg,#02142c,#01203F 55%,#010d1e)}
#gate.on{display:flex}
/* Camada da foto: fixa na viewport, entao o formulario rola por cima dela
   sem arrastar a imagem junto. O gradiente escurece o ceu (para a marca
   branca ler) e dissolve a foto no azul antes de chegar no cartao. */
#gate:before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(1,18,38,.58) 0%,rgba(1,20,40,.10) 15%,rgba(1,20,40,0) 32%,
      rgba(1,24,48,.24) 48%,rgba(1,27,54,.88) 64%,#011B36 76%),
    url("../login-pescador.webp") center top/cover no-repeat}
/* No modo CRIAR CONTA o formulario e longo e sobe ate o alto da tela — o
   texto passaria por cima do rosto do pescador. Entao, so nesse modo, a foto
   recua e vira ambientacao. O atributo ja existia no muro; aproveitamos. */
#gate[data-modo="criar"]:before{
  background:
    linear-gradient(180deg,rgba(1,18,38,.66) 0%,rgba(1,20,40,.40) 20%,rgba(1,22,44,.60) 38%,
      rgba(1,25,50,.90) 56%,#011B36 70%),
    url("../login-pescador.webp") center top/cover no-repeat}
/* Tela larga (desktop, tablet deitado): a versao retrato daria um zoom
   gigante no rosto. Trocamos so o arquivo — a foto na horizontal cabe
   inteira e o degrade continua o mesmo. */
@media (min-width:640px){
  #gate:before,#gate[data-modo="criar"]:before{
    background-image:
      linear-gradient(180deg,rgba(1,18,38,.58) 0%,rgba(1,20,40,.10) 15%,rgba(1,20,40,0) 32%,
        rgba(1,24,48,.30) 50%,rgba(1,27,54,.90) 66%,#011B36 78%),
      url("../login-pescador-wide.webp")}
}
.gt{flex:1 1 auto;display:flex;flex-direction:column;position:relative;z-index:1;
  max-width:440px;width:100%;margin:0 auto;padding:30px 20px 34px}
.gt-logo{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:900;letter-spacing:.02em;justify-content:center;
  text-shadow:0 2px 14px rgba(0,10,24,.6)}
.gt-logo img{width:40px;height:40px;border-radius:9px}
.gt-logo span{color:var(--cyan)}
/* Empurra tudo que vem depois da marca para o rodape. Quando o conteudo e
   grande (o cadastro completo), o auto vira zero sozinho e a tela volta a
   rolar normalmente — sem media query. */
.gt .gt-logo + *{margin-top:auto}
/* Veu do bloco de texto: um degrade que nasce transparente e termina quase
   solido, colado no topo do cartao. E ele que garante a leitura quando a tela
   e curta e o titulo cai em cima do peixe — sem precisar apagar a foto. */
.gt .gt-topo,.gt .gt-hero{padding:38px 16px 20px;margin-bottom:-14px;border-radius:26px 26px 0 0;
  background:linear-gradient(180deg,rgba(1,20,40,0) 0%,rgba(1,21,42,.46) 26%,rgba(1,22,44,.72) 48%,rgba(1,23,46,.86) 100%)}
.gt .gt-topo h2{margin-top:0}
.gt h2{font-size:24px;line-height:1.2;margin:20px 0 6px;text-align:center;font-weight:900;
  text-shadow:0 2px 4px rgba(0,10,24,.85),0 3px 22px rgba(0,10,24,.6)}
/* Sobre foto, cinza nao le. A linha de apoio fica quase branca e ganha uma
   sombra curta e dura (a longa sozinha nao segura texto pequeno). */
.gt .sub{font-size:13.5px;color:rgba(234,244,248,.9);text-align:center;line-height:1.45;
  text-shadow:0 1px 3px rgba(0,10,24,.92),0 2px 14px rgba(0,10,24,.7)}
.gt-card{background:rgba(3,25,49,.62);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:18px;margin-top:20px;
  -webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:0 18px 44px rgba(0,8,20,.34)}
.gt .f{margin-bottom:12px}
.gt .f label{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut2);margin-bottom:5px}
.gt input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--card2);color:var(--tx);font-size:15.5px;font-family:inherit}
.gt input:focus{outline:0;border-color:var(--cyan)}
.gt-lgpd{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--mut);line-height:1.4;margin:4px 0 14px}
.gt-lgpd input{width:18px;height:18px;flex:0 0 auto;margin-top:1px;accent-color:var(--cyan)}
.gt-lgpd a{color:var(--cyan);text-decoration:underline;cursor:pointer}
.gt-alt{text-align:center;font-size:13px;color:var(--mut);margin-top:14px}
.gt-alt b{color:var(--cyan);cursor:pointer;text-decoration:underline}
.gt-ou{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--mut2);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase}
.gt-ou:before,.gt-ou:after{content:'';flex:1;height:1px;background:var(--line)}
.bg{background:#fff;color:#1f1f1f;box-shadow:0 8px 26px rgba(0,0,0,.3)}
/* Entrada por digital: e a acao preferida de quem ja cadastrou, entao tem
   destaque de acao primaria — mas em contorno, para nao competir com o
   ENTRAR verde-agua logo abaixo. */
.bdig{background:rgba(18,217,211,.15);color:var(--cyan);
  border:1.5px solid rgba(18,217,211,.5)!important}
.bdig svg{width:22px;height:22px;vertical-align:-5px;margin-right:9px}
.bg svg{width:19px;height:19px;vertical-align:-4px;margin-right:8px}
/* "Continuar com a Apple": branco com o logo preto, o estilo que a Apple manda
   usar sobre fundo escuro (o mesmo tamanho e peso do botao do Google). */
.bap{color:#000}
.bap svg{width:19px;height:19px;vertical-align:-3px;margin-right:8px;fill:#000}
.bap + .bg{margin-top:10px}
.gt-err{background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.35);color:#ffb4b4;
  border-radius:11px;padding:11px 13px;font-size:13px;line-height:1.4;margin-bottom:13px}
.gt-ok{background:rgba(18,217,211,.1);border:1px solid rgba(18,217,211,.3);color:var(--cyan);
  border-radius:11px;padding:11px 13px;font-size:13px;line-height:1.4;margin-bottom:13px}
.gt-vant{margin-top:18px;display:grid;gap:9px}
.gt-vant div{font-size:13px;color:var(--mut);display:flex;gap:9px;align-items:flex-start;line-height:1.35}
.gt-vant b{color:var(--tx);font-weight:700}
.gt-rod{text-align:center;font-size:11px;color:var(--mut2);margin-top:20px;line-height:1.5}
.conta{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.05em;max-width:96px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--mut2);cursor:pointer;padding:6px 9px;border:1px solid var(--line);border-radius:20px;
  background:var(--card2);text-transform:uppercase}
.conta:active{opacity:.6}
.sinc{font-size:11px;color:var(--mut2);text-align:center;margin-top:6px}

/* ---- telas de destaque (confirme e-mail / nova senha) ---- */
.gt-hero{text-align:center;margin:18px 0 4px}
.gt-hero-ic{width:82px;height:82px;margin:0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:40px;
  background:radial-gradient(circle at 50% 40%,rgba(18,217,211,.22),rgba(18,217,211,.06));
  border:1px solid rgba(18,217,211,.35)}
.gt-pulse{animation:gtpulse 1.8s ease-in-out infinite}
@keyframes gtpulse{0%,100%{box-shadow:0 0 0 0 rgba(18,217,211,.35)}
  50%{box-shadow:0 0 0 14px rgba(18,217,211,0)}}
.gt-hero-msg{font-size:14px;color:var(--mut);margin-top:8px}
.gt-hero-email{font-size:16px;font-weight:800;color:var(--cyan);margin-top:2px;word-break:break-all}
.gt-acao{background:linear-gradient(135deg,rgba(18,217,211,.16),rgba(11,166,177,.10));
  border:1px solid rgba(18,217,211,.32);border-radius:14px;padding:15px 16px;margin:16px 0 4px;
  font-size:15px;line-height:1.5;color:var(--tx);text-align:center}
.gt-acao b{color:var(--cyan)}
.gt-spam{background:rgba(255,196,84,.12);border:1px solid rgba(255,196,84,.32);
  border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.5;color:#ffd98a}
.gt-spam b{color:#ffe4a8}

/* ---- campo de senha com olhinho + regras ---- */
.senha-wrap{position:relative}
.senha-wrap input{padding-right:46px!important}
.senha-eye{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:32px;height:32px;
  border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.senha-eye svg{width:22px;height:22px;fill:var(--mut2)}
.senha-eye.on svg{fill:var(--cyan)}
.senha-regras{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;padding-left:2px}
.senha-regras span{font-size:11.5px;color:var(--mut2);transition:color .2s}
.senha-regras span.ok{color:var(--green);font-weight:700}

/* ---- barra inferior de navegação ---- */
#pagina{position:fixed;left:0;right:0;top:0;bottom:0;z-index:45;overflow-y:auto;
  background:linear-gradient(180deg,#02142c,#01162e 40%,#010d1e);
  padding:calc(env(safe-area-inset-top) + 22px) 18px 100px;display:none}
#pagina.on{display:block}
.pag{max-width:470px;margin:0 auto}
.pag h2{font-size:22px;font-weight:900;margin:2px 0 3px}
.pag .psub{font-size:13.5px;color:var(--mut);margin-bottom:16px;line-height:1.4}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;height:66px;
  background:rgba(1,18,38,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-around;
  padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;
  color:var(--mut2);font-size:10px;font-weight:700;cursor:pointer;padding:8px 0;transition:color .15s}
.tab svg{width:23px;height:23px;fill:currentColor}
.tab.on{color:var(--cyan)}
.tab:active{opacity:.6}
.tab-center{flex:0 0 auto;position:relative;margin-top:-26px}
.tab-center .fab{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--cyan),var(--teal));box-shadow:0 8px 22px rgba(18,217,211,.42);
  border:3px solid #01162e}
.tab-center .fab svg{width:29px;height:29px;fill:#012040}
.tab-center .lbl{font-size:9.5px;font-weight:800;color:var(--cyan);margin-top:4px;white-space:nowrap;
  letter-spacing:.02em;transition:color .15s}
.tab-center.on .lbl{color:var(--cyan)}
/* cartão de parceiro / item de lista */
.pcard{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:13px 14px;margin-bottom:11px}
.pcard .pic{width:46px;height:46px;border-radius:12px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:24px;background:var(--card2);overflow:hidden}
.pcard .pic img{width:100%;height:100%;object-fit:cover}
.pcard .info{min-width:0;flex:1}
.pcard .nome{font-size:15px;font-weight:800;display:flex;align-items:center;gap:6px}
.pcard .cat{font-size:12px;color:var(--mut2);margin-top:1px}
.selo-f{font-size:8.5px;font-weight:800;letter-spacing:.06em;background:rgba(18,217,211,.16);
  color:var(--cyan);border:1px solid rgba(18,217,211,.35);padding:2px 6px;border-radius:20px;text-transform:uppercase}
.pcard .zap{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:#1FA855;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.pcard .zap svg{width:22px;height:22px;fill:#fff}
.vazio{text-align:center;color:var(--mut);padding:38px 10px;line-height:1.5}
.vazio .ic{font-size:44px;margin-bottom:10px}
/* histórico */
.hitem{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:12px 13px;margin-bottom:9px}
.hitem .he{font-size:26px;flex:0 0 auto}
.hitem .hi{flex:1;min-width:0}
.hitem .ht{font-size:14.5px;font-weight:700}
.hitem .hd{font-size:12px;color:var(--mut2);margin-top:1px}
.hitem .hs{flex:0 0 auto;text-align:center}
.hitem .hs b{font-size:19px;font-weight:900;color:var(--cyan);display:block;line-height:1}
.hitem .hs span{font-size:9px;color:var(--mut2);text-transform:uppercase;letter-spacing:.05em}

.tab.chamar{color:var(--cyan)}
.tab.chamar svg{animation:tabpulse 1.6s ease-in-out infinite}
.tab.chamar::after{content:'';position:absolute;top:6px;right:calc(50% - 16px);width:8px;height:8px;
  border-radius:50%;background:#ff5a5a;box-shadow:0 0 0 2px rgba(1,18,38,.97)}
.tab{position:relative}
@keyframes tabpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

.busca{display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--line);
  border-radius:13px;padding:0 12px;margin-bottom:10px}
.busca span{font-size:15px;opacity:.7}
.busca input{flex:1;background:none;border:0;color:var(--tx);font-size:15px;padding:12px 0;font-family:inherit}
.busca input:focus{outline:0}
.raio{font-size:12px;color:var(--mut2);margin:0 2px 14px}
.raio b{color:var(--mut)}
/* Dica de "não achei ninguém aqui perto": o diretório é filtrado por raio, e
   quem não sabe disso acha que o app está vazio. O trecho clicável abre a
   MESMA busca de local do topo (abrirBusca), pra dica não virar só instrução. */
.raio-dica{display:block;margin-top:6px;line-height:1.45}
.raio-dica u{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(18,217,211,.45);
  cursor:pointer;font-weight:600}
.pgrp{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--mut);text-transform:uppercase;
  margin:16px 2px 9px}
.pgrp:first-child{margin-top:2px}
.pcard-d{border-color:rgba(18,217,211,.4);background:linear-gradient(120deg,rgba(18,217,211,.08),var(--card))}

/* ---- torneios ---- */
.thome{background:linear-gradient(120deg,rgba(18,217,211,.10),var(--card));border:1px solid rgba(18,217,211,.28);
  border-radius:16px;padding:12px 13px;margin-top:12px}
.thome-h{font-size:13px;font-weight:800;color:var(--cyan);margin-bottom:8px;display:flex;justify-content:space-between}
.thome-h span{font-size:11px;color:var(--mut);cursor:pointer;text-decoration:underline;font-weight:600}
.thome-i{display:flex;align-items:center;gap:11px;padding:8px 0;cursor:pointer;border-top:1px solid rgba(255,255,255,.06)}
.thome-i:first-of-type{border-top:0}
.thome-dt{flex:0 0 auto;min-width:46px;text-align:center;font-size:12.5px;color:var(--tx)}
.thome-tx{flex:1;min-width:0}
.thome-n{font-size:14px;font-weight:700;line-height:1.2}
.thome-l{font-size:11.5px;color:var(--mut2);margin-top:1px}
.thome-ch{flex:0 0 auto;font-size:22px;color:var(--mut2)}
.pback{font-size:14px;color:var(--cyan);cursor:pointer;margin-bottom:10px;font-weight:600}
.tcard{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:15px;padding:13px;margin-bottom:10px;cursor:pointer}
.tcard-dt{flex:0 0 auto;min-width:50px;text-align:center;background:var(--card2);border-radius:10px;padding:9px 6px;font-size:12.5px}
.tcard-in{flex:1;min-width:0}
.tcard-n{font-size:15.5px;font-weight:800;line-height:1.2}
.tcard-l{font-size:12.5px;color:var(--mut2);margin-top:2px}
.tcard-p{font-size:12px;color:var(--green);margin-top:3px}
.tdet-dt{font-size:13px;font-weight:800;color:var(--cyan);text-transform:uppercase;letter-spacing:.04em}
.tdet-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 14px;margin-top:14px}
.tdet-l{display:flex;gap:11px;padding:9px 0;font-size:14px;border-top:1px solid rgba(255,255,255,.05);line-height:1.4}
.tdet-l:first-child{border-top:0}
.tdet-l span:first-child{flex:0 0 auto}
.tdet-desc{font-size:14px;line-height:1.55;color:var(--mut);margin-top:14px;white-space:pre-wrap}

.pkm{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--mut2);background:var(--card2);
  border:1px solid var(--line);border-radius:20px;padding:3px 8px;margin-right:2px}
.preco{display:flex;align-items:stretch;gap:10px;margin-top:18px}
.preco-m,.preco-a{flex:1;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center}
.preco-a{border-color:rgba(18,217,211,.4);background:linear-gradient(120deg,rgba(18,217,211,.10),var(--card));position:relative}
.preco b{font-size:24px;font-weight:900;color:var(--tx)}
.preco span{font-size:12px;color:var(--mut2);display:block}
.preco-a em{display:block;font-size:10.5px;font-weight:800;color:var(--cyan);margin-top:4px;font-style:normal}
.preco-ou{align-self:center;color:var(--mut2);font-size:12px}
.cadgeo{font-size:12px;color:var(--mut2);background:var(--card2);border:1px solid var(--line);
  border-radius:11px;padding:10px 12px;margin:2px 0 14px;line-height:1.4}
.prembox{background:linear-gradient(120deg,rgba(18,217,211,.12),var(--card));border:1px solid rgba(18,217,211,.35);
  border-radius:16px;padding:15px;cursor:pointer;margin-bottom:6px}
.prembox-t{font-size:16px;font-weight:900;color:var(--cyan)}
.prembox-s{font-size:13px;color:var(--mut);margin-top:4px;line-height:1.4}
.prembox-b{font-size:12px;font-weight:800;color:var(--cyan);margin-top:8px}

.day.lock{opacity:.75;cursor:pointer}
.day.lock .dn,.day.lock .dd{opacity:.6}
.day.lock .ds{font-size:15px;filter:none}

/* =========================================================
   FOTO DA PESCARIA + FLASHES
   ========================================================= */
/* botão de foto dentro do sheet de registro */
.fotobox{margin-top:14px}
.fotobtn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  background:rgba(255,255,255,.05);border:1.5px dashed var(--line);border-radius:16px;
  color:var(--mut);font-size:13.5px;font-weight:700;font-family:inherit;padding:16px 10px;cursor:pointer}
.fotobtn:active{opacity:.65}
.fotobtn .em{font-size:20px}
.fotoprev{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:rgba(0,0,0,.25)}
.fotoprev img{display:block;width:100%;max-height:230px;object-fit:cover}
.fotoprev .x{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(1,18,38,.82);color:#fff;font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center}
.fotoprev .tag{position:absolute;left:8px;bottom:8px;font-size:10px;font-weight:800;letter-spacing:.04em;
  background:rgba(1,18,38,.82);color:var(--cyan);padding:4px 8px;border-radius:20px}

/* bloco de contato no cartão do parceiro */
.fcontato{margin-top:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:14px;padding:11px 13px;display:flex;flex-direction:column;gap:8px}
.fcontato > div{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.45}
.fcontato > div > span:first-child{flex:0 0 auto;opacity:.85}
.fcontato > div > span:last-child{color:rgba(255,255,255,.88);word-break:break-word}

/* interruptor "mostrar nos Flashes" */
.swrow{display:flex;align-items:center;gap:11px;background:var(--card);border:1.5px solid var(--line);
  border-radius:16px;padding:12px 13px;margin-top:12px;cursor:pointer;transition:.18s}
.swrow .swt{flex:1;min-width:0}
.swrow .swt b{font-size:14px;font-weight:800;display:block}
.swrow .swt span{font-size:11.5px;color:var(--mut2);line-height:1.45;display:block;margin-top:3px}
.swrow .sw{flex:0 0 auto;width:47px;height:27px;border-radius:20px;background:rgba(255,255,255,.15);
  position:relative;transition:.18s}
.swrow .sw::after{content:'';position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;transition:.18s}
.swrow.on{border-color:rgba(18,217,211,.45);background:rgba(18,217,211,.10)}
.swrow.on .sw{background:var(--cyan)}
.swrow.on .sw::after{left:23px}

/* sub-abas dentro de uma página (Flashes / Minhas) */
.subtabs{display:flex;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:4px;margin-bottom:14px}
.subtabs button{flex:1;background:none;border:0;border-radius:11px;color:var(--mut2);font-family:inherit;
  font-size:12.5px;font-weight:800;letter-spacing:.02em;padding:9px 4px;cursor:pointer;transition:.15s}
.subtabs button.on{background:rgba(18,217,211,.15);color:var(--cyan)}

/* miniatura no item do histórico */
.hitem .hfoto{width:46px;height:46px;border-radius:11px;flex:0 0 auto;object-fit:cover;background:var(--card2)}
.hitem.clicavel{cursor:pointer}
.hitem.clicavel:active{opacity:.7}
.pubtag{font-size:8.5px;font-weight:800;letter-spacing:.05em;color:var(--cyan);
  background:rgba(18,217,211,.15);border:1px solid rgba(18,217,211,.3);padding:1px 6px;border-radius:20px}

/* cartão dos Flashes */
.mcard{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:13px}
.mcard .mtopo{display:flex;align-items:center;gap:10px;padding:12px 13px 10px}
.mcard .mav{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:16px;font-weight:900;background:linear-gradient(135deg,var(--teal),var(--navy));color:#fff}
.mcard .mnome{font-size:14px;font-weight:800;line-height:1.2}
.mcard .mmeta{font-size:11.5px;color:var(--mut2);margin-top:1px}
.mcard .mscore{margin-left:auto;text-align:center;flex:0 0 auto}
.mcard .mscore b{display:block;font-size:17px;font-weight:900;color:var(--cyan);line-height:1}
.mcard .mscore span{font-size:8.5px;color:var(--mut2);text-transform:uppercase;letter-spacing:.05em}
.mcard .mfoto{width:100%;display:block;background:rgba(0,0,0,.25);aspect-ratio:4/3;object-fit:cover}
.mcard .mcorpo{padding:11px 13px 4px}
.mcard .mesp{font-size:14.5px;font-weight:800}
.mcard .mleg{font-size:13px;color:rgba(255,255,255,.82);margin-top:5px;line-height:1.5;word-break:break-word}
.mcard .macoes{display:flex;align-items:center;gap:6px;padding:8px 9px 10px}
.mcard .macoes button{background:none;border:0;color:var(--mut2);font-family:inherit;font-size:12.5px;
  font-weight:700;padding:7px 9px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:5px}
.mcard .macoes button:active{opacity:.6}
.mcard .macoes .curtir.on{color:#FF6B8A}
.mcard .macoes .dir{margin-left:auto}
.mcard .macoes .dir + .dir{margin-left:0}   /* Bloquear + Denunciar juntos a direita */
.mcard .semfoto{height:104px;display:flex;align-items:center;justify-content:center;font-size:38px;
  background:linear-gradient(135deg,rgba(11,166,177,.20),rgba(1,48,95,.40))}

/* detalhe da pescaria */
.det{max-width:470px;margin:0 auto}
.det .dfoto{width:100%;max-height:62vh;object-fit:cover;border-radius:18px;display:block;background:rgba(0,0,0,.25);margin-bottom:14px}
.det .dlinha{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;
  padding:11px 2px;border-bottom:1px solid var(--line)}
.det .dlinha span{color:var(--mut2)}
.det .dlinha b{font-weight:700;text-align:right}
