docs(site): home page screenshot strip, 16 games, six across

Replaces the 2x2 hero mosaic with a sideways-scrolling strip of gameplay
frames (six visible on desktop, three on tablets, two on phones; scroll
snap, beveled scrollbar, Prev/Next buttons from gallery.js). Every card
opens in the gallery lightbox with the same red hover as the app page.

Twelve new captures from core 5d2ea0b8 at 2x internal resolution, true
colour and the Accurate blitter: Doom, Wolfenstein 3D, Missile Command 3D,
Atari Karts, Iron Soldier, Cybermorph, Super Burnout and Checkered Flag
from the headless harness with scripted input, and Tempest 2000, Raiden,
Defender 2000 and Ultra Vortek through crt-lottes, crt-aperture,
crt-easymode and crt-royale in the desktop app (slang-shaders e1d75632).
The four mosaic frames (Alien vs Predator, Iron Soldier, Skyhammer, Hover
Strike) stay as cards. WebP: 480px thumbnails, 960px full size.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

site/pages/index.html

@@ -17,16 +17,112 @@
     <a class="btn secondary" href="compatibility.html">Compatibility</a>
     <a class="btn secondary" href="enhancements.html">Enhancements</a>
   </p>
-  <figure class="crt-frame mosaic smooth">
-    <div class="crt-bezel">
-      <div class="crt-screen">
-        <img src="assets/hero_mosaic.webp"
-             alt="Four frames rendered by the core: an Alien vs Predator corridor ending in a chevron door, Iron Soldier's teal mech firing a rifle, the Skyhammer cockpit facing a red BREW sign, and the Hover Strike cockpit over a cratered moonscape"
-             width="964" height="724">
-      </div>
+  <div class="strip-wrap">
+    <div class="strip-bar" hidden>
+      <span class="dl-label">16 games, rendered by the core</span>
+      <button type="button" class="dl-btn strip-prev" aria-label="Previous screenshots">&lsaquo; Prev</button>
+      <button type="button" class="dl-btn strip-next" aria-label="Next screenshots">Next &rsaquo;</button>
     </div>
