/* /js/jogos/dota2/dota2-meta.css -- tela "Meta dos heróis" do Dota 2 (mockup aprovado docs/mockups/dota2/meta-dos-herois.html, 04/11/2026).
   Cenário do Dota 2: brasas que sobem e o brilho de uma runa (regra 11); feixe de luz nos cards (regra 20, public/artes/feixe-onda.css).
   Letra mínima 15px (regra 18); tabela de colunas fixas, tudo alinhado (regra 25). */
#dtApp{--dt-ac:#e0473a;--dt-ac3:#ff9d92;--dt-gold:#e3b341;--dt-live:#38d6a0;--dt-blue:#5aa7ff;--dt-line:var(--line,#3a2427);--dt-line-hi:var(--line-hi,#573339);display:grid;gap:30px;padding-bottom:50px;color:var(--t-hi,#f7efee)}
#dtApp[hidden],#dota2App[hidden],#dota2App.gs-app[hidden]{display:none!important}
#dtApp h1,#dtApp h2,#dtApp h3{font-family:var(--display);margin:0;line-height:1.1;text-wrap:balance}
#dtApp p{margin:0}
#dtApp .dt-num{font-variant-numeric:tabular-nums}

#dtApp .dt-cab{position:relative;border:1px solid rgba(224,71,58,.45);border-radius:18px;padding:26px;overflow:hidden;isolation:isolate;display:grid;gap:14px;align-content:end;min-height:230px;
  background:radial-gradient(120% 140% at 82% 0%,rgba(224,71,58,.34),transparent 56%),radial-gradient(90% 120% at 0% 100%,rgba(227,179,65,.16),transparent 60%),#12090a}
#dtApp .dt-cenario{position:absolute;inset:0;z-index:-1;pointer-events:none}
#dtApp .dt-brasa{position:absolute;bottom:-12px;width:5px;height:5px;border-radius:50%;background:#ffb35c;box-shadow:0 0 10px 2px rgba(255,140,60,.7);opacity:0;animation:dt-sobe 7s linear infinite}
@keyframes dt-sobe{0%{transform:translateY(0) scale(1);opacity:0}15%{opacity:.9}100%{transform:translateY(-250px) translateX(26px) scale(.4);opacity:0}}
#dtApp .dt-runa{position:absolute;top:16%;right:9%;width:76px;height:76px;border-radius:50%;border:2px solid rgba(255,157,146,.7);display:grid;place-items:center;font:900 30px var(--display);color:#ffb0a6;animation:dt-brilha 3.6s ease-in-out infinite}
@keyframes dt-brilha{50%{box-shadow:0 0 28px 6px rgba(224,71,58,.55);transform:scale(1.06)}}
#dtApp .dt-faixa{position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--dt-ac),var(--dt-gold),var(--dt-blue))}
#dtApp .dt-cab h1{font-size:clamp(32px,5vw,54px);font-weight:900}
#dtApp .dt-lead{color:#ecdcd9;max-width:64ch;font-size:16px}
#dtApp .dt-aviso{font-size:15px;color:#dcc9c6;border-left:3px solid rgba(255,255,255,.35);padding-left:12px}
#dtApp .dt-selos{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#dtApp .dt-selo{display:inline-flex;align-items:center;gap:8px;font:500 15px var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:6px 14px;border:1px solid}
#dtApp .dt-selo i{width:9px;height:9px;border-radius:3px;background:currentColor}
#dtApp .dt-obra{color:var(--dt-gold);border-color:rgba(227,179,65,.55);background:rgba(36,26,4,.78)}
#dtApp .dt-vivo{color:var(--dt-live);border-color:rgba(56,214,160,.55);background:rgba(5,24,18,.78)}
#dtApp .dt-vivo i{border-radius:50%;animation:dt-pulsa 1.6s infinite}
@keyframes dt-pulsa{50%{opacity:.25}}

#dtApp .dt-sec{display:grid;gap:14px;scroll-margin-top:70px}
#dtApp .dt-sec-h{display:flex;gap:12px 16px;align-items:baseline;flex-wrap:wrap}
#dtApp .dt-sec-h h2{font-size:clamp(22px,2.6vw,28px);font-weight:800}
#dtApp .dt-sec-h p{color:var(--t-mid,#c3aeab);flex:1 1 260px;font-size:15px}
#dtApp .dt-card{border:1px solid var(--dt-line);border-radius:14px;background:var(--card,#1a1011);padding:16px;display:grid;gap:8px;align-content:start}
#dtApp .dt-rot{font:500 15px var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--t-low,#a08c89)}
#dtApp .dt-nota{font:500 15px var(--mono,monospace);color:var(--t-low,#a08c89)}
#dtApp .dt-msg{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:18px;border:1px solid var(--dt-line);border-radius:14px;background:var(--card,#1a1011);font-size:15px}

