/* "Podobne gry": beside the game (under it on narrow screens) and copied to the end-of-round screen.
   The grid follows the block's own width: two columns in the side column and on phones, three (six games) or
   two and then four (four games) where there is room. */
.similar-games{container-type:inline-size;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.similar-games h2,.similar-games h3{margin:0 0 14px;color:var(--ink);font-size:16px;letter-spacing:-.01em}
.similar-games-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;margin:0;padding:0;list-style:none}
.similar-games-list a{display:flex;flex-direction:column;gap:3px;height:100%;color:var(--ink);font-size:13px;font-weight:700;line-height:1.3;text-decoration:none}
.similar-thumb{display:grid;place-items:center;aspect-ratio:4/3;margin-bottom:5px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--surface);transition:border-color .15s,box-shadow .15s,transform .15s}
.similar-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.similar-icon{color:var(--ink-2);font-size:44px;line-height:1}
.similar-games-list a:hover .similar-thumb{border-color:var(--line-strong);box-shadow:0 6px 16px rgb(16 24 40/.1);transform:translateY(-1px)}
.similar-games-list a:hover .similar-name{color:var(--accent-strong)}
.similar-games-list a:focus-visible{outline:3px solid var(--accent-strong);outline-offset:3px;border-radius:10px}
.similar-games-list small{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.06em}
.similar-games-list .online-count{color:#177245;font-size:10px;font-weight:700}
.similar-games-list .online-count[hidden]{display:none}
@container (min-width:520px){
.similar-games-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px}
.similar-games-list[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.similar-games-list a{font-size:14px}
}
@container (min-width:720px){.similar-games-list[data-count="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.similar-thumb{transition:none}.similar-games-list a:hover .similar-thumb{transform:none}}
/* The end-of-round copy sits in the arena, under the result and the account invite. */
.similar-games-end{align-self:stretch;box-sizing:border-box;width:100%;max-width:880px;margin:28px auto 0;background:var(--surface-2);box-shadow:none;text-align:left}
/* Fullscreen scales the whole round screen to the window, so the copy would shrink the board: it stays out there. */
html.gibo-fullscreen #play-area .similar-games{display:none}
/* Under the game on narrow screens, across the full width of the side area. There it would repeat the end-of-round
   copy right below it, so it steps aside while the copy is shown. */
@media(max-width:850px){.side .similar-games{grid-column:1/-1}.play-layout:has(.similar-games-end) .side .similar-games{display:none}}