Claude Opus 4.8 (max)

AnthropicMay 2026

open raw ↗pit it against…

What it wrote

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="theme-color" content="#070912">
<title>Astral Foundry — Forge the Cosmos</title>
<meta name="description" content="An incremental game. Draw aether from the void, forge cosmic structures, and collapse universes for dark matter.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Jost:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- Atmosphere layers -->
<canvas id="starfield" aria-hidden="true"></canvas>
<div class="atmos-vignette" aria-hidden="true"></div>
<div class="atmos-grain" aria-hidden="true"></div>

<!-- Top bar -->
<header class="topbar">
  <div class="brand">
    <span class="brand-mark" aria-hidden="true">
      <svg viewBox="0 0 32 32"><path d="M16 1 L19 13 L31 16 L19 19 L16 31 L13 19 L1 16 L13 13 Z"/></svg>
    </span>
    <span class="brand-name">Astral&nbsp;Foundry</span>
  </div>

  <div class="topbar-stats">
    <div class="tb-stat" id="tb-darkmatter" title="Dark Matter — earned by collapsing universes">
      <span class="tb-icon dm" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="M12 2 L20 12 L12 22 L4 12 Z"/></svg>
      </span>
      <span class="tb-val" data-dm-have>0</span>
      <span class="tb-label">Dark Matter</span>
    </div>
  </div>

  <div class="topbar-actions">
    <button class="icon-btn" id="btn-help" title="How to play" aria-label="How to play">?</button>
    <button class="icon-btn" id="btn-settings" title="Settings" aria-label="Settings">
      <svg viewBox="0 0 24 24" width="18" height="18"><path d="M12 8.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM12 2l1.3 2.4 2.7-.5.6 2.7 2.4 1.3-.9 2.6.9 2.6-2.4 1.3-.6 2.7-2.7-.5L12 22l-1.3-2.4-2.7.5-.6-2.7L5 16.1l.9-2.6L5 10.9l2.4-1.3.6-2.7 2.7.5z"/></svg>
    </button>
  </div>
</header>

<!-- Main stage -->
<main class="stage">

  <!-- LEFT: the Forge -->
  <section class="forge-panel deco-frame" aria-label="The Forge">
    <div class="forge-title">
      <h1>Astral Foundry</h1>
      <p class="tagline">Draw aether from the endless void</p>
    </div>

    <div class="readout">
      <div class="aether-amount">
        <span class="aether-glyph" aria-hidden="true">
          <svg viewBox="0 0 24 24"><path d="M12 1 L14 10 L23 12 L14 14 L12 23 L10 14 L1 12 L10 10 Z"/></svg>
        </span>
        <span class="aether-value" data-aether>0</span>
        <span class="aether-unit">aether</span>
      </div>
      <div class="rate-line">
        <span data-cps>0</span> per second
        <span class="rate-sep">·</span>
        <span data-click>+1</span> per draw
      </div>
    </div>

    <!-- The clickable forge emblem -->
    <div class="forge-wrap">
      <button class="forge" id="forge" aria-label="Draw aether">
        <span class="forge-burst" aria-hidden="true"></span>
        <span class="forge-ring ring-1" aria-hidden="true"></span>
        <span class="forge-ring ring-2" aria-hidden="true"><i class="orbiter"></i></span>
        <span class="forge-rose" aria-hidden="true">
          <svg viewBox="0 0 200 200">
            <g class="rose-lines">
              <circle cx="100" cy="100" r="72"/>
              <circle cx="100" cy="100" r="54"/>
              <path d="M100 22 L112 88 L178 100 L112 112 L100 178 L88 112 L22 100 L88 88 Z"/>
              <path d="M100 40 L100 160 M40 100 L160 100 M58 58 L142 142 M142 58 L58 142"/>
            </g>
          </svg>
        </span>
        <span class="forge-core" aria-hidden="true"></span>
      </button>
      <div class="fx-layer" id="fx-layer" aria-hidden="true"></div>
    </div>

    <p class="forge-hint" data-hint>Click the core to draw your first aether.</p>

    <!-- Collapse / prestige -->
    <div class="collapse-block" id="collapse-block" hidden>
      <div class="collapse-info">
        Collapse the cosmos to claim
        <strong><span data-dm-pending>0</span> ◆ Dark Matter</strong>
      </div>
      <button class="btn-collapse" id="btn-collapse">Collapse Universe</button>
    </div>
  </section>

  <!-- RIGHT: operations -->
  <section class="ops-panel" aria-label="Operations">
    <nav class="tabs" role="tablist">
      <button class="tab is-active" role="tab" data-tab="structures" aria-selected="true">Structures</button>
      <button class="tab" role="tab" data-tab="upgrades">Upgrades <span class="tab-badge" data-badge="upgrades" hidden>0</span></button>
      <button class="tab" role="tab" data-tab="ascension">Ascension</button>
      <button class="tab" role="tab" data-tab="codex">Codex</button>
    </nav>

    <div class="tab-body">

      <!-- STRUCTURES -->
      <div class="tab-pane is-active" id="pane-structures" role="tabpanel">
        <div class="buy-controls">
          <span class="buy-label">Forge quantity</span>
          <div class="seg" role="group" aria-label="Buy quantity">
            <button class="seg-btn is-active" data-qty="1">×1</button>
            <button class="seg-btn" data-qty="10">×10</button>
            <button class="seg-btn" data-qty="100">×100</button>
            <button class="seg-btn" data-qty="max">Max</button>
          </div>
        </div>
        <div class="building-list" id="building-list"></div>
      </div>

      <!-- UPGRADES -->
      <div class="tab-pane" id="pane-upgrades" role="tabpanel">
        <p class="pane-intro">Permanent enhancements. Each is forged once.</p>
        <div class="upgrade-grid" id="upgrade-grid"></div>
        <p class="empty-note" id="upgrades-empty">No enhancements available yet. Keep forging.</p>
      </div>

      <!-- ASCENSION -->
      <div class="tab-pane" id="pane-ascension" role="tabpanel">
        <div class="ascend-head">
          <div class="ascend-stat">
            <span class="ascend-num" data-dm-have>0</span>
            <span class="ascend-cap">Dark Matter held</span>
          </div>
          <div class="ascend-stat">
            <span class="ascend-num" data-collapses>0</span>
            <span class="ascend-cap">Collapses</span>
          </div>
        </div>
        <p class="pane-intro">Dark Matter persists through every collapse. Spend it on eternal works.</p>
        <div class="ascend-grid" id="ascend-grid"></div>
      </div>

      <!-- CODEX -->
      <div class="tab-pane" id="pane-codex" role="tabpanel">
        <div class="stats-grid" id="stats-grid"></div>
        <h3 class="codex-h">Achievements <span class="codex-count" data-ach-count>0 / 0</span></h3>
        <div class="ach-grid" id="ach-grid"></div>
      </div>

    </div>
  </section>
</main>

<!-- Toasts -->
<div class="toast-stack" id="toast-stack" aria-live="polite"></div>

<!-- Modal host -->
<div class="modal-host" id="modal-host" hidden>
  <div class="modal-backdrop" data-close></div>
  <div class="modal deco-frame" role="dialog" aria-modal="true">
    <button class="modal-x" data-close aria-label="Close">✕</button>
    <div class="modal-content" id="modal-content"></div>
  </div>
</div>

<script src="game.js"></script>
</body>
</html>