Made of little things.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <meta name="theme-color" content="#0a1113" />
  <title>GRAV / RIFT</title>
</head>
<body>
<main id="app">
  <header class="hud">
    <div class="brand"><span class="brand-mark" aria-hidden="true">⊙</span><div><b>GRAV<span>/</span>RIFT</b><small>SALVAGE DIVISION</small></div></div>
    <div class="hull-block"><div class="stat-label">HULL INTEGRITY <span id="hullValue">100%</span></div><div id="hull" class="hull-meter" role="meter" aria-label="Hull integrity" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div></div>
    <div class="score-block"><small>SALVAGE</small><strong><span class="diamond">◇</span> <span id="salvage">000</span></strong></div>
    <button id="sound" class="icon-button" aria-label="Enable sound" title="Sound">♪<span class="sound-slash">/</span></button>
    <button id="pause" class="icon-button" aria-label="Pause game" title="Pause (P)">Ⅱ</button>
  </header>
  <section id="viewport" class="viewport" aria-label="Salvage combat playfield">
    <canvas id="game" tabindex="0" aria-label="Physics salvage game. Move with WASD or arrows. Hold right mouse or Space to gather debris; release to drop. Left mouse or F fires. Keys 1–4 change gravity mode."></canvas>
    <div class="flight-status"><span class="live-dot"></span><span id="flightStatus">SYSTEMS STANDBY</span><span id="runTime">00:00</span></div>
    <div id="toast" class="toast" role="status" aria-live="polite"></div>
    <div id="intro" class="screen intro-screen">
      <div class="intro-panel">
        <span class="serial">EXPERIMENTAL FLIGHT PROGRAM / 001</span>
        <h1>EVERYTHING<br>IS <em>AMMUNITION.</em></h1>
        <p>No guns. Just gravity.<br>Turn the wreckage into your weapon.</p>
        <div class="brief-steps"><span><b>01</b> Gather scrap</span><span><b>02</b> Hurl it back</span><span><b>03</b> Rip the core open</span></div>
        <label class="site-picker" for="site"><span>DROP SITE</span><select id="site"><option value="foundry">FOUNDRY · GRAVITY ON</option><option value="orbit">ORBITAL GRAVEYARD · ZERO G</option></select></label>
        <button id="deploy" class="primary">DEPLOY TUG <span>↗</span></button>
        <button id="practice" class="text-button">Enter practice range <span>→</span></button>
        <div class="intro-note">A PHYSICS COMBAT PROTOTYPE <span>v0.1</span></div>
      </div>
      <div class="intro-callout"><span>FIELD GENERATOR</span><strong>ZERO ROUNDS.<br>UNLIMITED POSSIBILITIES.</strong><div class="callout-line"></div></div>
    </div>
    <div id="modal" class="screen modal-screen" hidden>
      <section class="modal-panel" aria-labelledby="modalTitle">
        <span id="modalSerial" class="serial">FLIGHT COMPUTER</span><h2 id="modalTitle">Flight paused</h2><p id="modalText"></p>
        <div id="results" class="results"></div>
        <div id="help" class="help"><p><kbd>TAB</kbd> Hold for slow-motion selector · <kbd>R</kbd> Cycle release pattern</p><p><kbd>LMB / F</kbd> Fire while gathering · <kbd>4</kbd> Surgical: hold RMB on one object, drag, LMB hurl, release RMB to drop, wheel to rotate.</p><p>Pull violet shield cells to lift living machines. Rip leg joints to cripple them. Volley fires everything; Stream feeds one piece at a time; Clusters fires small groups.</p><p><kbd>W A S D</kbd> / <kbd>↑ ↓ ← →</kbd> Fly</p><p><kbd>RMB / SPACE</kbd> Hold to gather · release to drop. Hold both mouse buttons to gather and fire together.</p><p><kbd>1 2 3 4</kbd> Change mode · <kbd>U</kbd> Upgrade</p><p>Catch a Strider's glowing shell in your field, aim back at its cannon, then fire with LMB or F. Rip supports to collapse structures. Strip four Warden plates, then hit the core. Amber cells arm when thrown and explode on contact; hard impacts and nearby blasts can set off loose cells.</p><p class="touch-help">Touch: left stick flies; hold FIELD to gather, press FIRE to shoot; release FIELD to drop. Aim intercepts incoming shells, finds floor scrap when empty, then targets a threat.</p></div>
        <div class="modal-actions"><button id="resume" class="primary">RESUME FLIGHT <span>→</span></button><button id="retry" class="secondary">RESTART RUN</button></div>
        <button id="changeSite" class="text-button">CHOOSE ANOTHER SITE <span>→</span></button>
        <div class="settings-row"><label><input id="soundSetting" type="checkbox"> Sound</label><label><input id="reduced" type="checkbox"> Reduced effects</label><label><input id="debug" type="checkbox"> Show collision hulls</label></div>
        <details id="atlasDetails"><summary>Inspect debris atlas</summary><div id="atlas"></div><p>Original pixel sprites → alpha silhouette → convex collision hull.</p></details>
        <p id="storageStatus" class="storage-status"></p>
      </section>
    </div>
    <div id="touchControls" class="touch-controls"><div id="joystick" class="joystick" role="group" aria-label="Drag to steer"><div id="stick"></div><span>MOVE</span></div><button id="fireButton" class="fire-button">FIRE</button><button id="fieldButton" class="field-button" aria-label="Hold to gather debris, release to drop"><span>◎</span><b>HOLD</b><small>RELEASE TO DROP</small></button></div>
    <div id="mission" class="mission"><span>OBJECTIVE</span><b>Reach the reactor bay</b><small>Strip the Warden. Rupture its core.</small></div>
  </section>
  <footer class="dock">
    <div class="field-label"><small>GRAVITY FIELD</small><b id="fieldLevel">MK. I</b></div>
    <div class="modes" role="group" aria-label="Gravity field mode">
      <button class="mode active" data-mode="0" aria-pressed="true"><span class="mode-icon">◎</span><span><b>ORBIT</b><small>SPIN & SHIELD</small></span><kbd>1</kbd></button>
      <button class="mode" data-mode="1" aria-pressed="false"><span class="mode-icon">✳</span><span><b>COMPRESS</b><small>CHARGE & BLAST</small></span><kbd>2</kbd></button>
      <button class="mode" data-mode="2" aria-pressed="false"><span class="mode-icon">⌁</span><span><b>RIP TETHER</b><small>TEAR & RECLAIM</small></span><kbd>3</kbd></button>
    <button class="mode" data-mode="3" aria-pressed="false"><span class="mode-icon">⌖</span><span><b>SURGICAL</b><small>GRAB ONE / DISMANTLE</small></span><kbd>4</kbd></button></div>
    <button id="selector" class="selector-button" aria-label="Open gravity selector" title="Hold Tab for slow motion"><small>TAB · SELECTOR</small><b id="releaseName">VOLLEY</b></button>
    <div class="payload"><small>PAYLOAD <span id="payloadCount">0</span></small><div class="charge-track"><i id="charge"></i></div><span id="chargeLabel">FIELD IDLE</span></div>
    <button id="upgrade" class="upgrade" disabled aria-label="Upgrade gravity field"><span>↑</span><b>UPGRADE<small id="upgradePrice">◇ 50</small></b></button>
  </footer>
  <div class="keyline"><span><kbd>WASD</kbd> MOVE <i>·</i> AIM WITH POINTER <i>·</i> <kbd>RMB</kbd> GATHER / DROP <i>·</i> <kbd>LMB</kbd> FIRE</span><span id="best">BEST 00000</span></div>
  <div id="radial" class="radial-overlay" role="dialog" aria-label="Gravity field and release selector" hidden><div class="radial-dial"><div class="radial-center"><small>TACTICAL / 05% TIME</small><b data-field-name>ORBIT</b><span data-release-name>VOLLEY</span></div></div><p>Hover → release Tab · Click to set both · Esc cancels</p><button class="secondary" data-close>RETURN TO FLIGHT</button></div>
  <div class="minimum-notice"><b>More room to fly.</b><span>Resize to at least 280 × 280.<br>Your flight is paused and safe.</span></div>
</main>
<script type="module" src="/src/main.ts"></script>
</body>
</html>