/* ============================================================
   Just Ball · aba Jogar (Sessão C, 14/10/2026): carrossel de jogos,
   rankings, a galera e o perfil público. Tudo prefixado jg-.
   Reaproveita o design system do app: .pcard, .chips/.chip, .seg, .btn,
   .badge, .cat, .kick, .sec__t, .empty, .x1ini, .ld, tokens de app.css.
   Só transform e opacity animam; hover só com mouse; reduced-motion respeitado.
   ============================================================ */

/* ---------- 1. carrossel de jogos (mesmo trilho da .lj-rail, card largo) ---------- */
.jg-rail{display:flex;align-items:stretch;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
  margin:0 calc(var(--gut) * -1);padding:2px 0 8px var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.jg-rail::-webkit-scrollbar{display:none}
/* 24/10/2026: o emblema do card fura a borda de cima; o trilho rola de lado e corta o que passa dele,
   então o respiro de cima vem daqui e o trilho sobe por cima do vão do título (sem nada clicável ali) */
.jg-rail:has(> .pcard--pop:not([data-flag-off])){padding-top:96px;margin-top:-4px}
.jg-rail>.pcard.pcard--pop{min-height:372px}
.jg-rail>.pcard{flex:0 0 86%;scroll-snap-align:start;scroll-snap-stop:always;margin-bottom:0;display:flex;flex-direction:column;justify-content:flex-end;min-height:268px}
/* respiro do fim: o Safari ignora padding-right num trilho que rola, então ele vem deste pedaço (+ gap 12 = --gut) */
.jg-rail::after{content:"";flex:0 0 calc(var(--gut) - 12px)}
.jg-rail>.pcard .pcard__b{flex:none}
/* JB7 Jam "em breve": só aparece enquanto a chave jam está desligada */
/* 25/10/2026 (Jordan): no Drop 2 só o Clutch aparece; o "em breve" do Jam volta com o carrossel no Drop 3 */
.jg-rail>.pcard.jg-soon{display:none}
.jg-soon__s{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.jg-soon .arc-t{opacity:.8}

/* 25/10/2026 (Jordan): um jogo só = sem carrossel. O card ocupa a largura da coluna, no centro, e a tela
   começa nele (sem o cabeçalho "Jogar"); o respiro de cima é o que o emblema precisa pra furar a borda */
.jg-rail.is-solo{overflow:visible;scroll-snap-type:none;margin:0;padding:0 0 8px}
.jg-rail.is-solo::after{display:none}
.jg-rail.is-solo>.pcard{flex:1 1 100%;max-width:440px;margin:0 auto}
.jg-rail.is-solo:has(> .pcard--pop:not([data-flag-off])){padding-top:112px;margin-top:0}
.jg-rail.is-solo>.pcard.pcard--pop{min-height:0}

/* pontinhos: a pílula do card atual cresce (scaleX), os outros ficam pequenos e apagados */
.jg-dots{display:flex;justify-content:center;gap:2px;margin-top:4px}
.jg-dot{position:relative;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--rp)}
.jg-dot::before{content:"";width:18px;height:6px;border-radius:3px;background:var(--paper);opacity:.28;transform:scaleX(.34);transition:transform .35s var(--e),opacity .35s var(--e),background-color .35s var(--e)}
.jg-dot[aria-selected="true"]::before{background:var(--lime);opacity:1;transform:none}
.jg-dot:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}

/* ---------- 2. rankings ---------- */
.jg-rk__chips{margin-bottom:10px}
/* 21/10/2026: filtros da galera, trilho rolável que nunca quebra linha */
.jg-gl__f{flex-wrap:nowrap;margin-bottom:10px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.jg-gl__f .chip{height:44px;padding:0 16px;scroll-snap-align:start;white-space:nowrap;transition:background .2s,color .2s,border-color .2s,transform .15s var(--e)}
.jg-gl__f .chip:active{transform:scale(.97)}
.jg-gl__f .chip:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.jg-gl__f .chip:not([aria-pressed="true"]):hover{border-color:rgba(255,255,255,.22)}}
.jg-rk__modo{max-width:220px;margin-bottom:12px}
.jg-rk__ol,.jg-gl__ul{list-style:none;display:grid;gap:6px}

