/* ════════════════════════════════════════════════════════════
   RESPONSIVE — mobile-first. La app se diseñó para celular;
   estas reglas evitan que se vea rota/estirada en pantallas grandes.
   ════════════════════════════════════════════════════════════ */

/* ── Tablet chico / celular grande en horizontal ── */
@media(min-width:600px){
  .match-card{ grid-template-columns:1fr 96px 1fr; }
  .mc-crest{ width:30px;height:30px; }
}

/* ── Tablet / desktop: centrar todo, no estirar edge-to-edge ── */
@media(min-width:820px){
  html,body{ overflow:auto; background:var(--bg1); } /* fondo detrás del "teléfono" */
  #app{
    max-width:480px;
    margin:0 auto;
    height:100vh;height:100dvh;
    box-shadow:var(--shadow-md);
    border-left:1px solid var(--bord);
    border-right:1px solid var(--bord);
  }
}

/* ── Desktop grande: bottom-nav se puede volver más cómodo con labels más grandes ── */
@media(min-width:1100px){
  .bn-label{ font-size:10px; }
}

/* ── Pantallas muy chicas (iPhone SE y similares) — apretar paddings ── */
@media(max-width:360px){
  #header{ padding:var(--sp-2) var(--sp-2) 0; }
  .header-title{ font-size:13px; }
  .mc-name{ font-size:12px; }
  .bn-label{ display:none; } /* solo íconos si no entra */
  .bn-item{ padding:10px 2px; }
}

/* ── Landscape en celular: bajar altura de header para no comerse la pantalla ── */
@media(max-height:420px) and (orientation:landscape){
  .comp-chips{ display:none; } /* se accede por el tab "Ligas" del bottom nav */
  .bn-label{ display:none; }
}