/* Naruto Super: peças das ferramentas (Loja, Eventos, Trocas, Upgrades, Onde é mais barato), copiadas do mockup docs/mockups/naruto-super/ferramentas.src.html. Todas dentro de .ns-cena (feixe + cenário). */
/* ===== peças novas (todas com o feixe da .ns-cena) ===== */
.ns-grade4{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
.ns-tag{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;font-size:15px;font-weight:700;border:1px solid}
.ns-tag.gasto{color:#ffb27a;border-color:rgba(255,178,122,.5);background:rgba(255,138,61,.10)}
.ns-tag.loja{color:#8fd6a0;border-color:rgba(143,214,160,.5);background:rgba(127,191,106,.10)}
.ns-tag.breve{color:#c4b2a7;border-color:#3b2a24}
/* abas do jogo */
.ns-abas{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;border-bottom:1px solid #3b2a24;padding-bottom:10px}
.ns-aba{height:40px;padding:0 16px;border-radius:10px 10px 4px 4px;border:1px solid #3b2a24;background:#1d1513;color:#c4b2a7;cursor:pointer;font:inherit}
.ns-aba.on{background:linear-gradient(180deg,#ffb27a,#ff8a3d);color:#2a0f02;border-color:#ff8a3d;font-weight:800}
.ns-linha-opc{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:0 0 14px;color:#c4b2a7}
.ns-linha-opc label{display:inline-flex;gap:8px;align-items:center;cursor:pointer}
.ns-linha-opc input{width:18px;height:18px;accent-color:#ff8a3d}
/* cartões de loja (−/+), alinhados com subgrid */
.ns-loja{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.ns-prod{display:grid;grid-template-rows:subgrid;grid-row:span 5;gap:8px;padding:12px;border-radius:12px;background:rgba(29,21,19,.9);border:1px solid #3b2a24}
.ns-prod.tem{border-color:#ff8a3d;background:rgba(255,138,61,.08)}
.ns-prod-top{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center}
.ns-prod-top b{line-height:1.3}
.ns-prod-top small{display:block;color:#9a877c;font-size:15px}
.ns-etqs{display:flex;flex-wrap:wrap;gap:6px;align-content:start;min-height:30px}
.ns-etq2{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:8px;font-size:15px;font-weight:600;background:#271c19;border:1px solid #3b2a24;color:#c4b2a7}
.ns-etq2.lim{color:#ffb27a;border-color:rgba(255,178,122,.45)}
.ns-preco{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.ns-preco b{font-size:20px;color:#ecd7a8}
.ns-preco s{color:#9a877c}
.ns-preco span{color:#c4b2a7}
.ns-qtd{display:grid;grid-template-columns:42px minmax(0,1fr) 42px;gap:6px;align-items:center}
.ns-qtd button{height:40px;border-radius:10px;border:1px solid #3b2a24;background:#271c19;color:#f7efe9;font-size:20px;font-weight:700;cursor:pointer}
.ns-qtd output{display:grid;place-items:center;height:40px;border-radius:10px;background:#17110f;border:1px solid #3b2a24;font-weight:700;font-variant-numeric:tabular-nums}
/* resultado */
.ns-res{padding:18px;margin-top:16px}
.ns-res h2{margin:0 0 12px;font-size:20px}
.ns-res-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ns-res-c{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:2px;padding:12px 14px;border-radius:12px;background:#1d1513;border:1px solid #3b2a24}
.ns-res-c small{color:#9a877c;font-size:15px}
.ns-res-c b{font-size:24px;font-variant-numeric:tabular-nums;line-height:1.2}
.ns-res-c span{color:#c4b2a7}
.ns-res-c.dest{border-color:#ff8a3d;background:rgba(255,138,61,.10)}
.ns-res-c.dest b{color:#ffb27a}
/* etapas (modelo Fukurokumaru, só eventos de gasto) */
.ns-entrada-g{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
.ns-pacs-rec{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ns-pacs-rec .ns-qtd{grid-template-columns:36px minmax(0,1fr) 36px}
.ns-pacs-rec .ns-qtd button,.ns-pacs-rec .ns-qtd output{height:36px}
.ns-prec{display:grid;gap:6px;padding:10px;border-radius:12px;background:#1d1513;border:1px solid #3b2a24}
.ns-prec.tem{border-color:#ff8a3d;background:rgba(255,138,61,.08)}
.ns-prec b{font-size:18px;font-variant-numeric:tabular-nums}
.ns-prec small{color:#9a877c;font-size:15px}
.ns-contador{display:grid;gap:4px;padding:14px;border-radius:12px;background:#1d1513;border:1px solid #ff8a3d}
.ns-contador small{color:#9a877c;font-size:15px}
.ns-contador b{font-size:26px;color:#ffb27a;font-variant-numeric:tabular-nums}
.ns-etapa{margin-top:14px;padding:0}
.ns-etapa > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px minmax(0,1fr) auto 28px;gap:12px;align-items:center;padding:14px 16px}
.ns-etapa > summary::-webkit-details-marker{display:none}
.ns-etapa .ns-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,#ffb27a,#ff8a3d);color:#2a0f02;font-weight:800;font-size:18px}
.ns-etapa h3{margin:0;font-size:18px}
.ns-etapa p.s{margin:2px 0 0;color:#9a877c}
.ns-etapa .soma{font-weight:800;color:#ecd7a8;font-variant-numeric:tabular-nums;white-space:nowrap}
.ns-etapa .v{color:#ff8a3d;font-weight:800;text-align:center}
.ns-etapa[open] .v{transform:rotate(180deg)}
.ns-etapa > div{padding:0 16px 16px}
.ns-ponte{display:flex;gap:10px;align-items:center;justify-content:center;margin:10px 0 0;color:#c4b2a7}
.ns-ponte .seta{color:#ff8a3d;font-size:22px;font-weight:800}
.ns-faixas{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ns-faixas th,.ns-faixas td{padding:8px 10px;border-bottom:1px solid #3b2a24;text-align:right}
.ns-faixas th:first-child,.ns-faixas td:first-child{text-align:left}
.ns-faixas th{color:#9a877c;font-weight:500;font-size:15px}
.ns-faixas tr.ok td{color:#8fd6a0;font-weight:700}
.ns-faixas tr.ok td:first-child::before{content:"✓ ";}
/* lista de eventos */
.ns-evs{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.ns-ev{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:8px;padding:14px;text-align:left;cursor:pointer;color:#f7efe9}
.ns-ev:hover{border-color:rgba(255,138,61,.75)}
.ns-ev h4{margin:0;font-size:17px}
.ns-ev p{margin:0;color:#c4b2a7}
.ns-ev.breve{cursor:default;opacity:.8}
/* upgrade */
.ns-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:6px}
.ns-form label{display:grid;gap:6px;color:#c4b2a7}
.ns-form select{height:46px;border-radius:10px;border:1px solid #3b2a24;background:#271c19;color:#f7efe9;padding:0 12px;font:inherit}
/* onde é mais barato */
.ns-ofs{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ns-of{display:grid;gap:10px;padding:14px}
.ns-of-top{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center}
.ns-of-top b{font-size:17px;line-height:1.3}
.ns-eco{font-weight:800;color:#8fd6a0;white-space:nowrap}
.ns-ofl{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:#1d1513;border:1px solid #3b2a24;font-variant-numeric:tabular-nums}
.ns-ofl.melhor{border-color:#7fbf6a;background:rgba(127,191,106,.10)}
.ns-ofl small{display:block;color:#9a877c;font-size:15px}
.ns-ofl .un{font-weight:800;color:#ecd7a8;text-align:right}
.ns-ofl .tot{color:#c4b2a7;text-align:right}
@media (max-width:900px){.ns-grade4{grid-template-columns:repeat(2,minmax(0,1fr))}.ns-res-g{grid-template-columns:repeat(2,minmax(0,1fr))}.ns-evs{grid-template-columns:repeat(2,minmax(0,1fr))}.ns-ofs{grid-template-columns:1fr}.ns-entrada-g{grid-template-columns:1fr}}
@media (max-width:560px){.ns-grade4,.ns-evs,.ns-form{grid-template-columns:1fr}.ns-res-g{grid-template-columns:1fr}.ns-etapa > summary{grid-template-columns:40px minmax(0,1fr) 24px}.ns-etapa .soma{grid-column:2}}
.ns-prod-ic{background:none;border:0;padding:0;cursor:pointer;display:grid;place-items:center;width:52px;height:52px}
.ns-prod-ic .ns-ic,.ns-prod-ic .ns-qi{width:52px;height:52px}
/* campo numérico simples (eventos de recarga) */
.ns-campo{display:grid;gap:6px;color:#c4b2a7;font-size:15px}
.ns-campo input{height:46px;border-radius:10px;border:1px solid #3b2a24;background:#271c19;color:#f7efe9;padding:0 12px;font:inherit;font-variant-numeric:tabular-nums;width:100%;box-sizing:border-box}
.ns-form{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ns-sel{height:46px;border-radius:10px;border:1px solid #3b2a24;background:#271c19;color:#f7efe9;padding:0 12px;font:inherit;max-width:100%}
/* caixa de sugestão e feedback (fim de cada tela) */
.ns-fb{margin-top:18px;padding:16px}
.ns-fb-cab{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ns-fb-cab h3{margin:0 0 4px;font-size:18px}
.ns-fb-cab p{margin:0;color:#c4b2a7;max-width:60ch}
.ns-fb-form{display:grid;gap:12px;margin-top:14px}
.ns-fb-texto{width:100%;box-sizing:border-box;min-height:110px;border-radius:10px;border:1px solid #3b2a24;background:#271c19;color:#f7efe9;padding:12px;font:inherit;resize:vertical}
.ns-fb-pe{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ns-fb-msg{color:#ffb27a;min-height:1.4em}
.ns-fb-msg.ok{color:#8fd6a0}
/* Asas (mockup aprovado em 14/10/2026): blocos em card */
.as-topo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px;align-items:stretch}
.as-seu,.as-res,.as-bloco{padding:18px}
.as-bloco{margin-top:16px}
.as-seu h2,.as-res h2,.as-bloco h2{margin:0 0 4px;font-size:20px}
.as-s{margin:0 0 12px;color:#c4b2a7}
.as-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.as-form label{display:grid;gap:6px;color:#c4b2a7}
.as-form select{width:100%;height:44px;border-radius:10px;border:1px solid #3b2a24;background:#17110f;color:#f7efe9;font:inherit;padding:0 10px}
.as-prog{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;margin-top:14px;font-variant-numeric:tabular-nums;color:#c4b2a7}
.as-prog .barra{grid-column:1/-1;height:8px;border-radius:4px;background:#271c19;overflow:hidden;position:relative}
.as-prog .barra i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#ffb27a,#ff8a3d)}
.as-prog .barra u{position:absolute;inset:0 auto 0 0;background:rgba(143,214,160,.75)}
.as-res .ns-res-g{grid-template-columns:repeat(2,minmax(0,1fr))}
.as-attrs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:10px}
.as-attr{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:2px;padding:12px 14px;border-radius:12px;background:#1d1513;border:1px solid #3b2a24;font-variant-numeric:tabular-nums}
.as-attr small{color:#9a877c;font-size:15px}
.as-attr .de{color:#c4b2a7}
.as-attr .de i{font-style:normal;color:#9a877c;margin:0 6px}
.as-attr b{font-size:22px;color:#8fd6a0}
.as-tab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.as-tab th,.as-tab td{padding:9px 12px;text-align:right;border-bottom:1px solid #2f221d}
.as-tab th:first-child,.as-tab td:first-child{text-align:left}
.as-tab th{color:#9a877c;font-weight:600}
.as-rolagem{overflow-x:auto;max-height:420px;overflow-y:auto}
.as-faixas{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-top:6px}
.as-visual{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px;border-radius:10px;background:#1d1513;border:1px solid #3b2a24}
.as-visual .ns-qi{width:40px;height:40px}
.as-visual small{display:block;color:#9a877c;font-size:15px}
@media (max-width:900px){.as-topo{grid-template-columns:1fr}}
@media (max-width:560px){.as-form,.as-res .ns-res-g{grid-template-columns:1fr}}