/**
 * responsive.css
 * ------------------------------------------------------------------
 * Ajustes por tamaño de pantalla. La llave siempre se puede recorrer
 * con scroll/drag/zoom, así que aquí solo ajustamos la cabecera, el
 * tamaño de tarjetas y el panel lateral.
 * ------------------------------------------------------------------
 */

/* ---- Ultrawide / 4K: dar más aire y tarjetas ligeramente más grandes --- */
@media (min-width: 1920px) {
  :root {
    --card-width: 300px;
    --column-gap: 110px;
    --fs-base: 1rem;
  }
}

/* ---- Laptops / desktop estándar (por defecto ya cubierto en style.css) */

/* ---- Tablets ----------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --card-width: 230px;
    --column-gap: 64px;
  }

  .app-header {
    padding: var(--space-3) var(--space-4);
  }

  #side-panel {
    width: min(380px, 100vw);
  }
}

/* ---- Móviles ------------------------------------------------------------
   La llave en árbol horizontal (pan/zoom/conectores) no es práctica en una
   pantalla angosta. En vez de solo encoger las tarjetas, cambiamos a un
   modo de lista: una ronda a la vez, a ancho completo, con scroll vertical
   nativo del teléfono. El selector de fase + los botones ‹ › (que ya
   filtran por ronda vía el mismo mecanismo que usa el desktop) sirven de
   navegación entre rondas.
   -------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root {
    --card-width: 100%;
    --column-gap: var(--space-5);
    --fs-lg: 1.2rem;
    --fs-xl: 1.5rem;
  }

  /* El layout desktop usa 100vh + overflow:hidden en body/#app-root/.bracket-shell
     para que el pan/zoom manual del árbol funcione. En modo lista vertical ya no
     hace falta: dejamos que la página completa scrollee de forma nativa. */
  html, body { height: auto; }
  body { overflow-y: auto; overflow-x: hidden; }
  #app-root { height: auto; min-height: 100vh; }
  .bracket-shell { overflow: visible; }

  .app-header {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    position: sticky;
    top: 0;
  }

  .brand { font-size: var(--fs-md); margin-right: var(--space-2); }

  .header-controls {
    order: 3;
    width: 100%;
    gap: var(--space-2);
  }

  /* El select nativo de fase sigue existiendo (accesibilidad / fallback)
     pero en móvil lo reemplaza visualmente el navegador prev/next. */
  .header-controls > .field-select:has(#phase-filter) { display: none; }

  .mobile-round-nav {
    display: flex;
    order: 1;
    width: 100%;
  }

  .search-field { order: 2; min-width: 130px; flex: 1; }
  .toggle-chip { order: 4; }

  .header-actions {
    order: 2;
    margin-left: auto;
  }

  #minimap { width: 130px; height: 66px; }

  #side-panel { width: 100vw; }

  .lineups-grid { grid-template-columns: 1fr; }

  .toggle-chip span.label-text { display: none; }

  /* ---- Modo lista vertical de la llave ---- */
  .floating-controls { display: none; } /* sin zoom/pan/minimap: no hacen falta con scroll nativo */

  #bracket-viewport {
    position: static;
    inset: auto;
    overflow: visible;
    cursor: auto;
    touch-action: pan-y;
  }

  #bracket-track {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-3) var(--space-8);
    transform: none !important; /* anula el pan/zoom de escritorio */
  }

  #bracket-connectors { display: none; } /* los conectores del árbol no aplican a una lista vertical */

  .round-column {
    min-width: 0;
    width: 100%;
  }

  .round-matches {
    width: 100%;
  }

  .match-card {
    width: 100%;
  }

  .third-place-column { align-self: stretch; }
}

/* ---- Pantallas muy pequeñas ---------------------------------------------- */
@media (max-width: 380px) {
  .zoom-controls #zoom-level-label { display: none; }
}