/* extras.css — la galería de fotos y el marcador del torneo.
   Comparten cabecera con la constelación, así que el encabezado de sección
   vive aquí y lo usan las tres. */

.galeria,
.marcador{
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto 72px;
}
.seccion-cabecera{
  text-align: center;
  margin-bottom: 22px;
}
.seccion-cabecera h2{
  font: 400 clamp(2rem, 6vw, 2.9rem)/1.1 'Patrick Hand', cursive;
  color: var(--lavender);
  margin: 0 0 8px;
}
/* La raya naranja bajo cada título de sección es lo que las hace parecer
   parte de la misma web y no tres bloques pegados. */
.seccion-cabecera h2::after,
.constelacion h2::after{
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--naranja), transparent);
}
.seccion-nota{
  margin: 0 auto;
  max-width: 52ch;
  color: var(--muted);
  font-size: .98rem;
}

/* ── La galería ─────────────────────────────────────────────────────────── */

.galeria-rejilla{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.galeria-foto{
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  line-height: 0;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.galeria-foto img{
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.galeria-foto:hover{
  transform: translateY(-4px);
  border-color: var(--naranja);
  box-shadow: 0 8px 0 #00000066, 0 0 22px #ff9a4d3d;
}
.galeria-foto:focus-visible{
  outline: 3px solid var(--cream);
  outline-offset: 4px;
}

/* La vista grande no lleva el relleno de los demás diálogos: la foto manda. */
.modern dialog.foto-dialog{
  width: min(860px, calc(100% - 32px));
  padding: 16px;
}
.modern .foto-dialog img{
  display: block;
  width: 100%;
  max-height: min(70dvh, 620px);
  object-fit: contain;
  border-radius: 18px;
  background: #000;
}
.modern .foto-barra{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
}
.modern .foto-paso{
  min-width: 52px;
  min-height: 44px;
  border: 1px solid #d3c5a377;
  border-radius: 12px;
  background: #362c1b;
  color: #f5dfbd;
  font-size: 1.2rem;
}
.modern .foto-paso:hover{ background: #50422a; border-color: var(--naranja); color: var(--naranja); }
.modern .foto-paso:focus-visible{ outline: 3px solid var(--cream); outline-offset: 3px; }
.modern .foto-cuenta{ min-width: 6.5ch; text-align: center; color: #c2b18c; font-size: .8em; }

/* ── El marcador ────────────────────────────────────────────────────────── */

.marcador-lista{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.marcador-fila{
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.marcador-juego{
  font: 400 1.25rem/1.2 'Patrick Hand', cursive;
  color: var(--text);
}
.marcador-lado{
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 5.5rem;
  padding: 4px 10px;
  border-radius: 12px;
}
.marcador-lado small{ font-size: .7rem; color: var(--muted); }
.marcador-lado b{
  font: 400 1.35rem/1 'Patrick Hand', cursive;
  color: var(--muted);
}
/* Quien gana ese juego se queda con su color; el otro se apaga. Así el
   marcador se lee de un vistazo sin tener que comparar cifras. */
.marcador-gana.marcador-celin b{ color: var(--rosa); }
.marcador-gana.marcador-celin{ background: #ffc2d614; }
.marcador-gana.marcador-christian b{ color: var(--lavender); }
.marcador-gana.marcador-christian{ background: #ffe9a814; }

@media (max-width: 760px){
  .galeria, .marcador{ width: calc(100% - 32px); }
  .galeria-rejilla{ grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .marcador-fila{
    grid-template-columns: 1fr 1fr;
    row-gap: 10px;
    padding: 14px 16px;
  }
  .marcador-juego{ grid-column: 1 / -1; }
  .marcador-lado{ justify-items: start; min-width: 0; }
  .marcador-christian{ justify-items: end; }
}

/* ── El listón de la nave ───────────────────────────────────────────────── */
/* La nave cruza de derecha a izquierda, así que el cartel va enganchado por
   detrás, o sea a su derecha. Cuelga de .flight-bob y no de .flight-flip
   para que no dé la voltereta con ella: un cartel del revés no se lee. */

.modern .flight-bob{ position: relative; }
.modern .flight-liston{
  position: absolute;
  left: calc(100% - 16px);
  top: 30px;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.modern .flight-liston-cuerda{
  flex-shrink: 0;
  width: 26px;
  height: 2px;
  background: repeating-linear-gradient(90deg, #ffe9a8 0 5px, transparent 5px 9px);
}
.modern .flight-liston-tela{
  white-space: nowrap;
  padding: 10px 26px 10px 18px;
  font: 400 1.1rem/1.2 'Patrick Hand', cursive;
  color: #2b1d08;
  background: linear-gradient(118deg, var(--naranja), var(--lavender) 62%, var(--rosa));
  box-shadow: 0 3px 0 #0000006b;
  /* La muesca de la punta es lo que lo hace un listón y no una etiqueta. */
  clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 50%, 100% 100%, 0 100%);
  transform-origin: 0 50%;
}
.modern.motion-on .flight-scene.in-view .flight-liston-tela{
  animation: liston-ondea 2.6s ease-in-out infinite;
}
@keyframes liston-ondea{
  0%, 100%{ transform: rotate(-1.6deg) translateY(1px); }
  50%{ transform: rotate(1.6deg) translateY(-3px); }
}
@media (max-width: 760px){
  .modern .flight-liston{ top: 22px; left: calc(100% - 20px); }
  .modern .flight-liston-cuerda{ width: 16px; }
  .modern .flight-liston-tela{
    /* En el móvil no cabe de una línea: se parte y deja de ser un listón
       largo para ser un cartelito, que ahí se lee mejor. */
    white-space: normal;
    max-width: 52vw;
    padding: 8px 18px 8px 14px;
    font-size: .95rem;
    clip-path: none;
    border-radius: 6px;
  }
}
@media (prefers-reduced-motion: reduce){
  .modern.motion-on .flight-scene.in-view .flight-liston-tela{ animation: none; }
}