/* GENERADO POR app/js/build-css.mjs DESDE css/catalog.css. NO EDITAR A MANO.
   Respaldos rgb() de cada oklch() y top/right/bottom/left de cada inset
   para navegadores de TV con motores viejos. */
/* Catalogo de Feud Room: la portada del sitio.
   Mismo mundo Marquee que el juego. La marquesina con el nombre es la pieza
   protagonista; el resto vive en la penumbra del ladrillo, como la cartelera
   de horarios de un cine de barrio: filas oscuras con letra clara, y el panel
   iluminado reservado para lo que esta "en cartel" (el proximo festivo). */

body.catalog {
  min-height: 100vh;
}

body.catalog > * {
  position: relative;
  z-index: 1;
}

.top,
main,
.foot {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}

/* ------------------------------------------------------------- portada */

.top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-6);
}

.sign {
  position: relative;
  justify-self: start;
}

.sign-panel {
  display: grid;
  gap: 10px;
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  background: linear-gradient(180deg, rgba(108, 77, 60, 0.16), transparent 30px),
    var(--panel);
  border: 14px solid var(--marco);
  box-shadow: inset 0 0 0 1px var(--marco-lo),
    0 0 90px -20px rgba(252, 209, 118, 0.35),
    0 30px 70px -36px rgb(3, 1, 1);
}
@supports (color: oklch(0% 0 0)) {
.sign-panel {
  background:
    linear-gradient(180deg, oklch(45% 0.05 50 / 0.16), transparent 30px),
    var(--panel);
  border: 14px solid var(--marco);
  box-shadow:
    inset 0 0 0 1px var(--marco-lo),
    0 0 90px -20px oklch(88% 0.12 85 / 0.35),
    0 30px 70px -36px oklch(8% 0.01 30);
}
}

/* Letras de plastico negras colgadas del riel, una por placa. */
.tiles {
  display: flex;
  gap: 6px;
}

.tiles i {
  display: grid;
  place-items: center;
  width: clamp(54px, 7.4vw, 92px);
  height: clamp(66px, 9vw, 112px);
  background: rgb(251, 245, 229);
  background: oklch(97% 0.022 90);
  border-bottom: 3px solid var(--panel-deep);
  color: var(--letra);
  font-style: normal;
  font-size: clamp(46px, 6.4vw, 82px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 0 rgba(108, 77, 60, 0.18);
  box-shadow: 0 2px 0 oklch(45% 0.05 50 / 0.18);
}

.tiles:nth-child(2) {
  padding-left: clamp(30px, 4vw, 52px);
}

.sign-bulbs {
  position: absolute;
  left: 14px;
  right: 14px;
  top: -5px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.sign-bulbs i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(212, 186, 138);
  background: oklch(80% 0.07 82);
  animation: run 3.6s linear infinite;
  animation-delay: calc(var(--i) * 170ms);
}

@keyframes run {
  0%,
  22%,
  100% {
    background: rgb(212, 186, 138);
    background: oklch(80% 0.07 82);
    box-shadow: none;
  }
  7% {
    background: rgb(255, 227, 124);
    background: oklch(93% 0.13 88);
    box-shadow: 0 0 9px rgba(252, 209, 118, 0.9);
    box-shadow: 0 0 9px oklch(88% 0.12 85 / 0.9);
  }
}

.sign-sub {
  margin: var(--sp-3) 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--foco);
}

.pitch h1 {
  margin: 0 0 var(--sp-3);
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.032em;
  color: var(--ink);
  text-wrap: balance;
}

.pitch p {
  margin: 0 0 var(--sp-4);
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-dim);
  text-wrap: pretty;
}

.pitch-go {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.pitch-go .btn {
  min-height: 56px;
  padding: 0 var(--sp-4);
  font-size: 16px;
  text-decoration: none;
}

/* ------------------------------------------------------ en cartel: proximo */

.now {
  margin-bottom: var(--sp-7);
}

.now-frame {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  border: 10px solid var(--marco);
  box-shadow: inset 0 0 0 1px var(--marco-lo);
  background: var(--surface);
}

.now-panel {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  background: linear-gradient(180deg, rgba(108, 77, 60, 0.16), transparent 26px),
    var(--panel);
  color: var(--letra);
}
@supports (color: oklch(0% 0 0)) {
.now-panel {
  background:
    linear-gradient(180deg, oklch(45% 0.05 50 / 0.16), transparent 26px),
    var(--panel);
  color: var(--letra);
}
}

.now-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--sp-4);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--letra-soft);
}

