/* ==========================================================================
   rs9 — game-details.css
   Detail template: cinematic hero, spec rail, gallery + lightbox,
   how-to-play steps, sticky play bar, related rail.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.ghero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 52px));
  padding-bottom: clamp(34px, 4.4vw, 62px);
  overflow: hidden;
}
/* blurred artwork wash behind the hero */
.ghero__bg {
  position: absolute;
  inset: -14%;
  z-index: -2;
  background-size: cover;
  background-position: center;
  filter: blur(56px) saturate(1.5) brightness(.55);
  opacity: .5;
  transform: scale(1.15);
  animation: auroraDrift 26s var(--ease-in-out) infinite alternate;
}
.ghero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 90% at 20% 0%, rgba(224, 26, 60, .22), transparent 60%),
    linear-gradient(180deg, rgba(7, 8, 13, .74), rgba(7, 8, 13, .96));
}

.ghero__inner {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  align-items: center;
  margin-top: var(--s-5);
}

.ghero__art {
  position: relative;
  width: min(100%, 300px);
  margin-inline: auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--a-gold-line);
  box-shadow: var(--sh-lg), 0 0 62px rgba(224, 26, 60, .28);
  aspect-ratio: 211 / 260;
  background: var(--c-graphite);
}
.ghero__art img { width: 100%; height: 100%; object-fit: cover; }
.ghero__art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, transparent 38%, rgba(255, 255, 255, .14) 48%, transparent 58%);
  transform: translateX(-40%);
  animation: glareSlide 7s var(--ease-in-out) infinite;
  pointer-events: none;
}

.ghero__title {
  font-size: var(--fs-h1);
  font-weight: 800;
  margin-top: var(--s-4);
}
.ghero__badges { display: flex; flex-wrap: wrap; gap: 9px; margin-top: var(--s-4); }
.ghero__lead { margin-top: var(--s-5); font-size: var(--fs-lead); color: var(--c-text-soft); }
.ghero__cta { margin-top: var(--s-6); }

@media (min-width: 900px) {
  .ghero__inner { grid-template-columns: 320px 1fr; }
  .ghero__art { margin-inline: 0; }
}

/* --------------------------------------------------------------------------
   SPEC RAIL
   -------------------------------------------------------------------------- */
.gspecs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--a-white-hair);
  border: 1px solid var(--a-gold-hair);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 900px) { .gspecs { grid-template-columns: repeat(4, 1fr); } }
.gspec {
  padding: clamp(16px, 2vw, 24px);
  background: rgba(13, 15, 22, .94);
}
.gspec__k {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}
.gspec__v {
  margin-top: 7px;
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--c-gold);
}

/* --------------------------------------------------------------------------
   GALLERY
   -------------------------------------------------------------------------- */
.ggallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
}
@media (min-width: 768px) { .ggallery { grid-template-columns: repeat(4, 1fr); } }

.gshot {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--a-white-hair);
  background: var(--c-graphite);
  aspect-ratio: 9 / 19;
  transition: all var(--t-med) var(--ease-out);
}
.gshot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform var(--t-slow) var(--ease-out); }
.gshot:hover { border-color: var(--a-gold-line); box-shadow: var(--glow-gold-sm); }
.gshot:hover img { transform: scale(1.06); }
.gshot__zoom {
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(5, 6, 10, .8);
  border: 1px solid var(--a-gold-line);
  color: var(--c-gold);
  opacity: 0;
  transform: scale(.8);
  transition: all var(--t-med) var(--ease-spring);
}
.gshot:hover .gshot__zoom { opacity: 1; transform: scale(1); }
.gshot__zoom svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   HOW TO PLAY
   -------------------------------------------------------------------------- */
.howto { display: grid; gap: clamp(14px, 1.8vw, 20px); counter-reset: ht; }
.howto__step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--s-4);
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: var(--r-lg);
  background: var(--g-panel);
  border: 1px solid var(--a-white-hair);
  transition: all var(--t-med) var(--ease-out);
}
.howto__step:hover { border-color: var(--a-gold-line); transform: translateX(5px); }
.howto__idx {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(150deg, rgba(224, 26, 60, .26), rgba(231, 199, 122, .12));
  border: 1px solid var(--a-gold-hair);
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-gold);
}
.howto__title { font-family: var(--f-display); font-size: var(--fs-h4); font-weight: 700; }
.howto__text { margin-top: 8px; font-size: var(--fs-sm); color: var(--c-text-muted); line-height: 1.74; }

@media (min-width: 1024px) {
  .howto { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   STICKY PLAY BAR (desktop floating pill)
   -------------------------------------------------------------------------- */
.gplay {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translate(-50%, 140%);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 10px 10px 10px 20px;
  border-radius: var(--r-pill);
  background: rgba(13, 15, 22, .93);
  border: 1px solid var(--a-gold-line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--sh-lg);
  max-width: calc(100% - (var(--gutter) * 2));
  transition: transform var(--t-med) var(--ease-spring);
}
.gplay.is-visible { transform: translate(-50%, 0); }
.gplay__thumb {
  display: none;
  width: 38px;
  height: 46px;
  border-radius: 9px;
  object-fit: cover;
  flex: none;
}
.gplay__copy { min-width: 0; }
.gplay__copy b {
  display: block;
  font-family: var(--f-display);
  font-size: .9rem;
  line-height: 1.2;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 34vw;
}
.gplay__copy span { display: block; font-size: .68rem; color: var(--c-gold); }
@media (min-width: 768px) {
  .gplay { bottom: 26px; padding-left: 10px; }
  .gplay__thumb { display: block; }
  .gplay__copy b { max-width: 260px; }
}

/* --------------------------------------------------------------------------
   MISSING-GAME STATE
   -------------------------------------------------------------------------- */
.gmissing {
  padding-top: calc(var(--nav-h) + 60px);
  padding-bottom: var(--section-y);
  text-align: center;
}
.gmissing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
  margin-top: var(--s-6);
  text-align: left;
}

/* --------------------------------------------------------------------------
   LIGHTBOX
   -------------------------------------------------------------------------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 22px);
  padding: clamp(52px, 7vw, 74px) clamp(10px, 3vw, 34px);
  background: rgba(3, 4, 7, .95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med) var(--ease-out), visibility var(--t-med) linear;
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb__stage {
  display: grid;
  place-items: center;
  gap: var(--s-4);
  max-width: 100%;
  max-height: 100%;
}
.lb__img {
  max-width: min(88vw, 460px);
  max-height: 76vh;
  border-radius: var(--r-lg);
  border: 1px solid var(--a-gold-line);
  box-shadow: var(--sh-lg), 0 0 70px rgba(224, 26, 60, .24);
  opacity: 0;
  transform: scale(.96);
  transition: opacity 340ms var(--ease-out), transform 340ms var(--ease-spring);
}
.lb__img.is-in { opacity: 1; transform: none; }
.lb__cap { font-size: var(--fs-xs); color: var(--c-text-muted); text-align: center; max-width: 46ch; }
.lb__close,
.lb__nav {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(20, 23, 31, .9);
  border: 1px solid var(--a-gold-hair);
  color: var(--c-gold);
  flex: none;
  transition: all var(--t-med) var(--ease-out);
}
.lb__close { position: absolute; top: clamp(14px, 3vw, 26px); right: clamp(14px, 3vw, 26px); }
.lb__close:hover,
.lb__nav:hover { background: var(--c-gold); color: var(--c-text-on-gold); }
.lb__count {
  position: absolute;
  bottom: clamp(14px, 3vw, 26px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-display);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
  letter-spacing: .1em;
}