/* ========================================================================== */
/* ======================= START GAMES SECTION — SEND THIS =================== */
/* ========================================================================== */

.section__content--games {
  position: relative;
  width: min(100%, 1580px);
  height: 100%;
  margin: 0 auto;
  padding:
    clamp(82px, 7vh, 108px)
    clamp(22px, 2vw, 34px)
    clamp(82px, 7vh, 108px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none;
  box-sizing: border-box;
}

.games-showcase {
  position: relative;
  width: 100%;
  height: min(74vh, 760px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 38px);
  align-items: center;
  justify-items: center;
  perspective: 1400px;
}

.games-showcase::before {
  content: "";
  position: absolute;
  inset: 4% 2%;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05), transparent 28%),
    radial-gradient(circle at 18% 48%, rgba(221,114,255,0.16), transparent 34%),
    radial-gradient(circle at 82% 52%, rgba(98,195,255,0.14), transparent 34%);
  filter: blur(34px);
  opacity: 0.9;
}

.game-card {
  --game-main-rgb: 221, 114, 255;
  --game-secondary-rgb: 98, 195, 255;
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 3 / 4;
  z-index: 2;
  border-radius: clamp(20px, 1.5vw, 28px);
  transform-style: preserve-3d;
  transform-origin: center center;
  transition:
    transform 760ms cubic-bezier(.22,1,.36,1),
    filter 620ms ease,
    opacity 620ms ease;
}

.game-card--1 {
  --game-main-rgb: 221, 114, 255;
  --game-secondary-rgb: 98, 195, 255;
}

.game-card--2 {
  --game-main-rgb: 255, 216, 77;
  --game-secondary-rgb: 255, 104, 204;
}

.game-card--3 {
  --game-main-rgb: 116, 255, 120;
  --game-secondary-rgb: 98, 195, 255;
}

.game-card:hover {
  z-index: 8;
  filter: brightness(1.1);
}

.game-card--1:hover {
  transform: translateY(-12px) rotateX(3deg) rotateY(7deg) scale(1.15);
}

.game-card--2:hover {
  transform: translateY(-12px) rotateX(3deg) scale(1.15);
}

.game-card--3:hover {
  transform: translateY(-12px) rotateX(3deg) rotateY(-7deg) scale(1.15);
}

.games-showcase:has(.game-card:hover) .game-card:not(:hover) {
  filter: brightness(0.46) blur(5px) saturate(0.72);
  transform: scale(0.96);
}

.game-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: clamp(14px, 1.1vw, 20px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(12px, 1vw, 16px);
  border-radius: inherit;
  border: 1px solid rgba(var(--game-main-rgb), 0.28);
  background:
    linear-gradient(180deg, rgba(10,16,32,0.92), rgba(4,8,17,0.96)),
    radial-gradient(circle at 50% 0%, rgba(var(--game-main-rgb), 0.18), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(var(--game-secondary-rgb), 0.12), transparent 44%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.035) inset,
    0 0 26px rgba(0,0,0,0.34),
    0 0 46px rgba(var(--game-main-rgb), 0.15);
  overflow: hidden;
  transition:
    box-shadow 420ms cubic-bezier(.22,1,.36,1),
    border-color 320ms ease;
}

.game-card__inner::before,
.game-card__inner::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.game-card__inner::before {
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.07), transparent 24%, transparent 72%, rgba(255,255,255,0.04)),
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.025) 0px,
      rgba(255,255,255,0.025) 1px,
      transparent 1px,
      transparent 7px
    );
  opacity: 0.58;
  mix-blend-mode: screen;
}