/* 15/10 (Jordan): quem muda de posição desliza até o lugar novo (FLIP em js/jogar.js) */
.jg-rk__ol li{position:relative;transition:transform .75s cubic-bezier(.23,1,.32,1)}
.jg-rk__ol li.is-sobe{z-index:2}
.jg-rk__ol li.is-sobe .jg-row{border-color:rgba(197,255,26,.7);box-shadow:0 0 0 1px rgba(197,255,26,.35),0 10px 28px rgba(197,255,26,.14);transition:border-color .6s,box-shadow .6s}
.jg-row__up{position:absolute;top:-9px;right:12px;height:20px;padding:0 9px;box-shadow:0 4px 14px rgba(197,255,26,.35);border-radius:var(--rp);background:var(--lime);color:#0a0a0a;font-size:11px;font-weight:800;line-height:20px;z-index:3;pointer-events:none;
  animation:jgUp 2.6s cubic-bezier(.23,1,.32,1) both}
@keyframes jgUp{0%{opacity:0;transform:translateY(6px) scale(.95)}12%{opacity:1;transform:none}78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
.jg-rk__ol li.is-novo{animation:jgNovo .5s cubic-bezier(.23,1,.32,1) both}
@keyframes jgNovo{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}

/* 25/10/2026 (Jordan): "quem está no ranking tem que ser valorizado". Pódio nos três primeiros:
   1º lima com coroa e brilho, 2º e 3º com borda clara; posição no número grande da marca */
.jg-pod .jg-row{min-height:66px;border-width:1.5px}
.jg-pod .jg-av{width:46px;height:46px}
.jg-pod .jg-row__n{font-size:15.5px}
.jg-pod .jg-row__pos{width:26px;font-family:var(--disp);font-weight:900;font-size:22px;line-height:1}
.jg-pod--1 .jg-row{border-color:rgba(197,255,26,.75);background:radial-gradient(120% 140% at 0% 50%,rgba(197,255,26,.16),transparent 60%),var(--ink-3);box-shadow:0 10px 26px rgba(197,255,26,.12)}
.jg-pod--1 .jg-av{box-shadow:0 0 0 2px var(--lime)}
.jg-pod--1 .jg-row__v{font-family:var(--disp);font-weight:900;font-size:24px;line-height:1}
.jg-pod--2 .jg-row,.jg-pod--3 .jg-row{border-color:rgba(255,255,255,.22)}
.jg-pod--2 .jg-row__pos,.jg-pod--3 .jg-row__pos{color:var(--paper)}
.jg-pod--2 .jg-av,.jg-pod--3 .jg-av{box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.jg-pod--2 .jg-row__v,.jg-pod--3 .jg-row__v{font-family:var(--disp);font-weight:900;font-size:20px;line-height:1}
.jg-rk__ol li:not(.jg-pod) .jg-row__pos{font-family:var(--disp);font-weight:900;font-size:16px}
.jg-row__pos{position:relative}
.jg-crown{position:absolute;left:50%;top:-13px;width:16px;height:11px;transform:translateX(-50%);fill:var(--lime)}
/* quem subiu: o card cresce de leve e acende, e a seta conta quantas posições ganhou */
.jg-rk__ol li.is-sobe .jg-row{animation:jgPop 1.1s cubic-bezier(.23,1,.32,1) both}
@keyframes jgPop{0%{transform:scale(.97)}35%{transform:scale(1.035)}100%{transform:none}}

/* linha de atleta (ranking e galera) */
.jg-row{width:100%;display:flex;align-items:center;gap:12px;min-height:58px;padding:9px 12px;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line-2);
  text-align:left;transition:transform .15s var(--e),border-color .25s}
.jg-row:active{transform:scale(.97)}
.jg-row:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.jg-row.is-eu{border-color:rgba(197,255,26,.42);background:linear-gradient(90deg,rgba(197,255,26,.08),var(--ink-3) 60%)}
.jg-row__pos{flex:none;width:20px;text-align:center;font-size:12px;font-weight:700;color:var(--mute)}
.jg-rk__ol li:first-child .jg-row__pos{color:var(--lime)}
.jg-row__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.jg-row__n{font-size:14.5px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jg-row__n small{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);margin-left:4px}
.jg-row__s{display:flex;align-items:center;gap:6px;line-height:1}
.jg-row__v{flex:none;font-size:15px;font-weight:700;color:var(--lime)}
.jg-row__go{flex:none;color:var(--mute-2)}
.jg-row__go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* avatar: foto ou inicial (.x1ini do app) */
.jg-av{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--ink-2);display:block}
.jg-av img{width:100%;height:100%;object-fit:cover}
.jg-av .x1ini{font-size:18px}
.jg-av--lg{width:84px;height:84px;border-radius:22px}
.jg-av--lg .x1ini{font-size:40px}