-    <figcaption>Alien vs Predator, Iron Soldier, Skyhammer, Hover Strike. Rendered by the core with 2x internal resolution, true colour, the Accurate blitter and per-title defaults off.</figcaption>
-  </figure>
+    <ul class="strip" aria-label="Gameplay screenshots">
+      <li><figure class="gal-card">
+        <a class="gal-link" href="assets/home/doom.webp" aria-label="Enlarge: Doom">
+          <img src="assets/home/doom-480.webp" width="480" height="360" loading="lazy" alt="Doom: An outdoor courtyard on E1M1 with a green-floored pit; ammo 50, health 100%">
+        </a>
+        <figcaption><strong>Doom</strong> <span class="gal-cap">An outdoor courtyard on E1M1 with a green-floored pit; ammo 50, health 100%. <em>2x internal resolution, true colour, Accurate blitter.</em></span></figcaption>
+      </figure></li>
+      <li><figure class="gal-card">
+        <a class="gal-link" href="assets/home/tempest-2000-crt-lottes.webp" aria-label="Enlarge: Tempest 2000">
+          <img src="assets/home/tempest-2000-crt-lottes-480.webp" width="480" height="360" loading="lazy" alt="Tempest 2000: The claw at the rim of a flat lane web, flippers climbing toward it">
+        </a>
+        <figcaption><strong>Tempest 2000</strong> <span class="badge plain">crt-lottes</span> <span class="gal-cap">The claw at the rim of a flat lane web, flippers climbing toward it. <em>Shader: crt-lottes.</em></span></figcaption>
+      </figure></li>
+      <li><figure class="gal-card">
+        <a class="gal-link" href="assets/home/hero-avp.webp" aria-label="Enlarge: Alien vs Predator">
+          <img src="assets/home/hero-avp.webp" width="480" height="360" loading="lazy" alt="Alien vs Predator: An Alien&#x27;s claw in a corridor facing a chevron-panelled door">
+        </a>
+        <figcaption><strong>Alien vs Predator</strong> <span class="gal-cap">An Alien's claw in a corridor facing a chevron-panelled door. <em>2x internal resolution, true colour, Accurate blitter.</em></span></figcaption>
+      </figure></li>
+      <li><figure class="gal-card">
+        <a class="gal-link" href="assets/home/wolfenstein-3d.webp" aria-label="Enlarge: Wolfenstein 3D">
+          <img src="assets/home/wolfenstein-3d-480.webp" width="480" height="360" loading="lazy" alt="Wolfenstein 3D: A guard in a blue-stone corridor; 100 health, 23 ammo">
+        </a>
+        <figcaption><strong>Wolfenstein 3D</strong> <span class="gal-cap">A guard in a blue-stone corridor; 100 health, 23 ammo. <em>2x internal resolution, true colour, Accurate blitter.</em></span></figcaption>
+      </figure></li>
+      <li><figure class="gal-card">
+        <a class="gal-link" href="assets/home/raiden-crt-aperture.webp" aria-label="Enlarge: Raiden">
+          <img src="assets/home/raiden-crt-aperture-480.webp" width="480" height="360" loading="lazy" alt="Raiden: Over forest and beach, a red fighter below a large craft and an explosion">
+        </a>
+        <figcaption><strong>Raiden</strong> <span class="badge plain">crt-aperture</span> <span class="gal-cap">Over forest and beach, a red fighter below a large craft and an explosion. <em>Shader: crt-aperture.</em></span></figcaption>
+      </figure></li>
+      <li><figure class="gal-card">
+        <a class="gal-link" href="assets/home/missile-command-3d.webp" aria-label="Enlarge: Missile Command 3D">
+          <img src="assets/home/missile-command-3d-480.webp" width="480" height="360" loading="lazy" alt="Missile Command 3D: Two fireballs and an impact flash over a desert base, a missile coming down">
+        </a>
+        <figcaption><strong>Missile Command 3D</strong> <span class="gal-cap">Two fireballs and an impact flash over a desert base, a missile coming down. <em>2x internal resolution, true colour, Accurate blitter.</em></span></figcaption>
+      </figure></li>
+      <li><figure class="gal-card">
+        <a class="gal-link" href="assets/home/hero-ironsoldier.webp" aria-label="Enlarge: Iron Soldier">
+          <img src="assets/home/hero-ironsoldier.webp" width="480" height="360" loading="lazy" alt="Iron Soldier: The teal mech firing a rifle in the attract sequence">
+        </a>
+        <figcaption><strong>Iron Soldier</strong> <span class="gal-cap">The teal mech firing a rifle. <em>2x internal resolution, true colour, Accurate blitter.</em></span></figcaption>
+      </figure></li>
+      <li><figure class="gal-card">
+        <a class="gal-link" href="assets/home/defender-2000-crt-easymode.webp" aria-label="Enlarge: Defender 2000">
+          <img src="assets/home/defender-2000-crt-easymode-480.webp" width="480" height="360" loading="lazy" alt="Defender 2000: The ship firing a laser over desert mountains: “Catch that humanoid!”">
+        </a>
+        <figcaption><strong>Defender 2000</strong> <span class="badge plain">crt-easymode</span> <span class="gal-cap">The ship firing a laser over desert mountains: &ldquo;Catch that humanoid!&rdquo; <em>Shader: crt-easymode.</em></span></figcaption>
+      </figure></li>
+      <li><figure class="gal-card">
+        <a class="gal-link" href="assets/home/atari-karts.webp" aria-label="Enlarge: Atari Karts">
+          <img src="assets/home/atari-karts-480.webp" width="480" height="360" loading="lazy" alt="Atari Karts: Race start on a purple alien plain, lap 1 of 5">
+        </a>
+        <figcaption><strong>Atari Karts</strong> <span class="gal-cap">Race start on a purple alien plain, lap 1 of 5. <em>2x internal resolution, true colour, Accurate blitter.</em></span></figcaption>
+      </figure></li>
+      <li><figure class="gal-card">
+        <a class="gal-link" href="assets/home/hero-skyhammer.webp" aria-label="Enlarge: Skyhammer">
+          <img src="assets/home/hero-skyhammer.webp" width="480" height="360" loading="lazy" alt="Skyhammer: Cockpit view facing a red BREW sign">
+        </a>
+        <figcaption><strong>Skyhammer</strong> <span class="gal-cap">Cockpit view facing a red BREW sign. <em>2x internal resolution, true colour, Accurate blitter.</em></span></figcaption>
+      </figure></li>
+      <li><figure class="gal-card">
+        <a class="gal-link" href="assets/home/cybermorph.webp" aria-label="Enlarge: Cybermorph">
+          <img src="assets/home/cybermorph-480.webp" width="480" height="360" loading="lazy" alt="Cybermorph: A fireball beside the ship; 18 pods remaining">
+        </a>
+        <figcaption><strong>Cybermorph</strong> <span class="gal-cap">A fireball beside the ship; 18 pods remaining. <em>2x internal resolution, true colour, Accurate blitter.</em></span></figcaption>
+      </figure></li>
+      <li><figure class="gal-card">
+        <a class="gal-link" href="assets/home/ultra-vortek-crt-royale.webp" aria-label="Enlarge: Ultra Vortek">
+          <img src="assets/home/ultra-vortek-crt-royale-480.webp" width="480" height="360" loading="lazy" alt="Ultra Vortek: A gold-armoured fighter against a stone-skinned opponent in a gothic hall">
+        </a>
+        <figcaption><strong>Ultra Vortek</strong> <span class="badge plain">crt-royale</span> <span class="gal-cap">A gold-armoured fighter against a stone-skinned opponent in a gothic hall. <em>Shader: crt-royale.</em></span></figcaption>
+      </figure></li>
+      <li><figure class="gal-card">
+        <a class="gal-link" href="assets/home/super-burnout.webp" aria-label="Enlarge: Super Burnout">
+          <img src="assets/home/super-burnout-480.webp" width="480" height="360" loading="lazy" alt="Super Burnout: Fourth place at about 115 mph, a city skyline ahead">
+        </a>
+        <figcaption><strong>Super Burnout</strong> <span class="gal-cap">Fourth place at about 115 mph, a city skyline ahead. <em>2x internal resolution, true colour, Accurate blitter.</em></span></figcaption>
+      </figure></li>
+      <li><figure class="gal-card">
+        <a class="gal-link" href="assets/home/hero-hoverstrike.webp" aria-label="Enlarge: Hover Strike">
+          <img src="assets/home/hero-hoverstrike.webp" width="480" height="360" loading="lazy" alt="Hover Strike: Cockpit over a cratered moonscape with Earth on the horizon">
+        </a>
+        <figcaption><strong>Hover Strike</strong> <span class="gal-cap">Cockpit over a cratered moonscape with Earth on the horizon. <em>2x internal resolution, true colour, Accurate blitter.</em></span></figcaption>
+      </figure></li>
+      <li><figure class="gal-card">
+        <a class="gal-link" href="assets/home/checkered-flag.webp" aria-label="Enlarge: Checkered Flag">
+          <img src="assets/home/checkered-flag-480.webp" width="480" height="360" loading="lazy" alt="Checkered Flag: A red open-wheel car, fourth of six on lap 1">
+        </a>
+        <figcaption><strong>Checkered Flag</strong> <span class="gal-cap">A red open-wheel car, fourth of six on lap 1. <em>2x internal resolution, true colour, Accurate blitter.</em></span></figcaption>
+      </figure></li>
+      <li><figure class="gal-card">
+        <a class="gal-link" href="assets/home/iron-soldier.webp" aria-label="Enlarge: Iron Soldier">
+          <img src="assets/home/iron-soldier-480.webp" width="480" height="360" loading="lazy" alt="Iron Soldier: The Manipulator mech cockpit over city blocks and snowy mountains">
+        </a>
+        <figcaption><strong>Iron Soldier</strong> <span class="gal-cap">The Manipulator mech cockpit over city blocks and snowy mountains. <em>2x internal resolution, true colour, Accurate blitter.</em></span></figcaption>
+      </figure></li>
+    </ul>
+    <p class="strip-note">Real core frames at 2x internal resolution with true colour and the Accurate blitter; four go through a RetroArch CRT shader in the desktop app. Click one to enlarge.</p>
+  </div>
 </div>
 
 <section class="win">
