/* ============================================================
   QUE ENTRE EN CUALQUIER PANTALLA

   Se carga ultimo, asi puede corregir lo de arriba sin tocarlo.

   🔴 LA CAUSA DE CASI TODOS LOS DESBORDES ERA UNA SOLA.

   Un item de grid o de flex trae `min-width: auto` de fabrica, que
   quiere decir "no me achiques por debajo de mi contenido". Con eso una
   pista `1fr` deja de ser flexible: se planta en el ancho del hijo mas
   ancho y empuja a todos sus hermanos. En la pantalla de identidad el
   hijo ancho era la Grieta (330px fijos), asi que en un telefono de 320
   la columna media 362 y todo lo de adentro se salia de la pantalla —el
   titulo, el campo del nick, los botones de estilo—.

   Por eso lo primero de este archivo es declarar que todo lo que vive
   dentro de una grilla puede achicarse. Despues vienen los cortes por
   ancho, los de pantalla baja (el telefono acostado) y los tamanos
   minimos para el dedo.
   ============================================================ */

/* ---------- 1. todo lo que esta en una grilla puede achicarse ---------- */

.identity__body > .identity__col,
.career > .career__side,
.career > .career__main,
.final__top > *,
.final__clubs > *,
.opts > .opt,
.modes > *,
.stats-row > *,
.card,
.yr > *,
.tl__head > * {
  min-width: 0;
}

/* nada que sea una imagen o un dibujo se sale de su caja */
img, svg, video, canvas { max-width: 100%; }

/* una palabra larguisima (un nick, un nombre de club) parte antes de romper */
.opt__name, .opt__note, .decision__title, .decision__desc,
.card__title, .yr-detail__v, .final__name, .note {
  overflow-wrap: anywhere;
}

/* ---------- 2. tablet para abajo ---------- */

@media (max-width: 900px) {
  #app { padding-block: 16px 8px; }
  /* la ficha del jugador deja de ir pegada arriba: en una pantalla
     angosta ya esta apilada y lo unico que hace es robar alto */
  .career__side { position: static; max-height: none; }
}

/* ---------- 3. telefono ---------- */

