/* Individual game page styles (extends your global theme) */

/* HERO */
.gp-hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--outline) }
.gp-hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform:scale(1.08); filter:brightness(.7) saturate(1.1);
  will-change: transform; /* parallax */
}
.gp-hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 500px at 15% -10%, var(--brand-glow), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65));
}
.gp-hero-inner{ position:relative; z-index:1; padding:64px 0 22px }
.gp-crumbs{ color:var(--muted); font-weight:600; margin-bottom:8px }
.gp-crumbs .crumb{ color:var(--muted); text-decoration:none }
.gp-crumbs .current{ color:#fff; opacity:.9 }

.gp-head .gp-badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:var(--chip-bg); border:1px solid var(--chip-border); font-weight:800; margin-bottom:8px
}
.gp-cta{ display:flex; gap:10px; margin:12px 0 }
.gp-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.gp-tags .tag{ padding:6px 10px; border-radius:999px; background:var(--chip-bg); border:1px solid var(--chip-border); font-weight:700 }

/* sticky subnav */
.gp-subnav{
  position:sticky; top:64px; margin-top:18px; display:flex; gap:16px; align-items:center;
  border-top:1px solid var(--outline); border-bottom:1px solid var(--outline);
  padding:10px 0; backdrop-filter:saturate(140%) blur(8px)
}
.sn-link{
  position:relative; text-decoration:none; color:#fff; font-weight:800; opacity:.8;
  padding:6px 8px; border-radius:8px; transition:opacity .2s var(--ease)
}
.sn-link:hover{ opacity:1 }
.sn-link.is-active{ opacity:1 }
.sn-underline{
  position:absolute; height:2px; background:linear-gradient(90deg,var(--brand),var(--accent));
  bottom:-1px; left:0; width:60px; border-radius:999px; transition:transform .35s var(--ease), width .35s var(--ease)
}

/* OVERVIEW */
.gp-overview{ display:grid; grid-template-columns:1.4fr .8fr; gap:18px; padding:28px 0 }
.gp-card{ border:1px solid var(--outline); background:var(--card-gradient); border-radius:16px; padding:16px; box-shadow:var(--surface-elev) }
.gp-specs{ list-style:none; margin:10px 0 0; padding:0 }
.gp-specs li{ margin:6px 0 }

/* Collapsible description with smooth animation + fade mask */
.gp-desc{
  position:relative;
  max-height:7.5em;            /* ~5 lines */
  overflow:hidden;
  transition:max-height .45s var(--ease);
}
.gp-desc::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:56px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(10,10,10,.92));
  pointer-events:none;
  opacity:1; transition:opacity .35s var(--ease);
}
.gp-desc.is-open{ max-height:80vh }
.gp-desc.is-open::after{ opacity:0 }

.gp-more{
  appearance:none;
  margin-top:10px;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:999px;
  background:var(--chip-bg);
  border:1px solid var(--chip-border);
  color:var(--text); font-weight:800; cursor:pointer;
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.gp-more::after{
  content:"›";
  display:inline-block;
  transform:translateX(0) rotate(0deg);
  transition:transform .3s var(--ease);
}
.gp-more:hover{ transform:translateY(-1px); border-color:var(--brand-soft-strong) }
.gp-more.is-open::after{ transform:translateX(2px) rotate(90deg) }

/* MEDIA */
.gp-media{ padding:14px 0 28px }
.gp-player{
  border:1px solid var(--outline); border-radius:16px; overflow:hidden;
  background:var(--card-gradient); box-shadow:var(--surface-elev);
}
.gp-video, .gp-iframe{ width:100%; height:min(62vh,680px); display:block }
.gp-iframe{ border:0 }

.gp-links-row{ display:flex; flex-wrap:wrap; gap:12px; margin:12px 0 0 }
.gp-links-row .btn{ flex:0 0 auto }

.gp-thumbs{ display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 }
.thumb{ border:1px solid var(--outline); border-radius:12px; overflow:hidden; background:var(--surface); cursor:pointer; padding:0 }
.thumb .thumb-media{ position:relative; width:180px; height:100px; overflow:hidden }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04); transition:transform .35s var(--ease) }
.thumb:hover img{ transform:scale(1.08) }
.thumb-badge{
  position:absolute; left:8px; top:8px; padding:4px 8px; border-radius:999px;
  background:rgba(0,0,0,.55); border:1px solid var(--outline); font-weight:700; font-size:12px
}

/* GALLERY (no popup; gentle hover scale) */
.gp-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:10px }
@media (max-width: 900px){ .gp-overview{ grid-template-columns:1fr } .gp-gallery{ grid-template-columns:repeat(2,1fr) } }
@media (max-width: 720px){
  .gp-hero-inner{ padding:56px 0 18px }
  .gp-crumbs{font-size:14px}
  .gp-head .display{font-size:clamp(30px,8vw,44px)}
  .gp-head .subtitle{font-size:15px}
  .gp-cta{ flex-direction:column; align-items:stretch }
  .gp-cta .btn{ width:100%; justify-content:center }
  .gp-tags{ gap:6px }
  .gp-subnav{ gap:12px; overflow-x:auto; padding:10px 2px }
  .gp-subnav::-webkit-scrollbar{ display:none }
  .sn-link{ flex:0 0 auto; padding:6px 6px }
  .gp-overview{ padding:22px 0 }
  .gp-media{ padding:10px 0 24px }
  .gp-video, .gp-iframe{ height:min(52vh,440px) }
  .gp-thumbs{ gap:8px }
  .thumb .thumb-media{ width:150px; height:90px }
  .gp-links-row{ gap:10px }
}
@media (max-width: 600px){
  .gp-gallery{ grid-template-columns:1fr }
  .sn-underline{ display:none }
  .gp-tags .tag{ padding:6px 9px; font-size:13px }
  .thumb .thumb-media{ width:130px; height:80px }
  .gp-links-row{ flex-direction:column }
  .gp-links-row .btn{ width:100%; justify-content:center }
  .gp-player{ border-radius:14px }
  .gp-shot img{ height:200px }
}

.gp-shot{
  position:relative; overflow:hidden; border-radius:12px; border:1px solid var(--outline);
  background:var(--card-gradient); cursor:default; transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.gp-shot img{
  width:100%; height:220px; object-fit:cover; display:block;
  transform:scale(1.04); transition:transform .35s var(--ease), filter .35s var(--ease)
}
.gp-shot:hover{ box-shadow:0 18px 50px rgba(0,0,0,.5) }
.gp-shot:hover img{ transform:scale(1.08); filter:saturate(1.06) }

/* brief highlight when scrolled to from a thumb click */
.gp-shot.glow{ box-shadow:0 0 0 3px var(--brand-soft-strong), 0 24px 60px rgba(0,0,0,.55) }