#dtApp .dt-destaques{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
@media(max-width:900px){#dtApp .dt-destaques{grid-template-columns:1fr}}
#dtApp .dt-dest{grid-template-rows:auto auto 1fr}
#dtApp .dt-dest ol{margin:0;padding:0;list-style:none;display:grid;gap:6px;align-content:start}
#dtApp .dt-dest li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:36px}
#dtApp .dt-dest li b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dtApp .dt-n2{font:700 17px var(--display);text-align:right}
#dtApp .dt-pos{color:var(--t-low,#a08c89);font:500 15px var(--mono,monospace)}

#dtApp .dt-filtros{display:grid;gap:12px;border:1px solid var(--dt-line);border-radius:14px;background:var(--card,#1a1011);padding:14px;position:relative;z-index:1}
#dtApp .dt-lin{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center}
#dtApp .dt-lin .dt-rot{min-width:92px}
#dtApp .dt-chips{display:flex;gap:8px;flex-wrap:wrap}
#dtApp .dt-ficha{font:600 15px var(--body,inherit);color:inherit;background:rgba(255,255,255,.05);border:1px solid var(--dt-line-hi);border-radius:999px;padding:7px 14px;cursor:pointer;min-height:40px}
#dtApp .dt-ficha[aria-pressed="true"]{border-color:var(--dt-ac);box-shadow:inset 0 0 0 1px var(--dt-ac);color:var(--dt-ac3)}
#dtApp .dt-ficha:focus-visible,#dtApp .dt-busca:focus-visible,#dtApp .dt-gav summary:focus-visible,#dtApp .dt-tab th button:focus-visible{outline:2px solid var(--dt-ac);outline-offset:2px}
#dtApp .dt-busca{flex:1 1 220px;min-width:0;background:rgba(255,255,255,.05);border:1px solid var(--dt-line-hi);border-radius:10px;color:inherit;font:inherit;font-size:15px;padding:8px 12px;min-height:40px}

#dtApp .dt-rolagem{overflow-x:auto;border-radius:12px}
#dtApp .dt-tab{width:100%;min-width:720px;table-layout:fixed;border-collapse:separate;border-spacing:0;border:1px solid var(--dt-line);border-radius:12px;overflow:hidden;background:var(--card,#1a1011)}
#dtApp .dt-tab th{font:500 15px var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--t-low,#a08c89);text-align:left;padding:10px 14px;background:var(--bg-alt,#130c0d);border-bottom:1px solid var(--dt-line);white-space:nowrap}
#dtApp .dt-tab th button{all:unset;cursor:pointer;display:inline-flex;gap:6px;align-items:center;min-height:32px;font:inherit;letter-spacing:inherit;text-transform:inherit}
#dtApp .dt-tab th button[aria-pressed="true"]{color:var(--dt-ac3)}
#dtApp .dt-tab td{padding:10px 14px;border-bottom:1px solid var(--dt-line);vertical-align:middle;text-align:left}
#dtApp .dt-tab tr:last-child td{border-bottom:0}
#dtApp .dt-tab td.dt-n,#dtApp .dt-tab th.dt-n{text-align:right;font-variant-numeric:tabular-nums}
#dtApp .dt-tab th:nth-child(1),#dtApp .dt-tab td:nth-child(1){width:34%}
#dtApp .dt-tab th:nth-child(2),#dtApp .dt-tab td:nth-child(2){width:16%}
#dtApp .dt-tab th:nth-child(3),#dtApp .dt-tab td:nth-child(3){width:26%}
#dtApp .dt-heroi{display:flex;gap:12px;align-items:center;min-width:0}
#dtApp .dt-heroi b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#dtApp .dt-ini,#dtApp .dt-ico,#dtApp .dt-q{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font:700 15px var(--display);color:#fff;flex:none;overflow:hidden}
#dtApp .dt-ico img{width:100%;height:100%;object-fit:cover}
#dtApp .dt-q{background:var(--card2,#241517);color:var(--t-low,#a08c89)}
#dtApp .dt-a-str{background:linear-gradient(160deg,#a8352c,#5a1a16)}#dtApp .dt-a-agi{background:linear-gradient(160deg,#2b9c78,#145040)}
#dtApp .dt-a-int{background:linear-gradient(160deg,#3c78c4,#1a3a6a)}#dtApp .dt-a-all{background:linear-gradient(160deg,#8a5cc4,#3f2368)}
#dtApp .dt-atr{font:500 15px var(--mono,monospace)}
#dtApp .dt-at-str{color:#e0473a}#dtApp .dt-at-agi{color:#43c79b}#dtApp .dt-at-int{color:#5aa7ff}#dtApp .dt-at-all{color:#c98bff}
#dtApp .dt-barra{height:8px;min-width:80px;border-radius:999px;background:var(--card2,#241517);overflow:hidden}
#dtApp .dt-barra i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--dt-ac),var(--dt-gold))}
#dtApp .dt-vit{display:grid;grid-template-columns:62px minmax(80px,1fr);gap:10px;align-items:center}
#dtApp .dt-bom{color:#6fe0b6}#dtApp .dt-ruim{color:#ff8c80}
#dtApp .dt-poucas{font:500 15px var(--mono,monospace);color:var(--t-low,#a08c89);border:1px dashed var(--dt-line-hi);border-radius:6px;padding:1px 8px;margin-left:4px;white-space:nowrap;flex:none}
#dtApp .dt-vazio{padding:14px;font-size:15px}
#dtApp .dt-gav{border:1px dashed var(--dt-line-hi);border-radius:12px;background:var(--bg-alt,#130c0d)}
#dtApp .dt-gav>summary{cursor:pointer;padding:12px 16px;font-weight:600;list-style:none;color:var(--t-mid,#c3aeab);min-height:44px;display:flex;align-items:center;font-size:15px}
#dtApp .dt-gav>summary::-webkit-details-marker{display:none}
#dtApp .dt-gav>summary::after{content:"+";margin-left:auto;color:var(--dt-ac)}
#dtApp .dt-gav[open]>summary::after{content:"−"}
#dtApp .dt-gav>div{padding:0 16px 14px;display:grid;gap:8px;color:var(--t-mid,#c3aeab);font-size:15px}
#dtApp .dt-gav>.dt-rolagem{padding:0}
#dtApp .dt-rodape{padding-top:18px;border-top:1px solid var(--dt-line);color:var(--t-low,#a08c89);font-size:15px;display:grid;gap:6px}
@media(prefers-reduced-motion:reduce){#dtApp *{animation:none!important;transition:none!important}}