/* Naruto Super: "Onde conseguir" global (janela do ninja e do item). Copiado do mockup aprovado docs/mockups/naruto-super/onde-conseguir.html. Todo bloco com o feixe (regra 20). */
/* ===== peças novas da janela do item (molde da janela do Naruto Online) ===== */
.ns-jan.ns-jan-g{width:min(680px,100%);gap:14px;overflow-x:hidden}
.ns-jan-g > *,#janCorpo,#janCorpo > *{min-width:0}
#janCorpo{display:grid;gap:14px}
.ns-ofl > div{min-width:0}
.ns-jan-top small{display:block;color:var(--ns-low);font-size:15px}
/* abas da janela: só as que têm conteúdo, com a contagem */
.ns-jan-abas{display:flex;flex-wrap:wrap;gap:6px;overflow-x:auto;padding-bottom:6px;border-bottom:1px solid var(--ns-borda);scrollbar-width:thin}
.ns-jan-aba{flex:none;height:38px;padding:0 14px;border-radius:10px 10px 4px 4px;border:1px solid var(--ns-borda);background:var(--ns-s800);color:var(--ns-mid);cursor:pointer;white-space:nowrap}
.ns-jan-aba em{font-style:normal;color:var(--ns-low);margin-left:4px}
.ns-jan-aba.on{background:linear-gradient(180deg,#ffb27a,var(--ns-chakra));color:#2a0f02;border-color:var(--ns-chakra);font-weight:800}
.ns-jan-aba.on em{color:#5a2a0a}
.ns-jan-corpo{display:grid;gap:10px;min-height:260px;align-content:start}
.ns-leg{margin:0;color:var(--ns-low)}
.ns-ofl small.como{display:flex;align-items:center;gap:8px;margin-top:2px;color:var(--ns-mid)}
.ns-ofl .como span{min-width:0}
.ns-ofl .como .ns-ic{width:28px;height:28px}
.ns-ofl .como .ns-qi{width:28px;height:28px;font-size:15px}
.ns-selo-melhor{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:rgba(127,191,106,.18);border:1px solid #7fbf6a;color:#8fd6a0;font-weight:800;font-size:15px}
/* Como conseguir: um bloco por caminho, cada um com o feixe (regra 20) */
.ns-como{position:relative;overflow:hidden;isolation:isolate;display:grid;gap:8px;padding:12px;border-radius:12px;background:var(--ns-s800);border:1px solid var(--ns-borda)}
.ns-como::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;background:linear-gradient(105deg,transparent 43%,rgba(32,211,224,.10) 47%,rgba(255,244,205,.22) 50%,rgba(227,179,65,.12) 53%,transparent 57%);background-size:240% 100%;background-repeat:no-repeat;background-position:130% 0;animation:ns-onda 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.ns-como::after{animation:none;background:none}}
.ns-como h4{margin:0;display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-size:17px}
.ns-como h4 span{font-size:15px;font-weight:500;color:var(--ns-low)}
.ns-como p{margin:0;color:var(--ns-mid)}
.ns-cl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 10px;border-radius:10px;background:var(--ns-s850);font-variant-numeric:tabular-nums}
.ns-cl b{font-weight:600}
.ns-cl span{color:var(--ns-perg);font-weight:700;white-space:nowrap}
.ns-cl-ic{display:flex;align-items:center;gap:8px;min-width:0}
.ns-ir{justify-self:start;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--ns-chakra);background:rgba(255,138,61,.10);color:var(--ns-chakra);font-weight:700;cursor:pointer}
.ns-preco-t{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ns-preco-t th,.ns-preco-t td{padding:8px 8px;border-bottom:1px solid var(--ns-borda);text-align:right}
.ns-preco-t th:first-child,.ns-preco-t td:first-child{text-align:left}
.ns-preco-t th{color:var(--ns-low);font-weight:500;font-size:15px}
.ns-tabwrap{overflow-x:auto}
/* cabeça da janela: resumo do item */
.ns-jan-cab{display:grid;gap:10px}
.ns-resumo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ns-resumo div{display:grid;grid-template-rows:subgrid;grid-row:span 2;gap:2px;padding:8px 10px;border-radius:10px;background:var(--ns-s800);border:1px solid var(--ns-borda)}
.ns-resumo small{color:var(--ns-low);font-size:15px}
.ns-resumo b{font-variant-numeric:tabular-nums;line-height:1.3}
.ns-resumo .ok b{color:#8fd6a0}
/* ficha de cada oferta/troca: tudo especificado (onde, quanto, limite, condição) + a ação */
.ns-fo{position:relative;overflow:hidden;isolation:isolate;display:grid;gap:8px;padding:12px;border-radius:12px;background:var(--ns-s800);border:1px solid var(--ns-borda)}
.ns-como .ns-fo{background:var(--ns-s850)}
.ns-fo.melhor{border-color:#7fbf6a;background:rgba(127,191,106,.10)}
.ns-fo::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;background:linear-gradient(105deg,transparent 43%,rgba(32,211,224,.10) 47%,rgba(255,244,205,.22) 50%,rgba(227,179,65,.12) 53%,transparent 57%);background-size:240% 100%;background-repeat:no-repeat;background-position:130% 0;animation:ns-onda 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.ns-fo::after{animation:none;background:none}}
.ns-fo-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
.ns-fo-top b{font-size:16px}
.ns-fo-un{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ns-fo-un b{display:block;font-size:20px;color:var(--ns-perg)}
.ns-fo-un small{color:var(--ns-low);font-size:15px}
.ns-fo dl{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 10px;margin:0}
.ns-fo dt{color:var(--ns-low)}
.ns-fo dd{margin:0;font-variant-numeric:tabular-nums;min-width:0}
.ns-fo dd .ns-ic,.ns-fo dd .ns-qi{width:28px;height:28px;font-size:15px;display:inline-grid;vertical-align:middle;margin-right:6px}
.ns-nj-cab{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:center}
.ns-nj-cab .ns-icn{width:84px;height:84px}
.ns-nj-cab .ns-qi{width:84px;height:84px;font-size:32px}
.ns-atrs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ns-atrs div{display:grid;gap:2px;padding:8px 10px;border-radius:10px;background:var(--ns-s800);border:1px solid var(--ns-borda)}
.ns-atrs small{color:var(--ns-low);font-size:15px}
.ns-atrs b{font-variant-numeric:tabular-nums}
.ns-aparece{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.ns-aparece div{display:grid;gap:6px;padding:12px;border-radius:12px;background:var(--ns-s800);border:1px solid var(--ns-borda)}
.ns-aparece b{color:var(--ns-chakra)}
 (max-width:560px){.ns-atrs{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* pé da janela: de onde vêm os dados */
.ns-jan-pe{display:grid;gap:4px;padding-top:10px;border-top:1px solid var(--ns-borda);color:var(--ns-low)}
.ns-jan-pe b{color:var(--ns-mid)}
.ns-nj-cab{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:center}
.ns-nj-cab .ns-icn{width:84px;height:84px}
.ns-nj-cab .ns-qi{width:84px;height:84px;font-size:32px}
.ns-atrs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ns-atrs div{display:grid;gap:2px;padding:8px 10px;border-radius:10px;background:var(--ns-s800);border:1px solid var(--ns-borda)}
.ns-atrs small{color:var(--ns-low);font-size:15px}
.ns-atrs b{font-variant-numeric:tabular-nums}
@media (max-width:560px){.ns-resumo{grid-template-columns:1fr}.ns-fo dl{grid-template-columns:1fr}.ns-fo dt{margin-top:4px}}