/* ============================================================
   Just Ball · jogos no Início (Jordan, 31/10/2026). Tudo prefixado ij-.
   Herda o trilho e os pontinhos da aba Jogar (.jg-rail, .jg-dot) e o card (.pcard);
   os rostos e os chevrons do X1 são as mesmas peças do card da aba Jogar (css/jogar-x1.css),
   só mais altos no recorte, porque aqui o card é baixo.
   ============================================================ */
/* 31/10/2026 (Jordan): respiro entre o calendário e os jogos, e o emblema furando a borda de cima. O trilho rola de lado e cortaria o que passa dele: o espaço do emblema vem do padding de cima, como na aba Jogar */
.ij{margin:30px 0 18px}
.jg-rail.ij-rail{padding-top:70px;margin-top:0}
.jg-rail.ij-rail>.pcard{flex:0 0 80%;height:276px;min-height:0}
.jg-rail.ij-rail.is-solo>.pcard{flex:1 1 100%;max-width:none}
.ij-c{cursor:pointer;-webkit-tap-highlight-color:transparent}
.ij-bg{position:absolute;inset:-2px -14px;width:calc(100% + 28px);max-width:none;height:calc(100% + 4px);object-fit:cover;object-position:50% 0;
  transform:translate3d(var(--bx,0px),var(--by,0px),0);will-change:transform}
.ij-c .pcard__art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,9,7,0) 34%,rgba(7,9,7,.82) 56%,rgba(7,9,7,.96) 72%,rgba(7,9,7,.98) 100%)}

/* texto e botão sentam no chão escuro */
.ij-b{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;align-items:center;padding:0 16px 16px;text-align:center}
.ij-t{font-family:var(--disp);font-weight:900;font-size:clamp(23px,6.6vw,28px);line-height:1;text-transform:uppercase;letter-spacing:.01em;margin:0 0 10px;text-wrap:balance}
.ij-go{width:100%;min-height:44px}

/* Clutch: mesma profundidade da aba Jogar. O emblema fura a borda de cima e anda mais que o card; a quadra anda menos (js/inicio-jogos.js) */
.ij-c--shot{overflow:visible}
.ij-c--shot .pcard__art,.ij-c--shot::after{border-radius:inherit}
.ij-emb{position:absolute;z-index:4;left:50%;top:-62px;width:68%;max-width:196px;height:auto;pointer-events:none;
  transform:translate3d(calc(-50% + var(--px,0px)),var(--py,0px),0) rotate(-3deg);transform-origin:50% 60%;will-change:transform}
.jg-rail.ij-rail.is-solo .ij-emb{max-width:210px;width:60%}

/* X1: mesmas peças, mais altas no recorte */
.ij-c--x1 .x1c-rosto--m{top:0}
.ij-c--x1 .x1c-rosto--f{top:3px}
.ij-c--x1 .x1c-seta{top:48px}
.ij-c--x1 .x1c-chao{margin-bottom:0;height:44px}
.ij-c--x1 .pcard__art::after{background:linear-gradient(180deg,rgba(7,9,7,.2) 0%,rgba(7,9,7,0) 12%,rgba(7,9,7,0) 34%,rgba(7,9,7,.74) 50%,rgba(7,9,7,.95) 64%,rgba(7,9,7,.98) 100%)}

/* pontinhos: o desenho é o mesmo da aba Jogar, a área de toque aqui é de 44 px (_dev/x1_tela.py, grupo 10) */
.ij .jg-dots{gap:0;margin:-4px 0 -10px}
.ij .jg-dot{width:44px;height:44px}