Mobile optimization + cross-links (RTS game, Jackrong HF, Tom X, Kyle X)

README.md

@@ -37,6 +37,14 @@ A single-file, **interactive animated slide deck** introducing **Qwopus 3.6 35B-
 
 Served via `llama-server` (llama.cpp) with the bundled NextN/MTP head for self-speculative decoding (~250 tok/s), exposed over an OpenAI-compatible endpoint. OpenCode was pointed at the local server and the model wrote the whole single-file deck — HTML, CSS, JS, and inline SVG — by reading and editing the file with tools.
 
+## 🔗 Related & credits
+
+- ▶ **Play the RTS game it built:** [AETHER DOMINION](https://huggingface.co/spaces/KyleHessling1/aether-dominion-qwopus36-35b-coder) — a full single-file sci-fi RTS, also generated by the model in OpenCode.
+- 🤗 **Model — Jackrong:** [huggingface.co/Jackrong](https://huggingface.co/Jackrong)
+- 🛠️ **Hardware & live testing — Kyle Hessling:** [@KyleHessling1](https://x.com/KyleHessling1)
+- 📊 **Benchmarks — Tom Turney:** [@no_stp_on_snek](https://x.com/no_stp_on_snek)
+- ⚡ Base: Qwen + Unsloth.
+
 ---
 
-*Built by Kyle Hessling with Qwopus 3.6 35B-A3B-Coder via OpenCode. Benchmarks courtesy of Tom Turney (@no_stp_on_snek). Model by Jackrong. Base: Qwen + Unsloth.*
+*Built by Kyle Hessling with Qwopus 3.6 35B-A3B-Coder via OpenCode.*

index.html

@@ -505,12 +505,33 @@ svg .flat-shadow {
 
 /* ============ RESPONSIVE ============ */
 @media (max-width: 768px) {
-  .slide { padding: 40px 24px 80px; }
+  /* Phone/tablet only — desktop (>768px) is untouched.
+     Let each slide scroll instead of clipping, and tighten spacing. */
+  .slide { padding: 58px 16px 92px; justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; gap: 4px; }
   .card, .step-block, .compare-card { padding: 16px 20px; }
   .step-row { flex-direction: column; }
   .step-arrow { transform: rotate(90deg); }
-  .bar-chart { padding: 12px; gap: 6px; }
   .compare-row { flex-direction: column; align-items: center; }
+  .bar-chart { padding: 12px 8px; gap: 5px; height: 280px; width: 100%; max-width: 100%; margin-top: 22px; }
+  .headline { line-height: 1.15; }
+  .bar { min-width: 0; }
+  .bar-label { font-size: 6px; }
+  .stat-block { padding: 14px 18px; }
+  .chip-row, .badge-row { gap: 6px; }
+  .nav-bar { gap: 10px; bottom: 14px; max-width: 96vw; }
+  .nav-btn { width: 44px; height: 44px; font-size: 18px; }
+  .slide-counter { font-size: 13px; padding: 6px 12px; }
+}
+
+@media (max-width: 480px) {
+  /* Tighter still for phones */
+  .slide { padding: 52px 12px 84px; }
+  .dots { display: none; }          /* tap zones + buttons + counter handle phone nav */
+  .bar-chart { height: 230px; gap: 4px; padding: 10px 6px; }
+  .bar-label { font-size: 5.5px; }
+  .stat-block { padding: 10px 14px; }
+  .footer-text { font-size: 11px; margin-top: 12px; }
+  .nav-btn { width: 40px; height: 40px; font-size: 16px; }
 }
 
 /* ============ REDUCED MOTION ============ */
@@ -910,6 +931,9 @@ svg .flat-shadow {
   <div class="el" style="z-index:2;">
     <div class="body-text" style="margin-top:16px;">It built <strong>AETHER DOMINION</strong> — a complete, playable single-file sci-fi RTS — entirely through an OpenCode agentic loop, thinking-off, on a local RTX 5090.</div>
   </div>
+  <div class="el" style="z-index:2;margin-top:6px;">
+    <a href="https://huggingface.co/spaces/KyleHessling1/aether-dominion-qwopus36-35b-coder" target="_blank" rel="noopener" class="badge" style="background:var(--lime);text-decoration:none;color:#000;font-size:16px;padding:10px 22px;box-shadow:6px 6px 0 #000;display:inline-block;">▶ PLAY THE GAME</a>
+  </div>
   <div class="el" style="z-index:2;">
     <div class="chip-row" style="margin-top:18px;">
       <span class="chip" style="background:var(--cyan);">Fog of War</span>
@@ -1011,9 +1035,9 @@ svg .flat-shadow {
 
   <div class="el" style="z-index:2;">
     <div style="display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px;">
-      <span class="credit" style="background:var(--yellow);">Model — Jackrong</span>
-      <span class="credit" style="background:var(--cyan);">Hardware &amp; live testing — Kyle Hessling @KyleHessling1</span>
-      <span class="credit" style="background:var(--pink);">Benchmarks — Tom Turney @no_stp_on_snek</span>
+      <a class="credit" href="https://huggingface.co/Jackrong" target="_blank" rel="noopener" style="background:var(--yellow);text-decoration:none;color:#000;">Model — Jackrong ↗</a>
+      <a class="credit" href="https://x.com/KyleHessling1" target="_blank" rel="noopener" style="background:var(--cyan);text-decoration:none;color:#000;">Hardware &amp; live testing — Kyle Hessling @KyleHessling1 ↗</a>
+      <a class="credit" href="https://x.com/no_stp_on_snek" target="_blank" rel="noopener" style="background:var(--pink);text-decoration:none;color:#000;">Benchmarks — Tom Turney @no_stp_on_snek ↗</a>
       <span class="credit" style="background:var(--violet);">Unsloth + Qwen</span>
     </div>
   </div>