/* =====================================================
   GAME LIBRARY ANNOUNCEMENT BAR
===================================================== */

.game-banner{
  position:absolute;
  left:50%;
  top:96px;
  z-index:30;

  width:min(1120px, calc(100% - 64px));
  min-height:66px;
  padding:8px 12px 8px 26px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;

  overflow:hidden;
  border-radius:999px;

  background:
    radial-gradient(circle at var(--banner-x, 18%) 50%, rgba(85,255,147,.22), transparent 28%),
    linear-gradient(90deg, rgba(255,238,190,.97), rgba(255,248,226,.95), rgba(255,233,179,.93));

  border:2px solid rgba(224,166,45,.82);

  color:var(--forest-dark);
  text-decoration:none;
  text-align:center;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.06em;

  box-shadow:
    0 14px 42px rgba(0,0,0,.34),
    0 0 26px rgba(224,166,45,.32),
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(151,96,18,.18);

  backdrop-filter:blur(10px);

  transform:translateX(-50%);
  animation:gameBannerFloat 5s ease-in-out infinite;
}

.game-banner::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.46), transparent);
  animation:gameBannerShine 5.8s ease-in-out infinite;
}

.game-banner::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.42);
  pointer-events:none;
}

.game-banner:hover{
  border-color:rgba(255,203,86,.96);
}

/* =====================================================
   STATUS DOT
===================================================== */

.game-banner-dot{
  position:relative;
  z-index:2;
  width:18px;
  height:18px;
  flex:0 0 auto;
  border-radius:999px;
  background:radial-gradient(circle at 35% 32%, #baffca, #55ff93 48%, #0f8f4f 100%);
  box-shadow:
    0 0 0 7px rgba(85,255,147,.13),
    0 0 18px rgba(85,255,147,.72),
    inset 0 2px 3px rgba(255,255,255,.42);
  animation:gameBannerPulse 2.2s ease-in-out infinite;
}

.game-banner-dot::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  border:1px solid rgba(85,255,147,.42);
  animation:gameBannerRing 2.2s ease-in-out infinite;
}

/* =====================================================
   TEXT
===================================================== */

.game-banner strong,
.game-banner span,
.game-banner em{
  position:relative;
  z-index:2;
}

.game-banner strong{
  font-size:clamp(.95rem, 1.2vw, 1.45rem);
  font-weight:950;
  letter-spacing:.08em;
  line-height:1;
  text-shadow:
    0 0 10px rgba(255,216,122,.38),
    0 1px 0 rgba(255,255,255,.45);
}

.game-banner span{
  font-size:.66rem;
  letter-spacing:.09em;
  opacity:.84;
  transition:opacity .25s ease;
  animation:gameBannerTextGlow 3.8s ease-in-out infinite;
}

.game-banner span.is-changing{
  opacity:0;
}

/* =====================================================
   CTA
===================================================== */