.game-card__inner::after {
  inset: 0;
  z-index: 8;
  padding: 1.5px;
  opacity: 0;

  background:
    conic-gradient(
      from var(--game-border-angle, 0deg),

      transparent 0deg,
      transparent 34deg,

      rgba(var(--game-main-rgb), 0.95) 64deg,
      rgba(255,255,255,0.98) 78deg,
      rgba(var(--game-secondary-rgb), 0.90) 96deg,

      transparent 126deg,
      transparent 214deg,

      rgba(var(--game-main-rgb), 0.95) 244deg,
      rgba(255,255,255,0.98) 258deg,
      rgba(var(--game-secondary-rgb), 0.90) 276deg,

      transparent 306deg,
      transparent 360deg
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;

  filter:
    drop-shadow(0 0 6px rgba(var(--game-main-rgb), 0.36))
    drop-shadow(0 0 14px rgba(var(--game-secondary-rgb), 0.22));
}

.game-card:hover .game-card__inner::after {
  opacity: 1;
  animation:
    gameBorderRotate 2.4s linear infinite,
    gameBorderPulse 1.8s ease-in-out infinite;
}

.game-card__head {
  position: relative;
  z-index: 5;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.game-card__kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.42em 0.9em 0.34em;
  border-radius: 999px;
  border: 1px solid rgba(var(--game-main-rgb), 0.32);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025)),
    radial-gradient(circle at 50% 50%, rgba(var(--game-main-rgb), 0.16), transparent 78%);
  font-family: "Orbitron", sans-serif;
  font-size: clamp(0.48rem, 0.46vw + 0.1vh, 0.72rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(241,246,255,0.88);
  box-shadow:
    0 0 10px rgba(var(--game-main-rgb), 0.12),
    inset 0 0 8px rgba(255,255,255,0.035);
}

.game-card__title {
  margin: 14px 0 0;
  font-family: "Space Age", "Orbitron", sans-serif;
  font-size: clamp(1.28rem, 1.45vw, 2.1rem);
  line-height: 0.9;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #eef6ff;
  text-shadow:
    0 0 5px rgba(255,255,255,0.68),
    0 0 16px rgba(var(--game-main-rgb), 0.46),
    0 0 28px rgba(var(--game-secondary-rgb), 0.22);
}

.game-card__subtitle {
  width: min(100%, 300px);
  margin: 10px auto 0;
  font-size: clamp(0.88rem, 0.62vw + 0.18vh, 1.06rem);
  line-height: 1.22;
  color: rgba(224,232,245,0.88);
  text-shadow: 0 0 14px rgba(0,0,0,0.36);
}

.game-card__image-zone {
  position: relative;
  z-index: 4;
  min-height: 0;
  border-radius: clamp(16px, 1.1vw, 22px);
  border: 1px solid rgba(var(--game-secondary-rgb), 0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)),
    radial-gradient(circle at 50% 50%, rgba(var(--game-main-rgb), 0.10), transparent 64%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.025),
    0 0 22px rgba(0,0,0,0.28),
    0 0 34px rgba(var(--game-main-rgb), 0.10);
  overflow: hidden;
  isolation: isolate;
}
/* ==================== GAMES — IMAGE ZONE CINEMATIC VIGNETTE ==================== */

.game-card__image-zone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255,255,255,0.08) 0%,
      rgba(var(--game-main-rgb), 0.08) 18%,
      rgba(0,0,0,0.04) 34%,
      rgba(0,0,0,0.42) 66%,
      rgba(0,0,0,0.86) 100%
    ),
    radial-gradient(
      ellipse at 50% 50%,
      transparent 0%,
      transparent 42%,
      rgba(0,0,0,0.46) 76%,
      rgba(0,0,0,0.92) 100%
    );

  mix-blend-mode: multiply;
  opacity: 0.92;
  transition:
    opacity 420ms ease,
    filter 420ms ease;
}

.game-card:hover .game-card__image-zone::after {
  opacity: 0.72;
  filter: brightness(1.08);
}
/* ==================== GAMES — PNG LOGO PRESENCE PRO SOFT ==================== */

.game-card__image-zone {
  --logo-glow-rgb: var(--game-main-rgb);
}

/* Halo central suave detrás del PNG */
.game-card__image-zone::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  border-radius: 999px;

  background:
    radial-gradient(circle,
      rgba(255,255,255,0.06) 0%,
      rgba(var(--logo-glow-rgb), 0.08) 18%,
      rgba(var(--logo-glow-rgb), 0.03) 38%,
      transparent 70%
    );

  filter: blur(28px);
  opacity: 0.45;
}

