/* ============================================================
   Just Ball · app v2 (protótipo do grupo de avaliação, 09/10/2026)
   Base herdada do app-preview de 08/10. Quadra à noite: o lima é luz.
   Movimento: entra rápido, assenta devagar. Nunca quica.
   ============================================================ */

@font-face{font-family:'Barlow Condensed';font-weight:800;font-display:swap;src:url('../assets/fonts/barlow-condensed-800-latin.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:900;font-display:swap;src:url('../assets/fonts/barlow-condensed-900-latin.woff2') format('woff2')}
/* 31/10/2026: Manrope e JetBrains são fonte variável, e os quatro e os dois arquivos são idênticos byte a byte (md5). Cada nome baixava de novo; agora é um arquivo por família, o que o index já pré-carrega */
@font-face{font-family:'Manrope';font-weight:500;font-display:swap;src:url('../assets/fonts/manrope-700-latin.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:600;font-display:swap;src:url('../assets/fonts/manrope-700-latin.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url('../assets/fonts/manrope-700-latin.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:800;font-display:swap;src:url('../assets/fonts/manrope-700-latin.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;src:url('../assets/fonts/jetbrains-mono-500-latin.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:700;font-display:swap;src:url('../assets/fonts/jetbrains-mono-500-latin.woff2') format('woff2')}

:root{
  --ink:#050505; --ink-2:#0b0b0b; --ink-3:#121212; --ink-4:#191919;
  --lime:#c5ff1a; --green:#03c73f; --mint:#83ffa9;
  --paper:#fafafa; --mute:#8f8f8f; --mute-2:#5e5e5e;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
  --lime-dim:rgba(197,255,26,.14);
  --disp:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --r:16px; --rs:10px; --rp:999px;
  --e:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{height:100%;overflow:hidden}
body{background:var(--ink);color:var(--paper);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%;height:auto}
svg{display:block}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- PALCO (desktop): moldura de celular no meio da quadra escura ---------- */
.stage{position:relative;height:100%;display:grid;place-items:center;overflow:hidden;
  background:
    radial-gradient(60% 50% at 50% 55%, rgba(3,199,63,.10), transparent 70%),
    radial-gradient(40% 30% at 50% 50%, rgba(197,255,26,.05), transparent 70%),
    var(--ink)}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 179px, rgba(197,255,26,.07) 180px 181px, transparent 182px),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(197,255,26,.06) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px))}
.stage__cap{position:absolute;left:clamp(24px,5vw,72px);top:50%;transform:translateY(-50%);max-width:260px}
.stage__cap img{width:120px;margin-bottom:22px;opacity:.95}
.stage__k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime);margin-bottom:10px}
.stage__h{font-family:var(--disp);font-weight:900;font-size:clamp(2.2rem,3.4vw,3.4rem);line-height:.95;text-transform:uppercase;margin-bottom:14px}
.stage__p{color:var(--mute);font-size:14px}
@media (max-width:1100px){.stage__cap{display:none}}

.phone{position:relative;width:min(430px,100vw);height:min(900px,calc(100dvh - 40px));
  background:var(--ink);border-radius:46px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 0 9px #0d0d0d,0 0 0 10px rgba(255,255,255,.08),0 40px 120px rgba(0,0,0,.8),0 0 140px rgba(3,199,63,.10);
  isolation:isolate}
@media (max-width:500px){
  .phone{width:100vw;height:100dvh;border-radius:0;box-shadow:none}
}

/* ---------- TOPO ---------- */
.top{position:relative;z-index:20;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) 18px 12px;background:rgba(5,5,5,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.top__l{display:flex;align-items:center;gap:12px;min-width:0}
.top__r{display:flex;align-items:center;gap:8px}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--ink-3);transition:background .25s,border-color .25s,transform .15s var(--e)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-btn[aria-pressed="true"]{border-color:var(--lime);color:var(--lime);background:var(--lime-dim)}
.me-btn{width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid var(--lime);transition:transform .15s var(--e)}
.me-btn img{width:100%;height:100%;object-fit:cover}

/* ---------- ÁREA DE ROLAGEM E TELAS ---------- */
.scr{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none}
.scr::-webkit-scrollbar{display:none}
.screen{padding:18px 16px 32px}
.screen.is-in{animation:scrIn .42s var(--e) both}
@keyframes scrIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.sec{margin-top:28px}
.sec__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.sec__t{font-family:var(--disp);font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.02em;line-height:1.05}
.sec__s{font-size:12px;color:var(--mute)}
.kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}

/* ---------- BOTÕES ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--rp);
  font-weight:800;font-size:14px;letter-spacing:.01em;white-space:nowrap;transition:transform .15s var(--e),background .25s,box-shadow .25s,opacity .2s}
.btn--lime{background:var(--lime);color:#0a0a0a;box-shadow:0 0 0 0 rgba(197,255,26,0),0 8px 26px rgba(197,255,26,.22)}
.btn--ghost{border:1px solid var(--line);background:var(--ink-3);color:var(--paper)}
.btn--full{width:100%}
.btn--sm{min-height:36px;padding:0 14px;font-size:12.5px}
/* 22/10/2026: "Ver todos (N)" das listas com teto (js/lista.js) */
.lmx{min-width:0;overflow-anchor:none}
.lmx__b{margin-top:10px;min-height:44px}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
button:active,.tap:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn--lime:hover{box-shadow:0 0 0 4px rgba(197,255,26,.16),0 10px 30px rgba(197,255,26,.3)}
  .btn--ghost:hover,.icon-btn:hover{border-color:rgba(255,255,255,.22)}
  .acard:hover{border-color:rgba(197,255,26,.4)}
  .tab:hover{color:var(--paper)}
}

