/* ELSEWHERE · /es/ only. Spanish runs about a fifth longer than English: these are the few places where it needs room
   the English doesn't. Everything else comes from /landing.css. */

/* the hero's kicker ("Un juego de enigmas con tu cámara") stays on one line on phones: a little less tracking and shorter
   rules either side; on the narrowest screens the rules step aside. If it ever wraps (a larger text size), it wraps
   balanced. */
.kicker-cat { text-wrap: balance; }
@media (max-aspect-ratio: 1/1) {
  .kicker-cat { text-align: center; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 479px) {
  .kicker-cat { gap: 8px; letter-spacing: .14em; }
  .kicker-cat::before, .kicker-cat::after { width: 18px; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 359px) {
  .kicker-cat::before, .kicker-cat::after { display: none; }
}

/* the sticky bar: "Juega la beta" waits until "Recibe tu invitación", Sonido and EN / ES have their room (on phones,
   landing.css makes the room for the invite, the same lockup as the English page) */
@media (min-width: 640px) and (max-width: 679px) {
  .bar-link { display: none; }
}

/* I · "5 rollos" under the shutter, in the same width as the thumbnail across from it */
.snap-film { letter-spacing: .1em; }

/* II · all six found: in a narrow frame the line goes over the button (each on one line) instead of beside it */
.find-photo { container-type: inline-size; }
@container (max-width: 393px) {
  .find-next { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
  .find-next.is-quiet { align-items: center; }
}

/* the Hollow Moon on phones: "Días restantes" goes on two lines under the number, so the copy keeps its width */
@media (max-width: 719px) {
  .event-count span { max-width: 8em; text-wrap: balance; }
}

/* Strays: the realm over the place it came from, each on its own line ("Ciudad de los Faroles" fills the row alone) */
.card-row { flex-direction: column; align-items: flex-start; gap: 5px; }
.card-from { max-width: 100%; text-align: left; }
@media (min-width: 700px) and (max-width: 899px) {
  .card-realm { letter-spacing: .1em; }
}

/* the tales: the chapter buttons show only their numerals until the seven Spanish names fit one row (landing.css does
   the same below 1280 px for the English) */
@media (max-width: 1365px) {
  .tale-to-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .tale-to { justify-content: center; min-width: 46px; padding: 0 8px; }
  .tale-to-no { font-size: 15px; }
}