<!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 Milestone Release v2.19</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=23">
</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">Case console for a physical intervention deck</p>
          <h1>Step Away</h1>
          <p>The app runs the case. The cards do the table work. Build the response, hold the hour, and let the archive remember what happened.</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="campaignBtn" class="secondary big">Campaign Run</button>
          <button id="accessBtn" class="secondary big">Unlock Purchase</button>
        </div>
      </div>
      <div id="accessStatus" class="access-status 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 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 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="impactFlash" class="impact-flash hidden"></div>
        <div id="momentPlayRow" class="evidence-strip"></div>
      </div>

      <div 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 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 class="submit panel">
        <div class="submit-head"><div><h2>Single Intervention</h2><p>Play one card while the Moment timer is live. DIG is handled physically at the table.</p></div><button id="singleSubmit" class="primary">Submit</button></div>
        <div id="singleRow" class="suit-row"></div>
      </section>

      <section class="submit panel">
        <div class="submit-head"><div><h2>Weave Intervention</h2><p>Play two numbered cards while the Moment timer is live. One Weave per Moment. WEAVE ONLY cards need a compatible care-chain pair.</p></div><button id="weaveSubmit" class="primary">Submit</button></div>
        <div id="weaveRow" class="suit-row"></div>
      </section>

      <section 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"><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>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>Start a case.</b> Deal the hand shown by player count. Read the Moment aloud.</li>
          <li><b>Timer starts live.</b> DIG physically whenever needed: Single DIG discards 1 and keeps 1. Weave DIG discards 2 numbered cards and keeps 2.</li>
          <li><b>Commit help.</b> Play one Single, or one Weave of two numbered cards. WEAVE ONLY needs a compatible care-chain pair.</li>
          <li><b>Read the reaction.</b> The emoji flash tells you if the help felt fitted, too gentle, heavy or overwhelming.</li>
          <li><b>End the Moment.</b> You get a check-in: Progress, Pressure, Presence, Receptivity and suit ranges are revealed.</li>
          <li><b>Draw back up.</b> Continue through the three authored Moments. If Crisis opens, resolve it before the case continues.</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>
      </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=2.18"></script>
</body>
</html>
