UI improvements and Pain Shift fix

- Remove unnecessary skip power-up button (clarify it's optional)
- Fix Pain Shift: now properly triggers Target Curse and skips mutation
- Add Rules cheat sheet modal with key mechanics summary
- Pain Shift only available in curse-check phase (Room 4+)

Author: alexisloiselle

src/game/logic.ts

@@ -475,8 +475,17 @@ export function acceptCurse(): void {
     }
   }
 
-  const nextPhase = state.pendingTargetCurseRolls > 1 ? undefined : 'mutation';
   const remainingRolls = state.pendingTargetCurseRolls > 0 ? state.pendingTargetCurseRolls - 1 : 0;
+  
+  let nextPhase: typeof state.phase | undefined;
+  if (remainingRolls > 0) {
+    nextPhase = undefined;
+  } else if (state.painShiftActive) {
+    nextPhase = 'compose';
+    addLogEntry('Pain Shift: Skipping mutation');
+  } else {
+    nextPhase = 'mutation';
+  }
 
   updateState({
     curses,
@@ -487,6 +496,7 @@ export function acceptCurse(): void {
     currentCurse: null,
     pendingCurseTargets: [],
     pendingTargetCurseRolls: remainingRolls,
+    painShiftActive: remainingRolls > 0 ? state.painShiftActive : false,
     ...(nextPhase ? { phase: nextPhase } : {}),
   });
 
@@ -714,6 +724,7 @@ export function nextRoom(): void {
     curseTargetMethod: null,
     curseTargetRoll: null,
     pendingTargetCurseRolls: 0,
+    painShiftActive: false,
   });
 }
 
@@ -740,10 +751,11 @@ export function usePowerUp(type: string): void {
       }
       break;
     case 'painshift':
-      addLogEntry('Power-Up: Pain Shift - No mutation, guaranteed curse');
-      updates.currentMutation = { roll: 0, effect: 'No Mutation (Pain Shift)' };
-      updates.phase = 'mutation-result';
-      break;
+      addLogEntry('Power-Up: Pain Shift - No mutation, guaranteed Target Curse');
+      updates.painShiftActive = true;
+      updateState(updates);
+      rollTargetCurse();
+      return;
     case 'split':
       addLogEntry('Power-Up: Split the Wound - Curse applied at half strength');
       break;

src/game/state.ts

@@ -58,6 +58,7 @@ export function createInitialState(mode: GameMode, manualTrackType: boolean): Ga
     curseTargetMethod: null,
     curseTargetRoll: null,
     pendingTargetCurseRolls: 0,
+    painShiftActive: false,
   };
 }
 

src/game/types.ts

@@ -81,6 +81,7 @@ export interface GameState {
   curseTargetMethod: CurseTargetMethod | null;
   curseTargetRoll: number | null;
   pendingTargetCurseRolls: number;
+  painShiftActive: boolean;
 }
 
 export type PowerUpType = 'redirect' | 'lock' | 'painshift' | 'split' | 'breath';

src/index.html

@@ -55,6 +55,7 @@ <h2>Continue Run</h2>
             <span id="timer" class="badge timer hidden">5:00</span>
           </div>
           <div class="flex">
+            <button id="cheatsheet-btn" class="small secondary">Rules</button>
             <button id="export-btn" class="small secondary">Export</button>
             <button id="end-run" class="small danger">End Run</button>
           </div>
@@ -70,14 +71,14 @@ <h2>Room <span id="current-room">1</span></h2>
       <!-- Power-Ups Panel -->
       <div id="powerup-panel" class="card hidden">
         <h2>Use Power-Up</h2>
+        <p class="muted" style="margin-bottom: 0.5rem;">Optional - game continues without using one</p>
         <div class="grid grid-2">
           <button class="secondary powerup-btn" data-type="redirect">Curse Redirect</button>
           <button class="secondary powerup-btn" data-type="lock">Room Lock</button>
           <button class="secondary powerup-btn" data-type="painshift">Pain Shift</button>
           <button class="secondary powerup-btn" data-type="split">Split the Wound</button>
           <button class="secondary powerup-btn" data-type="breath">One Last Breath</button>
         </div>
-        <button id="skip-powerup" class="secondary" style="margin-top: 0.5rem; width: 100%;">Skip</button>
       </div>
 
       <!-- Tracks List -->
@@ -109,6 +110,70 @@ <h3 style="margin-top: 1rem;">Tags</h3>
     </div>
   </div>
 