@media (max-width: 560px) {
  #app { padding-inline: 12px; padding-block: 12px 8px; }

  .intro { padding-top: 20px; }
  .intro__sub { font-size: var(--fs-body); margin-bottom: 26px; }

  /* la Grieta es cuadrada: en un telefono angosto se la deja mandar al
     ancho disponible en vez de a sus 330px */
  .rift { max-width: 100%; }

  /* el detalle del ano es una fila clave/valor: en angosto se apila, que
     es lo unico que evita que el valor se vaya de la pantalla */
  .yr-detail__row { flex-wrap: wrap; }
  .yr-detail__k { flex-basis: 100%; min-width: 0; margin-bottom: 2px; }
  .yr-detail__v { width: 100%; }

  /* la lista de partidos tiene su propio ancho: se la deja desplazar a
     ella sola antes que empujar la pagina entera */
  .matches { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* apilados y de ancho completo: tres botones en fila no entran, y el
     primario queda abajo, que es donde cae el pulgar */
  .final__actions { flex-direction: column-reverse; }
  .final__actions .btn { width: 100%; }
}

/* ---------- 4. telefono chico (320) ---------- */

@media (max-width: 380px) {
  #app { padding-inline: 10px; }
  .identity__col { padding: 16px 12px; }
  .identity__head, .identity__foot { padding: 14px 12px; }
  .identity__head h1 { font-size: var(--fs-xl); }

  /* la tabla de anios: menos columnas de numeros y mas lugar para el club */
  .tl__head, .yr { grid-template-columns: 28px 1fr 38px 38px 38px 38px; font-size: var(--fs-sm); }
  .tl__head { padding-inline: 8px; }
  .yr { padding-inline: 8px; }
}

/* ---------- 5. telefono acostado: sobra ancho y falta alto ---------- */

@media (max-height: 480px) and (orientation: landscape) {
  #app { padding-block: 10px 6px; }
  .intro { padding-top: 10px; }
  .intro__title { font-size: var(--fs-display-sm); }
  .intro__sub { margin-bottom: 18px; font-size: var(--fs-body); }
  .modes { margin-bottom: 16px; }
  /* 🔴 Aca le habia puesto un alto maximo con scroll propio para aprovechar
     los 390px de alto. Salio al reves: la decision del turno vive al final
     de la ficha, asi que quedaba debajo del borde del panel y habia que
     adivinar que ahi adentro habia algo para scrollear. Mejor una pagina
     larga que un panel que esconde lo unico que hay que tocar. */
  .career__side { max-height: none; overflow: visible; }
  .legal { padding-block: 12px 16px; }
}

/* ---------- 6. tamanos para el dedo ----------

   En una pantalla tactil no hay puntero fino: lo que se toca tiene que
   medir al menos 40px de alto, que es la medida que usan Apple y Google.
   Se aplica solo con `pointer: coarse` para no agrandar nada en el
   escritorio, donde con el mouse 22px se aciertan sin problema. */

@media (pointer: coarse) {
  /* 42 y no 40: a 40 clavado el navegador devuelve 39.98 por el
     redondeo de subpixeles y el boton queda apenas por debajo */
  button, select, input, .btn, a[data-act] { min-height: 42px; }

  /* los que son chicos por diseno: se agrandan con padding, asi crecen
     sin deformar la grilla donde viven */
  .lang-select { padding-block: 10px; }
  .ver-partidos { padding: 10px 12px; }
  .country, .team-pick { padding-block: 10px; }

  /* la fila de un anio es clickeable entera */
  .yr { min-height: 44px; }
}

/* ---------- 7. piso de lectura ----------

   Las etiquetas en versalita bajaban a 9px, que en un telefono no se
   leen. 11px es el piso que recomiendan las dos guias de interfaz.
   Ya no es una lista de componentes: lo pone el token --fs-xs (ver
   css/tokens.css), asi que toda etiqueta nueva lo hereda sola. */

@media (max-width: 900px) {
  .lang-select { font-size: var(--fs-sm); }

  /* Si el nombre del campeon pasa a 11px, la celda tiene que crecer con
     el: subirle la letra sin darle lugar solo cambia un texto ilegible
     por un texto cortado. */
  .champs__grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}

/* ---------- 8. listas de dos columnas que ya no entran ---------- */

@media (max-width: 420px) {
  /* paises y equipos: a dos columnas, cada nombre queda en 60px utiles y
     se corta; a una entra entero */
  .countries { grid-template-columns: 1fr; }
}

.country, .team-pick { min-width: 0; }
.champ__name { min-width: 0; }

/* ---------- 9. lo que solo pasa en un telefono ----------

   Tres cosas que no se ven midiendo anchos pero que arruinan el juego en
   un telefono de verdad. */

/* UNO. iOS hace zoom solo cuando enfocas un campo cuya letra mide menos
   de 16px, y despues te deja la pagina corrida. Los buscadores estaban
   en 15 y 14px, asi que pasaba en el nick, en el de paises y en el de
   equipos. */
@media (pointer: coarse) {
  input, select, textarea { font-size: var(--fs-input); }
}

/* DOS. El :hover en una pantalla tactil se queda pegado despues de
   tocar: el ultimo pais que tocaste sigue iluminado como si lo tuvieras
   el dedo encima, y parece elegido. Donde no hay puntero, no hay hover. */
@media (hover: none) {
  /* el botón vuelve a su reposo: el marco y el relleno de cada peso */
  .btn:hover { color: var(--oro-txt); background: linear-gradient(var(--gris-4), var(--gris-4)) padding-box, var(--marco) border-box; box-shadow: inset 0 0 2px var(--shade-strong); }
  .btn--primary:hover {
    color: var(--cian-1);
    background:
      radial-gradient(120% 95% at 50% 125%, color-mix(in srgb, var(--cian-2) 45%, transparent) 0%, transparent 70%) padding-box,
      linear-gradient(180deg, var(--cian-5) 0%, var(--cian-6) 100%) padding-box,
      var(--marco) border-box;
    box-shadow: 0 0 0 1px var(--bg), 0 0 18px -6px var(--glow-cian), inset 0 0 2px var(--shade-strong);
  }
  .btn--primary:hover::after { transform: translateX(-110%); transition: none; }
  .btn--ghost:hover { background: transparent; box-shadow: none; color: var(--txt-2); text-shadow: none; }
  .mode:hover { border-color: var(--line); transform: none; }
  .portada-modo:hover { transform: none; box-shadow: none; background: linear-gradient(180deg, var(--bg-2), var(--bg)) padding-box, var(--marco-apagado) border-box; }
  .portada-modo:hover .portada-modo__arte { opacity: .5; transform: none; }
  .hm-modo:hover { border-color: var(--line); background: linear-gradient(180deg, var(--bg-2), var(--bg)); transform: none; box-shadow: none; }
  .portada-modo:active, .hm-modo:active { transform: scale(.985); }
  .country:hover, .team-pick:hover, .champ:hover { background: transparent; }
  .champ:hover img { filter: grayscale(.55) brightness(.8); }
  .opt:hover { border-color: var(--line); background: var(--panel); transform: none; box-shadow: none; }
  .yr--played:hover { background: transparent; }
  .ver-partidos:hover { background: transparent; color: var(--muted); }
  .lang-select:hover { background-color: transparent; }
  .role-pin:hover { border-color: inherit; color: inherit; }

  /* y el estado de tocado se muestra al apretar, que es lo que si existe */
  .opt:active, .mode:active { transform: scale(.985); }
  .country:active, .team-pick:active, .champ:active { background: var(--panel-2); }
}

/* TRES. En iOS la barra del navegador aparece y desaparece, y 100vh mide
   siempre la pantalla CON la barra escondida: una ficha de alto 100vh
   queda cortada por abajo mientras la barra esta a la vista. `dvh` mide
   lo que de verdad se ve en cada momento. */
@supports (height: 100dvh) {
  body { min-height: 100dvh; }
  .tl__rows { max-height: calc(100dvh - 150px); }
  /* 🔴 Solo donde la ficha de verdad se queda fija. Sin el `min-width`
     esta regla volvia a ponerle un alto maximo en el telefono —donde ya
     la habiamos soltado— y la decision del turno quedaba dentro de un
     panel que scrollea adentro de la pagina, que es lo peor que le podes
     hacer a alguien con el dedo. */
  @media (min-width: 901px) {
    .career__side { max-height: calc(100dvh - 40px); }
  }
}

/* ---------- 10. pantallas con muesca ----------

   Acostado, la muesca y la barra de gestos se comen los bordes. */
#app, .legal {
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
}
.legal { padding-bottom: max(28px, env(safe-area-inset-bottom, 0px)); }

