<title>Car Shackin</title>

  <div class="scope-header">
    <span class="eyebrow">CAR SHACKIN</span>
    <span class="header-line"></span>
    <span class="timer" id="timer">12.0s</span>
  </div>

  <div class="scope-body">
    <svg class="door-glyph" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M8 40 L8 20 C8 14 13 10 19 10 L44 10 C50 10 54 15 56 22 L58 40 C58 44 55 47 51 47 L12 47 C10 47 8 45 8 40 Z" stroke="currentColor" stroke-width="2.2"/>
      <circle cx="46" cy="30" r="2.4" fill="currentColor"/>
    </svg>

    <div class="sweep-wrap">
      <div class="sweep-track" id="sweepTrack">
        <div class="sweep-zone" id="sweepZone"></div>
        <div class="sweep-needle" id="sweepNeedle"></div>
      </div>
      <div class="sweep-labels">
        <span>SIGNAL LOW</span>
        <span>SIGNAL HIGH</span>
      </div>
    </div>

    <div class="lives" id="lives">
      <span class="life-pip"></span>
      <span class="life-pip"></span>
    </div>

    <div class="rounds" id="rounds"></div>

    <button class="lock-btn" id="lockBtn">
      <span>LOCK</span>
      <kbd>SPACE</kbd>
    </button>
  </div>

  <div class="scope-footer" id="statusLine">searching for a weak point in the frame...</div>
</div>

HAUL

<script src="app.js"></script>