.now-date {
  margin-left: auto;
  letter-spacing: 0.04em;
}

.now-title {
  margin: 0;
  /* "Thanksgiving" son 12 letras: el tamano se calcula para que quepa. */
  font-size: clamp(34px, 4.4vw, 64px);
  font-weight: 700;
  line-height: 0.92;
  overflow-wrap: anywhere;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

.now-count {
  display: inline-block;
  margin: var(--sp-4) 0 0;
  padding: 6px 12px;
  background: var(--letra);
  color: var(--foco);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.now-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4);
}

.now-side p {
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}

/* ---------------------------------------------------- la cartelera completa */

.sec-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--hairline);
}

.sec-head h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.sec-count {
  margin: 0;
  font-size: 14px;
  color: var(--ink-faint);
}

.games {
  margin-bottom: var(--sp-7);
}

.group + .group {
  margin-top: var(--sp-6);
}

.group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--sp-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--foco);
}

.group-title .num {
  color: var(--ink-faint);
}

.rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-bottom: 1px solid var(--hairline-soft);
  scroll-margin-top: var(--sp-6);
  transition: background-color var(--t-ui) linear;
}

.row h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.row p {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-dim);
}

.row-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.row-go .btn {
  min-height: 44px;
  text-decoration: none;
  font-size: 14px;
}

.row-go .price {
  margin-left: 2px;
  opacity: 0.8;
}

.soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--sp-2);
  font-size: 14px;
  color: var(--ink-faint);
}

/* La ficha a la que llega el QR del final de la demo: se ilumina como el panel. */
.row.picked {
  padding-left: var(--sp-3);
  background: var(--panel);
  border-bottom-color: transparent;
}

.row.picked h3 {
  color: var(--letra);
}

.row.picked p,
.row.picked .soon {
  color: var(--letra-soft);
}

.row.picked .btn:not(.btn-key) {
  background: rgb(251, 245, 229);
  background: oklch(97% 0.022 90);
  border-color: var(--panel-deep);
  color: var(--letra);
}

.notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  font-size: 14px;
  color: var(--ink-dim);
}

.notice .ico {
  color: var(--oro);
}

/* Mientras carga no se pinta ningun juego ni precio. */
.skeleton-row {
  height: 72px;
  border-bottom: 1px solid var(--hairline-soft);
  background: linear-gradient(90deg, var(--surface) 0 38%, transparent 38%);
  background-size: 100% 22px;
  background-repeat: no-repeat;
  background-position: 0 25px;
  opacity: 0.8;
}

/* ------------------------------------------------------------ como se juega */

.how {
  margin-bottom: var(--sp-6);
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
}

.how-steps li {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-dim);
}

.how-steps .ico {
  color: var(--foco);
  margin-bottom: var(--sp-1);
}

.how-steps b {
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.addr {
  color: var(--foco);
  white-space: nowrap;
}

.how-note {
  max-width: 70ch;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-dim);
}

.how-note b {
  color: var(--ink);
}

.foot {
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-6);
  font-size: 13px;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------- entrada */

.rise {
  animation: rise 250ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.rows .rise {
  animation-delay: calc(240ms + var(--i, 0) * 30ms);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* --------------------------------------------------------------- tamanos */

@media (max-width: 960px) {
  .top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-5);
  }
  .now-frame {
    grid-template-columns: minmax(0, 1fr);
  }
  .now-title {
    font-size: clamp(32px, 9vw, 64px);
  }
  .how-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }
}

@media (max-width: 720px) {
  .top,
  main,
  .foot {
    padding-left: 16px;
    padding-right: 16px;
  }
  .sign-panel {
    border-width: 10px;
    padding: var(--sp-3) var(--sp-3) var(--sp-4);
  }
  .row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
  }
  .now-panel {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
  }
  .now-side {
    padding: var(--sp-4);
  }
  .now {
    margin-bottom: var(--sp-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sign-bulbs i {
    animation: none;
    background: rgb(247, 210, 137);
    background: oklch(88% 0.1 84);
  }
}