/* "Recently played" (games/recent.mjs): right of the /games header on wide screens, a scrolling row under the search
   on smaller ones, and a box in the side column of a game page. */
.ix-recent{min-width:0}
.ix-recent-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.ix-recent h2{font-family:var(--disp);font-weight:800;font-stretch:115%;font-size:17px;letter-spacing:-.01em;outline:none}
.ix-recent-clear{font-size:13px;color:var(--dim);padding:4px 8px;margin:-4px -8px;border-radius:8px}
.ix-recent-clear:hover{color:#fff;background:var(--bg-3)}
.ix-recent-clear:focus-visible,.ix-recent a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ix-recent ul{list-style:none}
.ix-recent a{display:block;text-decoration:none;color:var(--text)}
.ix-recent img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:8px;background:#000;transition:transform .18s}
.ix-recent a:hover img{transform:translateY(-2px)}
.ix-recent li span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:5px;font-size:13px;line-height:1.3}
.ix-recent a:hover span{color:#fff;text-decoration:underline}
.ix-recent p{font-size:14px;color:var(--dim)}

/* /games header */
.ix-recent-head{margin-top:22px;max-width:760px}
.ix-recent-head ul{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) 4px}
.ix-recent-head ul::-webkit-scrollbar{display:none}
.ix-recent-head li{flex:0 0 clamp(132px,38vw,168px);scroll-snap-align:start;scroll-margin-left:var(--pad)}
.ix-recent-head.empty{display:none}
@media (min-width:1100px){
  .head.has-recent:not(.ix-1w-head){display:grid;grid-template-columns:minmax(0,1fr) clamp(270px,22vw,320px);column-gap:clamp(28px,3vw,56px);align-items:start}
  .head.has-recent:not(.ix-1w-head)>*{grid-column:1}
  .head.has-recent:not(.ix-1w-head)>.ix-recent-head{grid-column:2;grid-row:1 / span 5;margin-top:0;padding:16px;border-radius:14px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
  .head.has-recent:not(.ix-1w-head)>.ix-recent-head.empty{display:block}
  .head.has-recent:not(.ix-1w-head) .ix-recent-head ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;overflow:visible;margin:0;padding:0}
  .ix-recent-head.empty p{padding:18px 0 4px}
}

/* game page side column */
.ix-recent-side{margin-top:16px;border-radius:14px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);padding:16px 20px 18px}
.ix-recent-side ul{display:grid;gap:10px}
.ix-recent-side a{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center}
.ix-recent-side li span{margin-top:0;font-size:14px}
@media (max-width:900px){
  .ix-recent-side ul{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px 2px}
  .ix-recent-side ul::-webkit-scrollbar{display:none}
  .ix-recent-side li{flex:0 0 clamp(132px,38vw,168px)}
  .ix-recent-side a{display:block}
  .ix-recent-side li span{margin-top:5px;font-size:13px;-webkit-line-clamp:1}
}