/* ============================================================
   RAMEZWARE — games.css
   Games section: featured game + coming soon grid
   ============================================================ */

.games { background:var(--deep); }
.games-inner { max-width:1240px; margin:0 auto; }
.games-header { margin-bottom:3rem; }

/* ── Featured game ──────────────────────────────────────────── */
.game-feature {
  position:relative; overflow:hidden;
  background:var(--surface); margin-bottom:2px;
  opacity:0; transform:translateY(16px);
  transition:opacity .7s, transform .7s;
}
.game-feature.visible { opacity:1; transform:translateY(0); }

.game-feature-bg {
  position:absolute; inset:0;
  background:url('../assets/boardgamewithminis.png') center top / cover no-repeat;
  opacity:.3;
  transition:opacity .4s, transform .6s;
}
.game-feature:hover .game-feature-bg { opacity:.42; transform:scale(1.02); }

.game-feature-content {
  position:relative; z-index:2; padding:3.5rem;
  background:linear-gradient(90deg, rgba(10,10,15,.98) 0%, rgba(10,10,15,.93) 38%, rgba(10,10,15,.55) 62%, rgba(10,10,15,.05) 100%);
  min-height:420px; display:flex; align-items:center; gap:3rem;
}
.game-feature-left { flex:1; max-width:540px; }

.game-badge-row { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.game-badge { font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; padding:.28rem .75rem; }
.game-badge.ember { background:var(--ember); color:var(--white); }
.game-badge.gold  { background:transparent; border:1px solid var(--gold);   color:var(--gold); }
.game-badge.steel { background:transparent; border:1px solid var(--border); color:var(--steel); }

.game-feature-title { font-family:'Cinzel',serif; font-size:clamp(1.8rem,3.5vw,3rem); font-weight:900; color:var(--white); line-height:1.05; margin-bottom:1rem; }
.game-feature-desc  { font-size:.9rem; color:var(--steel); line-height:1.85; margin-bottom:1.4rem; }

.game-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.game-tags span { font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; padding:.22rem .7rem; border:1px solid var(--border); color:var(--steel); }

.game-feature-links { display:flex; gap:.8rem; flex-wrap:wrap; }

/* Side screenshots */
.game-feature-right { display:flex; flex-direction:column; gap:2px; flex-shrink:0; width:340px; }
.game-screenshot { position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.08); flex:1; }
.game-screenshot img { width:100%; height:180px; object-fit:cover; transition:transform .5s ease; }
.game-feature:hover .game-screenshot img { transform:scale(1.04); }
.game-screenshot-label { position:absolute; bottom:0; left:0; right:0; padding:.45rem .8rem; background:rgba(10,10,15,.85); font-family:'DM Mono',monospace; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); }

/* ── Coming soon divider ────────────────────────────────────── */
.coming-soon-label { display:flex; align-items:center; gap:1.2rem; margin:3rem 0 2rem; }
.sub-divider { flex:1; height:1px; background:var(--border); }
.sub-text { font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--steel); white-space:nowrap; }

/* ── Coming soon 3-grid ─────────────────────────────────────── */
.games-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }

.game-card { position:relative; overflow:hidden; background:var(--surface); min-height:360px; opacity:0; transform:scale(.97); transition:opacity .7s, transform .7s; cursor:none; }
.game-card.visible { opacity:1; transform:scale(1); }

.game-card-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; transition:transform .6s ease; }
.game-card:hover .game-card-bg { transform:scale(1.05); }

.game-bg-undead    { background-image:url('../assets/blight_undead.png'); background-position:center top; }
.game-bg-leadville { background-image:url('../assets/leadville.webp'); }
.game-bg-dino      { background-image:url('../assets/dinocreek.webp'); background-position:center top; }

.game-card-content {
  position:absolute; inset:0; padding:2.2rem;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(to top,rgba(10,10,15,.97) 0%,rgba(10,10,15,.6) 45%,rgba(10,10,15,.05) 100%);
}

.game-card-badge { position:absolute; top:1.5rem; right:1.5rem; font-family:'DM Mono',monospace; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; padding:.28rem .7rem; z-index:2; }
.game-card-genre { font-family:'DM Mono',monospace; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ember); margin-bottom:.4rem; transform:translateY(4px); opacity:.85; transition:transform .3s, opacity .3s; }
.game-card:hover .game-card-genre { transform:translateY(0); opacity:1; }
.game-card-title { font-family:'Cinzel',serif; font-size:1.3rem; font-weight:700; color:var(--white); margin-bottom:.4rem; line-height:1.2; }
.game-card-desc  { font-size:.8rem; color:var(--steel); line-height:1.65; margin-bottom:1rem; opacity:0; transform:translateY(8px); transition:opacity .3s .05s, transform .3s .05s; }
.game-card:hover .game-card-desc { opacity:1; transform:translateY(0); }
.game-card-link  { font-family:'DM Mono',monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ember); text-decoration:none; display:flex; align-items:center; gap:.5rem; width:fit-content; opacity:0; transform:translateY(6px); transition:opacity .3s .1s, transform .3s .1s, gap .2s; }
.game-card:hover .game-card-link { opacity:1; transform:translateY(0); }
.game-card-link:hover { gap:.8rem; }