<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Franchise Football Expansion Pack</title>
  <meta name="description" content="Release page for the Franchise Football Expansion Pack: SALARY.EXE, REPLAY.EXE, and FAFIX.EXE." />
  <style>
    /* --- Reset-ish --- */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { height: 100%; }
    body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: #0e1b13; background: #0a3d1a; }

    /* --- Turf background with yard lines --- */
    .turf {
      min-height: 100vh;
      background: 
        repeating-linear-gradient(
          to right,
          rgba(255,255,255,0.14) 0px,
          rgba(255,255,255,0.14) 2px,
          transparent 2px,
          transparent 78px
        ),
        radial-gradient(1200px 600px at 50% -200px, #1fbf61 0%, #0a7a34 45%, #064f22 100%);
      display: grid;
      place-items: start center;
      padding: 32px 16px 64px;
    }

   /* Lightbox overlay */   
   #lightbox {
     display: none;
     position: fixed;
     z-index: 9999;
     top: 0; left: 0; width: 100%; height: 100%;
     background: rgba(0,0,0,0.8);
     justify-content: center;
     align-items: center;
   }
   #lightbox img {
     max-width: 90%;
     max-height: 90%;
     border-radius: 8px;
     box-shadow: 0 0 20px rgba(0,0,0,0.7);
     border: 2px solid #fff;
     cursor: pointer;
   }

    .container { width: min(1100px, 100%); }

    /* --- Header --- */
    .hero {
      position: relative;
      border-radius: 20px;
      padding: 32px 24px;
      background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08));
      backdrop-filter: blur(6px);
      box-shadow: 0 10px 40px rgba(0,0,0,0.25);
      color: #fff;
      overflow: hidden;
    }
    .hero h1 { margin: 0 0 8px; font-size: clamp(26px, 5vw, 44px); letter-spacing: 0.3px; }
    .hero p { margin: 8px 0 0; font-size: clamp(14px, 2.2vw, 18px); opacity: 0.95; }

    /* Subheader badge row */
    .badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
    .badge { background: rgba(0,0,0,0.4); color: #fff; border: 1px solid rgba(255,255,255,0.25); padding: 6px 10px; border-radius: 999px; font-size: 13px; display: inline-flex; gap: 8px; align-items: center; }

    /* Football icon */
    .football { position: absolute; right: -60px; top: -40px; width: 240px; height: 240px; opacity: 0.15; transform: rotate(-20deg); }

    /* --- Grid --- */
    .grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; margin-top: 22px; }
    @media (max-width: 920px) { .grid { grid-template-columns: 1fr; } }

    /* --- Cards --- */
    .card {
      background: #f9fbf7;
      border-radius: 16px;
      border: 1px solid #e2eadf;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      overflow: hidden;
    }
    .card header { padding: 16px 18px; background: linear-gradient(180deg, #e6f6ec, #d8efe3); border-bottom: 1px solid #d0e6d8; }
    .card header h2 { margin: 0; font-size: 18px; color: #0c2b1a; }
    .card .content { padding: 18px; }

    /* --- Feature list --- */
    .feature { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; padding: 12px 0; }
    .feature + .feature { border-top: 1px dashed #d8e6dc; }
    .feat-icon {
      width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center;
      background: #0e7d3a; color: #fff; box-shadow: 0 6px 16px rgba(6, 70, 32, 0.35);
      font-weight: 700; letter-spacing: 0.6px;
    }
    .feature h3 { margin: 0 0 4px; font-size: 16px; color: #0b2a17; }
    .feature p { margin: 0; color: #2c4637; font-size: 14px; }

    /* --- Download block --- */
    .download {
      display: grid; gap: 12px; align-items: start;
    }
    .button {
      appearance: none; border: 0; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
      padding: 12px 16px; border-radius: 12px; font-weight: 700; font-size: 16px;
      background: linear-gradient(180deg, #1fbf61, #118d45);
      color: white; box-shadow: 0 12px 24px rgba(2, 80, 34, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
      transition: transform 0.06s ease, box-shadow 0.2s ease, filter 0.2s ease;
    }
    .button:hover { transform: translateY(-1px); filter: brightness(1.05); }
    .button:active { transform: translateY(0); box-shadow: 0 8px 18px rgba(2,80,34,0.35), inset 0 1px 0 rgba(255,255,255,0.25); }
    .button small { opacity: 0.9; font-weight: 600; margin-left: 8px; }

    .mini { font-size: 12px; color: #2c4637; }

    /* --- Media placeholders --- */
    .media-box { position: relative; border: 2px dashed #b6cfbf; border-radius: 14px; overflow: hidden; background: #ecf6ef; min-height: 240px; display: grid; place-items: center; text-align: center; padding: 16px; }
    .media-box span { color: #2f5240; font-size: 14px; }

    /* --- Footer --- */
    footer { margin-top: 24px; text-align: center; color: #e7f7ee; font-size: 13px; opacity: 0.9; }
    footer a { color: #ffffff; }
  </style>
</head>
<body>
  <main class="turf">
    <div class="container">
      <section class="hero" aria-labelledby="title">
        <!-- Decorative football -->
        <svg class="football" viewBox="0 0 512 512" aria-hidden="true">
          <path fill="currentColor" d="M388 80C288-2 140 2 67 75S-2 288 80 388s248 92 321 19S512 224 388 80Zm-20 20c92 92 80 212 33 259S234 404 142 312 62 100 109 53 276 8 368 100ZM212 164a12 12 0 0 0-17 0l-23 23a12 12 0 1 0 17 17l23-23a12 12 0 0 0 0-17Zm48-24a12 12 0 0 0-17 0l-23 23a12 12 0 1 0 17 17l23-23a12 12 0 0 0 0-17Zm48-24a12 12 0 0 0-17 0l-23 23a12 12 0 1 0 17 17l23-23a12 12 0 0 0 0-17Z"/>
        </svg>
        <h1 id="title">Franchise Football <span style="opacity:.9">Expansion Pack</span></h1>
        <p>Enhance your league with fresh insights, a game-day watch experience, and a free-agency fixer—built for SnellaSoft’s Franchise Football BBS Door Game.</p>
        <div class="badges" role="list" aria-label="Highlights">
          <div class="badge" role="listitem">Read‑only IGMs</div>
          <div class="badge" role="listitem">ANSI‑friendly</div>
          <div class="badge" role="listitem">Drop‑in install</div>
          <div class="badge" role="listitem">DOS / DOSBox‑ready</div>
        </div>
      </section>

 <section class="grid" aria-label="Content">
  <!-- Left: features & media -->
  <div class="card">
    <header><h2>What’s inside</h2></header>
    <div class="content">
      <!-- features ... -->

      <div class="media-box" style="margin-top:16px;">
        <div>
          <strong>Screenshot of SALARY.EXE:</strong>
          <div style="margin-top:8px;">
            <img id="salary-thumb"
                 src="howtheyarebuilt.png"
                 alt="Example for SALARY.EXE results screenshot"
                 style="max-width:100%; height:auto; border-radius:8px; border:1px solid #cfe1d6; cursor: zoom-in;" />
          </div>
        </div>
      </div>
    </div> <!-- ✅ close .content -->
  </div>   <!-- ✅ close .card -->

  <!-- Right: download & video -->
  <div class="card">
    <header><h2>Download</h2></header>
    <div class="content download">
      <a class="button" href="ffexpand.zip" download>
        ⬇️ Download Expansion Pack <small>(ffexpand.zip)</small>
      </a>
      <div class="mini">Released: Aug 17, 2025 • Updated: Aug 24, 2025 • Single ZIP</div>

      <div class="media-box" style="margin-top:6px;">
        <div>
          <strong>Short Demo of Replay:</strong>
          <div style="margin-top:8px;">
            <video controls playsinline width="100%" poster="replay-poster.png" style="max-width:100%; border-radius:8px; border:1px solid #cfe1d6;">
              <source src="replay-demo.mp4" type="video/mp4" />
              Your browser does not support the video tag.
            </video>
          </div>
        </div>
      </div>

      <a class="button" href="fsports.zip" download>
        ⬇️ Download Original Franchise Sports Doors
      </a>
      Original unregistered Franchise Football, Hockey, and Basketball w/IGMs.
    </div>
  </div>
</section>


      <section class="grid" style="margin-top:20px;" aria-label="Install & Notes">
        <div class="card">
          <header><h2>Quick Install (Drop‑in)</h2></header>
          <div class="content">
            <ol>
              <li><strong>Copy</strong> <code>SALARY.EXE</code>, <code>REPLAY.EXE</code>, and <code>FAFIX.EXE</code> into your main <code>FFBL</code> directory (same place you run the game).</li>
              <li><strong>Add</strong> each IGM to <code>MODULES.DAT</code> as a three‑line triplet (path, command, display name). Include <code>%1</code> on the command if you’re multi‑node.</li>
              <li><strong>Run</strong> the IGMs from FFBL’s menu. FAFIX can be run manually (or nightly) to keep free agents tidy.</li>
            </ol>
            <p class="mini">Tip: These IGMs are <em>read‑only</em>—they don’t alter FFBL data. FAFix does so be sure to back up your files. You can also install these IGMs as doors if needed.</p>
          </div>
        </div>
        <div class="card">
          <header><h2>Compatibility</h2></header>
          <div class="content">
            <ul>
              <li>Designed for DOS / DOSBox.</li>
              <li>80x25 ANSI recommended for best visuals.</li>
              <li>Keep paths 8.3‑style where possible.</li>
            </ul>
            <p class="mini">Franchise Football © 1996 SnellaSoft. This is a community add‑on pack.</p>
          </div>
        </div>
      </section>

      <footer>
        Made with 🏈 by the community • Questions? See the included <code>SYSOP.DOC</code> inside the ZIP.
      </footer>
    </div>
  </main>
<!-- Lightbox overlay (keep outside normal layout) -->
<div id="lightbox">
  <img src="" alt="Expanded view (click to close)" />
</div>

<script>
  (function() {
    const lightbox = document.getElementById('lightbox');
    const lightboxImg = lightbox ? lightbox.querySelector('img') : null;
    const thumb = document.getElementById('salary-thumb');

    if (!lightbox || !lightboxImg || !thumb) return;

    thumb.addEventListener('click', () => {
      lightbox.style.display = 'flex';
      lightboxImg.src = thumb.src;
      document.body.style.overflow = 'hidden'; // prevent background scroll
    });

    // close on click anywhere
    lightbox.addEventListener('click', () => {
      lightbox.style.display = 'none';
      lightboxImg.src = '';
      document.body.style.overflow = '';
    });

    // close on ESC
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && lightbox.style.display === 'flex') {
        lightbox.click();
      }
    });
  })();
</script>

</body>
</html>