.collection-article > h1 { max-width:25ch; text-wrap:balance; }
.collection-article > .lead { max-width:70ch; }
.collection-article .kriterii section { padding:1.05rem 1.2rem; }
.collection-article .kriterii .ic { width:2rem; height:2rem; margin-bottom:.55rem; }
.collection-article .kriterii p { font-size:.88rem; line-height:1.65; }
.collection-game-nav { margin:1.5rem 0 2rem; }
.collection-game-nav > p { margin:0 0 .65rem; color:var(--dim2); font-size:.8rem; }
.collection-game-nav > div { display:flex; flex-wrap:wrap; gap:.5rem; }
.collection-game-nav a { display:inline-flex; gap:.5rem; align-items:center; padding:.45rem .7rem; border:1px solid var(--line); border-radius:7px; background:var(--card); color:var(--text); text-decoration:none; font-size:.85rem; }
.collection-game-nav a span { color:var(--accent); font-size:.75rem; font-variant-numeric:tabular-nums; }
.collection-game-nav a:hover { border-color:var(--accent); background:var(--card-hover); }
.picks > li.has-gallery { display:block; scroll-margin-top:6rem; }
.picks > li.has-gallery > .body { padding:1.4rem; }
.has-gallery h3 { line-height:1.35; font-size:1.4rem; margin-bottom:.8rem; }
.has-gallery h3::before { display:inline-flex; align-items:center; justify-content:center; width:1.7rem; height:1.7rem; border-radius:7px; border:1px solid var(--line); margin-right:.65rem; font-size:.9rem; vertical-align:middle; }
.has-gallery .tags { gap:.35rem; margin-bottom:.8rem; }
.picks .has-gallery .tags li { font-size:.7rem; }
.picks .has-gallery p { line-height:1.8; font-size:.95rem; }
.picks .has-gallery .game-details-link { display:inline-flex; align-items:center; gap:.5rem; margin-top:1.05rem; font-size:.88rem; font-weight:600; text-underline-offset:4px; }
.collection-gallery { min-width:0; align-self:start; margin:1.25rem 0 0; }
.collection-gallery-frames { border-radius:10px; overflow:hidden; background:#101827; border:1px solid var(--line); }
.collection-gallery-frame { position:relative; display:block; width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; touch-action:pan-y pinch-zoom; }
.collection-gallery-frame[hidden] { display:none; }
.collection-gallery-frame img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; border-radius:0; max-height:19rem; }
.collection-gallery-zoom { position:absolute; bottom:.6rem; right:.6rem; padding:.2rem .5rem; color:#fff; background:#101827cc; border-radius:5px; font-size:.68rem; opacity:0; transition:opacity .15s; }
.collection-gallery-frame:hover .collection-gallery-zoom,.collection-gallery-frame:focus-visible .collection-gallery-zoom { opacity:1; }
.collection-gallery-thumbs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.45rem; margin-top:.6rem; }
.collection-gallery-thumbs[hidden] { display:none; }
.collection-gallery-thumbs button { min-width:0; padding:2px; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:transparent; cursor:pointer; opacity:.6; }
.collection-gallery-thumbs button[aria-pressed="true"] { border-color:var(--accent); opacity:1; }
.collection-gallery-thumbs button:hover { opacity:1; }
.collection-gallery-thumbs img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:3px; }
.collection-gallery-nav { display:flex; align-items:center; justify-content:center; gap:.8rem; margin-top:.55rem; color:var(--dim); font-size:.75rem; font-variant-numeric:tabular-nums; }
.collection-gallery-nav[hidden] { display:none; }
.collection-gallery-nav button { display:grid; place-items:center; min-width:44px; min-height:38px; padding:0 .6rem; font:inherit; color:var(--text); background:transparent; border:1px solid var(--line); border-radius:7px; cursor:pointer; }
.collection-gallery-nav button:hover { background:var(--card-hover); border-color:var(--dim2); }
.collection-gallery button:focus-visible,.collection-game-nav a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.collection-gallery-dialog { position:fixed; box-sizing:border-box; width:min(95vw,1440px); max-width:95vw; max-height:96dvh; padding:12px; border:1px solid var(--line); border-radius:12px; background:#142137; color:var(--text); }
.collection-gallery-dialog::backdrop { background:#08111be8; }
.collection-gallery-dialog > img { display:block; width:100%; height:auto; max-height:calc(96dvh - 140px); object-fit:contain; border-radius:0; touch-action:pan-y pinch-zoom; }
.collection-gallery-dialog-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.65rem; font-size:.85rem; }
.collection-gallery-dialog-bar button { flex-shrink:0; min-height:40px; padding:.4rem .65rem; border:1px solid var(--line); border-radius:7px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
@media(min-width:62rem) { .picks > li.has-gallery > .body { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); grid-template-rows:min-content min-content 1fr min-content; column-gap:2rem; padding:1.7rem; align-items:start; } .has-gallery .body > :not(.collection-gallery) { grid-column:1; min-width:0; } .has-gallery .collection-gallery { grid-column:2; grid-row:1 / span 4; margin:0; } }
@media(max-width:40rem) { .picks > li.has-gallery { scroll-margin-top:10rem; } .picks > li.has-gallery > .body { padding:1rem; gap:1rem; } .has-gallery h3 { font-size:1.2rem; } .collection-gallery-nav button { min-height:44px; } .collection-gallery-thumbs button { min-height:44px; } .collection-gallery-zoom { opacity:1; } .collection-game-nav a { font-size:.78rem; } }
@media(prefers-reduced-motion:reduce) { .collection-gallery-zoom { transition:none; } }