/* ---------- 11. cosas chicas que se cortaban ---------- */

/* el sobretitulo de una opcion ("Split 3 · 2031") no entraba en angosto */
.opt__kicker { overflow-wrap: anywhere; }

/* ---------- 12. lugar para la barra de idiomas ----------

   Vive fija arriba a la derecha para seguir ahi pase lo que pase. En
   escritorio sobra ancho y nunca molesta, pero en un telefono se apoyaba
   justo encima del titulo de la pantalla y de la ficha del jugador. Se le
   reserva el alto. */
@media (max-width: 760px) {
  #app { padding-top: 54px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  #app { padding-top: 44px; }
}

/* ---------- 13. comparar tres opciones con el dedo ----------

   En el telefono las opciones se apilan, y con el recuadro de color en su
   alto de escritorio la tercera carta queda fuera de la pantalla: para
   comparar hay que ir y volver con el scroll, que es lo contrario de lo
   que una decision de tres opciones necesita. Se achica el recuadro —que
   es decoracion— y se deja entero el texto, que es lo que se compara. */
@media (max-width: 560px) {
  .opt__art { height: 56px; }
  .opt__champ { width: 48px; height: 48px; }
  .opt__icono { width: 42px; height: 42px; }
  .opt { padding: 12px; }
}

@media (max-width: 380px) {
  .opt__art { height: 46px; }
  .opt__champ { width: 40px; height: 40px; }
  .opt__icono { width: 34px; height: 34px; }
}

/* ---------- 14. la copa en pantalla ----------

   El resplandor de atras mide 460px fijos: en un telefono de 320 se sale
   140px por cada lado. No genera scroll porque el cartel es `fixed`, pero
   el circulo queda cortado justo donde tiene que verse redondo. */
.cup-pop__rays {
  width: min(460px, 140vw);
  height: min(460px, 140vw);
  margin: calc(min(460px, 140vw) / -2) 0 0 calc(min(460px, 140vw) / -2);
}

/* ---------- 15. el inicio en el telefono ---------- */

/* la portada */
@media (max-width: 860px) {
  .portada-modos, .puestos { grid-template-columns: 1fr; }
  .puestos__cab { text-align: center; }
  .puestos__cab .portada-sec__bajada { margin-inline: auto; }
  .puestos__cab .sobretitulo::before { display: block; }
  .puestos__tabs { justify-content: center; }
}

@media (max-width: 560px) {
  .portada-heroe { min-height: 0; padding: var(--gap-6) 0 var(--gap-7); }
  .portada-heroe__sub { font-size: var(--fs-body); }
  .portada-heroe__cta { flex-direction: column; width: 100%; }
  .portada-heroe__cta .btn { width: 100%; min-width: 0; }
  .portada-heroe__baja { display: none; }
  .sobretitulo { letter-spacing: var(--ls-caps-wide); }
  .sobretitulo::before, .sobretitulo::after { width: 20px; }
  .portada-datos li { padding: 0 var(--gap-3); }
  .portada-datos b { font-size: var(--fs-xl); }
  .portada-sec { padding: var(--gap-6) 0; }
  .portada-modo { min-height: 0; padding-top: var(--gap-5); }
  .puestos__tabs { gap: var(--gap-2); }
  .puestos__tab { min-width: 58px; }
  .puestos__tab .medalla { width: 52px; height: 52px; }
  .puestos__nombre { font-size: var(--fs-xs); }
  .pasos { grid-template-columns: 1fr; gap: var(--gap-6); }
  .pasos::before { display: none; }
  .faq__q { padding: var(--gap-3) var(--gap-4); }
  .faq__a { padding: 0 var(--gap-4) var(--gap-3); }
}

/* las piezas que usa la carrera del día */
@media (max-width: 700px) {
  .hm-cards { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hm-hero { padding: 10px 0 22px; }
  .hm-hero__sub { font-size: var(--fs-body); }
  .hm-modo { padding: 16px; gap: 13px; }
  .hm-modo__icono { font-size: var(--ico-md); }
  .hm-modo__nombre { font-size: var(--fs-lg); }

  /* el boton de volver deja de flotar sobre el titulo: en angosto no hay
     margen a los costados donde apoyarlo */
  .btn--volver { position: static; margin-bottom: 14px; }
  .intro { text-align: center; }
  .btn--volver { display: inline-block; }
}

/* ---------- 16. el panel de informacion en el telefono ---------- */

@media (max-width: 560px) {
  .modal { padding: 0; place-items: stretch; }
  /* a pantalla completa: una caja flotante de 20px de margen en un
     telefono deja el texto en una columna demasiado angosta */
  .modal__caja {
    width: 100%;
    max-height: 100%;
    border-radius: 0;
    border: 0;
  }
  .modal__scroll { padding: 20px 16px 8px; }
  .modal__pie { padding: 12px 16px 18px; }
  .modal__pie .btn { width: 100%; }
  .hm-acciones { flex-direction: column; }
  .hm-accion { justify-content: center; }
}

/* ---------- 17. el cartel del paso 2 en el telefono ---------- */

@media (max-width: 560px) {
  /* a pantalla completa, como el resto de los carteles */
  .extras { padding: 0; place-items: stretch; }
  .extras__caja {
    width: 100%;
    max-height: 100%;
    border-radius: 0;
    border: 0;
  }
  .extras__head { padding: 18px 16px 14px; }
  .ex-sec__head { padding-right: 16px; padding-left: 8px; }
  .ex-sec__cuerpo { padding: 0 14px 16px; }
  .extras__foot { padding: 14px 16px 18px; }
  .extras__foot .btn { flex: 1 1 0; }
}