/* Imagen normal tarjeta 2 */
.game-card__img {
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,0.6))
    drop-shadow(0 0 8px rgba(var(--logo-glow-rgb), 0.35))
    drop-shadow(0 0 18px rgba(var(--logo-glow-rgb), 0.18));
}

/* Imágenes de galería tarjetas 1 y 3 */
.games-gallery__img {
  z-index: 1;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,0.6))
    drop-shadow(0 0 8px rgba(var(--logo-glow-rgb), 0.35))
    drop-shadow(0 0 18px rgba(var(--logo-glow-rgb), 0.18));
}

/* Hover suave y elegante */
.game-card:hover .game-card__img,
.game-card:hover .games-gallery__img.is-active {
  transform: translate(-50%, -50%) scale(1.03);

  filter:
    drop-shadow(0 0 3px rgba(255,255,255,0.85))
    drop-shadow(0 0 12px rgba(var(--logo-glow-rgb), 0.45))
    drop-shadow(0 0 26px rgba(var(--logo-glow-rgb), 0.25));
}
/* Imagen normal: SOLO tarjeta 2 */
.game-card__img {
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  z-index: 1;

  width: 50%;
  max-width: 50%;
  height: auto;
  max-height: 100%;

  object-fit: contain;
  object-position: center;

  opacity: 0.95;
  transform: translate(-50%, -50%) scale(1.08);
  filter:
    brightness(0.62)
    saturate(0.96)
    contrast(1.08)
    blur(3px);
  transition:
    transform 820ms cubic-bezier(.22,1,.36,1),
    filter 620ms ease,
    opacity 420ms ease;
}

.game-card:hover .game-card__img {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter:
    brightness(1)
    saturate(1.05)
    contrast(1.04)
    blur(0);
}

/* Galerías: SOLO tarjetas 1 y 3 */
.games-gallery {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.games-gallery__img {
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;

  width: 50%;
  max-width: 50%;
  height: auto;
  max-height: 100%;

  object-fit: contain;
  object-position: center;

  opacity: 0;
  transform: translate(-50%, -50%) scale(1.08);
  filter: blur(8px) brightness(0.65);

  transition:
    opacity 360ms ease,
    transform 900ms cubic-bezier(.22,1,.36,1),
    filter 520ms ease;
}

.games-gallery__img.is-active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0) brightness(1);
}

/* ==================== SPACE STATION DOOR SYSTEM ==================== */

.game-door {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: 50%;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(12,18,34,0.98), rgba(5,9,18,0.99)),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.055) 0px,
      rgba(255,255,255,0.055) 1px,
      transparent 1px,
      transparent 18px
    ),
    radial-gradient(circle at 50% 50%, rgba(var(--game-main-rgb), 0.16), transparent 72%);
  box-shadow:
    inset 0 0 24px rgba(0,0,0,0.58),
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 18px rgba(var(--game-main-rgb), 0.10);
  transition:
    transform 820ms cubic-bezier(.16,.84,.22,1),
    filter 420ms ease,
    box-shadow 420ms ease;
  will-change: transform;
}

.game-door::before,
.game-door::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.game-door::before {
  inset: 8px;
  border: 1px solid rgba(var(--game-secondary-rgb), 0.18);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04), transparent 36%, rgba(255,255,255,0.025)),
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 22px,
      rgba(var(--game-main-rgb), 0.10) 23px,
      transparent 24px
    );
  clip-path: polygon(0 0, 88% 0, 100% 10%, 100% 90%, 88% 100%, 0 100%);
}

.game-door::after {
  top: 0;
  bottom: 0;
  width: 2px;
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(var(--game-main-rgb), 0.58) 22%,
      rgba(255,255,255,0.9) 50%,
      rgba(var(--game-secondary-rgb), 0.58) 78%,
      transparent 100%
    );
  box-shadow:
    0 0 8px rgba(var(--game-main-rgb), 0.62),
    0 0 18px rgba(var(--game-secondary-rgb), 0.28);
  opacity: 0.8;
  transition:
    opacity 420ms ease,
    filter 420ms ease;
}

