.steam-recent{
  --game-card-gap:10px;
  --game-art-width:46%;
  min-width:0;
  margin:0;
  display:flex;
  flex-direction:column;
  container-type:inline-size;
}

.steam-recent[hidden]{display:none!important}
.steam-recent-head{display:block;margin-bottom:18px}
.steam-recent-label{color:var(--accent);font-family:"SFMono-Regular",Consolas,monospace;font-size:.62rem;font-weight:700;letter-spacing:.105em;text-transform:uppercase}
.steam-recent-title{margin:8px 0 0;color:#eef2f4;font-size:clamp(1.9rem,2.45vw,2.65rem);line-height:1;letter-spacing:-.05em}
.steam-recent-copy{margin:10px 0 0;max-width:560px;color:#87919a;font-size:.9rem;line-height:1.55}
.steam-recent-meta{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:11px}
.steam-recent-window{margin:0 0 12px;color:#74808a;font-family:"SFMono-Regular",Consolas,monospace;font-size:.55rem;letter-spacing:.075em;text-transform:uppercase}

.steam-view-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;width:100%;height:38px;padding:3px;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(8,11,14,.82)}
.steam-view-slider{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border:1px solid rgba(145,243,156,.25);border-radius:999px;background:rgba(145,243,156,.075);transform:translateX(0);transition:transform .28s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.steam-view-switch[data-active="most"] .steam-view-slider{transform:translateX(100%)}
.steam-view-tab{position:relative;z-index:1;border:0;background:transparent;color:#78838c;font-family:"SFMono-Regular",Consolas,monospace;font-size:.57rem;font-weight:700;letter-spacing:.075em;text-transform:uppercase;cursor:pointer}
.steam-view-tab:hover{color:#c2cbd1}
.steam-view-tab.is-active{color:#dffff0}
.steam-view-tab:disabled{opacity:.28;cursor:not-allowed}

.steam-deck-viewport{
  position:relative;
  width:100%;
  overflow:hidden;
  isolation:isolate;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.38) 10px,#000 28px,#000 calc(100% - 28px),rgba(0,0,0,.38) calc(100% - 10px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.38) 10px,#000 28px,#000 calc(100% - 28px),rgba(0,0,0,.38) calc(100% - 10px),transparent 100%);
}
.steam-recent-grid{position:relative;display:flex;flex:0 0 auto;flex-direction:column;gap:var(--game-card-gap);height:auto;overflow:visible;contain:layout style;will-change:transform}
.steam-recent-grid.is-preparing{visibility:hidden}

/* Artwork owns the card height. The image remains in normal flow at its native
   aspect ratio, while the information pane is pinned beside it and stretches
   to exactly the same height. There are intentionally no authored card heights. */
.steam-game-card{position:relative;display:block;flex:0 0 auto;width:100%;min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.10);border-radius:6px;background:rgba(9,12,15,.86);color:inherit;text-decoration:none;transform:translate3d(0,0,0);will-change:transform;transition:border-color .22s ease,background .22s ease}
.steam-game-card[href]:hover{border-color:rgba(145,243,156,.30);background:rgba(145,243,156,.028)}

.steam-game-art{position:relative;display:block;width:var(--game-art-width);min-width:0;overflow:hidden;background:#090d11}
.steam-game-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 70%,rgba(7,9,12,.06) 84%,rgba(7,9,12,.18) 100%);pointer-events:none}
.steam-game-art img{display:block;width:100%!important;height:auto!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:center center!important;filter:saturate(.96) brightness(.96);transform:none!important;transition:filter .22s ease;background:#090d11}
.steam-game-card[href]:hover .steam-game-art img{filter:saturate(1.04) brightness(1.02);transform:none!important}
.steam-game-card.no-art .steam-game-art{aspect-ratio:460/215}
.steam-game-card.no-art .steam-game-art::before{content:"GAME";position:absolute;inset:0;display:grid;place-items:center;color:#53606a;font-family:"SFMono-Regular",Consolas,monospace;font-size:.6rem;letter-spacing:.16em}

.steam-game-index{position:absolute;z-index:3;top:10px;left:11px;color:rgba(238,242,244,.78);font-family:"SFMono-Regular",Consolas,monospace;font-size:.52rem;font-weight:700;letter-spacing:.08em}
.game-platform-stamp{position:absolute;z-index:4;top:9px;right:9px;display:inline-flex;align-items:center;gap:5px;min-height:23px;padding:3px 7px 3px 5px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(5,8,11,.82);color:#dfe6ea;font-family:"SFMono-Regular",Consolas,monospace;font-size:.47rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;backdrop-filter:blur(7px)}
.game-platform-stamp svg{width:12px;height:12px;flex:0 0 12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.game-platform-stamp.is-steam{color:#c5def2}
.game-platform-stamp.is-xbox{color:#bef4a6}

.steam-game-info{position:absolute;top:0;right:0;bottom:0;left:var(--game-art-width);min-width:0;display:flex;flex-direction:column;padding:16px 20px 13px;overflow:hidden}
.steam-game-context{margin:0 0 6px;color:#87929b;font-family:"SFMono-Regular",Consolas,monospace;font-size:.53rem;font-weight:700;letter-spacing:.075em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steam-game-name{margin:0;overflow:hidden;color:#f0f3f5;font-size:clamp(1rem,1.12vw,1.22rem);font-weight:700;line-height:1.15;letter-spacing:-.022em;text-overflow:ellipsis;white-space:nowrap}
.steam-game-last-played{margin:7px 0 0;color:#9ba5ad;font-family:"SFMono-Regular",Consolas,monospace;font-size:.46rem;font-weight:650;letter-spacing:.045em;text-transform:uppercase}

.steam-achievements{min-height:0;margin-top:auto;padding-top:7px;border-top:1px solid rgba(255,255,255,.075);flex:0 0 auto;overflow:hidden}
.steam-achievements.is-empty{display:flex;align-items:flex-end}
.steam-achievement-unavailable{color:#59636b;font-family:"SFMono-Regular",Consolas,monospace;font-size:.43rem;letter-spacing:.055em;text-transform:uppercase}
.steam-latest-achievement{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label meta" "name meta";gap:1px 9px;margin-bottom:5px;min-width:0}
.steam-latest-achievement-label{grid-area:label;color:#91f39c;font-family:"SFMono-Regular",Consolas,monospace;font-size:.40rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase}
.steam-latest-achievement strong{grid-area:name;min-width:0;overflow:hidden;color:#e7ecef;font-size:.64rem;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}
.steam-latest-achievement-meta{grid-area:meta;align-self:end;color:#7f8992;font-family:"SFMono-Regular",Consolas,monospace;font-size:.38rem;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.steam-achievement-row{display:flex;align-items:center;gap:6px;min-width:0;color:#929ca4;font-family:"SFMono-Regular",Consolas,monospace;font-size:.44rem;letter-spacing:.04em;text-transform:uppercase}
.steam-achievement-row>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.steam-achievement-row strong{margin-left:auto;color:#dce2e6;font-weight:700;white-space:nowrap}
.steam-gamerscore{color:#9cf1a5;white-space:nowrap}
.steam-achievement-track{height:3px;margin-top:5px;overflow:hidden;background:rgba(255,255,255,.065)}
.steam-achievement-fill{display:block;height:100%;width:var(--achievement-progress,0%);background:var(--accent);opacity:.78}

.steam-deck-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:0 0 auto;margin-top:10px;padding-bottom:2px;color:#6f7982;font-family:"SFMono-Regular",Consolas,monospace;font-size:.49rem;letter-spacing:.06em;text-transform:uppercase}
.steam-deck-status{color:#818c95}

/* Only the artwork column width changes. Its intrinsic aspect ratio still owns
   the resulting card height at every responsive size. */
@container (max-width:700px){
  .steam-recent{--game-art-width:50%;--game-card-gap:10px}
  .steam-game-info{padding:13px 15px 11px}
  .steam-game-context{font-size:.48rem;margin-bottom:4px}
  .steam-game-name{font-size:1rem}
  .steam-game-last-played{margin-top:5px;font-size:.42rem}
  .steam-latest-achievement-meta{display:none}
  .steam-achievements{padding-top:6px}
}

@container (max-width:520px){
  .steam-recent{--game-art-width:55%;--game-card-gap:9px}
  .steam-game-info{padding:10px 11px 9px}
  .steam-game-context{font-size:.43rem}
  .steam-game-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.9rem;line-height:1.12}
  .steam-game-last-played{font-size:.38rem}
  .steam-latest-achievement{display:none}
  .steam-achievement-row{font-size:.39rem;gap:4px}
  .steam-gamerscore{display:none}
  .steam-achievement-track{margin-top:4px}
}

@container (max-width:390px){
  .steam-recent{--game-art-width:58%}
  .steam-game-info{padding:8px 9px 7px}
  .steam-game-context{font-size:.39rem}
  .steam-game-name{font-size:.82rem}
  .steam-game-last-played{display:none}
  .steam-achievement-unavailable{font-size:.36rem}
  .game-platform-stamp span{display:none}
}

@media(max-width:1120px){.steam-recent{max-width:900px}}
@media(max-width:620px){
  .steam-recent-head{margin-bottom:16px}.steam-recent-title{font-size:2rem}.steam-recent-copy{font-size:.9rem;line-height:1.5}.steam-view-switch{height:42px}
  .steam-deck-footer{align-items:flex-start;flex-direction:column;gap:6px;margin-top:12px}
}
@media(max-width:430px){.game-platform-stamp{top:7px;right:7px}.steam-game-index{top:8px;left:9px}}

@media(prefers-reduced-motion:reduce){
  .steam-game-card{will-change:auto;transition:none}
  .steam-recent-grid,.steam-view-slider{transition:none!important}
}