/* Baú de Descoberta (mockup aprovado em 11/10/2026: docs/mockups/naruto/bau-de-descoberta.html). Letra mínima 15px (regra 18), tudo alinhado
   (regra 25): cartões irmãos com a mesma altura e os números na mesma linha. Onda de luz em artes/feixe-onda.css (regra 20). */
.bd-app{display:grid;gap:14px;container-type:inline-size;container-name:bd}
.bd-app [hidden],.bd-jan [hidden]{display:none!important}
.bd-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.bd-cab .card-title{margin:0}
.bd-lead{margin:0 0 12px;color:var(--t-mid);max-width:80ch;font-size:15px}
.bd-nota{margin:0;color:var(--t-low);font-size:15px}
.bd-crumb{margin:0;font:600 15px var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--t-low)}
.bd-etq{display:inline-flex;align-items:center;font:600 15px var(--body);color:var(--t-mid);border:1px solid var(--border);background:var(--s-900);border-radius:999px;padding:3px 12px;white-space:nowrap}
.bd-etq.ouro{color:var(--gold);border-color:rgba(227,179,65,.4);background:rgba(227,179,65,.12)}

/* ícones (original do jogo ou "?", regra 24) */
.bd-ic{width:48px;height:48px;border-radius:10px;border:1px solid var(--line-hi);background:var(--s-800);object-fit:cover;flex:none}
.bd-ic-g{width:56px;height:56px}
.bd-ic-p{width:36px;height:36px;border-radius:8px}
.bd-ic-falta{display:inline-grid;place-items:center;font:800 18px var(--display);color:var(--t-low);border-style:dashed}
.bd-moeda{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.bd-moeda-ic{width:20px;height:20px;border-radius:50%}

/* "Como o baú funciona" e "de onde vem": cartões de 4 e de 3, mesma altura */
.bd-fc4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.bd-onde{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
.bd-fc{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:4px 12px;align-items:start;background:var(--s-900);border:1px solid var(--border);border-radius:12px;padding:14px;min-width:0}
.bd-fc > img{grid-row:span 2;width:48px;height:48px;border-radius:10px;border:1px solid var(--line-hi);background:var(--s-800);object-fit:cover}
.bd-fc b{font:700 16px var(--display);color:var(--t-hi);line-height:1.3}
.bd-fc p{margin:0;color:var(--t-mid);font-size:15px;grid-column:2}
.bd-ver{grid-column:2;justify-self:start;margin-top:6px;border:1px solid rgba(227,179,65,.4);background:rgba(227,179,65,.12);color:var(--gold);border-radius:8px;padding:6px 12px;font:700 15px var(--body);cursor:pointer}
.bd-ver:hover{background:var(--gold);color:#1a1405}
.bd-ver:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@container bd (min-width:1040px){.bd-fc4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container bd (min-width:760px){.bd-onde{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container bd (max-width:519px){.bd-fc4{grid-template-columns:1fr}}

/* loja: abas por raridade (roxo -> laranja -> vermelho), filtro por habilidade, uma fileira por pergaminho */
.bd-abas,.bd-filtros{flex-wrap:wrap;margin:0 0 10px}
.bd-grupo{margin-top:14px}
.bd-grupo h3{margin:0 0 10px;font:700 17px var(--display);color:var(--t-hi)}
.bd-pgs{display:grid;grid-template-columns:1fr;gap:10px;grid-auto-rows:1fr}
@container bd (min-width:520px){.bd-pgs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container bd (min-width:820px){.bd-pgs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bd-pg{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:8px;background:var(--s-900);border:1px solid var(--border);border-radius:12px;padding:10px;min-width:0;overflow:hidden}
.bd-pg::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--bd-cor,var(--gold))}
.bd-roxo{--bd-cor:var(--purple,#a98bff)} .bd-laranja{--bd-cor:#ff9a3c} .bd-pg.bd-vermelho{--bd-cor:#ff5a5a} .bd-essencia{--bd-cor:var(--cyan)}
.bd-pg-top{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:center}
.bd-pg-top .bd-ic-g{width:44px;height:44px}
.bd-pg-top b{display:block;font:800 15px var(--display);color:var(--t-hi);line-height:1.25;text-wrap:balance}
.bd-pg-top small{display:block;font-size:15px;color:var(--t-low);margin-top:2px}
.bd-pg-ef span{display:inline-block;border:1px solid rgba(227,179,65,.4);background:rgba(227,179,65,.12);color:var(--gold);border-radius:8px;padding:3px 8px;font:700 15px var(--body);font-variant-numeric:tabular-nums}
.bd-pg-ef{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.bd-niv{cursor:pointer;border:1px solid var(--line-hi);background:var(--s-800);color:var(--t-hi);border-radius:8px;padding:3px 10px;font:600 15px var(--body);white-space:nowrap}
.bd-niv:hover,.bd-niv:focus-visible{border-color:var(--gold);color:var(--gold);outline:none}
.bd-est{display:inline-block;margin-left:8px;border:1px dashed var(--line-hi);border-radius:6px;padding:0 6px;font-size:15px;color:var(--t-mid)}
.bd-j-it b.bd-est-v{color:var(--t-mid);font-style:italic}
.bd-pg-ef span.falta{color:var(--t-mid);border-color:var(--line-hi);background:var(--s-800)}
.bd-essencia .bd-pg-ef span{color:var(--t-mid);border-color:var(--line-hi);background:var(--s-800);font-weight:600}
.bd-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;border-top:1px solid var(--border);padding-top:8px;align-self:end}
.bd-nums > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.bd-nums b{font:700 16px var(--display);font-variant-numeric:tabular-nums;color:var(--t-hi);min-height:22px;display:flex;align-items:center}
.bd-nums small{font-size:15px;color:var(--t-low)}
.bd-fim{border-radius:9px;padding:6px 8px;font:600 15px var(--body);background:var(--s-800);color:var(--t-mid);font-variant-numeric:tabular-nums}

/* Crítico vermelho */
.bd-critico{border-color:rgba(255,90,90,.35)}
.bd-v-topo{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center}
.bd-v-topo > img{width:56px;height:56px;border-radius:10px;border:1px solid var(--line-hi)}
.bd-v-topo .card-title{margin:0}
.bd-v-topo .bd-lead{margin:4px 0 0}
.bd-rodadas{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 6px}
.bd-rodadas button{cursor:pointer;min-width:48px;text-align:center;border:1px solid rgba(255,90,90,.45);background:rgba(255,90,90,.1);color:var(--t-hi);border-radius:8px;padding:3px 8px;font:700 15px var(--body);font-variant-numeric:tabular-nums}

/* resumo: um cartão por raridade */
.bd-resumo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bd-resumo-2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}
@container bd (max-width:599px){.bd-resumo{grid-template-columns:1fr}}
.bd-rcard{display:grid;grid-template-rows:auto auto 1fr;gap:4px;background:var(--s-900);border:1px solid var(--border);border-radius:12px;padding:14px;min-width:0}
.bd-rcard span{color:var(--t-low);font-size:15px}
.bd-rcard b{font:800 24px var(--display);font-variant-numeric:tabular-nums;color:var(--t-hi)}
.bd-rcard small{font-size:15px;color:var(--t-mid)}
.bd-rcard.forte{border-color:rgba(227,179,65,.4);background:rgba(227,179,65,.12)}
.bd-rcard.forte b{color:var(--gold)}

/* janelinha "Ver detalhes" (base: js/core/ajuda-janela.css) */
.bd-jan{border-color:rgba(227,179,65,.45)}
.bd-j-corpo{display:grid;gap:6px}
.bd-j-topo{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;padding-right:34px}
.bd-j-topo .aj-titulo{padding-right:0;margin-top:2px}
.bd-j-etqs{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.bd-j-sub{margin:12px 0 4px;font:700 16px var(--display);color:var(--t-hi)}
.bd-j-lista{display:flex;flex-direction:column;gap:6px}
.bd-j-it{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--s-900);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
.bd-j-it span{min-width:0;color:var(--t-hi);font-size:15px;line-height:1.35}
.bd-j-it small{display:block;font-size:15px;color:var(--t-low)}
.bd-j-it b{font:700 16px var(--display);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--t-hi)}
.bd-j-it.destaque{border-color:rgba(255,90,90,.45);background:rgba(255,90,90,.08)}
.bd-rodadas button:hover,.bd-rodadas button:focus-visible{background:rgba(255,90,90,.25);border-color:rgba(255,90,90,.8);outline:none}
.bd-j-it b.falta{color:var(--t-mid)}
.bd-j-link{justify-self:start;margin-top:10px;color:var(--cyan);font:600 15px var(--body);text-decoration:none}
.bd-j-link:hover{text-decoration:underline}