+  <!-- Cheat Sheet Modal -->
+  <div id="cheatsheet-modal" class="modal hidden">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>Super Beatmaker Rules</h2>
+        <button id="close-cheatsheet" class="small secondary">Close</button>
+      </div>
+      <div class="modal-body">
+        <h3>System Flow</h3>
+        <ol>
+          <li>Declare Track Type</li>
+          <li>Curse Check (01-70: No Curse, 71-98: Target Curse, 99-100: Mix Curse)</li>
+          <li>Roll Mutation</li>
+          <li>Compose Track</li>
+          <li>Room Finalizes</li>
+          <li>Roll for Power-Up (if did not use)</li>
+        </ol>
+
+        <h3>Power-Ups</h3>
+        <ul>
+          <li><strong>Curse Redirect:</strong> Reroll what Track receives a Curse</li>
+          <li><strong>Room Lock:</strong> (1/Run) Prevent a Track from future Target Curses</li>
+          <li><strong>Pain Shift:</strong> (Room 4+) No Mutation, guaranteed Target Curse</li>
+          <li><strong>Split the Wound:</strong> Apply curse to 2 Tracks at half strength</li>
+          <li><strong>One Last Breath:</strong> (1/Run) Reverse one Curse, force final Room</li>
+        </ul>
+
+        <h3>Earning Power-Ups</h3>
+        <p>After Room without using Power-Up: 01-75: None, 76-97: +1, 98-100: +2</p>
+
+        <h3>Curse Target (2 rolls)</h3>
+        <p><strong>First:</strong> 01-20: Previous, 21-40: Oldest, 41-60: Loudest, 61-80: Quietest, 81-95: Choice, 96-100: Two Targets</p>
+        <p><strong>Second:</strong> 01-32: Track Before, 33-66: That Track, 67-100: Track After</p>
+
+        <h3>Key Mutations</h3>
+        <ul>
+          <li>63-64: Roll twice, apply both</li>
+          <li>71-72: Abandon Track Type</li>
+          <li>85-86: 5-minute timer</li>
+          <li>93-94: Take Target Curse instead</li>
+          <li>97-98: Roll 80+ = delete Track</li>
+        </ul>
+
+        <h3>Key Target Curses</h3>
+        <ul>
+          <li>33-36: Force Room + Double Mutation</li>
+          <li>45-48: Track becomes permanent curse target</li>
+          <li>57-60: Delete Track</li>
+          <li>93-96: Apply last Curse to another Track</li>
+          <li>97-100: Re-roll twice</li>
+        </ul>
+
+        <h3>Key Mix Curses</h3>
+        <ul>
+          <li>01: This is the last Room</li>
+          <li>92-100: Roll three Target Curses</li>
+        </ul>
+
+        <h3>End Condition</h3>
+        <p>Run ends when you declare it over with no forced Rooms. If rules followed, you win!</p>
+      </div>
+    </div>
+  </div>
+
   <script type="module" src="./main.js"></script>
 </body>
 </html>

src/main.ts

@@ -69,12 +69,30 @@ function newRun(): void {
   showScreen('setup');
 }
 
+function toggleCheatSheet(show: boolean): void {
+  const modal = $('cheatsheet-modal');
+  if (modal) {
+    modal.classList.toggle('hidden', !show);
+  }
+}
+
 function init(): void {
   onClick('start-run', startRun);
   onClick('continue-run', continueRun);
   onClick('import-btn', handleImport);
   onClick('end-run', endRun);
   onClick('new-run', newRun);
+  onClick('cheatsheet-btn', () => toggleCheatSheet(true));
+  onClick('close-cheatsheet', () => toggleCheatSheet(false));
+
+  const cheatsheetModal = $('cheatsheet-modal');
+  if (cheatsheetModal) {
+    cheatsheetModal.addEventListener('click', (e) => {
+      if (e.target === cheatsheetModal) {
+        toggleCheatSheet(false);
+      }
+    });
+  }
 
   const importInput = $('import-input');
   if (importInput) {

src/styles.css

@@ -297,6 +297,72 @@ select {
   display: none;
 }
 
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+
+.modal-content {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  max-width: 600px;
+  max-height: 80vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.modal-header h2 {
+  margin: 0;
+}
+
+.modal-body {
+  padding: 1rem;
+  overflow-y: auto;
+  font-size: 0.9rem;
+}
+
+.modal-body h3 {
+  color: var(--accent);
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.modal-body h3:first-child {
+  margin-top: 0;
+}
+
+.modal-body ul, .modal-body ol {
+  margin-left: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.modal-body li {
+  margin-bottom: 0.25rem;
+}
+
+.modal-body p {
+  margin-bottom: 0.5rem;
+}
+
 @media (max-width: 600px) {
   .container {
     padding: 0.5rem;

src/ui/render.ts

@@ -106,7 +106,7 @@ function renderPowerUpPanel(): void {
       let disabled = false;
 
       if (type === 'lock' && state.usedRoomLock) disabled = true;
-      if (type === 'painshift' && state.room <= 3) disabled = true;
+      if (type === 'painshift' && (state.room <= 3 || state.phase !== 'curse-check')) disabled = true;
       if (type === 'breath' && state.usedOneLastBreath) disabled = true;
       if (type === 'redirect' && state.phase !== 'curse-result') disabled = true;
       if (type === 'split' && state.phase !== 'curse-result') disabled = true;
@@ -447,8 +447,6 @@ export function setupPowerUpButtons(): void {
       }
     };
   });
-
-  onClick('skip-powerup', () => renderPowerUpPanel());
 }
 
 export function setupExportButton(): void {