/* carregando, erro, vazio, convite */
.jg-msg{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 12px;text-align:center;font-size:13px;color:var(--mute)}
.jg-vazio{text-align:center}
.jg-conv{padding:18px 16px;border-radius:var(--r);background:linear-gradient(135deg,rgba(197,255,26,.12),var(--ink-3) 70%);border:1px solid rgba(197,255,26,.28);text-align:center}
.jg-conv__t{font-family:var(--disp);font-weight:900;font-size:22px;text-transform:uppercase;line-height:1}
.jg-conv__p{font-size:13px;color:var(--mute);margin:8px auto 14px;max-width:280px;line-height:1.45}

/* 25/10/2026: a galera também ganha presença: avatar maior com anel, nome em destaque */
.jg-gl__ul .jg-row{min-height:64px;background:linear-gradient(90deg,rgba(255,255,255,.035),transparent 70%),var(--ink-3)}
.jg-gl__ul .jg-av{width:46px;height:46px;box-shadow:0 0 0 1.5px rgba(197,255,26,.35)}
.jg-gl__ul .jg-row__n{font-size:15.5px}

/* ---------- 3. a galera: busca ---------- */
.jg-busca{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;margin-bottom:10px;border-radius:var(--rp);background:var(--ink-3);border:1px solid var(--line);transition:border-color .2s}
.jg-busca:focus-within{border-color:rgba(197,255,26,.55)}
.jg-busca svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--mute);stroke-width:2;stroke-linecap:round}
/* 16px: o Safari do iPhone não dá zoom no campo */
.jg-busca input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:var(--paper);font:500 16px/1 var(--body)}
.jg-busca input::placeholder{color:var(--mute-2)}
.jg-busca input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* ---------- 4. perfil público (dentro do #sheet2) ---------- */
.jg-pf{padding:4px 2px 6px}
.jg-pf__top{display:flex;align-items:center;gap:14px;padding-right:44px}
.jg-pf__id{min-width:0}
.jg-pf__id .kick{margin-bottom:6px}
.jg-pf__n{font-family:var(--disp);font-weight:900;font-size:32px;line-height:.95;text-transform:uppercase;overflow-wrap:anywhere}
.jg-pf__m{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.jg-pf__sec{margin-top:20px}
.jg-pf__sec .kick{margin-bottom:8px}
.jg-pf__vazio{padding:12px 14px;border-radius:var(--rs);border:1px dashed var(--line);font-size:12.5px;color:var(--mute);line-height:1.45}
.jg-pf__cq{list-style:none;display:grid;gap:6px}
.jg-pf__cq li{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:var(--rs);background:var(--ink-3);border:1px solid var(--line-2)}
.jg-pf__ck{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.jg-pf__cq b{font-size:15px;font-weight:700}
.jg-pf__ld{display:flex;justify-content:center;padding:12px 0}

@media (hover:hover) and (pointer:fine){
  .jg-row:hover{border-color:rgba(197,255,26,.32)}
  .jg-dot:hover::before{opacity:.6}
  .jg-dot[aria-selected="true"]:hover::before{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .jg-row,.jg-dot::before,.jg-busca,.jg-rk__ol li{transition:none}
  .jg-row__up,.jg-rk__ol li.is-novo,.jg-rk__ol li.is-sobe .jg-row{animation:none}
  .jg-row:active{transform:none}
}