/* ===== Featured "1 hero + 4 grid" widget (Underforyou.png look) — used for friend-played &
	   favourited games. Big highlighted game on the left, a 2x2 grid of smaller games on the right. */
	.feat-widget { padding: 0 36px; margin: 0 0 30px; }
	.feat-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
	.feat-head h2 { font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
	.feat-sub { font-size: 13px; color: var(--muted); font-weight: 600; }
	.feat-sub b { color: var(--text); font-weight: 800; }
	.feat-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; }
	.feat-hero { position: relative; min-width: 0; }
	.feat-grid { min-width: 0; display: grid; grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr; gap: 9px; }
	.feat-tile { position: relative; display: block; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden;
		background: #0a0c12 center/cover no-repeat; border: 1px solid var(--border); cursor: pointer;
		transition: transform .14s, border-color .14s, box-shadow .14s; }
	/* Hero fills its (stretched) grid cell via absolute inset — reliable regardless of % height quirks. */
	.feat-hero .feat-tile { position: absolute; inset: 0; aspect-ratio: auto; height: auto; }
	/* Empty slot — holds the grid shape when there are fewer than 5 games (no art, no hover/click). */
	.feat-tile.empty { background: var(--card); border-style: dashed; cursor: default; pointer-events: none; }
	.feat-tile.empty::after { display: none; }
	.feat-tile:not(.empty):hover { transform: translateY(-2px); border-color: var(--accent);
		box-shadow: 0 8px 22px rgba(0,0,0,.5), 0 0 0 1px rgba(50,115,235,.25); }
	.feat-tile::after { content: ""; position: absolute; inset: 0;
		background: linear-gradient(to top, rgba(6,8,13,.85) 0%, rgba(6,8,13,.15) 38%, transparent 62%); }
	.feat-cap { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 2;
		font-family: var(--game); color: #fff; font-weight: 900; letter-spacing: -.2px; line-height: 1.15;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
	.feat-hero .feat-cap { font-size: 22px; left: 14px; right: 14px; bottom: 12px; }
	.feat-grid .feat-cap { font-size: 12.5px; }
	.feat-foot { display: flex; justify-content: flex-end; margin-top: 9px; }
	.feat-seemore { font-family: var(--game); font-size: 13px; font-weight: 800; color: var(--muted);
		cursor: pointer; transition: color .12s, transform .12s; }
	.feat-seemore:hover { color: var(--accent); transform: translateX(2px); }
	@media (max-width: 760px) { .feat-body { flex-direction: column; } .feat-hero .feat-tile { aspect-ratio: 16/9; } }