/* /js/jogos/hsr/banners.css -- tela Banners do Honkai: Star Rail (mockup aprovado docs/mockups/hsr/banners.html, 07/11/2026).
   Blocos .gs-bl (cenário do HSR e feixe de luz, regras 11 e 20); letra mínima 15px (regra 18); cartões da mesma fileira alinhados por subgrid (regra 25). */
#hsrApp .hb-cab{padding:16px 20px}
#hsrApp .hb-selos{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
#hsrApp .hb-selo{display:inline-flex;gap:8px;align-items:center;border-radius:999px;padding:4px 14px;border:1px solid;font-weight:600;font-size:15px}
#hsrApp .hb-selo i{width:9px;height:9px;border-radius:3px;background:currentColor}
#hsrApp .hb-obra{color:var(--gs-ouro,#f0d080);border-color:rgba(240,208,128,.5);background:rgba(36,26,4,.6)}
#hsrApp .hb-atual{color:#38d6a0;border-color:rgba(56,214,160,.5);background:rgba(5,24,18,.6)}
#hsrApp .hb-ferr{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;padding:16px 20px}
#hsrApp .hb-grupo{display:flex;gap:10px;flex-wrap:wrap;align-items:center;position:relative;z-index:1}
#hsrApp .hb-grupo .gs-chips{margin:0}
#hsrApp .hb-rot{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t-low,#8a93a3)}
#hsrApp .hb-qtd{font-size:15px;color:var(--t-low,#8a93a3);font-variant-numeric:tabular-nums}
#hsrApp .hb-dica{flex:1 1 100%;margin:0;font-size:15px;color:var(--t-mid,#a7b0bd);position:relative;z-index:1}
#hsrApp .hb-sec{display:grid;gap:12px}
#hsrApp .hb-sec > h3{margin:0;font-size:19px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
#hsrApp .hb-sec > h3 small{font-size:15px;font-weight:500;color:var(--t-low,#8a93a3)}
#hsrApp .hb-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:980px){#hsrApp .hb-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){#hsrApp .hb-lista{grid-template-columns:1fr}}
#hsrApp .hb-card{display:grid;grid-row:span 5;grid-template-rows:subgrid;gap:8px;align-content:start;min-width:0;padding:14px}
#hsrApp .hb-card h4{margin:0;font-size:17px;line-height:1.2}
#hsrApp .hb-card p{margin:0;position:relative;z-index:1}
#hsrApp .hb-topo{display:flex;gap:12px;align-items:center;min-width:0;position:relative;z-index:1}
#hsrApp .hb-ic{width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;background:rgba(0,0,0,.25);border:2px solid var(--gs-el,var(--border,#29313d))}
#hsrApp .hb-ic img{width:100%;height:100%;object-fit:cover}
#hsrApp .hb-cone{border-radius:12px;border-width:1px;border-color:var(--border,#29313d)}
#hsrApp .hb-q{display:grid;place-items:center;width:100%;height:100%;font-weight:800;font-size:18px;color:var(--t-low,#8a93a3);background:var(--s-700,#1a2130)}
#hsrApp .hb-sub{font-size:15px;color:var(--t-low,#8a93a3)}
#hsrApp .hb-tags{display:flex;gap:6px;flex-wrap:wrap;align-content:flex-start;position:relative;z-index:1}
#hsrApp .hb-tag{font-size:15px;font-weight:600;border:1px solid;border-radius:6px;padding:1px 8px;white-space:nowrap}
#hsrApp .hb-novo{color:#38d6a0;border-color:rgba(56,214,160,.55)}
#hsrApp .hb-rep{color:#b3c8ff;border-color:rgba(122,162,255,.5)}
#hsrApp .hb-col{color:#b48cff;border-color:rgba(180,140,255,.55)}
#hsrApp .hb-vivo{color:var(--gs-ouro,#f0d080);border-color:rgba(240,208,128,.55)}
#hsrApp .hb-prev{color:var(--t-mid,#a7b0bd);border-color:var(--border,#29313d)}
#hsrApp .hb-quando{font-size:15px;font-variant-numeric:tabular-nums}
#hsrApp .hb-quando b{font-weight:700}
#hsrApp .hb-rate{font-size:15px;color:var(--t-mid,#a7b0bd)}
#hsrApp .hb-rate b{color:var(--t-hi,#f1f2fb)}
#hsrApp .hb-vazio{padding:16px;color:var(--t-mid,#a7b0bd);font-size:15px}
#hsrApp .hb-plan{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 20px}
#hsrApp .hb-plan > *{position:relative;z-index:1}
#hsrApp .hb-plan h3{margin:0 0 4px;font-size:19px}
#hsrApp .hb-plan p{margin:0;font-size:15px;color:var(--t-mid,#a7b0bd)}
@media (max-width:640px){#hsrApp .hb-plan{grid-template-columns:1fr}}
#hsrApp .hb-gav > div{display:grid;gap:8px;margin-top:12px}
#hsrApp .hb-gav p{margin:0;font-size:15px;color:var(--t-mid,#a7b0bd)}
#hsrApp .hb-fonte{margin:0;font-size:15px;color:var(--t-low,#8a93a3)}
@media (prefers-reduced-motion:reduce){#hsrApp .hb-card *{animation:none!important;transition:none!important}}