/* ---------- BADGES E SELOS ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:var(--rp);font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.badge--rookie{background:rgba(131,255,169,.12);color:var(--mint)}
.badge--novato{background:rgba(255,255,255,.08);color:#d9d9d9}
.badge--experiente{background:var(--lime-dim);color:var(--lime)}
.badge--veterano{background:var(--lime);color:#0a0a0a}
.badge--coach{background:var(--paper);color:#0a0a0a}
.cat{font-family:var(--mono);font-size:10.5px;color:var(--mute);letter-spacing:.06em}
.selos{display:flex;gap:4px}
.selo{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--ink-4);border:1px solid var(--line);color:var(--lime)}
.selo svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.av{border-radius:50%;overflow:hidden;background:var(--ink-3);flex:none}
.av img,.av svg{width:100%;height:100%;object-fit:cover}

.missions{border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line-2);overflow:hidden}
.mis{display:flex;align-items:center;gap:12px;width:100%;padding:14px;text-align:left;border-bottom:1px solid var(--line-2);min-height:56px}
.mis:last-child{border-bottom:0}
.mis__c{width:24px;height:24px;border-radius:8px;border:1.5px solid var(--mute-2);display:grid;place-items:center;flex:none;transition:background .25s,border-color .25s}
.mis__c svg{width:14px;height:14px;fill:none;stroke:#0a0a0a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s var(--e)}
.mis__t{flex:1;font-weight:600;font-size:14px}
.mis__x{font-family:var(--mono);font-size:11px;color:var(--mute)}
.mis.is-done .mis__c{background:var(--lime);border-color:var(--lime)}
.mis.is-done .mis__c svg{opacity:1;transform:scale(1)}
.mis.is-done .mis__t{color:var(--mute);text-decoration:line-through;text-decoration-color:var(--mute-2)}

.coletivo{padding:18px;border-radius:var(--r);background:linear-gradient(150deg,#0e1409,var(--ink-3) 70%);border:1px solid rgba(197,255,26,.18)}
.coletivo__big{display:flex;align-items:baseline;gap:6px;margin:10px 0 2px}
.coletivo__big b{font-family:var(--mono);font-weight:700;font-size:34px;color:var(--lime);line-height:1}
.coletivo__big span{font-family:var(--mono);color:var(--mute);font-size:14px}
.coletivo p{font-size:13px;color:#cfcfcf}
.bar{height:10px;border-radius:var(--rp);background:rgba(255,255,255,.07);overflow:hidden;margin:14px 0 10px}
.bar__f{height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),var(--lime));transform-origin:0 50%;transform:scaleX(0);transition:transform 1.6s var(--e)}
.coletivo__foot{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11.5px;color:var(--mute)}

.feed{display:flex;flex-direction:column;gap:10px}
.ev{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line-2)}
.ev .av{width:42px;height:42px}
.ev__b{flex:1;min-width:0}
.ev__t{font-size:14px;line-height:1.35}
.ev__t b{font-weight:800}
.ev__m{font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-top:3px}
.ev__acts{margin-top:10px;display:flex;gap:8px}
.ev__acts .btn{min-height:34px;padding:0 12px;font-size:12px}
.ev__acts .btn.is-sent{background:var(--lime-dim);color:var(--lime);border-color:transparent}
.ev--win{background:linear-gradient(135deg,rgba(197,255,26,.10),var(--ink-3) 55%);border-color:rgba(197,255,26,.22)}
.mini-score{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.35)}
.mini-score .av{width:30px;height:30px}
.mini-score b{font-family:var(--mono);font-size:18px;font-weight:700}
.mini-score .w{color:var(--lime)}
.mini-score span{font-size:12px;color:var(--mute)}

/* ============================================================
   X1
   ============================================================ */
.incoming{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r);background:linear-gradient(135deg,rgba(197,255,26,.14),var(--ink-3) 65%);border:1px solid rgba(197,255,26,.3)}
.incoming .av{width:46px;height:46px}
.incoming__b{flex:1;min-width:0}
.incoming__t{font-weight:700;font-size:14px;line-height:1.3}
.incoming__s{font-size:11.5px;color:var(--mute)}
.incoming__acts{display:flex;gap:8px;margin-top:10px}
.incoming__acts .btn{min-height:34px;padding:0 14px;font-size:12.5px}

.chips{display:flex;gap:8px;overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:36px;padding:0 14px;border-radius:var(--rp);border:1px solid var(--line);background:var(--ink-3);font-size:13px;font-weight:700;color:#cfcfcf;transition:background .2s,color .2s,border-color .2s}
.chip[aria-pressed="true"]{background:var(--paper);color:#0a0a0a;border-color:var(--paper)}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.acard{position:relative;text-align:left;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line-2);overflow:hidden;transition:border-color .25s,transform .15s var(--e)}
.acard__ph{position:relative;aspect-ratio:1/1.02;overflow:hidden;background:var(--ink-2)}
.acard__ph img,.acard__ph svg{width:100%;height:100%;object-fit:cover}
.acard__ph::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(0deg,var(--ink-3),transparent)}
.acard__tag{position:absolute;top:8px;left:8px;z-index:2}
.acard__rec{position:absolute;top:8px;right:8px;z-index:2;font-family:var(--mono);font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:7px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.acard__b{padding:4px 12px 12px;position:relative;z-index:2;margin-top:-18px}
.acard__n{font-family:var(--disp);font-weight:800;font-size:22px;line-height:1;text-transform:uppercase}
.acard__row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px}
.acard__streak{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-size:10.5px;color:var(--lime)}
.acard__streak svg{width:11px;height:11px;fill:currentColor}

.rivals{display:flex;flex-direction:column;gap:10px}
.rival{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line-2)}
.rival__faces{display:flex;flex:none}
.rival__faces .av{width:36px;height:36px;border:2px solid var(--ink-3)}
.rival__faces .av+.av{margin-left:-10px}
.rival__b{flex:1;min-width:0}
.rival__t{font-weight:800;font-size:14px}
.rival__s{font-size:11.5px;color:var(--mute)}
.rival__s b{color:var(--lime);font-weight:700}

