/* /upgrade/ajuda-trilha.css -- Ajuda de Ninja "como no jogo" (mockup aprovado 01/10/2026). A montagem está em ajuda-trilha.js. */
.ajuda-trilha{display:grid;gap:14px;margin:0 0 14px;padding:16px 18px;}
.aj-rot{font:600 11px var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--t-low,#6b7686);}
.aj-nota{color:var(--t-low,#6b7686);font-size:13px;}
.aj-ok{color:var(--live,#38d6a0);} .aj-falta{color:var(--bad,#ff6b6b);}

.aj-cab{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;}
.aj-nivel{display:flex;align-items:center;gap:10px;}
.aj-pm{display:inline-grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;height:42px;min-width:120px;border:1px solid var(--border,#29313d);border-radius:9px;background:var(--s-800,#141a25);overflow:hidden;}
.aj-pm button{height:100%;border:0;background:transparent;color:var(--cyan,#3fd0e0);font:600 17px var(--body,inherit);cursor:pointer;}
.aj-pm button:disabled{opacity:.3;cursor:default;}
.aj-pm b{text-align:center;font:800 24px/1 var(--display,inherit);color:#ff8a3d;text-shadow:0 2px 12px rgba(255,138,61,.45);}
.aj-prog{display:grid;gap:4px;min-width:0;}
.aj-barra{height:10px;border-radius:99px;background:#1b2232;overflow:hidden;border:1px solid var(--border,#29313d);}
.aj-barra i{display:block;height:100%;background:linear-gradient(90deg,#c9531a,#ff8a3d);transition:width .3s;}
.aj-modo{display:inline-flex;border:1px solid var(--border,#29313d);border-radius:999px;overflow:hidden;}
.aj-modo button{font:600 13px var(--body,inherit);background:transparent;color:var(--t-mid,#a7b0bd);border:0;padding:7px 14px;cursor:pointer;}
.aj-modo button[aria-pressed="true"]{background:#1b2232;color:var(--cyan,#3fd0e0);}

.aj-busca{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.aj-busca .aj-rot{margin-right:4px;}
.aj-chip{font:500 13px var(--body,inherit);color:var(--t-mid,#a7b0bd);background:var(--s-800,#141a25);border:1px solid var(--border,#29313d);border-radius:999px;padding:5px 12px;cursor:pointer;}
.aj-chip[aria-pressed="true"]{color:#06222a;background:var(--cyan,#3fd0e0);border-color:var(--cyan,#3fd0e0);}

.aj-trilha{position:relative;display:grid;grid-template-columns:40px repeat(5,minmax(0,1fr)) 40px;align-items:center;gap:4px;padding:30px 0 10px;}
.aj-trilha::before{content:"";position:absolute;left:46px;right:46px;top:calc(50% + 4px);border-top:2px dashed #3a4562;z-index:0;}
.aj-no{position:relative;z-index:1;display:grid;justify-items:center;gap:6px;background:none;border:0;color:inherit;cursor:pointer;padding:0;font:inherit;}
.aj-attrs{font:600 12px/1.25 var(--body,inherit);text-align:center;min-height:32px;color:var(--t-mid,#a7b0bd);text-shadow:0 1px 3px #000;overflow-wrap:anywhere;}
.aj-bola{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a4258,#151a26 70%);border:2px solid #2b3449;box-shadow:inset 0 -6px 12px rgba(0,0,0,.6);display:grid;place-items:center;font:600 12px var(--mono,monospace);color:var(--t-low,#6b7686);}
.aj-no.feito .aj-bola{background:radial-gradient(circle at 35% 30%,#ffd08a,#f08a24 55%,#8a3a08);border-color:#ffb35c;color:#3a1600;}
.aj-no.feito .aj-attrs{color:#ffd9b0;}
.aj-no.atual .aj-bola{background:radial-gradient(circle at 35% 30%,#bff3ff,#2fa8e8 55%,#0c3d7a);border-color:#8fe3ff;color:#04223c;box-shadow:0 0 0 4px rgba(63,208,224,.25),0 0 22px rgba(63,208,224,.7);}
.aj-no.atual .aj-attrs{color:#dff8ff;}
.aj-no.alvo .aj-bola{outline:2px dashed #f5c542;outline-offset:4px;}
.aj-no.realce .aj-attrs{color:#f5c542;}
.aj-no.apagado{opacity:.35;}
.aj-seta{width:40px;height:40px;border-radius:50%;border:1px solid #2c4660;background:var(--s-800,#141a25);color:var(--cyan,#3fd0e0);font:700 18px var(--body,inherit);cursor:pointer;z-index:1;}
.aj-seta:disabled{opacity:.25;cursor:default;}

.aj-gasto{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;border:1px solid var(--border,#29313d);border-radius:12px;padding:12px 16px;background:rgba(20,26,37,.55);}
.aj-faixa{font:700 11px var(--mono,monospace);letter-spacing:.12em;color:#ffcf9a;}
.aj-pocao{display:flex;align-items:center;gap:14px;min-width:0;}
.aj-info{display:grid;gap:2px;min-width:0;}
.aj-pocao img{width:52px;height:52px;border-radius:10px;background:#0b0e15;border:1px solid var(--border,#29313d);object-fit:contain;padding:4px;}
.aj-cont{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums;}
.aj-cont b{font:800 24px/1 var(--display,inherit);}
.aj-cont small{font:600 14px var(--body,inherit);color:var(--t-mid,#a7b0bd);}
.aj-acoes{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.aj-bt{font:600 14px var(--body,inherit);border-radius:9px;padding:9px 18px;cursor:pointer;border:1px solid var(--border,#29313d);background:var(--s-800,#141a25);color:var(--t-hi,#f0f3f7);}
.aj-bt.cheio{background:linear-gradient(180deg,#ff9b52,#e8702a);color:#1a0d02;border-color:#e8702a;}
.aj-bt:disabled{opacity:.4;cursor:default;}

.aj-res{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.aj-cartao{background:rgba(12,15,22,.55);border:1px solid var(--border,#29313d);border-radius:12px;padding:14px 16px;display:grid;gap:8px;align-content:start;min-width:0;}
.aj-cartao h3{margin:0;font:700 15px var(--display,inherit);}
.aj-cartao-topo{display:flex;justify-content:space-between;gap:10px;align-items:start;}
.aj-ganho{border:1px solid rgba(63,208,224,.35);background:rgba(63,208,224,.06);border-radius:12px;padding:6px 14px;text-align:center;}
.aj-ganho b{display:flex;align-items:center;justify-content:center;gap:6px;font:800 24px/1.1 var(--display,inherit);color:var(--cyan,#3fd0e0);}
.aj-tab{display:grid;grid-template-columns:minmax(0,1fr) auto;}
.aj-tab > div{padding:9px 0;border-bottom:1px solid var(--border,#29313d);}
.aj-tab > div:nth-child(even){text-align:right;font-weight:600;font-variant-numeric:tabular-nums;}
.aj-attr-lista{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.aj-attr{background:var(--s-800,#141a25);border:1px solid var(--border,#29313d);border-radius:10px;padding:8px 10px;display:grid;gap:2px;min-width:0;}
.aj-attr span{font:600 10.5px var(--mono,monospace);letter-spacing:.06em;color:var(--t-low,#6b7686);text-transform:uppercase;overflow-wrap:anywhere;}
.aj-attr b{font:700 18px var(--display,inherit);font-variant-numeric:tabular-nums;}
.aj-attr.zero b{color:var(--t-low,#6b7686);}
.aj-attr.atk1 b{color:var(--cyan,#3fd0e0);}

@media (max-width:820px){
  .aj-cab{grid-template-columns:minmax(0,1fr);justify-items:start;}
  .aj-res{grid-template-columns:minmax(0,1fr);}
  .aj-attr-lista{grid-template-columns:repeat(2,minmax(0,1fr));}
  .aj-trilha{grid-template-columns:34px repeat(5,minmax(0,1fr)) 34px;gap:2px;}
  .aj-bola{width:44px;height:44px;font-size:11px;}
  .aj-attrs{font-size:10.5px;}
  .aj-seta{width:34px;height:34px;}
}
@media (max-width:520px){
  /* celular: a trilha vira lista, um nó por linha (bola + atributos), com as setas em cima e embaixo */
  .aj-trilha{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:8px 0;}
  .aj-trilha::before{display:none;}
  .aj-seta{width:100%;height:34px;border-radius:10px;}
  .aj-no{grid-template-columns:48px minmax(0,1fr);justify-items:start;align-items:center;gap:12px;text-align:left;}
  .aj-bola{grid-column:1;grid-row:1;width:44px;height:44px;}
  .aj-attrs{grid-column:2;grid-row:1;text-align:left;font-size:13px;min-height:0;}
  .aj-attrs br{display:none;}
  .aj-attrs::after{content:"";}
}
@media (max-width:520px){ .aj-a{display:inline-block;margin-right:10px;} }