diff --git a/app/views/break_escape/games/show.html.erb b/app/views/break_escape/games/show.html.erb
index c8e3bbb7..d16a2f2a 100644
--- a/app/views/break_escape/games/show.html.erb
+++ b/app/views/break_escape/games/show.html.erb
@@ -58,6 +58,7 @@
+
diff --git a/public/break_escape/css/shredded-document-minigame.css b/public/break_escape/css/shredded-document-minigame.css
new file mode 100644
index 00000000..6b9ee707
--- /dev/null
+++ b/public/break_escape/css/shredded-document-minigame.css
@@ -0,0 +1,223 @@
+/* ============================================================
+ Shredded Document Reconstruction Minigame (MG-B)
+ ============================================================ */
+
+.sdm-container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow: hidden;
+}
+
+.sdm-game-container {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ overflow: hidden;
+ margin: 0 !important;
+}
+
+.sdm-container .minigame-close-button {
+ top: 0;
+ right: 0;
+}
+
+/* ── Outer panel ─────────────────────────────────────────── */
+
+.sdm-panel {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ background: #1a1a2e;
+ font-family: 'Press Start 2P', monospace;
+}
+
+/* ── Instruction bar ─────────────────────────────────────── */
+
+.sdm-instruction {
+ padding: 8px 14px;
+ font-size: 7px;
+ color: #8a9bb5;
+ border-bottom: 2px solid #2a3a5a;
+ line-height: 1.6;
+ flex-shrink: 0;
+}
+
+/* ── Scrollable strip area ───────────────────────────────── */
+
+.sdm-scroll {
+ flex: 1;
+ overflow-y: auto;
+ padding: 14px 20px;
+}
+
+/* ── Document title ──────────────────────────────────────── */
+
+.sdm-doc-title {
+ font-size: 7px;
+ color: #4a6090;
+ letter-spacing: 1px;
+ text-align: center;
+ margin-bottom: 12px;
+ padding-bottom: 8px;
+ border-bottom: 1px solid #2a3a5a;
+}
+
+/* ── Strip list ──────────────────────────────────────────── */
+
+.sdm-strips-area {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ max-width: 720px;
+ margin: 0 auto;
+ padding: 0 8px;
+}
+
+/* ── Individual strip tile ───────────────────────────────── */
+
+.sdm-strip {
+ position: relative;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 7px 10px;
+ background: #f5f0e8;
+ border-top: 1px dashed #b0a090;
+ border-bottom: 1px dashed #b0a090;
+ border-left: 3px solid #8a7a6a;
+ border-right: 3px solid #8a7a6a;
+ cursor: grab;
+ user-select: none;
+ overflow: hidden;
+ transform: rotate(var(--tilt, 0deg));
+ box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.22);
+ transition: opacity 0.1s;
+ min-height: 34px;
+}
+
+.sdm-strip:active {
+ cursor: grabbing;
+}
+
+/* Drag states */
+
+.sdm-strip-dragging {
+ opacity: 0.45;
+ border-color: #6a82aa !important;
+}
+
+.sdm-insert-before::before,
+.sdm-insert-after::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ right: 0;
+ height: 3px;
+ background: #4a90d9;
+ border-radius: 2px;
+ z-index: 2;
+}
+
+.sdm-insert-before::before {
+ top: -6px;
+}
+
+.sdm-insert-after::after {
+ bottom: -6px;
+}
+
+/* Rotated strip — rotate the content wrapper, flip button stays upright */
+
+.sdm-strip-content {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ flex: 1;
+ min-width: 0;
+}
+
+.sdm-strip-rotated .sdm-strip-content {
+ transform: rotate(180deg);
+}
+
+/* Locked (completed) strip */
+
+.sdm-strip-locked {
+ cursor: default;
+ border-color: #6a9a6a;
+ background: #f0f5f0;
+}
+
+/* ── Strip contents ──────────────────────────────────────── */
+
+.sdm-drag-handle {
+ color: #b0a090;
+ font-size: 14px;
+ flex-shrink: 0;
+ line-height: 1;
+}
+
+.sdm-strip-text {
+ font-family: 'VT323', monospace;
+ font-size: 17px;
+ color: #1a1008;
+ line-height: 1.3;
+ flex: 1;
+}
+
+.sdm-strip-locked .sdm-strip-text {
+ color: #2a3a1a;
+}
+
+/* ── Flip button ─────────────────────────────────────────── */
+
+.sdm-flip-btn {
+ font-family: 'Press Start 2P', monospace;
+ font-size: 9px;
+ background: #e8e0d0;
+ color: #5a4a3a;
+ border: 2px solid #b0a090;
+ padding: 3px 6px;
+ cursor: pointer;
+ flex-shrink: 0;
+ line-height: 1;
+}
+
+.sdm-flip-btn:hover {
+ background: #d8cfc0;
+ border-color: #8a7a6a;
+}
+
+/* ── Completed state ─────────────────────────────────────── */
+
+.sdm-completed-banner {
+ padding: 10px 16px;
+ background: #062010;
+ border-bottom: 2px solid #00c853;
+ color: #00c853;
+ font-size: 7px;
+ letter-spacing: 1px;
+ flex-shrink: 0;
+}
+
+.sdm-success-reveal {
+ padding: 10px 16px;
+ background: #081808;
+ border-bottom: 2px solid #2a3a5a;
+ color: #c8ffcc;
+ font-family: 'VT323', monospace;
+ font-size: 16px;
+ line-height: 1.4;
+ flex-shrink: 0;
+}
+
+/* ── Empty state ─────────────────────────────────────────── */
+
+.sdm-empty-state {
+ font-size: 7px;
+ color: #4a6090;
+ text-align: center;
+ padding: 24px 0;
+}
+
diff --git a/public/break_escape/js/minigames/index.js b/public/break_escape/js/minigames/index.js
index 73304e22..40c89ff3 100644
--- a/public/break_escape/js/minigames/index.js
+++ b/public/break_escape/js/minigames/index.js
@@ -37,6 +37,7 @@ export { LogFilterMinigame } from './log-filter/log-filter-minigame.js';
export { DrugLibraryIntegrityMinigame } from './drug-library-integrity/drug-library-integrity-minigame.js';
export { CoverageDecisionFormMinigame } from './coverage-decision-form/coverage-decision-form-minigame.js';
export { WarrantyChecklistMinigame } from './warranty-checklist/warranty-checklist-minigame.js';
+export { ShreddedDocumentMinigame } from './shredded-document/shredded-document-minigame.js';
export { CryptexMinigame } from './cryptex/cryptex-minigame.js';
export { CombinationMinigame } from './combination/combination-minigame.js';
@@ -120,6 +121,7 @@ import { LogFilterMinigame } from './log-filter/log-filter-minigame.js';
import { DrugLibraryIntegrityMinigame } from './drug-library-integrity/drug-library-integrity-minigame.js';
import { CoverageDecisionFormMinigame } from './coverage-decision-form/coverage-decision-form-minigame.js';
import { WarrantyChecklistMinigame } from './warranty-checklist/warranty-checklist-minigame.js';
+import { ShreddedDocumentMinigame } from './shredded-document/shredded-document-minigame.js';
import { CryptexMinigame } from './cryptex/cryptex-minigame.js';
import { CombinationMinigame } from './combination/combination-minigame.js';
@@ -167,6 +169,7 @@ MinigameFramework.registerScene('log-filter', LogFilterMinigame);
MinigameFramework.registerScene('drug-library-integrity', DrugLibraryIntegrityMinigame);
MinigameFramework.registerScene('coverage-decision-form', CoverageDecisionFormMinigame);
MinigameFramework.registerScene('warranty-checklist', WarrantyChecklistMinigame);
+MinigameFramework.registerScene('shredded-document', ShreddedDocumentMinigame);
MinigameFramework.registerScene('cryptex', CryptexMinigame);
MinigameFramework.registerScene('combination', CombinationMinigame);
diff --git a/public/break_escape/js/minigames/shredded-document/shredded-document-minigame.js b/public/break_escape/js/minigames/shredded-document/shredded-document-minigame.js
new file mode 100644
index 00000000..6d673e4a
--- /dev/null
+++ b/public/break_escape/js/minigames/shredded-document/shredded-document-minigame.js
@@ -0,0 +1,291 @@
+import { MinigameScene } from '../framework/base-minigame.js';
+
+function escapeHtml(value) {
+ return String(value || '')
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+}
+
+function setGlobalAndNotify(varName, value) {
+ if (!window.gameState) window.gameState = {};
+ if (!window.gameState.globalVariables) window.gameState.globalVariables = {};
+
+ const oldValue = window.gameState.globalVariables[varName];
+ if (oldValue === value) return;
+
+ window.gameState.globalVariables[varName] = value;
+ if (window.gameScenario?.globalVariables) {
+ window.gameScenario.globalVariables[varName] = value;
+ }
+ if (window.npcConversationStateManager) {
+ window.npcConversationStateManager.broadcastGlobalVariableChange(varName, value, null);
+ }
+ if (window.eventDispatcher) {
+ window.eventDispatcher.emit(`global_variable_changed:${varName}`, { name: varName, value, oldValue });
+ }
+}
+
+export class ShreddedDocumentMinigame extends MinigameScene {
+ constructor(container, params) {
+ super(container, {
+ ...params,
+ title: params.title || 'Document Reconstruction',
+ showCancel: true,
+ cancelText: params.cancelText || 'Close'
+ });
+
+ const minigameData = params.lockable?.scenarioData?.minigameData || {};
+
+ this.allowRotation = params.allowRotation ?? minigameData.allowRotation ?? false;
+ this.documentTitle = params.documentTitle || minigameData.documentTitle || null;
+ this.successMessage = params.successMessage || minigameData.successMessage || 'Document reconstructed.';
+ this.stateWriteVar = params.stateWrites?.onComplete || minigameData.stateWrites?.onComplete || null;
+
+ // content + stripCount: split a full document string into N word-boundary strips.
+ // This creates mid-sentence breaks, making the puzzle significantly harder than
+ // the strips[] array where each entry is a complete semantic unit.
+ const content = params.content || minigameData.content || null;
+ const stripCount = params.stripCount || minigameData.stripCount || 10;
+ this.correctStrips = content
+ ? this._generateStripsFromContent(content, stripCount)
+ : (params.strips || minigameData.strips || []);
+
+ this.currentOrder = [];
+ this.draggedIndex = null;
+ this.completed = false;
+ }
+
+ init() {
+ super.init();
+ this.container.classList.add('sdm-container');
+ this.gameContainer.classList.add('sdm-game-container');
+ if (this.headerElement) this.headerElement.style.display = 'none';
+
+ this.completed = this._isAlreadyCompleted();
+ this.currentOrder = this.completed
+ ? this.correctStrips.map((text, i) => ({ id: i, text, rotated: false, tilt: 0 }))
+ : this._shuffleStrips();
+
+ this.render();
+ }
+
+ start() {
+ super.start();
+ }
+
+ _generateStripsFromContent(content, stripCount) {
+ // Split content into words, preserving intentional line breaks as visible markers
+ const words = content.trim().replace(/\n/g, ' ↵ ').split(/\s+/).filter(Boolean);
+ const total = words.length;
+ const strips = [];
+ for (let i = 0; i < stripCount; i++) {
+ const start = Math.round((i / stripCount) * total);
+ const end = Math.round(((i + 1) / stripCount) * total);
+ const chunk = words.slice(start, end);
+ if (chunk.length > 0) strips.push(chunk.join(' '));
+ }
+ return strips;
+ }
+
+ _isAlreadyCompleted() {
+ if (!this.stateWriteVar) return false;
+ return window.gameState?.globalVariables?.[this.stateWriteVar] === true;
+ }
+
+ _shuffleStrips() {
+ const strips = this.correctStrips.map((text, i) => ({ id: i, text, rotated: false, tilt: (Math.random() - 0.5) * 2.4 }));
+
+ // Fisher-Yates shuffle
+ for (let i = strips.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [strips[i], strips[j]] = [strips[j], strips[i]];
+ }
+
+ // Guarantee the result is not trivially solved (matches correct order)
+ if (strips.length > 1 && strips.every((s, i) => s.id === i)) {
+ [strips[0], strips[1]] = [strips[1], strips[0]];
+ }
+
+ // Apply random rotations to ~40% of strips when rotation mode is on
+ if (this.allowRotation) {
+ strips.forEach(s => { s.rotated = Math.random() < 0.4; });
+ }
+
+ return strips;
+ }
+
+ _checkCompletion() {
+ const inOrder = this.currentOrder.every((strip, i) => strip.id === i);
+ const allUpright = !this.allowRotation || this.currentOrder.every(s => !s.rotated);
+ if (inOrder && allUpright) this._onComplete();
+ }
+
+ _onComplete() {
+ this.completed = true;
+ if (this.stateWriteVar) {
+ setGlobalAndNotify(this.stateWriteVar, true);
+ }
+ this.showSuccess(escapeHtml(this.successMessage), true, 3000);
+ }
+
+ render() {
+ const prevScrollTop = this.gameContainer.querySelector('.sdm-scroll')?.scrollTop || 0;
+
+ if (this.completed) {
+ this._renderCompleted();
+ } else {
+ this._renderPuzzle();
+ }
+
+ const scrollable = this.gameContainer.querySelector('.sdm-scroll');
+ if (scrollable && prevScrollTop > 0) scrollable.scrollTop = prevScrollTop;
+
+ this.bindEvents();
+ }
+
+ _renderCompleted() {
+ const titleHtml = this.documentTitle
+ ? `${escapeHtml(this.documentTitle)}
`
+ : '';
+
+ const stripsHtml = this.currentOrder
+ .map(s => `${escapeHtml(s.text)}
`)
+ .join('');
+
+ this.gameContainer.innerHTML = `
+
+
Document already reconstructed.
+
${escapeHtml(this.successMessage)}
+
+
${escapeHtml(this.documentTitle)}
`
+ : '';
+
+ const instructionText = this.allowRotation
+ ? 'Drag the strips into the correct reading order. Flip any upside-down strips using ↕.'
+ : 'Drag the strips into the correct reading order.';
+
+ const stripsHtml = this.currentOrder.map((strip, i) => {
+ const rotatedClass = strip.rotated ? ' sdm-strip-rotated' : '';
+ const flipBtn = this.allowRotation
+ ? ``
+ : '';
+ return `
+
+
+ ⠿
+ ${escapeHtml(strip.text)}
+
+ ${flipBtn}
+
No document strips configured in scenario.
'
+ : stripsHtml;
+
+ this.gameContainer.innerHTML = `
+
+
${escapeHtml(instructionText)}
+
+