/* ---------- SHEET (desafio) ---------- */
.sheet{position:absolute;inset:0;z-index:60;display:flex;align-items:flex-end}
.sheet__bg{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .3s}
.sheet__p{position:relative;width:100%;max-height:92%;overflow-y:auto;background:var(--ink-2);border-radius:26px 26px 0 0;border-top:1px solid var(--line);
  padding:10px 18px calc(24px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .42s var(--e)}
.sheet.is-open .sheet__bg{opacity:1}
.sheet.is-open .sheet__p{transform:none}
.sheet.is-closing .sheet__p{transition-duration:.22s;transition-timing-function:var(--e-io)}
.sheet__grab{width:40px;height:4px;border-radius:4px;background:rgba(255,255,255,.18);margin:0 auto 12px}
.sheet__x{position:absolute;top:12px;right:14px;z-index:2}
.prof{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.prof .av{width:72px;height:72px;border-radius:20px}
.prof__n{font-family:var(--disp);font-weight:900;font-size:32px;text-transform:uppercase;line-height:.95}
.prof__m{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.fact{padding:10px;border-radius:12px;background:var(--ink-3);border:1px solid var(--line-2)}
.fact b{display:block;font-family:var(--mono);font-size:18px;font-weight:700}
.fact span{font-size:10.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
.fld{margin-bottom:14px}
.fld__l{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.seg{display:flex;gap:6px;padding:4px;border-radius:14px;background:var(--ink-3);border:1px solid var(--line-2)}
.seg button{flex:1;min-height:40px;border-radius:10px;font-size:13px;font-weight:700;color:#bdbdbd;transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--paper);color:#0a0a0a}
.flow{padding:16px;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line-2);text-align:center}
.flow__st{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);margin-bottom:6px}
.flow__dot{width:8px;height:8px;border-radius:50%;background:var(--lime);animation:pulse 1.4s var(--e-io) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.flow__t{font-family:var(--disp);font-weight:800;font-size:26px;text-transform:uppercase;line-height:1.05;margin-bottom:6px}
.flow__p{font-size:13px;color:var(--mute);margin-bottom:14px}
.steps{display:flex;justify-content:center;gap:6px;margin-bottom:14px}
.steps i{width:22px;height:4px;border-radius:4px;background:rgba(255,255,255,.12)}
.steps i.on{background:var(--lime)}
.score-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:6px 0 14px}
.sc{display:flex;flex-direction:column;align-items:center;gap:8px}
.sc .av{width:44px;height:44px}
.sc__n{font-size:12px;font-weight:700}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--ink-2);font-size:18px;font-weight:700}
.stepper b{font-family:var(--mono);font-size:30px;font-weight:700;min-width:44px;text-align:center}
.score-in__x{font-family:var(--disp);font-weight:900;font-size:22px;color:var(--mute-2)}
.err{color:#ff9a7a;font-size:12px;margin:-6px 0 10px}
.note{font-size:11.5px;color:var(--mute);margin-top:10px}


/* ============================================================
   PERFIL
   ============================================================ */

.passos{display:flex;gap:16px;align-items:flex-start;padding:16px;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line-2)}
.ring{position:relative;width:86px;height:86px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8}
.ring__bg{stroke:rgba(255,255,255,.08)}
.ring__fg{stroke:var(--lime);stroke-linecap:round}
.ring__v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring__v b{font-family:var(--mono);font-size:22px;font-weight:700;line-height:1}
.ring__v span{font-size:10px;color:var(--mute)}
.plist{flex:1;list-style:none;display:flex;flex-direction:column;gap:2px}
.plist button{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;text-align:left;font-size:13.5px;font-weight:600}
.plist .mis__c{width:20px;height:20px;border-radius:6px}
.plist .mis__c svg{width:12px;height:12px}
.plist .is-done .mis__c{background:var(--lime);border-color:var(--lime)}
.plist .is-done .mis__c svg{opacity:1;transform:scale(1)}
.plist .is-done span{color:var(--mute)}

.selgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sg{padding:14px 8px 12px;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line-2);text-align:center}
.sg__ic{width:44px;height:44px;margin:0 auto 8px;border-radius:14px;display:grid;place-items:center;background:var(--lime);color:#0a0a0a}
.sg__ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sg__n{font-size:11.5px;font-weight:700;line-height:1.25}
.sg.is-lock .sg__ic{background:var(--ink-4);color:var(--mute-2)}
.sg.is-lock .sg__n{color:var(--mute-2)}


.hist{border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line-2);overflow:hidden}
.hrow{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line-2)}
.hrow:last-child{border-bottom:0}
.hrow .av{width:32px;height:32px}
.hrow__b{flex:1;min-width:0}
.hrow__n{font-weight:700;font-size:13.5px}
.hrow__m{font-family:var(--mono);font-size:10px;color:var(--mute)}
.hrow__r{font-family:var(--mono);font-weight:700;font-size:14px}
.hrow__w{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;font-family:var(--mono);font-size:11px;font-weight:700;margin-left:8px}
.hrow__w.v{background:var(--lime);color:#0a0a0a}
.hrow__w.d{background:var(--ink-4);color:var(--mute)}
/* ---------- BARRA DE ABAS ---------- */
.tabs{position:relative;z-index:30;flex:none;display:grid;grid-template-columns:repeat(5,1fr);padding:6px 6px calc(8px + env(safe-area-inset-bottom));background:rgba(8,8,8,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line-2)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:52px;justify-content:center;color:var(--mute);font-size:10.5px;font-weight:700;letter-spacing:.02em;transition:color .25s,transform .15s var(--e)}
.tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab::before{content:"";position:absolute;top:-6px;left:50%;width:26px;height:3px;margin-left:-13px;border-radius:0 0 4px 4px;background:var(--lime);box-shadow:0 0 14px rgba(197,255,26,.7);opacity:0;transform:scaleX(.4);transition:opacity .25s,transform .35s var(--e)}
.tab[aria-selected="true"]{color:var(--paper)}
.tab[aria-selected="true"] svg{stroke:var(--lime)}
.tab[aria-selected="true"]::before{opacity:1;transform:none}

/* ---------- TOAST ---------- */
.toast{position:absolute;left:50%;bottom:90px;z-index:100;transform:translate(-50%,10px);opacity:0;padding:10px 16px;border-radius:var(--rp);background:var(--paper);color:#0a0a0a;font-weight:700;font-size:13px;white-space:nowrap;pointer-events:none;transition:opacity .25s,transform .35s var(--e);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .screen.is-in{animation:none}
  .bar__f{transition:none}
  .sheet__p,.vc{transition:opacity .2s}
}

/* ---------- hero base (herdado) ---------- */
.hero{position:relative;height:262px;border-radius:22px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(70% 90% at 50% 120%, rgba(3,199,63,.38), transparent 60%),
    radial-gradient(50% 60% at 50% 0%, rgba(197,255,26,.10), transparent 70%),
    linear-gradient(180deg,#0f120c 0%,#070707 100%);
  border:1px solid rgba(197,255,26,.14)}
.hero::after,.vc::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:160px;opacity:.16;mix-blend-mode:overlay;pointer-events:none;z-index:5}
.pill-new{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:var(--rp);background:var(--lime);color:#0a0a0a;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.hero__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;color:var(--lime);margin-bottom:4px}
.hero__h{font-family:var(--disp);font-weight:900;font-size:clamp(40px,12vw,50px);line-height:.88;text-transform:uppercase;letter-spacing:.005em;margin-bottom:8px;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.hero__s{font-size:12.5px;line-height:1.35;color:#cfcfcf;margin-bottom:14px;max-width:190px}
.hero .btn{min-height:40px;padding:0 18px;font-size:13px}

/* ============================================================
   V2 · Just Ball (09/10/2026). Respiro: gutter único de 20px,
   nenhum carrossel encosta na borda, grão sobre tudo.
   ============================================================ */
:root{--gut:20px;--tabh:66px}
.phone::after{content:"";position:absolute;inset:0;z-index:400;pointer-events:none;background-image:var(--grain);background-size:160px;opacity:.07;mix-blend-mode:overlay}
.screen{padding:20px var(--gut) 40px}
.chips{margin:0 calc(var(--gut) * -1);padding:2px var(--gut);scroll-padding-inline:var(--gut)}
.pixel{image-rendering:pixelated;image-rendering:crisp-edges}

/* ---------- topo ---------- */
.top{padding:calc(12px + env(safe-area-inset-top)) var(--gut) 12px}
.top__logo{height:24px;width:auto}
.me-btn{background:radial-gradient(80% 80% at 50% 30%,#1d2a0c,#0a0a0a);display:grid;place-items:end center}
.me-btn img{width:100%;height:100%;object-fit:cover}
.me-btn img.pixel{object-fit:contain;object-position:50% 100%}

.scr__h{margin:4px 0 18px}
.scr__t{font-family:var(--disp);font-weight:900;font-size:clamp(38px,11vw,46px);line-height:.9;text-transform:uppercase;margin-top:4px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* ---------- hero v2 (arte do Agente D) ---------- */
.hero{height:auto;aspect-ratio:716/524;background:#050805}
.hero__k{margin-bottom:6px;text-shadow:0 1px 8px #000}
.hero__h{font-size:clamp(40px,11.5vw,50px);text-shadow:0 2px 18px rgba(0,0,0,.85)}
.hero__s{color:#e6e6e6;text-shadow:0 1px 10px #000;max-width:170px}

/* ---------- carrossel com respiro ---------- */
.rail{display:flex;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:4px var(--gut) 10px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;flex:none}

.pill-new{margin:0 0 0 6px;height:18px;font-size:9px;padding:0 7px;vertical-align:2px}

/* ---------- JOGAR: cartões de jogo (ponte com a gramática arcade) ---------- */
.pcard{position:relative;border-radius:22px;overflow:hidden;background:#070907;border:1px solid rgba(197,255,26,.2);margin-bottom:14px;isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.6)}
.pcard::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:160px;opacity:.14;mix-blend-mode:overlay;pointer-events:none;z-index:3}
.pcard__art{position:absolute;inset:0;z-index:0;overflow:hidden}
.pc-court{position:absolute;right:-30%;bottom:-22%;width:120%;height:90%;transform:perspective(420px) rotateX(58deg) rotateZ(-24deg);transform-origin:50% 100%;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 17%,rgba(197,255,26,.75) 17.5% 18.6%,transparent 19%),
    linear-gradient(90deg,transparent 49.4%,rgba(197,255,26,.75) 49.6% 50.4%,transparent 50.6%),
    linear-gradient(90deg,#141414 0 18%,transparent 18% 82%,#141414 82%),
    repeating-linear-gradient(90deg,#d9b27a 0 18px,#cfa66c 18px 36px);
  border:2px solid rgba(197,255,26,.8);opacity:.5}
.pc-court--jam{right:auto;left:-34%;transform:perspective(420px) rotateX(58deg) rotateZ(24deg);opacity:.42}
.pc-ball{position:absolute;right:16%;top:20%;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb066,#e8691c 60%,#8a3508);box-shadow:0 0 30px rgba(197,255,26,.25)}
.pcard--jam .pc-ball{left:auto;right:9%;top:12%}
/* Clutch (22/10/2026): o emblema bordado entra no lugar da bola, inclinado de leve, grande pra ler o CLUTCH */
.pc-emb{position:absolute;right:4%;top:9%;width:clamp(104px,32%,150px);height:auto;transform:rotate(8deg);filter:drop-shadow(0 10px 16px rgba(0,0,0,.6))}
.pcard__b{position:relative;z-index:2;padding:20px;max-width:78%;background:linear-gradient(90deg,rgba(7,9,7,.92) 55%,transparent)}
.pcard--jam .pcard__b{max-width:100%;background:linear-gradient(90deg,rgba(7,9,7,.94) 60%,rgba(7,9,7,.5))}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--rp);background:var(--lime-dim);color:var(--lime);font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.arc-t{font-family:var(--disp);font-weight:900;font-size:clamp(36px,10.4vw,44px);line-height:.9;text-transform:uppercase;margin:10px 0 8px;letter-spacing:.01em;
  background-image:linear-gradient(180deg,#ffffff 0%,#ffffff 46%,var(--lime) 54%,#9fd400 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px rgba(0,0,0,.85);filter:drop-shadow(0 2px 0 #000) drop-shadow(0 0 14px rgba(197,255,26,.18))}
.pcard__p{font-size:13px;color:#cfcfcf;line-height:1.45;margin-bottom:14px;max-width:250px}
/* Card com profundidade (24/10/2026, Jordan): "não precisamos nos limitar às paredes desse box".
   Três planos: o meio da quadra com o MOVE LIKE US na câmera do JB7 Jam no fundo (anda mais devagar no
   arraste), o card, e o emblema na frente, centralizado, furando a borda de cima e andando mais rápido
   (js/jogar.js, --px e --bx). O emblema é o nome; o título é a pergunta, em 2 linhas. Embaixo, o Jogar
   e ao lado os donos do recorde (foto e número, js/jogar.js #shotRei). O recorte arredondado mora no
   .pcard__art; o card em si deixa o emblema sair */
.pcard--pop{overflow:visible}
.pcard--pop .pcard__art,.pcard--pop::after{border-radius:inherit}
.pc-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);filter:saturate(.95) brightness(.66);will-change:transform}
.pcard--pop .pcard__art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,9,7,.55) 0%,rgba(7,9,7,.1) 26%,rgba(7,9,7,0) 40%,rgba(7,9,7,.55) 56%,rgba(7,9,7,.92) 70%,rgba(7,9,7,.97) 100%),
    radial-gradient(60% 34% at 50% 0%,rgba(197,255,26,.16),transparent 75%)}
.pcard--pop .pcard__b{position:static;background:none;max-width:100%;text-align:center;display:flex;flex-direction:column;align-items:center}
.pcard--pop .pcard__b>*{position:relative;z-index:2}
.pcard--pop .pc-emb{position:absolute;z-index:4;top:-92px;left:50%;width:58%;max-width:236px;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}
/* 25/10/2026 (Jordan): card sozinho no Drop 2, emblema maior */
.jg-rail.is-solo .pcard--pop .pc-emb{top:-104px;width:66%;max-width:270px}
.jg-rail.is-solo .pcard--pop .pcard__art::after{background:linear-gradient(180deg,rgba(7,9,7,.55) 0%,rgba(7,9,7,.1) 20%,rgba(7,9,7,0) 28%,rgba(7,9,7,.62) 40%,rgba(7,9,7,.93) 54%,rgba(7,9,7,.97) 100%),
  radial-gradient(60% 34% at 50% 0%,rgba(197,255,26,.16),transparent 75%)}
/* o emblema maior desce ~34% da própria largura pra dentro do card: o texto começa depois dele */
.jg-rail.is-solo .pcard--pop .pcard__b{padding-top:calc(min(66% , 270px) * .985 - 104px + 14px)}
.pcard--pop .pc-go{width:100%;max-width:300px}
/* o emblema v3 já vem com a sombra no arquivo: nada de drop-shadow por cima */
.pcard__q{font-size:clamp(27px,7.6vw,32px);line-height:.95;margin:0 0 8px;white-space:nowrap}
.pcard--pop .pcard__p{max-width:270px;margin:0 auto 14px}
.pc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pc-row{display:flex;align-items:center;justify-content:center;gap:12px;width:100%}
.pc-row .btn{flex:none}
/* 25/10/2026 (Jordan): donos do recorde lado a lado, uma placa por modo com o símbolo do modo em cima */
.pc-rei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:320px;margin:0 auto 14px}
.pc-rei[hidden],.pc-rei:empty{display:none}
.pc-rei__l{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:10px 8px 11px;border-radius:14px;
  background:rgba(7,9,7,.72);border:1px solid rgba(197,255,26,.28);text-align:center}
.pc-rei__l.is-eu{border-color:var(--lime);box-shadow:0 0 0 1px rgba(197,255,26,.3)}
.pc-rei__l .jg-av{width:34px;height:34px;box-shadow:0 0 0 1.5px var(--lime)}
.pc-rei__l .jg-av .x1ini{font-size:15px}
.pc-rei__l.is-vago .jg-av,.pc-rei__l.is-ld .jg-av{box-shadow:none;background:transparent;border:1.5px dashed var(--mute-2)}
.pc-rei__m{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.pc-rei__m .jb-modo{height:11px;width:auto;flex:none}
.pc-rei__n{max-width:100%;font-size:13px;font-weight:700;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-rei__v{font-family:var(--disp);font-weight:900;font-size:22px;line-height:1;color:var(--lime);font-variant-numeric:tabular-nums}
.pc-rei__v small{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--mute)}
.pc-rei__l.is-vago .pc-rei__n{color:var(--mute)}
.pc-rei__l.is-vago .pc-rei__v{font-family:var(--body);font-size:11px;font-weight:600;color:var(--mute)}
.seg--jam{margin-bottom:12px;max-width:240px}

/* ---------- camada de jogo / módulo ausente ---------- */
.glayer{position:absolute;inset:0;z-index:90;background:#000;display:flex;flex-direction:column}
.glayer>.glayer__in{position:relative;flex:1;min-height:0}
.gph,.mount-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:32px var(--gut);min-height:280px}
.glayer .gph{flex:1}
.gph__t,.mount-ph__t{font-family:var(--disp);font-weight:900;font-size:30px;text-transform:uppercase;line-height:.95}
.gph p,.mount-ph p{font-size:13px;color:var(--mute);max-width:260px}
.ld{display:flex;gap:6px;margin:6px 0 4px}
.ld i{width:9px;height:9px;border-radius:2px;background:var(--lime);animation:ld 1.1s var(--e-io) infinite}
.ld i:nth-child(2){animation-delay:.15s}.ld i:nth-child(3){animation-delay:.3s}
@keyframes ld{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
.mount-ph{border-radius:var(--r);border:1px dashed rgba(255,255,255,.14);background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 10px,transparent 10px 20px),var(--ink-3)}

/* ---------- avatar pixel ---------- */
.av img.pixel{object-fit:contain;object-position:50% 100%;background:radial-gradient(80% 80% at 50% 30%,#1d2a0c,#0a0a0a)}
.acard__ph img.pixel{object-fit:contain;object-position:50% 100%;background:radial-gradient(70% 70% at 50% 35%,var(--bgc,#1d2a0c),#090909)}

/* ---------- AVISOS ---------- */
.chips--fade{transition:-webkit-mask-image .2s}
.chips--fade.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.chips--fade.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);mask-image:linear-gradient(90deg,transparent,#000 56px)}
.chips--fade.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.chip .chip__n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:9px;background:var(--lime);color:#0a0a0a;font-family:var(--mono);font-size:10px;font-weight:700}

.devbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-6px 0 14px;padding:8px 10px;border-radius:12px;border:1px dashed rgba(197,255,26,.45);background:rgba(197,255,26,.05)}
.devbar__l{flex:1;min-width:120px;font-family:var(--mono);font-size:10.5px;color:var(--lime);letter-spacing:.06em}
.devbar button{height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--ink-3);font-family:var(--mono);font-size:11px;font-weight:700}

.pend{margin-top:18px;border-radius:var(--r);border:1px solid rgba(197,255,26,.28);background:linear-gradient(160deg,rgba(197,255,26,.07),var(--ink-3) 50%);overflow:hidden}
.pend__h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 10px}
.pend__t{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:800;font-size:20px;text-transform:uppercase;line-height:1}
.pend__t svg{width:16px;height:16px;fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pend__c{font-family:var(--mono);font-size:11px;color:var(--mute)}
.pend__empty{padding:4px 16px 16px;font-size:12.5px;color:var(--mute)}
.pi{display:flex;gap:12px;padding:14px 16px;border-top:1px solid var(--line-2)}
.pi__faces{display:flex;flex:none;align-self:flex-start}
.pi__faces .av{width:36px;height:36px;border:2px solid var(--ink-3)}
.pi__faces .av+.av{margin-left:-12px}
.pi__b{flex:1;min-width:0}
.pi__t{font-weight:700;font-size:14px;line-height:1.35}
.pi__route{font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-top:3px}
.pi__st{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--lime);text-transform:uppercase}
.pi__st .flow__dot{width:7px;height:7px}
.pi__st--done{color:var(--mute)}
.pi__acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pi__acts .btn{min-height:34px;padding:0 13px;font-size:12px}
.btn[disabled]{opacity:.45;pointer-events:none}
.pi__hint{font-size:11px;color:var(--mute);margin-top:8px}
.pi--gone{opacity:.7}

.ntlist{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.nt{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line-2)}
.nt__ic{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;background:var(--ink-4);color:var(--lime);overflow:hidden}
.nt__ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nt__ic.av{border-radius:12px}
.nt__b{flex:1;min-width:0}
.nt__t{font-size:14px;line-height:1.38}
.nt__t b{font-weight:800}
.nt__m{font-family:var(--mono);font-size:10.5px;color:var(--mute);margin-top:4px;display:flex;gap:8px;align-items:center}
.nt__acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.nt__acts .btn{min-height:34px;padding:0 13px;font-size:12px}
.nt.is-new{border-color:rgba(197,255,26,.26)}
.nt.is-new::after{content:"";position:absolute;top:14px;right:14px;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px rgba(197,255,26,.7)}
.nt__empty{padding:22px;text-align:center;color:var(--mute);font-size:13px;border-radius:var(--r);border:1px dashed var(--line)}

.tab__ic{position:relative;display:block}
.tab__badge{position:absolute;top:-5px;right:-9px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--lime);color:#0a0a0a;font-family:var(--mono);font-size:9.5px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px #080808}
.tab__badge.bump{animation:bump .5s var(--e)}
@keyframes bump{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}

/* ---------- lista de drops ---------- */
.dlist{display:flex;flex-direction:column;gap:10px}
#avDrops .dlist{margin-top:22px}
.dl{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line-2);text-align:left}
.dl__n{width:52px;flex:none;font-family:var(--disp);font-weight:900;font-size:22px;line-height:.9;text-transform:uppercase;color:var(--lime)}
.dl__n small{display:block;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.14em;color:var(--mute)}
.dl__b{flex:1;min-width:0}
.dl__t{font-weight:800;font-size:14px}
.dl__d{font-size:12px;color:var(--mute);line-height:1.35}
.dl svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--mute);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dl--new{border-color:rgba(197,255,26,.32)}

/* ---------- TOUR guiado ---------- */
.tour{position:absolute;inset:0;z-index:200}
/* 25/10/2026: lista do que entrou no drop, antes do passo a passo (js/drops.js novidades) */
.tour--nov .tour__card,.tour--nov .tour__ring{display:none}
.tnov{position:absolute;inset:0;z-index:3;background:#070907;display:flex;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top)) var(--gut) max(20px,env(safe-area-inset-bottom));overflow-y:auto}
.tnov__in{width:100%;max-width:420px;margin:auto 0}
.tnov__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);margin:0 0 10px}
.tnov__h{font-family:var(--disp);font-weight:900;font-size:clamp(34px,10vw,44px);line-height:.92;text-transform:uppercase;margin:0 0 18px;color:var(--paper);text-wrap:balance}
.tnov__l{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid var(--line-2)}
.tnov__l li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line-2);animation:tnovIn .5s cubic-bezier(.23,1,.32,1) both;animation-delay:calc(.12s + var(--i) * 55ms)}
.tnov__ic{flex:none;width:22px;height:22px;border-radius:50%;background:var(--lime);display:grid;place-items:center;margin-top:1px}
.tnov__ic svg{width:14px;height:14px;fill:none;stroke:#0a0a0a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.tnov__l b{display:block;font-size:15px;font-weight:800;line-height:1.2;color:var(--paper)}
.tnov__l small{display:block;font-size:13px;line-height:1.4;color:#bdbdbd;margin-top:2px;text-wrap:pretty}
.tnov__acts{display:grid;gap:8px;position:sticky;bottom:0;padding:12px 0;background:#070907}
@keyframes tnovIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tnov__l li{animation:none}}
.tour svg.tour__mask{position:absolute;inset:0;width:100%;height:100%}
.tour__ring{position:absolute;border-radius:18px;border:2px solid var(--lime);box-shadow:0 0 0 6px rgba(197,255,26,.12),0 0 40px rgba(197,255,26,.35);pointer-events:none;transition:all .45s var(--e)}
.tour__card{position:absolute;left:var(--gut);right:var(--gut);padding:18px;border-radius:20px;background:var(--paper);color:#0a0a0a;box-shadow:0 20px 60px rgba(0,0,0,.6);transition:top .45s var(--e),opacity .25s}
.tour__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#3d5a00;display:flex;justify-content:space-between;gap:10px}
.tour__t{font-family:var(--disp);font-weight:900;font-size:28px;line-height:.95;text-transform:uppercase;margin:8px 0 6px}
.tour__p{font-size:14px;line-height:1.45;color:#2a2a2a}
.tour__acts{display:flex;gap:8px;margin-top:14px}
.tour__acts .btn{flex:1}
.tour__acts .btn--ghost{background:#ececec;border-color:#ddd;color:#0a0a0a}
.tour__acts .btn--ink{background:#0a0a0a;color:var(--lime)}
.tour--end .tour__card{text-align:center}
/* 25/10/2026: vídeo do drop em tela cheia antes do passo a passo */
.tour__vid{position:absolute;inset:0;z-index:5;background:#000;display:grid;place-items:center}
.tour__vid video{width:100%;height:100%;object-fit:contain;background:#000}
.tour__vpular,.tour__vsom{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom));min-height:44px;padding:0 18px;border-radius:var(--rp);font-weight:700;font-size:14px}
.tour__vpular{right:var(--gut);background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.tour__vsom{left:var(--gut);background:var(--lime);color:#0a0a0a}
.tour__vpular:active,.tour__vsom:active{transform:scale(.97)}
.tour--end .tour__t{font-size:44px}

/* ---------- PERFIL ---------- */

.sg{cursor:pointer}
.sg.is-lock{cursor:default}

.cup{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r);background:var(--ink-3);border:1px dashed rgba(197,255,26,.4);margin-bottom:8px}
.cup__v{font-family:var(--mono);font-weight:700;font-size:18px;color:var(--lime);flex:none}
.cup__b{flex:1;min-width:0}
.cup__t{font-weight:800;font-size:13.5px}
.cup__d{font-size:11.5px;color:var(--mute)}
.empty{padding:16px;border-radius:var(--r);border:1px dashed var(--line);font-size:12.5px;color:var(--mute);line-height:1.45}
.hrow__card{margin-left:8px;min-height:30px;padding:0 10px;font-size:11px}

/* ideias */
.idea{padding:16px;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line-2)}
.idea__q{font-family:var(--disp);font-weight:800;font-size:22px;text-transform:uppercase;line-height:1.05;margin-bottom:12px}

/* NBA / WNBA */
.nba{padding:16px;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line-2)}
.nba__lead{font-size:13px;color:#cfcfcf;line-height:1.45;margin-bottom:14px}
.nba__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
.nba__in label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.nba__in input{width:100%;height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--ink-2);color:var(--paper);font-family:var(--mono);font-size:16px;font-weight:700}
.nba__in input:focus{outline:none;border-color:var(--lime)}
.nba__in--wide{grid-column:1 / -1}
.nba__more{font-size:12.5px;font-weight:800;color:var(--lime);margin:4px 0 10px}
.nba__dir{margin:10px 0 2px;padding:12px 14px;border-radius:12px;background:rgba(197,255,26,.06);border:1px solid rgba(197,255,26,.2);font-size:12.5px;color:#d9d9d9;line-height:1.45}
.nba__dir b{color:var(--lime);font-family:var(--mono)}
.nba__dir i{display:block;font-style:normal;color:var(--mute);font-size:11.5px;margin-top:4px}
.nba .seg{margin:12px 0 4px}
.nba__res{margin-top:14px}
.nba__lg{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:16px 0 10px}
.pl{width:236px;border-radius:var(--r);overflow:hidden;background:var(--ink-2);border:1px solid var(--line-2);text-decoration:none;color:inherit;display:block}
.pl__ph{position:relative;aspect-ratio:1040/760;background:radial-gradient(70% 80% at 50% 100%,rgba(3,199,63,.3),transparent 70%),#101410;overflow:hidden}
.pl__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.pl__flag{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:6px;height:22px;padding:0 8px 0 4px;border-radius:var(--rp);background:rgba(0,0,0,.6);font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em}
.pl__flag svg{width:20px;height:14px;border-radius:2px}
.pl__b{padding:12px 14px 14px}
.pl__n{font-family:var(--disp);font-weight:800;font-size:22px;text-transform:uppercase;line-height:1}
.pl__tm{font-size:11.5px;color:var(--mute);margin-top:4px}
.pl__m{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;gap:8px}
.pl__h{font-family:var(--mono);font-weight:700;font-size:16px;color:var(--lime)}
.pl__p{font-size:11.5px;color:#cfcfcf}
.pl--br{border-color:rgba(197,255,26,.35)}

/* ---------- STORY sheet ---------- */
.story{display:flex;flex-direction:column;align-items:center;gap:12px}
.story__pv{width:min(250px,64vw);aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#0b0b0b;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.6);display:grid;place-items:center}
.story__pv img{width:100%;height:100%;object-fit:cover}
.story .chips{margin:0;padding:0;justify-content:center;flex-wrap:wrap}
.story .chip{height:32px;font-size:12px}
.story__acts{display:flex;gap:8px;width:100%}
.story__acts .btn{flex:1}
.sheet__h{font-family:var(--disp);font-weight:900;font-size:28px;text-transform:uppercase;line-height:1;text-align:center;margin:2px 0 4px}
.sheet__sub{font-size:12.5px;color:var(--mute);text-align:center}

@media (hover:hover) and (pointer:fine){
  .dl:hover,.pl:hover{border-color:rgba(197,255,26,.4)}
  .devbar button:hover{border-color:var(--lime)}
}
@media (prefers-reduced-motion:reduce){
  .tour__ring,.tour__card{transition:none}
  .ld i{animation:none;opacity:.7}
}
.nba .rail{margin:0 -16px;padding:4px 16px 10px;scroll-padding-inline:16px}
.sg{width:100%}
.sg[disabled]{opacity:1}

/* celular deitado: sem moldura de aparelho, ocupa a altura toda (o JB7 Jam joga deitado) */
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
  .phone{width:min(560px,100vw);height:100dvh;border-radius:0;box-shadow:none}
}

/* ===================== X1 real (Drop 2) ===================== */
/* inicial de quem não tem foto liberada (mesma régua de cor do check-in) */
.x1ini{display:grid;place-items:center;width:100%;height:100%;font-family:var(--disp);font-weight:900;font-size:22px;color:#0a0a0a;line-height:1}
.av .x1ini{font-size:18px}
.prof .av .x1ini{font-size:34px}
.acard__ph .x1ini{font-size:64px}
/* convite pra criar conta, no lugar da lista */
.x1conv{margin-top:14px;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}
.x1conv__t{font-family:var(--disp);font-weight:900;font-size:24px;text-transform:uppercase;line-height:1}
.x1conv__p{font-size:13px;color:var(--mute);margin:8px auto 14px;max-width:300px;line-height:1.45}
/* carregando, erro e lista vazia ocupam a grade inteira */
.x1msg{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 12px;text-align:center;font-size:13px;color:var(--mute)}
.x1empty{grid-column:1/-1}
/* recado pronto do desafio: uma frase por linha */
.seg--frase{flex-direction:column}
.seg--frase button{text-align:left;padding:0 14px;white-space:normal;line-height:1.3}
.flow .x1cancel{margin-top:8px}
.pi__fr{font-size:13px;color:#d6d6d6;margin-top:3px;font-style:italic}
/* pedido em curso: sem clique duplo */
.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.facts--2{grid-template-columns:repeat(2,1fr)}

/* ---------- conquistas em patch (js/badges.js, 16/10/2026) ----------
   Grade do Perfil: a .sg de sempre, com o patch no lugar do ícone (56 x 70).
   Embaixo do nome: o MESMO badge inteiro a 30 px de altura, sem caixa atrás. */
/* diagramação (Jordan, 16/10): card justo na vertical, título colado no badge e entrelinha curta */
.sg--patch{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 6px 9px}
.sg--patch .sg__n{display:block;line-height:1.12;font-size:11px;letter-spacing:-.005em}
.sg--patch .sg__ic,.sg--patch.is-lock .sg__ic{width:56px;height:70px;border-radius:0;background:none;margin:0}
.sg--patch .sg__ic .bdg{width:56px;height:70px;display:block;overflow:visible}
/* badge novo (17/10/2026, Jordan): o molde costurado espera e o badge salta de dentro dele; só o badge anima */
.sg--patch.is-new .sg__ic{position:relative}
.sg--patch.is-new .bdg-pop__m,.sg--patch.is-new .bdg-pop__f{position:absolute;inset:0;display:block}
.sg--patch.is-new .bdg-pop__f{opacity:0;transform:scale(.55);transform-origin:50% 58%}
.sg--patch.is-new .sg__n{color:var(--mute-2)}
.sg--patch.is-pop .bdg-pop__f{animation:bdgPop .62s cubic-bezier(.22,1,.36,1) forwards}
.sg--patch.is-pop .bdg-pop__m{animation:bdgMolde .26s ease-out .16s forwards}
.sg--patch.is-pop .sg__n{color:var(--paper);transition:color .3s .2s}
@keyframes bdgPop{0%{opacity:0;transform:scale(.55)}40%{opacity:1;transform:scale(1.12)}70%{transform:scale(.97)}100%{opacity:1;transform:scale(1)}}
@keyframes bdgMolde{to{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .sg--patch.is-pop .bdg-pop__f{animation:none;opacity:1;transform:none}
  .sg--patch.is-pop .bdg-pop__m{animation:none;opacity:0}
}
/* o .sg__ic svg antigo (ícone de linha) põe stroke e fill:none no svg; dentro do patch isso vazava
   pros filhos sem atributo (os pontinhos da bola ganhavam contorno preto). Zera aqui. */
.sg__ic svg.bdg,.bdgs svg.bdg{fill:#000;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.bdgs{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:flex-end}
.bdgs__i{display:block;line-height:0}
.bdgs .bdg{height:30px;width:auto;display:block;overflow:visible}
.pc__bdg[hidden]{display:none}
.jg-pf__id .bdgs{margin-top:10px}
/* Clutch King (24/10/2026): dois reis dentro de Conquistas, maiores que os comuns, o prêmio mais valioso.
   Meu = emblema cheio com a borda lima; dos outros ou sem dono = pré-bordado em furos */
.bdg-king{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:8px}
.bdg-king[hidden]{display:none}
.sg--king{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:14px 8px 12px;
  background:radial-gradient(90% 70% at 50% 30%,rgba(197,255,26,.07),transparent 70%),var(--ink-3);border-color:rgba(197,255,26,.22)}
.sg--king.is-mine{border-color:var(--lime);box-shadow:0 0 0 1px rgba(197,255,26,.3),0 10px 26px rgba(197,255,26,.1)}
.bdg-k__ic{width:min(118px,100%);aspect-ratio:640/661;display:block;line-height:0}
.bdg-k__ic img,.bdg-k__ic svg{width:100%;height:100%;display:block;object-fit:contain;overflow:visible}
.sg--king .sg__n{font-size:12px;line-height:1.15}
.bdg-k__q{font-family:var(--mono);font-size:10px;letter-spacing:.02em;line-height:1.25;color:var(--mute)}
.sg--king.is-mine .bdg-k__q{color:var(--lime)}
@media (hover:hover) and (pointer:fine){.sg--king:hover{border-color:rgba(197,255,26,.5)}}
.sg--king:active{transform:scale(.97)}
.bdgs .bdgs__k img{height:38px;width:auto;display:block}
/* 25/10/2026 (Jordan): um Clutch King só, com o símbolo do modo do recorde embaixo do selo */
.bdg-king.bdg-king{grid-template-columns:minmax(0,1fr)}
.sg--king1{padding:16px 12px 14px;gap:7px}
.sg--king1 .bdg-k__ic{width:min(140px,60%)}
.bdg-k__s{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:-2px}
.bdg-k__s .jb-modo{height:14px;width:auto}
.bdg-k__ls{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:2px}
.bdg-k__md{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--mute)}
.bdg-k__md .jb-modo{height:10px;width:auto;opacity:.6}
.bdg-k__md b{font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--paper)}
.bdg-k__md i{font-style:normal}
.bdg-k__md.is-meu i{color:var(--lime)}
.bdg-k__md.is-meu .jb-modo{opacity:1}
.bdgs__k{position:relative}
.bdgs__ks{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);display:flex;gap:3px;padding:2px 4px;border-radius:6px;background:#070907}
.bdgs__ks .jb-modo{height:7px;width:auto}