.game-showcase { position:relative; }
.game-card { display:none; grid-template-columns:1.05fr .95fr; height:520px; min-height:0; }
.game-card.is-active { display:grid; animation:game-in .35s ease both; }
.game-content { position:relative; justify-content:flex-start; padding-top:50px; padding-right:clamp(92px,9vw,122px); }
.game-media { position:relative; min-height:0; height:100%; overflow:hidden; background:#10161b; }
.game-media img { width:100%; height:100%; min-height:0; object-fit:cover; display:block; filter:saturate(.88) contrast(1.04); }
.game-media-placeholder { display:grid; place-items:center; color:#9ba7ac; font:.7rem "DM Mono",monospace; text-transform:uppercase; letter-spacing:.12em; background:radial-gradient(circle at 52% 46%,#283229 0,#131b1e 35%,#0d1216 74%); }
.game-media-placeholder > span:first-child { position:relative; z-index:1; padding:12px 15px; border:1px solid #54615a; background:#121817cc; }
.media-grid { position:absolute; inset:0; opacity:.35; background-image:linear-gradient(#5a665c 1px,transparent 1px),linear-gradient(90deg,#5a665c 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(135deg,transparent,black 30%,black 70%,transparent); }
.showcase-controls { display:flex; align-items:center; gap:20px; padding:21px 0 0; }
.game-breadcrumbs { display:flex; align-items:center; gap:11px; min-width:0; color:#69757c; font:.69rem "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }
.game-breadcrumbs i { color:#536067; font-style:normal; }.game-dot { padding:0; border:0; background:none; color:inherit; cursor:pointer; font:inherit; text-align:left; }.game-dot span { margin-left:5px; }.game-dot:hover,.game-dot.is-current { color:var(--yellow); }
.game-content > .showcase-arrows { position:absolute; top:28px; right:30px; z-index:2; display:flex; gap:7px; }.game-arrow { display:grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid #47535b; background:#11181d; color:var(--text); cursor:pointer; font-size:1.2rem; }.game-arrow:hover { color:#16130a; border-color:var(--yellow); background:var(--yellow); }
.game-title-garage { white-space:nowrap; }
.game-title-quest span { display:block; white-space:nowrap; }
@keyframes game-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (max-width:760px) {
  .games { padding-block:48px; }
  .section-heading { gap:9px; margin-bottom:22px; }
  .game-showcase { position:relative; }
  .game-card.is-active { display:block; position:relative; height:min(495px,62svh); min-height:430px; overflow:hidden; }
  .game-media { position:absolute; inset:0; width:100%; height:100%; min-height:0; }
  .game-media img { width:100%; height:100%; min-height:0; object-fit:cover; object-position:center; }
  .game-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,13,18,.96) 0%,rgba(9,13,18,.73) 56%,rgba(9,13,18,.24) 100%),linear-gradient(0deg,rgba(9,13,18,.8),transparent 48%); }
  .game-content { position:relative; z-index:1; height:100%; max-width:100%; padding:29px 88px 84px 25px; background:transparent; }
  .game-content .status { margin-bottom:20px; }
  .game-content .kicker { margin-bottom:16px; }
  .game-content > p:not(.status):not(.kicker) { margin:20px 0 25px; font-size:1rem; }
  .game-content > .showcase-arrows { top:18px; right:18px; }
  .game-arrow { width:36px; height:36px; font-size:1rem; }
  .game-title-garage { font-size:clamp(2.05rem,10.2vw,2.7rem); letter-spacing:-.065em; }
  .game-title-quest { font-size:clamp(2rem,9.8vw,2.55rem); line-height:.9; letter-spacing:-.06em; }
  .showcase-controls { position:absolute; z-index:3; right:16px; bottom:15px; left:16px; margin:0; padding:0; }
  .game-breadcrumbs { display:grid; gap:3px; max-width:100%; }.game-breadcrumbs i { display:none; }.game-dot span { display:none; }.game-dot.is-current span { display:inline; }
}