.steam-recent{
  /* The game viewport is always four Steam-sized slots tall. The artwork
     column is 46% wide and Steam headers are ~460:215, so 21.5cqw keeps one
     slot near the native Steam card proportion. A two-slot Xbox card then
     lands close to square on the artwork side without changing parent size. */
  --game-slot-height:clamp(96px,21.5cqw,260px);
  --game-deck-height:calc((var(--game-slot-height) * 4) + (var(--game-card-gap) * 3));
  --xbox-art-width:calc((var(--game-slot-height) * 2) + var(--game-card-gap));
}

.steam-deck-viewport{
  height:var(--game-deck-height)!important;
  min-height:var(--game-deck-height)!important;
  max-height:var(--game-deck-height)!important;
  overflow:hidden!important;
}

.steam-recent-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:repeat(4,var(--game-slot-height))!important;
  grid-auto-flow:row!important;
  grid-auto-rows:var(--game-slot-height)!important;
  align-content:start!important;
  gap:var(--game-card-gap)!important;
  width:100%!important;
  height:var(--game-deck-height)!important;
  min-height:var(--game-deck-height)!important;
  max-height:var(--game-deck-height)!important;
  overflow:hidden!important;
}

.steam-game-card{
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  align-self:stretch!important;
  contain:layout paint style;
}

.steam-game-card[data-platform="steam"]{
  grid-row:span 1!important;
}

.steam-game-card[data-platform="xbox"]{
  grid-row:span 2!important;
}

.steam-game-art{
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:var(--game-art-width)!important;
  height:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
}

.steam-game-index{
  display:none!important;
}

.steam-game-art img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
}

/* Xbox artwork is square. Size the art column from the actual two-slot card
   height instead of a percentage of card width so contain has no side gap. */
.steam-game-card[data-platform="xbox"] .steam-game-art{
  width:var(--xbox-art-width)!important;
}

.steam-game-card[data-platform="xbox"] .steam-game-art img{
  object-fit:contain!important;
  object-position:center center!important;
}

.steam-game-info{
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:var(--game-art-width)!important;
  height:auto!important;
  min-height:0!important;
}

.steam-game-card[data-platform="xbox"] .steam-game-info{
  left:var(--xbox-art-width)!important;
}

/* Fixed one-slot Steam cards cannot allow the flex column to shrink the title
   line box. Keep the header text at its authored height and let the flexible
   space remain between playback metadata and achievements. */
.steam-game-card[data-platform="steam"] .steam-game-context,
.steam-game-card[data-platform="steam"] .steam-game-name,
.steam-game-card[data-platform="steam"] .steam-game-last-played{
  flex:0 0 auto!important;
}

.steam-game-card[data-platform="steam"] .steam-game-name{
  min-height:1.12em!important;
}

.steam-game-info,
.steam-achievements,
.steam-latest-achievement,
.steam-achievement-row{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.steam-recent-grid.is-preparing{
  visibility:hidden!important;
}

/* Preserve the approved internal card composition above. The only desktop
   adjustment here is external viewport sizing so widescreen layouts cannot
   collapse the four-slot deck. */
@media (min-width:1121px){
  .about-page .about-page-grid{
    align-items:stretch!important;
  }
  .about-page .about-page-grid>.steam-recent{
    align-self:stretch!important;
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
  }
  .about-page .about-page-grid>.steam-recent .steam-deck-viewport{
    flex:1 0 var(--game-deck-height)!important;
    height:auto!important;
    min-height:var(--game-deck-height)!important;
    max-height:none!important;
    overflow:hidden!important;
  }
  .about-page .about-page-grid>.steam-recent .steam-recent-grid{
    overflow:visible!important;
  }
}