/* FB Games — portada. Todo el aspecto sale de shell.css y landing.css del juego (copiados tal cual por build.py);
   aquí solo va lo que el juego no tiene: la marca FB Games, las tarjetas de juegos y los tres pasos. */

/* Marca: mismo tratamiento del logotipo del juego (relleno amarillo, contorno rojo) */
.fb-wordmark { display: inline-flex; align-items: baseline; gap: 0.22em; font-size: 1.9rem; white-space: nowrap; }
.fb-wordmark small { font-size: 0.74em; letter-spacing: 0.03em; }
.fb-wordmark--foot { font-size: 1.7rem; flex: none; }
.se-brand:hover .fb-wordmark { filter: brightness(1.08); }
@media (max-width: 520px) {
  .fb-wordmark { font-size: 1.55rem; }
  .se-guest__links { display: none; }
}

/* Nuestros juegos: prado + pergamino, como los pasos de «Así se juega» */
.hub-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 54px 40px; margin-top: 64px; }
.hub-game { display: flex; flex-direction: column; min-width: 0; }
/* Altura fija del prado: así las tarjetas quedan alineadas aunque un sprite (el ayuntamiento) sea mucho más alto que otro (el cofre) */
.hub-game .lp-patch { height: 290px; min-height: 0; padding-bottom: 36px; }
.hub-game .lp-patch img { width: auto; max-width: 56%; max-height: 240px; }
.hub-game .lp-patch img.lp-px { width: auto; height: 74px; max-height: none; }
.hub-game .lp-note { margin-top: -4px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1; }
.hub-game .lp-note h3 { margin: 0; }
.hub-game .lp-note p { flex: 1; }
.hub-game .lp-note .se-btn { margin-top: 4px; }
.hub-badge { display: inline-block; padding: 3px 12px; border-radius: 99px; font: 700 0.82rem var(--f-num); letter-spacing: 0.02em; background: var(--ok); color: #fff; box-shadow: 0 2px 0 #36791f; }
.hub-badge--soon { background: var(--tinta-3); box-shadow: 0 2px 0 var(--tinta); color: var(--oro-claro); }
.hub-game--soon .lp-patch::before { background: radial-gradient(ellipse at 50% 40%, #a6c46a 0, #8fb050 60%, #7a9a40 100%); box-shadow: 0 8px 0 #5a7a2b, inset 0 0 0 3px rgba(255, 255, 255, 0.14); }
.hub-game--soon .lp-patch img { max-width: 40%; max-height: 120px; }

/* Cómo funciona: tres notas de pergamino sobre prado oscuro, con el medallón numerado del juego */
.hub-how { background: var(--pradera-honda) radial-gradient(rgba(255, 255, 255, 0.05) 2px, transparent 3px) 0 0 / 40px 40px; }
.hub-steps { list-style: none; counter-reset: paso; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 46px 28px; }
.hub-steps .lp-note { counter-increment: paso; padding-top: 34px; }
.hub-steps .lp-note::before {
  content: counter(paso); position: absolute; left: 22px; top: -24px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: var(--oro); border: 3px solid var(--oro-borde); color: #3b2300;
  font: 700 1.25rem/1 var(--f-num); box-shadow: 0 3px 0 var(--oro-borde), 0 0 0 5px var(--pradera-honda);
}

.lp-foot__in .fb-wordmark--foot { margin-right: 4px; }
@media (max-width: 760px) { .lp-foot__in .fb-wordmark--foot { margin: 0; } }