/* social&games band: the sister studio, announced right after the team. Flat
   yellow from socialygames.es and its pixel characters strolling on a street,
   the same sprite sheets and frame animation that site uses. */
.games-band {
  --games-yellow: #ffd23f;
  --games-ink: #14141c;
  background: var(--games-yellow);
  color: var(--games-ink);
  /* Below, room for the dome of the next section to rise into the band. */
  padding-block: 30px calc(70px + var(--curve-h));
}
/* A dome, like the one this band replaces under the team: it is what covers
   the foot of the team scene at every width (see team.css). */
.games-band.curve-top { --curve-fill: var(--games-yellow); }

.games-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 50px; align-items: end; }
.games-logo { display: block; width: 147px; height: auto; margin-bottom: 26px; image-rendering: pixelated; }
.games-band .eyebrow { margin-bottom: 16px; }
.games-band h2 .handwritten { color: var(--pink-dark); }
.games-text { font-size: 18px; max-width: 470px; margin: 22px 0 30px; }

/* The street. --px is the size of one pixel of the drawing. */
.games-street { --px: 3px; position: relative; height: calc(var(--px) * 32 + 70px); }
@media (min-width: 900px) { .games-street { --px: 4px; } }
.games-street::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: var(--px);
  background: repeating-linear-gradient(90deg, rgb(20 20 28 / .22) 0 calc(var(--px) * 4), transparent 0 calc(var(--px) * 6));
}

.gm-muneco {
  position: absolute;
  left: 0;
  bottom: 8px;
  width: calc(var(--px) * 16);
  height: calc(var(--px) * 32);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
/* The sheet: 6 frames per row and 8 rows (standing, walking each way…). */
.gm-hoja {
  display: block;
  width: 100%;
  height: 100%;
  background-image: var(--hoja);
  background-size: calc(var(--px) * 96) calc(var(--px) * 256);
  background-position: 0 calc(var(--px) * -32 * var(--fila, 0));
  image-rendering: pixelated;
  animation: gmFrames var(--ritmo, 1.2s) steps(6) infinite;
}
@keyframes gmFrames { to { background-position-x: calc(var(--px) * -96); } }
.gm-muneco.is-jumping .gm-hoja { animation: gmFrames var(--ritmo, 1.2s) steps(6) infinite, gmJump .42s steps(6); }
@keyframes gmJump { 50% { transform: translateY(calc(var(--px) * -5)); } }
/* Shadow at the feet. */
.gm-muneco::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: calc(var(--px) * .5);
  height: calc(var(--px) * 2);
  background: rgb(20 20 28 / .16);
  z-index: -1;
}

.gm-bubble {
  position: absolute;
  left: 0;
  z-index: 2;
  width: max-content;
  max-width: min(260px, 80vw);
  padding: 9px 12px 8px;
  background: #fff;
  color: var(--games-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 -3px 0 var(--games-ink), 0 3px 0 var(--games-ink), -3px 0 0 var(--games-ink), 3px 0 0 var(--games-ink);
  pointer-events: none;
}

@media (max-width: 800px) {
  .games-inner { grid-template-columns: 1fr; gap: 10px; }
  .games-text { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-hoja { animation: none !important; }
}