/* HYPERSPACE screenshot gallery: small thumbnails that open larger */
.hsg { margin-top: 20px; border: 1px solid var(--line); background: rgba(0, 20, 10, 0.88); }
.hsg > summary { cursor: pointer; padding: 14px 18px; font: 12px var(--mono); letter-spacing: 0.3em; color: var(--green); list-style: none; }
.hsg > summary::-webkit-details-marker { display: none; }
.hsg > summary::before { content: "[+] "; }
.hsg[open] > summary::before { content: "[-] "; }
.hsg-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding: 0 18px 18px; }
.hsg-t { padding: 0; border: 1px solid var(--line); background: #000; cursor: zoom-in; aspect-ratio: 16 / 10; overflow: hidden; }
.hsg-t:hover, .hsg-t:focus-visible { border-color: var(--green); box-shadow: var(--glow); outline: none; }
.hsg-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hsg-box { position: fixed; inset: 0; z-index: 70; background: rgba(0, 4, 0, 0.94); display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; padding: 20px; }
.hsg-box img { max-width: min(1000px, 94vw); max-height: 74vh; border: 1px solid var(--line); }
.hsg-cap { text-align: center; max-width: 720px; padding-top: 12px; }
.hsg-cap b { display: block; font: 700 14px var(--head); letter-spacing: 0.14em; color: var(--mint); }
.hsg-nav { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }