/* V81 — compact interactive-project showcase above the apps area */
.game-showcase{
  width:min(100%,760px);
  margin:clamp(3rem,4.8vw,4.2rem) auto 0;
  padding-top:clamp(2.2rem,3.6vw,3rem);
  position:relative;
}
.game-showcase::before{
  content:"";
  position:absolute;
  top:0;
  right:8%;
  left:8%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(194,90,56,.34),transparent);
}
.game-showcase-card{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(260px,.92fr);
  align-items:stretch;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(145deg,var(--off),var(--ink));
  box-shadow:0 14px 34px rgba(23,19,15,.12);
}
.game-showcase-media{
  min-height:270px;
  display:block;
  position:relative;
  overflow:hidden;
  background:var(--off);
}
.game-showcase-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform .55s ease;
}
.game-showcase-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(23,19,15,.58),transparent 58%);
  pointer-events:none;
}
.game-showcase-media span{
  position:absolute;
  left:.9rem;
  bottom:.9rem;
  z-index:2;
  padding:.4rem .7rem;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(23,19,15,.84);
  color:#fff;
  font-size:.69rem;
  font-weight:900;
  transition:background .22s ease,transform .22s ease;
}
.game-showcase-card:hover .game-showcase-media img{transform:scale(1.025)}
.game-showcase-media:hover span,
.game-showcase-media:focus-visible span{
  background:var(--gold);
  transform:translateY(-1px);
}
.game-showcase-media:focus-visible{
  outline:3px solid rgba(232,128,95,.24);
  outline-offset:-3px;
}
.game-showcase-copy{
  padding:clamp(1.15rem,2.4vw,1.65rem);
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.game-showcase-kicker{
  margin:0 0 .3rem;
  color:var(--gold);
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.075em;
}
.game-showcase-copy h3{
  margin:0;
  color:var(--text);
  font-family:'Frank Ruhl Libre',serif;
  font-size:clamp(1.55rem,2.45vw,2rem);
  line-height:1.16;
}
.game-showcase-lead{
  margin:.4rem 0 .9rem;
  color:var(--gold-light);
  font-size:.77rem;
  font-weight:800;
}
html[data-theme="light"] .game-showcase-lead{color:var(--gold)}
.game-showcase-copy dl{
  display:grid;
  gap:.55rem;
  margin:0;
}
.game-showcase-copy dl div{
  display:grid;
  grid-template-columns:62px minmax(0,1fr);
  gap:.55rem;
  align-items:start;
}
.game-showcase-copy dt{
  color:var(--teal);
  font-size:.72rem;
  font-weight:900;
}
.game-showcase-copy dd{
  margin:0;
  color:var(--muted);
  font-size:.76rem;
  line-height:1.62;
}
.game-showcase-cta,
.game-showcase-cta:visited{
  width:max-content;
  max-width:100%;
  min-height:44px;
  margin-top:1rem;
  padding:.65rem 1.05rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold),var(--rose));
  color:#fff;
  font-size:.8rem;
  font-weight:900;
  box-shadow:0 10px 22px rgba(212,84,113,.14);
  transition:transform .22s ease,box-shadow .22s ease;
}
.game-showcase-cta:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(212,84,113,.22);
}
.game-showcase-cta:focus-visible{
  outline:3px solid rgba(232,128,95,.24);
  outline-offset:3px;
}
.game-showcase + .apps-showcase{
  margin-top:clamp(2.2rem,3.4vw,3rem);
}
@media(max-width:780px){
  .game-showcase{
    width:min(100%,620px);
  }
  .game-showcase-card{grid-template-columns:1fr}
  .game-showcase-media{min-height:0;aspect-ratio:16/9}
}
@media(max-width:760px){
  .game-showcase{
    width:100%;
    margin-top:2.4rem;
    padding-top:2rem;
  }
  .game-showcase-card{border-radius:18px}
  .game-showcase-media{aspect-ratio:16/10}
  .game-showcase-copy{padding:1.05rem .95rem 1.15rem}
  .game-showcase-copy h3{font-size:clamp(1.45rem,7.6vw,1.9rem)}
  .game-showcase-copy dl div{grid-template-columns:1fr;gap:.08rem}
  .game-showcase-copy dd{font-size:.8rem}
  .game-showcase-cta{width:100%;margin-top:1rem}
  .game-showcase + .apps-showcase{margin-top:2rem!important}
}
@media(prefers-reduced-motion:reduce){
  .game-showcase-media img,
  .game-showcase-media span,
  .game-showcase-cta{transition:none!important}
}