Emma Lightwood: The Missing Article \u2014 Visible Birth Date V7<\/title>\n<style>\n:root{\n --bg:#05090d;--panel:#0d1822;--panel2:#132432;--ink:#ecf5f7;--muted:#9db0ba;\n --cyan:#55d7f2;--green:#57d37b;--red:#ff5d64;--amber:#f4bc54;--paper:#dfd2b8;\n --shadow:0 20px 60px #000b;\n}\n*{box-sizing:border-box}\nhtml{margin:0;width:100%;min-height:100%;background:#020508;scroll-behavior:smooth}\nbody{margin:0;width:100%;min-height:100%;overflow-x:hidden;overflow-y:auto;background:#020508;color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif}\nbutton,input{font:inherit}\nbutton{cursor:pointer}\n#game{position:relative;isolation:isolate;width:100%;min-height:760px;margin:0 auto;background:\n radial-gradient(circle at 20% 15%,#173047 0,transparent 28%),\n radial-gradient(circle at 85% 80%,#2d1717 0,transparent 28%),\n linear-gradient(145deg,#050a0f,#020407 65%);overflow:hidden;border-radius:14px}\n#game.immersive{position:fixed!important;inset:0!important;z-index:2147483647!important;width:100vw!important;height:100dvh!important;min-height:0!important;margin:0!important;border-radius:0!important;overflow:auto!important}\nbody.game-locked{overflow:hidden!important}\n#game:fullscreen,#game:-webkit-full-screen{width:100vw!important;height:100dvh!important;min-height:0!important;margin:0!important;border-radius:0!important;overflow:auto!important;background:#020508!important}\n.scanlines{pointer-events:none;position:absolute;inset:0;z-index:100;background:repeating-linear-gradient(0deg,transparent 0 3px,#ffffff08 4px);mix-blend-mode:screen}\n.vignette{pointer-events:none;position:absolute;inset:0;z-index:99;box-shadow:inset 0 0 150px #000}\n.hud{position:sticky;z-index:150;top:0;min-height:74px;display:flex;align-items:center;gap:14px;padding:10px 18px;background:linear-gradient(#07111af7,#07111ae8);border-bottom:1px solid #315066;backdrop-filter:blur(10px);box-shadow:0 8px 22px #0008;flex-wrap:wrap}\n.logo{font-family:Georgia,serif;font-weight:900;letter-spacing:3px;white-space:nowrap}.logo b{color:var(--red)}\n.mission{font-size:.78rem;color:var(--muted);min-width:160px}.mission strong{display:block;color:var(--cyan);font-size:.95rem}\n.progress{height:8px;flex:1;border:1px solid #385063;border-radius:20px;overflow:hidden;background:#0a1117}\n.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fa2c5,#5ee1ff);transition:.5s}\n.timer{font-family:ui-monospace,monospace;color:#ff746f;font-weight:900;font-size:1.25rem}\n.iconbtn{border:1px solid #416178;background:#102231;color:white;border-radius:8px;padding:9px 11px}\n.scene{position:relative;display:none;overflow:visible;min-height:calc(100dvh - 74px);padding:clamp(14px,2.5vw,34px)}\n.scene.active{display:block;animation:sceneIn .45s ease}\n@keyframes sceneIn{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}\n.wrap{max-width:1280px;margin:auto;min-height:calc(100dvh - 142px);display:flex;flex-direction:column;justify-content:center}\n.chapter{display:inline-flex;align-items:center;gap:10px;color:var(--cyan);font-weight:900;letter-spacing:2px;text-transform:uppercase}\n.chapter:before{content:\"\";width:38px;height:2px;background:var(--cyan)}\nh1{font-family:Georgia,serif;font-size:clamp(2.4rem,7vw,6.5rem);line-height:.92;margin:.2em 0;letter-spacing:2px;text-shadow:0 8px 25px #000}\nh2{font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,3.4rem);margin:.25em 0;color:#dff8ff}\np{line-height:1.55}.lead{font-size:clamp(1.05rem,2vw,1.35rem);max-width:760px}\n.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}\n.card{background:linear-gradient(145deg,#122432ee,#071019ee);border:1px solid #355164;border-radius:14px;padding:18px;box-shadow:var(--shadow)}\n.glass{background:#0a151dcc;backdrop-filter:blur(10px)}\n.primary,.secondary,.danger,.success{border-radius:9px;padding:13px 18px;font-weight:900;letter-spacing:.8px;color:white;border:1px solid #678092;box-shadow:0 8px 20px #0007}\n.primary{background:linear-gradient(#174862,#102d40)}.secondary{background:#17242d}.danger{background:linear-gradient(#9c302e,#671817)}.success{background:linear-gradient(#248c43,#155c2b)}\n.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}\n.scene-art{position:relative;min-height:520px;border:1px solid #415a6d;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:#071019}\n.office{background:\n linear-gradient(#09131cab,#02070ccc),\n linear-gradient(90deg,#18242c 0 3%,transparent 3% 97%,#18242c 97%),\n repeating-linear-gradient(90deg,#1b2a34 0 130px,#0b151d 131px 138px)}\n.office:before{content:\"\";position:absolute;left:6%;right:6%;top:7%;height:44%;background:repeating-linear-gradient(90deg,#293942 0 110px,#1a272e 112px 118px);clip-path:polygon(0 0,100% 0,98% 95%,2% 100%);opacity:.7}\n.desk{position:absolute;left:8%;right:8%;bottom:5%;height:31%;background:linear-gradient(#5b3d29,#2e1a11);clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);box-shadow:0 -8px 20px #0008}\n.monitor{position:absolute;left:23%;top:19%;width:53%;height:50%;background:#061017;border:10px solid #1b2227;border-radius:10px;box-shadow:0 0 40px #5de0ff2b}\n.monitor-screen{position:absolute;inset:15px;padding:22px;background:radial-gradient(circle at 50% 45%,#16324b,#050b10 70%);overflow:hidden}\n.monitor-screen:after{content:\"EMMA LIGHTWOOD \u00b7 17\/05\/1991\";position:absolute;right:10px;bottom:7px;color:#6e8b9c;font:11px monospace}\n\/* Chapter 3: the birth-date clue must remain readable on every screen size. *\/\n.birth-monitor .monitor-screen:after{display:none}\n.birth-monitor .monitor-screen{\n display:flex;flex-direction:column;justify-content:center;align-items:stretch;\n padding:clamp(14px,2.4vw,28px);overflow:visible;\n background:radial-gradient(circle at 50% 30%,#1b415d,#050b10 74%);\n}\n.birth-monitor .archive-label{\n margin:0 0 10px;color:#8de9ff;font:900 clamp(.72rem,1.3vw,.95rem) ui-monospace,monospace;\n letter-spacing:2px;text-transform:uppercase;\n}\n.birth-profile{\n position:relative;z-index:2;padding:clamp(14px,2.5vw,24px);\n border:2px solid #f4bc54;border-radius:12px;\n background:linear-gradient(145deg,#17293a,#0a131b);\n box-shadow:0 0 0 4px #f4bc5422,0 0 34px #f4bc5440;\n text-align:left;\n}\n.birth-profile .profile-title{\n display:block;margin-bottom:12px;color:#eaf8ff;font:900 clamp(1rem,2.2vw,1.5rem) Arial,sans-serif;\n}\n.birth-profile .profile-line{\n display:flex;justify-content:space-between;gap:12px;align-items:center;\n padding:9px 0;border-top:1px solid #ffffff20;color:#c5d5dc;\n font:700 clamp(.78rem,1.5vw,1rem) Arial,sans-serif;\n}\n.birth-profile .profile-line strong{color:#fff}\n.birth-profile .birth-date{\n display:block;margin-top:12px;padding:12px 10px;border-radius:9px;\n background:#f4bc54;color:#14100a;text-align:center;\n font:1000 clamp(1.6rem,4vw,3rem) ui-monospace,monospace;\n letter-spacing:clamp(2px,.7vw,8px);line-height:1;\n box-shadow:0 8px 22px #0008;\n}\n.birth-profile .birth-caption{\n display:block;margin-top:8px;color:#ffe9ae;text-align:center;\n font:900 clamp(.68rem,1.1vw,.82rem) Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;\n}\n.birth-task{margin:0 0 18px;padding:14px 16px;border-left:5px solid var(--cyan);border-radius:8px;background:#0b1d29;color:#eaf8ff}\n.birth-task strong{display:block;margin-bottom:5px;color:#8de9ff;letter-spacing:.8px;text-transform:uppercase}\n.format-tip{margin:12px 0 0;color:#c8d8de;font-size:.95rem}\n.format-tip code{display:inline-block;padding:4px 7px;border:1px solid #3e6775;border-radius:5px;background:#01070a;color:#7ff5a3;font-weight:900;letter-spacing:2px}\n@media(max-width:820px){\n .birth-monitor{min-height:500px!important}\n .birth-monitor .monitor{left:8%;top:12%;width:84%;height:62%}\n .birth-profile .profile-line{align-items:flex-start;flex-direction:column;gap:4px}\n}\n.keyboard{position:absolute;left:28%;bottom:12%;width:44%;height:8%;background:repeating-linear-gradient(90deg,#1b2227 0 14px,#3a454d 15px 16px);transform:perspective(300px) rotateX(55deg)}\n.note{position:absolute;background:#eadfbf;color:#231d15;padding:14px;box-shadow:8px 10px 15px #0008;transform:rotate(-3deg);font-family:\"Courier New\",monospace}\n.note.pin{top:10%;left:7%;width:170px}.note.red{background:#e9c9bf;transform:rotate(4deg)}\n.source-grid{display:grid!important;visibility:visible!important;opacity:1!important;min-height:1px}.source{position:relative;display:flex!important;visibility:visible!important;opacity:1!important;width:100%;min-height:112px;gap:14px;align-items:flex-start;padding:15px;border:1px solid #435b6c;border-radius:10px;background:#0c1923;color:var(--ink);text-align:left;transition:.2s;-webkit-appearance:none;appearance:none}\n.source:hover{transform:translateY(-2px);border-color:#7ab9d1}\n.source.selected{outline:3px solid var(--cyan)}.source.correct{outline:3px solid var(--green)}.source.wrong{outline:3px solid var(--red)}\n.letter{display:grid;place-items:center;min-width:38px;height:38px;border-radius:50%;background:#18384d;color:#bdefff;font-weight:900}\n.password-reveal{margin:16px 0 8px;padding:18px;border:2px solid var(--green);border-radius:12px;background:linear-gradient(135deg,#0e321d,#081d12);color:#f4fff7;box-shadow:0 0 28px #57d37b38;animation:passwordPop .35s ease}\n.password-reveal .password-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid #ffffff22}\n.password-reveal .password-row:last-of-type{border-bottom:0}\n.password-reveal .password-label{font-size:.82rem;letter-spacing:1.5px;color:#bde7c9;font-weight:900}\n.password-reveal .password-value{font-size:clamp(1.45rem,4vw,2.15rem);letter-spacing:6px;color:#ffe08b;font-weight:1000;text-shadow:0 0 16px #f4bc5470}\n.password-reveal .password-value.sources{color:#8dffae}\n.password-reveal .use-code{margin-top:12px;width:100%;border:1px solid #f4bc54;background:linear-gradient(#8b5a12,#5d3908);color:#fff7dc;border-radius:9px;padding:12px 16px;font-weight:900}\n\n.password-popup{text-align:center;padding:6px 0 2px}\n.password-popup .eyebrow{color:var(--green);font-weight:900;letter-spacing:2px;text-transform:uppercase}\n.password-popup .code-card{margin:18px 0;padding:20px;border:2px solid var(--amber);border-radius:14px;background:linear-gradient(145deg,#291d09,#0d170f);box-shadow:0 0 32px #f4bc5440}\n.password-popup .code-caption{display:block;color:#c9d7dc;font-size:.82rem;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:8px}\n.password-popup .code-big{display:block;color:#ffe08b;font-size:clamp(2.4rem,9vw,5.2rem);line-height:1;letter-spacing:10px;font-weight:1000;text-shadow:0 0 22px #f4bc5475}\n.password-popup .code-big.sources{color:#8dffae;font-size:clamp(2rem,7vw,4.2rem)}\n.password-popup .continue-code{width:100%;margin-top:8px;border:2px solid #ffe08b;background:linear-gradient(#a26d13,#694407);color:#fff;border-radius:10px;padding:15px 18px;font-weight:1000;letter-spacing:1px}\n.password-popup .continue-code:hover{filter:brightness(1.15)}\n\n@keyframes passwordPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}\n.terminal{background:#02090d;border:1px solid #2f5c6b;border-radius:10px;padding:14px;font-family:ui-monospace,monospace;color:#83e6a2;box-shadow:inset 0 0 30px #000}\n.code-input{background:#01070a;border:1px solid #3e6775;color:#7ff5a3;padding:13px;font-size:1.2rem;border-radius:7px;letter-spacing:5px;width:min(280px,100%);text-align:center}\n.wall{min-height:500px;background:\n linear-gradient(#111820cc,#111820cc),\n repeating-linear-gradient(90deg,#5c3925 0 12px,#422719 13px 15px);position:relative}\n.testimony{background:var(--paper);color:#221c16;padding:16px;border-radius:2px;box-shadow:8px 10px 15px #0008;min-height:145px;position:relative;transition:.2s}\n.testimony:before{content:\"\u25cf\";position:absolute;top:-12px;left:50%;color:#bb2525;font-size:24px}\n.testimony.active{outline:4px solid var(--amber);transform:rotate(0)!important}\n.order-strip{display:flex;gap:10px;flex-wrap:wrap;min-height:65px;padding:10px;border:2px dashed #63717a;border-radius:9px}\n.order-token{padding:12px 16px;border-radius:8px;background:#172b39;border:1px solid #5c7180;font-weight:900}\n.drawers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}\n.drawer{min-height:125px;background:linear-gradient(#514234,#27201b);border:6px solid #211a16;border-radius:5px;color:#e5d8b9;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 25px #0008}\n.drawer:hover{filter:brightness(1.2)}.handle{width:46px;height:10px;border:2px solid #a88955;border-radius:10px;margin:9px}\n.phone{width:min(340px,100%);margin:auto;background:linear-gradient(#1c2730,#080d11);padding:22px;border:1px solid #52616b;border-radius:28px;box-shadow:var(--shadow)}\n.phone-display{background:#a6c7a0;color:#173018;padding:14px;border-radius:7px;font:1.4rem ui-monospace,monospace;text-align:right;min-height:55px}\n.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.key{padding:14px;border-radius:50%;background:#273742;color:white;border:1px solid #5a6a74;font-weight:900}\n.room{position:relative;min-height:550px;background:\n linear-gradient(#061019aa,#020609dd),\n linear-gradient(25deg,#132838,#070b0e);border:1px solid #324653;border-radius:14px;overflow:hidden}\n.floor{position:absolute;left:0;right:0;bottom:0;height:42%;background:repeating-linear-gradient(90deg,#5b4633 0 70px,#38291e 72px 75px);transform-origin:bottom;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%)}\n.boardwall{position:absolute;left:6%;top:8%;width:42%;height:45%;background:#4f3724;border:9px solid #2c1e15;box-shadow:0 10px 20px #0008}\n.floorboard{position:absolute;left:55%;bottom:9%;width:170px;height:62px;background:#6a5038;border:2px solid #8e6b48;transform:rotate(-4deg);box-shadow:0 10px 15px #0008}\n.floorboard:hover{filter:brightness(1.4)}\n.briefcase{position:absolute;right:8%;bottom:17%;width:190px;height:125px;background:linear-gradient(#30363a,#11171b);border:5px solid #090c0e;border-radius:9px;box-shadow:0 15px 25px #000;display:none}\n.briefcase.visible{display:block;animation:pop .4s}@keyframes pop{from{transform:scale(.7);opacity:0}}\n.lock{position:absolute;left:42%;top:43%;width:35px;height:25px;background:#c79a3c;border-radius:4px}\n.article{background:#f0eadc;color:#171717;padding:clamp(18px,4vw,45px);max-width:850px;margin:auto;border-radius:4px;box-shadow:var(--shadow);font-family:Georgia,serif}\n.article h2{color:#111;font-family:Georgia,serif}.article .byline{color:#666;border-bottom:1px solid #999;padding-bottom:15px}\n.inventory{display:flex;gap:9px;flex-wrap:wrap}.item{padding:8px 11px;border:1px solid #6e765b;border-radius:7px;background:#17232b;font-size:.85rem}.item.locked{opacity:.25;filter:grayscale(1)}\n.modal{position:fixed;z-index:200;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:#000d}.modal.open{display:flex}\n.modalbox{width:min(620px,100%);max-height:90vh;overflow:auto;background:linear-gradient(#132431,#081119);border:1px solid #5f7481;border-radius:14px;padding:22px;box-shadow:var(--shadow)}\n.toast{position:fixed;z-index:300;right:18px;bottom:18px;max-width:420px;padding:14px 18px;border-radius:10px;background:#132431;border:1px solid #6a7e8a;box-shadow:var(--shadow);display:none}.toast.show{display:block;animation:pop .2s}\n.error{color:var(--red)}.ok{color:var(--green)}.muted{color:var(--muted)}.hidden{display:none!important}\n#game:fullscreen .hud,#game:-webkit-full-screen .hud,#game.immersive .hud{padding-top:max(10px,env(safe-area-inset-top));position:sticky;top:0}\n#game:fullscreen .scene,#game:-webkit-full-screen .scene,#game.immersive .scene{min-height:calc(100dvh - 74px)}\n@media(max-width:820px){\n .grid2,.grid3{grid-template-columns:1fr}.hud{min-height:66px;padding:8px}.scene{min-height:calc(100dvh - 66px)}.mission{display:none}.logo{font-size:.75rem}.timer{font-size:1rem}\n .scene-art{min-height:430px}.monitor{left:10%;width:80%}.drawers{grid-template-columns:repeat(2,1fr)}\n}\n\n\/* V5: reliable fact-check display + WordPress-safe layout *\/\n#eljSources .source{touch-action:manipulation}\n#eljSources .source[aria-pressed=\"true\"]{outline:3px solid var(--cyan);box-shadow:0 0 0 2px #071019,0 0 22px #55d7f255}\n#sourceLetters{display:inline-block;min-width:90px;color:#baffcb;font-weight:1000;letter-spacing:3px}\n#factCheckBtn.ready{background:linear-gradient(#2c9b51,#176b35);border-color:#87ffab;box-shadow:0 0 0 3px #57d37b35,0 10px 28px #0008;animation:readyPulse 1.1s infinite alternate}\n@keyframes readyPulse{to{filter:brightness(1.25);transform:translateY(-1px)}}\n#passwordReveal{scroll-margin-top:96px}\n#passwordReveal:not(.hidden){display:block!important}\n#sourceFeedback{min-height:28px}\n@media(max-width:680px){.hud .progress{order:4;flex-basis:100%}.iconbtn{padding:8px 9px}.wrap{min-height:auto;justify-content:flex-start}}\n\n\n\/* Mission 3 clarity improvements *\/\n.task-panel{\n margin:0 0 18px;\n padding:16px 18px;\n border:1px solid #4c7e94;\n border-left:6px solid var(--cyan);\n border-radius:12px;\n background:linear-gradient(135deg,#102632,#08131a);\n box-shadow:0 12px 28px #0006;\n}\n.task-panel h3{margin:0 0 10px;color:#dff8ff;font-size:1.25rem}\n.task-panel p{margin:6px 0;color:#d9e6eb}\n.task-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}\n.task-step{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid #315568;border-radius:10px;background:#07141c}\n.task-step b{display:grid;place-items:center;min-width:30px;height:30px;border-radius:50%;background:var(--cyan);color:#031016;font-weight:1000}\n.task-step span{line-height:1.35;color:#eef8fb}\n.timeline-code{display:inline-flex;align-items:center;gap:10px;margin-top:8px;padding:9px 13px;border-radius:9px;background:#02090d;border:1px solid #4b7b8d;font-family:ui-monospace,monospace;color:#8dffae;font-size:1.15rem;font-weight:900;letter-spacing:3px}\n.drawer-result-success{border:2px solid var(--green)!important;background:linear-gradient(135deg,#0d2d1a,#07140d)!important;text-align:center}\n.recovered-number{display:inline-block;margin:8px 0 12px;padding:14px 20px;border:2px solid var(--amber);border-radius:12px;background:#211707;color:#ffe08b;font:1000 clamp(1.8rem,5vw,3.3rem) ui-monospace,monospace;letter-spacing:7px;text-shadow:0 0 18px #f4bc5460}\n.continue-call{padding:14px 20px!important;font-size:1.05rem!important}\n.phone-guide{border-color:#48758a!important}\n.phone-guide h3{color:#dff8ff;margin-bottom:8px;font-size:1.55rem}\n.phone-guide .instruction{font-size:1.12rem;line-height:1.5;color:#eef7fa;margin:8px 0}\n.phone-guide .small-note{color:#a9bdc7;font-size:.95rem}\n.phone-guide .recovered-card{margin:14px 0;padding:14px;border:1px solid #7b683a;border-radius:10px;background:linear-gradient(135deg,#29200e,#11140d)}\n.phone-guide .recovered-card small{display:block;color:#d7c98f;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:6px}\n.phone-guide .recovered-card strong{display:block;color:#ffe08b;font:1000 clamp(1.7rem,4vw,2.7rem) ui-monospace,monospace;letter-spacing:6px}\n.autofill-btn{width:100%;margin-top:10px;border:2px solid #9fe3ff;background:linear-gradient(#176485,#0c4058);color:white;border-radius:9px;padding:12px 15px;font-weight:1000;letter-spacing:.5px}\n.autofill-btn:hover{filter:brightness(1.15)}\n.phone-display{display:flex;align-items:center;justify-content:flex-end;letter-spacing:4px;font-weight:1000}\n.phone-display:empty::before{content:'ENTER NUMBER';color:#416844;letter-spacing:2px;font-size:.95rem}\n.call-help{margin-top:12px;padding:11px 13px;border-radius:9px;background:#07151d;border:1px solid #2e5365;color:#cfe4ec}\n.call-help strong{color:#8dffae}\n@media(max-width:820px){.task-steps{grid-template-columns:1fr}.recovered-number{letter-spacing:4px}.phone-guide .recovered-card strong{letter-spacing:4px}}\n\n<\/style>\n<\/head>\n<body>\n<div id=\"game\">\n<div class=\"scanlines\"><\/div><div class=\"vignette\"><\/div>\n<header class=\"hud\">\n <div class=\"logo\">LIGHTWOOD <b>FILES<\/b> <span style=\"font:700 10px Arial;color:#8dffae;letter-spacing:1px\">V7<\/span><\/div>\n <div class=\"mission\"><strong id=\"missionTitle\">CASE NOT STARTED<\/strong><span id=\"missionText\">Find Emma. Finish the investigation.<\/span><\/div>\n <div class=\"progress\"><i id=\"progressBar\"><\/i><\/div>\n <div class=\"timer\" id=\"timer\">45:00<\/div>\n <button class=\"iconbtn\" id=\"fullscreenBtn\" onclick=\"toggleFullscreen()\">\u26f6 FULL SCREEN<\/button>\n <button class=\"iconbtn\" onclick=\"showInventory()\">CASE FILE<\/button>\n <button class=\"iconbtn\" onclick=\"hint()\">HINT <span id=\"hints\">3<\/span><\/button>\n<\/header>\n\n<section class=\"scene active\" data-scene=\"0\">\n<div class=\"wrap\">\n <div class=\"grid2\" style=\"align-items:center\">\n <div>\n <div class=\"chapter\">Prologue<\/div>\n <h1>THE MISSING ARTICLE<\/h1>\n <p class=\"lead\">Investigative journalist <b>Emma Lightwood<\/b> vanished the night before publishing a major story. Her office was found unlocked. Her computer was still running.<\/p>\n <p class=\"lead\" style=\"color:#ff7f79\">\u201cIf you want the truth to be published, finish my investigation.\u201d<\/p>\n <div class=\"actions\"><button class=\"primary\" onclick=\"startGame()\">ENTER THE NEWSROOM<\/button><\/div>\n <\/div>\n <div class=\"scene-art office\">\n <div class=\"note pin\">DO NOT TRUST APPEARANCES.<\/div>\n <div class=\"monitor\"><div class=\"monitor-screen\"><h3 style=\"color:#6ee4ff\">EMMA_LIGHTWOOD \/\/ OFFLINE<\/h3><p style=\"font-family:monospace\">Last session interrupted.<br>4 encrypted stages detected.<br><br><span style=\"color:#ff6868\">FINISH THE INVESTIGATION.<\/span><\/p><\/div><\/div>\n <div class=\"desk\"><\/div><div class=\"keyboard\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"1\">\n<div class=\"wrap\">\n <div class=\"chapter\">Chapter 1<\/div><h2>DO NOT PUBLISH WITHOUT VERIFICATION<\/h2>\n <p class=\"lead\">Emma left six sources. Select the <b>three sources that are sufficiently reliable to verify further<\/b>.<\/p>\n <div class=\"grid3 source-grid\" id=\"eljSources\" aria-label=\"Sources to verify\">\n <button type=\"button\" class=\"source\" data-letter=\"A\" aria-pressed=\"false\">\n <span class=\"letter\">A<\/span><span><b>Government press office<\/b><br><span class=\"muted\">\u201cNothing abnormal occurred inside the research centre.\u201d<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"B\" aria-pressed=\"false\">\n <span class=\"letter\">B<\/span><span><b>Passer-by testimony<\/b><br><span class=\"muted\">\u201cI saw strange lights and evacuations during the night.\u201d<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"C\" aria-pressed=\"false\">\n <span class=\"letter\">C<\/span><span><b>Interview with a doctor<\/b><br><span class=\"muted\">\u201cAll our experiments are strictly controlled and safe.\u201d<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"D\" aria-pressed=\"false\">\n <span class=\"letter\">D<\/span><span><b>Social media post<\/b><br><span class=\"muted\">\u201cThey are hiding something. My cousin works there. #TRUTH\u201d<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"E\" aria-pressed=\"false\">\n <span class=\"letter\">E<\/span><span><b>Official university report<\/b><br><span class=\"muted\">A signed scientific report with named authors and methods.<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"F\" aria-pressed=\"false\">\n <span class=\"letter\">F<\/span><span><b>Unknown email<\/b><br><span class=\"muted\">\u201cBelieve me. I know what happened. You are being lied to.\u201d<\/span><\/span>\n <\/button>\n <\/div>\n <div class=\"card terminal\" style=\"margin-top:18px\">\n > selected_sources: <span id=\"sourceLetters\">—<\/span><br>\n <div id=\"passwordReveal\" class=\"password-reveal hidden\" aria-live=\"polite\">\n <div class=\"password-row\"><span class=\"password-label\">VALIDATED SOURCE PASSWORD<\/span><strong class=\"password-value sources\">A-C-E<\/strong><\/div>\n <div class=\"password-row\"><span class=\"password-label\">SECRET ROOM ACCESS CODE<\/span><strong class=\"password-value\">1104<\/strong><\/div>\n <button type=\"button\" class=\"use-code\" onclick=\"useRoomCode()\">USE CODE 1104<\/button>\n <\/div>\n > room_access_code: <input id=\"roomCode\" class=\"code-input\" maxlength=\"4\" inputmode=\"numeric\" placeholder=\"\u2022\u2022\u2022\u2022\">\n <div id=\"sourceFeedback\" aria-live=\"polite\"><\/div>\n <\/div>\n <div class=\"actions\"><button type=\"button\" class=\"primary\" id=\"factCheckBtn\">RUN FACT-CHECK<\/button><\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"2\">\n<div class=\"wrap\">\n <div class=\"chapter\">Chapter 2<\/div><h2>THE TESTIMONY WALL<\/h2>\n <p class=\"lead\">Put the witness statements in chronological order. Tap the cards in sequence.<\/p>\n <div class=\"wall card\">\n <div class=\"grid2\" id=\"testimonies\"><\/div>\n <\/div>\n <p><b>Your sequence:<\/b><\/p><div id=\"orderStrip\" class=\"order-strip\"><\/div>\n <div class=\"actions\"><button class=\"secondary\" onclick=\"resetOrder()\">RESET<\/button><button class=\"primary\" onclick=\"checkOrder()\">TEST SEQUENCE<\/button><\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"3\">\n<div class=\"wrap\">\n <div class=\"chapter\">Mission 3 \u2014 Find the contact number<\/div><h2>THE ARCHIVE DRAWERS<\/h2>\n <div class=\"task-panel\">\n <h3>YOUR OBJECTIVE<\/h3>\n <p>You have reconstructed the events in this order: <strong>3 \u2192 2 \u2192 1 \u2192 4<\/strong>.<\/p>\n <div class=\"timeline-code\">TIMELINE CODE: 3214<\/div>\n <div class=\"task-steps\">\n <div class=\"task-step\"><b>1<\/b><span>Look at the four drawer labels.<\/span><\/div>\n <div class=\"task-step\"><b>2<\/b><span>Open the drawer whose number is exactly <strong>3214<\/strong>.<\/span><\/div>\n <div class=\"task-step\"><b>3<\/b><span>Write down the telephone number found inside.<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"drawers\">\n <button class=\"drawer\" onclick=\"openDrawer(1)\"><b>DRAWER 1<\/b><div class=\"handle\"><\/div><span>2341<\/span><\/button>\n <button class=\"drawer\" onclick=\"openDrawer(2)\"><b>DRAWER 2<\/b><div class=\"handle\"><\/div><span>3214<\/span><\/button>\n <button class=\"drawer\" onclick=\"openDrawer(3)\"><b>DRAWER 3<\/b><div class=\"handle\"><\/div><span>1234<\/span><\/button>\n <button class=\"drawer\" onclick=\"openDrawer(4)\"><b>DRAWER 4<\/b><div class=\"handle\"><\/div><span>2413<\/span><\/button>\n <\/div>\n <div id=\"drawerResult\" class=\"card\" style=\"margin-top:20px\" aria-live=\"polite\">\n <strong>Choose the drawer labelled 3214.<\/strong>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"4\">\n<div class=\"wrap\">\n <div class=\"chapter\">Mission 3 \u2014 Secure call<\/div><h2>DIAL THE INFORMANT<\/h2>\n <div class=\"task-panel\">\n <h3>WHAT DO YOU HAVE TO DO?<\/h3>\n <div class=\"task-steps\">\n <div class=\"task-step\"><b>1<\/b><span>Read the number recovered from Drawer 2.<\/span><\/div>\n <div class=\"task-step\"><b>2<\/b><span>Use the keypad to enter all eight digits, without spaces.<\/span><\/div>\n <div class=\"task-step\"><b>3<\/b><span>Check the display, then press <strong>CALL<\/strong>.<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"grid2\" style=\"align-items:center\">\n <div class=\"phone\">\n <div class=\"phone-display\" id=\"phoneDisplay\" aria-live=\"polite\"><\/div>\n <div class=\"keypad\" id=\"keypad\"><\/div>\n <div class=\"actions\">\n <button class=\"danger\" onclick=\"phoneClear()\">CLEAR<\/button>\n <button class=\"success\" onclick=\"callNumber()\">CALL<\/button>\n <\/div>\n <\/div>\n <div class=\"card phone-guide\">\n <h3>Recovered evidence<\/h3>\n <p class=\"instruction\">The torn card in <strong>Drawer 2<\/strong> contains the informant\u2019s telephone number.<\/p>\n <div class=\"recovered-card\">\n <small>Number found in the drawer<\/small>\n <strong>20 420 666<\/strong>\n <\/div>\n <p class=\"small-note\">On the keypad, enter: <strong>2 0 4 2 0 6 6 6<\/strong>. The spaces are only for readability.<\/p>\n <button type=\"button\" class=\"autofill-btn\" onclick=\"autoFillPhone()\">AUTO-FILL 20 420 666<\/button>\n <div class=\"call-help\">Your display must show <strong>20 420 666<\/strong> before you press CALL.<\/div>\n <div id=\"callStatus\" aria-live=\"polite\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"5\">\n<div class=\"wrap\">\n <div class=\"chapter\">Search phase<\/div><h2>THE SECRET ROOM<\/h2>\n <p class=\"lead\">The informant said Emma hid the files somewhere \u201cwell protected\u201d or \u201cwell concealed.\u201d Search the room.<\/p>\n <div class=\"room\">\n <div class=\"boardwall\"><div class=\"note\" style=\"left:8%;top:10%\">GOTHAM LAB<br>CHEMICAL LOGS<\/div><div class=\"note red\" style=\"right:5%;bottom:8%\">WHERE WOULD YOU HIDE A CASE?<\/div><\/div>\n <div class=\"floor\"><\/div>\n <button class=\"floorboard\" onclick=\"liftBoard()\">LOOSE FLOORBOARD<\/button>\n <button class=\"briefcase\" id=\"briefcase\" onclick=\"openBriefcase()\"><span class=\"lock\"><\/span><\/button>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"6\">\n<div class=\"wrap\">\n <div class=\"chapter\">Chapter 3<\/div><h2>THE BRIEFCASE CODE<\/h2>\n <div class=\"grid2\" style=\"align-items:center\">\n <div class=\"card\">\n <div class=\"birth-task\">\n <strong>Your mission<\/strong>\n Find Emma Lightwood’s <b>date of birth<\/b> in the archived personnel profile shown on the right. Then enter the date as an eight-digit code.\n <\/div>\n <p class=\"lead\">The briefcase requires an eight-digit password.<\/p>\n <blockquote class=\"note\" style=\"position:relative;left:auto;top:auto;width:auto;transform:none\">\u201cThe key is the day when my age began to count.\u201d<\/blockquote>\n <label for=\"birthCode\" style=\"display:block;margin:18px 0 8px;font-weight:900;color:#dff8ff\">Enter Emma’s birth date:<\/label>\n <input id=\"birthCode\" class=\"code-input\" maxlength=\"8\" inputmode=\"numeric\" autocomplete=\"off\" aria-describedby=\"birthFormat\" placeholder=\"DDMMYYYY\">\n <p class=\"format-tip\" id=\"birthFormat\">Remove the slashes. Example: <code>04\/11\/2002 \u2192 04112002<\/code><\/p>\n <div id=\"birthFeedback\" aria-live=\"polite\"><\/div>\n <div class=\"actions\"><button class=\"primary\" onclick=\"checkBirthCode()\">UNLOCK BRIEFCASE<\/button><\/div>\n <\/div>\n <div class=\"scene-art office birth-monitor\" style=\"min-height:460px\" aria-label=\"Archived profile showing Emma Lightwood's date of birth\">\n <div class=\"monitor\"><div class=\"monitor-screen\">\n <div class=\"archive-label\">Archived desktop \u00b7 personnel file<\/div>\n <div class=\"birth-profile\">\n <strong class=\"profile-title\">EMMA LIGHTWOOD \u2014 PRESS ID<\/strong>\n <div class=\"profile-line\"><span>Department<\/span><strong>Investigative Desk<\/strong><\/div>\n <div class=\"profile-line\"><span>Status<\/span><strong>Missing<\/strong><\/div>\n <span class=\"birth-caption\">Date of birth<\/span>\n <strong class=\"birth-date\">17 \/ 05 \/ 1991<\/strong>\n <\/div>\n <\/div><\/div><div class=\"desk\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"7\">\n<div class=\"wrap\">\n <div class=\"chapter\">Chapter 4<\/div><h2>THE FINAL RIDDLE<\/h2>\n <div class=\"grid2\" style=\"align-items:center\">\n <div class=\"scene-art\" style=\"min-height:430px;background:radial-gradient(circle,#173047,#03080c 72%)\">\n <div style=\"position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:25px\">\n <div><div style=\"font-size:4rem\">\ud83d\udcbb<\/div><h2 style=\"color:white\">\u201cI disappear as soon as you say my name.\u201d<\/h2><\/div>\n <\/div>\n <\/div>\n <div class=\"card\">\n <p class=\"lead\">Type the answer in English or French.<\/p>\n <input id=\"riddleAnswer\" class=\"code-input\" style=\"letter-spacing:2px\" placeholder=\"answer\">\n <div id=\"riddleFeedback\"><\/div>\n <div class=\"actions\"><button class=\"primary\" onclick=\"checkRiddle()\">DECRYPT COMPUTER<\/button><\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"8\">\n<div class=\"wrap\">\n <div class=\"chapter\">Final file<\/div><h2>EMMA\u2019S ARTICLE<\/h2>\n <article class=\"article\">\n <h2>Inside Gotham Laboratory: The Experiments They Tried to Hide<\/h2>\n <p class=\"byline\">By Emma Lightwood \u2014 Investigative Desk<\/p>\n <p>Documents, scientific records and witness testimony indicate that restricted chemical experiments were conducted inside Gotham Laboratory. Official statements denied any abnormal event, but verified university records and internal logs contradict that account.<\/p>\n <p>The evidence must be handled responsibly. Identifying details concerning victims and vulnerable individuals have been removed while the public-interest findings remain intact.<\/p>\n <p><b>Editor\u2019s note:<\/b> Publication requires a final confirmation from the investigation team.<\/p>\n <\/article>\n <div class=\"actions\" style=\"justify-content:center\"><button class=\"success\" style=\"font-size:1.3rem;padding:20px 34px\" onclick=\"publishArticle()\">PUBLISH THE TRUTH<\/button><\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"9\">\n<div class=\"wrap\" style=\"text-align:center;align-items:center\">\n <div class=\"chapter\">Case closed<\/div><h1 id=\"endingTitle\">ARTICLE PUBLISHED<\/h1>\n <p class=\"lead\" id=\"endingText\">Emma\u2019s investigation has reached the public.<\/p>\n <div class=\"card\" style=\"width:min(760px,100%)\">\n <div class=\"grid3\">\n <div><div style=\"font-size:2rem\">\u23f1\ufe0f<\/div><b>TIME LEFT<\/b><p id=\"finalTime\"><\/p><\/div>\n <div><div style=\"font-size:2rem\">\ud83d\udd0e<\/div><b>CLUES FOUND<\/b><p id=\"finalClues\"><\/p><\/div>\n <div><div style=\"font-size:2rem\">\ud83d\udca1<\/div><b>HINTS USED<\/b><p id=\"finalHints\"><\/p><\/div>\n <\/div>\n <\/div>\n <div class=\"actions\"><button class=\"primary\" onclick=\"location.reload()\">PLAY AGAIN<\/button><button class=\"secondary\" onclick=\"print()\">PRINT RESULT<\/button><\/div>\n<\/div>\n<\/section>\n\n<div class=\"modal\" id=\"modal\"><div class=\"modalbox\"><div id=\"modalContent\"><\/div><div class=\"actions\"><button class=\"secondary\" onclick=\"closeModal()\">CLOSE<\/button><\/div><\/div><\/div>\n<div class=\"toast\" id=\"toast\"><\/div>\n<\/div>\n\n<script>\nconst S={\n scene:0,time:2700,timer:null,hints:3,started:false,selectedSources:new Set(),factCheckPassed:false,order:[],\n clues:[],phone:'',usedHints:0\n};\nconst sourceData=[\n ['A','Government press office','\u201cNothing abnormal occurred inside the research centre.\u201d'],\n ['B','Passer-by testimony','\u201cI saw strange lights and evacuations during the night.\u201d'],\n ['C','Interview with a doctor','\u201cAll our experiments are strictly controlled and safe.\u201d'],\n ['D','Social media post','\u201cThey are hiding something. My cousin works there. #TRUTH\u201d'],\n ['E','Official university report','A signed scientific report with named authors and methods.'],\n ['F','Unknown email','\u201cBelieve me. I know what happened. You are being lied to.\u201d']\n];\nconst testimonyData=[\n ['1','Driver returning home','\u201cThe firefighters arrived very quickly.\u201d'],\n ['2','Local farmer','\u201cAround midnight, a huge explosion from the laboratory drew the neighbourhood\u2019s attention.\u201d'],\n ['3','Farmer\u2019s wife','\u201cAt around 11 p.m., I saw three masked men near a white van.\u201d'],\n ['4','Firefighter','\u201cAfter entering, we discovered a large quantity of chemical products.\u201d']\n];\nfunction tone(freq=440,d=.08,type='sine'){\n try{const a=new(window.AudioContext||window.webkitAudioContext)(),o=a.createOscillator(),g=a.createGain();o.type=type;o.frequency.value=freq;o.connect(g);g.connect(a.destination);g.gain.setValueAtTime(.04,a.currentTime);g.gain.exponentialRampToValueAtTime(.001,a.currentTime+d);o.start();o.stop(a.currentTime+d)}catch(e){}\n}\nfunction showScene(n,title,text){\n document.querySelectorAll('.scene').forEach(x=>x.classList.toggle('active',+x.dataset.scene===n));\n S.scene=n;document.getElementById('progressBar').style.width=(Math.min(n,8)\/8*100)+'%';\n if(title)document.getElementById('missionTitle').textContent=title;\n if(text)document.getElementById('missionText').textContent=text;\n window.scrollTo(0,0);tone(520,.1,'triangle')\n}\nasync function startGame(){\n initGameUI();\n S.started=true;\n await enterFullscreen();\n if(!S.timer)S.timer=setInterval(tick,1000);\n showScene(1,'VERIFY THE SOURCES','Find the reliable evidence and unlock the secret room.');\n}\nfunction tick(){S.time--;document.getElementById('timer').textContent=fmt(S.time);if(S.time<=0){clearInterval(S.timer);endFailure()}}\nfunction fmt(s){s=Math.max(0,s);return String(Math.floor(s\/60)).padStart(2,'0')+':'+String(s%60).padStart(2,'0')}\nfunction toast(msg){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2200)}\nfunction addClue(c){if(!S.clues.includes(c)){S.clues.push(c);toast('CASE FILE UPDATED: '+c)}}\nfunction renderSources(){\n const box=document.getElementById('eljSources');\n if(!box)return false;\n \/\/ The cards are written directly in the HTML so WordPress cannot lose them\n \/\/ when it moves or delays the script. This fallback rebuilds them only if needed.\n if(box.querySelector('.source'))return true;\n sourceData.forEach(([l,t,b])=>{\n const d=document.createElement('button');\n d.type='button';d.className='source';d.dataset.letter=l;\n d.innerHTML=`<span class=\"letter\">${l}<\/span><span><b>${t}<\/b><br><span class=\"muted\">${b}<\/span><\/span>`;\n d.addEventListener('click',()=>toggleSource(d));box.appendChild(d)\n });\n return true;\n}\nfunction getSelectedSourceLetters(){\n return [...document.querySelectorAll('#eljSources .source')]\n .filter(x=>x.classList.contains('selected') || x.getAttribute('aria-pressed')==='true' || x.dataset.selected==='true')\n .map(x=>String(x.dataset.letter||'').trim().toUpperCase()).filter(Boolean).sort();\n}\nfunction updateSourceSelectionUI(){\n const letters=getSelectedSourceLetters(),label=document.getElementById('sourceLetters'),btn=document.getElementById('factCheckBtn');\n if(label)label.textContent=letters.length?letters.join('-'):'---';\n if(btn){const ready=letters.join('')==='ACE';btn.classList.toggle('ready',ready);btn.textContent=S.factCheckPassed?'UNLOCK SECRET ROOM':(ready?'REVEAL PASSWORD':'RUN FACT-CHECK');btn.dataset.mode=S.factCheckPassed?'unlock':'verify'}\n}\nfunction clearSourceResult(){\n const fb=document.getElementById('sourceFeedback'),code=document.getElementById('roomCode'),panel=document.getElementById('passwordReveal');\n document.querySelectorAll('#eljSources .source').forEach(x=>x.classList.remove('correct','wrong'));S.factCheckPassed=false;\n if(fb)fb.innerHTML='';if(code){code.value='';code.placeholder='\u2022\u2022\u2022\u2022'}\n if(panel){panel.classList.add('hidden');panel.style.setProperty('display','none','important');panel.dataset.revealed='false';panel.setAttribute('aria-hidden','true')}\n updateSourceSelectionUI();\n}\nfunction showPasswordPopup(){\n const modalContent=document.getElementById('modalContent');if(!modalContent)return;\n modalContent.innerHTML=`<div class=\"password-popup\"><div class=\"eyebrow\">\u2713 FACT-CHECK SUCCESSFUL<\/div><h2>PASSWORDS RECOVERED<\/h2><p>The three reliable sources reveal Emma's access information.<\/p><div class=\"code-card\"><span class=\"code-caption\">Validated source password<\/span><strong class=\"code-big sources\">A-C-E<\/strong><\/div><div class=\"code-card\"><span class=\"code-caption\">Secret room access code<\/span><strong class=\"code-big\">1104<\/strong><\/div><button type=\"button\" class=\"continue-code\" id=\"popupUseCode\">USE CODE 1104<\/button><\/div>`;\n document.getElementById('popupUseCode')?.addEventListener('click',acceptRoomCode,{once:true});openModal();\n}\nfunction revealSourcePasswords(showPopup=true){\n if(getSelectedSourceLetters().join('')!=='ACE')return false;S.selectedSources=new Set(getSelectedSourceLetters());S.factCheckPassed=true;\n document.querySelectorAll('#eljSources .source').forEach(x=>{x.classList.remove('wrong');if('ACE'.includes(x.dataset.letter))x.classList.add('correct')});\n const fb=document.getElementById('sourceFeedback'),code=document.getElementById('roomCode'),panel=document.getElementById('passwordReveal');\n if(panel){panel.classList.remove('hidden');panel.style.setProperty('display','block','important');panel.dataset.revealed='true';panel.setAttribute('aria-hidden','false')}\n if(fb)fb.innerHTML='<p class=\"ok\" style=\"margin:12px 0 0;font-weight:900\">\u2713 PASSWORD FOUND: <b>A-C-E<\/b> \u2014 ACCESS CODE: <b>1104<\/b><\/p>';\n if(code){code.placeholder='TYPE 1104';code.value=''}addClue('Verified sources: A-C-E');toast('PASSWORD FOUND \u2014 A-C-E \/ 1104');updateSourceSelectionUI();if(showPopup)showPasswordPopup();\n setTimeout(()=>panel?.scrollIntoView({behavior:'smooth',block:'center'}),80);return true;\n}\nfunction acceptRoomCode(){const code=document.getElementById('roomCode');if(code)code.value='1104';closeModal();const fb=document.getElementById('sourceFeedback');if(fb)fb.innerHTML='<p class=\"ok\" style=\"margin-top:12px;font-weight:900\">Code <b>1104<\/b> inserted. Click <b>UNLOCK SECRET ROOM<\/b>.<\/p>';updateSourceSelectionUI();document.getElementById('factCheckBtn')?.focus();tone(720,.08,'triangle')}\nfunction useRoomCode(){acceptRoomCode()}\nfunction toggleSource(el){\n const selected=el.classList.contains('selected')||el.getAttribute('aria-pressed')==='true';\n if(selected){el.classList.remove('selected');el.setAttribute('aria-pressed','false');el.dataset.selected='false'}\n else{if(getSelectedSourceLetters().length>=3)return toast('Select exactly three sources.');el.classList.add('selected');el.setAttribute('aria-pressed','true');el.dataset.selected='true'}\n clearSourceResult();S.selectedSources=new Set(getSelectedSourceLetters());updateSourceSelectionUI();tone(650,.05)\n}\nfunction checkSources(){\n const letters=getSelectedSourceLetters(),picked=letters.join(''),codeEl=document.getElementById('roomCode'),code=(codeEl?.value||'').replace(\/\\D\/g,''),fb=document.getElementById('sourceFeedback'),panel=document.getElementById('passwordReveal');\n S.selectedSources=new Set(letters);document.querySelectorAll('#eljSources .source').forEach(x=>x.classList.remove('correct','wrong'));updateSourceSelectionUI();\n if(letters.length!==3){if(fb)fb.innerHTML='<p class=\"error\">Select exactly three sources before running the fact-check.<\/p>';return tone(110,.25,'sawtooth')}\n if(picked!=='ACE'){S.factCheckPassed=false;document.querySelectorAll('#eljSources .source.selected').forEach(x=>x.classList.add('wrong'));if(panel){panel.classList.add('hidden');panel.style.setProperty('display','none','important');panel.dataset.revealed='false'}if(fb)fb.innerHTML='<p class=\"error\">ERROR \u2014 at least one selected source is not reliable enough. Try again.<\/p>';updateSourceSelectionUI();return tone(110,.25,'sawtooth')}\n if(!S.factCheckPassed||panel?.dataset.revealed!=='true'){revealSourcePasswords(true);return}\n if(code!=='1104'){if(panel){panel.classList.remove('hidden');panel.style.setProperty('display','block','important')}if(fb)fb.innerHTML='<p class=\"error\" style=\"margin-top:12px\">Enter or use the displayed access code <b>1104<\/b>, then click <b>UNLOCK SECRET ROOM<\/b>.<\/p>';setTimeout(()=>panel?.scrollIntoView({behavior:'smooth',block:'center'}),60);return tone(150,.18,'square')}\n if(fb)fb.innerHTML='<p class=\"ok\" style=\"font-weight:900\">ACCESS GRANTED \u2014 secret archive unlocked.<\/p>';setTimeout(()=>showScene(2,'ORDER THE TESTIMONIES','Reconstruct the night of the incident.'),500)\n}\nfunction renderTestimonies(){\n const box=document.getElementById('testimonies');\n if(!box)return false;\n if(box.querySelector('.testimony'))return true;\n testimonyData.forEach(([n,w,q],i)=>{const d=document.createElement('button');d.type='button';d.className='testimony';d.style.transform=`rotate(${[-2,2,1,-1][i]}deg)`;d.dataset.n=n;d.innerHTML=`<b>TESTIMONY ${n}<\/b><p>${w}<\/p><p>${q}<\/p>`;d.onclick=()=>chooseTestimony(d);box.appendChild(d)});\n return true;\n}\nfunction chooseTestimony(d){if(S.order.includes(d.dataset.n))return;S.order.push(d.dataset.n);d.classList.add('active');renderOrder();tone(700,.06)}\nfunction renderOrder(){document.getElementById('orderStrip').innerHTML=S.order.map(n=>`<span class=\"order-token\">${n}<\/span>`).join('')}\nfunction resetOrder(){S.order=[];document.querySelectorAll('.testimony').forEach(x=>x.classList.remove('active'));renderOrder()}\nfunction checkOrder(){if(S.order.join('')==='3214'){addClue('Timeline code: 3214');toast('Sequence confirmed: 3-2-1-4. Find the drawer labelled 3214.');setTimeout(()=>showScene(3,'FIND THE CORRECT DRAWER','Match the timeline code 3214 with a drawer label.'),900)}else{toast('The sequence is inconsistent. Start with the event at 11 p.m., then midnight.');tone(120,.2,'square')}}\nfunction openDrawer(n){\n const r=document.getElementById('drawerResult');\n if(n===2){\n r.className='card drawer-result-success';\n r.innerHTML='<h3 class=\"ok\">\u2713 DRAWER 2 OPEN \u2014 CORRECT<\/h3><p>You matched the timeline code <b>3214<\/b>.<\/p><p>Inside the drawer, you find this telephone number:<\/p><div class=\"recovered-number\">20 420 666<\/div><p><b>Keep this number:<\/b> you must dial it in the next step.<\/p><button type=\"button\" class=\"success continue-call\" onclick=\"goToPhoneMission()\">CONTINUE TO THE SECURE PHONE \u2192<\/button>';\n addClue('Informant number: 20 420 666');\n r.scrollIntoView({behavior:'smooth',block:'center'});\n tone(760,.16,'triangle');\n }else{\n r.className='card';\n r.innerHTML='<h3 class=\"error\">EMPTY DRAWER<\/h3><p>This label does not match the timeline code <b>3214<\/b>. Try another drawer.<\/p>';\n tone(100,.18,'square');\n }\n}\nfunction goToPhoneMission(){\n phoneClear();\n const st=document.getElementById('callStatus');\n if(st)st.innerHTML='';\n showScene(4,'CALL THE INFORMANT','Enter the number from Drawer 2, then press CALL.');\n}\nfunction renderKeypad(){const k=document.getElementById('keypad');if(!k)return false;if(k.querySelector('.key'))return true;['1','2','3','4','5','6','7','8','9','*','0','#'].forEach(n=>{const b=document.createElement('button');b.type='button';b.className='key';b.textContent=n;b.onclick=()=>phoneKey(n);k.appendChild(b)});return true}\nfunction formatPhoneNumber(value){\n const digits=String(value||'').replace(\/\\D\/g,'').slice(0,8);\n if(digits.length<=2)return digits;\n if(digits.length<=5)return digits.slice(0,2)+' '+digits.slice(2);\n return digits.slice(0,2)+' '+digits.slice(2,5)+' '+digits.slice(5);\n}\nfunction renderPhoneNumber(){\n const display=document.getElementById('phoneDisplay');\n if(display)display.textContent=formatPhoneNumber(S.phone);\n}\nfunction phoneKey(n){\n if(!\/\\d\/.test(n))return toast('Use digits only for this telephone number.');\n if(S.phone.length<8){S.phone+=n;renderPhoneNumber();tone(380+Number(n)*25,.06)}\n}\nfunction phoneClear(){S.phone='';renderPhoneNumber()}\nfunction autoFillPhone(){\n S.phone='20420666';\n renderPhoneNumber();\n const st=document.getElementById('callStatus');\n if(st)st.innerHTML='<p class=\"ok\">\u2713 Number ready. Now press <b>CALL<\/b>.<\/p>';\n tone(700,.1,'triangle');\n}\nfunction callNumber(){\n const st=document.getElementById('callStatus');\n const entered=S.phone.replace(\/\\D\/g,'');\n if(entered==='20420666'){\n st.innerHTML='<p class=\"ok\"><b>CONNECTED.<\/b> The informant is answering\u2026<\/p>';\n tone(780,.3);\n setTimeout(showCall,700);\n }else{\n const shown=formatPhoneNumber(entered)||'no number';\n st.innerHTML='<p class=\"error\"><b>NUMBER UNREACHABLE.<\/b><br>You entered: '+shown+'.<br>Check the recovered card and enter all eight digits: <b>2 0 4 2 0 6 6 6<\/b>.<\/p>';\n tone(90,.35,'sawtooth');\n }\n}\nfunction showCall(){\n addClue('Gotham Laboratory connection');\n document.getElementById('modalContent').innerHTML=`<h2>THE INFORMANT<\/h2><p class=\"lead\">\u201cEmma was investigating Gotham Laboratory. She found records of chemical experiments involving kidnapped infants and forced mutations. I worked there. I gave her the process logs and the list of chemicals.\u201d<\/p><p class=\"lead\">\u201cShe said she would hide them in a safe place \u2014 somewhere protected or concealed. I have already said too much.\u201d<\/p><p class=\"error\"><b>CALL TERMINATED.<\/b><\/p><button class=\"primary\" onclick=\"closeModal();showScene(5,'SEARCH THE SECRET ROOM','Find Emma\u2019s concealed briefcase.')\">SEARCH THE ROOM<\/button>`;\n openModal()\n}\nfunction liftBoard(){document.getElementById('briefcase').classList.add('visible');addClue('Hidden briefcase');toast('A metal briefcase was concealed beneath the floor.')}\nfunction openBriefcase(){showScene(6,'DECODE THE BRIEFCASE','Find the eight-digit date hidden in Emma\u2019s office.')}\nfunction checkBirthCode(){\n const v=document.getElementById('birthCode').value.replace(\/\\D\/g,''),f=document.getElementById('birthFeedback');\n if(v==='17051991'){f.innerHTML='<p class=\"ok\">BRIEFCASE UNLOCKED.<\/p>';addClue('Emma\u2019s birth date: 17\/05\/1991');setTimeout(()=>showScene(7,'SOLVE THE FINAL RIDDLE','Decrypt Emma\u2019s last computer.'),800)}\n else{f.innerHTML='<p class=\"error\"><b>INCORRECT DATE.<\/b> Read the highlighted date of birth on the archived profile, then type it without slashes in DDMMYYYY format.<\/p>';tone(100,.2,'square')}\n}\nfunction checkRiddle(){\n const a=document.getElementById('riddleAnswer').value.trim().toLowerCase(),f=document.getElementById('riddleFeedback');\n if(['silence','the silence','le silence'].includes(a)){f.innerHTML='<p class=\"ok\">DECRYPTION COMPLETE.<\/p>';addClue('Final password: SILENCE');setTimeout(()=>showScene(8,'MAKE THE FINAL DECISION','Read and publish Emma\u2019s completed investigation.'),800)}\n else{f.innerHTML='<p class=\"error\">The answer disappears when spoken.<\/p>';tone(100,.2,'square')}\n}\nfunction publishArticle(){clearInterval(S.timer);tone(880,.5,'triangle');showScene(9);document.getElementById('finalTime').textContent=fmt(S.time);document.getElementById('finalClues').textContent=S.clues.length;document.getElementById('finalHints').textContent=S.usedHints}\nfunction endFailure(){showScene(9);document.getElementById('endingTitle').textContent='THE DEADLINE EXPIRED';document.getElementById('endingText').textContent='Emma\u2019s article remained hidden. Restart the case and follow the evidence more efficiently.';document.getElementById('finalTime').textContent='00:00';document.getElementById('finalClues').textContent=S.clues.length;document.getElementById('finalHints').textContent=S.usedHints}\nfunction hint(){\n if(!S.started)return toast('Start the investigation first.');\n if(S.hints<=0)return toast('No hints remaining.');\n S.hints--;S.usedHints++;document.getElementById('hints').textContent=S.hints;\n const h={1:'Choose sources with identifiable responsibility, expertise or documented methods. The room code is 1104.',\n 2:'The masked men were seen at 23:00, before the midnight explosion.',\n 3:'The sequence 3214 points directly to Drawer 2.',\n 4:'Dial 20 420 666 without spaces.',\n 5:'Inspect the loose floorboard.',\n 6:'Look at the yellow DATE OF BIRTH card on the archived profile: 17\/05\/1991. Type it without slashes: 17051991.',\n 7:'What vanishes when its name is spoken?',\n 8:'The investigation is complete. Publish the article.'};\n toast(h[S.scene]||'Inspect every visible detail.')\n}\nfunction showInventory(){\n const items=['Verified sources','Timeline reconstructed','Informant contacted','Hidden briefcase','Birth date decoded','Final computer decrypted'];\n document.getElementById('modalContent').innerHTML='<h2>CASE FILE<\/h2><div class=\"inventory\">'+items.map((x,i)=>`<div class=\"item ${i<S.clues.length?'':'locked'}\">${i<S.clues.length?'\u2713':'\ud83d\udd12'} ${x}<\/div>`).join('')+'<\/div><h3>Recovered clues<\/h3><ul>'+S.clues.map(x=>'<li>'+x+'<\/li>').join('')+'<\/ul>';\n openModal()\n}\nfunction openModal(){document.getElementById('modal').classList.add('open')}function closeModal(){document.getElementById('modal').classList.remove('open')}\n\nfunction fullscreenElement(){return document.fullscreenElement||document.webkitFullscreenElement||null}\nasync function enterFullscreen(){const game=document.getElementById('game');if(!game)return;try{if(fullscreenElement()===game)return;if(game.requestFullscreen)await game.requestFullscreen({navigationUI:'hide'});else if(game.webkitRequestFullscreen)game.webkitRequestFullscreen();else throw new Error('Fullscreen unavailable')}catch(e){game.classList.add('immersive');document.body.classList.add('game-locked')}syncFullscreenUI();game.scrollTop=0}\nasync function exitFullscreen(){const game=document.getElementById('game');try{if(document.fullscreenElement&&document.exitFullscreen)await document.exitFullscreen();else if(document.webkitFullscreenElement&&document.webkitExitFullscreen)document.webkitExitFullscreen()}catch(e){}game?.classList.remove('immersive');document.body.classList.remove('game-locked');syncFullscreenUI()}\nasync function toggleFullscreen(){const game=document.getElementById('game'),active=fullscreenElement()===game||game?.classList.contains('immersive');if(active)await exitFullscreen();else await enterFullscreen()}\nfunction syncFullscreenUI(){const game=document.getElementById('game'),active=fullscreenElement()===game||!!game?.classList.contains('immersive');document.body.classList.toggle('is-fullscreen',active);const btn=document.getElementById('fullscreenBtn');if(btn)btn.textContent=active?'\u26f6 EXIT FULL SCREEN':'\u26f6 FULL SCREEN'}\ndocument.addEventListener('fullscreenchange',syncFullscreenUI);document.addEventListener('webkitfullscreenchange',syncFullscreenUI);document.addEventListener('keydown',e=>{if(e.key==='Escape'&&document.getElementById('game')?.classList.contains('immersive'))exitFullscreen()});\nfunction initGameUI(attempt=0){\n const game=document.getElementById('game');if(!game){if(attempt<30)setTimeout(()=>initGameUI(attempt+1),100);return}\n renderSources();renderTestimonies();renderKeypad();\n document.querySelectorAll('#eljSources .source').forEach(btn=>{btn.removeAttribute('onclick');if(btn.dataset.bound!=='true'){btn.dataset.bound='true';btn.setAttribute('aria-pressed',btn.classList.contains('selected')?'true':'false');btn.addEventListener('click',()=>toggleSource(btn))}});\n const fact=document.getElementById('factCheckBtn');if(fact&&fact.dataset.bound!=='true'){fact.dataset.bound='true';fact.removeAttribute('onclick');fact.addEventListener('click',checkSources)}\n const room=document.getElementById('roomCode');if(room&&room.dataset.bound!=='true'){room.dataset.bound='true';room.addEventListener('keydown',e=>{if(e.key==='Enter')checkSources()})}\n updateSourceSelectionUI();syncFullscreenUI();\n}\nif(document.readyState==='loading'){\n document.addEventListener('DOMContentLoaded',()=>initGameUI(),{once:true});\n}else{\n setTimeout(()=>initGameUI(),0);\n}\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,viewport-fit=cover\">\n<title>Emma Lightwood: The Missing Article<\/title>\n<style>\n:root{\n --bg:#05090d;--panel:#0d1822;--panel2:#132432;--ink:#ecf5f7;--muted:#9db0ba;\n --cyan:#55d7f2;--green:#57d37b;--red:#ff5d64;--amber:#f4bc54;--paper:#dfd2b8;\n --shadow:0 20px 60px #000b;\n}\n*{box-sizing:border-box}\nhtml,body{margin:0;width:100%;height:100%;overflow:hidden;background:#020508;color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif}\nbutton,input{font:inherit}\nbutton{cursor:pointer}\n#game{position:fixed;inset:0;background:\n radial-gradient(circle at 20% 15%,#173047 0,transparent 28%),\n radial-gradient(circle at 85% 80%,#2d1717 0,transparent 28%),\n linear-gradient(145deg,#050a0f,#020407 65%);overflow:hidden}\n.scanlines{pointer-events:none;position:absolute;inset:0;z-index:100;background:repeating-linear-gradient(0deg,transparent 0 3px,#ffffff08 4px);mix-blend-mode:screen}\n.vignette{pointer-events:none;position:absolute;inset:0;z-index:99;box-shadow:inset 0 0 150px #000}\n.hud{position:absolute;z-index:50;left:0;right:0;top:0;height:74px;display:flex;align-items:center;gap:14px;padding:10px 18px;background:linear-gradient(#07111aee,#07111aaa);border-bottom:1px solid #315066;backdrop-filter:blur(8px)}\n.logo{font-family:Georgia,serif;font-weight:900;letter-spacing:3px;white-space:nowrap}.logo b{color:var(--red)}\n.mission{font-size:.78rem;color:var(--muted);min-width:160px}.mission strong{display:block;color:var(--cyan);font-size:.95rem}\n.progress{height:8px;flex:1;border:1px solid #385063;border-radius:20px;overflow:hidden;background:#0a1117}\n.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fa2c5,#5ee1ff);transition:.5s}\n.timer{font-family:ui-monospace,monospace;color:#ff746f;font-weight:900;font-size:1.25rem}\n.iconbtn{border:1px solid #416178;background:#102231;color:white;border-radius:8px;padding:9px 11px}\n.scene{position:absolute;inset:74px 0 0;display:none;overflow:auto;padding:clamp(14px,2.5vw,34px)}\n.scene.active{display:block;animation:sceneIn .45s ease}\n@keyframes sceneIn{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}\n.wrap{max-width:1280px;margin:auto;min-height:100%;display:flex;flex-direction:column;justify-content:center}\n.chapter{display:inline-flex;align-items:center;gap:10px;color:var(--cyan);font-weight:900;letter-spacing:2px;text-transform:uppercase}\n.chapter:before{content:\"\";width:38px;height:2px;background:var(--cyan)}\nh1{font-family:Georgia,serif;font-size:clamp(2.4rem,7vw,6.5rem);line-height:.92;margin:.2em 0;letter-spacing:2px;text-shadow:0 8px 25px #000}\nh2{font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,3.4rem);margin:.25em 0;color:#dff8ff}\np{line-height:1.55}.lead{font-size:clamp(1.05rem,2vw,1.35rem);max-width:760px}\n.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}\n.card{background:linear-gradient(145deg,#122432ee,#071019ee);border:1px solid #355164;border-radius:14px;padding:18px;box-shadow:var(--shadow)}\n.glass{background:#0a151dcc;backdrop-filter:blur(10px)}\n.primary,.secondary,.danger,.success{border-radius:9px;padding:13px 18px;font-weight:900;letter-spacing:.8px;color:white;border:1px solid #678092;box-shadow:0 8px 20px #0007}\n.primary{background:linear-gradient(#174862,#102d40)}.secondary{background:#17242d}.danger{background:linear-gradient(#9c302e,#671817)}.success{background:linear-gradient(#248c43,#155c2b)}\n.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}\n.scene-art{position:relative;min-height:520px;border:1px solid #415a6d;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:#071019}\n.office{background:\n linear-gradient(#09131cab,#02070ccc),\n linear-gradient(90deg,#18242c 0 3%,transparent 3% 97%,#18242c 97%),\n repeating-linear-gradient(90deg,#1b2a34 0 130px,#0b151d 131px 138px)}\n.office:before{content:\"\";position:absolute;left:6%;right:6%;top:7%;height:44%;background:repeating-linear-gradient(90deg,#293942 0 110px,#1a272e 112px 118px);clip-path:polygon(0 0,100% 0,98% 95%,2% 100%);opacity:.7}\n.desk{position:absolute;left:8%;right:8%;bottom:5%;height:31%;background:linear-gradient(#5b3d29,#2e1a11);clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);box-shadow:0 -8px 20px #0008}\n.monitor{position:absolute;left:23%;top:19%;width:53%;height:50%;background:#061017;border:10px solid #1b2227;border-radius:10px;box-shadow:0 0 40px #5de0ff2b}\n.monitor-screen{position:absolute;inset:15px;padding:22px;background:radial-gradient(circle at 50% 45%,#16324b,#050b10 70%);overflow:hidden}\n.monitor-screen:after{content:\"EMMA LIGHTWOOD \u00b7 17\/05\/1991\";position:absolute;right:10px;bottom:7px;color:#6e8b9c;font:11px monospace}\n.keyboard{position:absolute;left:28%;bottom:12%;width:44%;height:8%;background:repeating-linear-gradient(90deg,#1b2227 0 14px,#3a454d 15px 16px);transform:perspective(300px) rotateX(55deg)}\n.note{position:absolute;background:#eadfbf;color:#231d15;padding:14px;box-shadow:8px 10px 15px #0008;transform:rotate(-3deg);font-family:\"Courier New\",monospace}\n.note.pin{top:10%;left:7%;width:170px}.note.red{background:#e9c9bf;transform:rotate(4deg)}\n.source-grid{display:grid!important;visibility:visible!important;opacity:1!important;min-height:1px}.source{position:relative;display:flex!important;visibility:visible!important;opacity:1!important;width:100%;min-height:112px;gap:14px;align-items:flex-start;padding:15px;border:1px solid #435b6c;border-radius:10px;background:#0c1923;color:var(--ink);text-align:left;transition:.2s;-webkit-appearance:none;appearance:none}\n.source:hover{transform:translateY(-2px);border-color:#7ab9d1}\n.source.selected{outline:3px solid var(--cyan)}.source.correct{outline:3px solid var(--green)}.source.wrong{outline:3px solid var(--red)}\n.letter{display:grid;place-items:center;min-width:38px;height:38px;border-radius:50%;background:#18384d;color:#bdefff;font-weight:900}\n.terminal{background:#02090d;border:1px solid #2f5c6b;border-radius:10px;padding:14px;font-family:ui-monospace,monospace;color:#83e6a2;box-shadow:inset 0 0 30px #000}\n.code-input{background:#01070a;border:1px solid #3e6775;color:#7ff5a3;padding:13px;font-size:1.2rem;border-radius:7px;letter-spacing:5px;width:min(280px,100%);text-align:center}\n.wall{min-height:500px;background:\n linear-gradient(#111820cc,#111820cc),\n repeating-linear-gradient(90deg,#5c3925 0 12px,#422719 13px 15px);position:relative}\n.testimony{background:var(--paper);color:#221c16;padding:16px;border-radius:2px;box-shadow:8px 10px 15px #0008;min-height:145px;position:relative;transition:.2s}\n.testimony:before{content:\"\u25cf\";position:absolute;top:-12px;left:50%;color:#bb2525;font-size:24px}\n.testimony.active{outline:4px solid var(--amber);transform:rotate(0)!important}\n.order-strip{display:flex;gap:10px;flex-wrap:wrap;min-height:65px;padding:10px;border:2px dashed #63717a;border-radius:9px}\n.order-token{padding:12px 16px;border-radius:8px;background:#172b39;border:1px solid #5c7180;font-weight:900}\n.drawers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}\n.drawer{min-height:125px;background:linear-gradient(#514234,#27201b);border:6px solid #211a16;border-radius:5px;color:#e5d8b9;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 25px #0008}\n.drawer:hover{filter:brightness(1.2)}.handle{width:46px;height:10px;border:2px solid #a88955;border-radius:10px;margin:9px}\n.phone{width:min(340px,100%);margin:auto;background:linear-gradient(#1c2730,#080d11);padding:22px;border:1px solid #52616b;border-radius:28px;box-shadow:var(--shadow)}\n.phone-display{background:#a6c7a0;color:#173018;padding:14px;border-radius:7px;font:1.4rem ui-monospace,monospace;text-align:right;min-height:55px}\n.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.key{padding:14px;border-radius:50%;background:#273742;color:white;border:1px solid #5a6a74;font-weight:900}\n.room{position:relative;min-height:550px;background:\n linear-gradient(#061019aa,#020609dd),\n linear-gradient(25deg,#132838,#070b0e);border:1px solid #324653;border-radius:14px;overflow:hidden}\n.floor{position:absolute;left:0;right:0;bottom:0;height:42%;background:repeating-linear-gradient(90deg,#5b4633 0 70px,#38291e 72px 75px);transform-origin:bottom;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%)}\n.boardwall{position:absolute;left:6%;top:8%;width:42%;height:45%;background:#4f3724;border:9px solid #2c1e15;box-shadow:0 10px 20px #0008}\n.floorboard{position:absolute;left:55%;bottom:9%;width:170px;height:62px;background:#6a5038;border:2px solid #8e6b48;transform:rotate(-4deg);box-shadow:0 10px 15px #0008}\n.floorboard:hover{filter:brightness(1.4)}\n.briefcase{position:absolute;right:8%;bottom:17%;width:190px;height:125px;background:linear-gradient(#30363a,#11171b);border:5px solid #090c0e;border-radius:9px;box-shadow:0 15px 25px #000;display:none}\n.briefcase.visible{display:block;animation:pop .4s}@keyframes pop{from{transform:scale(.7);opacity:0}}\n.lock{position:absolute;left:42%;top:43%;width:35px;height:25px;background:#c79a3c;border-radius:4px}\n.article{background:#f0eadc;color:#171717;padding:clamp(18px,4vw,45px);max-width:850px;margin:auto;border-radius:4px;box-shadow:var(--shadow);font-family:Georgia,serif}\n.article h2{color:#111;font-family:Georgia,serif}.article .byline{color:#666;border-bottom:1px solid #999;padding-bottom:15px}\n.inventory{display:flex;gap:9px;flex-wrap:wrap}.item{padding:8px 11px;border:1px solid #6e765b;border-radius:7px;background:#17232b;font-size:.85rem}.item.locked{opacity:.25;filter:grayscale(1)}\n.modal{position:fixed;z-index:200;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:#000d}.modal.open{display:flex}\n.modalbox{width:min(620px,100%);max-height:90vh;overflow:auto;background:linear-gradient(#132431,#081119);border:1px solid #5f7481;border-radius:14px;padding:22px;box-shadow:var(--shadow)}\n.toast{position:fixed;z-index:300;right:18px;bottom:18px;max-width:420px;padding:14px 18px;border-radius:10px;background:#132431;border:1px solid #6a7e8a;box-shadow:var(--shadow);display:none}.toast.show{display:block;animation:pop .2s}\n.error{color:var(--red)}.ok{color:var(--green)}.muted{color:var(--muted)}.hidden{display:none!important}\n:fullscreen, :-webkit-full-screen {\n width:100% !important;\n height:100% !important;\n margin:0 !important;\n padding:0 !important;\n background:#020508 !important;\n}\nhtml:fullscreen body, html:-webkit-full-screen body {\n width:100%;height:100%;margin:0;overflow:hidden;\n}\nbody.is-fullscreen #game{inset:0}\nbody.is-fullscreen .hud{padding-top:max(10px,env(safe-area-inset-top))}\n@media(max-width:820px){\n .grid2,.grid3{grid-template-columns:1fr}.hud{height:66px;padding:8px}.scene{inset:66px 0 0}.mission{display:none}.logo{font-size:.75rem}.timer{font-size:1rem}\n .scene-art{min-height:430px}.monitor{left:10%;width:80%}.drawers{grid-template-columns:repeat(2,1fr)}\n}\n<\/style>\n<\/head>\n<body>\n<div id=\"game\">\n<div class=\"scanlines\"><\/div><div class=\"vignette\"><\/div>\n<header class=\"hud\">\n <div class=\"logo\">LIGHTWOOD <b>FILES<\/b><\/div>\n <div class=\"mission\"><strong id=\"missionTitle\">CASE NOT STARTED<\/strong><span id=\"missionText\">Find Emma. Finish the investigation.<\/span><\/div>\n <div class=\"progress\"><i id=\"progressBar\"><\/i><\/div>\n <div class=\"timer\" id=\"timer\">45:00<\/div>\n <button class=\"iconbtn\" id=\"fullscreenBtn\" onclick=\"toggleFullscreen()\">\u26f6 FULL SCREEN<\/button>\n <button class=\"iconbtn\" onclick=\"showInventory()\">CASE FILE<\/button>\n <button class=\"iconbtn\" onclick=\"hint()\">HINT <span id=\"hints\">3<\/span><\/button>\n<\/header>\n\n<section class=\"scene active\" data-scene=\"0\">\n<div class=\"wrap\">\n <div class=\"grid2\" style=\"align-items:center\">\n <div>\n <div class=\"chapter\">Prologue<\/div>\n <h1>THE MISSING ARTICLE<\/h1>\n <p class=\"lead\">Investigative journalist <b>Emma Lightwood<\/b> vanished the night before publishing a major story. Her office was found unlocked. Her computer was still running.<\/p>\n <p class=\"lead\" style=\"color:#ff7f79\">\u201cIf you want the truth to be published, finish my investigation.\u201d<\/p>\n <div class=\"actions\"><button class=\"primary\" onclick=\"startGame()\">ENTER THE NEWSROOM<\/button><\/div>\n <\/div>\n <div class=\"scene-art office\">\n <div class=\"note pin\">DO NOT TRUST APPEARANCES.<\/div>\n <div class=\"monitor\"><div class=\"monitor-screen\"><h3 style=\"color:#6ee4ff\">EMMA_LIGHTWOOD \/\/ OFFLINE<\/h3><p style=\"font-family:monospace\">Last session interrupted.<br>4 encrypted stages detected.<br><br><span style=\"color:#ff6868\">FINISH THE INVESTIGATION.<\/span><\/p><\/div><\/div>\n <div class=\"desk\"><\/div><div class=\"keyboard\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"1\">\n<div class=\"wrap\">\n <div class=\"chapter\">Chapter 1<\/div><h2>DO NOT PUBLISH WITHOUT VERIFICATION<\/h2>\n <p class=\"lead\">Emma left six sources. Select the <b>three sources that are sufficiently reliable to verify further<\/b>.<\/p>\n <div class=\"grid3 source-grid\" id=\"eljSources\" aria-label=\"Sources to verify\">\n <button type=\"button\" class=\"source\" data-letter=\"A\" onclick=\"toggleSource(this)\">\n <span class=\"letter\">A<\/span><span><b>Government press office<\/b><br><span class=\"muted\">\u201cNothing abnormal occurred inside the research centre.\u201d<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"B\" onclick=\"toggleSource(this)\">\n <span class=\"letter\">B<\/span><span><b>Passer-by testimony<\/b><br><span class=\"muted\">\u201cI saw strange lights and evacuations during the night.\u201d<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"C\" onclick=\"toggleSource(this)\">\n <span class=\"letter\">C<\/span><span><b>Interview with a doctor<\/b><br><span class=\"muted\">\u201cAll our experiments are strictly controlled and safe.\u201d<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"D\" onclick=\"toggleSource(this)\">\n <span class=\"letter\">D<\/span><span><b>Social media post<\/b><br><span class=\"muted\">\u201cThey are hiding something. My cousin works there. #TRUTH\u201d<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"E\" onclick=\"toggleSource(this)\">\n <span class=\"letter\">E<\/span><span><b>Official university report<\/b><br><span class=\"muted\">A signed scientific report with named authors and methods.<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"F\" onclick=\"toggleSource(this)\">\n <span class=\"letter\">F<\/span><span><b>Unknown email<\/b><br><span class=\"muted\">\u201cBelieve me. I know what happened. You are being lied to.\u201d<\/span><\/span>\n <\/button>\n <\/div>\n <div class=\"card terminal\" style=\"margin-top:18px\">\n > selected_sources: <span id=\"sourceLetters\">—<\/span><br>\n > room_access_code: <input id=\"roomCode\" class=\"code-input\" maxlength=\"4\" inputmode=\"numeric\" placeholder=\"\u2022\u2022\u2022\u2022\">\n <div id=\"sourceFeedback\"><\/div>\n <\/div>\n <div class=\"actions\"><button class=\"primary\" onclick=\"checkSources()\">RUN FACT-CHECK<\/button><\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"2\">\n<div class=\"wrap\">\n <div class=\"chapter\">Chapter 2<\/div><h2>THE TESTIMONY WALL<\/h2>\n <p class=\"lead\">Put the witness statements in chronological order. Tap the cards in sequence.<\/p>\n <div class=\"wall card\">\n <div class=\"grid2\" id=\"testimonies\"><\/div>\n <\/div>\n <p><b>Your sequence:<\/b><\/p><div id=\"orderStrip\" class=\"order-strip\"><\/div>\n <div class=\"actions\"><button class=\"secondary\" onclick=\"resetOrder()\">RESET<\/button><button class=\"primary\" onclick=\"checkOrder()\">TEST SEQUENCE<\/button><\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"3\">\n<div class=\"wrap\">\n <div class=\"chapter\">Chapter 2 \u2014 continued<\/div><h2>THE ARCHIVE DRAWERS<\/h2>\n <p class=\"lead\">The correct testimony sequence identifies the drawer containing Emma\u2019s next lead.<\/p>\n <div class=\"drawers\">\n <button class=\"drawer\" onclick=\"openDrawer(1)\"><b>DRAWER 1<\/b><div class=\"handle\"><\/div><span>2341<\/span><\/button>\n <button class=\"drawer\" onclick=\"openDrawer(2)\"><b>DRAWER 2<\/b><div class=\"handle\"><\/div><span>3214<\/span><\/button>\n <button class=\"drawer\" onclick=\"openDrawer(3)\"><b>DRAWER 3<\/b><div class=\"handle\"><\/div><span>1234<\/span><\/button>\n <button class=\"drawer\" onclick=\"openDrawer(4)\"><b>DRAWER 4<\/b><div class=\"handle\"><\/div><span>2413<\/span><\/button>\n <\/div>\n <div id=\"drawerResult\" class=\"card\" style=\"margin-top:20px\">Choose a drawer.<\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"4\">\n<div class=\"wrap\">\n <div class=\"chapter\">Secure call<\/div><h2>CALL THE INFORMANT<\/h2>\n <div class=\"grid2\" style=\"align-items:center\">\n <div class=\"phone\">\n <div class=\"phone-display\" id=\"phoneDisplay\"><\/div>\n <div class=\"keypad\" id=\"keypad\"><\/div>\n <div class=\"actions\"><button class=\"danger\" onclick=\"phoneClear()\">CLEAR<\/button><button class=\"success\" onclick=\"callNumber()\">CALL<\/button><\/div>\n <\/div>\n <div class=\"card\">\n <h3>Recovered note<\/h3><p class=\"lead\">\u201cHe will answer only on the number hidden in the correct drawer.\u201d<\/p>\n <p class=\"muted\">Enter the number without spaces.<\/p>\n <div id=\"callStatus\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"5\">\n<div class=\"wrap\">\n <div class=\"chapter\">Search phase<\/div><h2>THE SECRET ROOM<\/h2>\n <p class=\"lead\">The informant said Emma hid the files somewhere \u201cwell protected\u201d or \u201cwell concealed.\u201d Search the room.<\/p>\n <div class=\"room\">\n <div class=\"boardwall\"><div class=\"note\" style=\"left:8%;top:10%\">GOTHAM LAB<br>CHEMICAL LOGS<\/div><div class=\"note red\" style=\"right:5%;bottom:8%\">WHERE WOULD YOU HIDE A CASE?<\/div><\/div>\n <div class=\"floor\"><\/div>\n <button class=\"floorboard\" onclick=\"liftBoard()\">LOOSE FLOORBOARD<\/button>\n <button class=\"briefcase\" id=\"briefcase\" onclick=\"openBriefcase()\"><span class=\"lock\"><\/span><\/button>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"6\">\n<div class=\"wrap\">\n <div class=\"chapter\">Chapter 3<\/div><h2>THE BRIEFCASE CODE<\/h2>\n <div class=\"grid2\" style=\"align-items:center\">\n <div class=\"card\">\n <p class=\"lead\">The briefcase requires an eight-digit password.<\/p>\n <blockquote class=\"note\" style=\"position:relative;left:auto;top:auto;width:auto;transform:none\">\u201cThe key is the day when my age began to count.\u201d<\/blockquote>\n <input id=\"birthCode\" class=\"code-input\" maxlength=\"8\" inputmode=\"numeric\" placeholder=\"DDMMYYYY\">\n <div id=\"birthFeedback\"><\/div>\n <div class=\"actions\"><button class=\"primary\" onclick=\"checkBirthCode()\">UNLOCK BRIEFCASE<\/button><\/div>\n <\/div>\n <div class=\"scene-art office\" style=\"min-height:420px\">\n <div class=\"monitor\"><div class=\"monitor-screen\"><h3>ARCHIVED DESKTOP<\/h3><p>Maybe the answer was visible from the beginning…<\/p><\/div><\/div><div class=\"desk\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"7\">\n<div class=\"wrap\">\n <div class=\"chapter\">Chapter 4<\/div><h2>THE FINAL RIDDLE<\/h2>\n <div class=\"grid2\" style=\"align-items:center\">\n <div class=\"scene-art\" style=\"min-height:430px;background:radial-gradient(circle,#173047,#03080c 72%)\">\n <div style=\"position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:25px\">\n <div><div style=\"font-size:4rem\">\ud83d\udcbb<\/div><h2 style=\"color:white\">\u201cI disappear as soon as you say my name.\u201d<\/h2><\/div>\n <\/div>\n <\/div>\n <div class=\"card\">\n <p class=\"lead\">Type the answer in English or French.<\/p>\n <input id=\"riddleAnswer\" class=\"code-input\" style=\"letter-spacing:2px\" placeholder=\"answer\">\n <div id=\"riddleFeedback\"><\/div>\n <div class=\"actions\"><button class=\"primary\" onclick=\"checkRiddle()\">DECRYPT COMPUTER<\/button><\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"8\">\n<div class=\"wrap\">\n <div class=\"chapter\">Final file<\/div><h2>EMMA\u2019S ARTICLE<\/h2>\n <article class=\"article\">\n <h2>Inside Gotham Laboratory: The Experiments They Tried to Hide<\/h2>\n <p class=\"byline\">By Emma Lightwood \u2014 Investigative Desk<\/p>\n <p>Documents, scientific records and witness testimony indicate that restricted chemical experiments were conducted inside Gotham Laboratory. Official statements denied any abnormal event, but verified university records and internal logs contradict that account.<\/p>\n <p>The evidence must be handled responsibly. Identifying details concerning victims and vulnerable individuals have been removed while the public-interest findings remain intact.<\/p>\n <p><b>Editor\u2019s note:<\/b> Publication requires a final confirmation from the investigation team.<\/p>\n <\/article>\n <div class=\"actions\" style=\"justify-content:center\"><button class=\"success\" style=\"font-size:1.3rem;padding:20px 34px\" onclick=\"publishArticle()\">PUBLISH THE TRUTH<\/button><\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"9\">\n<div class=\"wrap\" style=\"text-align:center;align-items:center\">\n <div class=\"chapter\">Case closed<\/div><h1 id=\"endingTitle\">ARTICLE PUBLISHED<\/h1>\n <p class=\"lead\" id=\"endingText\">Emma\u2019s investigation has reached the public.<\/p>\n <div class=\"card\" style=\"width:min(760px,100%)\">\n <div class=\"grid3\">\n <div><div style=\"font-size:2rem\">\u23f1\ufe0f<\/div><b>TIME LEFT<\/b><p id=\"finalTime\"><\/p><\/div>\n <div><div style=\"font-size:2rem\">\ud83d\udd0e<\/div><b>CLUES FOUND<\/b><p id=\"finalClues\"><\/p><\/div>\n <div><div style=\"font-size:2rem\">\ud83d\udca1<\/div><b>HINTS USED<\/b><p id=\"finalHints\"><\/p><\/div>\n <\/div>\n <\/div>\n <div class=\"actions\"><button class=\"primary\" onclick=\"location.reload()\">PLAY AGAIN<\/button><button class=\"secondary\" onclick=\"print()\">PRINT RESULT<\/button><\/div>\n<\/div>\n<\/section>\n\n<div class=\"modal\" id=\"modal\"><div class=\"modalbox\"><div id=\"modalContent\"><\/div><div class=\"actions\"><button class=\"secondary\" onclick=\"closeModal()\">CLOSE<\/button><\/div><\/div><\/div>\n<div class=\"toast\" id=\"toast\"><\/div>\n<\/div>\n\n<script>\nconst S={\n scene:0,time:2700,timer:null,hints:3,started:false,selectedSources:new Set(),order:[],\n clues:[],phone:'',usedHints:0\n};\nconst sourceData=[\n ['A','Government press office','\u201cNothing abnormal occurred inside the research centre.\u201d'],\n ['B','Passer-by testimony','\u201cI saw strange lights and evacuations during the night.\u201d'],\n ['C','Interview with a doctor','\u201cAll our experiments are strictly controlled and safe.\u201d'],\n ['D','Social media post','\u201cThey are hiding something. My cousin works there. #TRUTH\u201d'],\n ['E','Official university report','A signed scientific report with named authors and methods.'],\n ['F','Unknown email','\u201cBelieve me. I know what happened. You are being lied to.\u201d']\n];\nconst testimonyData=[\n ['1','Driver returning home','\u201cThe firefighters arrived very quickly.\u201d'],\n ['2','Local farmer','\u201cAround midnight, a huge explosion from the laboratory drew the neighbourhood\u2019s attention.\u201d'],\n ['3','Farmer\u2019s wife','\u201cAt around 11 p.m., I saw three masked men near a white van.\u201d'],\n ['4','Firefighter','\u201cAfter entering, we discovered a large quantity of chemical products.\u201d']\n];\nfunction tone(freq=440,d=.08,type='sine'){\n try{const a=new(window.AudioContext||window.webkitAudioContext)(),o=a.createOscillator(),g=a.createGain();o.type=type;o.frequency.value=freq;o.connect(g);g.connect(a.destination);g.gain.setValueAtTime(.04,a.currentTime);g.gain.exponentialRampToValueAtTime(.001,a.currentTime+d);o.start();o.stop(a.currentTime+d)}catch(e){}\n}\nfunction showScene(n,title,text){\n document.querySelectorAll('.scene').forEach(x=>x.classList.toggle('active',+x.dataset.scene===n));\n S.scene=n;document.getElementById('progressBar').style.width=(Math.min(n,8)\/8*100)+'%';\n if(title)document.getElementById('missionTitle').textContent=title;\n if(text)document.getElementById('missionText').textContent=text;\n window.scrollTo(0,0);tone(520,.1,'triangle')\n}\nasync function startGame(){\n initGameUI();\n S.started=true;\n await enterFullscreen();\n if(!S.timer)S.timer=setInterval(tick,1000);\n showScene(1,'VERIFY THE SOURCES','Find the reliable evidence and unlock the secret room.');\n}\nfunction tick(){S.time--;document.getElementById('timer').textContent=fmt(S.time);if(S.time<=0){clearInterval(S.timer);endFailure()}}\nfunction fmt(s){s=Math.max(0,s);return String(Math.floor(s\/60)).padStart(2,'0')+':'+String(s%60).padStart(2,'0')}\nfunction toast(msg){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2200)}\nfunction addClue(c){if(!S.clues.includes(c)){S.clues.push(c);toast('CASE FILE UPDATED: '+c)}}\nfunction renderSources(){\n const box=document.getElementById('eljSources');\n if(!box)return false;\n \/\/ The cards are written directly in the HTML so WordPress cannot lose them\n \/\/ when it moves or delays the script. This fallback rebuilds them only if needed.\n if(box.querySelector('.source'))return true;\n sourceData.forEach(([l,t,b])=>{\n const d=document.createElement('button');\n d.type='button';d.className='source';d.dataset.letter=l;\n d.innerHTML=`<span class=\"letter\">${l}<\/span><span><b>${t}<\/b><br><span class=\"muted\">${b}<\/span><\/span>`;\n d.addEventListener('click',()=>toggleSource(d));box.appendChild(d)\n });\n return true;\n}\nfunction toggleSource(el){\n const l=el.dataset.letter;if(S.selectedSources.has(l))S.selectedSources.delete(l);else if(S.selectedSources.size<3)S.selectedSources.add(l);else return toast('Select exactly three sources.');\n el.classList.toggle('selected');document.getElementById('sourceLetters').textContent=[...S.selectedSources].sort().join('-')||'---';tone(650,.05)\n}\nfunction checkSources(){\n const picked=[...S.selectedSources].sort().join(''),code=document.getElementById('roomCode').value,fb=document.getElementById('sourceFeedback');\n document.querySelectorAll('#eljSources .source').forEach(x=>x.classList.remove('correct','wrong'));\n if(picked==='ACE'&&code==='1104'){document.querySelectorAll('#eljSources .source').forEach(x=>{if('ACE'.includes(x.dataset.letter))x.classList.add('correct')});fb.innerHTML='<p class=\"ok\">ACCESS GRANTED \u2014 secret archive unlocked.<\/p>';addClue('Verified sources: A-C-E');setTimeout(()=>showScene(2,'ORDER THE TESTIMONIES','Reconstruct the night of the incident.'),900)}\n else{document.querySelectorAll('#eljSources .source.selected').forEach(x=>x.classList.add('wrong'));fb.innerHTML='<p class=\"error\">ERROR \u2014 evidence set or access code rejected.<\/p>';tone(110,.25,'sawtooth')}\n}\nfunction renderTestimonies(){\n const box=document.getElementById('testimonies');\n if(!box)return false;\n if(box.querySelector('.testimony'))return true;\n testimonyData.forEach(([n,w,q],i)=>{const d=document.createElement('button');d.type='button';d.className='testimony';d.style.transform=`rotate(${[-2,2,1,-1][i]}deg)`;d.dataset.n=n;d.innerHTML=`<b>TESTIMONY ${n}<\/b><p>${w}<\/p><p>${q}<\/p>`;d.onclick=()=>chooseTestimony(d);box.appendChild(d)});\n return true;\n}\nfunction chooseTestimony(d){if(S.order.includes(d.dataset.n))return;S.order.push(d.dataset.n);d.classList.add('active');renderOrder();tone(700,.06)}\nfunction renderOrder(){document.getElementById('orderStrip').innerHTML=S.order.map(n=>`<span class=\"order-token\">${n}<\/span>`).join('')}\nfunction resetOrder(){S.order=[];document.querySelectorAll('.testimony').forEach(x=>x.classList.remove('active'));renderOrder()}\nfunction checkOrder(){if(S.order.join('')==='3214'){addClue('Timeline code: 3214');toast('Sequence confirmed. It points to Drawer 2.');setTimeout(()=>showScene(3,'OPEN THE CORRECT DRAWER','Use the sequence to locate the informant\u2019s number.'),800)}else{toast('The sequence is inconsistent. Start with the earliest precise time.');tone(120,.2,'square')}}\nfunction openDrawer(n){\n const r=document.getElementById('drawerResult');\n if(n===2){r.innerHTML='<h3 class=\"ok\">DRAWER 2 OPEN<\/h3><p>A torn card reads: <b>20 420 666<\/b><\/p>';addClue('Informant number: 20 420 666');setTimeout(()=>showScene(4,'CALL THE INFORMANT','Dial the recovered number.'),1000)}\n else{r.innerHTML='<h3 class=\"error\">EMPTY<\/h3><p>Dust. Nothing else.<\/p>';tone(100,.18,'square')}\n}\nfunction renderKeypad(){const k=document.getElementById('keypad');if(!k)return false;if(k.querySelector('.key'))return true;['1','2','3','4','5','6','7','8','9','*','0','#'].forEach(n=>{const b=document.createElement('button');b.type='button';b.className='key';b.textContent=n;b.onclick=()=>phoneKey(n);k.appendChild(b)});return true}\nfunction phoneKey(n){if(S.phone.length<11){S.phone+=n;document.getElementById('phoneDisplay').textContent=S.phone;tone(380+Number(n||0)*25,.06)}}\nfunction phoneClear(){S.phone='';document.getElementById('phoneDisplay').textContent=''}\nfunction callNumber(){\n const st=document.getElementById('callStatus');\n if(S.phone.replace(\/\\D\/g,'')==='20420666'){st.innerHTML='<p class=\"ok\">CONNECTED...<\/p>';tone(780,.3);setTimeout(showCall,600)}\n else{st.innerHTML='<p class=\"error\">NUMBER UNREACHABLE<\/p>';tone(90,.35,'sawtooth')}\n}\nfunction showCall(){\n addClue('Gotham Laboratory connection');\n document.getElementById('modalContent').innerHTML=`<h2>THE INFORMANT<\/h2><p class=\"lead\">\u201cEmma was investigating Gotham Laboratory. She found records of chemical experiments involving kidnapped infants and forced mutations. I worked there. I gave her the process logs and the list of chemicals.\u201d<\/p><p class=\"lead\">\u201cShe said she would hide them in a safe place \u2014 somewhere protected or concealed. I have already said too much.\u201d<\/p><p class=\"error\"><b>CALL TERMINATED.<\/b><\/p><button class=\"primary\" onclick=\"closeModal();showScene(5,'SEARCH THE SECRET ROOM','Find Emma\u2019s concealed briefcase.')\">SEARCH THE ROOM<\/button>`;\n openModal()\n}\nfunction liftBoard(){document.getElementById('briefcase').classList.add('visible');addClue('Hidden briefcase');toast('A metal briefcase was concealed beneath the floor.')}\nfunction openBriefcase(){showScene(6,'DECODE THE BRIEFCASE','Find the eight-digit date hidden in Emma\u2019s office.')}\nfunction checkBirthCode(){\n const v=document.getElementById('birthCode').value.replace(\/\\D\/g,''),f=document.getElementById('birthFeedback');\n if(v==='17051991'){f.innerHTML='<p class=\"ok\">BRIEFCASE UNLOCKED.<\/p>';addClue('Emma\u2019s birth date: 17\/05\/1991');setTimeout(()=>showScene(7,'SOLVE THE FINAL RIDDLE','Decrypt Emma\u2019s last computer.'),800)}\n else{f.innerHTML='<p class=\"error\">INCORRECT DATE. Look again at the first computer screen.<\/p>';tone(100,.2,'square')}\n}\nfunction checkRiddle(){\n const a=document.getElementById('riddleAnswer').value.trim().toLowerCase(),f=document.getElementById('riddleFeedback');\n if(['silence','the silence','le silence'].includes(a)){f.innerHTML='<p class=\"ok\">DECRYPTION COMPLETE.<\/p>';addClue('Final password: SILENCE');setTimeout(()=>showScene(8,'MAKE THE FINAL DECISION','Read and publish Emma\u2019s completed investigation.'),800)}\n else{f.innerHTML='<p class=\"error\">The answer disappears when spoken.<\/p>';tone(100,.2,'square')}\n}\nfunction publishArticle(){clearInterval(S.timer);tone(880,.5,'triangle');showScene(9);document.getElementById('finalTime').textContent=fmt(S.time);document.getElementById('finalClues').textContent=S.clues.length;document.getElementById('finalHints').textContent=S.usedHints}\nfunction endFailure(){showScene(9);document.getElementById('endingTitle').textContent='THE DEADLINE EXPIRED';document.getElementById('endingText').textContent='Emma\u2019s article remained hidden. Restart the case and follow the evidence more efficiently.';document.getElementById('finalTime').textContent='00:00';document.getElementById('finalClues').textContent=S.clues.length;document.getElementById('finalHints').textContent=S.usedHints}\nfunction hint(){\n if(!S.started)return toast('Start the investigation first.');\n if(S.hints<=0)return toast('No hints remaining.');\n S.hints--;S.usedHints++;document.getElementById('hints').textContent=S.hints;\n const h={1:'Choose sources with identifiable responsibility, expertise or documented methods. The room code is 1104.',\n 2:'The masked men were seen at 23:00, before the midnight explosion.',\n 3:'The sequence 3214 points directly to Drawer 2.',\n 4:'Dial 20 420 666 without spaces.',\n 5:'Inspect the loose floorboard.',\n 6:'Emma\u2019s birth date was visible in the lower-right corner of the first computer: 17\/05\/1991.',\n 7:'What vanishes when its name is spoken?',\n 8:'The investigation is complete. Publish the article.'};\n toast(h[S.scene]||'Inspect every visible detail.')\n}\nfunction showInventory(){\n const items=['Verified sources','Timeline reconstructed','Informant contacted','Hidden briefcase','Birth date decoded','Final computer decrypted'];\n document.getElementById('modalContent').innerHTML='<h2>CASE FILE<\/h2><div class=\"inventory\">'+items.map((x,i)=>`<div class=\"item ${i<S.clues.length?'':'locked'}\">${i<S.clues.length?'\u2713':'\ud83d\udd12'} ${x}<\/div>`).join('')+'<\/div><h3>Recovered clues<\/h3><ul>'+S.clues.map(x=>'<li>'+x+'<\/li>').join('')+'<\/ul>';\n openModal()\n}\nfunction openModal(){document.getElementById('modal').classList.add('open')}function closeModal(){document.getElementById('modal').classList.remove('open')}\n\nfunction fullscreenElement(){\n return document.fullscreenElement || document.webkitFullscreenElement || null;\n}\nasync function enterFullscreen(){\n const root=document.documentElement;\n try{\n if(fullscreenElement()) return;\n if(root.requestFullscreen){\n await root.requestFullscreen({navigationUI:'hide'});\n }else if(root.webkitRequestFullscreen){\n root.webkitRequestFullscreen();\n }\n }catch(e){\n toast('Use the FULL SCREEN button to hide the WordPress header.');\n }\n}\nasync function exitFullscreen(){\n try{\n if(document.exitFullscreen) await document.exitFullscreen();\n else if(document.webkitExitFullscreen) document.webkitExitFullscreen();\n }catch(e){}\n}\nasync function toggleFullscreen(){\n if(fullscreenElement()) await exitFullscreen();\n else await enterFullscreen();\n}\nfunction syncFullscreenUI(){\n const active=!!fullscreenElement();\n document.body.classList.toggle('is-fullscreen',active);\n const btn=document.getElementById('fullscreenBtn');\n if(btn) btn.textContent=active?'\u26f6 EXIT FULL SCREEN':'\u26f6 FULL SCREEN';\n}\ndocument.addEventListener('fullscreenchange',syncFullscreenUI);\ndocument.addEventListener('webkitfullscreenchange',syncFullscreenUI);\n\nfunction initGameUI(attempt=0){\n const game=document.getElementById('game');\n if(!game){\n if(attempt<30)setTimeout(()=>initGameUI(attempt+1),100);\n return;\n }\n renderSources();renderTestimonies();renderKeypad();syncFullscreenUI();\n}\nif(document.readyState==='loading'){\n document.addEventListener('DOMContentLoaded',()=>initGameUI(),{once:true});\n}else{\n setTimeout(()=>initGameUI(),0);\n}\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Emma Lightwood: The Missing Article \u2014 Visible Birth Date V7 LIGHTWOOD FILES V7 CASE NOT STARTEDFind Emma. Finish the investigation. 45:00 \u26f6 FULL SCREEN CASE FILE...<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1313","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/pages\/1313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/comments?post=1313"}],"version-history":[{"count":9,"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/pages\/1313\/revisions"}],"predecessor-version":[{"id":1343,"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/pages\/1313\/revisions\/1343"}],"wp:attachment":[{"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/media?parent=1313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1313,"date":"2026-07-29T07:28:03","date_gmt":"2026-07-29T05:28:03","guid":{"rendered":"https:\/\/pcwallis.malo.wf\/?page_id=1313"},"modified":"2026-08-06T22:36:55","modified_gmt":"2026-08-06T20:36:55","slug":"escape-game","status":"publish","type":"page","link":"https:\/\/pcwallis.malo.wf\/index.php\/escape-game\/","title":{"rendered":"escape game"},"content":{"rendered":"\n\n\n\n\n\nEmma Lightwood: The Missing Article \u2014 Visible Birth Date V7<\/title>\n<style>\n:root{\n --bg:#05090d;--panel:#0d1822;--panel2:#132432;--ink:#ecf5f7;--muted:#9db0ba;\n --cyan:#55d7f2;--green:#57d37b;--red:#ff5d64;--amber:#f4bc54;--paper:#dfd2b8;\n --shadow:0 20px 60px #000b;\n}\n*{box-sizing:border-box}\nhtml{margin:0;width:100%;min-height:100%;background:#020508;scroll-behavior:smooth}\nbody{margin:0;width:100%;min-height:100%;overflow-x:hidden;overflow-y:auto;background:#020508;color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif}\nbutton,input{font:inherit}\nbutton{cursor:pointer}\n#game{position:relative;isolation:isolate;width:100%;min-height:760px;margin:0 auto;background:\n radial-gradient(circle at 20% 15%,#173047 0,transparent 28%),\n radial-gradient(circle at 85% 80%,#2d1717 0,transparent 28%),\n linear-gradient(145deg,#050a0f,#020407 65%);overflow:hidden;border-radius:14px}\n#game.immersive{position:fixed!important;inset:0!important;z-index:2147483647!important;width:100vw!important;height:100dvh!important;min-height:0!important;margin:0!important;border-radius:0!important;overflow:auto!important}\nbody.game-locked{overflow:hidden!important}\n#game:fullscreen,#game:-webkit-full-screen{width:100vw!important;height:100dvh!important;min-height:0!important;margin:0!important;border-radius:0!important;overflow:auto!important;background:#020508!important}\n.scanlines{pointer-events:none;position:absolute;inset:0;z-index:100;background:repeating-linear-gradient(0deg,transparent 0 3px,#ffffff08 4px);mix-blend-mode:screen}\n.vignette{pointer-events:none;position:absolute;inset:0;z-index:99;box-shadow:inset 0 0 150px #000}\n.hud{position:sticky;z-index:150;top:0;min-height:74px;display:flex;align-items:center;gap:14px;padding:10px 18px;background:linear-gradient(#07111af7,#07111ae8);border-bottom:1px solid #315066;backdrop-filter:blur(10px);box-shadow:0 8px 22px #0008;flex-wrap:wrap}\n.logo{font-family:Georgia,serif;font-weight:900;letter-spacing:3px;white-space:nowrap}.logo b{color:var(--red)}\n.mission{font-size:.78rem;color:var(--muted);min-width:160px}.mission strong{display:block;color:var(--cyan);font-size:.95rem}\n.progress{height:8px;flex:1;border:1px solid #385063;border-radius:20px;overflow:hidden;background:#0a1117}\n.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fa2c5,#5ee1ff);transition:.5s}\n.timer{font-family:ui-monospace,monospace;color:#ff746f;font-weight:900;font-size:1.25rem}\n.iconbtn{border:1px solid #416178;background:#102231;color:white;border-radius:8px;padding:9px 11px}\n.scene{position:relative;display:none;overflow:visible;min-height:calc(100dvh - 74px);padding:clamp(14px,2.5vw,34px)}\n.scene.active{display:block;animation:sceneIn .45s ease}\n@keyframes sceneIn{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}\n.wrap{max-width:1280px;margin:auto;min-height:calc(100dvh - 142px);display:flex;flex-direction:column;justify-content:center}\n.chapter{display:inline-flex;align-items:center;gap:10px;color:var(--cyan);font-weight:900;letter-spacing:2px;text-transform:uppercase}\n.chapter:before{content:\"\";width:38px;height:2px;background:var(--cyan)}\nh1{font-family:Georgia,serif;font-size:clamp(2.4rem,7vw,6.5rem);line-height:.92;margin:.2em 0;letter-spacing:2px;text-shadow:0 8px 25px #000}\nh2{font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,3.4rem);margin:.25em 0;color:#dff8ff}\np{line-height:1.55}.lead{font-size:clamp(1.05rem,2vw,1.35rem);max-width:760px}\n.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}\n.card{background:linear-gradient(145deg,#122432ee,#071019ee);border:1px solid #355164;border-radius:14px;padding:18px;box-shadow:var(--shadow)}\n.glass{background:#0a151dcc;backdrop-filter:blur(10px)}\n.primary,.secondary,.danger,.success{border-radius:9px;padding:13px 18px;font-weight:900;letter-spacing:.8px;color:white;border:1px solid #678092;box-shadow:0 8px 20px #0007}\n.primary{background:linear-gradient(#174862,#102d40)}.secondary{background:#17242d}.danger{background:linear-gradient(#9c302e,#671817)}.success{background:linear-gradient(#248c43,#155c2b)}\n.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}\n.scene-art{position:relative;min-height:520px;border:1px solid #415a6d;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:#071019}\n.office{background:\n linear-gradient(#09131cab,#02070ccc),\n linear-gradient(90deg,#18242c 0 3%,transparent 3% 97%,#18242c 97%),\n repeating-linear-gradient(90deg,#1b2a34 0 130px,#0b151d 131px 138px)}\n.office:before{content:\"\";position:absolute;left:6%;right:6%;top:7%;height:44%;background:repeating-linear-gradient(90deg,#293942 0 110px,#1a272e 112px 118px);clip-path:polygon(0 0,100% 0,98% 95%,2% 100%);opacity:.7}\n.desk{position:absolute;left:8%;right:8%;bottom:5%;height:31%;background:linear-gradient(#5b3d29,#2e1a11);clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);box-shadow:0 -8px 20px #0008}\n.monitor{position:absolute;left:23%;top:19%;width:53%;height:50%;background:#061017;border:10px solid #1b2227;border-radius:10px;box-shadow:0 0 40px #5de0ff2b}\n.monitor-screen{position:absolute;inset:15px;padding:22px;background:radial-gradient(circle at 50% 45%,#16324b,#050b10 70%);overflow:hidden}\n.monitor-screen:after{content:\"EMMA LIGHTWOOD \u00b7 17\/05\/1991\";position:absolute;right:10px;bottom:7px;color:#6e8b9c;font:11px monospace}\n\/* Chapter 3: the birth-date clue must remain readable on every screen size. *\/\n.birth-monitor .monitor-screen:after{display:none}\n.birth-monitor .monitor-screen{\n display:flex;flex-direction:column;justify-content:center;align-items:stretch;\n padding:clamp(14px,2.4vw,28px);overflow:visible;\n background:radial-gradient(circle at 50% 30%,#1b415d,#050b10 74%);\n}\n.birth-monitor .archive-label{\n margin:0 0 10px;color:#8de9ff;font:900 clamp(.72rem,1.3vw,.95rem) ui-monospace,monospace;\n letter-spacing:2px;text-transform:uppercase;\n}\n.birth-profile{\n position:relative;z-index:2;padding:clamp(14px,2.5vw,24px);\n border:2px solid #f4bc54;border-radius:12px;\n background:linear-gradient(145deg,#17293a,#0a131b);\n box-shadow:0 0 0 4px #f4bc5422,0 0 34px #f4bc5440;\n text-align:left;\n}\n.birth-profile .profile-title{\n display:block;margin-bottom:12px;color:#eaf8ff;font:900 clamp(1rem,2.2vw,1.5rem) Arial,sans-serif;\n}\n.birth-profile .profile-line{\n display:flex;justify-content:space-between;gap:12px;align-items:center;\n padding:9px 0;border-top:1px solid #ffffff20;color:#c5d5dc;\n font:700 clamp(.78rem,1.5vw,1rem) Arial,sans-serif;\n}\n.birth-profile .profile-line strong{color:#fff}\n.birth-profile .birth-date{\n display:block;margin-top:12px;padding:12px 10px;border-radius:9px;\n background:#f4bc54;color:#14100a;text-align:center;\n font:1000 clamp(1.6rem,4vw,3rem) ui-monospace,monospace;\n letter-spacing:clamp(2px,.7vw,8px);line-height:1;\n box-shadow:0 8px 22px #0008;\n}\n.birth-profile .birth-caption{\n display:block;margin-top:8px;color:#ffe9ae;text-align:center;\n font:900 clamp(.68rem,1.1vw,.82rem) Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;\n}\n.birth-task{margin:0 0 18px;padding:14px 16px;border-left:5px solid var(--cyan);border-radius:8px;background:#0b1d29;color:#eaf8ff}\n.birth-task strong{display:block;margin-bottom:5px;color:#8de9ff;letter-spacing:.8px;text-transform:uppercase}\n.format-tip{margin:12px 0 0;color:#c8d8de;font-size:.95rem}\n.format-tip code{display:inline-block;padding:4px 7px;border:1px solid #3e6775;border-radius:5px;background:#01070a;color:#7ff5a3;font-weight:900;letter-spacing:2px}\n@media(max-width:820px){\n .birth-monitor{min-height:500px!important}\n .birth-monitor .monitor{left:8%;top:12%;width:84%;height:62%}\n .birth-profile .profile-line{align-items:flex-start;flex-direction:column;gap:4px}\n}\n.keyboard{position:absolute;left:28%;bottom:12%;width:44%;height:8%;background:repeating-linear-gradient(90deg,#1b2227 0 14px,#3a454d 15px 16px);transform:perspective(300px) rotateX(55deg)}\n.note{position:absolute;background:#eadfbf;color:#231d15;padding:14px;box-shadow:8px 10px 15px #0008;transform:rotate(-3deg);font-family:\"Courier New\",monospace}\n.note.pin{top:10%;left:7%;width:170px}.note.red{background:#e9c9bf;transform:rotate(4deg)}\n.source-grid{display:grid!important;visibility:visible!important;opacity:1!important;min-height:1px}.source{position:relative;display:flex!important;visibility:visible!important;opacity:1!important;width:100%;min-height:112px;gap:14px;align-items:flex-start;padding:15px;border:1px solid #435b6c;border-radius:10px;background:#0c1923;color:var(--ink);text-align:left;transition:.2s;-webkit-appearance:none;appearance:none}\n.source:hover{transform:translateY(-2px);border-color:#7ab9d1}\n.source.selected{outline:3px solid var(--cyan)}.source.correct{outline:3px solid var(--green)}.source.wrong{outline:3px solid var(--red)}\n.letter{display:grid;place-items:center;min-width:38px;height:38px;border-radius:50%;background:#18384d;color:#bdefff;font-weight:900}\n.password-reveal{margin:16px 0 8px;padding:18px;border:2px solid var(--green);border-radius:12px;background:linear-gradient(135deg,#0e321d,#081d12);color:#f4fff7;box-shadow:0 0 28px #57d37b38;animation:passwordPop .35s ease}\n.password-reveal .password-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid #ffffff22}\n.password-reveal .password-row:last-of-type{border-bottom:0}\n.password-reveal .password-label{font-size:.82rem;letter-spacing:1.5px;color:#bde7c9;font-weight:900}\n.password-reveal .password-value{font-size:clamp(1.45rem,4vw,2.15rem);letter-spacing:6px;color:#ffe08b;font-weight:1000;text-shadow:0 0 16px #f4bc5470}\n.password-reveal .password-value.sources{color:#8dffae}\n.password-reveal .use-code{margin-top:12px;width:100%;border:1px solid #f4bc54;background:linear-gradient(#8b5a12,#5d3908);color:#fff7dc;border-radius:9px;padding:12px 16px;font-weight:900}\n\n.password-popup{text-align:center;padding:6px 0 2px}\n.password-popup .eyebrow{color:var(--green);font-weight:900;letter-spacing:2px;text-transform:uppercase}\n.password-popup .code-card{margin:18px 0;padding:20px;border:2px solid var(--amber);border-radius:14px;background:linear-gradient(145deg,#291d09,#0d170f);box-shadow:0 0 32px #f4bc5440}\n.password-popup .code-caption{display:block;color:#c9d7dc;font-size:.82rem;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:8px}\n.password-popup .code-big{display:block;color:#ffe08b;font-size:clamp(2.4rem,9vw,5.2rem);line-height:1;letter-spacing:10px;font-weight:1000;text-shadow:0 0 22px #f4bc5475}\n.password-popup .code-big.sources{color:#8dffae;font-size:clamp(2rem,7vw,4.2rem)}\n.password-popup .continue-code{width:100%;margin-top:8px;border:2px solid #ffe08b;background:linear-gradient(#a26d13,#694407);color:#fff;border-radius:10px;padding:15px 18px;font-weight:1000;letter-spacing:1px}\n.password-popup .continue-code:hover{filter:brightness(1.15)}\n\n@keyframes passwordPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}\n.terminal{background:#02090d;border:1px solid #2f5c6b;border-radius:10px;padding:14px;font-family:ui-monospace,monospace;color:#83e6a2;box-shadow:inset 0 0 30px #000}\n.code-input{background:#01070a;border:1px solid #3e6775;color:#7ff5a3;padding:13px;font-size:1.2rem;border-radius:7px;letter-spacing:5px;width:min(280px,100%);text-align:center}\n.wall{min-height:500px;background:\n linear-gradient(#111820cc,#111820cc),\n repeating-linear-gradient(90deg,#5c3925 0 12px,#422719 13px 15px);position:relative}\n.testimony{background:var(--paper);color:#221c16;padding:16px;border-radius:2px;box-shadow:8px 10px 15px #0008;min-height:145px;position:relative;transition:.2s}\n.testimony:before{content:\"\u25cf\";position:absolute;top:-12px;left:50%;color:#bb2525;font-size:24px}\n.testimony.active{outline:4px solid var(--amber);transform:rotate(0)!important}\n.order-strip{display:flex;gap:10px;flex-wrap:wrap;min-height:65px;padding:10px;border:2px dashed #63717a;border-radius:9px}\n.order-token{padding:12px 16px;border-radius:8px;background:#172b39;border:1px solid #5c7180;font-weight:900}\n.drawers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}\n.drawer{min-height:125px;background:linear-gradient(#514234,#27201b);border:6px solid #211a16;border-radius:5px;color:#e5d8b9;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 25px #0008}\n.drawer:hover{filter:brightness(1.2)}.handle{width:46px;height:10px;border:2px solid #a88955;border-radius:10px;margin:9px}\n.phone{width:min(340px,100%);margin:auto;background:linear-gradient(#1c2730,#080d11);padding:22px;border:1px solid #52616b;border-radius:28px;box-shadow:var(--shadow)}\n.phone-display{background:#a6c7a0;color:#173018;padding:14px;border-radius:7px;font:1.4rem ui-monospace,monospace;text-align:right;min-height:55px}\n.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.key{padding:14px;border-radius:50%;background:#273742;color:white;border:1px solid #5a6a74;font-weight:900}\n.room{position:relative;min-height:550px;background:\n linear-gradient(#061019aa,#020609dd),\n linear-gradient(25deg,#132838,#070b0e);border:1px solid #324653;border-radius:14px;overflow:hidden}\n.floor{position:absolute;left:0;right:0;bottom:0;height:42%;background:repeating-linear-gradient(90deg,#5b4633 0 70px,#38291e 72px 75px);transform-origin:bottom;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%)}\n.boardwall{position:absolute;left:6%;top:8%;width:42%;height:45%;background:#4f3724;border:9px solid #2c1e15;box-shadow:0 10px 20px #0008}\n.floorboard{position:absolute;left:55%;bottom:9%;width:170px;height:62px;background:#6a5038;border:2px solid #8e6b48;transform:rotate(-4deg);box-shadow:0 10px 15px #0008}\n.floorboard:hover{filter:brightness(1.4)}\n.briefcase{position:absolute;right:8%;bottom:17%;width:190px;height:125px;background:linear-gradient(#30363a,#11171b);border:5px solid #090c0e;border-radius:9px;box-shadow:0 15px 25px #000;display:none}\n.briefcase.visible{display:block;animation:pop .4s}@keyframes pop{from{transform:scale(.7);opacity:0}}\n.lock{position:absolute;left:42%;top:43%;width:35px;height:25px;background:#c79a3c;border-radius:4px}\n.article{background:#f0eadc;color:#171717;padding:clamp(18px,4vw,45px);max-width:850px;margin:auto;border-radius:4px;box-shadow:var(--shadow);font-family:Georgia,serif}\n.article h2{color:#111;font-family:Georgia,serif}.article .byline{color:#666;border-bottom:1px solid #999;padding-bottom:15px}\n.inventory{display:flex;gap:9px;flex-wrap:wrap}.item{padding:8px 11px;border:1px solid #6e765b;border-radius:7px;background:#17232b;font-size:.85rem}.item.locked{opacity:.25;filter:grayscale(1)}\n.modal{position:fixed;z-index:200;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:#000d}.modal.open{display:flex}\n.modalbox{width:min(620px,100%);max-height:90vh;overflow:auto;background:linear-gradient(#132431,#081119);border:1px solid #5f7481;border-radius:14px;padding:22px;box-shadow:var(--shadow)}\n.toast{position:fixed;z-index:300;right:18px;bottom:18px;max-width:420px;padding:14px 18px;border-radius:10px;background:#132431;border:1px solid #6a7e8a;box-shadow:var(--shadow);display:none}.toast.show{display:block;animation:pop .2s}\n.error{color:var(--red)}.ok{color:var(--green)}.muted{color:var(--muted)}.hidden{display:none!important}\n#game:fullscreen .hud,#game:-webkit-full-screen .hud,#game.immersive .hud{padding-top:max(10px,env(safe-area-inset-top));position:sticky;top:0}\n#game:fullscreen .scene,#game:-webkit-full-screen .scene,#game.immersive .scene{min-height:calc(100dvh - 74px)}\n@media(max-width:820px){\n .grid2,.grid3{grid-template-columns:1fr}.hud{min-height:66px;padding:8px}.scene{min-height:calc(100dvh - 66px)}.mission{display:none}.logo{font-size:.75rem}.timer{font-size:1rem}\n .scene-art{min-height:430px}.monitor{left:10%;width:80%}.drawers{grid-template-columns:repeat(2,1fr)}\n}\n\n\/* V5: reliable fact-check display + WordPress-safe layout *\/\n#eljSources .source{touch-action:manipulation}\n#eljSources .source[aria-pressed=\"true\"]{outline:3px solid var(--cyan);box-shadow:0 0 0 2px #071019,0 0 22px #55d7f255}\n#sourceLetters{display:inline-block;min-width:90px;color:#baffcb;font-weight:1000;letter-spacing:3px}\n#factCheckBtn.ready{background:linear-gradient(#2c9b51,#176b35);border-color:#87ffab;box-shadow:0 0 0 3px #57d37b35,0 10px 28px #0008;animation:readyPulse 1.1s infinite alternate}\n@keyframes readyPulse{to{filter:brightness(1.25);transform:translateY(-1px)}}\n#passwordReveal{scroll-margin-top:96px}\n#passwordReveal:not(.hidden){display:block!important}\n#sourceFeedback{min-height:28px}\n@media(max-width:680px){.hud .progress{order:4;flex-basis:100%}.iconbtn{padding:8px 9px}.wrap{min-height:auto;justify-content:flex-start}}\n\n\n\/* Mission 3 clarity improvements *\/\n.task-panel{\n margin:0 0 18px;\n padding:16px 18px;\n border:1px solid #4c7e94;\n border-left:6px solid var(--cyan);\n border-radius:12px;\n background:linear-gradient(135deg,#102632,#08131a);\n box-shadow:0 12px 28px #0006;\n}\n.task-panel h3{margin:0 0 10px;color:#dff8ff;font-size:1.25rem}\n.task-panel p{margin:6px 0;color:#d9e6eb}\n.task-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}\n.task-step{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid #315568;border-radius:10px;background:#07141c}\n.task-step b{display:grid;place-items:center;min-width:30px;height:30px;border-radius:50%;background:var(--cyan);color:#031016;font-weight:1000}\n.task-step span{line-height:1.35;color:#eef8fb}\n.timeline-code{display:inline-flex;align-items:center;gap:10px;margin-top:8px;padding:9px 13px;border-radius:9px;background:#02090d;border:1px solid #4b7b8d;font-family:ui-monospace,monospace;color:#8dffae;font-size:1.15rem;font-weight:900;letter-spacing:3px}\n.drawer-result-success{border:2px solid var(--green)!important;background:linear-gradient(135deg,#0d2d1a,#07140d)!important;text-align:center}\n.recovered-number{display:inline-block;margin:8px 0 12px;padding:14px 20px;border:2px solid var(--amber);border-radius:12px;background:#211707;color:#ffe08b;font:1000 clamp(1.8rem,5vw,3.3rem) ui-monospace,monospace;letter-spacing:7px;text-shadow:0 0 18px #f4bc5460}\n.continue-call{padding:14px 20px!important;font-size:1.05rem!important}\n.phone-guide{border-color:#48758a!important}\n.phone-guide h3{color:#dff8ff;margin-bottom:8px;font-size:1.55rem}\n.phone-guide .instruction{font-size:1.12rem;line-height:1.5;color:#eef7fa;margin:8px 0}\n.phone-guide .small-note{color:#a9bdc7;font-size:.95rem}\n.phone-guide .recovered-card{margin:14px 0;padding:14px;border:1px solid #7b683a;border-radius:10px;background:linear-gradient(135deg,#29200e,#11140d)}\n.phone-guide .recovered-card small{display:block;color:#d7c98f;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:6px}\n.phone-guide .recovered-card strong{display:block;color:#ffe08b;font:1000 clamp(1.7rem,4vw,2.7rem) ui-monospace,monospace;letter-spacing:6px}\n.autofill-btn{width:100%;margin-top:10px;border:2px solid #9fe3ff;background:linear-gradient(#176485,#0c4058);color:white;border-radius:9px;padding:12px 15px;font-weight:1000;letter-spacing:.5px}\n.autofill-btn:hover{filter:brightness(1.15)}\n.phone-display{display:flex;align-items:center;justify-content:flex-end;letter-spacing:4px;font-weight:1000}\n.phone-display:empty::before{content:'ENTER NUMBER';color:#416844;letter-spacing:2px;font-size:.95rem}\n.call-help{margin-top:12px;padding:11px 13px;border-radius:9px;background:#07151d;border:1px solid #2e5365;color:#cfe4ec}\n.call-help strong{color:#8dffae}\n@media(max-width:820px){.task-steps{grid-template-columns:1fr}.recovered-number{letter-spacing:4px}.phone-guide .recovered-card strong{letter-spacing:4px}}\n\n<\/style>\n<\/head>\n<body>\n<div id=\"game\">\n<div class=\"scanlines\"><\/div><div class=\"vignette\"><\/div>\n<header class=\"hud\">\n <div class=\"logo\">LIGHTWOOD <b>FILES<\/b> <span style=\"font:700 10px Arial;color:#8dffae;letter-spacing:1px\">V7<\/span><\/div>\n <div class=\"mission\"><strong id=\"missionTitle\">CASE NOT STARTED<\/strong><span id=\"missionText\">Find Emma. Finish the investigation.<\/span><\/div>\n <div class=\"progress\"><i id=\"progressBar\"><\/i><\/div>\n <div class=\"timer\" id=\"timer\">45:00<\/div>\n <button class=\"iconbtn\" id=\"fullscreenBtn\" onclick=\"toggleFullscreen()\">\u26f6 FULL SCREEN<\/button>\n <button class=\"iconbtn\" onclick=\"showInventory()\">CASE FILE<\/button>\n <button class=\"iconbtn\" onclick=\"hint()\">HINT <span id=\"hints\">3<\/span><\/button>\n<\/header>\n\n<section class=\"scene active\" data-scene=\"0\">\n<div class=\"wrap\">\n <div class=\"grid2\" style=\"align-items:center\">\n <div>\n <div class=\"chapter\">Prologue<\/div>\n <h1>THE MISSING ARTICLE<\/h1>\n <p class=\"lead\">Investigative journalist <b>Emma Lightwood<\/b> vanished the night before publishing a major story. Her office was found unlocked. Her computer was still running.<\/p>\n <p class=\"lead\" style=\"color:#ff7f79\">\u201cIf you want the truth to be published, finish my investigation.\u201d<\/p>\n <div class=\"actions\"><button class=\"primary\" onclick=\"startGame()\">ENTER THE NEWSROOM<\/button><\/div>\n <\/div>\n <div class=\"scene-art office\">\n <div class=\"note pin\">DO NOT TRUST APPEARANCES.<\/div>\n <div class=\"monitor\"><div class=\"monitor-screen\"><h3 style=\"color:#6ee4ff\">EMMA_LIGHTWOOD \/\/ OFFLINE<\/h3><p style=\"font-family:monospace\">Last session interrupted.<br>4 encrypted stages detected.<br><br><span style=\"color:#ff6868\">FINISH THE INVESTIGATION.<\/span><\/p><\/div><\/div>\n <div class=\"desk\"><\/div><div class=\"keyboard\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"1\">\n<div class=\"wrap\">\n <div class=\"chapter\">Chapter 1<\/div><h2>DO NOT PUBLISH WITHOUT VERIFICATION<\/h2>\n <p class=\"lead\">Emma left six sources. Select the <b>three sources that are sufficiently reliable to verify further<\/b>.<\/p>\n <div class=\"grid3 source-grid\" id=\"eljSources\" aria-label=\"Sources to verify\">\n <button type=\"button\" class=\"source\" data-letter=\"A\" aria-pressed=\"false\">\n <span class=\"letter\">A<\/span><span><b>Government press office<\/b><br><span class=\"muted\">\u201cNothing abnormal occurred inside the research centre.\u201d<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"B\" aria-pressed=\"false\">\n <span class=\"letter\">B<\/span><span><b>Passer-by testimony<\/b><br><span class=\"muted\">\u201cI saw strange lights and evacuations during the night.\u201d<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"C\" aria-pressed=\"false\">\n <span class=\"letter\">C<\/span><span><b>Interview with a doctor<\/b><br><span class=\"muted\">\u201cAll our experiments are strictly controlled and safe.\u201d<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"D\" aria-pressed=\"false\">\n <span class=\"letter\">D<\/span><span><b>Social media post<\/b><br><span class=\"muted\">\u201cThey are hiding something. My cousin works there. #TRUTH\u201d<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"E\" aria-pressed=\"false\">\n <span class=\"letter\">E<\/span><span><b>Official university report<\/b><br><span class=\"muted\">A signed scientific report with named authors and methods.<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"F\" aria-pressed=\"false\">\n <span class=\"letter\">F<\/span><span><b>Unknown email<\/b><br><span class=\"muted\">\u201cBelieve me. I know what happened. You are being lied to.\u201d<\/span><\/span>\n <\/button>\n <\/div>\n <div class=\"card terminal\" style=\"margin-top:18px\">\n > selected_sources: <span id=\"sourceLetters\">—<\/span><br>\n <div id=\"passwordReveal\" class=\"password-reveal hidden\" aria-live=\"polite\">\n <div class=\"password-row\"><span class=\"password-label\">VALIDATED SOURCE PASSWORD<\/span><strong class=\"password-value sources\">A-C-E<\/strong><\/div>\n <div class=\"password-row\"><span class=\"password-label\">SECRET ROOM ACCESS CODE<\/span><strong class=\"password-value\">1104<\/strong><\/div>\n <button type=\"button\" class=\"use-code\" onclick=\"useRoomCode()\">USE CODE 1104<\/button>\n <\/div>\n > room_access_code: <input id=\"roomCode\" class=\"code-input\" maxlength=\"4\" inputmode=\"numeric\" placeholder=\"\u2022\u2022\u2022\u2022\">\n <div id=\"sourceFeedback\" aria-live=\"polite\"><\/div>\n <\/div>\n <div class=\"actions\"><button type=\"button\" class=\"primary\" id=\"factCheckBtn\">RUN FACT-CHECK<\/button><\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"2\">\n<div class=\"wrap\">\n <div class=\"chapter\">Chapter 2<\/div><h2>THE TESTIMONY WALL<\/h2>\n <p class=\"lead\">Put the witness statements in chronological order. Tap the cards in sequence.<\/p>\n <div class=\"wall card\">\n <div class=\"grid2\" id=\"testimonies\"><\/div>\n <\/div>\n <p><b>Your sequence:<\/b><\/p><div id=\"orderStrip\" class=\"order-strip\"><\/div>\n <div class=\"actions\"><button class=\"secondary\" onclick=\"resetOrder()\">RESET<\/button><button class=\"primary\" onclick=\"checkOrder()\">TEST SEQUENCE<\/button><\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"3\">\n<div class=\"wrap\">\n <div class=\"chapter\">Mission 3 \u2014 Find the contact number<\/div><h2>THE ARCHIVE DRAWERS<\/h2>\n <div class=\"task-panel\">\n <h3>YOUR OBJECTIVE<\/h3>\n <p>You have reconstructed the events in this order: <strong>3 \u2192 2 \u2192 1 \u2192 4<\/strong>.<\/p>\n <div class=\"timeline-code\">TIMELINE CODE: 3214<\/div>\n <div class=\"task-steps\">\n <div class=\"task-step\"><b>1<\/b><span>Look at the four drawer labels.<\/span><\/div>\n <div class=\"task-step\"><b>2<\/b><span>Open the drawer whose number is exactly <strong>3214<\/strong>.<\/span><\/div>\n <div class=\"task-step\"><b>3<\/b><span>Write down the telephone number found inside.<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"drawers\">\n <button class=\"drawer\" onclick=\"openDrawer(1)\"><b>DRAWER 1<\/b><div class=\"handle\"><\/div><span>2341<\/span><\/button>\n <button class=\"drawer\" onclick=\"openDrawer(2)\"><b>DRAWER 2<\/b><div class=\"handle\"><\/div><span>3214<\/span><\/button>\n <button class=\"drawer\" onclick=\"openDrawer(3)\"><b>DRAWER 3<\/b><div class=\"handle\"><\/div><span>1234<\/span><\/button>\n <button class=\"drawer\" onclick=\"openDrawer(4)\"><b>DRAWER 4<\/b><div class=\"handle\"><\/div><span>2413<\/span><\/button>\n <\/div>\n <div id=\"drawerResult\" class=\"card\" style=\"margin-top:20px\" aria-live=\"polite\">\n <strong>Choose the drawer labelled 3214.<\/strong>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"4\">\n<div class=\"wrap\">\n <div class=\"chapter\">Mission 3 \u2014 Secure call<\/div><h2>DIAL THE INFORMANT<\/h2>\n <div class=\"task-panel\">\n <h3>WHAT DO YOU HAVE TO DO?<\/h3>\n <div class=\"task-steps\">\n <div class=\"task-step\"><b>1<\/b><span>Read the number recovered from Drawer 2.<\/span><\/div>\n <div class=\"task-step\"><b>2<\/b><span>Use the keypad to enter all eight digits, without spaces.<\/span><\/div>\n <div class=\"task-step\"><b>3<\/b><span>Check the display, then press <strong>CALL<\/strong>.<\/span><\/div>\n <\/div>\n <\/div>\n <div class=\"grid2\" style=\"align-items:center\">\n <div class=\"phone\">\n <div class=\"phone-display\" id=\"phoneDisplay\" aria-live=\"polite\"><\/div>\n <div class=\"keypad\" id=\"keypad\"><\/div>\n <div class=\"actions\">\n <button class=\"danger\" onclick=\"phoneClear()\">CLEAR<\/button>\n <button class=\"success\" onclick=\"callNumber()\">CALL<\/button>\n <\/div>\n <\/div>\n <div class=\"card phone-guide\">\n <h3>Recovered evidence<\/h3>\n <p class=\"instruction\">The torn card in <strong>Drawer 2<\/strong> contains the informant\u2019s telephone number.<\/p>\n <div class=\"recovered-card\">\n <small>Number found in the drawer<\/small>\n <strong>20 420 666<\/strong>\n <\/div>\n <p class=\"small-note\">On the keypad, enter: <strong>2 0 4 2 0 6 6 6<\/strong>. The spaces are only for readability.<\/p>\n <button type=\"button\" class=\"autofill-btn\" onclick=\"autoFillPhone()\">AUTO-FILL 20 420 666<\/button>\n <div class=\"call-help\">Your display must show <strong>20 420 666<\/strong> before you press CALL.<\/div>\n <div id=\"callStatus\" aria-live=\"polite\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"5\">\n<div class=\"wrap\">\n <div class=\"chapter\">Search phase<\/div><h2>THE SECRET ROOM<\/h2>\n <p class=\"lead\">The informant said Emma hid the files somewhere \u201cwell protected\u201d or \u201cwell concealed.\u201d Search the room.<\/p>\n <div class=\"room\">\n <div class=\"boardwall\"><div class=\"note\" style=\"left:8%;top:10%\">GOTHAM LAB<br>CHEMICAL LOGS<\/div><div class=\"note red\" style=\"right:5%;bottom:8%\">WHERE WOULD YOU HIDE A CASE?<\/div><\/div>\n <div class=\"floor\"><\/div>\n <button class=\"floorboard\" onclick=\"liftBoard()\">LOOSE FLOORBOARD<\/button>\n <button class=\"briefcase\" id=\"briefcase\" onclick=\"openBriefcase()\"><span class=\"lock\"><\/span><\/button>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"6\">\n<div class=\"wrap\">\n <div class=\"chapter\">Chapter 3<\/div><h2>THE BRIEFCASE CODE<\/h2>\n <div class=\"grid2\" style=\"align-items:center\">\n <div class=\"card\">\n <div class=\"birth-task\">\n <strong>Your mission<\/strong>\n Find Emma Lightwood’s <b>date of birth<\/b> in the archived personnel profile shown on the right. Then enter the date as an eight-digit code.\n <\/div>\n <p class=\"lead\">The briefcase requires an eight-digit password.<\/p>\n <blockquote class=\"note\" style=\"position:relative;left:auto;top:auto;width:auto;transform:none\">\u201cThe key is the day when my age began to count.\u201d<\/blockquote>\n <label for=\"birthCode\" style=\"display:block;margin:18px 0 8px;font-weight:900;color:#dff8ff\">Enter Emma’s birth date:<\/label>\n <input id=\"birthCode\" class=\"code-input\" maxlength=\"8\" inputmode=\"numeric\" autocomplete=\"off\" aria-describedby=\"birthFormat\" placeholder=\"DDMMYYYY\">\n <p class=\"format-tip\" id=\"birthFormat\">Remove the slashes. Example: <code>04\/11\/2002 \u2192 04112002<\/code><\/p>\n <div id=\"birthFeedback\" aria-live=\"polite\"><\/div>\n <div class=\"actions\"><button class=\"primary\" onclick=\"checkBirthCode()\">UNLOCK BRIEFCASE<\/button><\/div>\n <\/div>\n <div class=\"scene-art office birth-monitor\" style=\"min-height:460px\" aria-label=\"Archived profile showing Emma Lightwood's date of birth\">\n <div class=\"monitor\"><div class=\"monitor-screen\">\n <div class=\"archive-label\">Archived desktop \u00b7 personnel file<\/div>\n <div class=\"birth-profile\">\n <strong class=\"profile-title\">EMMA LIGHTWOOD \u2014 PRESS ID<\/strong>\n <div class=\"profile-line\"><span>Department<\/span><strong>Investigative Desk<\/strong><\/div>\n <div class=\"profile-line\"><span>Status<\/span><strong>Missing<\/strong><\/div>\n <span class=\"birth-caption\">Date of birth<\/span>\n <strong class=\"birth-date\">17 \/ 05 \/ 1991<\/strong>\n <\/div>\n <\/div><\/div><div class=\"desk\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"7\">\n<div class=\"wrap\">\n <div class=\"chapter\">Chapter 4<\/div><h2>THE FINAL RIDDLE<\/h2>\n <div class=\"grid2\" style=\"align-items:center\">\n <div class=\"scene-art\" style=\"min-height:430px;background:radial-gradient(circle,#173047,#03080c 72%)\">\n <div style=\"position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:25px\">\n <div><div style=\"font-size:4rem\">\ud83d\udcbb<\/div><h2 style=\"color:white\">\u201cI disappear as soon as you say my name.\u201d<\/h2><\/div>\n <\/div>\n <\/div>\n <div class=\"card\">\n <p class=\"lead\">Type the answer in English or French.<\/p>\n <input id=\"riddleAnswer\" class=\"code-input\" style=\"letter-spacing:2px\" placeholder=\"answer\">\n <div id=\"riddleFeedback\"><\/div>\n <div class=\"actions\"><button class=\"primary\" onclick=\"checkRiddle()\">DECRYPT COMPUTER<\/button><\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"8\">\n<div class=\"wrap\">\n <div class=\"chapter\">Final file<\/div><h2>EMMA\u2019S ARTICLE<\/h2>\n <article class=\"article\">\n <h2>Inside Gotham Laboratory: The Experiments They Tried to Hide<\/h2>\n <p class=\"byline\">By Emma Lightwood \u2014 Investigative Desk<\/p>\n <p>Documents, scientific records and witness testimony indicate that restricted chemical experiments were conducted inside Gotham Laboratory. Official statements denied any abnormal event, but verified university records and internal logs contradict that account.<\/p>\n <p>The evidence must be handled responsibly. Identifying details concerning victims and vulnerable individuals have been removed while the public-interest findings remain intact.<\/p>\n <p><b>Editor\u2019s note:<\/b> Publication requires a final confirmation from the investigation team.<\/p>\n <\/article>\n <div class=\"actions\" style=\"justify-content:center\"><button class=\"success\" style=\"font-size:1.3rem;padding:20px 34px\" onclick=\"publishArticle()\">PUBLISH THE TRUTH<\/button><\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"9\">\n<div class=\"wrap\" style=\"text-align:center;align-items:center\">\n <div class=\"chapter\">Case closed<\/div><h1 id=\"endingTitle\">ARTICLE PUBLISHED<\/h1>\n <p class=\"lead\" id=\"endingText\">Emma\u2019s investigation has reached the public.<\/p>\n <div class=\"card\" style=\"width:min(760px,100%)\">\n <div class=\"grid3\">\n <div><div style=\"font-size:2rem\">\u23f1\ufe0f<\/div><b>TIME LEFT<\/b><p id=\"finalTime\"><\/p><\/div>\n <div><div style=\"font-size:2rem\">\ud83d\udd0e<\/div><b>CLUES FOUND<\/b><p id=\"finalClues\"><\/p><\/div>\n <div><div style=\"font-size:2rem\">\ud83d\udca1<\/div><b>HINTS USED<\/b><p id=\"finalHints\"><\/p><\/div>\n <\/div>\n <\/div>\n <div class=\"actions\"><button class=\"primary\" onclick=\"location.reload()\">PLAY AGAIN<\/button><button class=\"secondary\" onclick=\"print()\">PRINT RESULT<\/button><\/div>\n<\/div>\n<\/section>\n\n<div class=\"modal\" id=\"modal\"><div class=\"modalbox\"><div id=\"modalContent\"><\/div><div class=\"actions\"><button class=\"secondary\" onclick=\"closeModal()\">CLOSE<\/button><\/div><\/div><\/div>\n<div class=\"toast\" id=\"toast\"><\/div>\n<\/div>\n\n<script>\nconst S={\n scene:0,time:2700,timer:null,hints:3,started:false,selectedSources:new Set(),factCheckPassed:false,order:[],\n clues:[],phone:'',usedHints:0\n};\nconst sourceData=[\n ['A','Government press office','\u201cNothing abnormal occurred inside the research centre.\u201d'],\n ['B','Passer-by testimony','\u201cI saw strange lights and evacuations during the night.\u201d'],\n ['C','Interview with a doctor','\u201cAll our experiments are strictly controlled and safe.\u201d'],\n ['D','Social media post','\u201cThey are hiding something. My cousin works there. #TRUTH\u201d'],\n ['E','Official university report','A signed scientific report with named authors and methods.'],\n ['F','Unknown email','\u201cBelieve me. I know what happened. You are being lied to.\u201d']\n];\nconst testimonyData=[\n ['1','Driver returning home','\u201cThe firefighters arrived very quickly.\u201d'],\n ['2','Local farmer','\u201cAround midnight, a huge explosion from the laboratory drew the neighbourhood\u2019s attention.\u201d'],\n ['3','Farmer\u2019s wife','\u201cAt around 11 p.m., I saw three masked men near a white van.\u201d'],\n ['4','Firefighter','\u201cAfter entering, we discovered a large quantity of chemical products.\u201d']\n];\nfunction tone(freq=440,d=.08,type='sine'){\n try{const a=new(window.AudioContext||window.webkitAudioContext)(),o=a.createOscillator(),g=a.createGain();o.type=type;o.frequency.value=freq;o.connect(g);g.connect(a.destination);g.gain.setValueAtTime(.04,a.currentTime);g.gain.exponentialRampToValueAtTime(.001,a.currentTime+d);o.start();o.stop(a.currentTime+d)}catch(e){}\n}\nfunction showScene(n,title,text){\n document.querySelectorAll('.scene').forEach(x=>x.classList.toggle('active',+x.dataset.scene===n));\n S.scene=n;document.getElementById('progressBar').style.width=(Math.min(n,8)\/8*100)+'%';\n if(title)document.getElementById('missionTitle').textContent=title;\n if(text)document.getElementById('missionText').textContent=text;\n window.scrollTo(0,0);tone(520,.1,'triangle')\n}\nasync function startGame(){\n initGameUI();\n S.started=true;\n await enterFullscreen();\n if(!S.timer)S.timer=setInterval(tick,1000);\n showScene(1,'VERIFY THE SOURCES','Find the reliable evidence and unlock the secret room.');\n}\nfunction tick(){S.time--;document.getElementById('timer').textContent=fmt(S.time);if(S.time<=0){clearInterval(S.timer);endFailure()}}\nfunction fmt(s){s=Math.max(0,s);return String(Math.floor(s\/60)).padStart(2,'0')+':'+String(s%60).padStart(2,'0')}\nfunction toast(msg){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2200)}\nfunction addClue(c){if(!S.clues.includes(c)){S.clues.push(c);toast('CASE FILE UPDATED: '+c)}}\nfunction renderSources(){\n const box=document.getElementById('eljSources');\n if(!box)return false;\n \/\/ The cards are written directly in the HTML so WordPress cannot lose them\n \/\/ when it moves or delays the script. This fallback rebuilds them only if needed.\n if(box.querySelector('.source'))return true;\n sourceData.forEach(([l,t,b])=>{\n const d=document.createElement('button');\n d.type='button';d.className='source';d.dataset.letter=l;\n d.innerHTML=`<span class=\"letter\">${l}<\/span><span><b>${t}<\/b><br><span class=\"muted\">${b}<\/span><\/span>`;\n d.addEventListener('click',()=>toggleSource(d));box.appendChild(d)\n });\n return true;\n}\nfunction getSelectedSourceLetters(){\n return [...document.querySelectorAll('#eljSources .source')]\n .filter(x=>x.classList.contains('selected') || x.getAttribute('aria-pressed')==='true' || x.dataset.selected==='true')\n .map(x=>String(x.dataset.letter||'').trim().toUpperCase()).filter(Boolean).sort();\n}\nfunction updateSourceSelectionUI(){\n const letters=getSelectedSourceLetters(),label=document.getElementById('sourceLetters'),btn=document.getElementById('factCheckBtn');\n if(label)label.textContent=letters.length?letters.join('-'):'---';\n if(btn){const ready=letters.join('')==='ACE';btn.classList.toggle('ready',ready);btn.textContent=S.factCheckPassed?'UNLOCK SECRET ROOM':(ready?'REVEAL PASSWORD':'RUN FACT-CHECK');btn.dataset.mode=S.factCheckPassed?'unlock':'verify'}\n}\nfunction clearSourceResult(){\n const fb=document.getElementById('sourceFeedback'),code=document.getElementById('roomCode'),panel=document.getElementById('passwordReveal');\n document.querySelectorAll('#eljSources .source').forEach(x=>x.classList.remove('correct','wrong'));S.factCheckPassed=false;\n if(fb)fb.innerHTML='';if(code){code.value='';code.placeholder='\u2022\u2022\u2022\u2022'}\n if(panel){panel.classList.add('hidden');panel.style.setProperty('display','none','important');panel.dataset.revealed='false';panel.setAttribute('aria-hidden','true')}\n updateSourceSelectionUI();\n}\nfunction showPasswordPopup(){\n const modalContent=document.getElementById('modalContent');if(!modalContent)return;\n modalContent.innerHTML=`<div class=\"password-popup\"><div class=\"eyebrow\">\u2713 FACT-CHECK SUCCESSFUL<\/div><h2>PASSWORDS RECOVERED<\/h2><p>The three reliable sources reveal Emma's access information.<\/p><div class=\"code-card\"><span class=\"code-caption\">Validated source password<\/span><strong class=\"code-big sources\">A-C-E<\/strong><\/div><div class=\"code-card\"><span class=\"code-caption\">Secret room access code<\/span><strong class=\"code-big\">1104<\/strong><\/div><button type=\"button\" class=\"continue-code\" id=\"popupUseCode\">USE CODE 1104<\/button><\/div>`;\n document.getElementById('popupUseCode')?.addEventListener('click',acceptRoomCode,{once:true});openModal();\n}\nfunction revealSourcePasswords(showPopup=true){\n if(getSelectedSourceLetters().join('')!=='ACE')return false;S.selectedSources=new Set(getSelectedSourceLetters());S.factCheckPassed=true;\n document.querySelectorAll('#eljSources .source').forEach(x=>{x.classList.remove('wrong');if('ACE'.includes(x.dataset.letter))x.classList.add('correct')});\n const fb=document.getElementById('sourceFeedback'),code=document.getElementById('roomCode'),panel=document.getElementById('passwordReveal');\n if(panel){panel.classList.remove('hidden');panel.style.setProperty('display','block','important');panel.dataset.revealed='true';panel.setAttribute('aria-hidden','false')}\n if(fb)fb.innerHTML='<p class=\"ok\" style=\"margin:12px 0 0;font-weight:900\">\u2713 PASSWORD FOUND: <b>A-C-E<\/b> \u2014 ACCESS CODE: <b>1104<\/b><\/p>';\n if(code){code.placeholder='TYPE 1104';code.value=''}addClue('Verified sources: A-C-E');toast('PASSWORD FOUND \u2014 A-C-E \/ 1104');updateSourceSelectionUI();if(showPopup)showPasswordPopup();\n setTimeout(()=>panel?.scrollIntoView({behavior:'smooth',block:'center'}),80);return true;\n}\nfunction acceptRoomCode(){const code=document.getElementById('roomCode');if(code)code.value='1104';closeModal();const fb=document.getElementById('sourceFeedback');if(fb)fb.innerHTML='<p class=\"ok\" style=\"margin-top:12px;font-weight:900\">Code <b>1104<\/b> inserted. Click <b>UNLOCK SECRET ROOM<\/b>.<\/p>';updateSourceSelectionUI();document.getElementById('factCheckBtn')?.focus();tone(720,.08,'triangle')}\nfunction useRoomCode(){acceptRoomCode()}\nfunction toggleSource(el){\n const selected=el.classList.contains('selected')||el.getAttribute('aria-pressed')==='true';\n if(selected){el.classList.remove('selected');el.setAttribute('aria-pressed','false');el.dataset.selected='false'}\n else{if(getSelectedSourceLetters().length>=3)return toast('Select exactly three sources.');el.classList.add('selected');el.setAttribute('aria-pressed','true');el.dataset.selected='true'}\n clearSourceResult();S.selectedSources=new Set(getSelectedSourceLetters());updateSourceSelectionUI();tone(650,.05)\n}\nfunction checkSources(){\n const letters=getSelectedSourceLetters(),picked=letters.join(''),codeEl=document.getElementById('roomCode'),code=(codeEl?.value||'').replace(\/\\D\/g,''),fb=document.getElementById('sourceFeedback'),panel=document.getElementById('passwordReveal');\n S.selectedSources=new Set(letters);document.querySelectorAll('#eljSources .source').forEach(x=>x.classList.remove('correct','wrong'));updateSourceSelectionUI();\n if(letters.length!==3){if(fb)fb.innerHTML='<p class=\"error\">Select exactly three sources before running the fact-check.<\/p>';return tone(110,.25,'sawtooth')}\n if(picked!=='ACE'){S.factCheckPassed=false;document.querySelectorAll('#eljSources .source.selected').forEach(x=>x.classList.add('wrong'));if(panel){panel.classList.add('hidden');panel.style.setProperty('display','none','important');panel.dataset.revealed='false'}if(fb)fb.innerHTML='<p class=\"error\">ERROR \u2014 at least one selected source is not reliable enough. Try again.<\/p>';updateSourceSelectionUI();return tone(110,.25,'sawtooth')}\n if(!S.factCheckPassed||panel?.dataset.revealed!=='true'){revealSourcePasswords(true);return}\n if(code!=='1104'){if(panel){panel.classList.remove('hidden');panel.style.setProperty('display','block','important')}if(fb)fb.innerHTML='<p class=\"error\" style=\"margin-top:12px\">Enter or use the displayed access code <b>1104<\/b>, then click <b>UNLOCK SECRET ROOM<\/b>.<\/p>';setTimeout(()=>panel?.scrollIntoView({behavior:'smooth',block:'center'}),60);return tone(150,.18,'square')}\n if(fb)fb.innerHTML='<p class=\"ok\" style=\"font-weight:900\">ACCESS GRANTED \u2014 secret archive unlocked.<\/p>';setTimeout(()=>showScene(2,'ORDER THE TESTIMONIES','Reconstruct the night of the incident.'),500)\n}\nfunction renderTestimonies(){\n const box=document.getElementById('testimonies');\n if(!box)return false;\n if(box.querySelector('.testimony'))return true;\n testimonyData.forEach(([n,w,q],i)=>{const d=document.createElement('button');d.type='button';d.className='testimony';d.style.transform=`rotate(${[-2,2,1,-1][i]}deg)`;d.dataset.n=n;d.innerHTML=`<b>TESTIMONY ${n}<\/b><p>${w}<\/p><p>${q}<\/p>`;d.onclick=()=>chooseTestimony(d);box.appendChild(d)});\n return true;\n}\nfunction chooseTestimony(d){if(S.order.includes(d.dataset.n))return;S.order.push(d.dataset.n);d.classList.add('active');renderOrder();tone(700,.06)}\nfunction renderOrder(){document.getElementById('orderStrip').innerHTML=S.order.map(n=>`<span class=\"order-token\">${n}<\/span>`).join('')}\nfunction resetOrder(){S.order=[];document.querySelectorAll('.testimony').forEach(x=>x.classList.remove('active'));renderOrder()}\nfunction checkOrder(){if(S.order.join('')==='3214'){addClue('Timeline code: 3214');toast('Sequence confirmed: 3-2-1-4. Find the drawer labelled 3214.');setTimeout(()=>showScene(3,'FIND THE CORRECT DRAWER','Match the timeline code 3214 with a drawer label.'),900)}else{toast('The sequence is inconsistent. Start with the event at 11 p.m., then midnight.');tone(120,.2,'square')}}\nfunction openDrawer(n){\n const r=document.getElementById('drawerResult');\n if(n===2){\n r.className='card drawer-result-success';\n r.innerHTML='<h3 class=\"ok\">\u2713 DRAWER 2 OPEN \u2014 CORRECT<\/h3><p>You matched the timeline code <b>3214<\/b>.<\/p><p>Inside the drawer, you find this telephone number:<\/p><div class=\"recovered-number\">20 420 666<\/div><p><b>Keep this number:<\/b> you must dial it in the next step.<\/p><button type=\"button\" class=\"success continue-call\" onclick=\"goToPhoneMission()\">CONTINUE TO THE SECURE PHONE \u2192<\/button>';\n addClue('Informant number: 20 420 666');\n r.scrollIntoView({behavior:'smooth',block:'center'});\n tone(760,.16,'triangle');\n }else{\n r.className='card';\n r.innerHTML='<h3 class=\"error\">EMPTY DRAWER<\/h3><p>This label does not match the timeline code <b>3214<\/b>. Try another drawer.<\/p>';\n tone(100,.18,'square');\n }\n}\nfunction goToPhoneMission(){\n phoneClear();\n const st=document.getElementById('callStatus');\n if(st)st.innerHTML='';\n showScene(4,'CALL THE INFORMANT','Enter the number from Drawer 2, then press CALL.');\n}\nfunction renderKeypad(){const k=document.getElementById('keypad');if(!k)return false;if(k.querySelector('.key'))return true;['1','2','3','4','5','6','7','8','9','*','0','#'].forEach(n=>{const b=document.createElement('button');b.type='button';b.className='key';b.textContent=n;b.onclick=()=>phoneKey(n);k.appendChild(b)});return true}\nfunction formatPhoneNumber(value){\n const digits=String(value||'').replace(\/\\D\/g,'').slice(0,8);\n if(digits.length<=2)return digits;\n if(digits.length<=5)return digits.slice(0,2)+' '+digits.slice(2);\n return digits.slice(0,2)+' '+digits.slice(2,5)+' '+digits.slice(5);\n}\nfunction renderPhoneNumber(){\n const display=document.getElementById('phoneDisplay');\n if(display)display.textContent=formatPhoneNumber(S.phone);\n}\nfunction phoneKey(n){\n if(!\/\\d\/.test(n))return toast('Use digits only for this telephone number.');\n if(S.phone.length<8){S.phone+=n;renderPhoneNumber();tone(380+Number(n)*25,.06)}\n}\nfunction phoneClear(){S.phone='';renderPhoneNumber()}\nfunction autoFillPhone(){\n S.phone='20420666';\n renderPhoneNumber();\n const st=document.getElementById('callStatus');\n if(st)st.innerHTML='<p class=\"ok\">\u2713 Number ready. Now press <b>CALL<\/b>.<\/p>';\n tone(700,.1,'triangle');\n}\nfunction callNumber(){\n const st=document.getElementById('callStatus');\n const entered=S.phone.replace(\/\\D\/g,'');\n if(entered==='20420666'){\n st.innerHTML='<p class=\"ok\"><b>CONNECTED.<\/b> The informant is answering\u2026<\/p>';\n tone(780,.3);\n setTimeout(showCall,700);\n }else{\n const shown=formatPhoneNumber(entered)||'no number';\n st.innerHTML='<p class=\"error\"><b>NUMBER UNREACHABLE.<\/b><br>You entered: '+shown+'.<br>Check the recovered card and enter all eight digits: <b>2 0 4 2 0 6 6 6<\/b>.<\/p>';\n tone(90,.35,'sawtooth');\n }\n}\nfunction showCall(){\n addClue('Gotham Laboratory connection');\n document.getElementById('modalContent').innerHTML=`<h2>THE INFORMANT<\/h2><p class=\"lead\">\u201cEmma was investigating Gotham Laboratory. She found records of chemical experiments involving kidnapped infants and forced mutations. I worked there. I gave her the process logs and the list of chemicals.\u201d<\/p><p class=\"lead\">\u201cShe said she would hide them in a safe place \u2014 somewhere protected or concealed. I have already said too much.\u201d<\/p><p class=\"error\"><b>CALL TERMINATED.<\/b><\/p><button class=\"primary\" onclick=\"closeModal();showScene(5,'SEARCH THE SECRET ROOM','Find Emma\u2019s concealed briefcase.')\">SEARCH THE ROOM<\/button>`;\n openModal()\n}\nfunction liftBoard(){document.getElementById('briefcase').classList.add('visible');addClue('Hidden briefcase');toast('A metal briefcase was concealed beneath the floor.')}\nfunction openBriefcase(){showScene(6,'DECODE THE BRIEFCASE','Find the eight-digit date hidden in Emma\u2019s office.')}\nfunction checkBirthCode(){\n const v=document.getElementById('birthCode').value.replace(\/\\D\/g,''),f=document.getElementById('birthFeedback');\n if(v==='17051991'){f.innerHTML='<p class=\"ok\">BRIEFCASE UNLOCKED.<\/p>';addClue('Emma\u2019s birth date: 17\/05\/1991');setTimeout(()=>showScene(7,'SOLVE THE FINAL RIDDLE','Decrypt Emma\u2019s last computer.'),800)}\n else{f.innerHTML='<p class=\"error\"><b>INCORRECT DATE.<\/b> Read the highlighted date of birth on the archived profile, then type it without slashes in DDMMYYYY format.<\/p>';tone(100,.2,'square')}\n}\nfunction checkRiddle(){\n const a=document.getElementById('riddleAnswer').value.trim().toLowerCase(),f=document.getElementById('riddleFeedback');\n if(['silence','the silence','le silence'].includes(a)){f.innerHTML='<p class=\"ok\">DECRYPTION COMPLETE.<\/p>';addClue('Final password: SILENCE');setTimeout(()=>showScene(8,'MAKE THE FINAL DECISION','Read and publish Emma\u2019s completed investigation.'),800)}\n else{f.innerHTML='<p class=\"error\">The answer disappears when spoken.<\/p>';tone(100,.2,'square')}\n}\nfunction publishArticle(){clearInterval(S.timer);tone(880,.5,'triangle');showScene(9);document.getElementById('finalTime').textContent=fmt(S.time);document.getElementById('finalClues').textContent=S.clues.length;document.getElementById('finalHints').textContent=S.usedHints}\nfunction endFailure(){showScene(9);document.getElementById('endingTitle').textContent='THE DEADLINE EXPIRED';document.getElementById('endingText').textContent='Emma\u2019s article remained hidden. Restart the case and follow the evidence more efficiently.';document.getElementById('finalTime').textContent='00:00';document.getElementById('finalClues').textContent=S.clues.length;document.getElementById('finalHints').textContent=S.usedHints}\nfunction hint(){\n if(!S.started)return toast('Start the investigation first.');\n if(S.hints<=0)return toast('No hints remaining.');\n S.hints--;S.usedHints++;document.getElementById('hints').textContent=S.hints;\n const h={1:'Choose sources with identifiable responsibility, expertise or documented methods. The room code is 1104.',\n 2:'The masked men were seen at 23:00, before the midnight explosion.',\n 3:'The sequence 3214 points directly to Drawer 2.',\n 4:'Dial 20 420 666 without spaces.',\n 5:'Inspect the loose floorboard.',\n 6:'Look at the yellow DATE OF BIRTH card on the archived profile: 17\/05\/1991. Type it without slashes: 17051991.',\n 7:'What vanishes when its name is spoken?',\n 8:'The investigation is complete. Publish the article.'};\n toast(h[S.scene]||'Inspect every visible detail.')\n}\nfunction showInventory(){\n const items=['Verified sources','Timeline reconstructed','Informant contacted','Hidden briefcase','Birth date decoded','Final computer decrypted'];\n document.getElementById('modalContent').innerHTML='<h2>CASE FILE<\/h2><div class=\"inventory\">'+items.map((x,i)=>`<div class=\"item ${i<S.clues.length?'':'locked'}\">${i<S.clues.length?'\u2713':'\ud83d\udd12'} ${x}<\/div>`).join('')+'<\/div><h3>Recovered clues<\/h3><ul>'+S.clues.map(x=>'<li>'+x+'<\/li>').join('')+'<\/ul>';\n openModal()\n}\nfunction openModal(){document.getElementById('modal').classList.add('open')}function closeModal(){document.getElementById('modal').classList.remove('open')}\n\nfunction fullscreenElement(){return document.fullscreenElement||document.webkitFullscreenElement||null}\nasync function enterFullscreen(){const game=document.getElementById('game');if(!game)return;try{if(fullscreenElement()===game)return;if(game.requestFullscreen)await game.requestFullscreen({navigationUI:'hide'});else if(game.webkitRequestFullscreen)game.webkitRequestFullscreen();else throw new Error('Fullscreen unavailable')}catch(e){game.classList.add('immersive');document.body.classList.add('game-locked')}syncFullscreenUI();game.scrollTop=0}\nasync function exitFullscreen(){const game=document.getElementById('game');try{if(document.fullscreenElement&&document.exitFullscreen)await document.exitFullscreen();else if(document.webkitFullscreenElement&&document.webkitExitFullscreen)document.webkitExitFullscreen()}catch(e){}game?.classList.remove('immersive');document.body.classList.remove('game-locked');syncFullscreenUI()}\nasync function toggleFullscreen(){const game=document.getElementById('game'),active=fullscreenElement()===game||game?.classList.contains('immersive');if(active)await exitFullscreen();else await enterFullscreen()}\nfunction syncFullscreenUI(){const game=document.getElementById('game'),active=fullscreenElement()===game||!!game?.classList.contains('immersive');document.body.classList.toggle('is-fullscreen',active);const btn=document.getElementById('fullscreenBtn');if(btn)btn.textContent=active?'\u26f6 EXIT FULL SCREEN':'\u26f6 FULL SCREEN'}\ndocument.addEventListener('fullscreenchange',syncFullscreenUI);document.addEventListener('webkitfullscreenchange',syncFullscreenUI);document.addEventListener('keydown',e=>{if(e.key==='Escape'&&document.getElementById('game')?.classList.contains('immersive'))exitFullscreen()});\nfunction initGameUI(attempt=0){\n const game=document.getElementById('game');if(!game){if(attempt<30)setTimeout(()=>initGameUI(attempt+1),100);return}\n renderSources();renderTestimonies();renderKeypad();\n document.querySelectorAll('#eljSources .source').forEach(btn=>{btn.removeAttribute('onclick');if(btn.dataset.bound!=='true'){btn.dataset.bound='true';btn.setAttribute('aria-pressed',btn.classList.contains('selected')?'true':'false');btn.addEventListener('click',()=>toggleSource(btn))}});\n const fact=document.getElementById('factCheckBtn');if(fact&&fact.dataset.bound!=='true'){fact.dataset.bound='true';fact.removeAttribute('onclick');fact.addEventListener('click',checkSources)}\n const room=document.getElementById('roomCode');if(room&&room.dataset.bound!=='true'){room.dataset.bound='true';room.addEventListener('keydown',e=>{if(e.key==='Enter')checkSources()})}\n updateSourceSelectionUI();syncFullscreenUI();\n}\nif(document.readyState==='loading'){\n document.addEventListener('DOMContentLoaded',()=>initGameUI(),{once:true});\n}else{\n setTimeout(()=>initGameUI(),0);\n}\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,viewport-fit=cover\">\n<title>Emma Lightwood: The Missing Article<\/title>\n<style>\n:root{\n --bg:#05090d;--panel:#0d1822;--panel2:#132432;--ink:#ecf5f7;--muted:#9db0ba;\n --cyan:#55d7f2;--green:#57d37b;--red:#ff5d64;--amber:#f4bc54;--paper:#dfd2b8;\n --shadow:0 20px 60px #000b;\n}\n*{box-sizing:border-box}\nhtml,body{margin:0;width:100%;height:100%;overflow:hidden;background:#020508;color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif}\nbutton,input{font:inherit}\nbutton{cursor:pointer}\n#game{position:fixed;inset:0;background:\n radial-gradient(circle at 20% 15%,#173047 0,transparent 28%),\n radial-gradient(circle at 85% 80%,#2d1717 0,transparent 28%),\n linear-gradient(145deg,#050a0f,#020407 65%);overflow:hidden}\n.scanlines{pointer-events:none;position:absolute;inset:0;z-index:100;background:repeating-linear-gradient(0deg,transparent 0 3px,#ffffff08 4px);mix-blend-mode:screen}\n.vignette{pointer-events:none;position:absolute;inset:0;z-index:99;box-shadow:inset 0 0 150px #000}\n.hud{position:absolute;z-index:50;left:0;right:0;top:0;height:74px;display:flex;align-items:center;gap:14px;padding:10px 18px;background:linear-gradient(#07111aee,#07111aaa);border-bottom:1px solid #315066;backdrop-filter:blur(8px)}\n.logo{font-family:Georgia,serif;font-weight:900;letter-spacing:3px;white-space:nowrap}.logo b{color:var(--red)}\n.mission{font-size:.78rem;color:var(--muted);min-width:160px}.mission strong{display:block;color:var(--cyan);font-size:.95rem}\n.progress{height:8px;flex:1;border:1px solid #385063;border-radius:20px;overflow:hidden;background:#0a1117}\n.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fa2c5,#5ee1ff);transition:.5s}\n.timer{font-family:ui-monospace,monospace;color:#ff746f;font-weight:900;font-size:1.25rem}\n.iconbtn{border:1px solid #416178;background:#102231;color:white;border-radius:8px;padding:9px 11px}\n.scene{position:absolute;inset:74px 0 0;display:none;overflow:auto;padding:clamp(14px,2.5vw,34px)}\n.scene.active{display:block;animation:sceneIn .45s ease}\n@keyframes sceneIn{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}\n.wrap{max-width:1280px;margin:auto;min-height:100%;display:flex;flex-direction:column;justify-content:center}\n.chapter{display:inline-flex;align-items:center;gap:10px;color:var(--cyan);font-weight:900;letter-spacing:2px;text-transform:uppercase}\n.chapter:before{content:\"\";width:38px;height:2px;background:var(--cyan)}\nh1{font-family:Georgia,serif;font-size:clamp(2.4rem,7vw,6.5rem);line-height:.92;margin:.2em 0;letter-spacing:2px;text-shadow:0 8px 25px #000}\nh2{font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,3.4rem);margin:.25em 0;color:#dff8ff}\np{line-height:1.55}.lead{font-size:clamp(1.05rem,2vw,1.35rem);max-width:760px}\n.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}\n.card{background:linear-gradient(145deg,#122432ee,#071019ee);border:1px solid #355164;border-radius:14px;padding:18px;box-shadow:var(--shadow)}\n.glass{background:#0a151dcc;backdrop-filter:blur(10px)}\n.primary,.secondary,.danger,.success{border-radius:9px;padding:13px 18px;font-weight:900;letter-spacing:.8px;color:white;border:1px solid #678092;box-shadow:0 8px 20px #0007}\n.primary{background:linear-gradient(#174862,#102d40)}.secondary{background:#17242d}.danger{background:linear-gradient(#9c302e,#671817)}.success{background:linear-gradient(#248c43,#155c2b)}\n.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}\n.scene-art{position:relative;min-height:520px;border:1px solid #415a6d;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:#071019}\n.office{background:\n linear-gradient(#09131cab,#02070ccc),\n linear-gradient(90deg,#18242c 0 3%,transparent 3% 97%,#18242c 97%),\n repeating-linear-gradient(90deg,#1b2a34 0 130px,#0b151d 131px 138px)}\n.office:before{content:\"\";position:absolute;left:6%;right:6%;top:7%;height:44%;background:repeating-linear-gradient(90deg,#293942 0 110px,#1a272e 112px 118px);clip-path:polygon(0 0,100% 0,98% 95%,2% 100%);opacity:.7}\n.desk{position:absolute;left:8%;right:8%;bottom:5%;height:31%;background:linear-gradient(#5b3d29,#2e1a11);clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);box-shadow:0 -8px 20px #0008}\n.monitor{position:absolute;left:23%;top:19%;width:53%;height:50%;background:#061017;border:10px solid #1b2227;border-radius:10px;box-shadow:0 0 40px #5de0ff2b}\n.monitor-screen{position:absolute;inset:15px;padding:22px;background:radial-gradient(circle at 50% 45%,#16324b,#050b10 70%);overflow:hidden}\n.monitor-screen:after{content:\"EMMA LIGHTWOOD \u00b7 17\/05\/1991\";position:absolute;right:10px;bottom:7px;color:#6e8b9c;font:11px monospace}\n.keyboard{position:absolute;left:28%;bottom:12%;width:44%;height:8%;background:repeating-linear-gradient(90deg,#1b2227 0 14px,#3a454d 15px 16px);transform:perspective(300px) rotateX(55deg)}\n.note{position:absolute;background:#eadfbf;color:#231d15;padding:14px;box-shadow:8px 10px 15px #0008;transform:rotate(-3deg);font-family:\"Courier New\",monospace}\n.note.pin{top:10%;left:7%;width:170px}.note.red{background:#e9c9bf;transform:rotate(4deg)}\n.source-grid{display:grid!important;visibility:visible!important;opacity:1!important;min-height:1px}.source{position:relative;display:flex!important;visibility:visible!important;opacity:1!important;width:100%;min-height:112px;gap:14px;align-items:flex-start;padding:15px;border:1px solid #435b6c;border-radius:10px;background:#0c1923;color:var(--ink);text-align:left;transition:.2s;-webkit-appearance:none;appearance:none}\n.source:hover{transform:translateY(-2px);border-color:#7ab9d1}\n.source.selected{outline:3px solid var(--cyan)}.source.correct{outline:3px solid var(--green)}.source.wrong{outline:3px solid var(--red)}\n.letter{display:grid;place-items:center;min-width:38px;height:38px;border-radius:50%;background:#18384d;color:#bdefff;font-weight:900}\n.terminal{background:#02090d;border:1px solid #2f5c6b;border-radius:10px;padding:14px;font-family:ui-monospace,monospace;color:#83e6a2;box-shadow:inset 0 0 30px #000}\n.code-input{background:#01070a;border:1px solid #3e6775;color:#7ff5a3;padding:13px;font-size:1.2rem;border-radius:7px;letter-spacing:5px;width:min(280px,100%);text-align:center}\n.wall{min-height:500px;background:\n linear-gradient(#111820cc,#111820cc),\n repeating-linear-gradient(90deg,#5c3925 0 12px,#422719 13px 15px);position:relative}\n.testimony{background:var(--paper);color:#221c16;padding:16px;border-radius:2px;box-shadow:8px 10px 15px #0008;min-height:145px;position:relative;transition:.2s}\n.testimony:before{content:\"\u25cf\";position:absolute;top:-12px;left:50%;color:#bb2525;font-size:24px}\n.testimony.active{outline:4px solid var(--amber);transform:rotate(0)!important}\n.order-strip{display:flex;gap:10px;flex-wrap:wrap;min-height:65px;padding:10px;border:2px dashed #63717a;border-radius:9px}\n.order-token{padding:12px 16px;border-radius:8px;background:#172b39;border:1px solid #5c7180;font-weight:900}\n.drawers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}\n.drawer{min-height:125px;background:linear-gradient(#514234,#27201b);border:6px solid #211a16;border-radius:5px;color:#e5d8b9;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 25px #0008}\n.drawer:hover{filter:brightness(1.2)}.handle{width:46px;height:10px;border:2px solid #a88955;border-radius:10px;margin:9px}\n.phone{width:min(340px,100%);margin:auto;background:linear-gradient(#1c2730,#080d11);padding:22px;border:1px solid #52616b;border-radius:28px;box-shadow:var(--shadow)}\n.phone-display{background:#a6c7a0;color:#173018;padding:14px;border-radius:7px;font:1.4rem ui-monospace,monospace;text-align:right;min-height:55px}\n.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.key{padding:14px;border-radius:50%;background:#273742;color:white;border:1px solid #5a6a74;font-weight:900}\n.room{position:relative;min-height:550px;background:\n linear-gradient(#061019aa,#020609dd),\n linear-gradient(25deg,#132838,#070b0e);border:1px solid #324653;border-radius:14px;overflow:hidden}\n.floor{position:absolute;left:0;right:0;bottom:0;height:42%;background:repeating-linear-gradient(90deg,#5b4633 0 70px,#38291e 72px 75px);transform-origin:bottom;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%)}\n.boardwall{position:absolute;left:6%;top:8%;width:42%;height:45%;background:#4f3724;border:9px solid #2c1e15;box-shadow:0 10px 20px #0008}\n.floorboard{position:absolute;left:55%;bottom:9%;width:170px;height:62px;background:#6a5038;border:2px solid #8e6b48;transform:rotate(-4deg);box-shadow:0 10px 15px #0008}\n.floorboard:hover{filter:brightness(1.4)}\n.briefcase{position:absolute;right:8%;bottom:17%;width:190px;height:125px;background:linear-gradient(#30363a,#11171b);border:5px solid #090c0e;border-radius:9px;box-shadow:0 15px 25px #000;display:none}\n.briefcase.visible{display:block;animation:pop .4s}@keyframes pop{from{transform:scale(.7);opacity:0}}\n.lock{position:absolute;left:42%;top:43%;width:35px;height:25px;background:#c79a3c;border-radius:4px}\n.article{background:#f0eadc;color:#171717;padding:clamp(18px,4vw,45px);max-width:850px;margin:auto;border-radius:4px;box-shadow:var(--shadow);font-family:Georgia,serif}\n.article h2{color:#111;font-family:Georgia,serif}.article .byline{color:#666;border-bottom:1px solid #999;padding-bottom:15px}\n.inventory{display:flex;gap:9px;flex-wrap:wrap}.item{padding:8px 11px;border:1px solid #6e765b;border-radius:7px;background:#17232b;font-size:.85rem}.item.locked{opacity:.25;filter:grayscale(1)}\n.modal{position:fixed;z-index:200;inset:0;display:none;align-items:center;justify-content:center;padding:18px;background:#000d}.modal.open{display:flex}\n.modalbox{width:min(620px,100%);max-height:90vh;overflow:auto;background:linear-gradient(#132431,#081119);border:1px solid #5f7481;border-radius:14px;padding:22px;box-shadow:var(--shadow)}\n.toast{position:fixed;z-index:300;right:18px;bottom:18px;max-width:420px;padding:14px 18px;border-radius:10px;background:#132431;border:1px solid #6a7e8a;box-shadow:var(--shadow);display:none}.toast.show{display:block;animation:pop .2s}\n.error{color:var(--red)}.ok{color:var(--green)}.muted{color:var(--muted)}.hidden{display:none!important}\n:fullscreen, :-webkit-full-screen {\n width:100% !important;\n height:100% !important;\n margin:0 !important;\n padding:0 !important;\n background:#020508 !important;\n}\nhtml:fullscreen body, html:-webkit-full-screen body {\n width:100%;height:100%;margin:0;overflow:hidden;\n}\nbody.is-fullscreen #game{inset:0}\nbody.is-fullscreen .hud{padding-top:max(10px,env(safe-area-inset-top))}\n@media(max-width:820px){\n .grid2,.grid3{grid-template-columns:1fr}.hud{height:66px;padding:8px}.scene{inset:66px 0 0}.mission{display:none}.logo{font-size:.75rem}.timer{font-size:1rem}\n .scene-art{min-height:430px}.monitor{left:10%;width:80%}.drawers{grid-template-columns:repeat(2,1fr)}\n}\n<\/style>\n<\/head>\n<body>\n<div id=\"game\">\n<div class=\"scanlines\"><\/div><div class=\"vignette\"><\/div>\n<header class=\"hud\">\n <div class=\"logo\">LIGHTWOOD <b>FILES<\/b><\/div>\n <div class=\"mission\"><strong id=\"missionTitle\">CASE NOT STARTED<\/strong><span id=\"missionText\">Find Emma. Finish the investigation.<\/span><\/div>\n <div class=\"progress\"><i id=\"progressBar\"><\/i><\/div>\n <div class=\"timer\" id=\"timer\">45:00<\/div>\n <button class=\"iconbtn\" id=\"fullscreenBtn\" onclick=\"toggleFullscreen()\">\u26f6 FULL SCREEN<\/button>\n <button class=\"iconbtn\" onclick=\"showInventory()\">CASE FILE<\/button>\n <button class=\"iconbtn\" onclick=\"hint()\">HINT <span id=\"hints\">3<\/span><\/button>\n<\/header>\n\n<section class=\"scene active\" data-scene=\"0\">\n<div class=\"wrap\">\n <div class=\"grid2\" style=\"align-items:center\">\n <div>\n <div class=\"chapter\">Prologue<\/div>\n <h1>THE MISSING ARTICLE<\/h1>\n <p class=\"lead\">Investigative journalist <b>Emma Lightwood<\/b> vanished the night before publishing a major story. Her office was found unlocked. Her computer was still running.<\/p>\n <p class=\"lead\" style=\"color:#ff7f79\">\u201cIf you want the truth to be published, finish my investigation.\u201d<\/p>\n <div class=\"actions\"><button class=\"primary\" onclick=\"startGame()\">ENTER THE NEWSROOM<\/button><\/div>\n <\/div>\n <div class=\"scene-art office\">\n <div class=\"note pin\">DO NOT TRUST APPEARANCES.<\/div>\n <div class=\"monitor\"><div class=\"monitor-screen\"><h3 style=\"color:#6ee4ff\">EMMA_LIGHTWOOD \/\/ OFFLINE<\/h3><p style=\"font-family:monospace\">Last session interrupted.<br>4 encrypted stages detected.<br><br><span style=\"color:#ff6868\">FINISH THE INVESTIGATION.<\/span><\/p><\/div><\/div>\n <div class=\"desk\"><\/div><div class=\"keyboard\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"1\">\n<div class=\"wrap\">\n <div class=\"chapter\">Chapter 1<\/div><h2>DO NOT PUBLISH WITHOUT VERIFICATION<\/h2>\n <p class=\"lead\">Emma left six sources. Select the <b>three sources that are sufficiently reliable to verify further<\/b>.<\/p>\n <div class=\"grid3 source-grid\" id=\"eljSources\" aria-label=\"Sources to verify\">\n <button type=\"button\" class=\"source\" data-letter=\"A\" onclick=\"toggleSource(this)\">\n <span class=\"letter\">A<\/span><span><b>Government press office<\/b><br><span class=\"muted\">\u201cNothing abnormal occurred inside the research centre.\u201d<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"B\" onclick=\"toggleSource(this)\">\n <span class=\"letter\">B<\/span><span><b>Passer-by testimony<\/b><br><span class=\"muted\">\u201cI saw strange lights and evacuations during the night.\u201d<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"C\" onclick=\"toggleSource(this)\">\n <span class=\"letter\">C<\/span><span><b>Interview with a doctor<\/b><br><span class=\"muted\">\u201cAll our experiments are strictly controlled and safe.\u201d<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"D\" onclick=\"toggleSource(this)\">\n <span class=\"letter\">D<\/span><span><b>Social media post<\/b><br><span class=\"muted\">\u201cThey are hiding something. My cousin works there. #TRUTH\u201d<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"E\" onclick=\"toggleSource(this)\">\n <span class=\"letter\">E<\/span><span><b>Official university report<\/b><br><span class=\"muted\">A signed scientific report with named authors and methods.<\/span><\/span>\n <\/button>\n <button type=\"button\" class=\"source\" data-letter=\"F\" onclick=\"toggleSource(this)\">\n <span class=\"letter\">F<\/span><span><b>Unknown email<\/b><br><span class=\"muted\">\u201cBelieve me. I know what happened. You are being lied to.\u201d<\/span><\/span>\n <\/button>\n <\/div>\n <div class=\"card terminal\" style=\"margin-top:18px\">\n > selected_sources: <span id=\"sourceLetters\">—<\/span><br>\n > room_access_code: <input id=\"roomCode\" class=\"code-input\" maxlength=\"4\" inputmode=\"numeric\" placeholder=\"\u2022\u2022\u2022\u2022\">\n <div id=\"sourceFeedback\"><\/div>\n <\/div>\n <div class=\"actions\"><button class=\"primary\" onclick=\"checkSources()\">RUN FACT-CHECK<\/button><\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"2\">\n<div class=\"wrap\">\n <div class=\"chapter\">Chapter 2<\/div><h2>THE TESTIMONY WALL<\/h2>\n <p class=\"lead\">Put the witness statements in chronological order. Tap the cards in sequence.<\/p>\n <div class=\"wall card\">\n <div class=\"grid2\" id=\"testimonies\"><\/div>\n <\/div>\n <p><b>Your sequence:<\/b><\/p><div id=\"orderStrip\" class=\"order-strip\"><\/div>\n <div class=\"actions\"><button class=\"secondary\" onclick=\"resetOrder()\">RESET<\/button><button class=\"primary\" onclick=\"checkOrder()\">TEST SEQUENCE<\/button><\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"3\">\n<div class=\"wrap\">\n <div class=\"chapter\">Chapter 2 \u2014 continued<\/div><h2>THE ARCHIVE DRAWERS<\/h2>\n <p class=\"lead\">The correct testimony sequence identifies the drawer containing Emma\u2019s next lead.<\/p>\n <div class=\"drawers\">\n <button class=\"drawer\" onclick=\"openDrawer(1)\"><b>DRAWER 1<\/b><div class=\"handle\"><\/div><span>2341<\/span><\/button>\n <button class=\"drawer\" onclick=\"openDrawer(2)\"><b>DRAWER 2<\/b><div class=\"handle\"><\/div><span>3214<\/span><\/button>\n <button class=\"drawer\" onclick=\"openDrawer(3)\"><b>DRAWER 3<\/b><div class=\"handle\"><\/div><span>1234<\/span><\/button>\n <button class=\"drawer\" onclick=\"openDrawer(4)\"><b>DRAWER 4<\/b><div class=\"handle\"><\/div><span>2413<\/span><\/button>\n <\/div>\n <div id=\"drawerResult\" class=\"card\" style=\"margin-top:20px\">Choose a drawer.<\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"4\">\n<div class=\"wrap\">\n <div class=\"chapter\">Secure call<\/div><h2>CALL THE INFORMANT<\/h2>\n <div class=\"grid2\" style=\"align-items:center\">\n <div class=\"phone\">\n <div class=\"phone-display\" id=\"phoneDisplay\"><\/div>\n <div class=\"keypad\" id=\"keypad\"><\/div>\n <div class=\"actions\"><button class=\"danger\" onclick=\"phoneClear()\">CLEAR<\/button><button class=\"success\" onclick=\"callNumber()\">CALL<\/button><\/div>\n <\/div>\n <div class=\"card\">\n <h3>Recovered note<\/h3><p class=\"lead\">\u201cHe will answer only on the number hidden in the correct drawer.\u201d<\/p>\n <p class=\"muted\">Enter the number without spaces.<\/p>\n <div id=\"callStatus\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"5\">\n<div class=\"wrap\">\n <div class=\"chapter\">Search phase<\/div><h2>THE SECRET ROOM<\/h2>\n <p class=\"lead\">The informant said Emma hid the files somewhere \u201cwell protected\u201d or \u201cwell concealed.\u201d Search the room.<\/p>\n <div class=\"room\">\n <div class=\"boardwall\"><div class=\"note\" style=\"left:8%;top:10%\">GOTHAM LAB<br>CHEMICAL LOGS<\/div><div class=\"note red\" style=\"right:5%;bottom:8%\">WHERE WOULD YOU HIDE A CASE?<\/div><\/div>\n <div class=\"floor\"><\/div>\n <button class=\"floorboard\" onclick=\"liftBoard()\">LOOSE FLOORBOARD<\/button>\n <button class=\"briefcase\" id=\"briefcase\" onclick=\"openBriefcase()\"><span class=\"lock\"><\/span><\/button>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"6\">\n<div class=\"wrap\">\n <div class=\"chapter\">Chapter 3<\/div><h2>THE BRIEFCASE CODE<\/h2>\n <div class=\"grid2\" style=\"align-items:center\">\n <div class=\"card\">\n <p class=\"lead\">The briefcase requires an eight-digit password.<\/p>\n <blockquote class=\"note\" style=\"position:relative;left:auto;top:auto;width:auto;transform:none\">\u201cThe key is the day when my age began to count.\u201d<\/blockquote>\n <input id=\"birthCode\" class=\"code-input\" maxlength=\"8\" inputmode=\"numeric\" placeholder=\"DDMMYYYY\">\n <div id=\"birthFeedback\"><\/div>\n <div class=\"actions\"><button class=\"primary\" onclick=\"checkBirthCode()\">UNLOCK BRIEFCASE<\/button><\/div>\n <\/div>\n <div class=\"scene-art office\" style=\"min-height:420px\">\n <div class=\"monitor\"><div class=\"monitor-screen\"><h3>ARCHIVED DESKTOP<\/h3><p>Maybe the answer was visible from the beginning…<\/p><\/div><\/div><div class=\"desk\"><\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"7\">\n<div class=\"wrap\">\n <div class=\"chapter\">Chapter 4<\/div><h2>THE FINAL RIDDLE<\/h2>\n <div class=\"grid2\" style=\"align-items:center\">\n <div class=\"scene-art\" style=\"min-height:430px;background:radial-gradient(circle,#173047,#03080c 72%)\">\n <div style=\"position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:25px\">\n <div><div style=\"font-size:4rem\">\ud83d\udcbb<\/div><h2 style=\"color:white\">\u201cI disappear as soon as you say my name.\u201d<\/h2><\/div>\n <\/div>\n <\/div>\n <div class=\"card\">\n <p class=\"lead\">Type the answer in English or French.<\/p>\n <input id=\"riddleAnswer\" class=\"code-input\" style=\"letter-spacing:2px\" placeholder=\"answer\">\n <div id=\"riddleFeedback\"><\/div>\n <div class=\"actions\"><button class=\"primary\" onclick=\"checkRiddle()\">DECRYPT COMPUTER<\/button><\/div>\n <\/div>\n <\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"8\">\n<div class=\"wrap\">\n <div class=\"chapter\">Final file<\/div><h2>EMMA\u2019S ARTICLE<\/h2>\n <article class=\"article\">\n <h2>Inside Gotham Laboratory: The Experiments They Tried to Hide<\/h2>\n <p class=\"byline\">By Emma Lightwood \u2014 Investigative Desk<\/p>\n <p>Documents, scientific records and witness testimony indicate that restricted chemical experiments were conducted inside Gotham Laboratory. Official statements denied any abnormal event, but verified university records and internal logs contradict that account.<\/p>\n <p>The evidence must be handled responsibly. Identifying details concerning victims and vulnerable individuals have been removed while the public-interest findings remain intact.<\/p>\n <p><b>Editor\u2019s note:<\/b> Publication requires a final confirmation from the investigation team.<\/p>\n <\/article>\n <div class=\"actions\" style=\"justify-content:center\"><button class=\"success\" style=\"font-size:1.3rem;padding:20px 34px\" onclick=\"publishArticle()\">PUBLISH THE TRUTH<\/button><\/div>\n<\/div>\n<\/section>\n\n<section class=\"scene\" data-scene=\"9\">\n<div class=\"wrap\" style=\"text-align:center;align-items:center\">\n <div class=\"chapter\">Case closed<\/div><h1 id=\"endingTitle\">ARTICLE PUBLISHED<\/h1>\n <p class=\"lead\" id=\"endingText\">Emma\u2019s investigation has reached the public.<\/p>\n <div class=\"card\" style=\"width:min(760px,100%)\">\n <div class=\"grid3\">\n <div><div style=\"font-size:2rem\">\u23f1\ufe0f<\/div><b>TIME LEFT<\/b><p id=\"finalTime\"><\/p><\/div>\n <div><div style=\"font-size:2rem\">\ud83d\udd0e<\/div><b>CLUES FOUND<\/b><p id=\"finalClues\"><\/p><\/div>\n <div><div style=\"font-size:2rem\">\ud83d\udca1<\/div><b>HINTS USED<\/b><p id=\"finalHints\"><\/p><\/div>\n <\/div>\n <\/div>\n <div class=\"actions\"><button class=\"primary\" onclick=\"location.reload()\">PLAY AGAIN<\/button><button class=\"secondary\" onclick=\"print()\">PRINT RESULT<\/button><\/div>\n<\/div>\n<\/section>\n\n<div class=\"modal\" id=\"modal\"><div class=\"modalbox\"><div id=\"modalContent\"><\/div><div class=\"actions\"><button class=\"secondary\" onclick=\"closeModal()\">CLOSE<\/button><\/div><\/div><\/div>\n<div class=\"toast\" id=\"toast\"><\/div>\n<\/div>\n\n<script>\nconst S={\n scene:0,time:2700,timer:null,hints:3,started:false,selectedSources:new Set(),order:[],\n clues:[],phone:'',usedHints:0\n};\nconst sourceData=[\n ['A','Government press office','\u201cNothing abnormal occurred inside the research centre.\u201d'],\n ['B','Passer-by testimony','\u201cI saw strange lights and evacuations during the night.\u201d'],\n ['C','Interview with a doctor','\u201cAll our experiments are strictly controlled and safe.\u201d'],\n ['D','Social media post','\u201cThey are hiding something. My cousin works there. #TRUTH\u201d'],\n ['E','Official university report','A signed scientific report with named authors and methods.'],\n ['F','Unknown email','\u201cBelieve me. I know what happened. You are being lied to.\u201d']\n];\nconst testimonyData=[\n ['1','Driver returning home','\u201cThe firefighters arrived very quickly.\u201d'],\n ['2','Local farmer','\u201cAround midnight, a huge explosion from the laboratory drew the neighbourhood\u2019s attention.\u201d'],\n ['3','Farmer\u2019s wife','\u201cAt around 11 p.m., I saw three masked men near a white van.\u201d'],\n ['4','Firefighter','\u201cAfter entering, we discovered a large quantity of chemical products.\u201d']\n];\nfunction tone(freq=440,d=.08,type='sine'){\n try{const a=new(window.AudioContext||window.webkitAudioContext)(),o=a.createOscillator(),g=a.createGain();o.type=type;o.frequency.value=freq;o.connect(g);g.connect(a.destination);g.gain.setValueAtTime(.04,a.currentTime);g.gain.exponentialRampToValueAtTime(.001,a.currentTime+d);o.start();o.stop(a.currentTime+d)}catch(e){}\n}\nfunction showScene(n,title,text){\n document.querySelectorAll('.scene').forEach(x=>x.classList.toggle('active',+x.dataset.scene===n));\n S.scene=n;document.getElementById('progressBar').style.width=(Math.min(n,8)\/8*100)+'%';\n if(title)document.getElementById('missionTitle').textContent=title;\n if(text)document.getElementById('missionText').textContent=text;\n window.scrollTo(0,0);tone(520,.1,'triangle')\n}\nasync function startGame(){\n initGameUI();\n S.started=true;\n await enterFullscreen();\n if(!S.timer)S.timer=setInterval(tick,1000);\n showScene(1,'VERIFY THE SOURCES','Find the reliable evidence and unlock the secret room.');\n}\nfunction tick(){S.time--;document.getElementById('timer').textContent=fmt(S.time);if(S.time<=0){clearInterval(S.timer);endFailure()}}\nfunction fmt(s){s=Math.max(0,s);return String(Math.floor(s\/60)).padStart(2,'0')+':'+String(s%60).padStart(2,'0')}\nfunction toast(msg){const t=document.getElementById('toast');t.textContent=msg;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2200)}\nfunction addClue(c){if(!S.clues.includes(c)){S.clues.push(c);toast('CASE FILE UPDATED: '+c)}}\nfunction renderSources(){\n const box=document.getElementById('eljSources');\n if(!box)return false;\n \/\/ The cards are written directly in the HTML so WordPress cannot lose them\n \/\/ when it moves or delays the script. This fallback rebuilds them only if needed.\n if(box.querySelector('.source'))return true;\n sourceData.forEach(([l,t,b])=>{\n const d=document.createElement('button');\n d.type='button';d.className='source';d.dataset.letter=l;\n d.innerHTML=`<span class=\"letter\">${l}<\/span><span><b>${t}<\/b><br><span class=\"muted\">${b}<\/span><\/span>`;\n d.addEventListener('click',()=>toggleSource(d));box.appendChild(d)\n });\n return true;\n}\nfunction toggleSource(el){\n const l=el.dataset.letter;if(S.selectedSources.has(l))S.selectedSources.delete(l);else if(S.selectedSources.size<3)S.selectedSources.add(l);else return toast('Select exactly three sources.');\n el.classList.toggle('selected');document.getElementById('sourceLetters').textContent=[...S.selectedSources].sort().join('-')||'---';tone(650,.05)\n}\nfunction checkSources(){\n const picked=[...S.selectedSources].sort().join(''),code=document.getElementById('roomCode').value,fb=document.getElementById('sourceFeedback');\n document.querySelectorAll('#eljSources .source').forEach(x=>x.classList.remove('correct','wrong'));\n if(picked==='ACE'&&code==='1104'){document.querySelectorAll('#eljSources .source').forEach(x=>{if('ACE'.includes(x.dataset.letter))x.classList.add('correct')});fb.innerHTML='<p class=\"ok\">ACCESS GRANTED \u2014 secret archive unlocked.<\/p>';addClue('Verified sources: A-C-E');setTimeout(()=>showScene(2,'ORDER THE TESTIMONIES','Reconstruct the night of the incident.'),900)}\n else{document.querySelectorAll('#eljSources .source.selected').forEach(x=>x.classList.add('wrong'));fb.innerHTML='<p class=\"error\">ERROR \u2014 evidence set or access code rejected.<\/p>';tone(110,.25,'sawtooth')}\n}\nfunction renderTestimonies(){\n const box=document.getElementById('testimonies');\n if(!box)return false;\n if(box.querySelector('.testimony'))return true;\n testimonyData.forEach(([n,w,q],i)=>{const d=document.createElement('button');d.type='button';d.className='testimony';d.style.transform=`rotate(${[-2,2,1,-1][i]}deg)`;d.dataset.n=n;d.innerHTML=`<b>TESTIMONY ${n}<\/b><p>${w}<\/p><p>${q}<\/p>`;d.onclick=()=>chooseTestimony(d);box.appendChild(d)});\n return true;\n}\nfunction chooseTestimony(d){if(S.order.includes(d.dataset.n))return;S.order.push(d.dataset.n);d.classList.add('active');renderOrder();tone(700,.06)}\nfunction renderOrder(){document.getElementById('orderStrip').innerHTML=S.order.map(n=>`<span class=\"order-token\">${n}<\/span>`).join('')}\nfunction resetOrder(){S.order=[];document.querySelectorAll('.testimony').forEach(x=>x.classList.remove('active'));renderOrder()}\nfunction checkOrder(){if(S.order.join('')==='3214'){addClue('Timeline code: 3214');toast('Sequence confirmed. It points to Drawer 2.');setTimeout(()=>showScene(3,'OPEN THE CORRECT DRAWER','Use the sequence to locate the informant\u2019s number.'),800)}else{toast('The sequence is inconsistent. Start with the earliest precise time.');tone(120,.2,'square')}}\nfunction openDrawer(n){\n const r=document.getElementById('drawerResult');\n if(n===2){r.innerHTML='<h3 class=\"ok\">DRAWER 2 OPEN<\/h3><p>A torn card reads: <b>20 420 666<\/b><\/p>';addClue('Informant number: 20 420 666');setTimeout(()=>showScene(4,'CALL THE INFORMANT','Dial the recovered number.'),1000)}\n else{r.innerHTML='<h3 class=\"error\">EMPTY<\/h3><p>Dust. Nothing else.<\/p>';tone(100,.18,'square')}\n}\nfunction renderKeypad(){const k=document.getElementById('keypad');if(!k)return false;if(k.querySelector('.key'))return true;['1','2','3','4','5','6','7','8','9','*','0','#'].forEach(n=>{const b=document.createElement('button');b.type='button';b.className='key';b.textContent=n;b.onclick=()=>phoneKey(n);k.appendChild(b)});return true}\nfunction phoneKey(n){if(S.phone.length<11){S.phone+=n;document.getElementById('phoneDisplay').textContent=S.phone;tone(380+Number(n||0)*25,.06)}}\nfunction phoneClear(){S.phone='';document.getElementById('phoneDisplay').textContent=''}\nfunction callNumber(){\n const st=document.getElementById('callStatus');\n if(S.phone.replace(\/\\D\/g,'')==='20420666'){st.innerHTML='<p class=\"ok\">CONNECTED...<\/p>';tone(780,.3);setTimeout(showCall,600)}\n else{st.innerHTML='<p class=\"error\">NUMBER UNREACHABLE<\/p>';tone(90,.35,'sawtooth')}\n}\nfunction showCall(){\n addClue('Gotham Laboratory connection');\n document.getElementById('modalContent').innerHTML=`<h2>THE INFORMANT<\/h2><p class=\"lead\">\u201cEmma was investigating Gotham Laboratory. She found records of chemical experiments involving kidnapped infants and forced mutations. I worked there. I gave her the process logs and the list of chemicals.\u201d<\/p><p class=\"lead\">\u201cShe said she would hide them in a safe place \u2014 somewhere protected or concealed. I have already said too much.\u201d<\/p><p class=\"error\"><b>CALL TERMINATED.<\/b><\/p><button class=\"primary\" onclick=\"closeModal();showScene(5,'SEARCH THE SECRET ROOM','Find Emma\u2019s concealed briefcase.')\">SEARCH THE ROOM<\/button>`;\n openModal()\n}\nfunction liftBoard(){document.getElementById('briefcase').classList.add('visible');addClue('Hidden briefcase');toast('A metal briefcase was concealed beneath the floor.')}\nfunction openBriefcase(){showScene(6,'DECODE THE BRIEFCASE','Find the eight-digit date hidden in Emma\u2019s office.')}\nfunction checkBirthCode(){\n const v=document.getElementById('birthCode').value.replace(\/\\D\/g,''),f=document.getElementById('birthFeedback');\n if(v==='17051991'){f.innerHTML='<p class=\"ok\">BRIEFCASE UNLOCKED.<\/p>';addClue('Emma\u2019s birth date: 17\/05\/1991');setTimeout(()=>showScene(7,'SOLVE THE FINAL RIDDLE','Decrypt Emma\u2019s last computer.'),800)}\n else{f.innerHTML='<p class=\"error\">INCORRECT DATE. Look again at the first computer screen.<\/p>';tone(100,.2,'square')}\n}\nfunction checkRiddle(){\n const a=document.getElementById('riddleAnswer').value.trim().toLowerCase(),f=document.getElementById('riddleFeedback');\n if(['silence','the silence','le silence'].includes(a)){f.innerHTML='<p class=\"ok\">DECRYPTION COMPLETE.<\/p>';addClue('Final password: SILENCE');setTimeout(()=>showScene(8,'MAKE THE FINAL DECISION','Read and publish Emma\u2019s completed investigation.'),800)}\n else{f.innerHTML='<p class=\"error\">The answer disappears when spoken.<\/p>';tone(100,.2,'square')}\n}\nfunction publishArticle(){clearInterval(S.timer);tone(880,.5,'triangle');showScene(9);document.getElementById('finalTime').textContent=fmt(S.time);document.getElementById('finalClues').textContent=S.clues.length;document.getElementById('finalHints').textContent=S.usedHints}\nfunction endFailure(){showScene(9);document.getElementById('endingTitle').textContent='THE DEADLINE EXPIRED';document.getElementById('endingText').textContent='Emma\u2019s article remained hidden. Restart the case and follow the evidence more efficiently.';document.getElementById('finalTime').textContent='00:00';document.getElementById('finalClues').textContent=S.clues.length;document.getElementById('finalHints').textContent=S.usedHints}\nfunction hint(){\n if(!S.started)return toast('Start the investigation first.');\n if(S.hints<=0)return toast('No hints remaining.');\n S.hints--;S.usedHints++;document.getElementById('hints').textContent=S.hints;\n const h={1:'Choose sources with identifiable responsibility, expertise or documented methods. The room code is 1104.',\n 2:'The masked men were seen at 23:00, before the midnight explosion.',\n 3:'The sequence 3214 points directly to Drawer 2.',\n 4:'Dial 20 420 666 without spaces.',\n 5:'Inspect the loose floorboard.',\n 6:'Emma\u2019s birth date was visible in the lower-right corner of the first computer: 17\/05\/1991.',\n 7:'What vanishes when its name is spoken?',\n 8:'The investigation is complete. Publish the article.'};\n toast(h[S.scene]||'Inspect every visible detail.')\n}\nfunction showInventory(){\n const items=['Verified sources','Timeline reconstructed','Informant contacted','Hidden briefcase','Birth date decoded','Final computer decrypted'];\n document.getElementById('modalContent').innerHTML='<h2>CASE FILE<\/h2><div class=\"inventory\">'+items.map((x,i)=>`<div class=\"item ${i<S.clues.length?'':'locked'}\">${i<S.clues.length?'\u2713':'\ud83d\udd12'} ${x}<\/div>`).join('')+'<\/div><h3>Recovered clues<\/h3><ul>'+S.clues.map(x=>'<li>'+x+'<\/li>').join('')+'<\/ul>';\n openModal()\n}\nfunction openModal(){document.getElementById('modal').classList.add('open')}function closeModal(){document.getElementById('modal').classList.remove('open')}\n\nfunction fullscreenElement(){\n return document.fullscreenElement || document.webkitFullscreenElement || null;\n}\nasync function enterFullscreen(){\n const root=document.documentElement;\n try{\n if(fullscreenElement()) return;\n if(root.requestFullscreen){\n await root.requestFullscreen({navigationUI:'hide'});\n }else if(root.webkitRequestFullscreen){\n root.webkitRequestFullscreen();\n }\n }catch(e){\n toast('Use the FULL SCREEN button to hide the WordPress header.');\n }\n}\nasync function exitFullscreen(){\n try{\n if(document.exitFullscreen) await document.exitFullscreen();\n else if(document.webkitExitFullscreen) document.webkitExitFullscreen();\n }catch(e){}\n}\nasync function toggleFullscreen(){\n if(fullscreenElement()) await exitFullscreen();\n else await enterFullscreen();\n}\nfunction syncFullscreenUI(){\n const active=!!fullscreenElement();\n document.body.classList.toggle('is-fullscreen',active);\n const btn=document.getElementById('fullscreenBtn');\n if(btn) btn.textContent=active?'\u26f6 EXIT FULL SCREEN':'\u26f6 FULL SCREEN';\n}\ndocument.addEventListener('fullscreenchange',syncFullscreenUI);\ndocument.addEventListener('webkitfullscreenchange',syncFullscreenUI);\n\nfunction initGameUI(attempt=0){\n const game=document.getElementById('game');\n if(!game){\n if(attempt<30)setTimeout(()=>initGameUI(attempt+1),100);\n return;\n }\n renderSources();renderTestimonies();renderKeypad();syncFullscreenUI();\n}\nif(document.readyState==='loading'){\n document.addEventListener('DOMContentLoaded',()=>initGameUI(),{once:true});\n}else{\n setTimeout(()=>initGameUI(),0);\n}\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Emma Lightwood: The Missing Article \u2014 Visible Birth Date V7 LIGHTWOOD FILES V7 CASE NOT STARTEDFind Emma. Finish the investigation. 45:00 \u26f6 FULL SCREEN CASE FILE...<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1313","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/pages\/1313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/comments?post=1313"}],"version-history":[{"count":9,"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/pages\/1313\/revisions"}],"predecessor-version":[{"id":1343,"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/pages\/1313\/revisions\/1343"}],"wp:attachment":[{"href":"https:\/\/pcwallis.malo.wf\/index.php\/wp-json\/wp\/v2\/media?parent=1313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}