/* /js/jogos/dota2/dota2-herois.css -- tela "Heróis" do Dota 2 (mockup aprovado docs/mockups/dota2/herois.html, 06/11/2026).
   Divide o #dtApp com a Meta dos heróis e reaproveita as peças dela (cabeça, filtros, gavetas, ícones) de dota2-meta.css; aqui só o que é novo: cartões, ficha em janela.
   Cartões da mesma fileira com as mesmas linhas na mesma altura (subgrid, regra 25); letra mínima 15px (regra 18); feixe de luz em `.dt-feixe` (regra 20, public/artes/feixe-onda.css). */
#dtApp .dt-h-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:980px){#dtApp .dt-h-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){#dtApp .dt-h-lista{grid-template-columns:1fr}}
#dtApp .dt-h-cartao{text-align:left;cursor:pointer;color:inherit;font:inherit;background:var(--card,#1a1011);border:1px solid var(--dt-line);border-radius:14px;padding:14px;display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:8px;min-width:0}
#dtApp .dt-h-cartao:hover{border-color:rgba(224,71,58,.55)}
#dtApp .dt-h-cartao:focus-visible,#dtApp .dt-h-x:focus-visible,#dtApp .dt-h-m:focus-visible{outline:2px solid var(--dt-ac);outline-offset:2px}
#dtApp .dt-h-cartao>*{position:relative;z-index:1}
#dtApp .dt-h-topo{display:flex;gap:12px;align-items:center;min-width:0}
#dtApp .dt-h-topo h3{font-size:19px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#dtApp .dt-h-ic{width:44px;height:44px;border-radius:11px;font-size:19px}
#dtApp .dt-h-etqs{display:flex;gap:6px;flex-wrap:wrap;align-content:flex-start}
#dtApp .dt-h-etq{font:500 15px var(--mono,monospace);border:1px solid var(--dt-line-hi);border-radius:999px;padding:2px 10px;color:var(--t-mid,#c3aeab);white-space:nowrap}
#dtApp .dt-h-etq.dt-at-str{border-color:rgba(224,71,58,.55)}#dtApp .dt-h-etq.dt-at-agi{border-color:rgba(67,199,155,.55)}#dtApp .dt-h-etq.dt-at-int{border-color:rgba(90,167,255,.55)}#dtApp .dt-h-etq.dt-at-all{border-color:rgba(201,139,255,.55)}
#dtApp .dt-h-funcs{color:var(--t-mid,#c3aeab);font-size:15px;min-height:calc(2*1.5em);line-height:1.5}
#dtApp .dt-h-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#dtApp .dt-h-mini>span{display:flex;flex-direction:column;border:1px solid var(--dt-line);border-radius:10px;padding:4px 10px;background:rgba(0,0,0,.25)}
#dtApp .dt-h-mini i{font-style:normal;font-size:15px;color:var(--t-low,#a08c89)}
#dtApp .dt-h-mini b{font:700 17px var(--mono,monospace);font-variant-numeric:tabular-nums}
#dtApp .dt-h-mini b em{font-style:normal;font-weight:500;font-size:15px;color:var(--t-low,#a08c89)}
#dtApp .dt-h-mais{display:flex;justify-content:center;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}

/* ficha em janela */
#dtApp .dt-h-fundo{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.66);display:flex;overflow:auto;padding:16px max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
#dtApp .dt-h-jan{margin:auto;width:min(860px,100%);background:var(--card,#1a1011);border:1px solid rgba(224,71,58,.45);border-radius:18px;padding:22px;display:grid;gap:14px;align-content:start}
#dtApp .dt-h-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:10px;border:1px solid var(--dt-line-hi);background:transparent;color:inherit;cursor:pointer;font-size:18px;z-index:4}
#dtApp .dt-h-jtop{display:flex;gap:14px;align-items:center;padding-right:48px}
#dtApp .dt-h-jtop h3{font-size:28px;font-weight:900;margin-bottom:6px}
#dtApp .dt-h-funcs-j{min-height:0}
#dtApp .dt-h-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media(max-width:620px){#dtApp .dt-h-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
#dtApp .dt-h-st{border:1px solid var(--dt-line);border-radius:10px;padding:8px 12px;background:rgba(0,0,0,.25);display:flex;flex-direction:column}
#dtApp .dt-h-st span{font-size:15px;color:var(--t-low,#a08c89)}
#dtApp .dt-h-st b{font:700 18px var(--mono,monospace);font-variant-numeric:tabular-nums}
#dtApp .dt-h-nivel{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#dtApp .dt-h-passo{display:inline-flex;align-items:center;gap:10px}
#dtApp .dt-h-m{width:40px;height:40px;border-radius:10px;border:1px solid var(--dt-line-hi);background:rgba(255,255,255,.05);color:inherit;font:700 20px var(--body,inherit);cursor:pointer}
#dtApp .dt-h-passo output{font:700 20px var(--mono,monospace);min-width:2ch;text-align:center}
#dtApp .dt-h-atrs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(max-width:620px){#dtApp .dt-h-atrs{grid-template-columns:1fr}}
#dtApp .dt-h-atrs .dt-h-st b{font-size:22px}
#dtApp .dt-h-atrs .dt-h-st small{font:500 15px var(--mono,monospace);color:var(--t-low,#a08c89)}
#dtApp .dt-h-hab{display:grid;grid-template-columns:minmax(0,1fr) 150px 110px;gap:4px 14px;padding:10px 12px;border:1px solid var(--dt-line);border-radius:10px;align-items:start}
#dtApp .dt-h-hab b{font-family:var(--display);font-size:17px;color:var(--t-hi,#f7efee)}
#dtApp .dt-h-tipo{color:var(--t-low,#a08c89);font:500 15px var(--mono,monospace)}
#dtApp .dt-h-num2{font:500 15px var(--mono,monospace);color:var(--t-mid,#c3aeab);text-align:right;font-variant-numeric:tabular-nums}
#dtApp .dt-h-hab p{grid-column:1/-1;color:var(--t-mid,#c3aeab)}
@media(max-width:700px){#dtApp .dt-h-hab{grid-template-columns:1fr 1fr}#dtApp .dt-h-hab b{grid-column:1/-1}#dtApp .dt-h-num2{text-align:left}}
#dtApp .dt-h-tal{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1fr);gap:8px 12px;align-items:start}
#dtApp .dt-h-lv{font:700 17px var(--mono,monospace);color:var(--dt-gold);padding-top:8px}
#dtApp .dt-h-op{border:1px solid var(--dt-line);border-radius:10px;padding:8px 12px;background:rgba(0,0,0,.25);color:var(--t-mid,#c3aeab)}
@media(max-width:620px){#dtApp .dt-h-tal{grid-template-columns:50px minmax(0,1fr)}#dtApp .dt-h-tal .dt-h-lv{grid-row:span 2}}
#dtApp .dt-h-fonte{color:var(--t-low,#a08c89);font-size:15px}
@media(prefers-reduced-motion:reduce){#dtApp .dt-h-cartao,#dtApp .dt-h-jan{animation:none!important;transition:none!important}}
#dtApp .dt-h-en{font:500 15px var(--body,sans-serif);color:var(--t-low,#a08c89)}