/* Both game cards remain available at once. Only Eldara's art supplies
   the measured opening transition; the second preview has its own scene. */
.gamecards{
  display:grid; grid-template-columns:minmax(0,1fr); gap:20px;
  width:100%; max-width:960px; margin-top:clamp(56px,10vw,112px);
}
.intro .gamecard{
  --gc-w:100%; position:relative; right:auto; top:auto; width:100%;
  min-width:0; margin:0; transform:none;
  display:flex; flex-direction:column;
}
.gamecards .gamecard__body{ display:flex; flex-direction:column; flex:1; }
.gamecards .gamecard__actions{ margin-top:auto; padding-top:16px; }
.gamecards .gamecard__meta{ margin-bottom:0; }
.gamecards .gamecard__media{ flex-shrink:0; }
.gamecards .gc-btn{ padding-inline:10px; font-size:.6875rem; }
.gamecards .gc-btn--icon{ padding:0; }
.gamecard[data-game="sorta-high"]{ background:linear-gradient(180deg,#25302a,#111913); }
.gamecard[data-game="sorta-high"] .gamecard__media{ background:#1a2923; }
.gamecard[data-game="sorta-high"] .gamecard__painting{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:74% 47%; transition:scale .7s var(--ease);
}
.gamecard[data-game="sorta-high"] .gamecard__media::after{
  background:linear-gradient(0deg,rgb(8 20 13 / .65),transparent 68%);
}
.gamecard[data-game="sorta-high"] .gamecard__lockup{ width:58%; bottom:5cqi; }
.gamecard__wordmark{ display:block; width:100%; height:auto; object-fit:contain; }
.gamecard[data-game="sorta-high"] .gamecard__actions{ display:flex; flex-wrap:wrap; }
.gamecard[data-game="sorta-high"] .gamecard__actions .gc-btn{ flex:1 1 125px; width:auto; padding:0 10px; }
.gamecard[data-game="sorta-high"] .gamecard__actions .gc-btn--wishlist{ flex-basis:176px; background:#24372b; color:#e4ebd2; box-shadow:inset 0 0 0 1px rgb(201 216 171 / .2); }
.gamecard__flag--development i,
.chip--development i{ background:#e4bd77; box-shadow:0 0 0 3px rgb(228 189 119 / .18); }
.gamecard__flag--development{ letter-spacing:.1em; }
.gamecard[data-game="sorta-high"] .gc-btn--primary{ background:#d9e1bc; color:#162117; }
.gamecard[data-game="sorta-high"] .gamecard__meta{ color:#c1cbbd; }
.pin .intro > .gamecards{ opacity:1; translate:none; }
.pin .gamecard:hover{ translate:none; }

@media (hover:hover){
  .gamecard[data-game="sorta-high"]:hover .gamecard__painting{ scale:1.025; }
  .gamecard[data-game="sorta-high"] .gc-btn--primary:hover{ background:#edf1d8; color:#162117; }
  .gamecard[data-game="sorta-high"] .gamecard__actions .gc-btn--wishlist:hover{ background:#344d39; color:#f4f7e9; }
}
@media (min-width:640px){
  .gamecards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1200px){
  .intro__title{ max-width:11ch; font-size:min(var(--fs-display),4.35vw); }
  .intro__lede{ max-width:31%; font-size:clamp(1rem,1.32vw,1.25rem); }
  .intro__actions{ max-width:32%; gap:18px 22px; }
  .intro__actions .btn{ --bh:50px; padding-inline:20px; font-size:.875rem; }
  .intro__actions .go{ font-size:.8125rem; }
  .gamecards{
    position:absolute; right:0; top:51%; width:65%; max-width:960px;
    margin:0; transform:translateY(-50%); gap:clamp(16px,1.4vw,26px);
  }
  .pin .intro__title{ font-size:min(var(--fs-display),4.35vw,9svh); }
  .pin .intro__lede{ font-size:min(1.25rem,1.32vw,2.8svh); }
}
@media (max-width:1199.98px){
  .intro{ padding-bottom:72px; min-height:0; }
  .intro__title{ max-width:11ch; }
  .intro__lede{ max-width:42ch; }
  .gamecards{ align-self:center; }
}
@media (max-width:899.98px){
  .gamecards{ margin-top:clamp(140px,24svh,210px); }
}
@media (max-width:639.98px){
  .gamecards{ max-width:480px; gap:24px; }
}

/* Sorta High: quiet green, paper cream, and a warm shop window. This
   frame is ordinary document flow, including when the hero is pinned. */
.upcoming{ padding-top:clamp(48px,7vw,112px); }
.upcoming__frame{
  position:relative; isolation:isolate; overflow:hidden;
  width:min(100% - 2 * var(--g),var(--max)); margin-inline:auto;
  min-height:680px; border-radius:var(--r-xl); background:#14231c;
  box-shadow:0 0 0 1px rgb(201 216 171 / .18);
}
.upcoming__art{ position:absolute; inset:0; z-index:-2; display:block; }
.upcoming__art img{ display:block; width:100%; height:100%; object-fit:cover; object-position:70% 50%; }
.upcoming__frame::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,rgb(12 28 20 / .93),rgb(12 28 20 / .76) 30%,rgb(12 28 20 / .22) 57%,transparent 75%),
    linear-gradient(0deg,rgb(8 19 13 / .36),transparent 60%);
}
.upcoming__copy{ width:49%; max-width:720px; padding:clamp(28px,4.1vw,72px); }
.upcoming__kicker{ display:flex; align-items:center; gap:12px; color:#dae0cb; }
.upcoming__kicker::before{ content:""; width:28px; height:1px; background:#cbd6a5; }
.upcoming__kicker span{ color:#a3b19e; }
.upcoming__status{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:22px; color:#c2cdbb; font-size:.8125rem; }
.upcoming .chip--development{ border-color:rgb(228 189 119 / .3); color:#f1ddb6; }
.upcoming__wordmark{ display:block; width:min(100%,360px); height:auto; object-fit:contain; margin:22px 0 18px; }
.upcoming__genre{ color:#e0e7cf; font-size:1rem; font-weight:650; }
.upcoming__desc{ margin-top:12px; max-width:38ch; color:#c9d2c0; font-size:clamp(1rem,1.25vw,1.1875rem); line-height:1.65; }
.upcoming__cta{ margin-top:28px; background:#dbe3bb; color:#182319; }
.upcoming__cta:hover{ background:#eff2dc; color:#182319; }
.ftr__coming{ display:block; margin-top:2px; color:#aebe97; font-size:.6875rem; }
@media (max-width:1199.98px) and (min-width:900px){
  .upcoming__copy{ width:53%; padding:36px; }
}
@media (max-width:899.98px){
  .upcoming__frame{ min-height:0; }
  .upcoming__art{ inset:0 0 auto; height:min(680px,112vw); }
  .upcoming__art img{ object-position:center 32%; }
  .upcoming__frame::after{ background:linear-gradient(180deg,transparent 0%,rgb(20 35 28 / .08) 20%,#14231c min(680px,110vw)); }
  .upcoming__copy{ width:100%; max-width:none; padding:clamp(300px,90vw,600px) clamp(22px,5vw,40px) 36px; }
  .upcoming__wordmark{ width:min(100%,260px); }
  .upcoming__desc{ max-width:48ch; }
}
@media (max-width:399.98px){
  .upcoming__cta{ width:100%; --bh:52px; padding-inline:12px; font-size:.8125rem; gap:8px; }
}
@media (prefers-reduced-motion:reduce){
  .gamecard[data-game="sorta-high"] .gamecard__painting{ transition:none; }
}