.game-door--left {
  left: 0;
  transform-origin: left center;
  border-right: 1px solid rgba(var(--game-main-rgb), 0.44);
}

.game-door--left::after {
  right: 0;
}

.game-door--right {
  right: 0;
  transform-origin: right center;
  border-left: 1px solid rgba(var(--game-main-rgb), 0.44);
}

.game-door--right::after {
  left: 0;
}

.game-door--right::before {
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 90%, 0 10%);
}

.game-door__panel-line {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background:
    linear-gradient(90deg, transparent, rgba(var(--game-secondary-rgb),0.72), rgba(255,255,255,0.75), rgba(var(--game-main-rgb),0.72), transparent);
  box-shadow:
    0 0 8px rgba(var(--game-secondary-rgb),0.32),
    0 0 16px rgba(var(--game-main-rgb),0.18);
}

.game-door__lock {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 58px;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 1px solid rgba(var(--game-main-rgb), 0.48);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.03)),
    radial-gradient(circle at 50% 50%, rgba(var(--game-main-rgb), 0.32), transparent 72%);
  box-shadow:
    0 0 10px rgba(var(--game-main-rgb),0.22),
    inset 0 0 8px rgba(255,255,255,0.06);
}

.game-door--left .game-door__lock {
  right: 14px;
}

.game-door--right .game-door__lock {
  left: 14px;
}

.game-door__center-joint {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 5;
  width: 18px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent, rgba(var(--game-main-rgb),0.18), transparent),
    linear-gradient(90deg, transparent, rgba(255,255,255,0.88), transparent);
  box-shadow:
    0 0 8px rgba(255,255,255,0.34),
    0 0 18px rgba(var(--game-main-rgb),0.42),
    0 0 32px rgba(var(--game-secondary-rgb),0.18);
  opacity: 1;
  transition:
    opacity 420ms ease,
    transform 820ms cubic-bezier(.16,.84,.22,1),
    filter 420ms ease;
}

.game-door__center-joint span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 92px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 1px solid rgba(var(--game-main-rgb),0.48);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.78), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(var(--game-main-rgb),0.38), transparent 64%);
  box-shadow:
    0 0 12px rgba(var(--game-main-rgb),0.42),
    0 0 28px rgba(var(--game-secondary-rgb),0.18),
    inset 0 0 10px rgba(255,255,255,0.06);
}

.game-door__scan {
  position: absolute;
  inset: -20% -80%;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      100deg,
      transparent 0%,
      transparent 42%,
      rgba(255,255,255,0.08) 48%,
      rgba(var(--game-main-rgb),0.26) 50%,
      rgba(var(--game-secondary-rgb),0.18) 52%,
      transparent 58%,
      transparent 100%
    );
  filter: blur(12px);
  mix-blend-mode: screen;
}

.game-card:hover .game-door--left {
  transform: translateX(-102%) skewY(-1.5deg);
  filter: brightness(1.16);
}

.game-card:hover .game-door--right {
  transform: translateX(102%) skewY(1.5deg);
  filter: brightness(1.16);
}

.game-card:hover .game-door::after {
  opacity: 0;
  filter: blur(6px);
}

.game-card:hover .game-door__center-joint {
  opacity: 0;
  transform: translateX(-50%) scaleY(0.82);
  filter: blur(10px);
}

.game-card:hover .game-door__scan {
  animation: gameDoorScan 820ms cubic-bezier(.16,.84,.22,1) 1;
}

.game-card:hover .game-card__inner {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 30px rgba(0,0,0,0.28),
    0 0 56px rgba(var(--game-main-rgb), 0.24),
    0 0 86px rgba(var(--game-secondary-rgb), 0.12);
  transition: box-shadow 420ms cubic-bezier(.22,1,.36,1);
  
}

/* preparado para futuras animaciones de juntas/cierre */
.game-card.is-door-locking .game-door__center-joint,
.game-card.is-door-locking .game-door__lock {
  animation: gameDoorLockPulse 520ms ease 1;
}

.game-card.is-door-warning .game-door::after {
  animation: gameDoorJointWarning 420ms linear infinite;
}

