/* ============================================================
   Just Ball · card do X1 na tela Jogar (29/10/2026, rodada 3 aprovada pelo Jordan)
   Fonte: lab/x1-card/jogar-x1.css (o lab e este arquivo são o mesmo, só muda o caminho dos assets)
   Tudo prefixado x1c-. Só transform e opacity animam; hover só com mouse;
   com prefers-reduced-motion o card fica parado na pose final (js).
   Pra integrar: este arquivo + jogar-x1.js (precisa de lab/clutch-v3/bola4.js
   e lab/badges/patch.js antes), a troca do markup do #jgX1Card e a largura
   do trilho (seção 1 abaixo).
   Rodada 2 (Jordan): o emblema do topo saiu; as setas são os chevrons do
   badge oficial Primeiro X1; o "X1" mora no chão da quadra.
   ============================================================ */

/* ---------- 1. trilho: o Clutch encolhe e o X1 aparece na borda ----------
   A 375 px a coluna do trilho tem 355 px (375 - gutter 20). 77% = 273 px:
   o X1 começa em 20 + 273 + 12 = 305 e mostra 70 px na borda (antes: 38). */
/* só vale com o card do X1 visível: no link oficial (chave x1 desligada, data-flag-off) o trilho
   segue como hoje e o Clutch fica sozinho (is-solo) */
