/* ---------- responsivo ---------- */
.layout > * { min-width: 0; }
@media (max-width: 1100px) {
    .layout { grid-template-columns: minmax(0, 1fr); }
    .hero-card { position: static; max-height: none; }
    .hero-portrait { max-width: 280px; margin-inline: auto; }
    .saga-strip { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
@media (max-width: 640px) {
    .app-header { padding: .25rem .8rem; gap: .6rem; }
    .wallet small { display: none; }
    .btn-sair { padding: .42rem .6rem; }
    .btn-sair span { display: none; }   /* só o ícone; o nome fica no aria-label */
    .btn-conta { padding: .42rem .6rem; }
    .btn-conta span { display: none; }
    .layout { padding: .9rem; }
    /* combate no celular (2026-10-12, pedido do dono): herói e inimigo LADO A LADO, menores — antes ficavam um em
       cima do outro e não dava para ver os dois ao mesmo tempo */
    .fighters { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .3rem; }
    .vs { display: block; font-size: 1.1rem; align-self: center; }
    .fighter h3 { font-size: .82rem; overflow-wrap: anywhere; }
    .fighter .sub { font-size: .62rem; min-height: 0; margin-bottom: .3rem;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .fighter .hp-text, .fighter .fervor-text { font-size: .62rem; }
    .fighter .buffs { min-height: 0; }
    .sprite-box { height: 200px; }
    .fighters .sprite-box { height: 150px; }
    .main-tab img { max-height: 60px; }
    .saga-strip { grid-template-columns: repeat(3, 1fr); }   /* cards verticais com logo cabem 3 por linha aqui */
    .mission-grid { grid-template-columns: 1fr; }
}