/* ==================== GAMES INTRO ==================== */

#games.is-active .game-card {
  animation: gamesCardIntro 980ms cubic-bezier(.22,1,.36,1) backwards;
}

#games.is-active .game-card--1 {
  animation-delay: 0.06s;
}

#games.is-active .game-card--2 {
  animation-delay: 0.16s;
}

#games.is-active .game-card--3 {
  animation-delay: 0.26s;
}

@keyframes gamesCardIntro {
  0% {
    opacity: 0;
    transform: translateY(46px) scale(0.94) rotateX(10deg);
    filter: blur(12px) brightness(1.18);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
    filter: blur(0) brightness(1);
  }
}

@keyframes gameDoorScan {
  0% {
    opacity: 0;
    transform: translateX(-36%) rotate(8deg);
  }
  18% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translateX(36%) rotate(8deg);
  }
}

@keyframes gameDoorLockPulse {
  0%, 100% {
    filter: brightness(1);
  }
  40% {
    filter: brightness(1.8);
  }
  65% {
    filter: brightness(0.72);
  }
}

@keyframes gameDoorJointWarning {
  0%, 100% {
    opacity: 0.82;
  }
  50% {
    opacity: 0.32;
  }
}
/* ==================== GAMES — FOCUS HOVER ==================== */

#games.is-active .game-card {
  transition:
    transform 760ms cubic-bezier(.22,1,.36,1),
    filter 620ms ease,
    opacity 620ms ease;
}

#games.is-active .game-card:hover {
  z-index: 8;
  filter: brightness(1.1);
}

#games.is-active .game-card--1:hover {
  transform: translateY(-12px) rotateX(3deg) rotateY(7deg) scale(1.15);
}

#games.is-active .game-card--2:hover {
  transform: translateY(-12px) rotateX(3deg) scale(1.15);
}

#games.is-active .game-card--3:hover {
  transform: translateY(-12px) rotateX(3deg) rotateY(-7deg) scale(1.15);
}

#games.is-active .games-showcase:has(.game-card:hover) .game-card:not(:hover) {
  opacity: 0.46;
  filter: brightness(0.42) saturate(0.55);
  transform: scale(0.94);
}

/* Apaga efectos caros de las tarjetas que NO están en hover */
#games.is-active .games-showcase:has(.game-card:hover) .game-card:not(:hover),
#games.is-active .games-showcase:has(.game-card:hover) .game-card:not(:hover) *,
#games.is-active .games-showcase:has(.game-card:hover) .game-card:not(:hover)::before,
#games.is-active .games-showcase:has(.game-card:hover) .game-card:not(:hover)::after {
  animation-play-state: paused !important;
}

/* Reduce brillos, scans y capas internas en tarjetas apagadas */
#games.is-active .games-showcase:has(.game-card:hover) .game-card:not(:hover) .game-card__inner,
#games.is-active .games-showcase:has(.game-card:hover) .game-card:not(:hover) .game-card__image-zone,
#games.is-active .games-showcase:has(.game-card:hover) .game-card:not(:hover) .game-door,
#games.is-active .games-showcase:has(.game-card:hover) .game-card:not(:hover) .game-door__scan,
#games.is-active .games-showcase:has(.game-card:hover) .game-card:not(:hover) .game-door__center-joint,
#games.is-active .games-showcase:has(.game-card:hover) .game-card:not(:hover) .game-card__img,
#games.is-active .games-showcase:has(.game-card:hover) .game-card:not(:hover) .games-gallery__img {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Oculta elementos decorativos que consumen y no hacen falta cuando están apagadas */
#games.is-active .games-showcase:has(.game-card:hover) .game-card:not(:hover) .game-door__scan,
#games.is-active .games-showcase:has(.game-card:hover) .game-card:not(:hover) .game-door__center-joint,
#games.is-active .games-showcase:has(.game-card:hover) .game-card:not(:hover) .games-gallery__nav {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mantiene la imagen visible pero más barata */
#games.is-active .games-showcase:has(.game-card:hover) .game-card:not(:hover) .game-card__img,
#games.is-active .games-showcase:has(.game-card:hover) .game-card:not(:hover) .games-gallery__img.is-active {
  filter: brightness(0.58) saturate(0.65) !important;
}