.jg-rail:has(> #jgX1Card:not([data-flag-off]))>.pcard{flex-basis:77%}

/* ---------- 2. o card ---------- */
.x1c{min-height:428px}
.jg-rail>.pcard.x1c{min-height:428px}
.x1c .pcard__art{background:#060806}
.x1c-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}

/* rosto + luz + seta de cada lado: cada camada anda no arraste (js) */
.x1c-lado{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.x1c-rosto{position:absolute;will-change:transform}
.x1c-rosto img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.x1c-luz{mix-blend-mode:screen;opacity:.4;will-change:opacity}
/* medidas (card de 273 px): narizes a 42 px um do outro na pose final, olhos na
   mesma linha, a mesma altura de rosto nos dois (a dela x1,137 no arquivo) */
.x1c-rosto--m{left:-8.6%;top:34px;width:61.7%;aspect-ratio:640/760}
.x1c-rosto--f{left:57%;top:37px;width:54.8%;aspect-ratio:500/760}

/* os chevrons do badge oficial, grandes, atrás das cabeças na linha dos olhos (rodada 3, Jordan):
   o lima atrás dele apontando pro centro, o vermelho atrás dela apontando pro centro; as pontas
   aparecem entre os dois rostos, a 21 px uma da outra, como no badge (a faísca fica no vão) */
.x1c-seta{position:absolute;top:82px;width:27%;aspect-ratio:74/68;will-change:transform,opacity}
.x1c-seta--v{left:22.2%}
.x1c-seta--r{right:22.2%}
.x1c-chev{width:100%;height:100%;display:block;overflow:visible}
/* gesto da chegada: os dois avançam um tico e assentam (uma vez por chegada, js) */
.x1c--chega .x1c-seta--v .x1c-chev{animation:x1cAvV .7s cubic-bezier(.45,0,.25,1) both}
.x1c--chega .x1c-seta--r .x1c-chev{animation:x1cAvR .7s cubic-bezier(.45,0,.25,1) both}
@keyframes x1cAvV{0%{transform:none}40%{transform:translateX(6px)}100%{transform:none}}
@keyframes x1cAvR{0%{transform:none}40%{transform:translateX(-6px)}100%{transform:none}}

/* grão neutro do Jordan sobre a arte inteira (o rosto e o fundo no mesmo grão) */
.x1c-grao{position:absolute;inset:0;background:url('../assets/x1/x1-grao.webp') 0 0/300px auto;mix-blend-mode:overlay;opacity:.55;pointer-events:none}

/* o texto senta num chão escuro; o X1 do chão fica no começo desse chão, por cima do degradê */
.pcard--pop.x1c .pcard__art::after{background:
  linear-gradient(180deg,rgba(7,9,7,.3) 0%,rgba(7,9,7,0) 14%,rgba(7,9,7,0) 44%,rgba(7,9,7,.72) 54%,rgba(7,9,7,.94) 61%,rgba(7,9,7,.97) 100%),
  radial-gradient(55% 22% at 50% 0%,rgba(197,255,26,.10),transparent 75%)}

/* ---------- 3. o X1 no chão da quadra ----------
   Barlow Condensed 900, X lima e 1 branco como no badge oficial, deitado no chão
   (perspectiva fixa, não anima) com cordão preto em volta e uma poça de luz embaixo.
   Mora no fluxo do texto, logo acima do título: se o título quebrar em duas linhas,
   o X1 sobe junto e nunca encosta nele. A camada de fora anda no arraste (js);
   a de dentro guarda a perspectiva. */
.x1c-chao{position:relative;z-index:2;flex:none;width:150px;height:48px;margin:0 auto 4px;pointer-events:none;will-change:transform,opacity}
.x1c-chao::before{content:"";position:absolute;left:-10%;right:-10%;top:42%;height:70%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(197,255,26,.22),rgba(3,199,63,.10) 55%,transparent);transform:scaleY(.55)}
.x1c-chao__t{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-end;gap:2px;
  font-family:var(--disp);font-weight:900;font-size:66px;line-height:.8;letter-spacing:-.01em;
  transform:perspective(220px) rotateX(34deg) skewX(-11deg);transform-origin:50% 100%}
.x1c-chao__t b{position:relative;font-weight:900;-webkit-text-stroke:2px #050505;paint-order:stroke fill;
  filter:drop-shadow(0 2px 0 #000) drop-shadow(0 5px 10px rgba(0,0,0,.7))}
/* a cor de cada letra leva o grão do Jordan por cima (fundo recortado no texto), sem caixa em volta */
.x1c-chao__x,.x1c-chao__1{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.x1c-chao__x{background-image:url('../assets/x1/x1-grao.webp'),linear-gradient(180deg,#d9ff5c,#c5ff1a 45%,#9fd400);background-size:200px auto,100% 100%}
.x1c-chao__1{background-image:url('../assets/x1/x1-grao.webp'),linear-gradient(180deg,#ffffff,#f2efea 50%,#cfcac0);background-size:200px auto,100% 100%}

/* ---------- 4. texto ---------- */
.x1c .pcard__b{padding-top:0}
.x1c .x1c-t{white-space:normal;text-wrap:balance;max-width:230px}
.x1c .pcard__p{text-shadow:0 1px 10px rgba(0,0,0,.8)}

@media (prefers-reduced-motion:reduce){
  .x1c--chega .x1c-chev{animation:none}
}

/* ---------- 5. toque e frase em todo o fluxo do X1 (31/10/2026, prova do Drop 3, _dev/x1_tela.py) ----------
   Medido a 390x844 e 360x640: Aceitar, Agora não, Confirmar, Corrigir e Cancelar tinham 34 px; as opções do
   formulário, 40; os + e - do placar, 36; o X da folha, 38. Tudo sobe pra 44 só aqui, sem mexer em botão de
   outra tela. A frase que quebrava deixando uma palavra sozinha na última linha divide por igual
   (Safari 17.5 e Chrome 114 em diante; antes disso fica como era). */
#sheet .seg button{min-height:44px}
#sheet .stepper button{width:44px;height:44px}
#sheet .sheet__x{width:44px;height:44px}
#sheet label.fld{min-height:44px}
#pendBlock .pi__acts .btn,#incoming .btn{min-height:44px}
#x1Go,#rivals .btn--sm{min-height:44px}
.flow__t,.flow__p,#sheet .note,.pi__t,.pi__fr,.pi__route,.pi__hint,.incoming__s,.x1conv__p,.rival__s,#x1Sec .sec__s,.x1c .pcard__p{text-wrap:balance}

/* ---------- 6. "te chamou pro X1" no Início (31/10/2026, js/jogar-x1.js) ----------
   Cartão pequeno acima do check-in, só existe com desafio pendente. O cartão inteiro é o toque. */
.x1ch{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin:0 0 12px;padding:8px 12px 8px 10px;text-align:left;border-radius:16px;border:1px solid rgba(197,255,26,.4);background:var(--ink-3);color:#fafafa;font-size:14px;font-weight:700;line-height:1.25}
.x1ch__f{display:flex;flex:none}
.x1ch__f .av{width:40px;height:40px;border:2px solid var(--ink-3)}
.x1ch__f .av+.av{margin-left:-14px}
.x1ch__t{flex:1;min-width:0;text-wrap:balance}
.x1ch__v{flex:none;width:18px;height:18px;fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}