Workplace Detective · DrAIStudio& <link rel="canonical" href="https://draistudio.com/innovative-games/workplace-detective-law/"> <meta name="description" content="A film-noir HR investigation game. Examine evidence, interview witnesses, name the violation."/> <meta name="theme-color" content="#0d0a08"/> <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext y='52' font-size='52'%3E%F0%9F%95%B5%EF%B8%8F%3C/text%3E%3C/svg%3E"/> <style> :root{--paper:#e8dcb8;--paperDark:#c4b48a;--ink:#1a1408;--sepia:#5c4520;--lampGlow:#f8c870;--rain:#7a8aa0;--shadow:#0a0805} *,*::before,*::after{box-sizing:border-box} html,body{margin:0;min-height:100%;background:var(--shadow);color:var(--paper);font-family:'Georgia','Times New Roman',serif;overflow-x:hidden;-webkit-text-size-adjust:100%} body{-webkit-user-select:none;user-select:none} /* ─── Noir office scene ─── */ .scene{position:fixed;inset:0;z-index:0;overflow:hidden;background: /* desk surface */ linear-gradient(180deg,transparent 0%,transparent 56%,#1a0f06 58%,#0d0805 100%), /* wall — dim sepia */ radial-gradient(ellipse 80% 60% at 50% 30%,rgba(248,200,112,.10) 0%,transparent 60%), linear-gradient(180deg,#1a120a 0%,#0a0604 100%)} /* Window with rain — top-left */ .scene .window{position:absolute;top:6%;left:4%;width:30%;height:42%;background: linear-gradient(180deg,#0a0e1a 0%,#1c2440 100%); border:8px solid #0a0604;box-shadow:inset 0 0 40px rgba(0,0,0,.8),0 12px 32px rgba(0,0,0,.7);overflow:hidden} .scene .window::before{content:"";position:absolute;inset:0;background: repeating-linear-gradient(0deg,transparent 0,transparent 45%,rgba(0,0,0,.7) 46%,rgba(0,0,0,.7) 47%,transparent 48%), repeating-linear-gradient(90deg,transparent 0,transparent 49%,rgba(0,0,0,.7) 50%,rgba(0,0,0,.7) 51%,transparent 52%);pointer-events:none} /* Rain falling */ .scene .window::after{content:"";position:absolute;inset:0;background: linear-gradient(135deg,transparent 0,transparent 49%,rgba(255,255,255,.15) 50%,transparent 51%), linear-gradient(135deg,transparent 0,transparent 49%,rgba(255,255,255,.10) 50%,transparent 51%), linear-gradient(135deg,transparent 0,transparent 49%,rgba(255,255,255,.12) 50%,transparent 51%); background-size:30px 80px,42px 100px,18px 60px; background-position:0 0,15px 20px,30px 5px; animation:rain 1.2s linear infinite; pointer-events:none;opacity:.55} @keyframes rain{to{background-position:0 80px,15px 120px,30px 65px}} /* Light bleeding through blinds onto wall */ .scene .blinds{position:absolute;top:6%;right:6%;width:28%;height:46%;background: repeating-linear-gradient(0deg, rgba(248,200,112,.10) 0,rgba(248,200,112,.10) 16px, transparent 16px,transparent 32px); filter:blur(2px);opacity:.65;pointer-events:none} /* Desk lamp — bright cone of light */ .scene .lampCone{position:absolute;top:0;left:50%;transform:translateX(-50%);width:65%;max-width:600px;height:65%;background: radial-gradient(ellipse 50% 100% at 50% 0%,rgba(248,200,112,.4) 0%,rgba(248,200,112,.15) 30%,transparent 70%); pointer-events:none} .scene .lamp{position:absolute;top:5%;left:50%;transform:translateX(-50%);width:48px;height:90px;pointer-events:none} .scene .lamp::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:3px;height:48px;background:#0a0604} .scene .lamp::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:0;border-left:24px solid transparent;border-right:24px solid transparent;border-top:42px solid #1a1208;filter:drop-shadow(0 4px 8px rgba(0,0,0,.7))} /* Desk objects */ .scene .typewriter{position:absolute;bottom:8%;right:8%;width:140px;height:80px;background:linear-gradient(180deg,#3a3028,#1a1410);border-radius:4px;box-shadow:0 12px 24px rgba(0,0,0,.6);opacity:.65} .scene .typewriter::before{content:"";position:absolute;top:8px;left:10px;right:10px;height:14px;background:#0a0604;border-radius:2px} .scene .typewriter::after{content:"";position:absolute;bottom:8px;left:12px;right:12px;height:32px;background: repeating-linear-gradient(90deg,#5a4a3a 0,#5a4a3a 8px,#1a1208 8px,#1a1208 10px); border-radius:2px} .scene .smoke{position:absolute;top:50%;left:30%;width:200px;height:300px;pointer-events:none;opacity:.18} .scene .smoke::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 30% 50% at 50% 50%,rgba(248,235,200,.5) 0%,transparent 70%);filter:blur(20px);animation:smoke 8s ease-in-out infinite} @keyframes smoke{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(40px) scale(1.3)}} .wrap{position:relative;z-index:2;max-width:820px;margin:0 auto;padding:32px 22px 80px} .crumb{display:inline-block;font-size:11px;color:var(--paper);margin-bottom:18px;padding:6px 14px;border:1px solid rgba(232,220,184,.3);background:rgba(13,10,8,.7);text-decoration:none;letter-spacing:.2em;text-transform:uppercase;font-family:Georgia,serif;font-weight:700} .crumb:hover{color:#fff;border-color:var(--paper)} /* Title — vintage typewriter feel */ header.h{text-align:center;margin-bottom:14px} h1{font-size:clamp(26px,4vw,38px);margin:0;letter-spacing:.04em;color:var(--paper);font-family:'Courier New',monospace;font-weight:900;text-shadow:0 4px 12px rgba(0,0,0,.8)} h1::before,h1::after{content:"";display:inline-block;width:24px;height:1px;background:var(--paper);vertical-align:middle;margin:0 12px;opacity:.6} .sub{font-size:11px;color:var(--lampGlow);letter-spacing:.28em;text-align:center;margin-bottom:22px;text-transform:uppercase;font-style:italic;font-family:Georgia,serif;opacity:.85} .hud{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:16px} .chip{background:linear-gradient(180deg,#3a2818 0%,#1a1208 100%);border:1px solid var(--sepia);padding:7px 14px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--paper);font-family:'Courier New',monospace;box-shadow:0 3px 8px rgba(0,0,0,.6)} .chip b{font-size:14px;margin-left:6px;color:var(--lampGlow);letter-spacing:0} /* Case file — looks like a manila folder */ .case-file{background:linear-gradient(180deg,var(--paper) 0%,var(--paperDark) 100%);color:var(--ink);border:2px solid #5c4520;padding:22px 24px;margin-bottom:18px;box-shadow:0 18px 36px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.3);position:relative;border-radius:0;transform:rotate(-0.4deg);font-family:Georgia,serif} .case-file::before{content:"";position:absolute;top:-10px;left:30px;width:60px;height:24px;background:linear-gradient(180deg,#a89060,#7a6238);border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.4)} .case-file::after{content:"CONFIDENTIAL";position:absolute;top:8px;right:14px;font-size:11px;letter-spacing:.24em;color:#b91c1c;font-weight:900;border:2px solid #b91c1c;padding:2px 8px;transform:rotate(8deg);font-family:'Courier New',monospace} .case-file .label{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--sepia);font-weight:800;margin-bottom:6px;font-family:'Courier New',monospace} .case-file h2{margin:0 0 8px;font-size:22px;color:var(--ink);letter-spacing:.01em;font-family:Georgia,serif} .case-file p{margin:0;font-size:14.5px;line-height:1.55;color:#2a1810;font-style:italic;font-family:Georgia,serif} .section-title{font-size:13px;color:var(--lampGlow);text-transform:uppercase;letter-spacing:.28em;margin:22px 0 10px;font-weight:800;font-family:'Courier New',monospace;text-shadow:0 0 12px rgba(248,200,112,.3)} .evidence{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:14px} .ev{background:linear-gradient(180deg,var(--paper) 0%,var(--paperDark) 100%);color:var(--ink);border:1px solid #5c4520;padding:12px 14px;cursor:pointer;text-align:left;transition:transform .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent;font-size:13px;line-height:1.4;font-family:Georgia,serif;box-shadow:0 6px 14px rgba(0,0,0,.5);position:relative;transform:rotate(-0.2deg)} .ev:nth-child(even){transform:rotate(0.3deg)} .ev:hover{transform:rotate(0deg) translateY(-3px) scale(1.02);box-shadow:0 12px 24px rgba(0,0,0,.6)} .ev.seen{background:linear-gradient(180deg,#d0c096 0%,#a89060 100%)} .ev.seen::after{content:"📎 EXAMINED";position:absolute;top:6px;right:6px;font-size:8px;letter-spacing:.16em;color:#b91c1c;font-weight:900;font-family:'Courier New',monospace} .ev .name{font-weight:800;font-size:14.5px;margin-bottom:4px;color:var(--ink)} .ev .who{font-size:10px;color:var(--sepia);letter-spacing:.16em;text-transform:uppercase;font-family:'Courier New',monospace;font-weight:700} .accuse{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px} @media (max-width:480px){.accuse{grid-template-columns:1fr}} .accuse button{background:linear-gradient(180deg,#3a2818,#1a1208);border:2px solid var(--sepia);color:var(--paper);padding:14px 16px;font:inherit;font-weight:700;cursor:pointer;text-align:left;font-size:14px;line-height:1.4;transition:all .12s;font-family:Georgia,serif;box-shadow:0 4px 10px rgba(0,0,0,.5)} .accuse button:hover{border-color:var(--lampGlow);background:linear-gradient(180deg,#5a3818,#2a1810);box-shadow:0 6px 14px rgba(0,0,0,.6)} .accuse button.right{background:linear-gradient(180deg,#16a34a,#0d5e2c);border-color:#7ddc9e;color:#fff} .accuse button.wrong{background:linear-gradient(180deg,#b91c1c,#5a0808);border-color:#fca5a5;color:#fff} /* Modals — old detective files */ .modal{position:fixed;inset:0;background:rgba(0,0,0,.93);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:30;padding:18px} .modal.hidden{display:none} .card{background:linear-gradient(180deg,var(--paper) 0%,var(--paperDark) 100%);border:2px solid var(--sepia);color:var(--ink);max-width:560px;width:100%;padding:28px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.3);position:relative;font-family:Georgia,serif;transform:rotate(-0.3deg)} .card::before{content:"";position:absolute;top:-12px;left:30px;width:80px;height:30px;background:linear-gradient(180deg,#a89060,#7a6238);border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.4)} .card::after{content:"CASE FILE";position:absolute;top:10px;right:14px;font-size:11px;letter-spacing:.24em;color:#b91c1c;font-weight:900;border:2px solid #b91c1c;padding:2px 8px;transform:rotate(8deg);font-family:'Courier New',monospace} .card h2{margin:0 0 6px;font-size:26px;color:var(--ink);letter-spacing:.02em} .card .s{color:var(--sepia);font-size:11px;margin-bottom:18px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;font-family:'Courier New',monospace} .rules{text-align:left;background:rgba(92,69,32,.1);border-left:3px solid var(--sepia);padding:14px 18px;font-size:14px;line-height:1.65;margin-bottom:18px;color:var(--ink)} .rules li{margin:6px 0} .rules b{color:#7a4818} .detail{text-align:left;background:rgba(92,69,32,.08);border-left:3px solid var(--sepia);padding:14px 18px;font-size:14px;line-height:1.65;margin-bottom:18px;color:var(--ink);font-style:italic} .btn{cursor:pointer;border:2px solid var(--sepia);background:linear-gradient(180deg,#5a3818,#3a2410);color:var(--paper);font-weight:700;padding:12px 26px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;display:inline-block;font-family:Georgia,serif;box-shadow:0 4px 10px rgba(0,0,0,.5)} .btn:hover{background:linear-gradient(180deg,#7a4818,#5a2818);transform:translateY(-1px)} .btn.ghost{background:transparent;color:var(--sepia);border-color:var(--sepia)} .btn.ghost:hover{background:rgba(92,69,32,.15)} .btnrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} @media (max-width:520px){ .scene .window{display:none} .scene .blinds{display:none} .scene .typewriter{display:none} } </style> <link rel="stylesheet" href="/assets/light-theme.css?v=2026-05-31-gold" /> <script defer src="/assets/analytics.js?v=2026-05-20"></script> </head><body> <div class="scene"> <div class="window"></div> <div class="blinds"></div> <div class="lampCone"></div> <div class="lamp"></div> <div class="typewriter"></div> <div class="smoke"></div> </div> <div class="wrap"> <a class="crumb" href="/innovative-games/">← Catalogue</a> <header class="h"><h1>Workplace Detective</h1></header> <div class="sub">— Employment Law · Three Cases — One Night —</div> <div class="hud"> <div class="chip">Case <b><span id="cnum">1</span>/<span id="ctot">3</span></b></div> <div class="chip">Evidence <b><span id="seen">0</span>/<span id="total">0</span></b></div> <div class="chip">Charged <b id="correct">0</b></div> </div> <div class="case-file"> <div class="label">File ▸ Case Brief</div> <h2 id="cTitle">…</h2> <p id="cBrief"></p> </div> <div class="section-title">— Evidence on the Desk —</div> <div class="evidence" id="evidence"></div> <div class="section-title">— Name the Violation —</div> <div class="accuse" id="accuse"></div> </div> <div class="modal" id="intro"> <div class="card"> <h2>The Investigator's Notes</h2> <div class="s">Employment Law · 14-week sim</div> <ul class="rules"> <li>Three cases. Three sets of clues. One rainy night.</li> <li>Each case presents a complaint and 4–6 pieces of evidence — witnesses, documents, patterns.</li> <li>Click any piece to examine it. You can read all, some, or none — your call.</li> <li>Pick the correct legal violation from four options. Wrong charge and the case <b>collapses</b>.</li> </ul> <div class="btnrow"><button class="btn" id="start">Open the File →</button><a class="btn ghost" href="/games/employment-law/">Source: 14-week sim</a></div> </div> </div> <div class="modal hidden" id="evModal"> <div class="card"> <h2 id="evTitle">Evidence</h2> <div class="s" id="evWho"></div> <div class="detail" id="evDetail"></div> <div class="btnrow"><button class="btn" id="evClose">Close</button></div> </div> </div> <div class="modal hidden" id="over"> <div class="card"> <h2 id="overTitle">— The File Closes —</h2> <div class="s" id="overSub"></div> <div class="rules" id="overNote"></div> <div class="btnrow"><button class="btn" id="again">New stack of files</button><a class="btn ghost" href="/innovative-games/">More games</a></div> </div> </div> <script> (() => { const $ = id => document.getElementById(id); const CASES = [ { title:"The probationary dismissal", brief:"Sarah was dismissed after four months for 'poor culture fit.' She had announced her pregnancy three weeks before dismissal. Her manager swears it's unrelated.", evidence:[ { name:"Sarah's emails",who:"Document",detail:"Two polite emails declining post-7pm 'team drinks' due to her pregnancy. Manager's replies are curt one-liners; tone shift visible." }, { name:"3-month review",who:"Document",detail:"'Exceeds expectations on technical output, meets on collaboration.' Not a word about culture concerns." }, { name:"Slack message",who:"Witness",detail:"Peer recalls the manager joking: 'Going to be a fun next 18 months working around her.' Said in a small huddle two days after the pregnancy was announced." }, { name:"Exit interview",who:"Document",detail:"Sarah declined to be interviewed. The form was left blank — HR ticked the box 'no concerns.'" }, { name:"Dismissal pattern",who:"Pattern",detail:"Three dismissals from this manager's team in two years — all women, all within six months of family-related news (pregnancy or eldercare)." }, ], options:[ { t:"Pregnancy discrimination (protected ground)",correct:true,why:"Temporal proximity to disclosure, the manager's joke, the pattern of dismissals tied to family events, and a 3-month review with no concerns. All circumstantial — but in employment law, circumstantial pattern is enough to flip the burden of proof." }, { t:"Wrongful termination — no notice given",correct:false,why:"Probation generally allows easier dismissal — but never on protected grounds. The issue here is the WHY, not the procedure." }, { t:"No violation — probation gives wide latitude",correct:false,why:"Probation isn't a free pass. Pregnancy is protected from day one in most jurisdictions." }, { t:"Constructive dismissal",correct:false,why:"That applies when the employer's conduct forces a RESIGNATION. Sarah was actively dismissed." }, ], }, { title:"The unpaid overtime", brief:"Marcus, a salaried 'project coordinator,' works 60+ hours a week. Duties are mostly clerical. He files for unpaid overtime.", evidence:[ { name:"Job description",who:"Document",detail:"Title: Project Coordinator. Duties: data entry, scheduling, expense reports, filing. No managerial authority, no independent judgement." }, { name:"Pay slips",who:"Document",detail:"Monthly salary $52,000/year. Classified as exempt. No overtime ever paid." }, { name:"Personal log",who:"Document",detail:"Marcus kept a personal log: 56–64 hours weekly for 14 consecutive months. Confirmed by Slack timestamps." }, { name:"Manager interview",who:"Witness",detail:"'We made him salaried so we wouldn't have to track hours. He runs his own schedule.' Admits no specialised knowledge required." }, ], options:[ { t:"FLSA misclassification — exempt status invalid",correct:true,why:"Under FLSA, exempt status requires not just a salary but specific duties (executive, administrative, professional). Clerical + low decision authority = misclassified. Marcus is owed back overtime." }, { t:"No violation — he's salaried so no OT applies",correct:false,why:"Salaried alone isn't enough. The duties test must also be met. Most common employer mistake." }, { t:"Wage theft — withheld pay",correct:false,why:"Wage theft is willful withholding. Misclassification is the mechanism that creates the underpayment." }, { t:"Breach of contract",correct:false,why:"His contract says salaried. The classification itself is unlawful — a contract can't override the FLSA." }, ], }, { title:"The disability accommodation refusal", brief:"James develops a chronic condition and requests a 2-hour weekly schedule shift for treatment. HR refuses: 'everyone has to work the same hours.'", evidence:[ { name:"Doctor's letter",who:"Document",detail:"Confirms a 12-month treatment plan. Asks for one weekly 2-hour shift. Plan can flex around employer needs." }, { name:"HR's response",who:"Document",detail:"'Our policy requires uniform schedules. We cannot make exceptions.' No discussion of alternatives." }, { name:"James's role",who:"Document",detail:"Software engineer — remote-eligible, asynchronous work. No customer-facing deadlines tied to specific hours." }, { name:"Recent precedent",who:"Pattern",detail:"Two other engineers (without disabilities) work non-standard hours informally. No issue raised." }, { name:"HR Director",who:"Witness",detail:"'We were worried about setting a precedent.' Admits no impact assessment was done." }, ], options:[ { t:"Failure to provide reasonable accommodation",correct:true,why:"ADA / Equality Act and equivalents require an INTERACTIVE PROCESS to explore reasonable accommodations. Blanket refusal without dialogue is itself a violation. The ask here is also low-cost and feasible." }, { t:"Direct discrimination",correct:false,why:"That requires different treatment because of disability. Here it's failure to accommodate — a distinct claim under most disability laws." }, { t:"No violation — uniform policies are legal",correct:false,why:"Uniform policies are presumptively legal until they collide with a duty to accommodate. Then the duty wins." }, { t:"Constructive dismissal",correct:false,why:"James hasn't resigned. Constructive dismissal requires resignation in response to intolerable conduct." }, ], }, ]; const state = { i:0, correct:0, wrong:0, seen:new Set() }; $('ctot').textContent = CASES.length; function start(){ $('intro').classList.add('hidden'); $('over').classList.add('hidden'); state.i = 0; state.correct = 0; state.wrong = 0; nextCase(); } function nextCase(){ if (state.i >= CASES.length) return end(); const c = CASES[state.i]; state.seen = new Set(); $('cnum').textContent = state.i + 1; $('total').textContent = c.evidence.length; $('seen').textContent = 0; $('correct').textContent = state.correct; $('cTitle').textContent = c.title; $('cBrief').textContent = c.brief; const ev = $('evidence'); ev.innerHTML = ''; c.evidence.forEach((e,k) => { const el = document.createElement('button'); el.className = 'ev'; el.innerHTML = `<div class="name">${esc(e.name)}</div><div class="who">${esc(e.who)}</div>`; el.onclick = () => examine(e, el, k); ev.appendChild(el); }); const ac = $('accuse'); ac.innerHTML = ''; const opts = c.options.slice().sort(()=>Math.random()-0.5); opts.forEach(o => { const el = document.createElement('button'); el.textContent = o.t; el.onclick = () => accuse(o, el, c); ac.appendChild(el); }); } function examine(e, el, k){ if (!state.seen.has(k)) { state.seen.add(k); el.classList.add('seen'); $('seen').textContent = state.seen.size; } $('evTitle').textContent = e.name; $('evWho').textContent = e.who; $('evDetail').textContent = e.detail; $('evModal').classList.remove('hidden'); } function accuse(o, el, c){ [...document.querySelectorAll('#accuse button')].forEach(b => b.onclick = null); if (o.correct) { state.correct++; el.classList.add('right'); } else { state.wrong++; el.classList.add('wrong'); const right = [...document.querySelectorAll('#accuse button')].find(b => b.textContent === c.options.find(x => x.correct).t); if (right) right.classList.add('right'); } $('correct').textContent = state.correct; setTimeout(() => { $('evTitle').textContent = o.correct ? '✓ Case Closed' : '✗ Case Collapsed'; $('evWho').textContent = o.t; $('evDetail').innerHTML = esc(o.why) + (o.correct ? '' : `<br><br><b style="color:#16a34a">The correct charge:</b> ${esc(c.options.find(x=>x.correct).t)}<br>${esc(c.options.find(x=>x.correct).why)}`); $('evModal').classList.remove('hidden'); $('evClose').textContent = 'Next case →'; $('evClose').onclick = () => { $('evModal').classList.add('hidden'); $('evClose').textContent='Close'; $('evClose').onclick=()=>$('evModal').classList.add('hidden'); state.i++; nextCase(); }; }, 800); } function end(){ $('overTitle').textContent = state.correct === CASES.length ? '— All Three Solved —' : state.correct >= 2 ? '— Mostly Solid Casework —' : '— Some Files Left Open —'; $('overSub').textContent = `${state.correct} of ${CASES.length} correctly charged`; $('overNote').innerHTML = 'Employment law turns on pattern, documentation, and the specific legal test for each protected ground. The 14-week Employment Law sim covers it all. <a href="/games/employment-law/" style="color:#7a4818;font-weight:800">Play the full sim →</a>'; $('over').classList.remove('hidden'); } function esc(s){return String(s).replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]))} $('start').onclick = start; $('again').onclick = start; $('evClose').onclick = () => $('evModal').classList.add('hidden'); })(); </script> </body></html>