<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#090b0e">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <title>Step Away App Powered Edition v3.2.1</title>
  <link rel="manifest" href="manifest.webmanifest">
  <link rel="icon" href="icons/icon-192.png">
  <link rel="apple-touch-icon" href="icons/icon-192.png">
  <link rel="stylesheet" href="assets/css/app.css?v=321">
</head>
<body>
<div id="app" class="app-shell">
  <header class="topbar">
    <button id="homeBtn" class="brand" type="button" aria-label="Home"><span class="brand-mark">◆</span><span>Step Away</span></button>
    <div class="top-status" id="topStatus">No case loaded</div>
    <button id="settingsBtn" class="icon-btn" type="button" aria-label="Settings">⚙</button>
  </header>

  <main class="main">
    <section class="screen active" id="screen-home">
      <div class="hero panel">
        <div class="hero-copy">
          <p class="eyebrow">App powered tabletop system</p>
          <h1>Step Away</h1>
          <p>People do not always need fixing. Sometimes they need noticing. The cards let you choose how to respond. The app makes the case alive.</p>
          <p class="system-line">The cards are the human language. The app is the hidden pressure system.</p>
        </div>
        <div class="hero-actions">
          <button id="continueBtn" class="primary big">Continue Case</button>
          <button id="newCaseBtn" class="secondary big">New Case</button>
          <button id="savedRunsBtn" class="secondary big">Saved Runs</button>
          <button id="rulesHomeBtn" class="secondary big">Rules</button>
          <button id="installHomeBtn" class="secondary big">Install App</button>
          <button id="settingsHomeBtn" class="secondary big">Settings</button>
        </div>
      </div>
      <div id="accessStatus" class="access-status panel"></div>
      <div id="versionFooter" class="version-footer panel"></div>
      <div class="quick-grid">
        <button class="quick-card" data-screen="deck"><b>Deck Library</b><span>Search every card and effect.</span></button>
        <button class="quick-card" data-screen="tracker"><b>Case Archive</b><span>This device, profile and community milestones.</span></button>
        <a class="quick-card quick-link" href="share.php"><b>Shared Outcomes</b><span>Public case stories and product links.</span></a>
        <button class="quick-card" data-screen="rules"><b>Rules Spine</b><span>VALUE, DIG, Weave and crisis.</span></button><button class="quick-card" data-screen="instructions"><b>How to Play</b><span>One-page table instructions.</span></button>
        <button class="quick-card" data-screen="packs"><b>Content Packs</b><span>Monthly case files and imports.</span></button><button class="quick-card" data-screen="about"><b>About Step Away</b><span>Why this exists and what it is for.</span></button>
      </div>
      <div class="section-head"><h2>Case categories</h2><p>Pick the human problem first, not the suit.</p></div>
      <div id="campaignGrid" class="campaign-grid"></div>
    </section>

    <section class="screen" id="screen-setup">
      <div class="screen-title"><button class="back" data-screen="home">← Home</button><div><p class="eyebrow">Start clean</p><h1>New Case</h1></div></div>
      <div class="setup panel">
        <div class="field"><label>Deck mode</label><div class="segmented" id="deckModeSeg"><button data-mode="official">Official deck</button><button data-mode="standard">Standard deck</button></div></div>
        <div class="field"><label>Players</label><div class="player-row" id="playerRow"></div><div class="scale-note" id="scaleNote"></div></div>
        <div class="field"><label>Category</label><div class="campaign-select" id="categorySelect"></div></div>
      </div>
      <div class="section-head"><h2>Cases</h2><p>Standalone starts one case. Campaign starts a run that carries consequences.</p></div>
      <div id="caseGrid" class="case-grid"></div>
    </section>

    <section class="screen" id="screen-play">
      <div id="standardBanner" class="standard-banner hidden"><span>Standard deck mode. Use suit and rank mapping.</span><a id="buyLink" href="official-deck.html">Buy official deck</a></div>
      <div id="playConsole" class="play-console panel" aria-live="polite">
        <div class="console-main">
          <div class="console-copy">
            <p class="eyebrow" id="consoleMomentLabel">No case</p>
            <b id="consoleMomentTitle">Start a case</b>
            <span id="consoleNeed">Use New Case when the table is ready.</span>
          </div>
          <div class="console-clock"><span id="consoleTimerText">0</span><small id="consoleTimerPhase">Ready</small></div>
        </div>
        <div class="console-meters">
          <div><b>Progress</b><span id="consoleProgress">--</span></div>
          <div><b>Pressure</b><span id="consolePressure">--</span></div>
          <div><b>Presence</b><span id="consolePresence">--</span></div>
        </div>
        <div id="consoleFeedback" class="console-feedback">No intervention committed yet.</div>
        <div class="console-actions">
          <button type="button" data-play-jump="single">Single</button>
          <button type="button" data-play-jump="weave">Weave</button>
          <button type="button" data-play-jump="moment">Moment</button>
          <button type="button" data-play-jump="tools">Tools</button>
        </div>
      </div>
      <div class="play-top panel">
        <div>
          <p class="eyebrow" id="playCampaign">Case</p>
          <h1 id="playCaseTitle">No case</h1>
          <p id="playCaseSubtitle" class="muted"></p>
        </div>
        <div class="meters">
          <div><span>Progress</span><b id="progressText">0 / 20</b><i><em id="progressFill"></em></i></div>
          <div><span>Pressure</span><b id="pressureText">0 / 6</b><i class="danger"><em id="pressureFill"></em></i></div>
          <div><span>Presence</span><b id="presenceText">Flickering</b><i class="presence"><em id="presenceFill"></em></i></div>
        </div>
      </div>

      <div id="crisisWindow" class="crisis-window hidden">
        <div><p class="eyebrow">Crisis Window</p><h2 id="crisisTitle">The case has tipped</h2><p id="crisisText">Resolve this before the case continues.</p></div>
        <div class="crisis-actions"><b id="crisisTarget">0 / 10</b><button id="failCrisisBtn" class="secondary tiny" type="button">Fail crisis</button></div>
      </div>

      <div id="momentPanel" class="moment panel">
        <div class="moment-head"><div><p class="eyebrow" id="momentKicker">Moment 1</p><h2 id="momentTitle">Moment</h2></div><button id="caseNotesBtn" class="tiny">Case notes</button></div>
        <p id="momentText"></p>
        <div class="watch-grid"><div><b>Watch</b><span id="momentWatch"></span></div><div><b>Aim</b><span id="momentAim"></span></div></div>
        <div id="casePulse" class="case-pulse"></div>
        <div id="pinnedFeedback" class="pinned-feedback panel"></div>
        <div id="impactFlash" class="impact-flash hidden"></div>
        <div id="momentPlayRow" class="evidence-strip"></div>
      </div>

      <div id="timerPanel" class="timer panel">
        <button id="prevMoment" class="tiny">←</button>
        <div class="timer-circle"><span id="timerText">90</span><small id="timerPhase">sec</small></div>
        <button id="nextMoment" class="tiny">End →</button>
        <button id="timerToggle" class="primary">Start</button>
        <button id="timerReset" class="secondary">Reset timer</button><button id="abandonCaseBtn" class="danger">Abandon case</button>
      </div>

      <div id="overtimePanel" class="overtime-panel panel hidden">
        <div>
          <p class="eyebrow">Moment decision</p>
          <h2>Need more time?</h2>
          <p>The Moment is ready to close. Take more time only if you mean to keep acting.</p>
          <p><b id="overtimeInlineSeconds">10</b> seconds. If no button is pressed, the Moment ends cleanly with no pressure gain.</p>
        </div>
        <div class="overtime-actions">
          <button id="takeMoreTimeInline" class="primary" type="button">Take more time, +1 Pressure</button>
          <button id="endMomentInline" class="secondary" type="button">End Moment</button>
        </div>
      </div>

      <div class="table-state">
        <span id="handBadge">Hand 7</span><span id="modeBadge">Official deck</span><span id="digBadge">DIG phase</span><span id="wrinkleBadge">No wrinkle</span>
      </div>

      <section id="entryPanel" class="submit play-entry panel">
        <div class="submit-head"><div><h2>Play Intervention</h2><p>Left pad chooses the Single or first card. Right pad unlocks only legal Weave partners. Invalid Weaves are blocked, not punished.</p></div><button id="singleSubmit" class="primary">Choose card</button></div>
        <div id="entryStatus" class="entry-status">Choose a card from the left pad.</div>
        <div class="dual-pad-grid">
          <div id="singlePanel" class="pad-panel">
            <div class="pad-title"><b>Single / First card</b><span>Full card list</span></div>
            <div id="singleRow" class="suit-row suit-pad"></div>
          </div>
          <div id="weavePanel" class="pad-panel">
            <div class="pad-title"><b>Weave partner</b><span>Context-sensitive legal partners</span></div>
            <div id="weaveRow" class="suit-row suit-pad"></div>
            <button id="weaveSubmit" class="secondary tiny clear-weave" type="button">Clear Weave</button>
          </div>
        </div>
        <div id="entryPicker" class="entry-picker hidden"></div>
      </section>

      <section id="toolsPanel" class="play-tools panel">
        <details open><summary>Last play</summary><div id="lastPlay" class="last-play">No intervention yet.</div></details>
        <details><summary>DIG reminder</summary><div id="digTools" class="dig-tools"></div></details>
        <details><summary>Jokers</summary><div class="tool-row"><button id="fractureBtn" class="secondary">Fracture Moment</button><button id="resilienceBtn" class="secondary">Resilience</button></div></details>
        <details><summary>Case log</summary><div id="logList" class="log-list"></div></details>
      </section>
    </section>

    <section class="screen" id="screen-deck">
      <div class="screen-title"><button class="back" data-screen="home">← Home</button><div><p class="eyebrow">Cards</p><h1>Deck Library</h1></div></div>
      <input id="cardSearch" class="search" placeholder="Search title, suit, effect...">
      <div class="filter-row" id="cardFilters"><button data-filter="all">All</button><button data-filter="number">Numbers</button><button data-filter="face">Face/Ace</button><button data-filter="joker">Jokers</button><button data-filter="helper">Reference</button></div>
      <div id="cardGrid" class="card-grid"></div>
    </section>

    <section class="screen" id="screen-rules">
      <div class="screen-title"><button class="back" data-screen="home">← Home</button><div><p class="eyebrow">Reference</p><h1>Rules Spine</h1></div></div>
      <div id="rulesGrid" class="rules-grid"></div>
    </section>

    <section class="screen" id="screen-tracker">
      <div class="screen-title"><button class="back" data-screen="home">← Home</button><div><p class="eyebrow">Archive</p><h1>Archive & Community</h1></div></div>
      <div class="tracker-grid" id="trackerGrid"></div>
      <div class="panel run-archive-panel"><h2>Saved run search</h2><input id="runSearch" class="search" placeholder="Search case, outcome, suit, range, seed..."><div id="runArchive" class="run-archive"></div></div>
      <div class="panel"><h2>Community milestones</h2><div id="milestoneList" class="milestone-list"></div></div>
    </section>

    <section class="screen" id="screen-packs">
      <div class="screen-title"><button class="back" data-screen="home">← Home</button><div><p class="eyebrow">Expandable</p><h1>Content Packs</h1></div></div>
      <div class="panel"><h2>Monthly cases</h2><p>Drop JSON packs into <code>content/packs</code> or import them through the admin panel. The deck stays the same. Cases and wrinkles expand.</p><div id="packList" class="pack-list"></div></div>
    </section>

    <section class="screen" id="screen-instructions">
      <div class="screen-title"><button class="back" data-screen="home">← Home</button><div><p class="eyebrow">Table sheet</p><h1>How to Play</h1></div></div>
      <div class="panel instruction-page">
        <h2>Step Away, one-page play sheet</h2>
        <p><b>What this is:</b> an app powered tabletop system about noticing, staying with, helping and protecting before a person disappears into silence. It is not therapy, diagnosis or an emergency service.</p>
        <p><b>Core line:</b> The cards are the human language. The app is the hidden pressure system.</p>
        <p><b>Goal:</b> respond to the case before Pressure overtakes the room. Progress means the case is becoming safer. Presence means the person is becoming more reachable. Receptivity means your help is landing without flooding them.</p>
        <ol>
          <li><b>Open the app.</b> Choose a case and player count. Deal the hand shown by the app.</li>
          <li><b>Read the Moment aloud.</b> The app starts the live case. The physical cards stay in the players hands.</li>
          <li><b>DIG physically.</b> Single DIG discards 1 and keeps 1. Weave DIG discards 2 numbered cards and keeps 2. The app does not log DIG.</li>
          <li><b>Commit help.</b> Play one Single, or one Weave of two numbered cards. Only one Weave per Moment. WEAVE ONLY needs a compatible care-chain pair.</li>
          <li><b>Read the pinned reaction.</b> The app shows case response, suit marker, range result, pressure change and carryover.</li>
          <li><b>End the Moment.</b> The app reveals the check-in: Progress, Pressure, Presence, Receptivity and suit ranges. Draw back up for the next Moment.</li>
        </ol>
        <p><b>Key rule:</b> bigger is not always better. Each suit has an ideal VALUE range. Fit the person, not the scoreboard.</p>
        <p><b>Crisis and real life:</b> If someone is in real immediate danger, stop playing and get real help. UK emergency: 999. Samaritans: 116 123.</p>
      </div>
    </section>

    <section class="screen" id="screen-about">
      <div class="screen-title"><button class="back" data-screen="home">← Home</button><div><p class="eyebrow">Purpose</p><h1>About Step Away</h1></div></div>
      <div id="aboutBox"></div>
    </section>
  </main>

  <nav class="dock">
    <button data-screen="home">Home</button>
    <button data-screen="setup">New</button>
    <button data-screen="play">Play</button>
    <button data-screen="deck">Deck</button>
    <button data-screen="tracker">Archive</button>
  </nav>

  <dialog id="modal" class="modal"></dialog>
  <div id="toast" class="toast hidden"></div>
</div>
<script src="assets/js/app.js?v=3.2.1"></script>
</body>
</html>
