#screenshots { scroll-margin-top: 70px; }
.screenshot-group { margin-top: 28px; }
.screenshot-group h2 { margin-bottom: 14px; color: var(--teal); }
.screenshot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.screenshot {
    display: block; overflow: hidden; border: 1px solid var(--rule);
    border-radius: 12px; background: var(--panel); text-decoration: none;
}
.screenshot:hover, .screenshot:focus-visible { border-color: var(--sun); }
.screenshot:focus-visible { outline: 2px solid var(--sun); outline-offset: 4px; }
.screenshot img {
    display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain;
    background: #0f0a1a;
}
.screenshot-caption {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 12px 16px; font-size: 13px; color: var(--ink-soft);
}
.screenshot-caption span:last-child { color: var(--sun-soft); }
@media (max-width: 600px) { .screenshot-grid { grid-template-columns: 1fr; } }
.screenshot-group h2 { font-size: 20px; }
body.screenshot-modal-open { overflow: hidden; }
.screenshot-viewer {
    width: min(1320px, calc(100vw - 32px)); max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px); padding: 0;
    color: var(--ink); background: var(--panel); border: 1px solid var(--rule);
    border-radius: 14px; box-shadow: 0 24px 100px rgba(0, 0, 0, 0.6);
}
.screenshot-viewer::backdrop { background: rgba(5, 3, 10, 0.88); }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.viewer-caption { min-width: 0; font-size: 14px; }
.viewer-count { display: block; font-size: 12px; color: var(--ink-soft); }
.viewer-controls { display: flex; gap: 8px; flex-shrink: 0; }
.viewer-controls button {
    min-width: 44px; min-height: 44px; border: 1px solid var(--rule); border-radius: 8px;
    background: var(--night); color: var(--ink); cursor: pointer; font: inherit; font-size: 20px;
}
.viewer-controls button:hover { border-color: var(--sun); }
.viewer-controls button:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.viewer-image { display: block; width: 100%; max-height: calc(100dvh - 150px); object-fit: contain; background: #0f0a1a; }
.viewer-image[hidden] { display: none; }
.viewer-error { margin: 0; padding: 24px; }
@media (max-width: 600px) {
    .viewer-toolbar { padding: 10px; gap: 8px; }
    .viewer-caption { font-size: 12px; }
    .viewer-controls { gap: 4px; }
}