/* ==================== RESPONSIVE GAMES ==================== */

@media (max-width: 1180px) {
  .games-showcase {
    gap: clamp(14px, 1.8vw, 24px);
  }

  .game-card {
    width: min(100%, 320px);
  }

  .game-card__head {
    min-height: 108px;
  }

  .game-card__title {
    font-size: clamp(1.08rem, 1.4vw, 1.72rem);
  }
}

@media (max-width: 900px) {
  .section#games {
    overflow: auto;
  }

  .section__content--games {
    height: auto;
    min-height: 100%;
    padding-top: 86px;
    padding-bottom: 86px;
  }

  .games-showcase {
    height: auto;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .game-card {
    width: min(100%, 360px);
  }
}

@media (max-height: 760px) and (min-width: 901px) {
  .section__content--games {
    padding-top: 66px;
    padding-bottom: 66px;
  }

  .games-showcase {
    height: min(76vh, 620px);
  }

  .game-card__inner {
    padding: 14px;
  }

  .game-card__head {
    min-height: 96px;
  }

  .game-card__title {
    margin-top: 10px;
    font-size: clamp(1rem, 1.18vw, 1.58rem);
  }

  .game-card__subtitle {
    margin-top: 8px;
    font-size: 0.86rem;
    line-height: 1.16;
  }
}
/* ==================== GAMES — IMAGE TITLE ==================== */

/* ==================== GAMES — IMAGE TITLE ==================== */

.games-image-title {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  top: clamp(26px, 2.6vw, 46px);
  transform: translate(-50%, 5px);
  pointer-events: none;

  width: calc(100% - 24px);
  text-align: center;

  font-family: "Space Age", "Orbitron", sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.45rem);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.96);

  text-shadow:
    0 0 2px rgba(255,255,255,0.65),
    0 0 8px rgba(var(--logo-glow-rgb), 0.42),
    0 0 18px rgba(var(--logo-glow-rgb), 0.22);

  filter:
    drop-shadow(0 0 2px rgba(255,255,255,0.55))
    drop-shadow(0 0 8px rgba(var(--logo-glow-rgb), 0.32))
    drop-shadow(0 0 18px rgba(var(--logo-glow-rgb), 0.16));

  opacity: 0;
  transition:
    opacity 420ms ease,
    filter 420ms ease,
    transform 520ms cubic-bezier(.22,1,.36,1);
}

.game-card:hover .games-image-title {
  opacity: 1;
  transform: translate(-50%, 5px) scale(1.03);

  filter:
    drop-shadow(0 0 3px rgba(255,255,255,0.78))
    drop-shadow(0 0 12px rgba(var(--logo-glow-rgb), 0.42))
    drop-shadow(0 0 26px rgba(var(--logo-glow-rgb), 0.22));
}
.games-image-title.is-title-switching {
  animation: gamesImageTitleSwitch 520ms cubic-bezier(.22,1,.36,1) both;
}

@keyframes gamesImageTitleSwitch {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.96);
    filter:
      blur(8px)
      drop-shadow(0 0 2px rgba(255,255,255,0.55))
      drop-shadow(0 0 8px rgba(var(--logo-glow-rgb), 0.32));
  }

  48% {
    opacity: 1;
    transform: translate(-50%, 2px) scale(1.045);
    filter:
      blur(1px)
      drop-shadow(0 0 3px rgba(255,255,255,0.78))
      drop-shadow(0 0 12px rgba(var(--logo-glow-rgb), 0.42));
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 5px) scale(1.03);
    filter:
      blur(0)
      drop-shadow(0 0 3px rgba(255,255,255,0.78))
      drop-shadow(0 0 12px rgba(var(--logo-glow-rgb), 0.42))
      drop-shadow(0 0 26px rgba(var(--logo-glow-rgb), 0.22));
  }
}
/* ==================== GAMES — HOVER FLOATING TEXT ==================== */

