<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/assets/logo/washington-favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>washington independent game - build up the town again</title>
    <meta
      name="description"
      content="Tiny fan project where you rebuild washington independent by fixing the boarding house, telegraph office, casino, federal office, printing press, river freight dock, land plots, carriage works, munitions shop, hotel and more."
    />
    <meta
      name="keywords"
      content="washington independent game, boarding house upgrade, telegraph office, casino rebuild, federal office simulator, printing press builder, river freight dock, land owned vs not owned, carriage works, munitions workshop, hotel project"
    />
    <meta property="og:title" content="washington independent game" />
    <meta
      property="og:description"
      content="home made city upgrade game about boarding houses, telegraph offices, casinos, federal offices, printing presses, docks, land, carriage works, munitions, hotels."
    />
    <meta property="og:image" content="/assets/logo/washington-logo-medium.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:width" content="1024" />
    <meta property="og:image:height" content="1024" />
    <link rel="canonical" href="https://washingtonindependent.com/" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:image" content="/assets/logo/washington-logo-twitter.png" />
    <style>
      #splash-root {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at 20% 20%, rgba(13, 25, 58, 0.7), rgba(4, 6, 15, 0.98));
        overflow: hidden;
        z-index: 9999;
        font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        color: #f4f7ff;
        transition: opacity 360ms ease, transform 360ms ease;
      }

      #splash-root::before {
        content: '';
        position: absolute;
        inset: -40%;
        background-image:
          linear-gradient(rgba(46, 64, 155, 0.35) 1px, transparent 1px),
          linear-gradient(90deg, rgba(46, 64, 155, 0.35) 1px, transparent 1px);
        background-size: 110px 110px;
        transform: rotate(6deg);
        opacity: 0.8;
        animation: grid-scroll 9s linear infinite;
      }

      #splash-root::after {
        content: '';
        position: absolute;
        inset: -60%;
        background: radial-gradient(circle, rgba(80, 157, 255, 0.08), transparent 60%);
        animation: pulse-glow 4.8s ease-in-out infinite;
      }

      #splash-root.splash-hidden {
        opacity: 0;
        transform: scale(1.015);
        pointer-events: none;
      }

      .splash-card {
        position: relative;
        z-index: 1;
        padding: 40px 48px;
        border-radius: 32px;
        background: rgba(5, 7, 18, 0.85);
        box-shadow: 0 20px 80px rgba(2, 5, 15, 0.8), inset 0 0 0 1px rgba(99, 102, 241, 0.3);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        backdrop-filter: blur(18px);
      }

      .splash-card::before {
        content: '';
        position: absolute;
        inset: 12px;
        border-radius: 24px;
        border: 1px solid rgba(56, 189, 248, 0.25);
        pointer-events: none;
      }

      .splash-logo {
        width: min(320px, 50vw);
        max-width: 360px;
        height: auto;
        filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.65));
      }

      .splash-tagline {
        font-size: clamp(16px, 1.8vw, 20px);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(226, 232, 255, 0.9);
        margin: 0;
      }

      .splash-progress {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }

      .splash-progress span {
        display: block;
        height: 6px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(56, 189, 248, 0.15), rgba(129, 140, 248, 0.7));
        overflow: hidden;
      }

      .splash-progress span::before {
        content: '';
        display: block;
        height: 100%;
        width: 45%;
        background: linear-gradient(90deg, rgba(56, 189, 248, 0), rgba(255, 255, 255, 0.95), rgba(56, 189, 248, 0));
        animation: bar-shimmer 1.4s ease-in-out infinite;
      }

      .splash-progress span:nth-of-type(2)::before {
        animation-delay: 0.18s;
      }

      .splash-progress span:nth-of-type(3)::before {
        animation-delay: 0.36s;
      }

      .splash-meta {
        font-size: 13px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(148, 163, 184, 0.95);
        text-align: center;
      }

      .splash-version {
        margin-top: 4px;
        font-size: 12px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(136, 146, 176, 0.96);
        text-align: center;
      }

      .splash-quips {
        width: 100%;
        margin-top: 6px;
        height: 32px;
        overflow: hidden;
        position: relative;
      }

      .splash-quips-track {
        display: flex;
        flex-direction: column;
        animation: splash-quips-cycle 18s cubic-bezier(0.76, 0, 0.24, 1) infinite;
      }

      .splash-quips-line {
        font-size: clamp(14px, 2vw, 16px);
        text-align: center;
        color: rgba(226, 232, 255, 0.85);
        letter-spacing: 0.05em;
        text-transform: uppercase;
        padding: 4px 0;
      }

      @keyframes splash-quips-cycle {
        0%,
        18% {
          transform: translateY(0%);
        }
        25%,
        43% {
          transform: translateY(-25%);
        }
        50%,
        68% {
          transform: translateY(-50%);
        }
        75%,
        93% {
          transform: translateY(-75%);
        }
        100% {
          transform: translateY(0%);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .splash-quips-track {
          animation: none;
        }
      }

      @keyframes grid-scroll {
        0% {
          transform: rotate(6deg) translateY(0);
        }
        100% {
          transform: rotate(6deg) translateY(-110px);
        }
      }

      @keyframes bar-shimmer {
        0% {
          transform: translateX(-120%);
        }
        100% {
          transform: translateX(280%);
        }
      }

      @keyframes pulse-glow {
        0%,
        100% {
          opacity: 0.6;
          transform: scale(1);
        }
        50% {
          opacity: 1;
          transform: scale(1.08);
        }
      }

      .splash-links {
        width: 100%;
        margin-top: 16px;
        padding: 0;
        display: grid;
        gap: 10px;
        list-style: none;
      }

      .splash-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 16px;
        border-radius: 999px;
        text-decoration: none;
        font-size: 14px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: rgba(226, 232, 240, 0.95);
        background: rgba(45, 55, 72, 0.35);
        border: 1px solid rgba(59, 130, 246, 0.4);
        transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
      }

      .splash-links a:hover,
      .splash-links a:focus-visible {
        border-color: rgba(129, 140, 248, 0.8);
        background: rgba(99, 102, 241, 0.4);
        color: #fff;
      }
    </style>
    <script type="module" crossorigin src="/assets/index-zqakYeKC.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-CkcoUffi.css">
  </head>
  <body>
    <div id="splash-root">
      <div class="splash-card" role="status" aria-live="polite">
        <img
          class="splash-logo"
          src="/assets/logo/washington-logo-twitter.png"
          width="512"
          height="512"
          alt="Washington Independent crest"
        />
        <p class="splash-tagline">Preparing the grid</p>
        <div class="splash-progress" aria-hidden="true">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <div class="splash-quips" aria-live="polite">
          <div class="splash-quips-track">
            <span class="splash-quips-line">Counting telegraph clicks per minute</span>
            <span class="splash-quips-line">Polishing casino poker chips for auditors</span>
            <span class="splash-quips-line">Coaxing the carriage works to shift gears</span>
            <span class="splash-quips-line">Balancing the federal office ledgers by lantern</span>
          </div>
        </div>
        <div class="splash-meta">Calibrating ledgers</div>
        <div class="splash-version" data-build-version="true" aria-live="polite"></div>
        <ul class="splash-links" aria-label="Favorite games">
          <li data-iogames-link="true">
            <a href="https://iogames.space/" target="_blank" rel="noreferrer noopener">
              IOgames.Space
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div id="phaser-root"></div>
    <div id="ui-root"></div>
  </body>
</html>