@@ -238,3 +334,5 @@
     </p>
   </div>
 </section>
+
+<script src="assets/js/gallery.js" defer></script>

site/style.css

@@ -564,10 +564,6 @@ figcaption {
     repeating-linear-gradient(0deg,
       rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
 }
-/* Hero mosaic: four real frames, so no scanline/vignette overlay and a
- * smooth (not pixelated) downscale. */
-.crt-frame.mosaic { max-width: 46rem; }
-.crt-frame.mosaic .crt-screen::after { display: none; }
 
 .crt-frame figcaption {
   font-family: var(--font-mono);
@@ -1053,6 +1049,7 @@ dialog.lightbox::backdrop { background: rgba(0, 0, 0, 0.78); }
   grid-auto-flow: column;
   grid-auto-columns: calc((100% - (var(--strip-cols) - 1) * var(--strip-gap)) / var(--strip-cols));
   gap: var(--strip-gap);
+  max-width: none;
   margin: 0;
   padding: 0 0 0.6rem;
   list-style: none;
@@ -1063,11 +1060,18 @@ dialog.lightbox::backdrop { background: rgba(0, 0, 0, 0.78); }
   scrollbar-color: var(--red-fill) var(--code-bg);
 }
 .strip > li { margin: 0; scroll-snap-align: start; min-width: 0; }
-.strip .gal-card { height: 100%; }
+.strip .gal-card { position: relative; height: 100%; }
 .strip .gal-link { padding: 3px; }
 .strip .gal-card img { aspect-ratio: 4 / 3; object-fit: cover; }
 .strip .gal-card figcaption { padding: 0.3rem 0.45rem 0.4rem; font-size: 0.74rem; line-height: 1.3; }
 .strip .gal-card figcaption strong { font-size: 0.78rem; }
+/* In the strip a card shows the title (and the shader, when there is one);
+ * the full caption stays in the markup for the lightbox and screen readers. */
+.strip .gal-cap {
+  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+.strip .gal-card figcaption .badge { margin-top: 0.2rem; font-size: 0.62rem; }
 .strip::-webkit-scrollbar { height: 14px; -webkit-appearance: none; appearance: none; }
 .strip::-webkit-scrollbar-track {
   background: var(--code-bg);