/* ==========================================================================
   El Camino DT — La vuelta olímpica
   --------------------------------------------------------------------------
   La segunda —y última— pantalla del juego que se pinta con los colores del
   club en vez de con la paleta de la casa. La otra es la bienvenida, y son las
   dos caras de lo mismo: el día que llegás y el día que ganás. Todo lo que hay
   en el medio vuelve a «pizarra y cal», que es lo que aguanta ocho horas de
   tabla.

   Comparte forma con la bienvenida a propósito —banda de color arriba, datos
   abajo, un botón— y NO comparte clases. Se pensó reusar `.saludo`: no se hizo
   porque las dos escenas quieren cosas distintas de la banda. La bienvenida
   presenta a un club y su dato grande es el nombre; ésta presenta un TÍTULO y
   su dato grande es el nombre del torneo, con el club debajo. Compartir clases
   habría dejado a la primera pagando por lo que necesita la segunda cada vez
   que una de las dos se toque.

   Los tres colores llegan como variables desde `vuelta.js`, ya elegidos por
   contraste. Acá no se decide ninguno — esta hoja sólo los coloca.
   ========================================================================== */

.vuelta {
  /* 680 Y NO 520. Con 520 el diálogo se leía como un aviso del sistema en el
     medio de una pantalla de 1760, y las dos notas de abajo —«apertura de tu
     carrera», «24 partidos · 37 goles»— se cortaban con puntos suspensivos. Es
     la escena más importante del juego y tiene que ocupar como tal; el resto de
     los diálogos se quedan donde estaban, que ninguno es esto. */
  width: min(680px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  color: var(--text-primary);
  overflow: hidden;
  box-shadow: var(--sombra-modal);
}

/* El velo va más oscuro que el de los otros diálogos y con más desenfoque. Es
   el único momento del juego en que lo de atrás no importa nada: detrás de una
   mesa de negociación está la tabla que hace falta consultar, y detrás de esto
   está un partido que ya terminó. */
.vuelta::backdrop {
  background: var(--velo);
  backdrop-filter: blur(4px);
}

/* --------------------------------------------------------------------------
   LA BANDA
   --------------------------------------------------------------------------
   El color del club a pantalla completa, con la franja diagonal del segundo
   color: es la forma en que una camiseta se reconoce de lejos, y es lo mismo
   que hace la bienvenida.

   Más alta que la de la bienvenida —y es la única diferencia de medida entre
   las dos— porque acá la banda ES la escena. Abajo hay tres cifras; arriba está
   lo que pasó.
   -------------------------------------------------------------------------- */

.vuelta__banda {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px 28px;
  color: var(--club-tinta);
  background:
    linear-gradient(115deg, transparent 58%, var(--club-franja) 58.4%, var(--club-franja) 72%, transparent 72.4%),
    linear-gradient(160deg, color-mix(in srgb, var(--club-fondo) 88%, white 12%), var(--club-fondo) 62%);
  /* La línea de cierre sale DEL COLOR DEL CLUB, oscurecido: un negro fijo
     funciona sobre el azul de Boca y se ve sucio sobre el celeste de Racing. */
  border-bottom: 1px solid color-mix(in srgb, var(--club-fondo) 55%, black);
}

.vuelta__escudo {
  width: 84px;
  height: 84px;
  --halo: 1.5px;
  object-fit: contain;
  flex: none;
  /* El escudo tiene que despegarse del fondo aunque compartan color: el celeste
     de Racing sobre celeste es un escudo que desaparece.
     El halo del rescate va DELANTE y se compone acá: `filter` no se suma. */
  filter: var(--halo-filtro, ) drop-shadow(0 3px 8px hsl(0 0% 0% / 0.45));
}

.vuelta__id { min-width: 0; }

.vuelta__eco {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0.78;
}

/* EL NOMBRE DEL TORNEO ES EL DATO GRANDE, y es lo que separa esta escena de la
   bienvenida. Ahí el titular es el club porque lo que pasó es que llegaste
   acá; acá el titular es el título porque el club ya se sabe.

   Condensada y ajustada: «Copa Libertadores» y «Supercopa Argentina» tienen que
   entrar en un renglón sobre un diálogo de 680, y partidos en dos pierden el
   golpe. */
.vuelta__titulo {
  margin: 4px 0 3px;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  font-weight: 700;
  font-stretch: var(--wd-condensed);
  letter-spacing: -0.015em;
}

.vuelta__club { font-size: var(--fs-lg); opacity: 0.88; }

/* La marca del torneo sobre un plato claro, igual que el logo de la liga en la
   bienvenida y por el mismo motivo: los logos de división y los trofeos son
   dibujos oscuros, y sobre el rojo de Independiente o el bordó de Lanús
   desaparecen. Un logo que sólo se ve en la mitad de los clubes es peor que no
   ponerlo. */
.vuelta__marca {
  width: 54px;
  height: 54px;
  object-fit: contain;
  margin-left: auto;
  flex: none;
  padding: 6px;
  border-radius: var(--r-pill);
  background: var(--ink-100);
  box-sizing: content-box;
}

/* --------------------------------------------------------------------------
   LOS DATOS
   --------------------------------------------------------------------------
   Tres, y los tres salen de lo que la carrera ya sabe: cuántos de éste llevás,
   quién hizo los goles y cómo fue la campaña. Ninguno se inventa.

   SON TRES O SON DOS. Un plantel sin goleador y una campaña sin partidos son
   estados posibles, y `vuelta.js` no dibuja la tarjeta que no tiene dato: tres
   cajas con un guion adentro se leen como una pantalla que no cargó. Por eso la
   retícula es `auto-fit` y no `repeat(3)` — acá el número de columnas SÍ
   depende de cuántas hay, que es lo contrario de la vitrina.
   -------------------------------------------------------------------------- */

.vuelta__cuerpo { padding: 22px 28px 8px; }

.vuelta__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-hairline);
  border: 1px solid var(--line-hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}

.vuelta__dato {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 15px 18px;
  background: var(--bg-row);
  min-width: 0;
}

.vuelta__valor {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}

.vuelta__label {
  font-size: var(--fs-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.vuelta__nota {
  font-size: var(--fs-sm);
  color: var(--text-disabled);
  /* Las notas apoyan en el mismo piso pase lo que pase arriba, y los nombres
     largos se cortan con puntos en vez de ensanchar su columna. */
  margin-top: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vuelta__pie {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-4);
  padding: 20px 28px 24px;
}

/* --------------------------------------------------------------------------
   PANTALLA CHICA
   -------------------------------------------------------------------------- */

@media (max-width: 460px) {
  .vuelta__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vuelta__titulo { font-size: var(--fs-xl); }
  .vuelta__escudo { width: 52px; height: 52px; --halo: 0.94px; }
  .vuelta__banda { padding: 18px 16px; gap: 12px; }
  .vuelta__pie .action { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   LA ENTRADA
   --------------------------------------------------------------------------
   Sube desde abajo y crece un pelo, como el resto de los diálogos, pero más
   lento y desde más lejos: 320 ms contra 220 y ocho píxeles más de recorrido.
   Es la única animación del juego que se permite durar, y dura porque este
   diálogo aparece una vez por título y no seis veces por mercado.

   Quien pidió que no se mueva nada, que no se mueva nada.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .vuelta[open] { animation: vuelta-entra 320ms var(--ease); }
  @keyframes vuelta-entra {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }
}