games/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TX Products Puzzle Games</title>
  <style>
    :root {
      color-scheme: dark;
      --panel: rgba(12, 18, 27, 0.9);
      --line: rgba(255, 255, 255, 0.16);
      --text: #f7f3ea;
      --muted: #adb7c6;
      --cyan: #65d8e8;
      --gold: #f2c96b;
      --green: #88d76f;
    }

    * { box-sizing: border-box; }

    html,
    body {
      min-height: 100%;
      margin: 0;
    }

    body {
      display: grid;
      place-items: center;
      padding: 24px;
      position: relative;
      overflow: auto;
      background:
        radial-gradient(circle at 18% 16%, rgba(101, 216, 232, 0.22), transparent 28%),
        radial-gradient(circle at 82% 78%, rgba(242, 201, 107, 0.12), transparent 30%),
        linear-gradient(140deg, #101926 0%, #1b242d 48%, #090c10 100%);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body::before {
      content: "";
      position: fixed;
      top: -28px;
      left: -18px;
      width: min(50vw, 500px);
      aspect-ratio: 1;
      background: url("all-games/assets/txproducts-logo-watermark.png") center / contain no-repeat;
      opacity: 0.16;
      pointer-events: none;
    }

    main {
      position: relative;
      z-index: 1;
      width: min(1080px, 100%);
      padding: 28px 0;
    }

    small {
      color: var(--cyan);
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    h1 {
      margin: 4px 0 10px;
      font-size: clamp(2.1rem, 5vw, 4.2rem);
      line-height: 1;
    }

    p {
      max-width: 1040px;
      margin: 0 0 24px;
      color: var(--muted);
      font-size: clamp(1.18rem, 2.2vw, 1.42rem);
      white-space: nowrap;
      line-height: 1.5;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    a {
      min-height: 178px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 20px;
      color: inherit;
      text-decoration: none;
      background: var(--panel);
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
    }

    a:nth-child(3n + 1) { border-color: rgba(242, 201, 107, 0.45); }
    a:nth-child(3n + 2) { border-color: rgba(101, 216, 232, 0.45); }
    a:nth-child(3n) { border-color: rgba(136, 215, 111, 0.45); }

    strong {
      display: block;
      font-size: clamp(1.35rem, 2.6vw, 2.15rem);
      line-height: 1.05;
    }

    span {
      color: var(--muted);
      line-height: 1.45;
    }

    @media (max-width: 860px) {
      .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 620px) {
      p {
        white-space: normal;
      }

      .grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <main>
    <small>TX Products Puzzle Games</small>
    <h1>Choose your Challenge</h1>
    <p>Fast hands, sharp eyes, clear signals. Which challenge will you take on first?</p>
    <div class="grid">
      <a href="all-games/wavegate.html">
        <strong>WaveGate Pulse Tailor</strong>
        <span>Shape synchrotron pulse timing by opening the gate only during the target window.</span>
      </a>
      <a href="all-games/picoswitch.html">
        <strong>PicoSwitch Pulse Cut</strong>
        <span>Trigger a photo-acoustic Bragg switch to cut x-ray pulses into the picosecond range.</span>
      </a>
      <a href="all-games/synchrotron-jeopardy.html">
        <strong>Synchrotron Challenge</strong>
        <span>A Jeopardy-style quiz covering synchrotrons, TXProducts, TXData, TXServices, and business value.</span>
      </a>
      <a href="all-games/wheel-of-photons.html">
        <strong>Wheel of Photons</strong>
        <span>A phrase puzzle with Easy, Medium, and Hard synchrotron challenges.</span>
      </a>
      <a href="all-games/cryptogram.html">
        <strong>Decode the Signal</strong>
        <span>A cryptogram where visitors recover hidden product, physics, data, and service messages.</span>
      </a>
      <a href="all-games/synchrotron-crossword.html">
        <strong>Synchrotron Crossword</strong>
        <span>Connected crossword challenges with Easy, Medium, and Hard boards.</span>
      </a>
    </div>
  </main>
</body>
</html>