.games-hover-text {
  --economy-main-rgb: 221, 114, 255;
  --economy-secondary-rgb: 98, 195, 255;

  position: absolute;
  top: 50%;
  width: clamp(240px, 18vw, 360px);
  min-height: 0;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;

  pointer-events: none;
  opacity: 0;
  filter: brightness(1.2);
  z-index: 40;

  left: auto;
  right: auto;

  transition:
    opacity 360ms ease,
    filter 420ms ease,
    transform 520ms cubic-bezier(.22,1,.36,1);
}

.games-hover-text--gap-left,
.games-hover-text--gap-right {
  width: 50vw;
  height: 60vh;

  max-width: none;

  position: fixed; /* 🔥 clave */
}

.games-hover-text--outer-left {
  left: 5.5%;
  transform: translate(-18px, -50%) scale(0.96);
}

.games-hover-text--outer-right {
  right: 5.5%;
  transform: translate(18px, -50%) scale(0.96);
}

.games-hover-text--gap-left {
  left: 33.333%;
  transform: translate(-50%, -50%) scale(0.96);
}

.games-hover-text--gap-right {
  left: 66.666%;
  transform: translate(-50%, -50%) scale(0.96);
}

.games-hover-text--gap-left,
.games-hover-text--gap-right {
  width: 50vw !important;
  max-width: none !important;
  height: 60vh !important;
  max-height: none !important;
  padding: clamp(18px, 2vw, 36px);
}

.games-hover-text__copy {
  width: 100%;
  max-width: 100%;
}


.games-hover-text.is-active {
  opacity: 1;
  filter: brightness(1);
}

.games-hover-text--outer-left.is-active {
  transform: translate(0, -50%) scale(1);
}

.games-hover-text--outer-right.is-active {
  transform: translate(0, -50%) scale(1);
}

.games-hover-text--gap-left.is-active,
.games-hover-text--gap-right.is-active {
  transform: translate(-50%, -50%) scale(1);
}

.games-hover-text.is-fading-out {
  opacity: 0;
  filter: brightness(1.35);
}

.games-hover-text--outer-left.is-fading-out {
  transform: translate(-18px, -50%) scale(0.985);
}

.games-hover-text--outer-right.is-fading-out {
  transform: translate(18px, -50%) scale(0.985);
}

.games-hover-text--gap-left.is-fading-out,
.games-hover-text--gap-right.is-fading-out {
  transform: translate(-50%, -50%) scale(0.985);
}

.games-hover-text__scan {
  display: none;
}

.games-hover-text__copy {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  text-align: center;

  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 1.2vw + 0.9vh, 2rem);
  line-height: 1.24;
  letter-spacing: 0.035em;

  color: rgba(238,244,255,0.96);
  text-shadow:
    0 0 4px rgba(255,255,255,0.28),
    0 0 12px rgba(var(--economy-main-rgb), 0.42),
    0 0 24px rgba(var(--economy-secondary-rgb), 0.22),
    0 0 40px rgba(0,0,0,0.92);
}

.games-gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 8;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: rgba(5, 8, 18, 0.58);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transform: translateY(-50%) scale(0.88);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease;
}

.game-card:hover .games-gallery__nav {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.games-gallery__nav--prev {
  left: 14px;
}

.games-gallery__nav--next {
  right: 14px;
}

.games-gallery__nav::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
}

.games-gallery__nav--prev::before {
  transform: rotate(135deg);
}

.games-gallery__nav--next::before {
  transform: rotate(-45deg);
}

/* Quitar blur de las palabras del texto flotante de Games */
.games-hover-text .economy-explanation-word {
  filter: none !important;
  animation-name: gamesHoverWordInNoBlur !important;
}

.games-hover-text .economy-explanation-word.is-hot {
  filter: none !important;
}

@keyframes gamesHoverWordInNoBlur {
  0% {
    opacity: 0;
    transform: translateX(var(--economy-word-offset, 0));
    filter: none;
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    filter: none;
  }
}

/* ========================================================================== */
/* ======================== END GAMES SECTION — SEND THIS =================== */
/* ========================================================================== */