.game-banner em{
  margin-left:auto;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  min-width:126px;
  min-height:42px;
  padding:0 22px;

  border-radius:999px;
  border:1px solid rgba(224,166,45,.72);

  background:linear-gradient(135deg, #0f3d2a, #072317);
  color:#fffdf4;

  font-style:normal;
  font-size:.68rem;
  font-weight:950;
  letter-spacing:.12em;
  white-space:nowrap;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 8px 20px rgba(15,61,42,.22),
    0 0 18px rgba(224,166,45,.18);

  animation:gameBannerCtaPulse 2.8s ease-in-out infinite;
}

.game-banner em::after{
  content:"›";
  margin-left:4px;
  font-size:1.1em;
  line-height:1;
}

.game-banner:hover em{
  background:linear-gradient(135deg, var(--forest-mid), var(--forest-dark));
}

.game-banner em.banner-pop{
  animation:bannerPop .7s ease;
}

/* =====================================================
   JS SPARKLES
===================================================== */

.banner-twinkle{
  position:absolute;
  z-index:4;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ffe48d;
  box-shadow:
    0 0 8px #ffe48d,
    0 0 18px #ffd247;
  pointer-events:none;
  animation:bannerTwinkle .9s ease forwards;
}

/* =====================================================
   HERO OFFSET
===================================================== */

.hero{
  padding-top:clamp(136px, 10vw, 162px);
}

/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes gameBannerFloat{
  0%, 100%{
    transform:translateX(-50%) translateY(0);
  }

  50%{
    transform:translateX(-50%) translateY(-2px);
  }
}

@keyframes gameBannerPulse{
  0%, 100%{
    transform:scale(.94);
  }

  50%{
    transform:scale(1.08);
  }
}

@keyframes gameBannerRing{
  0%{
    opacity:.75;
    transform:scale(.75);
  }

  100%{
    opacity:0;
    transform:scale(1.45);
  }
}

@keyframes gameBannerShine{
  0%, 48%{
    transform:translateX(-120%) skewX(-18deg);
  }

  78%, 100%{
    transform:translateX(120%) skewX(-18deg);
  }
}

@keyframes gameBannerTextGlow{
  0%, 100%{
    opacity:.82;
    text-shadow:none;
  }

  50%{
    opacity:1;
    text-shadow:0 0 12px rgba(255,216,122,.38);
  }
}

@keyframes gameBannerCtaPulse{
  0%, 100%{
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.12),
      0 8px 20px rgba(15,61,42,.22),
      0 0 18px rgba(224,166,45,.18);
  }

  50%{
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.2),
      0 10px 24px rgba(15,61,42,.3),
      0 0 30px rgba(224,166,45,.34);
  }
}

@keyframes bannerTwinkle{
  0%{
    opacity:0;
    transform:scale(.3);
  }

  30%{
    opacity:1;
    transform:scale(1.5);
  }

  100%{
    opacity:0;
    transform:scale(.2);
  }
}

@keyframes bannerPop{
  0%{
    transform:scale(1);
  }

  28%{
    transform:scale(1.08);
  }

  55%{
    transform:scale(.96);
  }

  100%{
    transform:scale(1);
  }
}

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

@media(max-width:1050px){
  .game-banner{
    width:min(920px, calc(100% - 40px));
  }

  .game-banner span{
    display:none;
  }
}

@media(max-width:900px){
  .game-banner{
    position:relative;
    left:auto;
    top:auto;
    width:calc(100% - 32px);
    transform:none;
    margin:18px auto -6px;
    padding:14px 16px;
    flex-wrap:wrap;
    gap:10px 12px;
    border-radius:28px;
    animation:gameBannerFloatMobile 5s ease-in-out infinite;
  }

  .game-banner strong{
    font-size:clamp(1rem, 5vw, 1.35rem);
  }

  .game-banner span{
    display:block;
    order:3;
    width:100%;
    font-size:.64rem;
    white-space:normal;
  }

  .game-banner em{
    min-height:38px;
    padding:0 16px;
  }

  .hero{
    padding-top:64px;
  }
}

@media(max-width:560px){
  .game-banner{
    width:calc(100% - 24px);
    margin:14px auto -4px;
    padding:15px 14px;
    border-radius:22px;
  }

  .game-banner-dot{
    width:12px;
    height:12px;
  }

  .game-banner strong{
    font-size:1rem;
    letter-spacing:.05em;
  }

  .game-banner span{
    font-size:.62rem;
    letter-spacing:.05em;
  }

  .game-banner em{
    width:100%;
    margin-left:0;
    min-height:40px;
  }

  .hero{
    padding-top:52px;
  }
}

@keyframes gameBannerFloatMobile{
  0%, 100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-2px);
  }
}

@media (prefers-reduced-motion:reduce){
  .game-banner,
  .game-banner::before,
  .game-banner span,
  .game-banner em,
  .game-banner-dot,
  .game-banner-dot::after,
  .banner-twinkle{
    animation:none !important;
  }
}