/* Minecraft image galleries: screenshots (and map art once it's restyled). */

.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.page a.shot {
    display: block; overflow: hidden; background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius-lg); color: var(--muted); text-decoration: none; transition: border-color var(--fast);
}
.page a.shot:hover { border-color: var(--accent); text-decoration: none; }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--card2); }
.shot span { display: block; padding: 6px 10px; font-size: 12px; }

/* one screenshot: fills the window between header and footer; cover + bottom anchor crops the top if it doesn't fit */
body.shot-view { height: 100vh; height: 100dvh; overflow: hidden; }
.shot-view .page { position: relative; flex: 1 1 0; min-height: 0; max-width: none; padding: 0; }
.shot-view .site-footer { margin-top: 0; }
.shot-full { position: absolute; inset: 0; margin: 0; background: var(--sunken); }
.shot-full img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.shot-bar {
    position: absolute; left: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: calc(100% - 32px);
    margin: 0; padding: 8px 8px 8px 12px; background: rgba(27, 27, 27, .85); border-radius: var(--radius-lg); font-size: 14px;
}
.shot-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page a.btn { color: var(--text); }

/* skins: rendered player models, downloaded on click */
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 12px; }
.page a.skin {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
    color: var(--text); text-decoration: none; transition: border-color var(--fast);
}
.page a.skin:hover { border-color: var(--accent); text-decoration: none; }
.page a.skin.skin-hl { border-color: #6c4b8f; } /* the purple skin keeps its purple frame, same tint as .badge.p */
.skin img { display: block; width: 100%; max-width: 180px; height: auto; }
.skin span { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.skin .badge { font-weight: 400; }

/* map art: 128px maps scaled up crisp */
.maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.maps img {
    display: block; width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated;
    background: var(--card2); border: 1px solid var(--line); border-radius: var(--radius);
}